Essentials

@neilghosh

			
			saveButton.addEventListener('click', function () {
			  window.localStorage.setItem('value', area.value);
			  window.localStorage.setItem('timestamp', (new Date()).getTime());
			}, false);
			textarea.value = window.localStorage.getItem('value');
                

			var worker = new Worker('worker1.js');
			worker.onmessage = function (event) {
			 	document.getElementById('number').textContent = event.data;
			};
                

		var n = 1;
		search: while (true) {
		   n += 1;
		   for (var i = 2; i <= Math.sqrt(n); i += 1){
		  	if (n % i == 0)
		   	 continue search;
		   // found a prime!
		    postMessage(n);
		}
                

		  document.querySelector('#dropzone').addEventListener('drop', function(e) {
		   var reader = new FileReader();
		   reader.onload = function(evt) {
		      document.querySelector('img').src = evt.target.result;
		   };

		   reader.readAsDataURL(e.dataTransfer.files[0]);
		}, false);
                

	if (navigator.geolocation) {
			    navigator.geolocation.getCurrentPosition(function(position) {
				 var latLng = new google.maps.LatLng(
				  	position.coords.latitude, position.coords.longitude);
				 var marker = new google.maps.Marker({position: latLng, map: map});
				 map.setCenter(latLng);
		}, errorHandler);
	}
                

					

					<input type="text" x-webkit-speech />
                

				<header>Header</header>
				<nav>
				  <ul>
				  	  <li><a href="#">Home</a></li>				
				  	  <li><a href="#">About</a></li>
				  </ul>
				</nav>
				<article>					
				  	 <section>Section</section>
				</article>		
				<aside>					 
				  	 <p>Aside</p>
				</aside>	
				<footer>
				  	 <p>Copyright 2011 . All rights reserved.</p>
				</footer>				
                

			<input type="text" required />

			<input type="email" value="some@email.com" />

			<input type="date" min="2010-08-14" value="2010-08-14"/>

			<input type="range" min="0" max="50" value="10" />

			<input type="search" results="10" placeholder="Search..." />

			<input type="tel"  placeholder="(555) 555-5555"
					 pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />

			<input type="color" placeholder="e.g. #bbbbbb" />

			<input type="number" step="1" min="-5" max="10" value="0" />
			
                

				<style>
				   [required] {
				  	border-color: #88a;
					   -webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5);
				  }
				   :invalid {
					  border-color: #e88;
					   -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
				  }
				</style>
                

				 <canvas id="canvas" width="838" height="220"></canvas>

					<script>
					  var canvasContext = document.getElementById("canvas").getContext("2d");
					  canvasContext.fillRect(250, 25, 150, 100);
					  
					  canvasContext.beginPath();
					  canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
					  canvasContext.lineWidth = 15;
					  canvasContext.lineCap = 'round';
					  canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
					  canvasContext.stroke();
					</script>

					color: rgba(255, 0, 0, 0.75); 
					background: rgba(0, 0, 255, 0.75); 
                

		color: hsla(
		  128 
		  74% 
		  33% 
		  1.00 
                

				 background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000))
				 background: -mz-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000))
				 background: -moz-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000))
				 background: -o-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000))				  
                

• Before the Spec is final and Browser implementation is Verified
• jQuery, Dojo, YUI libraries for cross browser support
• Acid Test http://acid3.acidtests.org
• Older browser support using Chrome Frame

• Titanium
• PhoneGap

• slides.html5rocks.com
• stackoverflow.com
• jsfiddle.net
• www.chromeexperiments.com

---