Do we need to write markup?

Exploring the history and efficacy of one of our most ubiquitous tasks: writing markup.

Transcript

1. <h1>Do we need to write <strong>markup</strong>?</h1>
2. <blockquote>Learning thrives in an environment where you can be fearless with questions and generous with answers.</blockquote> <cite>&ndash; Kathy Sierra, two days ago</cite>
3. <h2>Who do I think I am?</h2>
4. http://home.web.cern.ch/
5. http://info.cern.ch/hypertext/WWW/TheProject.html
6. http://line-mode.cern.ch/
7. http://home.web.cern.ch/topics/birth-web
9. http://a.tgcdn.net/images/products/additional/large/1107_unicorn_head_mask_inuse.jpg
10. http://a.tgcdn.net/images/products/additional/large/1107_unicorn_head_mask_inuse.jpg
11. <h2>Why are we here?</h2>
12. 1: Initial (Chaotic) 2: Repeatable 3: Defined 4: Managed 5: Optimized Capability Maturity Model
13. 1: Initial (Chaotic) 2: Repeatable 3: Defined 4: Managed 5: Optimized Capability Maturity Model
14. 1: Initial (Chaotic) 2: Repeatable 3: Defined 4: Managed 5: Optimized Capability Maturity Model
15. 1: Initial (Chaotic) 2: Repeatable 3: Defined 4: Managed 5: Optimized Capability Maturity Model
16. 1: Initial (Chaotic) 2: Repeatable 3: Defined 4: Managed 5: Optimized Capability Maturity Model
17. 1: Initial (Chaotic) 2: Repeatable 3: Defined 4: Managed 5: Optimized Capability Maturity Model
18. <h2>Can we optimize HTML?</h2>
19. <blockquote>After all this research on humane markup languages, much to my chagrin, I've come full circle. I now no longer think humane markup languages make sense for most uses. … HTML is generally the better choice</blockquote> <cite>&ndash; Jeff Atwood, 2008</cite>
20. <h3>HTML = PRETTY DAMN GOOD ALREADY.</h3>
21. <h2>What is markup?</h2>
22. http://www.amazon.com/Weaving-Web-Original-Ultimate-Destiny/dp/006251587X/
25. Source of http://http://info.cern.ch/hypertext/WWW/TheProject.html/hypertext/WWW/MarkUp/Tags.html
26. http://info.cern.ch/hypertext/WWW/MarkUp/Tags.html
27. <blockquote>When designing the HTML document type, consideration was given to a certain simplicity in order to allow many browsers and hopefully editors to be developed on many platforms.</blockquote> <cite>&ndash; Sir Tim Berners Lee, 1993-ish</cite>
28. <h3>According to Tim:</h3> <ul> <li>HTML was always intended to be generated by a 
 machine.</li> </ul>
29. <h3>According to Tim:</h3> <ul> <li>HTML was always intended to be generated by a 
 machine.</li> <li>HTML was intended for content.</li> </ul>
30. <h3>According to Tim:</h3> <ul> <li>HTML was always intended to be generated by a 
 machine</li> <li>HTML was intended for content</li> <li>HTML was intended for <strong>everyone</strong></li> </ul>
31. <ul> <li>Markup is <strong>NOT CODE</strong></li> </ul>
32. <ul> <li>Markup is <strong>NOT CODE</strong></li> <li>Markup is <strong>DESIGN</strong></li> </ul>
33. <ul> <li>Markup is <strong>NOT CODE</strong></li> <li>Markup is <strong>DESIGN</strong></li> <li>Markup is <strong>EASY</strong></li> </ul>
34. <ul> <li>Markup is <strong>NOT CODE</strong></li> <li>Markup is <strong>DESIGN</strong></li> <li>Markup is <strong>EASY</strong></li> <li>Markup is <strong>UNFORGIVING</strong></li> </ul>
35. <h2>What are the cognitive costs of markup?</h2>
36. <dl> <dt>Ego Depletion</dt> <dd>Self-control or willpower draw upon a limited pool of mental resources that can be used up.</dd> </dl>
38. <img src="../img/fruit.jpg" alt="Fruit" /> ! <img src="../img/cake.jpg" alt="Cake" />
39. <dl> <dt>Flow</dt> <dd>Mental state in which a person is fully immersed 
 in a feeling of energized focus, full involvement, and enjoyment in an activity.</dd> </dl>
