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

Next Web

I recently watched Eric Bidelman's talk from Google I/O 2013 on Web Components.  This talk was on the Future of the web platform. This talk reminds me of Angular methodology where you are adding custom tags to HTML.

As well  Peter Gasston talks about web components and CSS. Example of video player which runs on javascript, html, css.  If you show hidden dom, you can see markup.

Show shadow dom in web tools under wrench:

shadow root, host, dom

shadow root:

var newroot  = $(foo).createShadowRoot(), newElem =  '<h2<test</h2>' ;

newroot.innerHTML = newElem ;

<div id ="foo"><h1> First</h1></div>

div tag  is the shadow host, and h1 text replaces h2 with test.

widget example: <div id ="foo"><h1> First</h1></div>
want it but in different color
encapsulation - has all it needs contains within itslef, nothing gets in, nothing gets out
encapsulation in html is iframe today - issues extra network, multiplee rendering, cross orgin conflicts
better encapsulation is web components
reusable web components - shadowdom, templates,  custom tags

templates - put stuff in it

<template id ="foo"><h2> First</h2></template>
<div id ="bar"><h1>text 2</h1></div>

mark up inside is inert - does nothing, does not get loaded

inside template known as content

var test = $(foo).content.cloneNode(true), bar = document.getElementById('bar');
bar.appendChild(test);

puts template inside bar div tag  - template active

share templates across multiple files using import

4 main areas (Shadow DOM gives encapsulation, templates or chunk of markup that later you can stamp out your elements, custom tags, html imports that can be reused via CDN URLs):

http://www.webcomponentsshift.com/#11

HTML templates:
Template out your markup 

Put dom in it

Parsed not rendered - won't run until you stamp it out, same for media

Hidden from document, cant traverse into,  its in its own context

Content property - document fragment , clone it, stamp it out, see whats in it

Example:

Clone it is what stamps it out (here it runs script when that happens):

http://www.webcomponentsshift.com/#15

See example in plunkr.

New spec for html templates  : chrome supports it.

Shadow dom (Secret markup in elements):

markup encapsulation, DOM encapsulation, css style boundary protection, no bleeding in, style boundaries, exposes to developers mechanics browser vendors use to create their html elements

iframe has it but bloated, hard to use  (extra network requests needed, multiple rendering contexts)

http://www.webcomponentsshift.com/#20

Dom nodes can host hidden dom

hidden dom  can't be accessed by outside  javscript

Hidden document fragment

Using markup to control it

Browser vendors been holding out

http://www.webcomponentsshift.com/#23

See example in plunkr.

Filled in markup

Shadow dom gets rendered

Style things

This time add styling make it red

http://www.webcomponentsshift.com/#24

@host

Host element provide default styles

http://www.webcomponentsshift.com/#25
http://www.webcomponentsshift.com/#26

http://html5-demos.appspot.com/shadowdom-visualizer

Custom elements (require hyphen)

Ability to define new elements

Plunkr example 

http://www.webcomponentsshift.com/#32

http://www.webcomponentsshift.com/#33

http://www.webcomponentsshift.com/#34

Using js html.prototype 

http://www.webcomponentsshift.com/#35

extending elements

http://www.webcomponentsshift.com/#36

http://www.webcomponentsshift.com/#37

Html imports

http://www.webcomponentsshift.com/#45

Links
http://www.webcomponentsshift.com/#52

http://ericbidelman.tumblr.com/

Polymer

Polymer approach:

Elements are pretty great. They’re the building blocks of the web. Unfortunately, as web apps got more complex, we collectively outgrew the basic set of elements that ships in browsers. Our solution was to replace markup with gobs of script. In that shift, we’ve lost the elegance of the element. Polymer returns to our roots. We think the answer is not gobs of script, but rather to build more powerful elements. A set of powerful new technologies called Web Components makes this possible.

Custom Elements:

Embracing the philosophy means a web app becomes a collection of well-defined, reusable components.

• custom elements polyfill
• creating elements

Using Elements

• Core Elements
• Paper Elements - implements the Material Design [demo]

Creating Elements

https://www.youtube.com/watch?v=5b5O5cclPbk (web components overview)

- https://github.com/KamiQuasi/wc-overview
- natively without polyfills



Intro Polymer
- easier to create custom elements
- quiz application demo app w paper elements
- inimation 60 frames / sec

https://www.youtube.com/watch?v=3CJcHJGZfws (web components and polymer overview)

https://github.com/kylebuch8/PolymerTutorial

http://www.polymer-project.org/resources/video.html




