addyosmani

<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

/*
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';

addyosmani

• http://addyosmani.github.io/active-route/
• http://addyosmani.github.io/page-router/
• https://github.com/PolymerLabs/flatiron-director
• http://jsbin.com/muqicu/4/edit
• https://github.com/legion/app-router
• https://github.com/alari/routing-root
• https://github.com/kkvlk/polymer-router
• https://github.com/polymerjs-tw/polymer-simple-router

addyosmani

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE

 Copyright (C) 2014 ADDY OSMANI <addyosmani.com>

 Everyone is permitted to copy and distribute verbatim or modified
 copies of this license document, and changing it is allowed as long
 as the name is changed.

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

addyosmani

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

Deprecated. See https://www.polymer-project.org/articles/unit-testing-elements.html for the latest version.

Unit Testing Polymer Elements

Note: this guide is a work-in-progress and will be added to the Polymer docs when it's ready. We have updated <seed-element> to include unit tests and this guide has been moved to Google docs. Expect a version on the Polymer site before the end of September.

After spending days working on your <super-awesome> Polymer element, you’re finally ready to share it with the rest of the world. You add the code for using it to your demo, iterate on it over time and come back to it one day when..uh oh. The demo broke because something has gone horribly wrong. Suddenly, <super-awesome> isn’t starting to look so great. Now you’re stuck trying to backtrack through your commit log to figure out how you broke the code. You’re not going to have a fun time.

If you’ve been working on the front-end for a while, even if you haven’t really played with Polymer elements before, this s

addyosmani

if ( ![].fill)  {
  Array.prototype.fill = function( value ) {

    var O = Object( this );
    var len = parseInt( O.length, 10 );
    var start = arguments[1];
    var relativeStart = parseInt( start, 10 ) || 0;
    var k = relativeStart < 0
            ? Math.max( len + relativeStart, 0) 
            : Math.min( relativeStart, len );

addyosmani

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

Yeoman generators with Browserify

Browserify is a tool that allows us to write node-style modules that compile for use in the browser. Like node, we write our modules in separate files, exporting external methods and properties using the module.exports and exports variables

generator-browserify is a generator with a Browserify setup, offering choices between Gulp or Grunt and Foundation or Bootstrap.

generator-angular-with-browserify is a generator for bundling Angular.js with Browserify

addyosmani

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: