Html: Write the tags of your dreams

Lets say we want to write some quick html and js thing to test something. We want a text field and a button to login with a username and if logged, some text with the username saying hello.

Ok, we skip all the html, head and body tags and we just write this:

<login>
    <input type="text">
    <button onclick="login()">Log in</button>
</login>

<hello>
    Hello <username>
</hello>

We add and a script tag in the end and we are done (and it works, this is not a joke)

It may not be obvious but we are not following the law of the "Valid custom element names" and if we then define some components with these name you are going to get the "Failed to execute 'define', 'hello' is not a valid custom element name".

Very important check, image this check not being there all the bad things that could happen. Like when you try to create a component "icon" but there is no hyphen there, so you spend all day trying to figure out if "a-icon" or "icon-" is the least ugly of the two, and then you are unable to sleep thinking that there must be some other way to cheat the system... there must be... Thank you whatwg.

done_

Html: Enter handler on input text field

Every single time you have a input text field and submit-like button next to it, at some point, you would like to bind the same action of the submit button to the press of the enter key.

It's trivial, but also it's simply better to just copy-paste it. So here its is:

function onenter(ele, f) {
	ele.addEventListener('keydown', function (e) {
		if (e.keyCode === 13) { f(e); e.preventDefault(); }
	})
}

And also while we are here, instead of using the-not-be-named lib, just use these:

function q(x) { return document.querySelector(x); }
function qa(x) { return [...document.querySelectorAll(x)]; }
function range(x) { return Array.from({length: x}, (v, i) => i); }

For more just go here.

done_

Html: Unwanted cached resources

So as you write a simple a html file with one or two resources, lets say one css and one js file, and you then deploy it (= copy paste) to a sever, and then you make some changes (= fix a bug), and then you redeploy (= copy paste, overwrite popup, press yes), and then nothing changes.

The browser, like always, remembers the old 'main.js' from before and then you pres Ctrl+F5. But your tester in the other side, has no clue what a Ctrl is. So you have to do something.

The first thing is to add a simple '?1' at the end of 'main.js' and every other resource, the browser thinks it may be a different file and deletes the cached version.

So now lets make a script to automate the replacement of the '?1' with '?2':

sed 's/"\(.*\)?.*"/"\1?2"||/' -i index.html

But we may want the browser to actually keep some cached files, the files that have not changed. Only if, instead of '?2', we could generate a number that only changes if the actual file changes and also does not repeat it self.

Hash functions? Checksums? Yes.

Lets use 'md5sum' to freak out the people who don't know. A single sed will not make it, lets write a sed to generate multiple seds and pipe it into a sh.

First we find checksums:

find -regex '.*\(js\|css\)$' -exec md5sum {} \+

Then we pipe that to our first sed:

sed 's/\(.*\)  \(.*\)/ ... \2 ... \1 ... /'

where in the place '...' we reconstruct version of our original sed (gets very unreadable). And finally we pipe it to a sh to actually do the substitution.

The whole thing if placed in Makefile would look like this:

index.html: *.css *.js
    find *.css *.js -exec md5sum {} \+ | \
        sed 's/\(.*\)  \(.*\)/sed \"s|\\"\2?[^\\"]*|\\"\2?\1|\" -i index.html/' | sh

_done

Html: Input tag drop-down list

The classic way to have a drop-down list in html is the select tag.

However there are two main problems/inconvenient. The select tag will only allow to select one item and you cannot type for a not included option or just to filter the list options. Also sometimes just have all the input fields under the same tag name <input> is just niter.

An other way is the <datalist>, that for some reason I learned about it lately (sad).

The classic example:

<input list="hashes">
<datalist id="hashes">
  <option value="sha1">
  <option value="sha256">
  <option value="sha512">
</datalist>

done_ 

HTML: Canvas background

To have a canvas as a html page background we need:

HTML:

<body onload="load()">
  <canvas id="canvas_back"></canvas>
  ...
</body>

CSS:

#canvas_back {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: -1;
}

JavaScript:

var c, w, h;

function load() {
  var canvas = document.getElementById("canvas_back");
  c = canvas.getContext("2d");

  window.addEventListener('resize', resize, false);
  resize();
}

function resize() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
  draw();
}

function draw() {
  // use c, w and h to draw the canvas
  ...
  requestAnimationFrame(draw);
}

Demo 1


done_