HTML5 and CSS3 have arrived and they are redefining rich, standards-based web development. Features previously the exclusive domain of browser plug-ins can now be added to web applications as easily as images. Understanding the new power that these standards define, as well as the rapidly increasing power and speed of JavaScript in modern browsers and devices is essential. These slides accompany a full-day workshop, where attendees are guided through the new features in HTML5 and CSS3, with special attention to how these technologies can be used today in new and old browsers.
14. Perhaps Adobe
should focus more on
creating great HTML5
tools for the future, and
less on criticizing Apple
for leaving the past
behind.” -Steve Jobs
April, 2010
“
25. “While it continues to serve as a
rough guide to many of the core
features of HTML, it does not
provide enough information to
build implementations that
interoperate with each other and,
more importantly, with a critical
mass of deployed content.”
-W3C on HTML4
21:02
41. IE9 offers support for
the most relevant,
real-world web patterns
that developers are
using today as
well as the HTML5
patterns we
expect to become
more mainstream.”
“
Dean Hachamovitch
Corporate VP, IE
51. X X X X X
X X X
X X
X X X
X X
Adoption Strategies
Only use features
available in target
browsers AND design
alternate experience
for other browsers
X X
X X X
X X
21:02
74. fixing IE
<head>
<meta charset="utf-8" />
<title>My Weblog</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
*Polyfill required to trigger styling in old IE
21:02
75. Why use it?
• Accessibility*
• SEO*
• Code readability
• Developer street cred
• Why not?
21:02
76. semantic data
data-*
Valid approach to storing data in HTML
<!--Store values in data-* attributes-->
<div id="mydiv" data-key="26" data-name="My product name">
...
</div>
<!--Access values with JavaScript-->
var key = mydiv.getAttribute("data-key")
//OR
var key = mydiv.dataset.key
support: IE9, FF3.5, Safari, Chrome, Opera
78. video & audio
Semantic rich media
Reach more people on more devices
Container
Codec
Silverlight
FlashHTML5
79. video for all browsers*
<video src="clip.mp4" controls type="video/mp4">
<object classid="...">
<param name="flashvars" value="file=clip.mp4" />
<param name="movie" value=“player.swf" />
<embed src="player.swf” type="application/x-shockwave-
flash” flashvars="file=clip.mp4" />
Your browser does not support video
</object>
</video>
support: IE9, FF3.6, Safari, Chrome, Opera
21:02
80. Why use it?
• Video for plug-less mobile
devices
• Eliminate dependencies
on Flash/Silverlight (future
proofing)
21:02
81. canvas
tag: <canvas />
<canvas id=‚b" width="300" height="225"></canvas>
function draw_b() {
var b_canvas = document.getElementById("b");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
}
support: IE*, FF3, Safari, Chrome, Opera
84. Why use it?
• Dashboards
• Charts/Gauges
• Resolution
independence
21:02
• Games
• Super custom
rendering
SVG Canvas
85. html5 forms*
tag: time, date, search, email, etc.
Web Forms 2.0 HTML5 Forms
<form>
<input type="email" autofocus="autofocus"
placeholder="Enter your email" />
</form>
support: Safari, FF4*, Chrome, Opera
101. Why use it?
• Better than cookies
• Simple API
21:02
102. drag & drop API
easy drag & drop for any HTML element
<!-- Make an HTML element draggable -->
<div id=‚myDiv‛ draggable=“true”>...</div>
//Handle the DnD events, such as Drop
function onDrop(e){
//e.target is the current target element
if(e.stopPropigation) e.stopPropigation(); //Prevent redirect
//Do something with payload
return false;
}
support: IE9, FF, Safari, Chrome, Opera
109. offline
tag: <html manifest="html5demo.manifest">
MIME type: text/cache-manifest
CACHE MANIFEST
# Files you want cached for your app to work offline
myLogo.jpg
//Interacting with cache
window.applicationCache.update();
alert(window.applicationCache.status);
support: FF3.5, Safari, Chrome, Opera 10.6
111. Why use it?
• Aggressive resource
caching
• Foundation for offline
21:02
112. web sql
api: openDatabase
db = openDatabase("html5demos", "1.0", "HTML 5 Database API
example", 200000);
if (db) {
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS tweets (id REAL UNIQUE,
text TEXT, created_at TEXT, screen_name TEXT,
mention BOOLEAN)", [], callback);
});
}
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM tweets WHERE mention = ? AND id > ? ORDER
BY id DESC', [mention, latest], callbackFunc);});
support: Safari, Chrome, Opera
“This specification has reached an impasse: all
interested implementors have used the same
SQL backend (Sqlite), but we need multiple
independent implementations to proceed along
a standardisation path.”
–W3C
113. indexedDB
JavaScript API for indexed local storage
var request = window.indexedDB.open("CandyDB",
"My candy store database");
request.onsuccess = function(event) {
var db = event.result;
if (db.version != "1") {
// User's first visit, initialize database.
...
}
}
support: IE9*, FF4, (Chrome)
119. Why use it?
• 2-way real-time
messaging
• Replace long-polling &
interval “hacks”
• Eliminate dependencies
on plug-ins
21:02
120. file api
access to local file system & data streaming
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
var dataUrl = event.target.result;
};
reader.readAsDataURL(file);
.readAsBinaryString(file);
.readAsText(file);
.readAsArrayBuffer(file);
support: IE10, FF4, Chrome, Opera 11.1
122. Why use it?
• Process files with fewer
server trips
• Improve usability
• Desktop-like experiences
• Better file upload
21:02
123. history api
direct access to browser history
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
support: FF4, Safari 5, Chrome, Opera 11.5
160. “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”
163. JavaScript won by
default.
If you're the last man left on
earth, it doesn't matter how ugly
you are when the women come to
re-populate the planet.
Scott Koon
175. NATIVE LOOPS
$.each(arr, function (i) {i / 2;});
BAD
arr.forEach(function (i) {i / 2;});
BETTER
var i = 0, len = arr.length;
for (i = 0; i < len; i += 1) {
i / 2;
}
BEST*
Prove It
181. function doInitStuff(){
var user = "Todd";
}
function loadSomething(){
if (user == "Todd") ...
}
function handleButtonClick(){
...
}
function harlemShake(){
...
}
yourFile.js
182. var user = "";
function doInitStuff(){
user = "Todd";
}
function loadSomething(){
if (user == "Todd") ...
}
function handleButtonClick(){
...
}
function harlemShake(){
...
}
yourFile.js
183. var [window].user = "";
function [window].doInitStuff(){
user = "Todd";
}
function [window].loadSomething(){
if (user == "Todd") ...
}
function
[window].handleButtonClick(){
...
}
function [window].harlemShake(){
...
yourFile.js
184. var app = (function(){
var _name = "Todd";
return{
sayHello: function(){
alert(_name);
}
}
}());
app.sayHello();
21:02
BEST(ISH)
185. var app = (function(){
var _name = "Todd";
return{
sayHello: function(){
alert(_name);
},
sayGoodbye: function(){
alert(_name);
}
}
}());
21:02
BEST(ISH)
Your
“Public” API
186. SUPER PATTERN
(function(window,$,c){
var _private = "Todd";
function privateClass(){}
function myWidget(){}
myWidget.doSomething = function(){};
window.myWidget = myWidget;
}(window,jQuery,console));
Immediately Invoked Function Expressions (IIFE) +
Global Imports + [Prototype]
Prove It
195. My Awesome Page
Copyright Fo'eva
Lorem ipsumy samplish
jibber jabbish text only
meant to serve as a
placeholder, and much like
Pi, should never repeat or
be read much beyond the
first few characters.
196. function doSomething{
...
var $list = $("body").append("<ul>");
for(var i = 0; i < 10; i++){
$list.append("<li>"+ i +"</li>")
}
}
21:02
BAD
197. function doSomething{
...
var $domChunk = $("<ul>");
for(var i = 0; i < 10; i += 1){
$domChunk.append("<li>"+ i +"</li>");
}
$("body").append($domChunk);
}
21:02
BETTER
198. DOM SPEED WITH
STRINGS & INNERHTML
function doSomething{
...
var domString = "<ul>";
for(var i = 0; i < 10; i += 1){
domString += "<li>"+ i +"</li>";
}
domString += "</ul>"
$("body")[0].innerHTML = domString;
}
Prove It
199. <script type="text/x-kendo-template" id="tmp">
<ul>
#for(var i = 0; i < data.length; i += 1){#
<li>#= data[i] #</li>
#}#
</ul>
</script>
function doSomething(){
var myData = [1,..,10];
var template = kendo.template($("#tmp").html());
$("body").append(template(myData));
}
21:02
BEST
Prove It
200. TIP #5
Learn a module pattern.
(Or some kind of app structure)
208. Resources for Study
• Books
– JavaScript: The Good Parts (Crockford)
– JavaScript: The Definitive Guide (Flanagan)
– JavaScript Patterns (Stefanov)
– High Performance JavaScript (Zakas)
21:02
234. /*These two rules do the same thing*/
@media all and (min-width:500px) { … }
@media (min-width:500px) { … }
/*Multiple conditions*/
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
243. Your Feedback is Important
Please fill out a session evaluation using the
EventBoard app.
Thank you!
Editor's Notes
Bogus chart – based on “research” by Wiman & Meirhenry, and Edgar Dale 1960Research since proven to be made-up. Still, fun slide and anecdotally true…DEBUNKING:http://www.willatworklearning.com/2006/05/people_remember.htmlhttp://www.conversionrate.com.au/2008/06/16/retention-myth-people-remember-50-of-what-they-see-and-hear-and-only-10-of-what-they-read/
Felix jumped 24 miles in 4 minutes at 834 mph (1342 km/h)
This session will not focus much on Backend technology - like ASP.NET.HTML5, CSS3, JavaScript are the metal of the web. It's the front-end development technologies.
http://www.apple.com/hotnews/thoughts-on-flash/
Talk about the major “platforms” for the web. Introduce the players.
Kendo UI survey of 4,000 developers revealed that HTML5 will be important to 82% of jobs in 2012.All believe will be be important within next 12 to 24 months.Research by Gartner, Forrester, ComScore, Vision Mobile all confirm the idea that HTML5's importance is unavoidable.
Ground Hogs DayHaven’t we been here before? Haven’t we bought-in to the ideals of HTML/JS/Web only to be burned by browsers?What’s different about today? Or are we letting the groundhog drive us off a cliff?
http://dev.w3.org/html5/html4-differences/Goes on to say:The same goes for XHTML1, which defines an XML serialization for HTML4, and DOM Level 2 HTML, which defines JavaScript APIs for both HTML and XHTML. HTML5 will replace these documents.
http://en.wikipedia.org/wiki/HTML
http://en.wikipedia.org/wiki/Cascading_Style_SheetsIE Mac: Shipped in March 2000First browser to 100% support CSS: IE on Mac!9 style sheet languages proposed in early 90sLanguages:1996:JavaScript Style Sheets (JSSS) – Netscape1994: Cascading HTML Style Sheets (CHSS)1994: Stream-based Style Sheet Proposal (SSP)
WHATWG FAQs on Living Standard: http://wiki.whatwg.org/wiki/FAQ#What_does_.22Living_Standard.22_mean.3F
Trick question: Common answers will be the popular browsers.Right answer: The browsers that YOUR users use (based on analytics)
Source: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0&qpcustomd=0&qptimeframe=QUpdated: March 2014
Browser VersionsUpdated: March 2014
Mobile browsers are just as important for today's web developer.
What is the IE strategy for HTML5/CSS3?
On Microsoft’s strategy/approach to HTML5:http://blogs.msdn.com/b/ie/archive/2010/12/20/html5-site-ready-and-experimental.aspxhttp://blogs.msdn.com/b/interoperability/archive/2010/12/21/prototyping-early-w3c-html5-specifications.aspx
http://html5labs.interoperabilitybridges.com/http://www.beautyoftheweb.comInteroperability Bridges offers IE9 extensions for: FileAPI, IndexedDB, WebSockets, Video Captioning, Media Capture API (getUserMedia)
Scores from HTML5Test.com (updated Oct 2013)
Sun Spider benchmark test:http://www.webkit.org/perf/sunspider/sunspider.html
Show off some HTML5 in action
This is not a question with a single correct answer. It all depends on your audience and strategy.There are several general strategies for defining what is “usable” today.
Useful for adding HTML5 to both older browsers + new browsers that do not have a specific HTML5 featurehttp://remysharp.com/2010/10/08/what-is-a-polyfill/https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Strategy: Design for lowest common denominator, Enrich/Enhance as more capabilities are availableImage Source: http://www.flickr.com/photos/aaronolaf/833342657/
Strategy: Design for best case scenario (premium features), and gracefully remove features as resources are not availableImage Source: http://www.mbusa.com/mercedes/index
I want it now!How do you use HTML5 today?
Modern adoption of HTML5 is done by checking for individual feature support, NOT by checking for specific browsers/browser versions. This helps you adopt as much of HTML5 as possible in a progressively optimistic manner.
http://www.modernizr.com/
http://www.modernizr.comhttp://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/Modernizr now ships with ASP.NET MVC 3
Chrome Framehttp://code.google.com/chrome/chromeframe/Let's you use Chrome browser engine in IE 6/7/8/9chrome=1 - Always activechrome=IE7 - Active for IE major version 7 or lowerchrome=IE8 - Active for IE major version 8 or lower
Scores from HTML5Test.com (updated Oct 2012)
he HTML5 specification will not be considered finished before there are at least two complete implementations of the specification.http://www.w3.org/TR/html5-diff/#backwards-compatibleThe Living Standard: http://www.whatwg.org/specs/web-apps/current-work/multipage/
Important to define the scope and vastness of HTML5
Focusing on features most popular in use today by HTML5 developers. Sources:http://css-tricks.com/poll-results-html5-features-in-use-on-production-sites/http://css.dzone.com/articles/what-are-most-common-html5
HTML5 & CSS3 in VS2010 SP1: http://madskristensen.net/post/HTML5-CSS3-in-Visual-Studio-2010-SP1.aspxHTML5 in VS2008: http://stackoverflow.com/questions/1682180/will-visual-studio-2010-support-html-5
http://www.javascriptkit.com/dhtmltutors/customattributes.shtmlhttp://html5doctor.com/html5-custom-data-attributes/Two methods of access:- Via Attributes (http://api.jquery.com/category/attributes/)Via “dataset” (plug-in required today: http://www.orangesoda.net/jquery.dataset.html)
Chrome H.264 from MSFT:http://arstechnica.com/microsoft/news/2011/02/microsoft-offers-h264-plugin-for-chrome-queries-google-on-webm.arshttp://blogs.msdn.com/b/ie/archive/2011/02/01/html5-and-web-video-questions-for-the-industry-from-the-community.aspxChrome’s pull of H.264: http://arstechnica.com/web/news/2011/01/googles-dropping-h264-from-chrome-a-step-backward-for-openness.ars/
WebM support via a plug-in: http://tools.google.com/dlpage/webmmfTechCrunch on WebM: http://techcrunch.com/2011/01/14/webm-plugins/
http://upload.wikimedia.org/wikipedia/en/d/d0/Chrome_Logo.svgComparison articles:Great comparison: http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/http://blogs.sitepoint.com/2010/07/06/canvas-vs-svg-how-to-choose/ (IDEA: progressive enhancement techniques — for example, IE8 and earlier versions show a table of data whereas supported browsers show an animated pie chart.)SVG Bridge for all browsers:http://raphaeljs.com/CANVAS Bridge for IE: http://code.google.com/p/explorercanvas/(Pointless canvas example: http://paulirish.com/2010/high-res-browser-icons/)SVG is DOM-based. All elements exist in DOM. Thus, you can attach event handlers. CON: Many objects can hurt perf.CANVAS is PIXEL-based. All elements rendered quickly, but not part of DOM. CON: Harder to interact.
http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#states-of-the-type-attributehttp://www.html5laboratory.com/s/simple-html5-contact-form.htmlWeb Forms 2 (old spec – now Forms in HTML5): http://dev.w3.org/html5/web-forms-2/http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#formsDefined input types: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#the-input-elementCross browser input types: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/Cross browser forms 2.0: https://github.com/westonruter/webforms2
Link to demo from A List Apart (good final cap demo on validation)
iOS varies the keyboard significantly on the iPhone depending on the input typeShown: iOS5 (not available in iOS4)
http://diveintohtml5.org/forms.htmlPolyfills for other HTML5 features:http://ericleads.com/h5validate/
Consuming certain HTML5 features RAW is a bad idea. It can be done, but better if “cooked” with some assistive code.
http://diveintohtml5.org/geolocation.htmlSpec: http://dev.w3.org/geo/api/spec-source.htmlOnly lat, long, acc are guranteed. Other values might be available, including altitude, altitudeAccuracy, heading, speedCan force maximum age for cached geolocation objectsCan handle errors and make repeat location calls using navigatior.geolocation.watchPosition(successCallback, errorCallback, {maximumAge:time})Google Maps API v3 Reference: http://code.google.com/apis/maps/documentation/javascript/basics.html(Free to use on all apps that are free to consumers – no API keys needed)
http://html5demos.com/storageTutorial:http://html5tutorial.net/tutorials/working-with-html5-localstorage.htmlFallback for older browsers: http://amplifyjs.com/api/store/
Same Origin Policy for JS securityhttps://developer.mozilla.org/en/Same_origin_policy_for_JavaScript
http://html5demos.com/offlineapphttp://diveintohtml5.org/offline.htmlhttp://html5doctor.com/go-offline-with-application-cache/ (Good practical tips)Inspect appcache in Chrome: chrome://appcache-internals/Stephen Walther on using ASP.NET to serve Cache manifest: http://stephenwalther.com/blog/archive/2011/01/26/creating-html5-offline-web-applications-with-asp-net.aspxFix IIS Express manifest type: http://www.danielroot.info/2010/07/how-microsofty-writes-ipad-apps.htmlC:\Users\{YOU}\Documents\IISExpress\config\applicationHost.configComment out the .manifest mime type (sorry ClickOnce!)Add the following line: <mimeMapfileExtension=".manifest" mimeType="text/cache-manifest" />Can also override in IIS7+ config (integrated pipeline):<system.webServer> <staticContent> <mimeMapfileExtension=".manifest" mimeType="text/cache-manifest" /> </staticContent> </system.webServer>Application Cache API: http://www.w3.org/TR/html5/offline.html#application-cache-api
WebSql is not proceeding: http://dev.w3.org/html5/webdatabase/State of web local storage: http://rethink.unspace.ca/2010/5/10/the-state-of-html5-local-data-storageReplacement Tech is IndexedDB:http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.htmlSyncing back to a server database: http://stackoverflow.com/questions/1744522/best-way-to-synchronize-local-html5-db-storage-with-a-serverPersistenceJS:https://github.com/zefhemel/persistencejsGoogle Web Stroage Portability Layer: http://google-opensource.blogspot.com/2009/05/web-storage-portability-layer-common.html
Kills Google Gearshttp://www.w3.org/TR/IndexedDB/https://developer.mozilla.org/en/IndexedDBhttp://www.html5rocks.com/tutorials/indexeddb/todo/Good comparison by Mozilla to formerWebDatabase approach: http://hacks.mozilla.org/2010/06/comparing-indexeddb-and-webdatabase/
Example code for .NET WebSockets:http://www.undisciplinedbytes.com/2010/06/html-5-c-web-sockets-server-and-asp-net-client-implementation/Online demo: http://websocket.org/echo.htmlOpera on Sockets:http://my.opera.com/core/blog/websocketsSockets disabled by default in FF and Opera: http://annevankesteren.nl/2010/12/websocket-protocol-vulnerabilityEnabling sockets in Opera 11: opera:config#UserPrefs|EnableWebSocketsEnabling sockets in FF4: about:config -> network.websocket.override-security-block;trueIE9 can do WebSockets via a prototype Silverlight hack: http://html5labs.interoperabilitybridges.com/prototypes/available-for-download/websocketsLimits: http://html5labs.interoperabilitybridges.com/media/2311/readme.htmSockets vs. traditional polling performance: http://soa.sys-con.com/node/13154733rd party sockets solution for older browsers:
History API: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_historyA "saner" path forward? PathChange event: http://www.adequatelygood.com/2010/7/Saner-HTML5-History-Management
POST LUNCH SLEEPhttp://understanding-sleep-disorders.com/images/bigstockphoto_Man_Asleep_On_Laptop_With_Cup__5671.jpg
Chrome Camera App + Chrome OSFirefox OSWindows 8Browser SPAWebsite
Chrome OS Camera app
The goal of a SPA is to provide a more fluid, desktop app like experience using web standardsTerm "SPA" coined by Steve Yen in 2005, though concept has existed for much longer
SPA examples: Gmail, Google Docs, iCloud
Overcome the limits of HTML5Use proxy tools like Cordova (the open source variant of PhoneGap)Available APIs listed in Greenhttp://docs.phonegap.com/en/1.7.0/index.html
More explanation:http://phonegap.com/2012/05/02/phonegap-explained-visually/
JavaScript 101
AGENDA:- Why JavaScript? Why?!- Most Common JS Problems- TIPS- Future of JavaScript
JavaScript uses syntax influenced by that of C. JavaScript copies many names and naming conventions from Java, but the two languages are otherwise unrelated and have very different semantics. The key design principles within JavaScript are taken from the Self and Scheme programming languages.http://en.wikipedia.org/wiki/JavaScript
NOTES:HistoryEvolutionThe IE Connection (IE6 memory)Modern JS EnginesBOTTOM LINE: Only Cross Platform Language Solution
Netscape also wanted a lightweight interpreted language that would complement Java by appealing to nonprofessional programmers, like Microsoft's VB
Credit: Brendan Eich via WikipediaSource: http://www.jwz.org/blog/2010/10/every-day-i-learn-something-new-and-stupid/#comment-1021Brendan further said that JavaScript saved the world from VBScripthttp://www.jwz.org/blog/2010/10/every-day-i-learn-something-new-and-stupid/#comment-1049
Java is to JavaScriptASCar is to CarpetNetscape was going to release JavaScript as “LiveScript.” Last minute change produced JavaScript.
HOW DID JAVASCRIPT BECOME UBIQUITOUS?Netscape shipped first in Netscape 2Microsoft support added in IE3 (“JScript”)Other environments adopted JavaScript-like script languages: ActionScript (Flash), PDFs, Qt
Contributing factors:New JS engines (V8)CPU speed (more local processing power)Better debugging toolsBetter understanding of language (closures, patterns, functional programming, JSLint)
Chrome is 10x faster than IE7 (IE6 too old to test)Used crude relative test: http://jsbenchmark.celtickane.com
http://geekmontage.com/firefox-vs-chrome-vs-ie/
http://www.codinghorror.com/blog/2007/07/the-principle-of-least-power.htmlThe Principle of Least Power
Jordan Ilchev, Icenium Team LeadIvan Ivanov, Sr DeveloperBurke Holland, Evangelist, Kendo UIJohn Bristowe, Evangelist, Kendo UITsvetomirTsonev, Sr Developer, Kendo UI
jQuery built for convenience, not for performance.PERF PROOF: http://jsperf.com/id-vs-class-vs-tag-selectors/46Note: This in general is applicable to native JavaScript methods too, like document.getElementById() not limited to jQuery only objects DOM lookups are slow especially if DOM is huge.Instead of this:$('#test').bind('click', function() { /**/ });$('#test').css('border', '1px solid #999');Better use jQuery Method chaining:$('#test').bind('click', function() {/**/ }) .css('border', '1px solid #999');Or cache jQuery object:var $test = $('#test');$test.bind('click', function() {/**/ });$test.css('border', '1px solid #999');(Performance comparison here: http://jsperf.com/jquery-chaining/12) (~+30% here, but it stacks on each additional method call)
PRO TIP CONVENTION: Name jQuery variables with $ (ie $myObject)PERF TEST: http://jsperf.com/caching-jquery-objects-perfhttp://jsbin.com/udizam/2
PERF TEST: http://jsperf.com/for-vs-foreach-vs-each/3- Caching the array length improves perf by about 15% (http://jsperf.com/for-vs-foreach-vs-each/24)- Technically a reverse (count down) for loop is faster (15%) than count-up loop, but much harder to read/use
Global variables pollute the JS app and are slower to use in code. Harder to be a good JS "neighbor" with global variables (collide with other JS code).Better to use local variables, cached variable, or closures
Global memory garbage collecting problem example: http://fiddle.jshell.net/toddanglin/EhEBM/3/show/light/
Pattern sometimes referred to as: MODULE EXPORThttp://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-DepthBE CAREFUL WITH CLOSURES: Most common source of memory leaks in modern appshttps://developers.google.com/speed/articles/optimizing-javascriptCircular Reference Memory Leaks: http://blogs.msdn.com/b/ericlippert/archive/2003/09/17/53028.aspx
Pattern sometimes referred to as: MODULE EXPORThttp://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-DepthBE CAREFUL WITH CLOSURES: Most common source of memory leaks in modern appshttps://developers.google.com/speed/articles/optimizing-javascriptCircular Reference Memory Leaks: http://blogs.msdn.com/b/ericlippert/archive/2003/09/17/53028.aspx
PERF TEST: http://jsperf.com/prototype-vs-closures/20Explanation of term: http://benalman.com/news/2010/11/immediately-invoked-function-expression/Suppose you develop a widget. The widget has a number of axillary classes. If you just define them globally they will pollute the global window class, meaning they will be available from everywhere. Instead consider the following definition: (function (window) { function classA () {} function classB () {} function myWidget () {} myWidget.prototype.method1 = function () { } window.myWidget = myWidget; }) (window, undefined); This is the pattern which jQuery follows. Now the only available global definition will be of myWidget. classA and classB remain hidden in the anonymous function. If you look closely in the definition, you will see the that window and undefined are passed to the anonymous function. Passing anonymous guaranties that undefined will be available in the scope of this function and will prevent you from someone who accidentally did something like: undefined = true; before your function. Also, if you use some minifier, it will replace all occurrences of window with some shorter name. Of course you can pass as much params as you wish, thus assuring that these objects exist in the scope of your anonymous function.
- Binding to delegates is less brittle, easier to avoid memory leaks- Pub/Sub is super flexible, less coupling
The scope of an inline event bind is GLOBAL!Inline event handlers can also cause memory leaks in IE: https://developers.google.com/speed/articles/optimizing-javascript
Old jQuery syntax: .delegate
Every time you need to dispose a DOM element, make sure you unbind all of its events, unless you want to come up with a memory leak.Whenever you bind an event handler to an event, you tell the processor to allocate memory for it. The more event handlers you have running at the same time, the more memory you are using. This is why it's important to unbind or detach your event handlers soon as you no longer need them.http://www.learnjquery.org/newsletter/Tutorial-3-jquery-events.html
Event listening PUB/SUB
Reducing the time spent changing the DOM improvesperf. Using templates improves readability/maintainability.Instead of this:var $list = $('#mylist').append('<ul>');for (var i = 0, l = itemlist.length; i < l; i++) { $list.append('<li>' + itemlist[i] + '</li>');}better this:var $list = $('<ul>');for (var i = 0, l = itemlist.length; i < l; i++) { $list.append('<li>' + itemlist[i] + '</li>');}$('#mylist').append($list);(Performance comparison here: http://jsperf.com/jquery-dom-manipulation/3) (up to x5 in this case)
PERF TEST: http://jsperf.com/jquery-dom-manipulation/4When you want to dynamically build html, prefer string concatenation like: var html = ’<p>some paragraph</p>’;html += ‘<p>another paragraph</p>’;$(“#placeHolder”).html(html); over DOM object creation and appending/prepending like: var p1 = document.createElement('p'); p1.innerHTML = "some paragraph"; document.body.appendChild(p1); var p2 = document.createElement('p’); p2.innerHTML = "another paragraph"; document.body.appendChild(p2); assigning directly to the innerHTML proves to be the fastest method for html creation.
Common Examples:RequireJS, CommonJSApplications of any size are painful to manage without a module pattern.
We want to reduce JavaScript files for performance (fewer network requests), BUT…One large JS file is hard to maintain. We'd really prefer more modular files.
JSLint – by Douglas CrockfordCode quality tool for JavaScripthttp://www.jslint.com/
Defer first implemented in IE 4!Non-blocking script references
async overrides defer (when available)Scripts loaded async/defer shouldn’t modify the DOM or do any document.writeUSE ASYNC to avoid waiting on 3rd party scripts to loadUSE DEFER to improve parallel script downloadingScripts are executed before DOMContentLoaded / window.onload
More complete fix by Paul Irish: http://paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
Triathlon meme/moment
Before CSS:Styles were mixed with HTML tags (difficult to update, difficult to read)Layout was defined with HTML tags (poor semantic use of tags)
CSS exists to separate styling and layout decisions from structural meaning of underlying document*Separation of concerns to a degreeCSS rules often tend to create dependencies on HTMLOther benefits of CSS:Performance (caching of CSS rules)Semantic HTML
Peter Griffin CSS cartoon
http://en.wikipedia.org/wiki/Cascading_Style_SheetsIE Mac: Shipped in March 20009 style sheet languages proposed in early 90sLanguages:1996:JavaScript Style Sheets (JSSS) – Netscape1994: Cascading HTML Style Sheets (CHSS)1994: Stream-based Style Sheet Proposal (SSP)
Extensions for CSS2.1Add functionality, refine definitionsNew CSS3 featuresCSS3 principlesShow example of CSS3 in actionList of all CSS properties:http://meiert.com/en/indices/css-properties/http://www.w3.org/Style/CSS/current-workhttp://www.w3.org/TR/2010/WD-css-2010-20101202/#css3
CSS3’s evolutionary approachMicrosoft is focusing primarily on adding product support at the Candidate Recommendation stageReview status of various CSS3 proposed specs: http://www.w3.org/Style/CSS/current-workUpdated: Oct 2012
Microsoft Extensions: http://blogs.msdn.com/b/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspxVendor specific prefixes: http://reference.sitepoint.com/css/vendorspecific
CSS Selectors over time (1, 2, 3) - As of Nov 2011
@font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5IE relied on proprietary Embedded Open Type (.eot)Old school solutions involved things like sIFR (http://www.mikeindustries.com/blog/sifr/)Modern browsers finally support TTF and OTF + Most support new WOFF (exception is Safari)Resources:http://www.css3.info/preview/web-fonts-with-font-face/http://www.alistapart.com/articles/cssatten
Making fonts compatible with IE requires some work-around:http://randsco.com/index.php/2009/07/04/p680\Discussion of WOFF:http://en.wikipedia.org/wiki/Web_Open_Font_Format
Demo: http://slides.html5rocks.com/#flex-box-1
Fix “bleeding” in Webkit with: -webkit-background-clip: padding-box;http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleedhttp://css3pie.com/
Relatively new CSS standard defining Gradients: http://www.w3.org/TR/css3-images/IMAGES FROM: http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/Great visual CSS gradient generator: http://www.display-inline.fr/projects/css-gradient/#startType=hex&startValue=aaeeff&endType=hex&endValue=3399ccSimple Visual gradient creator: http://gradients.glrzad.com/Good explanation:http://www.dynamicdrive.com/style/csslibrary/item/css3_linear_gradients/background: black;background: -moz-linear-gradient(top, black, white);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white)); /*You can also make gradient stops*/-moz-linear-gradient( top,rgb(214,24,166) 0%,rgb(255,51,200) 50%,rgb(255,77,240) 87%)
Not currently supported in IE9CSS3 Animation Examples:http://webdeveloperjuice.com/demos/css/css3effects.html#secondhttp://anthonycalzadilla.com/css3-ATAT/index.htmlhttp://www.optimum7.com/css3-man/animation.html