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

polymer-project.org

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,

<paper-tabs>
<paper-tab>one</paper-tab>

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 customelements.io


http://itshackademic.com/
https://www.polymer-project.org/docs/start/getting-the-code.html


https://www.polymer-project.org/docs/start/creatingelements.html




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

core-toolbar

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

<core-header-panel

<core-drawer-panel

see https://www.polymer-project.org/docs/elements/layout-elements.html

paper-elements - way paper behaves,

<paper-input


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

https://www.polymer-project.org/docs/polymer/styling.html

https://www.polymer-project.org/apps/topeka/

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

chrome status page in polymer, just like polymer site

polymer-project tools designer

github.com/ForceDotComLabs

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


github.com/GoogleWebComponents



I/O Bytes Develop  , Templates Bytes Develop


Yo Polymer
npm install -g generator-polymer

github.com/PolymerLabs/seed-element
https://github.com/PolymerLabs/seed-element

Chrome Dev Editor  goo.gl/UjLvb2

https://codenvy.com/

@rob_dodson https://plus.google.com/+RobDodson/posts

brackets

scream venom  editors

sublime text

atom github text editor
webstorm $$


http://filaraujo.github.io/akyral.io/index.html

view-source:http://rachelslurs.github.io/nutrition-facts/nutrition-facts.html

https://www.polymer-project.org/docs/polymer/polymer.html#onMutation

http://itshackademic.com/static/codelabs/4-polymer-drive-client/#1

https://plus.google.com/+jeffposnick/posts/8dtNqfUTyL1

https://plus.google.com/+jeffposnick/posts/PiKLmMWbekd


John Davis TriDroid embedded sw.  Create an invoice

Tools -> script editor

Code.gs editor

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

var searchType = DocumentApp.Element.Type.TABLE;

var searchResult = null;

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

https://developers.google.com/apps-script/guides/docs

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
gapdebug
hybrid slow
Fastclick tool
avoid svg files
shadows and gradients can be risky, use imagesstore images in app