Red Dirt JS

6,207 views
6,047 views

Published on

Slides from the opening keynote at Red Dirt JS conference.

Published in: Design, Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,207
On SlideShare
0
From Embeds
0
Number of Embeds
90
Actions
Shares
0
Downloads
36
Comments
0
Likes
11
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 http://reddirtjs.com
  2. 2. #whoami ? My name is Nathan. I do UX stuff at projekt202. But most people know me as "the 960 guy" (thats ok).http://sonspring.com | http://960.gs | http://projekt202.com
  3. 3. Note: You dont have to take notes feverishly.Download the slides & follow along: http://slidesha.re/nathansmithOr, 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. HTMLhttp://w3.org/People/Raggett/book4/ch02.html
  9. 9. 1989: Tim Berners-Lee created HTML to link research docs. http://w3.org/People/Berners-Lee
  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 http://w3.org/History/1989/proposal.html
  11. 11. HTML was for serious work. Initially, no <img> tag. http://en.wikipedia.org/wiki/CERN
  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. Binahttp://en.wikipedia.org/wiki/Mosaic_(web_browser)
  15. 15. "Standardizing"  onbrowser  innovation.1993: MarcAndreessenproposed the<IMG> tag.Mosaic later becomesNetscape, which thenintroduces JS, SSL, etc.
  16. 16. JavaScript http://oreilly.com/pub/a/javascript/2001/04/06/js_history.html
  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." http://en.wikipedia.org/wiki/Brendan_Eich
  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. http://en.wikipedia.org/wiki/Netscape_Navigator
  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 http://en.wikipedia.org/wiki/JavaScript | http://en.wikipedia.org/wiki/ECMAScript
  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)http://coding.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comic-strip
  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." http://en.wikipedia.org/wiki/Internet_Explorer
  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) http://en.wikipedia.org/wiki/JavaScript | http://en.wikipedia.org/wiki/ECMAScript
  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.http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(ECMAScript)
  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 http://w3.org/DOM
  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. http://w3.org/DOM
  29. 29. 2005: Then there was jQuery...$(p.neat).addClass(ohmy).show(slow); JavaScript that reads like CSS code!? Heck  yeah! http://jquery.com
  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)http://en.wikipedia.org/wiki/8_Mile_(film)
  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. http://ejohn.org/blog/javascript-language-abstractions
  33. 33. CSShttp://w3.org/Style/LieBos2e/history/Overview.html
  34. 34. 1994: Marc Andreessen, on styling... "Sorry, youre screwed." http://intercom.co.cr/www-archives/1994-q1/0648.html
  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. http://people.opera.com/howcome/2006/phd
  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 */ http://www.w3.org/People/howcome/p/cascade.html
  37. 37. Brief history of the first "Browser War" http://en.wikipedia.org/wiki/Browser_wars
  38. 38. 1998: "Web Standards" advocacy begins. The box model isnt fixed until October 2006, release of IE7. http://w3.org/Style/LieBos2e/history/Overview.html
  39. 39. We made sites "best viewed in IE6,"and Netscape lost the browser war. http://en.wikipedia.org/wiki/Netscape_Navigator
  40. 40. The "dark side" = developing for 1 browser.Oh, what... Like you never photoshoppedyou vs. yourself with a lightsaber? Cmon! http://flickr.com/photos/nathansmith/32757176
  41. 41. In 2001, IE had over 90% market share. http://en.wikipedia.org/wiki/File:Browser_Wars.png
  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. http://en.wikipedia.org/wiki/File:Usage_share_of_web_browsers_(Source_Net_Applications).svg
  44. 44. Chrome is gaining, at the expense of Firefox. http://en.wikipedia.org/wiki/File:Usage_share_of_alternative_web_browsers_(Source_StatCounter).svg
  45. 45. "My pure CSS demo only works in WebKit" "Those who cannot remember the past are condemned to repeat it." – George Santayana http://en.wikipedia.org/wiki/George_Santayana
  46. 46. Act IIWhere Were Going
  47. 47. http://zeldman.com/2009/07/02/xhtml-wtf
  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 erahttp://whatwg.org/specs/web-apps/current-work/multipage
  51. 51. Ian Hickson, benevolent HTML5 specification dictator curator. http://en.wikipedia.org/wiki/Ian_Hickson
  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" "http://www.w3.org/TR/xhtml1/ 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!) http://en.wikipedia.org/wiki/HTML
  57. 57. What about JS? (Not stewarded by W3C) HTML5 CSS3 http://w3.org/html/logo
  58. 58. https://github.com/voodootikigod/logo.js
  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. http://apple.com/html5
  61. 61. Google likes HTML5. http://html5rocks.com
  62. 62. Mozilla likes HTML5. https://developer.mozilla.org/en/HTML/HTML5
  63. 63. Opera likes HTML5.http://opera.com/docs/specs/presto25/html5
  64. 64. Microsoft likes HTML5. http://msdn.microsoft.com/en-us/ie/aa740476
  65. 65. HTML5 <canvas> is gaining traction. http://playbiolab.com
  66. 66. As of IE9, all browsers support <canvas>. http://ie.microsoft.com/testdrive/performance/asteroidbelt/default.html
  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. http://user.sitepen.com/~dwalsh/dojo-charting.html
  68. 68. SVG is like construction paper. Layers retaindistinct shapes. SVG files can live without JS. And, each layer can respond to mouse events! http://flickr.com/photos/124330160/2127121118
  69. 69. Canvas is like a whiteboard drawing, one layer.Note: Canvas only works in the browser via JS. http://flickr.com/photos/azuriblue/3350954960
  70. 70. Quick CSS tip to fix IE9s SVG rendering: svg { overflow: hidden; }
  71. 71. IE9, without the CSS fix for SVG: http://host.sonspring.com/raph
  72. 72. IE9, with the CSS fix for SVG: http://host.sonspring.com/raph
  73. 73. SVG in: Chrome, Firefox, Opera, & Safari. http://host.sonspring.com/raph
  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 http://raphaeljs.com http://processingjs.org
  75. 75. More  Semantic  Richness!New tagsin HTML5 http://html5doctor.com/element-index
  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!? http://en.wikipedia.org/wiki/WebGL
  78. 78. https://github.com/mrdoob/three.js
  79. 79. https://github.com/mrdoob/three.js
  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.http://haml-lang.com | http://sass-lang.com | http://compass-style.org | http://coffeescript.org
  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 a.link-class color: orange
  85. 85. Note: Dont indent unnecessarily with Sass./* But it generates this... */table.table-class tbody tr td a.link-class { 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: http://get-serve.com
  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. http://blog.meloncard.com/post/12175941935/how-one-missing-var-ruined-our-launch
  94. 94. http://nodejs.org
  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. https://github.com/mishoo/UglifyJS | http://marijnhaverbeke.nl/uglifyjs
  97. 97. I just tell JSLint: "Hey JSLint... Shut up." Actually, JSLint.com 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... http://jslint.com
  98. 98. Recursion -> CoffeeScript is written in CoffeeScript. https://plus.google.com/116264189418994838408/posts/CSXeyftovTJ
  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 http://j.mp/font_lady-ice SteelFish http://j.mp/font_steelfish Hand  of  Sean http://j.mp/font_hand-of-sean Titillium Text http://j.mp/font_titillium-text Anonymous Pro http://j.mp/font_anonymous-pro (Listed in order of appearance)
  105. 105. Code "reddirtjs" = 50% off Cody Lindleys book. (I tech-edited) http://javascriptenlightenment.com
  106. 106. Shameless plug: Ill be speaking on Sass & Drupal next year. http://denver2012.drupal.org/program/sessions/using-sass-compass-drupal-theming
  107. 107. Questions? I may (not) know the answer. Enjoy Red Dirt JS! Get the slides: http://slidesha.re/nathansmith Feel free to say hi on Twitter: @nathansmith

×