An easteregg - literate programming style

As often, I am somewhat late to the party, but on the other hand, maybe you are one of today's lucky ten-thousand...

So, did you know, that when you type the words do a barrel roll (without quotation marks) into Google's search field, the page with the results does as you bid, and turns over 360 degrees.

The implementation of this behavior can be achieved by adding a little style to the body, for example the following class:

If you want to try it out on this very website, you can use this input field.

The necessary logic to apply the styles is provided by this script:

Now, these little snippets of CSS and Javascript are not the whole point of this article. More interesting is, in my eyes at least, that what you just read is a literate program.

The code you read is not only a mere nicely formatted textual representation, but is the actual HTML style and script elements that control the rendering and behaviour of this website in your browser. This is achieved, by and large, by making the the script and style elements block-level elements, which makes their content visible. The tags themselves are rendered as content of the :before and :after pseudo selectors.

I've stolen adapted the styles from Colby Russell, who created and documented a whole static site generator in this programming style.

Another nerdy application of this idea is the naked, brutalist HTML quine by Leon Bambrick.