Addy Osmani addyosmani

View recog.js
1 2 3 4 5 6 7
r = new webkitSpeechRecognition;
r.continuous = true;
r.interimResults = true;
r.onresult = function(ev) {
View a

Large-scale JS application architecture with web components

I once wrote about implementing your own decoupled architecture for building large-scale apps, inspired by some of the work Nicolas Zakas did at Yahoo and I at AOL.

It included suggestions such as breaking down your app into small, highly-reusable components which were easier to maintain. These components would communicate (or react) to each each other by means of an event messaging bus or mediator. A permission model would ensure that components could only speak to parts of the system they were allowed to and facade patterns (abstraction APIs) let you switch out one utility library for another as needed.

A few years have passed since then and luckily standards-based web platform primitives started to appear to help with a similar set of problems. To say that this has been exciting to see evolve would be an under-statement.

Enter stage left, Web Components


MDV data binding with published properties

<polymer-element name="my-app">
  <td-model items="{{items}}"></td-model>
  <polymer-localstorage value="{{items}}"></polymer-localstorage>
View sample.html
1 2 3 4 5 6 7 8 9
<!-- Define a DOM-element with a data-aura-component attribute and Aura will bring it to life on start -->
<div data-aura-component="hello"></div>
<!-- Define as many of these component instances as you wish -->
<div data-aura-component="hello"></div>
<div data-aura-component="goodbye"></div>
<!-- You can also pass options to your component via data-attributes. -->
<div data-aura-component="hello" data-aura-foo="bar" data-aura-other-option="hello again"></div>
View Oo.js
1 2 3 4 5 6 7 8 9 10
var records = [];
var obj = {};
var obj2 = {};
function observer(r){
[].push.apply(records, r);
Object.observe(obj, observer); // Begin observing changes
View snippet for someone
1 2 3 4 5 6 7 8 9
# Start an HTTP server from a directory, optionally specifying the port
function server() {
local port="${1:-8000}"
open "http://localhost:${port}/"
# Set the default Content-Type to `text/plain` instead of `application/
# And serve everything as UTF-8 (although not technically correct, this
python -c $'import SimpleHTTPServer;\nmap = SimpleHTTPServer.SimpleHTTP
View gist:5772772

1hr super challenge

Zero to hero in an hour — how far can you get?

Some of the worlds best open source projects are initally created in < 1 hr. They're inspired, often caffeine, sleep-deprived or just plain crazy-beans fueled ideas that couldn't be done in a day.

The right time, right place (A Friday afternoon) is the perfect time to pump out what could be a life changing project.

So, lets do something interesting: The lazy web 1hr hackaton.

2:37 PM  → jreading, revath and stephenplusplus joined  ← frankblizzard left  •  gugahoi → gugahoi_away  
2:46 PM <addyosmani> you can separate your files to be located anywhere you want and just change around the path references for copy
2:46 PM <addyosmani> we just encourage folks to keep them in the root of the templates folder for consistency
2:46 PM <addyosmani> but that's totally up to you at the end of the day
2:50 PM <di9italant> Not sure my workflow will benefit anyone but if I deem it worthy of publishing I will revert to best practice, its more to satisfy my organisational OCD haha
2:50 PM <addyosmani> :)
2:52 PM → hemanth joined (~hemanth@
2:52 PM <hemanth> meow!

We want to create a mobile-first scaffolding solution for Yeoman that helps web app developers quickly kickstart projects with sane defaults.

Some of the problems we felt would be useful to address are:

  • Selection of a UI framework with a mobile-first grid system and sane default breakpoints
  • Boilerplate scaffolding of a basic RWD layout so you can just start coding
  • Conditional inclusion of FastClick to avoid touch event delays (where needed)
  • Appcache manifest generation
  • A solution for high DPI images as part of your build process
    • Option 1: Developers always provide highest resolution assets. Build step to resize the image to correct sizes for display densitites and apply correct src-set attribute to the image <img src="highest.png" src-set="1x highest.1x.png 1.6x highest.1.6x.png">
View cornify.js
(function(){var d=document,j=d.getElementById('__cornify_nodes'),k=null;var files=['',''];if(j){cornify_add();}else{k=d.createElement('div');'__cornify_nodes';d.getElementsByTagName('body')[0].appendChild(k);for(var l=0;l<files.length;l++){j=d.createElement('script');j.src=files[l];k.appendChild(j);}}})();
Something went wrong with that request. Please try again.