Angular sub topics

A few weeks ago I used angular to create a sample app.  That was a good experience. In keeping with learning more Angular,  I came a cross a podcast blog Adventures in Angular. The first episode i listened to was http://devchat.tv/adventures-in-angular/angular-meetups-with-matt-zabriskie-and-sharon-diorio . This talk had training videos sessions:

Meetup Angular and bootstrap - see Plunkr
Utah Angular user group
Testing with Angular

Pluralsight has training on bootstrap 3 as well.

Polymer Step by Step

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

• npm install -g bower
• bower init
• bower install --save Polymer/polymer
• bower install --save Polymer/core-elements
• bower install --save Polymer/paper-elements
• bower install --save Polymer/core-ajax

Chrome Dev Editor

index.html:
bower_components/
elements/

index.html:

<!DOCTYPE html><html>
<head>
<!-- 1. Load platform support before any code that touches the DOM. -->
<script src="bower_components/platform/platform.js"></script>
<!-- 2. Load the component using an HTML Import -->
<link rel="import" href="elements/my-element.html"> </head>
<body>
<!-- 3. Declare the element by its tag. -->
<my-element></my-element>
</body>
</html>

elements/my-element.html:

         <link rel="import" href="../bower_components/polymer/polymer.html"> 
         <link rel="import" href="../bower_components/core-ajax/core-ajax.html"> 
         <polymer-element name="my-element" noscript>
           <template> 
             <span>I'm <b>my-element</b>. This is my Shadow DOM.</span>
             <core-ajax url="https://api.github.com/users/angular" auto response="{{resp}}">
             </core-ajax> 
             <textarea value="{{resp}}"></textarea> 
           </template> 
         </polymer-element>

elements/proto-element.html:

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">

<polymer-element name="proto-element">
<template>
      <span>I'm <b>proto-element</b>. Check out my prototype.</span>
</template>
<script> Polymer({
                                ready: function() {
                                        // properties and methods here
                                    }
                             });
</script>
</polymer-element>

API Guide


GDG Triangle Polymer Introduction

• Intro Polymer with Kyle Aug 6, 2014 [slides]

• Using Polymer with a Toolbar  

               [ core-elements.html#core-toolbar ] :

              <body unresolved> 
                <core-toolbar>
                    <div>Toolbar</div> 
                </core-toolbar> 
              </body>

• Using Polymer with Tabs

          [ paper-elements.html#paper-icon-button]

          [ paper-elements.html#paper-tabs ]

           <body unresolved fullbleed> 
              <core-toolbar class="medium-tall"> 
                    <paper-icon-button icon="menu"> </paper-icon-button> 
                    <div flex>Title</div> 
                    <paper-icon-button icon="search"></paper-icon-button> 
                    <paper-icon-button icon="more-vert"></paper-icon-button> 
                    <div class="bottom fit" horizontal layout> 
                          <paper-tabs selected="0" flex style="max-width: 600px;"> 
                               <paper-tab>ITEM ONE</paper-tab> 
                               <paper-tab>ITEM TWO</paper-tab> 
                                <paper-tab>ITEM THREE</paper-tab>
                           </paper-tabs> 
                   </div> 
             </core-toolbar> 
         </body>

Polymer Player

https://github.com/kylebuch8/PolymerPlayer/blob/master/index.html
https://github.com/kylebuch8/PolymerPlayer/blob/master/components/player-song/player-song.html

https://github.com/kylebuch8/PolymerPlayer/blob/master/components/player-songs/player-songs.html

    <template repeat="{{sng, i in songs}}">
       <div class="song" needZ?="{{song.title === sng.title}}"> 
             <div hero-id="{{sng.title}}" hero>
                  <div class="bg" style="background-image: url(images/{{sng.img}});"> 
                         <player-color-thief song="{{sng}}"></player-color-thief>
                  </div> 
                  <div class="footer" style="background-color: {{sng.dominantColor}}; color: {{sng.textColor}};"> 
                        <span class="title">{{sng.title}}</span>
                        <br> <small>{{sng.artist}}</small> 
                 </div> 
           </div> 
       </div> 
</template>

https://github.com/flatiron/director

https://github.com/kylebuch8/PolymerPlayer/blob/master/components/player-songs/player-color-thief.html

<polymer-element name="player-color-thief" attributes="song">

• https://www.polymer-project.org/docs/elements/
• https://www.polymer-project.org/docs/elements/core-elements.html
• http://kylebuch8.github.io/PolymerPlayer/
• https://github.com/kylebuch8/PolymerPlayer
• https://github.com/KamiQuasi/wc-overview
• https://www.polymer-project.org/apps/topeka/
• https://github.com/polymer/topeka

ng + web components

The ng duo of  Carmen Popoviciu and Pascal Precht  have a video on integration of angular and web components.

Four technologies

Clone template

Create Shadow Dom

Create new elements [more]

Angular with web components

Angular doesn't know and shouldn't know about custom elements. - just another element on page

http://pascalprecht.github.io/dont-stop-thinking-about-tomorrow/#/39

A custom element can change DOM attributes or Element properties

https://github.com/eee-c/angular-bind-polymer


http://pascalprecht.github.io/2014/10/25/integrating-web-components-with-angularjs/

http://pascalprecht.github.io/talks/

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/

Just took a Bower

Tool for easily manage the 3rd party client side libraries within your code.

The old school process is to browse, download, extract zip, find files, copy, links to files in html.

Bower eliminates most of this Its for client side files, but can do any type of files. Bower calls the files modules Packages

Bower calls into Github to get files

 npm install -g bower

 bowser install <proj>

 Dist directory js and minified one

 Add it to your project in script tag

 Get rid of something
   bower uninstall <proj>

 Updating projects (i.e. multiple)

bower update

Might need to be careful

One at a time

bower install <proj>

What packages?

bower list

bower search <proj>

http://bower.io/search/

bower.json file
- name,  version, main, dependencies

bower init
- prompted to create json file

.bowerrc
- directory:relative path to folder

bower install
bower install <project> --save
bower uninstall <project> --save


Related post : [http://bloomonclientside.blogspot.com/2013/11/bower-is-package-manager-for-installing.html]

Angular Github viewer

Here is result of a class I just took on angular

http://plnkr.co/edit/PJHy3cC6fK9i1nPnYfvE?p=preview


Github api:
https://api.github.com/users/angular
https://api.github.com/repos/angular/angular-component-spec
https://api.github.com/repos/angular/angular-component-spec/collaborators