Simple Modal -analytics platform

Raphael JS

HTML5 Canvas Tutorials

Scroll Nav

JS Graphs and Chart Libraries

JavaScript InfoVis Toolkit

Flat UI

Code Player

Guidelines for Responsive Webdesign

Best Programming Quotations

Rebuild YouTube’s mobile-like progress bar in jQuery

Learn Knockoutjs

lazy load



Navigation effect



Excel like editing in tables

BonsaiJS – A lightweight graphics library with an intuitive graphics API and an SVG renderer.

Animated Pie Chart:

RaphaelJS – Another vector graphics library (check out the examples)

HammerJS – Easy implementation of multitouch events using JS

SequenceJS – The Responsive Slider with Advanced CSS3 Transitions. Check out the slider with parallax effect

JQuery Vector Maps – Jquery plugin that generates vector maps using SVG (and VML for older versions of IE)

LetteringJS – Extreme control over font lettering

CrossSlide – Very cool image slider with the famous Ken Burns effect.

Vanilla-JS – Tongue in cheek 0kb javascript library alternative to using other libraries

JQuery Plumb – Hooks elements together through visual elements and moves dynamically.

JQuery Gantt Editor – Gantt Charts Using JQuery

JQuery Confirm Plugin – Clever way of doing inline confirmations

BigScreen – Allows you to display content in full screen from the browser

How to Load Javascript Asynchronously

AngularJS in Action

CSS & JQuery Clickable Maps

Gauges in Javascript

Introduction to Canvas

Websockets 101

Doodle Jump Game Remade using HTML5 – If you played the android/iphone version of this game, you’ll have fun with this:

Improving Canvas Animation Performance

Gameboy Color Emulator – Pure JS/HTML5 and works extremely well.

PlayCanvas – Forget what we all knew, 3D Games are definitely possible with HTML5 and have excellent performance.

Realistic Wristwatch – Animated wristwatch built using CSS/Javascript

10 Easy Steps to a Complete Understanding of SQL

Custom controls for HTML5 Video

Kick ass resume:

CSS Zen Garden

Laurence Gellert’s Blog

type name value

int highScore = 100;

-the value is optional at the time of declaration.
-type cannot be changed after definition.
–there’s something called dynamic typing but much more complex

int = integer variables: whole numbers with nothing after the decimal point

Strings are represented by values between double quotes with an @ sign at the front of the first double quote:
@”Hello, World!”

Create the message and put a placeholder in the middle of it.
@”There are %i in a year.”
-placeholders always begin with a percent sign
-after the % sign is whatever kind of data will go there.
In the above example, an i represents “integer”.

We follow the string with a comma and then the variable that we want to replace the placeholder with:
@”There are %i in a year.”, minutesInAYear

In the case of more than one variable:
@”There are %i in a %i day year.”, minutes, days

%i = integer
%f = floating-point variable
%c = single characters

NSLog(@”There are %i minutes in a year.”,minutesInAYear);
Traces out message in the console log.

