4 ms·

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

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!

jffry 13y ago
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 13y ago
  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 https://github.com/jsvine/reporter
  - Laremere 13y ago
    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.
  - jffry 13y ago
    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>
bbx 13y ago
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 http://backbonejs.org/docs/todos.html It also works with images: http://www.ifixit.com/Teardown/Mac+Pro+Late+2013+Teardown/20778 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.
- emhart 13y ago
  ifixit's layouts are actually a product of: http://www.dozuki.com/ http://www.dozuki.com/
- josephwegner 13y ago
  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/ http://wegnerdesign.com/blog/learning-svg-with-logos/
- GhotiFish 13y ago
  Jasmine did this too! http://pivotal.github.io/jasmine/ http://pivotal.github.io/jasmine/ ... todos.js' did it better though.
- resu_nimda 13y ago
  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/ http://jashkenas.github.io/docco/
  - hueving 13y ago
    >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?
    - tg3 13y ago
      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.
moron4hire 13y ago
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.

jffry 13y ago

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 13y ago
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 https://github.com/jsvine/reporter
- Laremere 13y ago
  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.
- jffry 13y ago
  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>

bbx 13y ago

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 http://backbonejs.org/docs/todos.html It also works with images: http://www.ifixit.com/Teardown/Mac+Pro+Late+2013+Teardown/20778 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.

emhart 13y ago
ifixit's layouts are actually a product of: http://www.dozuki.com/ http://www.dozuki.com/
josephwegner 13y ago
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/ http://wegnerdesign.com/blog/learning-svg-with-logos/
GhotiFish 13y ago
Jasmine did this too! http://pivotal.github.io/jasmine/ http://pivotal.github.io/jasmine/ ... todos.js' did it better though.
resu_nimda 13y ago
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/ http://jashkenas.github.io/docco/
- hueving 13y ago
  >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?
  - tg3 13y ago
    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.

moron4hire 13y ago

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.