40. Mihály Csíkszentmihályi
41. var MC = Mihály Csíkszentmihályi;
42. <ol> <li>Intense and focused concentration on 
 the present moment</li> <li>Merging of action and awareness</li> <li>A loss of reflective self-consciousness</li> <li>A sense of control over the activity</li> <li>A distortion of temporal experience</li> <li>Experience of the activity as 
 intrinsically rewarding</li> </ul>
43. <ol> <li>Intense and focused concentration on 
 the present moment</li> <li>Merging of action and awareness</li> <li>A loss of reflective self-consciousness</li> <li>A sense of control over the activity</li> <li>A distortion of temporal experience <li>Experience of the activity as 
 intrinsically rewarding</li> </ul>
44. <ol> <li>Intense and focused concentration on 
 the present moment</li> <li>Merging of action and awareness</li> <li>A loss of reflective self-consciousness</li> <li>A sense of control over the activity</li> <li>A distortion of temporal experience <li>Experience of the activity as 
 intrinsically rewarding</li> </ul>
45. <dl> <dt>Anti-Flow</dt> <dd>Mental state in which a person is fully immersed in a feeling of <strike>energized focus, full involvement, and enjoyment</strike> tedium in an activity.</dd> </dl>
46. <dl> <dt>Siloing</dt> <dd>An insular org structure incapable of reciprocal operation with other, related teams or individuals.</dd> </dl>
47. http://www.amazon.com/Where-Good-Ideas-Steven-Johnson/dp/1594485380/
48. <blockquote>Good ideas may not want to be free, but they do want to connect, fuse, recombine. They want to reinvent themselves by crossing conceptual borders. They want to complete each other as much as they want to compete.</ blockquote> <cite>&ndash; Stephen Johnson, 2011</cite>
49. http://uproxx.files.wordpress.com/2014/05/sad-batman-meme-batfleck-03.gif?w=650
50. <ul> <li>Ego Depletion</li> <li>Anti-Flow</li> <li>Siloing</li> </ul>
51. <h2>What can we do about it?</h2>
53. <ol> <li>Call the company</li> <li>Describe what you need</li> <li>Wait on the street</li> <li>Pay</li> <li>Receipt</li> </ul>
54. <button type="submit">Pick me up</button>
55. <h3>A clearer mental model = faster adoption.</h3>
56. <h3>Current models</h3>
57. <h3>Current models</h3> <ul> <li>Word processor</li> </ul>
58. <h3>Current models</h3> <ul> <li>Word processor</li> <li>Drawing boxes</li> </ul>
59. <h2>What about lists?</h2>
65. <h3>Efficiencies of the list model</h3> <ul> <li>Semantics, and validation built in</li> </ul>
66. <h3>Efficiencies of the list model</h3> <ul> <li>Semantics, and validation built in</li> <li>An interface for learning</li> </ul>
67. <h3>Efficiencies of the list model</h3> <ul> <li>Semantics, and validation built in</li> <li>An interface for learning</li> <li>Smart defaults</li> </ul>
68. <h2>Styling, too?</h2>
71. Pad in Pad out .box { padding: 1em; box-sizing: border-box; } .box { padding: 1em; box-sizing: content-box; }
72. float: left; clear: none; float: left; clear: left; float: right; clear: none; float: right; clear: right; float: none; clear: both;
73. <h2>What shall we do with our days?</h2>
74. <h3>Get home faster</h3>
76. <h3>Less typing, more thinking</h3>
77. <h3>Explore the &ldquo;Adjacent Possible&rdquo;</h3>
78. <blockquote>The adjacent possible is a kind of shadow future, hovering on the edges of the present state of things, a map of all the ways in which the present can reinvent itself. … The strange and beautiful truth about the adjacent possible is that its boundaries grow as you explore them.</blockquote> <cite>&ndash; Stephen Johnson, 2011</cite>
79. <h2>Thank you!</h2> ! ! ! <p class="twitter">@nathan_ford</p> <br> <p class="github">nathanford</p> <br> <p class="email">nathan@artequalswork.com</p>
80. <h3>Further reading</h3> <ul> <li>Understanding the Dangers of Ego Depletion</li> <li>The End of Design As We Know It</li> <li>Is HTML a Humane Markup Language?</li> <li>The birth of the web</li> <li>The first website</li> <li>The Genius of the Tinkerer</li> </ul>