http://www.polymer-project.org/docs/start/tutorial/intro.html
http://www.html5rocks.com/en/tutorials/webcomponents/template/
https://www.youtube.com/watch?v=eJZx9c6YL8k
http://www.polymer-project.org/docs/polymer/polymer.html#altregistration
http://www.polymer-project.org/docs/polymer/databinding.html
http://www.polymer-project.org/docs/polymer/databinding-advanced.html#autobinding

https://github.com/Polymer/observe-js

Web Components 101

I recently watched Eric Bidelman's talk from Google I/O 2013 on Web Components.  This talk was on the Future of the web platform. This talk reminds me of Angular methodology where you are adding custom tags to HTML.

4 main areas (Shadow DOM gives encapsulation, templates or chunk of markup that later you can stamp out your elements, custom tags, html imports that can be reused via CDN URLs):

HTML templates:
Template out your markup 

Put dom in it

Parsed not rendered - won't run until you stamp it out, same for media

Hidden from document, cant traverse into,  its in its own context

Content property - document fragment , clone it, stamp it out, see whats in it

Example:

Clone it is what stamps it out (here it runs script when that happens):

See example in plunkr.

New spec for html templates  : chrome supports it.

Shadow dom (Secret markup in elements):

markup encapsulation, DOM encapsulation, css style boundary protection, no bleeding in, style boundaries, exposes to developers mechanics browser vendors use to create their html elements

iframe has it but bloated, hard to use  (extra network requests needed, multiple rendering contexts)

Dom nodes can host hidden dom

hidden dom  can't be accessed by outside  javscript

Show shadow dom in web tools under wrench:

Hidden document fragment

Using markup to control it

Browser vendors been holding out

See example in plunkr.

Filled in markup

Shadow dom gets rendered

Style things

This time add styling make it red

@host

Host element provide default styles

http://html5-demos.appspot.com/shadowdom-visualizer

Custom elements (require hyphen)

Ability to define new elements

Plunkr example 

Using js html.prototype 

Html imports

http://ericbidelman.tumblr.com/

related [web components ]

CSS Box Model

Examples...
margin-top:5px;
margin-left:16px;
padding-left:12px ;
border-bottom: 1px solid #ccc;

The Javascript vs Native facts

http://sealedabstract.com/rants/why-mobile-web-apps-are-slow/

"But the real elephant in the room here is that in all these articles on this subject, rarely does anyone actually quantify how slow JS is or provide any sort of actually useful standard of comparison. (You know… slow relative to what?) To correct this, I will develop, in this article, not just one useful equivalency for JavaScript performance–but three of them. So I’m not only going to argue the “traditional hymns” of “wa wa JS is slow for arbitrary case”, but I’m going to quantify exactly how slow it is, and compare it to a wide variety"...

Javascript Performance Tips and more

Javascript performance tips

Designer tips for performance

Doug Crockford  the "Good Parts" Talks [1] [2]

javascriptjabber with scott hanselman , JSHint

Stack, Queue, Linked List using Javascript

Semextex GUI components

The jiggle effect using Javscsript

Javascript library trends

Javascript Fat arrow

JS implementation of excel like functionality

To Hell with JQuery

http://venturebeat.com/2013/11/08/the-future-of-web-apps-is-ready-isomorphic-javascript/

http://readwrite.com/2013/11/18/assessing-the-aftermath-of-the-html5-hype-cycle

http://blog.kevinchisholm.com/arrays-javascript/javascript-array-management-with-push-pop-shift-and-unshift/

http://coding.smashingmagazine.com/2013/11/21/introduction-to-full-stack-javascript/

http://www.dontfeartheinternet.com/

http://toddmotto.com/ultimate-guide-to-learning-angular-js-in-one-day/

http://coding.smashingmagazine.com/2013/10/29/get-up-running-grunt/

http://www.muleradio.net/thebigwebshow/102/

Html5Conf , NodeSchool, etc in links

Being there without being there - HTML5 Conference

http://nodeschool.io/  - Interactive sessions to learn node

A face with that name from the web summit

Things you should be reading - XKCD , NCSU Research Group, etc

33 developers follow as javascript junkie

Webmaker teaching digital literacy

NCSU Senior projects

Software papers - learning styles

You have experienced those trolls before I am sure - deconstruct 2013

http://research.microsoft.com/en-us/groups/rise/default.aspx

http://www.newyorker.com/online/blogs/elements/2013/10/after-walt-mossberg-and-david-pogue-waiting-for-the-next-great-technology-critic.html?currentPage=all

