"Fixing" xkcd 1340 (or making the most redonkulous clock ever)

gistfile1.md

"Fixing" xkcd 1340 (or making the most redonkulous clock ever)

Update: feeling adventurous? Clone or fork the xkcd clock! If you just want to see it in action or get a glimpse of how it works, keep reading.

Problem

The date in xkcd's comic number 1340 does not change.

Solution

Since Randall publishes his comics under a permissive license, anyone can fix this problem and let the guy focus on more important issues, like writing great comics.

We propose the following approach:

1. Grab the original image and erase the date using a raster graphics editor, such as the GIMP.
2. Save the image to PNG and convert it to base 64.
3. Obtain the xkcd font and convert it to a web font using FontSquirrel's font-face generator. Select the "expert" mode and check "Base 64 encode."
4. Put all the parts together with HTML, CSS and Javascript, just like in the reference implementation

The results can be seen in http://jsfiddle.net/Lej6m/4/.

Overengineering the solution

In the spirit of the HTML clocks posted on HN, it is possible to make Cueball update its speech bubble every second, making http://jsfiddle.net/Lej6m/25/ the first instance of an xkcd-inspired clock that the author is aware of.

Conclusions

In this Gist, we have shown that it is possible to waste one's time to build an awesome clock using an xkcd comic strip as a clock face. The techniques shown in this work can be extended to other webcomics, or to newspaper comics that have been previously scanned.

Acknowledgements: Randall Munroe for the comics, Kyle Kelley and/or Brian E. Granger for the xkcd font, Mads Kristensen for the image to base64 converter and Font Squirrel for the font converter tool.

I made it a little more subtle.

Wow, this is cool! By the way, I didn't get why the image and font had to be converted to base64?

There is a slight difference when viewing on a retina display, you can notice some difference in the resolution of the picture and the font.

@ssb402: The image and font are embedded in the CSS using a data URI, that's why. If you don't want/need to embed them, then you just have to host the original PNG and the webfont somewhere on the web.

If you add the following CSS to the #xkcddate section, the cursor won't change and you won't be able to highlight the text, just like an image. (see http://jsfiddle.net/7CTBr/2/)

div#xkcddate {
    // other things here ...
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

This is cool! Now I'm waiting for a similar version of https://xkcd.com/1335/ ;-)

I wonder how hard it would be to edit the font so all the digits have the same width... the clock bouncing around as the seconds change width is a bit distracting...

@christianbundy and @sloanesturz: thanks a lot! Your suggestions have been incorporated into http://jsfiddle.net/Lej6m/25/ .

1. This is a great idea, and very well implemented!
2. Thank you for pointing out that there is a good version of the XKCD font, I shall use it in my HTML port of Frequency (which is a good thing to look at if you're interested in other XKCD comics being HTML-ified.

@tomlof Yes! Do it!! Great idea!

@mrphlip fixed

If you use a subset of the letters of the font, namely "1234567890:- " then the css file becomes smaller. You can also make the png a lot smaller. See both changes here (nothing visibly changes, only the base64 strings):

http://jsfiddle.net/Lej6m/46/

Together this decreases the css file from 46kb to 16kb!!!1!11!

You inspired me to do a quick version of https://xkcd.com/now/ => http://meandavejustice.github.io/xkcd-now/

More clocks: http://xkcd.com/1335/

You can add a 1px dropshadow to the text to compensate for the weight and aliasing differences.

text-shadow: 0 0 1px rgba(0,0,0,0.25);

http://jsfiddle.net/ryk52/1/

@tomlof and @DouglasLivingstone
Here's a couple shell scripts I wrote for 1335. The first gets the images, and the second gives the path to the correct image for the current time. I have a cron job running that uses the second script to get the image for my desktop wallpaper.
https://gist.github.com/chuckwagoncomputing/9242595
https://gist.github.com/chuckwagoncomputing/9242607

@hmottestad We could probably use canvas so that it's consistent on retina displays.

@tomlof - CSS and JS versions of 1335 on codepen

http://codepen.io/heyitsolivia/pen/soxHm

http://codepen.io/vincicat/pen/xGBCb