Addy Osmani addyosmani

MDV data binding with published properties

<polymer-element name="my-app">
<template>
  <td-model items="{{items}}"></td-model>
  <polymer-localstorage value="{{items}}"></polymer-localstorage>
  <div>{{items}}</div>
</template>

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 ([email protected])
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 ``

stopBefore.js

2min screencast

Examples

stopBefore(document, 'getElementById')
stopBefore('document.getElementById') // the same as the previous
stopBefore(Element.prototype, 'removeChild')

	<!-- 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>

	var records = [];
	var obj = {};
	var obj2 = {};

	function observer(r){
	[].push.apply(records, r);
	console.log(r);
	}

	Object.observe(obj, observer); // Begin observing changes

	# 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
	}

	(function() {

	/**
	* @param {Object\|Function\|string} object
	* @param {string} methodName
	*/
	window.captureCalls = function captureCalls(object, methodName) {

	var path = '';
	if (typeof methodName == 'undefined') {