Ido Green
Designing & Building
Great Web Applications
- Crested Butte, CO
Ido Green
Designing & Building
- Crested Butte, CO
Assanka built the Financial Times web app
Be explicit about the browsers you support
Media Queries for Style Sheets
<link rel="stylesheet" media="all" href="/static/css/base.min.css" /> <link rel="stylesheet" media="only screen and (max-width: 800px)" href="/static/css/mobile.min.css" />
Testing CSS media queries in JavaScript with window.matchMedia()
if (window.matchMedia('only screen and (max-width: 480px)').matches) { // Asynchronously provide experience optimized for phone } else if (window.matchMedia('only screen and (min-width: 481px) and ' + '(max-width: 1024px)').matches) { // Asynchronously provide experience optimized for table or smaller screen } else { // Asynchronously provide full screen experience }
function updateHash(push) { if (push) { var slideNo = curSlide + 1; var hash = '#' + slideNo; window.history.pushState(slideNo, 'Slide ' + slideNo, hash); } };
window.addEventListener('popstate', handlePopState, false);
function handlePopState(event) { if (event.state != null) { curSlide = event.state - 1; updateSlides(true); } };
Use a primarily client side architect model for your app
Server side rendering doesn't work very well when offline!Application Cache to enable the offline scenario
<html manifest="cache.appcache">
Store and cache data on the client
window.requestFileSystem(PERSISTENT, 1048576, initFs, fsError);
var idbRequest = window.indexedDB.open('Database Name');
localStorage["key"] = "value";
var elems = document.querySelectorAll("textarea, input"); var len = elems.length; for (var i = 0; i < len; i++) { var elem = elems[i]; elem.addEventListener("input", function(item) { localStorage[formName + "-" + item.srcElement.id] = item.srcElement.value; var debug = document.getElementById("data-persistence-debug"); debug.innerHTML = "Last auto-saved at: " + new Date(); }, false); }
<input type="text" x-webkit-speech />
function startSearch(event) { if (event.target.results.length > 1) { var second = event.target.results[1].utterance; document.getElementById("second_best").value = second; } event.target.form.submit(); }
Use Application Cache to provide local caching
<html manifest="cache.appcache">
Store data locally
window.requestFileSystem(PERSISTENT, 1048576, initFs, fsError);
var idbRequest = window.indexedDB.open('Database Name');
localStorage["key"] = "value";
Use CSS3 transitions, transforms and animations
transition: all 1s ease-in-out;
Use WebWorkers for non-blocking JavaScript
var worker = new Worker('myworker.js');
More great tips at http://bit.ly/rizNVE
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
Aim for a great experience, everything else will follow.