Skip to content

Instantly share code, notes, and snippets.

@hausen
Last active August 29, 2015 13:57
Show Gist options
  • Save hausen/9501041 to your computer and use it in GitHub Desktop.
Save hausen/9501041 to your computer and use it in GitHub Desktop.
"Fixing" xkcd 1340 (or making the most redonkulous clock ever)

"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.

@christianbundy
Copy link

@shobitb
Copy link

shobitb commented Mar 12, 2014

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

@hmottestad
Copy link

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.

@hausen
Copy link
Author

hausen commented Mar 12, 2014

@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.

@sloanesturz
Copy link

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;
}

@tomlof
Copy link

tomlof commented Mar 12, 2014

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

@mrphlip
Copy link

mrphlip commented Mar 12, 2014

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...

@hausen
Copy link
Author

hausen commented Mar 12, 2014

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

@basicallydan
Copy link

  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!

@haithembelhaj
Copy link

@eikes
Copy link

eikes commented Mar 12, 2014

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!

@meandavejustice
Copy link

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

@DouglasLivingstone
Copy link

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

@deckar01
Copy link

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/

@chuckwagoncomputing
Copy link

@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

@coreh
Copy link

coreh commented Mar 12, 2014

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

@keithwyland
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment