REDDIRT.jsThe Future of HTML, CSS, & JavaScript—

http://reddirtjs.com

Today   :)  November 3rd, 2011 @ Oklahoma City, OK

#whoami ?

My name is Nathan. I doUX stuff at projekt202.

But most people know me as "the 960 guy" (that's ok).

http://sonspring.com | http://960.gs | http://projekt202.com

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.

Today, I want to talk a bit aboutwhat the future of HTML, CSS,and JavaScript will look like.*

* My predictive powers are probably average (at best).

Difficult to see. Always in motion is the future.

In order to determine wherewe're heading, let's reflect

on where we've been...

Act IHow We Got Here

http://w3.org/People/Raggett/book4/ch02.html

HTML

http://w3.org/People/Berners-Lee

1989: Tim Berners-Lee created HTML to link research docs.

"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

http://en.wikipedia.org/wiki/CERN

HTML was for serious work. Initially, no <img> tag.

Then everyonegot ahold of it:

But, I digress. We're getting a littleahead of ourselves.

(sorry)

http://en.wikipedia.org/wiki/Mosaic_(web_browser)

Marc L.Andreessen

Eric J. Bina

1993: Marc Andreessen proposed the <IMG> tag.

Mosaic later becomes Netscape, which then introduces JS, SSL, etc.

"Standardizing"  onbrowser  innovation.

JavaScripthttp://oreilly.com/pub/a/javascript/2001/04/06/js_history.html

"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

JS Java

It's not you, it's me. I'm all quirky andprototypical. You're just too classy.

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 :)

http://en.wikipedia.org/wiki/Netscape_Navigator

1995: JavaScript debuted in Netscape Navigator 2.0.

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...

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.

(With apologies to Jeremy Keith and Brad Colbow)

http://coding.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comic-strip

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

Created atNetscape

"ECMA TC39"Committee responsible

for evolving the language

Who's responsible for JavaScript now?

{to namea few...

http://en.wikipedia.org/wiki/JavaScript | http://en.wikipedia.org/wiki/ECMAScript

TM of Oracle (via Sun)

Defines theECMAScript

DOM API

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)

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

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

2005: Then there was jQuery...

Heck  yeah!

$('p.neat').addClass('ohmy').show('slow');

JavaScript that reads like CSS code!?

http://jquery.com

$(document).ready(function() {

// Many tutorials put all the code here.

});

But we treated it like CSS...

Um,  okay...  What's  the  big  deal?

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)

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

http://w3.org/Style/LieBos2e/history/Overview.html

CSS

http://intercom.co.cr/www-archives/1994-q1/0648.html

1994: Marc Andreessen, on styling... "Sorry, you're screwed."

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

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

Brief history of the first "Browser War"

http://en.wikipedia.org/wiki/Browser_wars

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.

We made sites "best viewed in IE6,"and Netscape lost the browser war.

http://en.wikipedia.org/wiki/Netscape_Navigator

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

In 2001, IE had over 90% market share.

http://en.wikipedia.org/wiki/File:Browser_Wars.png

2004: Firefox arose from Netscape's ashes.

Thus began a new Browser War, still in progress.

Since then, IE has been in steady decline.

http://en.wikipedia.org/wiki/File:Usage_share_of_web_browsers_(Source_Net_Applications).svg

Chrome is gaining, at the expense of Firefox.

http://en.wikipedia.org/wiki/File:Usage_share_of_alternative_web_browsers_(Source_StatCounter).svg

"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"

Act IIWhere We're Going

http://zeldman.com/2009/07/02/xhtml-wtf

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 <img>.

Oh  noes!

There were differing schools of thought on HTML vs. XHTML.

In the field"make it work"

Academic"make it valid"

rapid  —>

iteration

http://whatwg.org/specs/web-apps/current-work/multipage

Ian Hickson, benevolent HTML5 specification dictator curator.

http://en.wikipedia.org/wiki/Ian_Hickson

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...

HTML5 "killed" XHTML. Good riddance, says I.

<!DOCTYPE html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN" "http://www.w3.org/TR/xhtml1/

DTD/xhtml1-transitional.dtd">

<—  Much  easier  to  remember!

As it turns out, "<!DOCTYPE html>" = minimum number of characters to trigger "standards" mode in older IE versions.

You don't 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>

Have you ever used a non-CSS stylesheet?

