Red Dirt JS


Published on

Slides from the opening keynote at Red Dirt JS conference.

Published in: Design, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Red Dirt JS

  1. 1. REDDIRT .jsThe—of HTML, CSS, & JavaScript Future Today   :)   November 3rd, 2011 @ Oklahoma City, OK
  2. 2. #whoami ? My name is Nathan. I do UX stuff at projekt202. But most people know me as "the 960 guy" (thats ok). | |
  3. 3. Note: You dont have to take notes feverishly.Download the slides & follow along:, talk smack about me on Twitter: @nathansmith
  4. 4. Today, I want to talk a bit about what the future of HTML, CSS, and JavaScript will look like.** My predictive powers are probably average (at best).
  5. 5. Difficult to see. Always in motion is the future.
  6. 6. In order to determine where were heading, lets reflect on where weve been...
  7. 7. Act IHow We Got Here
  8. 8. HTML
  9. 9. 1989: Tim Berners-Lee created HTML to link research docs.
  10. 10. "Storage of ASCII text, and displayon [80x24] screens, is in the shortterm sufficient, and essential.Addition of graphics would be anoptional extra with very much lesspenetration for the moment." – Tim Berners-Lee
  11. 11. HTML was for serious work. Initially, no <img> tag.
  12. 12. Then everyonegot ahold of it:
  13. 13. But, I digress.Were getting a littleahead of ourselves. (sorry)
  14. 14. Marc L. Andreessen Eric J. Bina
  15. 15. "Standardizing"  onbrowser  innovation.1993: MarcAndreessenproposed the<IMG> tag.Mosaic later becomesNetscape, which thenintroduces JS, SSL, etc.
  16. 16. JavaScript
  17. 17. Brandon Eich created JS in 10 days. "JS had to look like Java only less so, be Javas dumb kid brother or boy- hostage sidekick. Plus, I had to be done in ten days or something worse than JS would have happened."
  18. 18. Its not you, its me. Im all quirky and prototypical. Youre just too classy.JS Java
  19. 19. Object Inheritance #TLDRWith classical inheritance, ifyour mother breaks her leg, yougo visit her in the hospital. Withprototypical inheritance, yourleg would also (instantly) break. #TLDR = "Too Long, Didnt Read" aka: Sum it up for me :)
  20. 20. 1995: JavaScript debuted in Netscape Navigator 2.0.
  21. 21. Brief history of JS = Clear as mud...The word "JavaScript" was chosen to tap into thebrand name of the Java programming language.Sun Microsystems (since acquired by Oracle) ownedthe trademarks for both Java™ and JavaScript™, andstewarded the development of Java (not JavaScript).In 1997, JavaScript (the language) was standardizedby the European Computer ManufacturersAssociation, and it was dubbed "ECMAScript." m  -­  what? U |
  22. 22. Similar in name: JavaScript is to Java as Hamburger is to Ham. Altogether different beasts: Both potentially delicious (or dangerous), but not actually derived from the same animal.
  23. 23. (With apologies to Jeremy Keith and Brad Colbow)
  24. 24. 1996: IE 3.0 ships with "JScript" (for copyright purposes). In 1995, MS begins to ship Internet Explorer with Windows 95. For Netscape, it was the beginning of the end. Microsoft also reverse- engineered JavaScript, as "JScript."
  25. 25. Whos responsible for JavaScript now? {Created atNetscape "ECMA TC39" Committee responsible  for evolving the language to name a few... Defines the ECMAScript DOM API TM of Oracle (via Sun) |
  26. 26. JS browser support is pretty good.JavaScript (ECMAScript 3.0) is supportedfairly consistently in all major browsers. This is Wikipedias compatibility table* for: – Trident (IE) – Gecko (Firefox) – WebKit (Chrome & Safari) – Presto (Opera)* I realize those are rendering engines, not specific JS engines(which change names more rapidly). Its how Wikipedia lists em.
  27. 27. JavaScript is that friend in highN ice  > school you secretly had a crush on, but was always hanging out with that sleazy boyfriend, DOM. W hat  a  punk
  28. 28. The Document Object Model (DOM) is whatallows JS to interact with XML/HTML, ala:window.document.getElementsByTagName(*);The DOM is stewarded by a different group than governsJS. Browsers also implement it slightly differently. Forinstance, IE historically didnt treat whitespace as textnodes, even though the official DOM spec says it should.
  29. 29. 2005: Then there was jQuery...$(p.neat).addClass(ohmy).show(slow); JavaScript that reads like CSS code!? Heck  yeah!
  30. 30. But we treated it like CSS...$(document).ready(function() { // Many tutorials put all the code here.}); Um,  okay...  Whats  the  big  deal?
  31. 31. window.onload Loosely  translated: "Youd better lose yourself in the music, the moment. You own it, you better never let it go... You only get one shot, do not miss your chance to [load]." (with apologies to Eminem)
  32. 32. Beware the danger of abstraction & illiteracy. Really, its not the fault of jQuery, nor of any other capable JavaScript libraries: Dojo, MooTools, Prototype, Sencha, YUI... As is almost always the case with code, the problem is actually a human one. Weve become complacent and forgotten (or never learned) how JavaScript works.
  33. 33. CSS
  34. 34. 1994: Marc Andreessen, on styling... "Sorry, youre screwed."
  35. 35. 1994: Håkon Wium Lie proposed CSS. Initially it was called CHSS, ("Cascading HTML Style Sheets"), but was later shortened to simply CSS. 1996: The first browser to support CSS was Internet Explorer 3.0, followed closely by Netscape Navigator version 4.0.
  36. 36. CHSS had 100 levels of "!important" Thankfully, CHSS was never implemented:h1.font.size = 24px 12% /* 12% importance */h1.font.size = 16px 100% /* 100% importance */h1.font.size = 12px 89% /* 89% importance */ CSS has "last-in" wins, with specificity override.h1 {font-size: 24px;} /* Applies globally (weak) */h1.x {font-size: 16px;} /* More specific */h1 {font-size: 12px;} /* Beats line 1, not line 2 */
  37. 37. Brief history of the first "Browser War"
  38. 38. 1998: "Web Standards" advocacy begins. The box model isnt fixed until October 2006, release of IE7.
  39. 39. We made sites "best viewed in IE6,"and Netscape lost the browser war.
  40. 40. The "dark side" = developing for 1 browser.Oh, what... Like you never photoshoppedyou vs. yourself with a lightsaber? Cmon!
  41. 41. In 2001, IE had over 90% market share.
  42. 42. 2004: Firefox arose from Netscapes ashes. Thus began a new Browser War, still in progress.
  43. 43. Since then, IE has been in steady decline.
  44. 44. Chrome is gaining, at the expense of Firefox.
  45. 45. "My pure CSS demo only works in WebKit" "Those who cannot remember the past are condemned to repeat it." – George Santayana
  46. 46. Act IIWhere Were Going
  47. 47.
  48. 48. Realistically speaking, XHTML 2.0 wouldvebeen a very tough sell, from a practicalstandpoint. It was extremely rigid. A pagesimply would not render, if it wasnt perfectlyformed from an XML structure standpoint.Oh, and it wouldve done away with <img>. O h  noes!
  49. 49. There were differing schools of thought on HTML vs. XHTML.In the field Academic "make it valid""make it work"
  50. 50.  —> pid n ra tio it era
  51. 51. Ian Hickson, benevolent HTML5 specification dictator curator.
  52. 52. Technically, "HTML5" is now a misnomer. (But, itstoo late. Marketing already got ahold of it.) HTML isto be considered an ever-evolving "living standard".The "WHATWG" — Web Hypertext ApplicationTechnology Working Group — will continue to workon HTML, and the W3C will "snapshot" feature setsperiodically, and tag them with incremental versionnumbers: HTML5 (and presumably, HTML6, etc).Thus, no more version numbers in DOCTYPE...
  53. 53. HTML5 "killed" XHTML. Good riddance, says I. <!DOCTYPE html> <—  Much  easier  to  remember! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " DTD/xhtml1-transitional.dtd">As it turns out, "<!DOCTYPE html>" = minimum number ofcharacters to trigger "standards" mode in older IE versions.
  54. 54. You dont have to type extra junk anymore.<script> alert(This is some inline JS.);</script><script type="text/javascript" charset="utf-8">/* <![CDATA[ */ alert(Are you kidding me?);/* ]]> */</script>
  55. 55. Have you ever used a non-CSS stylesheet? (No?  Me  neither,  so  why  "type"  it?)<link rel="stylesheet" href="/path/file.css"><link rel="stylesheet" href="/path/file.css" type="text/css" media="all" />Note: Media queries best defined via @media in a singlestylesheet anyway, to avoid unnecessary HTTP requests.
  56. 56. I know what you XHTML purists are thinking:You cant do that! What about the validator?Relax. Its valid. HTML5 is no longer a sub-set of SGML like all versions of HTML beforeit. Nor is it a spin on XML, like XHTML 1.xwas. HTML is just HTML now. This is howbrowsers always treated (X)HTML anyway. (phew!)
  57. 57. What about JS? (Not stewarded by W3C) HTML5 CSS3
  58. 58.
  59. 59. Branding, FTW! So, whats next?1. Get cool logo(s). [X]2. Convince others. [X]3. Profit! [X]
  60. 60. Apple likes HTML5.
  61. 61. Google likes HTML5.
  62. 62. Mozilla likes HTML5.
  63. 63. Opera likes HTML5.
  64. 64. Microsoft likes HTML5.
  65. 65. HTML5 <canvas> is gaining traction.
  66. 66. As of IE9, all browsers support <canvas>.
  67. 67. 2011: IE9 supports SVG (proposed in 1999). Examples of Dojo.js charts To be fair, IE9 renders SVG very fast, via hardware acceleration. Konqueror (WebKit predecessor), was the first browser to have built-in SVG support, in 2004.
  68. 68. SVG is like construction paper. Layers retaindistinct shapes. SVG files can live without JS. And, each layer can respond to mouse events!
  69. 69. Canvas is like a whiteboard drawing, one layer.Note: Canvas only works in the browser via JS.
  70. 70. Quick CSS tip to fix IE9s SVG rendering: svg { overflow: hidden; }
  71. 71. IE9, without the CSS fix for SVG:
  72. 72. IE9, with the CSS fix for SVG:
  73. 73. SVG in: Chrome, Firefox, Opera, & Safari.
  74. 74. I wont cover <svg> or <canvas> in detail during this talk, but two helpful JavaScript libraries are worth noting...Raphaël (SVG) – Dmitry Baranovskiy Processing JS (Canvas) – John Resig
  75. 75. More  Semantic  Richness!New tagsin HTML5
  76. 76. <header role="banner"> Mixes  well  with  ARIA<nav role="navigation"><div role="main"> <aside> <article> <figure> <img /> <section> <figcaption> <hgroup> <p> <details> etc... <summary> <section> <p> <dialog> etc...<footer role="contentinfo">
  77. 77. WebGL is going to be HUGE (eventually)  The dawn of 3D browser graphics.aka: Can I play Farmville in IMAX!?
  78. 78.
  79. 79.
  80. 80. Metaprogramming Haml => HTMLSass/Compass => CSSCoffeeScript => JS Note: Yes, Im sure there are many, many more examples in the wild. But my time is finite, and this is what Im familiar with. | | |
  81. 81. Personal note: After giving em a try, I ambecoming more a fan of meta languagesthat treat whitespace as significant.Usual  disclaimers  apply:"It depends." Your mileage may vary. No purchasenecessary. Machine-wash only. Enter at own risk.Batteries not included. Void where prohibited, etc.
  82. 82. Example of Sass (with Compass).@import compass/css3 // CSS3 helpers, etc.// I write this Sass code:.foobar +background-image(linear-gradient(#fff, #ccc)) +border-top-right-radius(4px) +box-shadow(rgba(#000, 0.5) 0 2px 5px 0) &:hover text-decoration: underline
  83. 83. Example of Sass (with Compass)./* This CSS is generated... */.foobar { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #cccccc)); background-image: -webkit-linear-gradient(#ffffff, #cccccc); background-image: -moz-linear-gradient(#ffffff, #cccccc); background-image: -o-linear-gradient(#ffffff, #cccccc); background-image: -ms-linear-gradient(#ffffff, #cccccc); background-image: linear-gradient(#ffffff, #cccccc); -moz-border-radius-topright: 4px; BLOAT?  Not  really.  Youd -webkit-border-top-right-radius: 4px; -o-border-top-right-radius: 4px; -ms-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px; have  to  type  all  this  to  make  it   -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 2px 5px 0; -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 2px 5px 0; -o-box-shadow: rgba(0, 0, 0, 0.5) 0 2px 5px 0; work  cross-­browser  anyway. box-shadow: rgba(0, 0, 0, 0.5) 0 2px 5px 0;}.foobar:hover { text-decoration: underline;}
  84. 84. Note: Dont indent unnecessarily with Sass.// This looks innocent enough:table.table-class tbody tr td color: orange
  85. 85. Note: Dont indent unnecessarily with Sass./* But it generates this... */table.table-class tbody tr td { color: orange;}/* When you probably just meant... */.table-class .link-class { color: orange;}
  86. 86. Note: Dont steal another presenters topic. I could go on. But I wont. (Sorry Jina) Note: Jina Bolton is presenting on Sass later today. Dont miss it!
  87. 87. Haml rocks, if youre in a Ruby project. To me, Haml means never typing this again... </div></div></div>
  88. 88. Haml can generate nicely formatted HTML.
  89. 89. Im not an über-Ruby guy. Get your feet wet:
  90. 90. Okay, so abstraction for HTML and CSS is fine.It saves keystrokes, and those languages arepretty #yawn anyway, right? I mean, theyredeclarative, so of course we should automatewriting them. But this is a JS conference,right? Do not touch my JavaScript. I repeat...
  91. 91. get.your(coffee) { return off my lawn;}
  92. 92. Not everyones a fan. Dustin Diaz, quoting Douglas Crockford:
  93. 93.
  94. 94.
  95. 95. Can you spot the bug?var joe = 1, var joe = 1 sue = 2, sue = 2, bob = 3; bob = 3;Bugs like this can be laborious to find, which is why I write...
  96. 96. Nuthin wrong with being overly clear. var joe = 1; var sue = 2; var bob = 3;Minifiers like Uglify JS can handle removing repeated varkeywords. Put that burden on automation, not yourself. |
  97. 97. I just tell JSLint: "Hey JSLint... Shut up." Actually, is a great tool for checking for JavaScripterrors. But validation is a means to an end, not the goal itself.If you want to ensure JSLint compliance, theres CoffeeScript...
  98. 98. Recursion -> CoffeeScript is written in CoffeeScript.
  99. 99. CoffeeScript -to- JavaScript...# CoffeeScript: LOL  -­  Thats  all?$(#foobar).click -> # Do stuff.// JavaScript:$(#foobar).click(function() { // Do stuff.});
  100. 100. CoffeeScript = Syntactic Sugar...# CoffeeScript: Oh,  I  see.is_between = 3 < my_value < 12// JavaScript:var is_between;is_between = (3 < my_value && my_value < 12);
  101. 101. One last example... (Sorry Brandon)# CoffeeScript: Thats  hawt.happy = true unless raining// JavaScript:var happy;if (!raining) { happy = true;} Note: Brandon Satrom is presenting on CoffeeScript later today. Dont miss it!
  102. 102. BRAVE NEW WORLDHTML, CSS, JS, & Flash:Government canreach its citizensdirectly (1:1), viasocial media...
  103. 103. Ours is an era of technological marvels.
  104. 104. (Free) fonts used in this presentation. Lady Ice REDDIRT.js logo SteelFish Hand  of  Sean Titillium Text Anonymous Pro (Listed in order of appearance)
  105. 105. Code "reddirtjs" = 50% off Cody Lindleys book. (I tech-edited)
  106. 106. Shameless plug: Ill be speaking on Sass & Drupal next year.
  107. 107. Questions? I may (not) know the answer. Enjoy Red Dirt JS! Get the slides: Feel free to say hi on Twitter: @nathansmith