under the hood

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu dui tellus. Mauris nisi enim, posuere id laoreet eget, laoreet sagittis ante. Vivamus finibus arcu id metus molestie vehicula.

Just kidding. Always good to start off a page with a fresh batch of Lorem ipsum, especially on a tech page exuberantly bubbling with cheerful technobabble. Anyway, herein is even more technical stuff – everything you always wanted to know but not necessarily today. By the way, your basic desktop browser will more easy-to-use for this page, what with the hashes and copy-and-paste of code and whatnot.

all your hash are belong to us

For fun, we build a unique robot for each web page derived from that web page. The robot, then, is a simple image representing that web page. If the robot changes, the web page must have changed. If the web page changes, the robot changes. (Of course, the website served with HTTPS, ensuring what is rendered in your browser is really what was intended.)

Robot graphics are generated by a local copy of the most excellent RoboHash code. See this write up about RoboHash. The RoboHash code takes a string, any string, and constructs a robot based on that string. For our robots, the string is a hash (also called a “message digest”) generated with a cryptographic hash function from preprocessed web page code (processed with our secret brew of interlocking code gears, pulleys, and steam pistons). So, before it is hashed, the web page code is flattened, reduced, and normalized down to basically a block of only alpha characters. There are several benefits of, and compelling arguments for, some sort of reduction before hashing which might be worth more paragraphs in the future.

So, suffice to say, the web page hashes are spun up with our own vaguely secret prep-then-hash mechanisms and, yes, you, too, can generate a hash and see if matches. After prepping the web page code, we hash it. For this work, hashing is done with MD5, useful for generating a short, handy hash length and, since we’re just building robots with a small finite number of possible assemblages (a built-in reduction)(identical robots is not out of question). Besides, we are not securing really important secret stuff, no worries here about collision attacks on MD5. All said, MD5 is plenty good for what we’re about here, that is, generating unique strings representing web pages to generate robots.

Want to see the secret code? Keep reading, it’s up just ahead. Indeed, it’s not every day that such light lunch reading magically appears.

first, preprocess and then hash the web page

There are a million stories in Hash Prep City and this is just one of them. By the way, you can hash anything “as is” – it doesn’t have to be prepped. We prep to reduce and simplify what we are hashing, yet not so reduced that uniqueness is lost. Think of it as one variation on lossy compression. In this arbitrarily determined process, we first flatten the web page code with the quite useful tr(1) to ensure a predictable, reduced block of text for hashing by simply stripping out spaces, blanks, punctuation, digits, control characters, and finally anything left that is not printable. This gives a reduced, predictable, consistent block of “enough content that counts,” minimizing error possibility, say, from retrieval or platform text differences. Then we pipe that reduced block of text to md5(1). Here’s the code snippet, written for ksh(1).

function htmlhash
{
 tr -d “[:space:]” | tr -d “[:blank:]” | \
 tr -d “[:punct:]” | tr -d “[:digit]” | \
 tr -d “[:cntrl:]” | tr -cd “[:print:]” | md5
}

get the web page

Now, pull down the website code and pipe it to the htmlhash function.

curl -s [pageurl] | htmlhash > somehash

then, compare hashes

Then diff(1) it with the hash listed for the page.

diff somehash publishedhash

a world of tools

For the curious, learn more about ksh, tr, md5, curl, and diff.

page hashes and related spiffy robots

A motley crew, indeed. Notably, this page is the only page not listed. Wait, what? A mystery! The answer to which is left as an exercise for the reader.


creative-energy-and-hard-work
c04d73a219ee4230342ba8a2d99a4841


the-importance-of-art-education
506b4b95fafec5d27b9233b7f62505f5


wordle
27fe4aa9b54845b7ad375213bcaadeb0


finishing-touches
f0adf5c5f341aecd1c1d02d22def5f23


ride-the-wave
c41314e0aaa1f9162b2c082d8119a650


living-in-the-digital-age
ba61a371c828a9ee08847f97e827d40e


creative-juices
5b449e64984b25b908ee9b239b4fc453


mothers-day-gnomes
ab94db2fbca383d465caf55ed70df1cc


poppies-and-sketch-crawls-and-rain-oh-my
23f8cbc943b73d3bb7161873d2d96a4d


22nd-world-wide-sketch-crawl-in-georgetown-texas
54af65514ebaf83c21ac40384f6dadd7


creative-energy-put-to-good-use
83853927d8deda9ed49dddb70c9c1d39


creativity-tastes-good
c525953f2e37972c66f0cb1bf404be0b


of-chairs-and-scale
dd5dd9fa592bdd763ccecb959cd9909f


convergence-bead-set–3
90cd779b047f2bfeee8f99a325a6208e


another-convergence-bead-set
d3021c9b085df34f10cf49fca20d48a1


convergence
cde3c63238a4eefb4a2fa2294db716c4


finished-the-shrines-for-now
a9dca50732d6a21373250f2c419d23bf


shrines-continued
95422dafc10b1f2b3335fb4c56523a29


something-new
670de0e3a2542904776895edf834a027


charismacolors
729302798c10861654943ddc254f4a1e


creative-stirrings
ae1dc2a6a79f5017e579df6cc48bcd59


taking-advantage-of-down-time
239542e29dcd9cb4742db811c1bf465d


okay-so-it-worked
5afe26d376cc73f3f4053cefb5384a64


the-point-of-this-is
9121c1c298694baa7a1829f0854f0a0c


getting-started
d4897ccca5f78a031fa9f4b08b99f441


index
1ff0d693a340886788175a5308f84af1

typefaces

Typefaces are courtesy Google Fonts and Font Squirrel. Licenses are documented for each typeface on their respective web pages linked in the colophon.

Web font format is WOFF2 and is the only font format delivered by this site. Nothing but cutting edge here. Typeface data is embedded in CSS for performance. The CSS property control font-variant-ligatures is in play. So is some kerning magic.

In theory, font rendering should only depend on your browser but, for example, in the case of Mac OS X, the OS version is also a factor; WOFF2 is not supported Mac OS X Yosemite and lower even with the very-latest new-fangled WOFF2-capable modern browsers. Peruse browser WOFF2 support.

If your browser of choice can’t handle WOFF2, the browser will roll back to generic defaults, which in any case will be far less of a typographical experience than designed and intended and maybe even cause your computing device to suddenly fold into a black hole, perhaps leaping time and space back to, say, 1874, with no electrical grid, internets or webtubulars to be found. Upgrading is no doubt prudent in that case.

Body fallbacks are typically Georgia and serif. Heading fallbacks are usually HelveticaNeue‑CondensedBold, Arial, and sans-serif.

modular scale

We use a modular scale to calculate heading sizes. In specific, the ratio of choice here is 1.250 otherwise known as Major Third. H2 and H3 are the only headings used through out, at least with this edition. Heading sizes calculated with Jeremy Church’s magical type scale. The relative value rem is used throughout the CSS, with just a tiny part using px or em. Plenty of good articles on the web about all this and more, starting with this excellent treatise on rem and em.

your browser’s secret life

For light lunch reading, check your browser’s ideally excellent support for HTML5 and CSS3.

the source and only the source

Coming soon! All the source, served by mercurial. Yep, no plans to use git around here. Source, no doubt, will definitely include the magical pumpkin code.