HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Upcoming SlideShare
Loading in...5

HTML5 Bootcamp: Essential HTML, CSS, & JavaScript



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

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.



Total Views
Views on SlideShare
Embed Views



3 Embeds 542 417 122 3


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • 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:
  • 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.
  • 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?
  • 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.
  • 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:
  • Trick question: Common answers will be the popular browsers.Right answer: The browsers that YOUR users use (based on analytics)
  • Source: 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:
  • Bridges offers IE9 extensions for: FileAPI, IndexedDB, WebSockets, Video Captioning, Media Capture API (getUserMedia)
  • Scores from (updated Oct 2013)
  • Sun Spider benchmark test:
  • 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 feature
  • Strategy: Design for lowest common denominator, Enrich/Enhance as more capabilities are availableImage Source:
  • Strategy: Design for best case scenario (premium features), and gracefully remove features as resources are not availableImage Source:
  • 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 now ships with ASP.NET MVC 3
  • Chrome Frame'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 (updated Oct 2012)
  • he HTML5 specification will not be considered finished before there are at least two complete implementations of the specification. Living Standard:
  • Important to define the scope and vastness of HTML5
  • Focusing on features most popular in use today by HTML5 developers. Sources:
  • HTML5 & CSS3 in VS2010 SP1: in VS2008:
  • Demo End Result Goal
  • Starting Point for the Demo
  • methods of access:- Via Attributes ( “dataset” (plug-in required today:
  • Chrome H.264 from MSFT:’s pull of H.264:
  • WebM support via a plug-in: on WebM:
  • articles:Great comparison: (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: Bridge for IE: canvas example: 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.
  • Forms 2 (old spec – now Forms in HTML5): input types: browser input types: browser forms 2.0:
  • Useful articles:
  • 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)
  • for other HTML5 features:
  • Consuming certain HTML5 features RAW is a bad idea. It can be done, but better if “cooked” with some assistive code.
  • 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: to use on all apps that are free to consumers – no API keys needed)
  • for older browsers:
  • Same Origin Policy for JS security
  • demo:
  • (Good practical tips)Inspect appcache in Chrome: chrome://appcache-internals/Stephen Walther on using ASP.NET to serve Cache manifest: IIS Express manifest type:\Users\{YOU}\Documents\IISExpress\config\applicationHost.configComment out the .manifest mime type (sorry ClickOnce!)Add the following line: Can also override in IIS7+ config (integrated pipeline): Application Cache API:
  • WebSql is not proceeding: of web local storage: Tech is IndexedDB: back to a server database: Web Stroage Portability Layer:
  • Kills Google Gears comparison by Mozilla to formerWebDatabase approach:
  • Example code for .NET WebSockets: demo: on Sockets: disabled by default in FF and Opera: 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: vs. traditional polling performance: party sockets solution for older browsers:
  • File API:
  • worker
  • History API: "saner" path forward? PathChange event:
  • 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 Green
  • More explanation:
  • 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.
  • 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: further said that JavaScript saved the world from VBScript
  • 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:
  • 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: 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: (~+30% here, but it stacks on each additional method call)
  • PRO TIP CONVENTION: Name jQuery variables with $ (ie $myObject)PERF TEST:
  • PERF TEST: Caching the array length improves perf by about 15% ( 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
  • Chart credit: TEST:
  • Global memory garbage collecting problem example:
  • Pattern sometimes referred to as: MODULE EXPORT CAREFUL WITH CLOSURES: Most common source of memory leaks in modern apps Reference Memory Leaks:
  • Pattern sometimes referred to as: MODULE EXPORT CAREFUL WITH CLOSURES: Most common source of memory leaks in modern apps Reference Memory Leaks:
  • PERF TEST: of term: 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:
  • 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.
  • Event listening PUB/SUB
  • Reducing the time spent changing the DOM improvesperf. Using templates improves readability/maintainability.Instead of this:var $list = $('#mylist').append('');for (var i = 0, l = itemlist.length; i < l; i++) {       $list.append('' + itemlist[i] + '');}better this:var $list = $('');for (var i = 0, l = itemlist.length; i < l; i++) {       $list.append('' + itemlist[i] + '');}$('#mylist').append($list);(Performance comparison here: (up to x5 in this case)
  • PERF TEST: you want to dynamically build html, prefer string concatenation like: var html = ’some paragraph’;html += ‘another paragraph’;$(“#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 JavaScript
  • 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:
  • 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
  • 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:
  • CSS3’s evolutionary approachMicrosoft is focusing primarily on adding product support at the Candidate Recommendation stageReview status of various CSS3 proposed specs: Oct 2012
  • Microsoft Extensions: specific prefixes:
  • 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 ( browsers finally support TTF and OTF + Most support new WOFF (exception is Safari)Resources:
  • Making fonts compatible with IE requires some work-around:\Discussion of WOFF:
  • Demo:
  • Fix “bleeding” in Webkit with: -webkit-background-clip: padding-box;
  • Relatively new CSS standard defining Gradients: FROM: visual CSS gradient generator: Visual gradient creator: explanation: 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%)
  • Illustrate media query adapting (video?)
  • Not currently supported in IE9CSS3 Animation Examples:
  • Mind Blown

HTML5 Bootcamp: Essential HTML, CSS, & JavaScript HTML5 Bootcamp: Essential HTML, CSS, & JavaScript Presentation Transcript

  • HTML5 Bootcamp Essential HTML, JavaScript & CSS Todd Anglin EVP Product Strategy, Telerik
  • Workshop Downloads: ( (Case sensitive)
  • 10 % Read 20% Hear 30% See 50% Hear + See 70% Say + Write 90% Experience You generally remember...
  • EVP Product Strategy, Telerik 5x Microsoft MVP, ASP Insider, O'Reilly Author TexMex 5’ 9” 41 (Birkenstock)
  • Workshop Agenda Time Topic 8:30 AM to Noon HTML5 Noon to 1:00 PM LUNCH 1:00 PM to 4:30 PM JavaScript & CSS3 WHY + HOW
  • Morning Agenda Time Topic 8:30 AM Intro to HTML5 & Fundamentals 11:00 AM HANDS ON 11:25 AM Modern HTML App Patterns Overview Noon Lunch
  • HTML5 Sites HTML5 Apps HTML5 Enriched
  • 21:02
  • the "plan" the options HTML5 the browsers use it todayA&Q
  • 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 “
  • 21:02
  • 21:02
  • Why is HTML5 #winning the web? 21:02
  • It's Important.
  • 82%
  • It's Unifying.
  • It's Everywhere.
  • “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
  • HTML4 = Rough Guide Unpredictable Browser Support
  • How is the web evolving?
  • <HTML> CSS:3; ECMAScript(); “HTML5”
  • “Living Standard” WebSockets FileAPI WebGL HTML5 Forms Geolocation Offline Canvas Video Audio Canvas Video Geolocation Semantic Tags SVG WHATWG | W3C | IETF 21:02
  • Which browsers matter?
  • Know your users. Know your browsers.
  • of internet browses with IE, FF, Safari, Chrome, or Opera 99%
  • Source: comScore, Alexa, Flurry Analytic 0 20 40 60 80 100 Jun-10 Dec-10 Jun-11 Dec-11 PC & Mobile Web Browsing Mobile Apps 64 MINUTES 43 MINUTES 70 MINUTES 66 MINUTES 74 MINUTES 81 MINUTES 72 MINUTES 94 MINUTES
  • Canvas | Local Storage | Microdata | Document Editing | Geolocation Semantic Tags | Video/Audio | Selectors WebGL | WebSockets | File API | Drag-Drop API | IndexedDB | Offline API | Web Workers | HTML5 Forms 21:02
  • 21:02
  • 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
  • +
  • 25 26 41 138 138 286 287 303 320 329 337 374 378 386 389 390 397 415 430 434 448 498505 0 100 200 300 400 500 600 InternetExplorer6» InternetExplorer7» InternetExplorer8» InternetExplorer9» WinPhone7.5» Android4.0» Android4.3» Safari5.1» WinPhone8» Opera11.60» Firefox8» Chrome17» Safari6.0» iOS6.0» Opera12» ChromeMobile» Safari7.0» iOS7.0» Firefox24» Chrome22» Firefox28» Chrome32» Chrome33» relative HTML5 scores IE10 IE11
  • In the future, browsers compete on speed, not on features
  • DEMO
  • What is usable today?
  • X X X X X X X X X X X X X X X Adoption Strategies Only use features natively available in all target browsers 21:02
  • X X X X X X X X X X X X X X X Adoption Strategies Only use features either natively available OR available via JavaScript polyfill X X 21:02
  • 21:02
  • 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
  • progressive enhancement graceful degradation
  • [Source: Aaron Olaf, Flickr] 21:02
  • [Source: Mercedes USA,] 21:02
  • X X X X X X X X X X X X X X X Adoption Strategies Create experiences targeted at specific browsers (or classes of browsers) X X X X X X X 21:02
  • 21:02
  • Don't sniff browsers. (Test for features.)
  • modernizr
  • Modernizr.[featureName] if (Modernizr.canvas) { //Use It! } .[featureName] || .no-[featureName] .no-canvas { //Styles } .canvas { //Other Styles}
  • DEMO Modernizr
  • <meta http-equiv="X-UA- Compatible" content="chrome=1">
  • 25 26 41 138 303 320 329 337 374 378 389 434 0 50 100 150 200 250 300 350 400 450 500 relative HTML5 scores
  • <HTML5>
  • The Basics • <!DOCTYPE html> • 9 new “structure” tags • 16 new HTML elements • 13 new <input> types 21:02
  • compatible
  • stuff you can do today stuff you can do tomorrow (or today, too, if IE support is not critical)
  • We'll cover a lot! But not nearly everything.
  • semantic tags audio & video HTML5 Forms geolocation web storage drag & drop canvas offline web sql indexedDB web sockets history api file api
  • WebGL web workers XHR2 querySelector classList CORS crypto performance visibility api online/offline custom protocol typed arrays Web Audio API inline SVG FS API Canvas animation notifications orientation microdata flexbox more... For homework.
  • Add IntelliSense & Schema Validation to Visual Studio 2008/2010 (pre SP1) 21:02
  • 21:02 HTML5 Forms Geolocation Video CSS3 {Web Sockets} {Storage} {IndexedDb} {Semantic Data}
  • 21:02
  • semantic tags tag: <header> <footer> <nav> <article> <hgroup> support: IE9, FF3.5, Safari, Chrome, Opera <body> <div id=‚header‛> </div> <div id=‚content‛> <div id=‚nav‛></div> </div> <div id=‚footer‛> </div> </body> <body> <header> </header> <section> <nav></nav> </section> <footer></footer> </body> VS.
  • fixing IE <head> <meta charset="utf-8" /> <title>My Weblog</title> <!--[if lt IE 9]> <script src=""></script> <![endif]--> </head> *Polyfill required to trigger styling in old IE 21:02
  • Why use it? • Accessibility* • SEO* • Code readability • Developer street cred • Why not? 21:02
  • 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
  • Why use it? • Embed data in page 21:02
  • video & audio Semantic rich media Reach more people on more devices Container Codec Silverlight FlashHTML5
  • 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
  • Why use it? • Video for plug-less mobile devices • Eliminate dependencies on Flash/Silverlight (future proofing) 21:02
  • 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
  • fixing IE <head> <!--[if IE]> <script src="excanvas.js"></script> <![endif]--> </head> Explorercanvas 21:02
  • Scalable Vector Graphics Canvas Bitmap-output Good for animation JavaScript-based Vector-output Good for interaction XML-based 21:02
  • Why use it? • Dashboards • Charts/Gauges • Resolution independence 21:02 • Games • Super custom rendering SVG Canvas
  • 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
  • validation • HTML: Required, Type, Pattern • JS: checkValidity() • CSS: :invalid, :valid, :required <form> <input type="email" placeholder="Enter your email" required title="Please enter a valid email address" /> <input type="submit" value="Go" /> </form>
  • via A List Apart ( 21:02
  • 21:02 iOS 7 deprecated datetime support & handles week poorly
  • progressive enhancement <form name="f"> <input id="q" autofocus> <!--Technique to support older browsers--> <script> if (!("autofocus" in document.createElement("input"))) { document.getElementById("q").focus(); } </script> <input type="submit" value="Go"> </form>
  • 21:02 “Consuming raw or undercooked meat, poultry, seafood, shellfish or eggs may increase risk of foodborne illness.”
  • 21:02
  • COOKEDRAW html5 forms 21:02 Available heat: - Kendo UI (validation + UI) - jQuery HTML5 Form - H5F
  • Why use it? • Mobile input • Improved form behavior in modern browsers • Semantic forms • New styling options 21:02
  • geolocation navigator.geolocation.getCurrentPosition(callback); function callback(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var acc = position.coords.accuracy; } support: IE9, Safari, FF3.5, Chrome, Opera opt-in user feature to share physical position
  • COOKEDRAW geolocation 21:02
  • Why use it? • Enrich apps with location awareness • Track user position 21:02
  • local storage sessionStorage = per window localStorage = per browser <script> sessionStorage.setItem('value', this.value); localStorage.setItem('value', this.value); sessionStorage.getItem(‘value’); sessionStorage.clear(); localStorage.clear(); </script> support: IE9, FF3.5, Safari, Chrome, Opera 5 MB limit
  • protocol host port (+ browser mode)
  • COOKEDRAW local storage 21:02 Available heat: - localstorage polyfill - amplifyJS - lawchairJS
  • Why use it? • Better than cookies • Simple API 21:02
  • 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){ // is the current target element if(e.stopPropigation) e.stopPropigation(); //Prevent redirect //Do something with payload return false; } support: IE9, FF, Safari, Chrome, Opera
  • IMG File HTML draggable dragstart drag dragenter dragleave dragover drop dragend Change appearance, Set payload Change drop target appearance Process DnD payload
  • dragstart drop e.dataTransfer.setData([MIME type], [payload]) e.dataTransfer.getData([MIME type]) e.dataTransfer.files; //FileList object
  • COOKEDRAW drag & drop 21:02 Available heat: - Kendo UI (DnD & Upload) - jQuery UI Draggable
  • Why use it? • Support DnD files in the browser • Reduce JS footprint 21:02
  • stuff you can do today stuff you can do tomorrow
  • 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
  • COOKEDRAW offline 21:02
  • Why use it? • Aggressive resource caching • Foundation for offline 21:02
  • 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
  • indexedDB JavaScript API for indexed local storage var request ="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)
  • COOKEDRAW indexedDB 21:02 Available heat: - IDBWrapper - PouchDB - lawnchairJS
  • Why use it? • Browser storage of larger datasets • Offline data • Better than local storage for complex data operations 21:02
  • web sockets api: WebSocket ws = new WebSocket("ws://localhost:8282/test‛); ws.onopen = WSonOpen; ws.onmessage = WSonMessage; ws.onclose = WSonClose; ws.onerror = WSonError; function WSonMessage(event) { $(‚#myDiv‛).html(; }; support: IE9**, Safari 5, Chrome, FF4*, Opera 11*
  • Socket.IO SignalR SockJS
  • COOKEDRAW web sockets 21:02 Available heat: - SignalR - Socket.IO - Sockjs
  • Why use it? • 2-way real-time messaging • Replace long-polling & interval “hacks” • Eliminate dependencies on plug-ins 21:02
  • file api access to local file system & data streaming var file = e.dataTransfer.files[0], reader = new FileReader(); reader.onload = function (event) { var dataUrl =; }; reader.readAsDataURL(file); .readAsBinaryString(file); .readAsText(file); .readAsArrayBuffer(file); support: IE10, FF4, Chrome, Opera 11.1
  • COOKEDRAW file api 21:02
  • Why use it? • Process files with fewer server trips • Improve usability • Desktop-like experiences • Better file upload 21:02
  • 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
  • </html>
  • LUNCH <BR /> 1-Hour Pit Stop. Resume @ 1:00 PM.
  • Afternoon Agenda Time Topic 1:00 PM Tips for Better JavaScript 2:45 PM Intro to CSS3 & Fundamentals 4:00 PM Final Workshop Q&A 4:30 PM Fin
  • HTML App Patterns
  • You are not a web developer.
  • You are a web standards developer.
  • <HTML> CSS:3; ECMAScript();
  • DEMO
  • In browser Out-of-browser{ } Always connected Sometimes connected{ } Site experience App experience{ } Packaged Served{ }
  • 21:02 1. Website 2. Single Page App (SPA) 3. Mix
  • Website HTML Concepts: Pages, Server-side Views, Links, Thin Client
  • Website: Always connected In-browser Served Site experience 21:02
  • Single Page Application (SPA) 21:02 JS
  • Single Page Application (SPA) JS 21:02 Concepts: Web Services, Client-side, Application
  • SPAs provide a more fluid user experience, similar to a "desktop" application. 21:02
  • SPA: App Experience 21:02
  • Native Shell + SDK Proxy Native App HTML/JS/CSS App
  • Hybrid Approaches 21:02 JS Data JS Data Slices of SPA
  • Hybrid Approaches 21:02 JS SPA ShellSPA Website
  • Just because you're using web standards, doesn't mean you're building websites. 21:02
  • 21:02
  • Why JavaScript? WHY?!
  • It‟s the first?
  • It‟s the best?
  • It‟s the easiest?
  • It‟s the fastest?
  • It‟s everywhere.
  • No, really. Brendan Eich. Netscape.
  • “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”
  • : :: :
  • Sept 1995 Netscape Aug 1996 Microsoft June 1997 ECMAScript // Mar 1999 XHR Feb 2005 Ajax Aug 2001 IE6 Firefox Safari Chrome Mobile
  • 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
  • Can‟t Beat „em, Join „em.
  • Modern JavaScript Faster. Easier. Better.
  • Attwood‟s Law: Any application that can be written in JavaScript, will eventually be written in JavaScript 2007
  • 1. Slow Execution 2. Memory leaks 3. Poor Code Organization 4. Lack of Understanding
  • 5(ISH) TIPS
  • From real masters: Jordan Ivan Tsvetomir Atanas Burke John Brandon
  • TIP #1 jQuery is a friend… …that will stab you in the back. Prove It
  • CACHE OBJECTS $("#myDiv").css("color","red"); $("#myDiv").css("opacity",1); BAD $("#myDiv").css("color","red") .css("opacity",1); BETTER var $myDiv = $("#myDiv"); $myDiv.css("color","red"); $myDiv.css("opacity",1); BEST* Prove It
  • 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
  • TIP #2 Avoid Global Variables They're slow & rude.
  • function add(num1, num2){ return num1 + num2; } var result = add(5, 10); 21:02 Prove It
  • var name = "Todd"; function sayHello(){ alert(name); } function sayHello(){ var name = "Todd"; alert(name); } 21:02 BAD BETTER
  • Closures & Module Pattern
  • function doInitStuff(){ ... } function loadSomething(){ ... } function handleButtonClick(){ ... } function harlemShake(){ ... } yourFile.js
  • function doInitStuff(){ var user = "Todd"; } function loadSomething(){ if (user == "Todd") ... } function handleButtonClick(){ ... } function harlemShake(){ ... } yourFile.js
  • var user = ""; function doInitStuff(){ user = "Todd"; } function loadSomething(){ if (user == "Todd") ... } function handleButtonClick(){ ... } function harlemShake(){ ... } yourFile.js
  • var [window].user = ""; function [window].doInitStuff(){ user = "Todd"; } function [window].loadSomething(){ if (user == "Todd") ... } function [window].handleButtonClick(){ ... } function [window].harlemShake(){ ... yourFile.js
  • var app = (function(){ var _name = "Todd"; return{ sayHello: function(){ alert(_name); } } }()); app.sayHello(); 21:02 BEST(ISH)
  • var app = (function(){ var _name = "Todd"; return{ sayHello: function(){ alert(_name); }, sayGoodbye: function(){ alert(_name); } } }()); 21:02 BEST(ISH) Your “Public” API
  • 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
  • TIP #3 Bind to Events & Pub/Sub Just listen.
  • <button id="btn" onclick="sayHello();"> Click Me </button> $(function(){ $(‚#btn").on("click",sayHello); }); 21:02 BAD BETTER
  • $(document).on("click", "button", sayHello); 21:02 BEST Why? Compare A Compare B
  • function doSomthing{ ... doSomethingElse(); doOneMoreThing(); } 21:02 BAD
  • function doSomething() { ... $(document).trigger("DO_SOMETHING_DONE"); } $(document).on("DO_SOMETHING_DONE", function(){ doSomethingElse(); }); 21:02 BETTER Example
  • function doSomething(successCallback, failCb){ //Do something async... if(error){ failCb(); } else { successCallback(); } } function doSomethingElse(){ doSomething(function(){...}, function()...); } 21:02 ANOTHER PROBLEM
  • function doSomething(){ var dfd = new $.Deferred(); //Do something async, then... //dfd.resolve(); //OR //dfd.reject(); return dfd.promise(); //Returns immediately! } function doSomethingElse(){ doSomething().done(//Success!).fail(//Error); } 21:02 ANOTHER SOLUTION
  • TIP #4 Don't fondle the DOM. Go with the flow.
  • 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.
  • function doSomething{ ... var $list = $("body").append("<ul>"); for(var i = 0; i < 10; i++){ $list.append("<li>"+ i +"</li>") } } 21:02 BAD
  • function doSomething{ ... var $domChunk = $("<ul>"); for(var i = 0; i < 10; i += 1){ $domChunk.append("<li>"+ i +"</li>"); } $("body").append($domChunk); } 21:02 BETTER
  • 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
  • <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
  • TIP #5 Learn a module pattern. (Or some kind of app structure)
  • A.js B.js Manual (index.html) <script src="B.js"></script> <script src="A.js"></script> <script src="main.js"></script> Module Loader (main.js) require(["A","B"], function(){ //Dependencies are loaded });
  • USE JSLINT Guaranteed to Hurt Your Feelings™ 21:02 MINIFY YOUR JS Words are for humans. MASTER BROWSER DEV TOOLS Debug JavaScript where it runs.
  • Debugging
  • console.log()
  • Fix IE <script type="text/javascript"> <!--Console global variable fix for IE--> if (!this.console) { window.console = { log: function() {} }; } </script> 21:02
  • Resources for Study • Books – JavaScript: The Good Parts (Crockford) – JavaScript: The Definitive Guide (Flanagan) – JavaScript Patterns (Stefanov) – High Performance JavaScript (Zakas) 21:02
  • console.clear();
  • 21:02
  • 21:02
  • [before CSS] <html> <head>…</head> <body> <table> <tr><td> <font size=‚3‛ color=‚red‛> <h1>Hello World!</h1> </font> </td></tr> <font color=‚green‛> <font face=‚Tahoma‛> <h2>I’m green! I think.</h2> </font> <p>Lorem ipsum</p> </font> </table> </body> </html> {HTML}
  • Separation of Concerns* <html> <head>…</head> <body> <header>…</header> <article> <h1>Hello!</h1> <p>Lorem ipsum</p> </article> <nav>…</nav> <footer>…</footer> </body> </html> structure body { color:#FFF; } header { margin:5px; } article { margin:5px 0; padding: 10px; background: #333; } style {HTML} {CSS}
  • 21:02
  • CSS has been plagued with inconsistencies & browser bugs
  • What's CSS3? CSS 2.0++++ Module Status Animations WD 2D/3D Transformations WD Selectors (Level 3) REC Media Queries (Level 3) REC Backgrounds & Borders (rounded corners) CR Text Decoration (text shadows, outline) CR CSS 2.1 REC WD LC CR PR REC 21:02
  • WD LC CR PR REC CSS 2.1 CSS3 Color Selectors Media Queries Backgrounds & Borders Multi-column Flex Box Marquee 25+ Drafts Transitions Transformations Animations Gradients CSS3 Text 21:02
  • Browser Prefixes -webkit -moz -o -ms "standard" way browsers implement custom features. 21:02
  • Prefixes are going away (eventually) 21:02 RECENT NEWS Browser "flags" will handle emerging feature
  • -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 2px 2px 2px #333; -webkit-box-shadow: 2px 2px 2px #333; box-shadow: 2px 2px 2px #333; -webkit-background-size: 137px 50px; -o-background-size: 137px 50px; background-size: 137px 50px; 21:02
  • Selectors Color Custom Fonts Borders & Backgrounds Gradients Media Queries Animations Transitions Layouts (Grid, Flex, etc)
  • 1. Selectors 2. Custom Fonts 3. Whiz Bang Styley Whimey 4. Layouts
  • * E[foo] E[foo="bar"] E[foo~="bar"] E[foo|="en"] E:first-child E:lang(fr) E:hover E:focus E:disabled E::before E::after E > F E + F E E:link E:active E:visited E::first-line E::first-letter E.warning E#myid E F E[foo^="bar"] E[foo$="bar"] E[foo*="bar"] E:root E:nth-child(n) E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:last-of-type E:only-child E:only-of-type E:empty E:target E:enabled E:checked E:not(s) E ~ F
  • CSS3 Selectors • Powerful new selector options //Alternating Items li:nth-child(odd) { color: blue; } li:nth-child(even) { color: green; } li:nth-child(3n) { color: red; } //Every 3rd item //First/Last Items li:first-of-type { color: blue; } li:not(:first-of-type):not(:last-of-type) { color: orange; } //All *but* first/last //Enabled/Disabled input:enabled { border: 2px solid green; } input:disabled { background-color: #BBB; } *Use jQuery to support legacy browsers
  • Biggest problem with custom fonts? 21:02 Licensing. (And then file format.) (And then performance.) (And then Comic Sans.)
  • Custom Fonts @font-face { font-family: Delicious; src: url('Delicious-Roman.otf') format(“opentype”); } //Usage h3 { font-family: Delicious, sans-serif; }
  • WebFont Providers + WOFF 21:02
  • Borders, Backgrounds, Gradients, Shadows, Text Shadows, Colors 21:02
  • -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 2px 2px 2px #333; -webkit-box-shadow: 2px 2px 2px #333; box-shadow: 2px 2px 2px #333; -webkit-background-size: 137px 50px; -o-background-size: 137px 50px; background-size: 137px 50px; 21:02
  • Two cautions: 1. Older browsers 2. Mobile Performance 21:02
  • Media Queries Conditional CSS rules/sheets based on screen properties 21:02
  • /*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; } }
  • • width/height • device-width/height • aspect-ratio • orientation • color/color-index • resolution + media type & logical operators
  • Layouts Flex & Grid 21:02
  • The end of complicated float layouts. (Eventually.)
  • display: none;
  • 21:02
  • Final Q&A
  • Thank You!
  • Your Feedback is Important Please fill out a session evaluation using the EventBoard app. Thank you!