How can I make my own "Zoomable Icicle" from d3 - d3.js

I have "Visual studio Code" and "Go Live server"
I just want to make https://observablehq.com/#d3/zoomable-icicle to work on my own computer.
How do I make it work without anything else:
<!DOCTYPE html>
<html lang="us">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="main.js"></script>
<link rel="stylesheet" href="styles.css">
<script src="d3v7min.js"></script>
<title>Title</title>
</head>
<body>
<div id="chart"></div>
<svg width="960" height="500"></svg>
<script>
</script>
</body>
</html>

Related

js file not loading giving ERR_ABORTED 404

I have a Laravel/Vue3 project. For some reason I cannot get the right link to public/js/app.js.
My blade file:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
</head>
<body>
<div id="app">
<map-app/>
</div>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
In my .env file:
APP_URL=https://www.evenuitrusten.nl
ASSET_URL=${APP_URL}/bankjesserver/public
I then get the error:
GET https://www.evenuitrusten.nl/bankjesserver/public/js/app.js net::ERR_ABORTED 404
Where index.html is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
</head>
<body>
<div id="app">
<map-app/>
</div>
<script src="https://www.evenuitrusten.nl/bankjesserver/public/js/app.js"></script>
</body>
</html>
On my server, the url to app.js is
/home/blabla/domains/evenuitrusten.nl/bankjesserver/public/js
The URL in the script tag looks correct. Why am I getting a 404?
I tried all kinds of variations of Asset_URL, but non of them worked.
I tried to simplify the problem bij putting a test.js file in the same folder as my maps.blade.php. This file looks like:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
</head>
<body>
<div id="app">
<map-app/>
</div>
<script type='text/javascript' src='./test.js'></script>
<script type='text/javascript' src='{{ asset('js/app.js') }}'></script>
</body>
</html>
But also this line leads to a 4040 and teh test.js is not downloaded.

CSS not responding. Caching issue

<html lang="en">
<head>
<title>Corey Maller</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
I want to make some small changes to my css file but the website is not responding to them. Is there any kind of caching html code I could add to the header?

retina.js v2.0 not working for images

I trying to use retina.js v2.0 to swap images, but it's not working, I don't know why. I also check it in developer tools, but there's not any error. Can u help me, what could be the problem?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<img src="images/logo.png" data-rjs="2" alt="Logo">
<script type="text/javascript" src="retina.min.js"></script>
</body>
</html>

Have you figured this out? I am having the same issue. I found a resolution, by calling retinajs() directly after the script loads. But, reading the How It Works documentation does not say you need to do this.
Here is what I did:
<html lang="en">
<head>
</head>
<body>
<img src="/images/nav_logo.png" data-rjs="2">
<script type="text/javascript" src="/lib/retina/retina.min.js"></script>
<script>
retinajs();
</script>
</body>
Yes, this works but my question is whether it is "right"?

Basic highlightjs document won't work

Highlightjs has very simple usage instructions, which I can't seem to get to work in the document below. I would expect the html within the <pre> and <code> to be displayed, but all I see is the text. What am I doing wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre>
<code class="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>This should be escaped, highlighted html. </p>
</body>
</html>
</code>
</pre>
</body>
</html>

The answer is highlightjs does not escape code for you as was suggested to me. Good link here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre>
<code class="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>This should is highlighted html. </p>
</body>
</html>
</code>
</pre>
</body>
</html>

How to make simple example to explain jQuery.noConflict() with prototype?

How to make simple working (only if i remove/comment prototype) example to explain jQuery.noConflict() with prototype?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NO Conflict</title>
<link rel="stylesheet" href="hhttp://meyerweb.com/eric/tools/css/reset/reset.css" type="text/css" media="screen, projection" /><link />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
//your javascript code
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js"></script>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE7.js"></script>
<![endif]-->
</head>
<body>
<!--Example of conflict-->
</body>
</html>
http://jsbin.com/imuze3/2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NO Conflict</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
// Try decommenting the noConflict instruction to use prototype's $
//$.noConflict();
alert($('abc') == null);
</script>
</head>
<body>
<div id="abc"></div>
</body>
</html>

Resources