Browser HTML parser adaptivity.

Intro

Yesterday I wrote two new JS libraries for npm, the first one is mussolini, you can see the code here.

For anyone who doesn’t know, Mussolini was the italian fascist dictator that ruled over Italy before and during most of the WWII. This repo and this library are in no way a celebration of him and his life, since they are mostly conceived thinking about how he died; near the end of the war he tried to escape to Switzerland dressed as a german soldier, but he was still captured and killed. His corpse then was brought to Milano, where he was hung upside down in Piazzale Loreto (a huge place in the city), where people would throw stones and spit at it.

The purpose of my library is to celebrate his upside down hanging.

The library

The library currently exposes 2 functions: visibleMussolini and hiddenMussolini.

The first one is frankly uninteresting, it just rotates the body to get it upside down. Not very clever, I must admit, but I thought that it made sense to add it.

The second one is the most interesting one, since it does something totally useless: as you might know, the html element in a web page is supposed to contain a head and a body, in that order. The function hiddenMussolini simply swaps the two children in order to have the head below the body.

How it works

It used to work like this:

But I found out it works the same if I simply do:

Since html can only have 1 head, it will remove the existing one. This causes a FOUC that can be almost invisible on some websites, but then everything seems to go back to normal.

What did I discover

The head should not be below the body. Yet, the browser has no problems with it, it simply works the same. This is because browsers can handle html that deviates from the standard.

Also, and this is really curious, css styles disappear when you take the element loading them from the DOM: this I did not expected, I always thought that once a style is loaded, it would work until specifically modified.

The last thing, is that I now want to write a small utility that allows you to generate a bookmarklet out of an importable javascript function.