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)
Nodevember
- 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.
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
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
[ core-elements.html#core-toolbar ] :
<body unresolved>
<core-toolbar>
<div>Toolbar</div>
</core-toolbar>
</body>
[ 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">
<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
Tuesday, November 4, 2014
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/
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
http://pascalprecht.github.io/2014/10/25/integrating-web-components-with-angularjs/
http://pascalprecht.github.io/talks/
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
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
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
Subscribe to:
Posts (Atom)