Graphical Explanations

Graphical Explanations

Thoughts on explaining technical concepts with shape, color, and type. From Write the Docs 2014 in Portland, OR.

A9d024f5032b8de04d7c74528beb77ab?s=128

Geoffrey Grosenbach

May 05, 2014
Tweet

Transcript

  1. Explanations GRAPHICAL Geoffrey Grosenbach VP of Open Source Content @topfunky

  2. None
  3. None
  4. None
  5. SKIM FLIP READ

  6. None
  7. None
  8. None
  9. Type

  10. I don’t think of source code control as code backup.

    I think of it as code talk, as communication. – Zed Shaw
  11. Meet Elixir Write concurrent programs with beautiful syntax on the

    highly scalable Erlang VM
  12. body {! width: 640px;! margin: 1em auto;! ! font-family: 'ff-tisa-web-pro';!

    } pygments SublimeHighlight
  13. ••••••• •••••••••••••• •••••••••••••• •••••••••••

  14. WARNING The Internet was not originally designed to do what

    we use it for now.
  15. Icons

  16. Symbolset / Symbolicons

  17. pancakes ☀ bike rocket squarekey sun

  18. #AS14

  19. Explanations

  20. Explanatory Tools • Bad/Good • Problem/Solution • Before/After • Good/Better/Best

    • Compare/Contrast • Analogy • Timeline
  21. http://jeremypowerscrosscamp.com/

  22. ⚠ + Single letter method names Vague, easy to forget,

    encourages sloppy code. Real words Self-documenting. Easy for you and other developers to understand and use months later.
  23. BEFORE AFTER http://fstoppers.com/how-­‐to-­‐photograph-­‐real-­‐estate-­‐architecture-­‐and-­‐interiors-­‐tutorial-­‐with-­‐mike-­‐kelley

  24. None
  25. <html>! ! ! ! ! ! ! ! ! !

    ! ! </html> <h1>Never get involved in a land war in Asia.</h1>! ! Beware of the <b>rodents</b> of <i>unusual</i> size.! ! Never get involved in a land war in Asia. ! Beware of the rodents of unusual size.
  26. Good /img/mountain.jpg Better /products/gloves ⚙ ⚙ ⚙

  27. None
  28. None
  29. Timeline

  30. #AS14 TEACHING IS DIFFICULT LEARNING IS DIFFICULT BECAUSE

  31. 4PM Design and UX of Documentation

  32. TEACH WITH US! geoffrey@pluralsight.com