Slide 1
Slide 1 text
REDDIRT.js
The Future of HTML, CSS, & JavaScript
—
http://reddirtjs.com
Today
:)
November 3rd, 2011 @ Oklahoma City, OK
Slide 2
Slide 2 text
#whoami ?
My name is Nathan. I do
UX stuff at projekt202.
But most people know me
as "the 960 guy" (that's ok).
http://sonspring.com | http://960.gs | http://projekt202.com
Slide 3
Slide 3 text
Download the slides & follow along:
http://slidesha.re/nathansmith
Or, talk smack about me on Twitter:
@nathansmith
Note: You don't have to take notes feverishly.
Slide 4
Slide 4 text
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).
Slide 5
Slide 5 text
Difficult to see. Always in motion is the future.
Slide 6
Slide 6 text
In order to determine where
we're heading, let's reflect
on where we've been...
Slide 7
Slide 7 text
Act I
How We Got Here
Slide 8
Slide 8 text
http://w3.org/People/Raggett/book4/ch02.html
HTML
Slide 9
Slide 9 text
http://w3.org/People/Berners-Lee
1989: Tim Berners-Lee created HTML to link research docs.
Slide 10
Slide 10 text
"Storage of ASCII text, and display
on [80x24] screens, is in the short
term sufficient, and essential.
Addition of graphics would be an
optional extra with very much less
penetration for the moment."
– Tim Berners-Lee
http://w3.org/History/1989/proposal.html
Slide 11
Slide 11 text
http://en.wikipedia.org/wiki/CERN
HTML was for serious work. Initially, no ![]()
tag.
Slide 12
Slide 12 text
Then everyone
got ahold of it:
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
But, I digress.
We're getting a little
ahead of ourselves.
(sorry)
Slide 15
Slide 15 text
http://en.wikipedia.org/wiki/Mosaic_(web_browser)
Marc L.
Andreessen
Eric J. Bina
Slide 16
Slide 16 text
1993: Marc
Andreessen
proposed the
![]()
tag.
Mosaic later becomes
Netscape, which then
introduces JS, SSL, etc.
"Standardizing" on
browser innovation.
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
JavaScript
http://oreilly.com/pub/a/javascript/2001/04/06/js_history.html
Slide 19
Slide 19 text
"JS had to 'look like Java'
only less so, be Java's
dumb kid brother or boy-
hostage sidekick. Plus, I
had to be done in ten days
or something worse than
JS would have happened."
Brandon Eich created JS in 10 days.
http://en.wikipedia.org/wiki/Brendan_Eich
Slide 20
Slide 20 text
JS Java
It's not you, it's me. I'm all quirky and
prototypical. You're just too classy.
Slide 21
Slide 21 text
With classical inheritance, if
your mother breaks her leg, you
go visit her in the hospital. With
prototypical inheritance, your
leg would also (instantly) break.
Object Inheritance #TLDR
#TLDR = "Too Long, Didn't Read" aka: Sum it up for me :)
Slide 22
Slide 22 text
http://en.wikipedia.org/wiki/Netscape_Navigator
1995: JavaScript debuted in Netscape Navigator 2.0.
Slide 23
Slide 23 text
The word "JavaScript" was chosen to tap into the
brand name of the Java programming language.
Sun Microsystems (since acquired by Oracle) owned
the trademarks for both Java™ and JavaScript™, and
stewarded the development of Java (not JavaScript).
In 1997, JavaScript (the language) was standardized
by the European Computer Manufacturers
Association, and it was dubbed "ECMAScript."
http://en.wikipedia.org/wiki/JavaScript | http://en.wikipedia.org/wiki/ECMAScript
Um - what?
Brief history of JS = Clear as mud...
Slide 24
Slide 24 text
Altogether different beasts: Both potentially delicious (or dangerous), but not actually derived from the same animal.
Similar in name: JavaScript is to Java as Hamburger is to Ham.
Slide 25
Slide 25 text
(With apologies to Jeremy Keith and Brad Colbow)
http://coding.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comic-strip
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
Created at
Netscape
"ECMA TC39"
Committee responsible
for evolving the language
Who's responsible for JavaScript now?
{to name
a few...
http://en.wikipedia.org/wiki/JavaScript | http://en.wikipedia.org/wiki/ECMAScript
TM of Oracle (via Sun)
Defines the
ECMAScript
DOM API
Slide 28
Slide 28 text
JS browser support is pretty good.
JavaScript (ECMAScript 3.0) is supported
fairly consistently in all major browsers.
⾨ This is Wikipedia's 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). It's how Wikipedia lists 'em.
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(ECMAScript)
Slide 29
Slide 29 text
JavaScript is that friend in high
school you secretly had a crush
on, but was always hanging out
with that sleazy boyfriend, DOM.
Nice >
What a punk
http://w3.org/DOM
Slide 30
Slide 30 text
The Document Object Model (DOM) is what
allows JS to interact with XML/HTML, ala:
window.document.getElementsByTagName('*');
The DOM is stewarded by a different group than governs
JS. Browsers also implement it slightly differently. For
instance, IE historically didn't treat whitespace as text
nodes, even though the official DOM spec says it should.
http://w3.org/DOM
Slide 31
Slide 31 text
2005: Then there was jQuery...
Heck yeah!
$('p.neat').addClass('ohmy').show('slow');
JavaScript that reads like CSS code!?
http://jquery.com
Slide 32
Slide 32 text
$(document).ready(function() {
// Many tutorials put all the code here.
});
But we treated it like CSS...
Um, okay... What's the big deal?
Slide 33
Slide 33 text
Loosely translated:
"You'd 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)
window.onload
http://en.wikipedia.org/wiki/8_Mile_(film)
Slide 34
Slide 34 text
Really, it's 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.
We've become complacent and forgotten
(or never learned) how JavaScript works.
Beware the danger of abstraction & illiteracy.
http://ejohn.org/blog/javascript-language-abstractions
Slide 35
Slide 35 text
http://w3.org/Style/LieBos2e/history/Overview.html
CSS
Slide 36
Slide 36 text
http://intercom.co.cr/www-archives/1994-q1/0648.html
1994: Marc Andreessen, on styling... "Sorry, you're screwed."
Slide 37
Slide 37 text
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
Slide 38
Slide 38 text
CHSS had 100 levels of "!important"
h1.font.size = 24px 12% /* 12% importance */
h1.font.size = 16px 100% /* 100% importance */
h1.font.size = 12px 89% /* 89% importance */
h1 {font-size: 24px;} /* Applies globally (weak) */
h1.x {font-size: 16px;} /* More specific */
h1 {font-size: 12px;} /* Beats line 1, not line 2 */
Thankfully, CHSS was never implemented:
CSS has "last-in" wins, with specificity override.
http://www.w3.org/People/howcome/p/cascade.html
Slide 39
Slide 39 text
Brief history of the first "Browser War"
http://en.wikipedia.org/wiki/Browser_wars
Slide 40
Slide 40 text
1998: "Web Standards" advocacy begins.
http://w3.org/Style/LieBos2e/history/Overview.html
The box model
isn't fixed until
October 2006,
release of IE7.
Slide 41
Slide 41 text
We made sites "best viewed in IE6,"
and Netscape lost the browser war.
http://en.wikipedia.org/wiki/Netscape_Navigator
Slide 42
Slide 42 text
The "dark side" = developing for 1 browser.
Oh, what... Like you never photoshopped
you vs. yourself with a lightsaber? C'mon!
http://flickr.com/photos/nathansmith/32757176
Slide 43
Slide 43 text
In 2001, IE had over 90% market share.
http://en.wikipedia.org/wiki/File:Browser_Wars.png
Slide 44
Slide 44 text
2004: Firefox arose from Netscape's ashes.
Thus began a new Browser War, still in progress.
Slide 45
Slide 45 text
Since then, IE has been in steady decline.
http://en.wikipedia.org/wiki/File:Usage_share_of_web_browsers_(Source_Net_Applications).svg
Slide 46
Slide 46 text
Chrome is gaining, at the expense of Firefox.
http://en.wikipedia.org/wiki/File:Usage_share_of_alternative_web_browsers_(Source_StatCounter).svg
Slide 47
Slide 47 text
"Those who cannot
remember the past
are condemned to
repeat it."
– George Santayana
http://en.wikipedia.org/wiki/George_Santayana
"My 'pure CSS' demo only works in WebKit"
Slide 48
Slide 48 text
Act II
Where We're Going
Slide 49
Slide 49 text
http://zeldman.com/2009/07/02/xhtml-wtf
Slide 50
Slide 50 text
Realistically speaking, XHTML 2.0 would've
been a very tough sell, from a practical
standpoint. It was extremely rigid. A page
simply would not render, if it wasn't perfectly
formed from an XML structure standpoint.
Oh, and it would've done away with ![]()
.
Oh noes!
Slide 51
Slide 51 text
There were differing schools of thought on HTML vs. XHTML.
In the field
"make it work"
Academic
"make it valid"
Slide 52
Slide 52 text
rapid —>
iteration
http://whatwg.org/specs/web-apps/current-work/multipage
Slide 53
Slide 53 text
Ian Hickson, benevolent HTML5 specification dictator curator.
http://en.wikipedia.org/wiki/Ian_Hickson
Slide 54
Slide 54 text
Technically, "HTML5" is now a misnomer. (But, it's
too late. Marketing already got ahold of it.) HTML is
to be considered an ever-evolving "living standard".
The "WHATWG" — Web Hypertext Application
Technology Working Group — will continue to work
on HTML, and the W3C will "snapshot" feature sets
periodically, and tag them with incremental version
numbers: HTML5 (and presumably, HTML6, etc).
Thus, no more version numbers in DOCTYPE...
Slide 55
Slide 55 text
HTML5 "killed" XHTML. Good riddance, says I.
<— Much easier to remember!
As it turns out, "" = minimum number of
characters to trigger "standards" mode in older IE versions.
Slide 56
Slide 56 text
You don't have to type extra junk anymore.
alert('This is some inline JS.');
/* <![CDATA[ */
alert('Are you kidding me?');
/* ]]> */
Slide 57
Slide 57 text
Have you ever used a non-CSS stylesheet?
Note: Media queries best defined via @media in a single
stylesheet anyway, to avoid unnecessary HTTP requests.
(No? Me neither, so why "type" it?)
Slide 58
Slide 58 text
You can't do that! What about the validator?
Relax. It's valid. HTML5 is no longer a sub-
set of SGML like all versions of HTML before
it. Nor is it a spin on XML, like XHTML 1.x
was. HTML is just HTML now. This is how
browsers always treated (X)HTML anyway.
I know what you XHTML purists are thinking:
(phew!)
http://en.wikipedia.org/wiki/HTML
Slide 59
Slide 59 text
HTML5 CSS3
http://w3.org/html/logo
What about JS? (Not stewarded by W3C)
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
https://github.com/voodootikigod/logo.js
Slide 62
Slide 62 text
Branding, FTW! So, what's next?
1. Get cool logo(s). [X]
2. Convince others. [X]
3. Profit! [X]
Slide 63
Slide 63 text
http://apple.com/html5
Apple likes HTML5.
Slide 64
Slide 64 text
http://html5rocks.com
Google likes HTML5.
Slide 65
Slide 65 text
Mozilla likes HTML5.
https://developer.mozilla.org/en/HTML/HTML5
Slide 66
Slide 66 text
Opera likes HTML5.
http://opera.com/docs/specs/presto25/html5
Slide 67
Slide 67 text
http://msdn.microsoft.com/en-us/ie/aa740476
Microsoft likes HTML5.
Slide 68
Slide 68 text
HTML5 is gaining traction.
http://playbiolab.com
Slide 69
Slide 69 text
As of IE9, all browsers support .
http://ie.microsoft.com/testdrive/performance/asteroidbelt/default.html
Slide 70
Slide 70 text
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
Slide 71
Slide 71 text
SVG is like construction paper. Layers retain
distinct shapes. SVG files can live without JS.
http://flickr.com/photos/124330160/2127121118
And, each layer
can respond to
mouse events!
Slide 72
Slide 72 text
Canvas is like a whiteboard drawing, one layer.
Note: Canvas only works in the browser via JS.
http://flickr.com/photos/azuriblue/3350954960
Slide 73
Slide 73 text
Quick CSS tip to fix IE9's SVG rendering:
svg {
overflow: hidden;
}
Slide 74
Slide 74 text
IE9, without the CSS fix for SVG:
http://host.sonspring.com/raph
Slide 75
Slide 75 text
IE9, with the CSS fix for SVG:
http://host.sonspring.com/raph
Slide 76
Slide 76 text
SVG in: Chrome, Firefox, Opera, & Safari.
http://host.sonspring.com/raph
Slide 77
Slide 77 text
I won't cover or 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
Slide 78
Slide 78 text
More Semantic Richness!
New tags
in HTML5
http://html5doctor.com/element-index
Slide 79
Slide 79 text
etc...
etc... Mixes well with ARIA
Slide 80
Slide 80 text
The dawn of 3D browser graphics.
aka: Can I play Farmville in IMAX!?
WebGL is going to be HUGE
(eventually)
http://en.wikipedia.org/wiki/WebGL
Slide 81
Slide 81 text
https://github.com/mrdoob/three.js
Slide 82
Slide 82 text
https://github.com/mrdoob/three.js
Slide 83
Slide 83 text
Metaprogramming
Haml => HTML
Sass/Compass => CSS
CoffeeScript => JS
Note: Yes, I'm sure there are many, many
more examples in the wild. But my time
is finite, and this is what I'm familiar with.
http://haml-lang.com | http://sass-lang.com | http://compass-style.org | http://coffeescript.org
Slide 84
Slide 84 text
Personal note: After giving 'em a try, I am
becoming more a fan of meta languages
that treat whitespace as significant.
Usual disclaimers apply:
"It depends." Your mileage may vary. No purchase
necessary. Machine-wash only. Enter at own risk.
Batteries not included. Void where prohibited, etc.
Slide 85
Slide 85 text
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
Slide 86
Slide 86 text
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;
-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;
-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;
box-shadow: rgba(0, 0, 0, 0.5) 0 2px 5px 0;
}
.foobar:hover {
text-decoration: underline;
}
BLOAT? Not really. You'd
have to type all this to make it
work cross-browser anyway.
Slide 87
Slide 87 text
Note: Don't indent unnecessarily with Sass.
// This looks innocent enough:
table.table-class
tbody
tr
td
a.link-class
color: orange
Slide 88
Slide 88 text
Note: Don't 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;
}
Slide 89
Slide 89 text
I could go on. But
I won't. (Sorry Jina)
Note: Don't steal another presenter's topic.
Note: Jina Bolton is presenting on Sass later today. Don't miss it!
Slide 90
Slide 90 text
Haml rocks, if you're in a Ruby project.
To me, Haml means
never typing this again...
Slide 91
Slide 91 text
Haml can generate nicely formatted HTML.
Slide 92
Slide 92 text
I'm not an über-Ruby guy. Get your feet wet:
http://get-serve.com
Slide 93
Slide 93 text
Okay, so abstraction for HTML and CSS is fine.
It saves keystrokes, and those languages are
pretty #yawn anyway, right? I mean, they're
declarative, so of course we should automate
writing them. But this is a JS conference,
right? Do not touch my JavaScript. I repeat...
Slide 94
Slide 94 text
get.your(coffee) {
return 'off my lawn';
}
Slide 95
Slide 95 text
Not everyone's a fan. Dustin Diaz, quoting Douglas Crockford:
Slide 96
Slide 96 text
http://blog.meloncard.com/post/12175941935/how-one-missing-var-ruined-our-launch
Slide 97
Slide 97 text
http://nodejs.org
Slide 98
Slide 98 text
Can you spot the bug?
var joe = 1
sue = 2,
bob = 3;
var joe = 1,
sue = 2,
bob = 3;
Bugs like this can be laborious to find, which is why I write...
Slide 99
Slide 99 text
Nuthin' wrong with being overly clear.
var joe = 1;
var sue = 2;
var bob = 3;
Minifiers like Uglify JS can handle removing repeated var
keywords. Put that burden on automation, not yourself.
https://github.com/mishoo/UglifyJS | http://marijnhaverbeke.nl/uglifyjs
Slide 100
Slide 100 text
I just tell JSLint: "Hey JSLint... Shut up."
Actually, JSLint.com is a great tool for checking for JavaScript
errors. But validation is a means to an end, not the goal itself.
If you want to ensure JSLint compliance, there's CoffeeScript...
http://jslint.com
Slide 101
Slide 101 text
Recursion -> CoffeeScript is written in CoffeeScript.
https://plus.google.com/116264189418994838408/posts/CSXeyftovTJ
Slide 102
Slide 102 text
# CoffeeScript:
$('#foobar').click ->
# Do stuff.
// JavaScript:
$('#foobar').click(function() {
// Do stuff.
});
CoffeeScript -to- JavaScript...
LOL - That's all?
Slide 103
Slide 103 text
# CoffeeScript:
is_between = 3 < my_value < 12
// JavaScript:
var is_between;
is_between = (3 < my_value && my_value < 12);
CoffeeScript = Syntactic Sugar...
Oh, I see.
Slide 104
Slide 104 text
One last example... (Sorry Brandon)
# CoffeeScript:
happy = true unless raining
// JavaScript:
var happy;
if (!raining) {
happy = true;
}
That's hawt.
Note: Brandon Satrom is presenting on CoffeeScript later today. Don't miss it!
Slide 105
Slide 105 text
BRAVE NEW WORLD
HTML, CSS, JS, & Flash:
Government can
reach its citizens
directly (1:1), via
social media...
Slide 106
Slide 106 text
Ours is an era of technological marvels.
Slide 107
Slide 107 text
(Free) fonts used in this presentation.
Anonymous Pro
http://j.mp/font_anonymous-pro
Hand of Sean
http://j.mp/font_hand-of-sean
Titillium Text
http://j.mp/font_titillium-text
Lady Ice REDDIRT.js logo
http://j.mp/font_lady-ice
SteelFish
http://j.mp/font_steelfish
(Listed in order of appearance)
Slide 108
Slide 108 text
Code "reddirtjs" = 50% off Cody Lindley's book. (I tech-edited)
http://javascriptenlightenment.com
Slide 109
Slide 109 text
Shameless plug: I'll be speaking on Sass & Drupal next year.
http://denver2012.drupal.org/program/sessions/using-sass-compass-drupal-theming
Slide 110
Slide 110 text
Enjoy Red Dirt JS! Get the slides:
http://slidesha.re/nathansmith
Feel free to say hi on Twitter:
@nathansmith
Questions? I may (not) know the answer.