if (condition){
//code goes here

Checking for equality in ObjC also uses “==”
A single equal sign after all is an assignment operation.

”!=” translates to “not equal”
“&&” = both
“||” = either or


int cateogry = 47;

switch (category){
case 40:
NSLog(@”It’s a category 40″);
case 41:
NSLog(@”It’s a category 41″);
case 42:
NSLog(@”It’s case 42″);
case 43:
case 44:
NSLog(@”It’s a category 42, 43, or 44″);
NSLog(@”I don’t know what it was!”);

arithmetic operators:
+ – * /

score = score + 10
score +=10;
+= -+ *= /=

The above are “single operators”: there is no space between the characters

result = 5 + 5 * 10;
multiplication and division take precedence….they go first and THEN addition and subtraction.

the above would look like this: 5 * 10 = 50 50 + 5 = 55. result = 55.

to impose order, put parenthesis:
result = (5 + 5) * 10;

if (a == b) {..
if (a != b) {..
if (a > b) {..

if (a The value of a is 5 which is not what you expect.

works on three things
condition ? true : false
//this whole operation will result in one single value. This will be evaluated and return something.
kind of like a mini if-else statement.


int playerOne;
int playerTwo;
int highScore;

if (playerOne>playerTwo){
highScore = playerOne;
highScore = playerTwo;

condition ? true : false
int highScore = (playerOne > playerTwo) ? playerOne : playerTwo;


int a = 1;
while (a < 10){
NSLog(@"The value of a is %i", a);


int a= 1;
NSLog(@"The value of a is %i", a);
} while (a<10);

FOR Loop

for ( int i = 1; i < 10; i++ ){
//do stuff
NSLog(@"The value of the index is %i", i);
//do stuff

inserting the word "break" will break the whole cycle.
inserting the word "continue" will break just that iteration.

for ( int i = 1; i<5000; i++){
if ( i % 5 == 0) {
NSLog(@"The value of the index is %i", i);

//the above will check for every time the modulus of i and 5 returns 0 – in other words, every time i is divisible by 5, it continues;


in Obj-c, you just give it a name. (no need to precede it with "function"

return type name parameters
int explodeSpaceship ( int x, int y ) {
NSLog(@"We're in the function");
//loops, if statements, anything!
return 0;

function prototype – a description that the function exists, what it returns and what it exempts but nothing in the body.


Primitive types:

12.5f //this is a float variable, f is a clue to the compiler that this is a float variable

BOOL iscompleted = YES
= NO

NSLog(@"The char is %i", isCompleted);
//YES ==1, NO == 0

enum seatPreference { window, aisle, middle };

enum seatPreference bobSeatPreference = aisle;
enum seatPreference fredSeatPreference = window;

-is a way of restricting ranges of values

enum seatPreference {window = 99, aisle = 199, middle = 399};

typedef – allows you to assign a new name to an existing data type
typedef int simonsInt;

typedef enum {window = 99, aisle = 199, middle = 399} seatPreference

#import //imports the code base
#define HIGHSCORE 100000 //sets the value and cannot be changed. Upper-case. can be accessed from elsewhere. declares things that need to be fixed.
ex: int a = HIGHSCORE + 500;
NSLog(@”%i”, HIGHSCORE);
#define PI 3.14159265

NSLog(@”the max value of an int is ….

NOTE: there is no built-in string type in the Obj-C language.
NOTE: NSString is not officially part of the Obj-c language, it is part of the Foundation framework – a collection of pre-written pieces of code that we are linking to. (@import )

type name value
NSString *message = @”Hello”;
* is a pointer indication
all objects are accessed using pointers

I am making a variable called message and it is a pointer to an NSString.

NSString * message = @”Hello”;
NSLog(@”The value of message is %@”, message );

%@ is the placeholder for objects. A string is an object.


Class: blueprint, definition, idea, description
-all classes describe two things: properties (attributes) and methods (behavior)
-one class can create multiple objects
Abstraction: idea of the focusing on core concepts of objects.
Encapsulation: keeping the functionality self-contained

NOTE: In objective-c, all objects are accessed using pointers.

Other OO languages call methods this way: myObject.someMethod();

ObjC does this [myObject someMethod];

result = [myObject someMethod];

to pass in argument:
[myObject someMethod:arg];

multiple args:
[myObject insertString:@”Hello” atIndex:11];

[myObject someMethod: [anotherObject anotherMethod]];


NSString *message = @”Hello”;
NSString *message2 = [message uppercaseString];

NSLog(@”The result is %@”, message2);

NSDate *myDate = [NSDate date];
NSLog(@”The date is %@”, myDate);

within class reference documentation there are + signs and – signs.
+ signs are class methods
– signs are instance methods

Automatic Reference Counting (ARC)

core skill for obj-c developer
garbage collection cannot be used on the iPhone, iPad or the MacOS X versions prior to Leopard

use reference counting

an object is created and a area of memory is cleaned for that object. That object gets a retainCount. (A number)

MyClass &myObj = [MyClass];
[myObj someMethod0; //etc.
[myObj release]; //retain count is set to 0 and Obj C destroys it.

retainMessage: another object sets the retain count to 2

If you own the object , you must release it.
You own an object if you created it, copied it or retained it:

If you don’t own the object, you must not release it.

most common way:
Class *myObj = [[Class alloc] init];
Person *fred = [[Person alloc] init];
Dog *fido = [[Dog alloc] init];
Customer *acmeCorp =[[Customer alloc] init];
NSAutoRleasePool * pool = [[NSAutoReleasePool alloc] init];

if you have written any code that uses alloc or init, you own that object.


anyClass *myObj = [[AnyClass alloc] init];
Person *fred = [Person new];
[myObject retain];
NSString *newMessage = [oldmessage copy];

When to use autorelease:
Auto-release means release it later.
[fred autorelease];
gets added to an autorelease pool
[pool drain]

NOTE: when you write a method that creates and returns an object, that is called a Factory method.

//create a new object
Employee *fred = [[Employee alloc] init];
[fred autorelease];
return fred;

NARC (new alloc retain copy) if these words are in the object creation, you own it. You must call release.

if it is NOT, you do NOT own it and you must NOT call release.

With the creation of Automatic Reference Counting (ARC), you no longer have to handle any releases.
What ARC manages:
it is not a garbage collection
runs at compile time

Rules of Automatic Reference Counting
1. don’t call memory management methods
no retain
no release
no autorelease
no retainCount
no dealloc (deallocation)

2. don’t use NSAAutoReleasePool
NSAutoReleasePool is replaced by @autoreleasepool blocks

CSS – Cascading Style Sheets

CSS rule has two main parts: a selector and one or more declarations

h1 = selector
{color:blue; font-size: 12px;} = declaration

color = property
blue = value

The selector is normally the HTML element I want to style.

CSS allows you to specify our own selectors called “id” and “class”

ID selector is used to specify a style for single, unique element.
-ID selector uses the id attribute of the HTML element and is defined with a “#”.
-do not start an ID name with a number. Will not work in Firefox

Class selector is used to specify a style for a group of elements. The class selector is most often used on several elements
-the class selector uses the HTML class attribute, and is defined with a “.”
-do not start a class name with a number. This is only supported in IE.

Cascading order:
1. browser default
2. external style sheet
3. internal style sheet (in head section)
4. inline style (inside an HTML element)


Background –

“background-color” -specifies the background color of an element
-color is most often specified by
-a HEX value – “#ff0000”
-an RGB value like “rgb(255,0,0, 0)” (the fourth digit is the alpha)
-color name – red

“background-image” -specifies an image to use as the background of an element

“background-repeat” -by default, the image is repeated so it covers the entire element.
-by default, the background image property repeats an image both horizontally and vertically.
-can be set like so: background-repeat: repeat-x; or background-repeat: repeat-y;

“background-position” – position of the image is specified by this property
-background-position: right top;

TOPICS CRITICAL FOR ONLINE VIDEO -last updated April 19, 2012


-Combined data from desktop and mobile yields that roughly 74% of the market now supports HTML5.

-Since IE6/7/8 do not support HTML5, alternatives like Flash remain very useful for video playback

-Both Chrome & Firefox surpassed IE 6/7/8’s combined market share

-iOS and Android still lead by a wide margin -both support HTML5 video.

-Android at large still supports Flash
-Android 4.0 (Ice Cream Sandwich) is not always released with built-in Flash support
-not on Samsung’s Galaxy S2.

In order to play audio (AAC/MP3) and video (MP4/FLV) in Adobe Flash, the following two statements must be true:
– browser must have the Adobe Flash plugin installed
– version of Adobe Flash must be at least 9.0.115

For playing HTML5 video, the following statements must be true:
– browser must support the HTML5 video tag
– browser must support the files that are embedded in the tag.



-one of the biggest challenges with HTML5 video is the fragmented support for audio/video formats

-on desktop, split is almost exactly 50/50 –
– Chrome/Firefox/Opera supporting WebM
– Chrome/IE/Safari supporting MP4

Both iOS and Android only support MP4 video.


– 90% of tag attributes are supported
– HTML5 video tag supports several attributes

Most important: poster, preload, autoplay and controls.

– image that is displayed before playback of the video starts.
– should always be displayed before playback, regardless of the preload attribute.
– the video tag should contain the poster to its display area -black borders will show if the poster has a different aspect ratio.
– for audio files, the poster image should stay visible all times, since there is no video frames to display.

– mobile browsers ignore “preload” as videos are never preloaded

– mobile browsers ignore “autopsy” as videos are never played upon page load

IE ignores the preload = none attribute.
-the implication here is that IE9 loads a part of your MP4 upon each pageview, instead of waiting until a user actually starts the video.
-this may add to a substantial increase in streaming costs

Mobile browsers ignore preload (video is never preloaded) and autoplay (video is never played upon page load)


4.) JavaScript API

80% of API features work reliably.

In addition to its HTML attributes, the video tag provides an extensive JS API for controlling its content.

Common use cases for this are the rendering of custom controls (JW Player) or page interaction with the video timeline (Popcorn.js)

Popcorn.js allows video, audio and other media to control elements of a webpage.
Popcorn.js utilizes the native HTMLMediaElement properties, methods and events.

Scripting has been found to be reliable and consistent across the various desktop browsers.

On mobile, both iOS & Android ignore getting or setting the volume as those two use the hardware to control the volume.
Apple blocks the scripted play().


50% fullscreen support is halfway there

Although the HTML5 fullscreen specification is still in its infancy, most browsers have now implemented either a fullscreen control or a scripting API.

both the iPad and Android tablets support a fullscreen control, but no API yet. Both always play video in fullscreen, so control is not needed.

HTML – mark up language, content
CSS – style sheet language, presentation
JS – programming language, behavior
JS -is intentionally limited, only works inside another application -the web browser.

web browser contains a web page and the page contains JS
can’t access local files.
can’t access database
cant access hardware

was designed to manipulate web pages.
is a client-side language used to add interactivity to web pages.
is sent to the client
JS can be disabled.
Is not Java, is not a light version of Java. has nothing to do with Java.
standardized is actually called ECMAScript
the standard now used is ECMAScript 3 (adopted in 1999)

JS is platform agnostic
Firebug allows you to directly run JS in the browser.
JS is case-sensitive

is an interpreted language. Does not need be to compiled.


each JS statement ends with a semi-colon
one statement per line
JS is whitespace insensitive.
JS runs/reads code line by line.
Position of JS in the page does matter b/c it will be executed as soon as the browser sees it.

alert(“Hello”); ==

myscript.js contains this code: alert(“Hello”);

HTML5 does not require that the attribute type be set. Browser will automatically assume is JS

Good rule of thumb to have your JS in your body tag at the very bottom.
CSS should be loaded in the head section

variable is a container

var year;
var custEmail;
var foo;

can be made with letters, number, _ and $.
(Cannot start with a number.)

Technically, the word var is not required. but highly recommended.

when creating multiple vars, you can put it one line:

var year, month, day;
var year = 2011, month = 10, day = 31;

JS is a weakly typed language.
in JS, you can use double quotes or single quotes.

= assignment
== equality
=== strict equality

if ( a == b) {…
if ( a != b){…
if ( a === b){…
if ( a!== b){…
if (a>b){…

if (aplayerTwo) ? playerOne : playerTwo;



log can be changed to one of four other words.

debug – not much different from log
info -the letter i
warn – yellow
error – red


for loops:

while – runs while condition is true;
do – runs through code at least once;
break; – breaks out of the for loop if condition is met;
continue; – stops that particular iteration and returns to condition again.


best practice to define functions before calling.


array is a single variable that holds multiple values

var multVar = [ ];

accessible by index
multVar[2] = 50;

var multVal = new Array(); //arrays are objects.

var multVal = Array();

all JavaScript arrays are dynamic.

arrays have properties and methods.

multVal.length(); //returns number of objects in that array

method is a function that belongs to an object.
someObject.someMethod(); //to call a method

var multVal = [20,30,40,50];
var reversedVal = multVal.reverse();

var arrayOfLinks = document.getElementsByTagName(“a”);
//returns every link in that DOM


All JS numbers re 64-bit floating point numbers.

addition vs concatenation

var foo = 5;
var bar = 5;

console.log(foo + bar); //10

var foo = ‘5’;
var bar = ‘5’;

console.log(foo + bar); //55

var foo = 5;
var bar = ‘5’;

console.log(foo + bar); //10
(if any part of the vars in the equation is a string, it will treat the whole operation as a string.

var foo = 5;
var bar = “b”;

console.log(foo * bar); //NaN (Not a number)

If something is not a number but needs to be:
var foo = “55”; //could be “abc”
var myNumber = Number (foo); //makes it number

if we need to know something is not a number:

if (isNaN(myNumber)) {
console.log(“It’s not a number!”);

OR //a double-negative

if (!isNaN(myNumber)) {
console.log(“It’s IS a number!”);

Math Object

var x = 200.6;
var y = Math.round(x); // 201

var a = 200, b = 10000, c = 4;
var biggest = Math.max(a,b,c);
console.log( biggest); //10000

var smallest = Math.min(a,b,c);
console.log(smallest); //4

double quotes and single quotes work. Don’t mix the quotes.

if quotes are needed inside of a string, use escape to tell JS that these are not intended to close the string.

var phrase = “He said \”that’s fine,\” and left.”;

String methods

var phrase = “I know JavaScript”;


var words = phrase.split(” “);
var position = phrase.indexOf(“know”);

var segment = phrase.slice(6,5);

var str1 = “Hello”;
var str2 = “hello”;

var today = new Date(); //with no parameters passed, returns a date and time

var y2k = new Date(2000, 0, 1);
//year, month, day

var y2k = new Date(2000,0,1,0,0,0);
//year, month, day, hours, minutes, seconds

var today = new Date();

today.getMonth(); // returns 0 -11
today.getFullYear(); //YYYY (Not zero-based)
today.getYear(); //deprecated
today.getDate(); //1 – 31 day of month
today.getDay(); //0-6 day of week. 0== sunday
today.getHours(); //0-23
today.getTime(); //milliseconds since 1/1/1970


comparing dates – note that dates are objects.

var date1 = new Date(2000,0,1);
var date2 = new Date(2000,0,1);

if (date1 == date2) {… //false!

if(date1.getTime() == date2.getTime()) { …//true!

Objects in JS

objects have properties that are variables outside of that object.

Can be set this way:
var player = new Object(); = “Fred”;
player.score = 1000;
player.rank = 1;


var player1 = {name:”Fred”, score:10000, rank:1};
var player2 = {name:”Sam”, score:1000000, rank:5};

function playerDetails(){
//display info
console.log( + ” has a rank of: ” +
this.rank + ” and a score of ” +this.score);

player1.logDetails = playerDetails;
player2.logDetails = playerDetails;

player1.logDetails();//Fred has a rank of: 1 and a score of 10000
player2.logDetails(); //Sam has a rank of: 5 and a score of 1000000

DOM – Document Object Model

Document means the page.
Object -everything that makes up the document. h1, p, a, body
Model – describes the relationship between all of the objects. – a set of terms or standards use.

web page, pieces, agreed upon set of terms.


DOM thinks of the web page in terms of nodes

One node per tag
ex: elements, attributes, text, comments and so on.

Node Types:
Node.TEXT_NODE == 3

Accessing DOM elements:
when going after an element in a DOM, the first question to ask is this element unique? does it have an unique id?

class can be added to any number of elements
id can (and should) only be used once


var myElement = document.getElementById(“someId”);
//creates a handle right into that element.

var myListItems = document.getElementsByTagName(“li”);

once an object is created, the methods can be reused to search within those objects.

var myListItems = document.getElementsByTagName(“li”);
var myLinks = myListItems.getElementsByTagName(“a”);

myElement.getAttribute(“align”); //name of attribute in quotes

myElement.setAttribute(“align”, “left”); // name in quotes, value in quotes

Creating DOM elements
1. create the element.
2. append child

var myNewElmt = document.createElement(“li”);

var myTxt = document.createTextNode(“lorem ipsum”); OR
newTxt.innerHTML = “lorem ipsum”;

(all lowercase)

eventHandler or eventListener

Method 1: inline HTML

Method 2: name of element, dot notation and name of event:
myelement.onclick = function(){ // code…};
//this is an anonymous function -does not have a name

Method 3:
huge benefit is you can add several handlers for one event.

document.addEventListener(‘click’, myFunction, false);
document.addEventListener(‘click’, anotherFunction, false);
document.addEventListener(‘click’, aThirdFunction, false);

IE prior to IE9 does not have addEventListener.

cross-broswer add event helper method

function addCrossBrowserEventListener(elementName, eventName,functionName){
//does the addEventListener function exist?
//yes-use it
elementName.addEventListener(eventName, functionName, false);
return true;
//otherwise use attachEvent
elementName.attachEvent(“on”+eventName, functionName);
return true;

onClick and onLoad Events

window.onload = function (){….//

window object represents a full browser window
it’s the top-level object in JS
contains the document object
only write this window.onload function ONCE per page
if you have several multiple javascript files linking, and they all have the window.onload function, the last one is going to win.

onBlur and onFocus
onFocus occurs when you click on a form field or tab into it.
onBlur occurs when you leave that form field or tab out of it

var emailField = document.getElementById(“email”);

emailField.onfocus = function() {
if ( emailField.value == “your email”) {
emailField.value = “”;

emailField.onblur = function() {
if ( emailField.value == “”) {
emailField.value = “your email”;


four methods:
setTimeout to perform a single action after a delay
setInterval to repeat it after that delay and to keep repeating


setTimeout(function, delay);
setTimeout(callMessage, 5000);

Change an image
var myImage = document.getElementById(“mainImage”);

var imageArray = [“_images/overlook.jpg”,”_images/winery_sign.jpg”,”_images/lunch.jpg”,
var imageIndex = 0;

function changeImage() {
if (imageIndex >= imageArray.length) {
imageIndex = 0;

// setInterval is also in milliseconds

var intervalHandle = setInterval(changeImage,5000);
myImage.onclick = function (){

Common problems to be aware of

syntax errors – closing bracket, closing parenthesis, etc.

calling a function that doesn’t exist

typos in the DOM methods – case sensitivity.
-getElementById (correct) vs. getElementByID (incorrect)

undefined variables by window not being completely loaded yet.

assignment instead of equality
a = b (assignment) vs. a == b (equality)

NaN (Not a number)

Using Firebug
HTML tab
DOM tab

will give you the more up-to-date version of content that is displayed, for instance, if JavaScript changes content, Firebug will show you the updated content whereas the View Source tool will show you the original

building smarter forms




onfocus –
onblur – always called when you leave the field.

//—————–checkboxes/radio buttons:————//

myCheckBox. checked (true or false)


//———————–select list:——————-//
mySelect.type (select-one or select-multiple)


mySelect.options[x].selected (true or false)


//———————–submit btn——————-//
main event:

by subscribing to the onsubmit event, we can interrupt the call to the server and perform a check on the information. If it is not formatted correctly, return false;

function prepareEventHandlers() {
document.getElementById(“frmContact”).onsubmit = function() {
// prevent a form from submitting if no email.
if (document.getElementById(“email”).value == “”) {
document.getElementById(“errorMessage”).innerHTML = “Please provide at least an email address!”;
// to STOP the form from submitting
return false;
} else {
// reset and allow the form to submit
document.getElementById(“errorMessage”).innerHTML = “”;
return true;

//——————-hiding and showing content—————//

// show and hide sections of a form
function preparePage() {
document.getElementById(“brochures”).onclick = function() {
if (document.getElementById(“brochures”).checked) {
// use CSS style to show it
document.getElementById(“tourSelection”).style.display = “block”;
} else {
// hide the div
document.getElementById(“tourSelection”).style.display = “none”;
// now hide it on the initial page load.
document.getElementById(“tourSelection”).style.display = “none”;

NOTE: by initially setting it to show the content, you’re ensuring full functionality of page regardless of whether or not JavaScript is enabled.

//——————-hiding and showing content—————//
setting inline styles…. = “red”;

style properties that use hyphens in CSS become cameCase in JavaScript – remove the dash and any subsequent word becomes capitalized.

setting properties in JavaScript…you set as string. = “230px”; = “#fff”‘;

setting the class:
myElement.className = “someCSSClass”;
to clear it:
myElement.className = “”;

document.getElementById(“mainContent”).className = “exampleClass”;

Notes for iPad3:
Data that’s locally stored using the HTML5 data storage feature is no longer regarded by the OS as persistent.
-this is a problem for developers using that feature with either localStorage or WebSQL as the storage mechanism.
-because the OS no longer sees this data as persistent but temporary, the iOS can destroy it at anytime, without warning, including during low memory scenarios.
-this affects hybrid apps, which use an embedded WebView.
–WebViews power HTML5 applications that live inside of native packages (PhoneGap or Sencha Touch native packaging)
–embedded web browser that is hosted within a native application. WebViews are a feature of all modern mobile operating systems.

General iPad Notes:
WebGL – JavaScript API for rendering 3D graphics without a plug-in

Interactivity with iPad (mouse vs touch events)
As a result, elements that rely only on mousemove, mouseover, mouseout or the CSS pseudo-class :hover may not always behave as expected on a touch-screen device such as iPad or iPhone. You can handle touches directly or even detect advanced gestures in Safari on iPhone OS, using the DOM Touch events touchstart, touchmove, touchend, and touchcancel.

Unlike mouse events which are emulated, DOM Touch events are specifically designed to work with touch interfaces, so their behavior is reliable and expected.

Use textareas instead of contenteditable elements

contenteditable is not supported in Safari on iPhone OS. If you’re using contenteditable to enable text input within a styled element (for instance, p or div), you can replace this styled element with a styled . In Safari on iPad, iPhone, Mac OS X, and Windows, you can customize the appearance of elements using CSS. If necessary, you can even disable any platform-specific, built-in styling on a by specifying -webkit-appearance: none.

HTML5 Features:

Offline web apps capabilities –
application cache
web SQL & indexed database
online/offline events

Application cache – involves saving the application’s core logic and user-interface.
Offline storage is about capturing specific data generated by the user, or resources the user has expressed interest in.

Offline storage techniques (older):
– little bits of data
-usually identifying information
-data capacity is extremely limited – low as 20 cookies limited to 20kb each.
-also slows down network activity

plugin based storage
-java applets
-local shared object
-Google Gears
-major downside is have to assume that the right version of plugin is present

Offline storage for HTML5 (current):
web storage:
simple structure of key-value pairs like any JavaScript object
browsers presently only support string values you values need to be serialized (converted to strings)
-JSON API – localStorage[“currentGame”] = JSON.stringify(gameState) and gameState = JSON.parse(localStorage[“currentGame”]).
is ‘racy’ – take precautions to ensure integrity of data and accuracy of any queries

web SQL database:
an offline SQL database.
based on SQLite – general-purpose open-source SQL engine.
+fully relational structure -allowing rapid query and manipulate data via joins
+support for transaction -protected from race relations
-complexity – is a full-blown database in front-end web client necessary?
-compatibility -Microsoft and Mozilla don’t have this in their plans, can only be used to target particular browsers.

Indexed DB
relatively simple and capable of being very fast.
has transactions available to protect against race conditions
standard mapping, like LocalStorage and

The dynamic stylesheet language.

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.