What is HTML5?

(It's Different From Plain HTML)

What's New?

• Semantic Tags
• LocalStorage
• Offline Mode
• Geolocation
• History API

Semantic Tags

• It's not all DIVs (or TABLEs)
• New tags allow you to organize and give meaning to your content

LocalStorage

• A key-value store in the browser.
• Save keyed strings in your session by using the localStorage object.

Offline Mode

• Run your web applications offline.
• Check your connection status with navigator.onLine and cache resources locally.

Geolocation

• Get your user's location.
• Return the longitude and latitude of the user's browser with navigator.geolocation

From Pages to Apps

• Saving Data Locally
• Working Offline
• Interacting with Services
• Managing Hash State
• Native-like Features
• Check compatibility with Can I Use?

What is CSS3?

(Do more with your CSS)

What's New?

• Gradients
• Multiple Backgrounds
• Animations
• Transforms
• Selectors
• Rounded Corners & Shadows

Gradients

• Use -webkit-gradient to write your gradients instead of using images
• Easier to change than images
• Use CSS3 Gen to ensure you cover all browsers

Multiple Backgrounds

• Pass comma separated url() links to the background-image
• Useful for layering (e.g. a background of sky with grass then a cow in the foreground)

Animations

• Use -webkit-transition to define animations of CSS properties
• Hardware accelerated!

Transforms

• Use -webkit-scale, -webkit-translate, and -webkit-rotate to transform elements
• Example

Advanced Selectors

• Use attribute, child, and conditional pseudo selectors to find elements
• Use CSS Explain to test selector performance
• Example

JavaScript

Closures and Modules

• Since every JavaScript file on a page runs in the same scope, global variables defined in one file could be overwritten by those in other files.
• In order to solve this issue, wrap your JavaScript variables and function definitions in a function.
• This enforces scope for all variables/functions contained in the function.

Immediately-Invoked Function Expression (IIFE)

An unnamed (anonymous) function that protects all contents.

(function(){
  var foo = true;
  function doSomething(){...}
  function doSomethingElse(){...}
  function doAnotherThing(){...}
})();
var foo = false;

Ben Alman on IIFEs

Module

A named function that returns some variables/functions (public) and hides others (private).

myNameSpace = (function(){
  var foo = null;
  function doSomething(){...}
  function doSomethingElse(){...}
  function doAnotherThing(){...}
  return {
    doX:doSomething,
    doY:doSomethingElse
  }
})();
// This works.
myNameSpace.doX();
// This does not work.
myNameSpace.doSomething();

Addy Osmani on modules

Prototypes

• N.B. This has nothing to do with Prototype.js, a popular JavaScript library. This causes confusion with beginner JavaScript developers!
• Similar to extension methods in C#, prototype methods allow you to easily define methods for all instances of a particular object type.
• The beauty is that the method is applied to the prototype, so it is only stored in the memory once, but every instance of the object has access to it.

Testing & Performance

• Use JS Fiddle for quick testing and examples
• Use JS Perf for performance testing

KTS: Modern JavaScript Frameworks