Red Dirt JS

REDDIRT .js
The—of HTML, CSS, & JavaScript
Future
Today
:)

November 3rd, 2011 @ Oklahoma City, OK

http://reddirtjs.com

#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

Note: You don't have to take notes feverishly.

Download the slides & follow along:
http://slidesha.re/nathansmith

Or, talk smack about me on Twitter:
@nathansmith

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

Difficult to see. Always in motion is the future.

In order to determine where
we're heading, let's reflect
on where we've been...

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

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

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

"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

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

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

Then everyone
got ahold of it:

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

(sorry)

Marc L.
Andreessen

Eric J. Bina

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

"Standardizing" on
browser innovation.

1993: Marc
Andreessen
proposed the
<IMG> tag.

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

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

Brandon Eich created JS in 10 days.

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

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

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

JS Java

Object Inheritance #TLDR
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.

#TLDR = "Too Long, Didn't Read" aka: Sum it up for me :)

1995: JavaScript debuted in Netscape Navigator 2.0.

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

Brief history of JS = Clear as mud...

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."
m - what?
U
http://en.wikipedia.org/wiki/JavaScript | http://en.wikipedia.org/wiki/ECMAScript

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.

(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

Who's responsible for JavaScript now?

{
Created at
Netscape
"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

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

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...
$('p.neat').addClass('ohmy').show('slow');

JavaScript that reads like CSS code!?

Heck yeah!

http://jquery.com

But we treated it like CSS...
$(document).ready(function() {
// Many tutorials put all the code here.
});

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

window.onload

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)

http://en.wikipedia.org/wiki/8_Mile_(film)

Beware the danger of abstraction & illiteracy.

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.

http://ejohn.org/blog/javascript-language-abstractions

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

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

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

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"

Thankfully, CHSS was never implemented:

h1.font.size = 24px 12% /* 12% 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

Brief history of the first "Browser War"

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

1998: "Web Standards" advocacy begins.

The box model
isn't fixed until
October 2006,
release of IE7.

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

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

"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

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

O h noes!

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

In the field Academic
"make it valid"
"make it work"

—>
pid n
ra tio
it era

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> <— 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 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?

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

I know what you XHTML purists are thinking:

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.
(phew!)
http://en.wikipedia.org/wiki/HTML

What about JS? (Not stewarded by W3C)

HTML5 CSS3

http://w3.org/html/logo

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]

Apple likes HTML5.

http://apple.com/html5

Google likes HTML5.

http://html5rocks.com

Mozilla likes HTML5.

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

Opera likes HTML5.

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

Microsoft likes HTML5.

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

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

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

And, each layer
can respond to
mouse events!

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

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:


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


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 tags
in HTML5
http://html5doctor.com/element-index

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

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

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

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

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;

BLOAT? Not really. You'd
-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;
}

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;
}

Note: Don't steal another presenter's topic.

I could go on. But
I won't. (Sorry Jina)

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 means
never 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

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

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 -to- JavaScript...
# CoffeeScript: LOL - That's all?
$('#foobar').click ->
# Do stuff.

// JavaScript:
$('#foobar').click(function() {
// Do stuff.
});

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

One last example... (Sorry Brandon)
# CoffeeScript: That's hawt.
happy = true unless raining

// JavaScript:
var happy;
if (!raining) {
happy = true;
}

Note: Brandon Satrom is presenting on CoffeeScript later today. Don't miss it!

BRAVE NEW WORLD
HTML, CSS, JS, & Flash:

Government can
reach its citizens
directly (1:1), via
social media...

Ours is an era of technological marvels.

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

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

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

Red Dirt JS

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Red Dirt JS

Similar to Red Dirt JS (20)

More from Nathan Smith

More from Nathan Smith (20)

Recently uploaded

Recently uploaded (20)

Red Dirt JS