[josephwegner]

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!

[bbx]

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.

[resu_nimda]

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/

[hueving]

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

[resu_nimda]

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

[tg3]

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.

[oneeyedpigeon]

In my experience, unknown authors do tend to make terrible debut albums :)

[josephwegner]

I just tested out a new tutorial layout on my blog that utilized two columns.. It still has the code in the main column, but the examples get pushed to the side..

http://wegnerdesign.com/blog/learning-svg-with-logos/

[tripzilch]

Ooh that's really pretty.

I was going to bring up the IPython notebook functionality, in part because it was used as a follow-up to another xkcd strip ("Regex Golf", http://nbviewer.ipython.org/url/norvig.com/ipython/xkcd1313.... ), but I gotta say that one looks nicer :) The use-cases are slightly different, though.

[GhotiFish]

Jasmine did this too! http://pivotal.github.io/jasmine/

... todos.js' did it better though.

[emhart]

ifixit's layouts are actually a product of: http://www.dozuki.com/

[jffry]

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.

[jsvine]

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

[jffry]

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>

[Laremere]

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.

[moron4hire]

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.