Tuesday, November 18, 2014

Links i have learned about lately

https://github.com/gregturn/spring-a-gram - Spring Boot, Spring Data, Spring Rest and JQuery UI (see GalleryRepository class , PagingAndSortingRepository)

- http://nodevember.org/#speakers
- http://nodevember.org/#speakers

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.

Sunday, November 9, 2014

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


<!DOCTYPE html><html>
<!-- 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>
<!-- 3. Declare the element by its tag. -->


         <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>
             <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}}">
             <textarea value="{{resp}}"></textarea> 


<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">
      <span>I'm <b>proto-element</b>. Check out my prototype.</span>
<script> Polymer({
                                ready: function() {
                                        // properties and methods here

API Guide

GDG Triangle Polymer Introduction

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

              <body unresolved> 
          [ 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>

Polymer Player



    <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 class="footer" style="background-color: {{sng.dominantColor}}; color: {{sng.textColor}};"> 
                        <span class="title">{{sng.title}}</span>
                        <br> <small>{{sng.artist}}</small> 



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

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