<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 single stylesheet anyway, to avoid unnecessary HTTP requests.

(No?  Me  neither,  so  why  "type"  it?)

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

HTML5 CSS3

http://w3.org/html/logo

What about JS? (Not stewarded by W3C)

https://github.com/voodootikigod/logo.js

Branding, FTW! So, what's next?

1. Get cool logo(s). [X]

2. Convince others. [X]

3. Profit! [X]

http://apple.com/html5

Apple likes HTML5.

http://html5rocks.com

Google likes HTML5.

Mozilla likes HTML5.

https://developer.mozilla.org/en/HTML/HTML5

Opera likes HTML5.

http://opera.com/docs/specs/presto25/html5

http://msdn.microsoft.com/en-us/ie/aa740476

Microsoft likes HTML5.

HTML5 <canvas> is gaining traction.

http://playbiolab.com

As of IE9, all browsers support <canvas>.

http://ie.microsoft.com/testdrive/performance/asteroidbelt/default.html

2011: IE9 supports SVG (proposed in 1999).

Examples ofDojo.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

SVG is like construction paper. Layers retaindistinct shapes. SVG files can live without JS.

http://flickr.com/photos/124330160/2127121118

And, each layercan respond tomouse events!

Canvas is like a whiteboard drawing, one layer.Note: Canvas only works in the browser via JS.

http://flickr.com/photos/azuriblue/3350954960

Quick CSS tip to fix IE9's SVG rendering:

svg { overflow: hidden;}

IE9, without the CSS fix for SVG:

http://host.sonspring.com/raph

IE9, with the CSS fix for SVG:

http://host.sonspring.com/raph

SVG in: Chrome, Firefox, Opera, & Safari.

http://host.sonspring.com/raph

I won't 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

More  Semantic  Richness!

New tagsin HTML5

http://html5doctor.com/element-index

<header role="banner">

<footer role="contentinfo">

<aside>

<nav role="navigation">

<div role="main">

<article>

<section>

<hgroup>

<section>

<dialog>

<p>

etc...

<figure>

<img />

<details>

<summary>

<p>

etc...

<figcaption>

Mixes  well  with  ARIA

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

https://github.com/mrdoob/three.js

https://github.com/mrdoob/three.js

Metaprogramming

Haml => HTMLSass/Compass => CSSCoffeeScript => 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

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.

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

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'dhave  to  type  all  this  to  make  it  work  cross-­browser  anyway.

Note: Don't indent unnecessarily with Sass.

// This looks innocent enough:

table.table-class

tbody

tr

td

a.link-class

color: orange

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;

}

I could go on. ButI 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!

Haml rocks, if you're in a Ruby project.

To me, Haml meansnever typing this again...

</div></div></div>

Haml can generate nicely formatted HTML.

I'm not an über-Ruby guy. Get your feet wet:

http://get-serve.com

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...

get.your(coffee) { return 'off my lawn';}

Not everyone's a fan. Dustin Diaz, quoting Douglas Crockford:

http://blog.meloncard.com/post/12175941935/how-one-missing-var-ruined-our-launch

http://nodejs.org

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...

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

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

Recursion -> CoffeeScript is written in CoffeeScript.

https://plus.google.com/116264189418994838408/posts/CSXeyftovTJ

# CoffeeScript:

$('#foobar').click ->

# Do stuff.

// JavaScript:

$('#foobar').click(function() {

// Do stuff.

});

CoffeeScript -to- JavaScript...LOL  -­  That's  all?

# 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.

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!

BRAVE NEW WORLDHTML, CSS, JS, & Flash:

Government canreach its citizensdirectly (1:1), viasocial media...

Ours is an era of technological marvels.

(Free) fonts used in this presentation.

Anonymous Prohttp://j.mp/font_anonymous-pro

Hand  of  Seanhttp://j.mp/font_hand-of-sean

Titillium Texthttp://j.mp/font_titillium-text

Lady Ice REDDIRT.js logo

http://j.mp/font_lady-ice

SteelFishhttp://j.mp/font_steelfish

(Listed in order of appearance)

Code "reddirtjs" = 50% off Cody Lindley's book. (I tech-edited)

http://javascriptenlightenment.com

Shameless plug: I'll be speaking on Sass & Drupal next year.

http://denver2012.drupal.org/program/sessions/using-sass-compass-drupal-theming

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.