54 comments

[ 2.0 ms ] story [ 85.1 ms ] thread
There's more analysis here than reverse engineering. Nice work still.
Not super related to the content, but I love the "Show Code" button at the bottom of the article. So often sites either show code inline and break up my reading, or just dump the whole thing into a github repo, which loses context. That button is awesome, because I can read the whole thing to understand the problem, then review the code the next time through with better context.

Awesome!

It would be nice to have Show Code at the top, along with a note that some of the code has been hidden. I like seeing code examples as I'm reading through.
I'm the guy who built that, and I agree. I tinkered with having another "Show Code" button at the top, but my attempts looked bulky and distracting. Still trying to figure out a better way.

In the meantime, pull requests quite welcome: https://github.com/jsvine/reporter

As a note of feedback, I didn't notice the button at all. (Only knowing about its existence after looking at HN comments.) You do need to take a little bit a the viewer's attention for them to know about the feature.
Maybe something more discreet than a large button at the beginning, like:

  <p>(Code samples are hidden. <label><input type="checkbox" id="showCodeSamples"/> Show code samples</label>)</p>
I agree that having a "Show code" button only at the end prevents disrupting the reading flow.

In terms of "code with explanation" layout, I really like todos.js' approach: http://backbonejs.org/docs/todos.html

It also works with images: http://www.ifixit.com/Teardown/Mac+Pro+Late+2013+Teardown/20...

Most layouts nowadays fail to take advantage of the horizontal space available. It's just 2 colums in the end, but it goes a long way.

The todos.js one was generated by a tool called Docco, created by Jeremy Ashkenas (creator of Backbone, Underscore, and CoffeeScript). I agree that it looks really good and more people should use it for their projects!

http://jashkenas.github.io/docco/

>created by Jeremy Ashkenas (creator of Backbone, Underscore, and CoffeeScript)

Just out of curiosity, why did you include that? Do people make judgements about tools based on the person who wrote it?

I'd say yes. If you took the time to independently evaluate every tool that was ever produced, you wouldn't have time for anything else. So instead, people rely on crude, biased, but effective heuristics, the author's past achievements being one of them.

It's the same thing with novel authors - I'm much more likely to purchase a book by Stephen King than an unknown author's debut album if that's all I know about the books.

In my experience, unknown authors do tend to make terrible debut albums :)
Actually I was originally going to add "so that is why you will see it frequently on projects related to those technologies," just to give some background and link it all together (e.g. the cited example is hosted on the backbone site).

But yeah, it also gives it some star power and instant credibility, and I wanted to highlight jashkenas for his significant contributions. (As a side note I don't currently use any of them, I prefer Angular and vanilla JS syntax.)

I like it a lot, too. It's a concept I've toyed with, with JavaScript and tutorials. The particular example I used was a tutorial on Genetic Algorithms, and the form was a playground for being able to quickly edit fitness functions on the fly. Having tutorials that can execute their own code is awesome.
(comment deleted)
There are some really clever people in this world.

One to make it.

One to take it apart.

Does anyone know the answer to the "turn signal problem" he poses? Why does the beat frequency he observes match what he calculated?
I'm still trying to understand where the frequency is stored? Is it a value that can be embedded into the gif?
Gifs don't have a constant FPS. You can specify with some precision how long they should display each frame.
oh I see - thanks for that, interesting stuff
For anyone wondering how to dump gif loop time.

    curl -s http://imgs.xkcd.com/comics/frequency/turnsignal1.gif | 
        giftext | grep DelayTime | cut -d':' -f 2 | awk '{s+=$1} END {print s/100}'
The results seem to correspond with authors table.
Click the show code button at the bottom. They did dump the values (but they wrote their own gif parser...).
Ah thanks, I completely missed that button. I just typed 'gif' in to my terminal and hit tab to see what I had installed, then read the manpage for the most favourable looking binary
I can't imagine a better followup to an xkcd strip. Bravo.
I was really hoping Munroe himself would publish the data. I'm glad someone else did, with the helpful explanations.
Awesome, this is one of my favorite XKCDs. I've been mulling over a plan in my mind to make a physical version of it, looking similar to a deep picture frame or display case. It would use white acrylic with the text somehow printed or transferred on, backlit by white LEDs (maybe incandescent lamps would look nicer?). Each cell would be separated by thin black wood or plastic strips. It should be pretty easy to control the whole thing with an arduino, and I think it would make an awesome wall display.
I've been thinking about something similar but it's more one of those "it'd be cool if I built this..." with no such plan to actually do it.

Ping me if you do end up making one!

Get this story in your mailbox with daily newsletter for top 5 HN Post, signup at http://top5hn.launchrock.co Stats after creating the landing page in last 24hours: 944 Page Views 101 Signups Newsletter Stats 41% Open Rate 40% CTR
To me the most interesting thing in this article were the urls of the inlined images, <img src="data:image/png;base64,...> I had no idea you could do that.
That technique is really useful when serving a site via web sockets.
IE 7 doesn't support it, and IE 8 limits you to 32 KB data uri's. IE also only supports images, stylesheets and javascript, while other browsers let you be a bit more creative with things like generating pdf's and excel files client-side.
Didn't get the "A european resident has their first kiss" though. Wouldn't it make more sense to divide the frequency by two and state "Two european residents have their first kiss"?
It very well may only be one of the participants' first kiss.
roma1n said "Two european residents have their first kiss", not "Two european residents each have their first kiss". It would definitely be their first kiss. Do I win pedant fight? :)
I am trying to apply the Chinese remainder theorem to solve the time required for all of the events to occur simultaneously. I am ignoring the GIF timing bug.

  1. Normalize times to integers.
  2. Assume congruence at x = t mod (t+1).
  3. Solve congruence system.
  4. Denormalize result.
Python solution: http://ideone.com/Wh2SR6 Solution perspective: http://www.wolframalpha.com/input/?i=35417600268377072234556...
I sometimes wish a HN comment could be 'favourited'.
(comment deleted)
> Frequency alludes to the empirically-proven fact that no two cars' turn signals blink at the same rate

Sounds like something that can be disproved empirically, but not proven.

This page is hard crashing Safari latest on my MBP 2013. Anyone else experiencing this?
yeah, same problem here. safari on a 2013 air starts to load the top of the page then stops responding... :( seems fine in firefox though
What I found interesting was the format of the gifs themselves. They were mostly or completely uncompressed, totaling 8MB. I can only think of one possible reason to do this, which would be to take advantage of HTTP compression to go inter-frame instead of using the builtin intra-frame that gifs have (.5MB vs 4MB). But HTTP compression was turned off too.
I'm completely distracted by the fact that this was #1331.

Surely he must have something truly epic saved up for 1337.

Right? Anyone?