Html5 is big for mobile with LightApp

We know how Facebook dumped the pure HTML5 solution for mobile.  However, in China they have a LightApp browser and UC Web that is going all in on HTML5 for mobile apps.

Super App + Light App: A New Ecosystem in the Mobile World" - Keynote with Yu Yongfu, Chairman & CEO, UCWeb

A Html5 Class

I stumbled across this web site and it looked like a great class.

http://aaltowebapps.com/

The class has all sorts of examples you can run such as Storage and Offline API, Templating with Handlebars, CSS Media Queries, and more. The example code is on GitHub too.

Lectures:

Mobile Web Appplications Development with HTML5 part 1
JQuery Mobile [examples]
Mobile Web Appplications Development with HTML5 part 2
Mobile Web Appplications Development with HTML5 part 3
Mobile Web Appplications Development with HTML5 part 4 [backbone] [Canvas/Device] [web sockets] [css3] [rest]

Other talks: http://aaltowebapps.com/talks.html - https://github.com/clody69

http://gitref.org/
www.html5rocks.com
www.htmlfivewow.com
chromestatus.com caniuse.com
http://mobilehtml5.org/

Try It In Real Time

http://www.sqlfiddle.com/ - learn and practice SQL queries online
JSBin  - Remy Sharp online javascript tool
JSFiddle 
CodePen
Dabblet  - CSS
Tinker

http://hugogiraudel.com/2012/11/19/css-playgrounds/

Together Native and Html5

Peter Traeg of Universal Mind has written an article at Smashing Magazine about mixing together Native and Html5 .

Exposing a portion of the user experience through HTML and JavaScript means that some of the experience can be served from the Web and thus be dynamic. As we saw earlier, it’s possible for this Web-served content to invoke native code in your application via a “bridge” that you create.

Apple allows JavaScript code to be downloaded and executed as long as it runs within the context of the UIWebView control in your iOS application. This is the only situation in which code “downloading” is allowed in iOS.

The UIWebView in iOS and its associated UIWebViewDelegate provide the mechanism that allows native code and JavaScript to communicate with each other.

https://github.com/ptraeg/html5-in-mobile-apps

Phonegap, HTML5, Hybrid apps

Phone Gap at CBDW By Ray Camden

html5 offline of AppCache

More on App Cache http://alistapart.com/article/application-cache-is-a-douchebag

http://blog.kevinchisholm.com/html5-javascript/html5-offline-web-applications-part-iii-the-applicationcache-javascript-object/

hybrid app

IBM WorkLight

Several videos on HTML5

iOS developer Library

Chrome Web Store

Front End Vimeo talks

PhoneGap, jQuery Mobile, and Usergrid Learning session from Apigee

Tim Anglade demo on Mobile development from Apigee:

Practical HTML5 with Ray Camden from Adobe

Practical HTML5

Forms

New types , tricks, validation Number, range,date, color, search, Tel,email,URL

 jquery uILabel date picker replacement Netscape not supporting

Nativeformelements.com
Formaction tag on button

 Details tag Del and ins tag Tag

apply forms called output based on computation works with form oninput Input type range

 Client side validation Local storage Simple API either simple strings, json

 Up to 2.49 Meg's localstorage.getItem, set item, remove item clear Session storage across tabs window.localstorage

Don't use cookies

 Index db API for client side storage,

high performance searches Built in nosql database Loosely goosey

Xhr2.  Spec

Cors call other servers  - real way


From post with file now with binary data with xhr2


Download tag in a tag

Page visibility API

Document query selector

data attributes

Mobile shootout with Jason Michael Perry from FigLeaf

Mobile shootout

Consulting with NC AOC

Works with alot of frameworks. He likes iOS

Co Author of Free Teach Yourself Sencha in a day. Also wrote a book on ExtJS

Such a new industry with Objective C and mobile.

For alot of applications, building something that works on all platforms will do the job

Built a reference app - Friends with Beer

Built it with 3 platforms

layout, Theming, Data Interobibility,Media Handling

1) jQuery Mobile (DOM easy rampup), 2) Sencha, 3) appcelerator titanium (converts js to native)

jQuery Mobile - html markup

jQuery mobile falls apart doesn't do a lot, low level data calls like in jQuery

need to bring stuff in to do stuff such as library like backbone, mainly does UI piece

template engine doesnt exist have to use Moustache templates

Good things is alot of IDE support

Tooling: Aptana, Dreamweaver, Codiqa (awesome web based tool ), Theme Roller from jQuery Mobile site.

