#whoami ? My name is Nathan. I do UX and JS at TandemSeven. But most people know me as "the 960 guy" (that's ok). http:/ /sonspring.com | http:/ /960.gs | http:/ /tandemseven.com
Download the slides and follow along: http:/ /j.mp/future-past Or, talk smack about me on Twitter: @nathansmith Note: You don't have to take notes feverishly.
"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
"JavaScript 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." Brendan Eich created JavaScript in 10 days. http:/ /en.wikipedia.org/wiki/Brendan_Eich
With classical inheritance, if your mother breaks her leg, you go visit her in the hospital. With prototypal inheritance, your leg would also (instantly) break. Object Inheritance #TLDR #TLDR = "Too Long, Didn't Read" aka: Sum it up for me :)
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 stewards 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 JavaScript = 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.
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 at Netscape "ECMA TC39" Committee responsible for evolving the language Who is 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
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 the 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
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, YUI, etc. 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
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
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
"Those who cannot remember the past are condemned to repeat it." – George Santayana http:/ /en.wikipedia.org/wiki/George_Santayana So your "pure CSS" demo only works in WebKit?
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 structural standpoint. Oh, and it would've done away with . Oh noes!
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…
You don't have to type extra junk anymore. <br/>alert('This is some inline JS.');<br/> <br/>/* <![CDATA[ */<br/>alert('Are you kidding me?');<br/>/* ]]> */<br/>
type="text/css" media="all" /> Note: Media queries are 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
2011: IE9 supports SVG (proposed in 1999). Examples of Dojo.js charts To be fair, IE 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
http:/ /flickr.com/photos/124330160/2127121118 And, each layer can respond to mouse events! SVG is like construction paper. Layers retain distinct shapes. SVG files work fine without JS.
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
Thoughts on 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 on the fence regarding 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.
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 them. But do not touch my JavaScript.
It's okay to be obvious. 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
Just tell JSLint… "Relax, it's okay." JSLint (and JSHint) is a great tool for checking for JS errors. But validation is a means to an end, not a goal in itself. If you want to ensure JSLint compliance, there's CoffeeScript... http:/ /jslint.com | http:/ /jshint.com
Despite its positive aspects, I am not a fan of CoffeeScript. Why? Because it's more than just syntactic sugar. It's dangerous artificial sweetener, so to speak.
http:/ /coffeescript.org obj = foo: 'bar' for i in obj console.log obj[i] var i, obj, _i, _len; obj = { foo: 'bar' }; for (_i = 0, _len = obj.length; _i < _len; _i++) { i = obj[_i]; console.log(obj[i]); } Want to iterate through an object in CoffeeScript? Sure thing, just... WTF?
http:/ /coffeescript.org obj = foo: 'bar' for i of obj console.log obj[i] var i, obj; obj = { foo: 'bar' }; for (i in obj) { console.log(obj[i]); } You would have to actually type this in CoffeeScript. Then the resulting JavaScript output is a "for in" loop.
Key tenets of most MV* JS frameworks: — Model, View, Controller (MVC) or… — Model, View, View Model (MVVM) — Two-way data binding… If user interacts with page, you can reflect these changes in your data — Declarative UI: in markup, not in JS — Observables: If data changes, UI updates
Below a certain width, the layout switches to a “mobile” view. The table rows & cells are display:block, and text from each is inserted as a label, preceding the data.
// In a real app, this data would potentially be dynamic. // But for the purposes of this demo, is hard-coded here. [ { "first_name": "Amy", "last_name": "Poehler", "character_first_name": "Leslie", "character_last_name": "Knope" }, { "first_name": "Nick", "last_name": "Offerman", "character_first_name": "Ron", "character_last_name": "Swanson" }, { "first_name": "Aziz", "last_name": "Ansari", "character_first_name": "Tom", "character_last_name": "Haverford" }, ... ]
// Extend KO array, to make it sortable ko.observableArray.fn.sort_by = function(key, reverse) { var self = this; self.sort(function(a, b) { var a_key = String(a[key]); var b_key = String(b[key]); var n, val; if (reverse) { n = a_key - b_key; val = !isNaN(n) ? n : b_key.localeCompare(a_key); } else { n = b_key - a_key; val = !isNaN(n) ? n : a_key.localeCompare(b_key); } return val; }); };
// APP.init.sort_by sort_by: function(key) { var event = 'click.sort_by'; var str = '.table-data th[data-key] a'; body.off(event).on(event, str, function(ev) { var el = $(this); var th = el.closest('th'); var th_other = th.siblings('th'); var key = th.attr('data-key'); var sort = th.attr('data-sort'); var asc = 'ascending'; var desc = 'descending'; var dir = asc; if (!sort || sort === asc) { dir = desc; } var reverse = dir !== asc; th.addClass(on).attr('data-sort', dir); th_other.removeClass(on).removeAttr('data-sort'); APP.data.sort_by(key, reverse); }); },
Get the slides… http:/ /j.mp/future-past Keep in touch… @nathansmith Questions? — I may (not) know the answer! http:/ /corsariomarcio.deviantart.com/art/X-MEN-DAYS-OF-FUTURE-PAST-poster-455872133
nathansmith
h0r15h0
clown0082
tsutsui
deepu105
mot_techtalk
tanakahisateru
goutarouh
marcustung
seike460
assu_ming
uhyo
yuhei_fujita
sachag
smashingmag
stephaniewalter
phodgson
matthewcrist
maltzj
zakiwarfel
colly
denniskardys
lauravandoore
samlambert