Saturday, November 1, 2014

DevFest at American Underground 2014

The Dev Fest is organized by  Luke Dary  +Luke Dary .  Next GDG meeting possibly will  be held in the Google office in Chapel Hill. Udacity will be partnering to do Android development course thru GDG.

Polymer  #itshackademic

Intro Video

Rob Dodson - Core Icons

what problems solving?   css is global , phone/tablets,smart tvs  etc  Front end development so it works on all devices. i.e Tabs should be easy, not easy to plop in anywhere. old frameworks can be a challenge,


tip: do a  view source of gmail
table soup, div soup
web components
-  required to have dash in name to be custom element (otherwise show as unknown)
- paper tab (material design )
- resusable
-  templates -native client side  , parsed, does not render, content inert til cloned/used,
- shadow dom - browser not rendering all, chrome has ability to show hidden structure you dont usually see
- html imports <link rel="import" href="bootstrap.html">      vulcanize - tool to concat your dependencies and do it once
- custom elements : use existing, extend others, encapsulated css

get node.js
npm install -g bower

bower install Polymer /core-toolbar
bower install Polymer /core-icon-button

chrome yes, mozilla jumping on board, ie10+

platform.js - polyfill web components , add for those who don't support it, soon to be called webcomponents.js

add syntactic sugar will polymer.js

sugaring: custom elements

document.registerElement('paper-tabs' {Prototype:Object.create(HtmlElement.prototype)});

document.registerElement('super-button' {Prototype:Object.create(HtmlElement.prototype), extends : 'button'});
<polymer-element name="super-button"  extends="Button"> </polymer-element>

vanilla.js style

sugaring : shadow dom encapsulation of css and structure

var shadow = el.createShadowRoot();

what if creating  html for mobile web?  need things make sense, i.e. material design

polymer core-elements


<link rel="import" href ="core-toolbar.html>




paper-elements - way paper behaves,


cool animation rather than vanilla checkbox

<paper-ripple -ink effect for touch actions

<paper-shadow - dynamic shadow for conveying z depth, like its coming off screen

::shadow - dig into elements structure  , style nodes internal to shadow dom

/deep - will pierce shadow boundaries

polymer - no routing <app-router , <page-er  <ajax-form   : validation

chrome status page in polymer, just like polymer site

polymer-project tools designer

i.e use case -  add declarative nature to add marker to  google maps

I/O Bytes Develop  , Templates Bytes Develop

Yo Polymer
npm install -g generator-polymer

Chrome Dev Editor



scream venom  editors

sublime text

atom github text editor
webstorm $$


John Davis TriDroid embedded sw.  Create an invoice

Tools -> script editor editor

var body = DocumentApp.getActiveDocument().getBody();

var searchType = DocumentApp.Element.Type.TABLE;

var searchResult = null;

while (searchResult = body.findElement(searchType, searchResult)){}

NetSkink Computing

Hybrid Gone Wrong - Lenovo

Mobile app team

None seasoned js/web
views - template
router - critical
separate views hierarchical
good framework based on skills / tech reasons, mobile support, community
ionic  good scrolling
backbone.js or bootstrap with more experience
builds fast - partial builds

npm install -g cordova

there is cloud based adobe phonegap build
powerful emulation dev tools in chrome
genymotion, Manymo
phonegap developer app
weinre - testing tool
hybrid slow
Fastclick tool
avoid svg files
shadows and gradients can be risky, use imagesstore images in app

No comments:

Post a Comment