Very repetitive with markup such as footer and headers

Put js at end of page makes it faster.

Strengths: know DOM , suppports all devices, great way to get started
Weaknesses: doesn't scale well, no built in MVC, performance worst, needs 3rd party plugins ( i.e. maps is a plugin jquery ui maps plugin), styling not as easy. No compiling engine.
Best for small projects or multi page apps.

Best practice is each pieces views  and break them up but here its one file.

dom attribute TEL to make a phone call.

Sencha Touch

- whats makes it awesome  is tools like Sencha Architect 3(WYSIWG, shows code generated) to build pages

do everything in javascript , no dom

declarative structure

works with model structure and stores (collection of models)
json p call

3party support sucky

Sencha cmd3 - takes app and minfies it

SASS - syntactically awesome stylesheets

Can create overrides in architect to custom components

sencha eclipse plugin

senchas command - stub a project generate code - ant compile tool

Sencha Architect pricing - insane functionality

Better than jquery mobile performance

Well suited for large projects Fig leaf tutorials

 Built own thing but moving phone gap

 Packaged web view that is not native

Open source release code everyone with license

App accelerator 

Eclipse based App accelerator

Bought Aptana for IDE titanium studio

Native Closed source Mvc

 Support android

 Cloud based tools Alloy XML structure Data handling uses backbone

Introduction to Phonegap with Raymond Camden Part 2

Suggests Chrome dev tools .

Ripple Emulator was best in past . Broken now. In repair mode.

"If you are doing mobile and they don't buy the hardware - Quit!"

desktop tools:

ios remote debugging with iOS simulator

http://caniuse.com/ - http://caniuse.com/#feat=css-filters

Android chrome not part of device now. Has its own stock browser

Phonegap Build

build.phonegap.com/apps: https://build.phonegap.com/people/sign_in

new folder, put index.html in it

put github url  or zip file upload it

building for 6 different platforms.

can install it from the website

http://www.raymondcamden.com/index.cfm/2013/7/19/PhoneGap-30-Released--Things-You-Should-Know

http://www.raymondcamden.com/index.cfm/2012/8/23/PhoneGap-Build-adds-Hydration


Single page application phonegap is best for. Doesn't work so well for multi page apps.

Topcoat.io http://topcoat.io/ - looks like bootstrap

http://www.chocolatechip-ui.com/

http://www.webkit.org/building/debug.html

Pebble l- looks like a watch http://getpebble.com/

Using_the_application_cache - compares whet you have to the server

http://mustache.github.io/

Introduction to Phonegap with Raymond Camden

 Intro Phone Gap

Raymond works for Adobe after mainly being a server side developer. Client side the past few years.

https://github.com/cfjedimaster/Introduction-to-PhoneGap

open source name is Cordova - currently they are the same code

shell around a web view , enhances html "adding cowbell" .

Mozilla has spec for working with batteries. PG tries to follow the specifications.

His focus is android and iOS

write once and modify in every other platform. Not write once and use everywhere.

Can write 95% of application.

Globalization broken in 3.0 - data number formatting, fixed in 3.1

Storage - web sql for storing on client - local storage product for small sets of data.
w3c worked with spec websql (dead)  - but not for mobile , new thing is indexdb, but not used on mobile much

Can use javascript libraries with - cant talk to js on different server - new cors library for this,

no UI in phone gap -let others do this

Demo app : UnTappd  - built on web standards - good example of phonegap

Can use command line for generating code folders for iOS and Droid

Brackets is open source editor that he uses.

PhoneGap build - dont worry about sdk builds and does it for you , free tier and for pay tier

new install process makes use of Node, you dont need to know it to use it, node product manager NPN

He suggests Node but don't need to know it to use phone gap. He is not big command line person.

command line is:
phonegap

phonegap help cerate
phonegap help remote build

phonegap create MyLittleKittenIsEpic

folders:
merges
platforms
www

command:
phone local run local ios
phonegap run local android

in www is an index.html, didnt use eclipse

phonegap 3 has changed things, camera tweak, app slimmer, will support nothing, need feature, tell me u want to use it, must use command line to add to baseline. i.e. add camera api

phonegap local plugin add X
where x is location of plugin i.e. url

docs.phonegap.com/

docs mentions cordova command line, difft than phonegap one, phonegap one better

hello world convert into binary

he uses zepto a toned down implementation version ofjquery

he likes geolocation  library

navaigator.geolocation.getCurrentPosition(function (geo) {...

don't have to be js ninja with phonegap