Skip to content

Instantly share code, notes, and snippets.

🎯
Focusing

Addy Osmani addyosmani

🎯
Focusing
Block or report user

Report or block addyosmani

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@addyosmani
addyosmani / workflow.md
Last active Aug 29, 2015
A workflow for creating re-usable Polymer elements
View workflow.md

A workflow for creating re-usable Polymer elements

This guide takes you through setting up the boilerplate for working on a re-usable Polymer element. It also covers the tooling to deploy a version of your package such that the master branch of your repository can be easily consumed by other apps or elements (e.g through Bower) and the gh-pages branch can be used for sharing the demo and documentation for your element.

Note: We assume you have git and Bower installed and use Scott Miles' Polymer boilerplate for getting started.

Getting setup

  • Create a new directory on your system for working on Polymer elements (e.g development).
  • Clone the untitled-element boilerplate inside this directory: git clone git://github.com/polymerlabs/untitled-element.git. Rename the element and it's files accordingly. For example, if your element was called test-element, your file list would look a little like this:
@addyosmani
addyosmani / resources.md
Last active Aug 29, 2015
Polymer resources for FITC
View resources.md

Web Components Can Do That?! extras

Thanks a ton for coming down to my talk, folks <33z. Your energy was amazing. This page has a few extra resources for you.

Slides

http://addyosmani.github.io/fitc-wccdt/

@addyosmani
addyosmani / edit.js
Last active Aug 29, 2015
Tweet-friendly offline text editor
View edit.js
var d=document,l=localStorage,k='c',q = d.body;q.contentEditable=true;q.innerHTML=l[k];q.onkeyup=function(){l[k]=q.innerHTML;}
@addyosmani
addyosmani / deep.js
Last active Aug 29, 2015
Adding /deep/ to your selectors
View deep.js
/*
This POC sample uses CSS transform which you can install from
https://www.npmjs.org/package/csstransform
Save this to deep.js and just run via node
*/
var css = __dirname + '/vendor/bootstrap.css';
var target = __dirname + '/dist/bootstrap-deep.css';
View designer.html
<link rel="import" href="../core-scaffold/core-scaffold.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-menu/core-submenu.html">
<polymer-element name="my-element">
@addyosmani
addyosmani / minor.md
Created Jul 24, 2014
Minor corrections
View minor.md

React vs. Object.observe()

Object.observe() and React are actually aimed at solving different problems. If we're going to mention React, I would say..

"Facebook are also exploring how to improve performance when building non-trivial apps via their framework, React. React provides a virtual DOM with rendering capabilities that avoid excessive layout thrashing (when JavaScript writes then reads from the DOM multiple times causing reflows). React batches such reads and writes to keep things fast. In a typical webapp we might heavily interact with the DOM, which is expensive to update. React prefers to avoid mutating the DOM directly, instead building a virtual DOM where it can handle updating the real DOM to match."

Milliseconds

"In a test, dirty checking took 40 milliseconds compared to Object.observe’s 1 to 2 minutes. In other words, Angular became 20 to 40 times faster while using Object.observe." should read "Object.observe's() 1 to 2 milliseconds"

@addyosmani
addyosmani / appcache-tooling.md
Last active Aug 29, 2015
AppCache manifest generation tooling
View appcache-tooling.md

Tools that read through a directory, stream or tree and create an Application Cache manifest for you.

AppCache is still a douche but luckily there are tools available to take the pain out of generating your initial manifest files:

  • Grunt: grunt-manifest is currently the de facto option, but the project lead is looking for a new maintainer. In light of that grunt-appcache is an alternative in case you're looking for more active support.
  • Gulp: gulp-manifest is inspired by grunt-manifest and has a similar set of options.
  • Broccoli: broccoli-manifest brings manifest file compilation based on trees.

Do review what is generated. As with any automation tooling, be careful that what is being generated is what you actually intend on being cached. I generally rel

@addyosmani
addyosmani / SassMeister-input-HTML.html
Created Dec 5, 2014
Generated by SassMeister.com.
View SassMeister-input-HTML.html
<nav role='navigation' class="main-nav" id="main-nav">
<ul id="main-nav-list">
<li>
<a href="#">
THE WORKSHOP
</a>
</li>
<li>
<a href="#">
2013 SCHEDULE
@addyosmani
addyosmani / SassMeister-input-HTML.html
Created Dec 5, 2014
Generated by SassMeister.com.
View SassMeister-input-HTML.html
<nav role='navigation' class="main-nav" id="main-nav">
<ul id="main-nav-list">
<li>
<a href="#">
<div>
THE WORKSHOP
</div>
</a>
</li>
<li>
You can’t perform that action at this time.