Bloom On Client Side: 2014

Monday, December 15, 2014

Firebase

firebase joins google - g+ page why

three way binding:

We can synchronize our data back to Firebase by using the following methods provided by the $firebase object.

$add(value)
$remove([key])
$save([key])
$save()
$child(key)
$set(value)

create a free account

Once you are logged in, you can view your url on https://www.firebase.com/account/#/

https://www.firebase.com/tutorial/

https://www.firebase.com/docs/web/quickstart.html

https://www.firebase.com/docs/

plunkr demo #1

https://www.firebase.com/docs/web/guide/understanding-data.html

Friday, December 5, 2014

client side reorder list

I am looking into jquery ui drag and drop grid row

http://jqueryui.com/sortable/

Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable properties

http://api.jqueryui.com/sortable/

options:
items: Specifies which items inside the element should be sortable
handle:Restricts sort start click to the specified element.

events:
stop( event, ui )Type: sortstop This event is triggered when sorting has stopped

example : http://plnkr.co/edit/jpxc42tF55jktfI3upTE?p=preview

http://geekswithblogs.net/apopovsky/archive/2010/02/24/drag-and-drop-table-rows-between-tables-with-jquery-ui.aspx

http://blog.petersendidit.com/post/drag-table-row-to-a-div-with-jquery/

https://jqueryui.com/droppable/#shopping-cart

http://stackoverflow.com/questions/3591264/can-table-rows-be-made-draggable

http://jsfiddle.net/Rusln/fwjaj/4/

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.

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>

<script src="bower_components/platform/platform.js"></script>

<link rel="import" href="elements/my-element.html"> </head>
<body>

<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

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/

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

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/

Saturday, October 11, 2014

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]

Sunday, October 5, 2014

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

Thursday, October 2, 2014

Android Mobile Coursera class has started

I am signed up with 140,000 other students for the "Programming Mobile Applications for Android Handheld Systems" training class starting now.

The teacher is Dr. Adam Porter

Preview lectures

Asignments

Lecture 1 slides

3 Applications
2 Application Framework
1 Native System Libraries (Native DK) / Runtime (Davlik - Core Libraries)
0 Linux Kernel

3 : Contacts, Phone, Browser, Home app, etc

2: reusable software that many applications will need like Package Manager , Window Manager, View System (common user interface elements such as Tabs, Lists, grids, text boxes, buttons, textview ), Resource Manager (non-compiled code resources: strings, graphics, & layout files), Content Providers, Activity Manager, Location Manager

1 : core performance sensitive activities on device (native dev kit) such as C library, surface manager, media manager webkit etc. / File packaged with other resources and installed on device. Dalvik VM executes the Dex Bytecode file when invoked on device. Dalvik VM designed to be resource constrained environment with slower cpu, less memory, limited battery life System C library .

0 : Standard services - Provides infrastructure mechanisms to manage mobile device resources. Android specific such as power management, Android Shared memory, Binder, etc

Use the Hierarchy Perspective after the program is launched :

here is some sample output(click on your activity on the left):

The Traceview within DDMS can be pressed to start when a debug tracepoint is hit, which starts the profiling. After profiling is started, let it run through, and then click the same button to end the profiling. The botton to start/stop is shown:

After hitting the end button, the output is shown (timeline view on top and profile view on bottom):

Method profiling - select class, start it, then do something on device with app, click stop:

https://github.com/aporter/coursera-android

This first week includes:
1. The Week 1 Quiz. Sixteen or so questions to help you make sure you've followed my lectures.

2. Two Labs.
a) Lab - Learn to Submit - A very simple assignment designed to make sure that you can submit work to the Coursera system for grading

"To do this assignment, simply create a one-line text file with the name of your home country and nothing else. Make sure you are creating a real text file, not, for example a .rtf file" Then click on the submit button to select and upload that text file."

b) Lab - Development Environment - A more involved Lab to help you set up your Development Environment and to familiarize yourself with it.

Intel Hardware Accelerated Execution Manager(HAXM)

AndroidManifest.xml:

Define your package :

package="course.examples.theanswer"

Define your Actvity:

<activity
            android:name="course.examples.theanswer.TheAnswer"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

Define your layout in answer_layout :

<RelativeLayout...

<TextView
        android:id="@+id/answer_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp" />"

set your layout and access your widget

   setContentView(R.layout.answer_layout);
   TextView answerView = (TextView) findViewById(R.id.answer_view);
   answerView.setText("The answer to life, the universe and everything is:\n\n"+ output);

calculator with 2 EditText , TextView widgets and a Button with on click listener:

        final EditText value1 = (EditText) findViewById(R.id.value1);
        final EditText value2 = (EditText) findViewById(R.id.value2);

        final TextView result = (TextView) findViewById(R.id.result);

        Button addButton = (Button) findViewById(R.id.addValues);
        addButton.setOnClickListener(new OnClickListener() {

            public void onClick(View v) {
                try {
                    int val1 = Integer.parseInt(value1.getText().toString());
                    int val2 = Integer.parseInt(value2.getText().toString());

                    Integer answer = val1 + val2;
                    result.setText(answer.toString());
                } catch (Exception e) {
                    Log.e(LOG_TAG, "Failed to add numbers", e);
                }
            }
        });

JUNIT Test of Layout

 LayoutTests extends ActivityInstrumentationTestCase2<MainActivity>

    public LayoutTests() {
        super("com.mamlambo.article.simplecalc", MainActivity.class);
    }

    protected void setUp() throws Exception {
        super.setUp();

        MainActivity mainActivity = getActivity();

1 – Log.i(…, …) – Sends an INFO LogCat message
2 – Log.d(…, …) – Sends a DEBUG LogCat message
3 – Log.e(…, …) – Sends an ERROR LogCat message
4 – Log.v(…, …) – Sends a VERBOSE LogCat message

http://developer.android.com/reference/android/util/Log.html

import android.util.Log

private final String TAG = "TheAnswer";

Log.i(TAG, "Printing the answer to life");

settings custom locale:

http://developer.android.com/training/basics/supporting-devices/languages.html

values/ strings.xml
<string name="hello_world">Hello world! My Name is David.</string>

values-es/ strings.xml

<string name="hello_world">Hola Mundo! Me llamo es David!</string>

layout/activity_main.xml:

TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"

https://code.google.com/p/simple-calc-unit-testing/downloads/detail?name=FullCodeDownload.zip&can=2&q=

3. The Getting to Know You Survey - This is only graded activity for the week. We'd like to get some information about you to help us know more about who you are, your background and your expectations for the course.
http://help.coursera.org/customer/portal/articles/1329059-how-can-i-keep-track-of-course-deadlines-
https://class.coursera.org/android-001/api/course/calendar

Tuesday, September 30, 2014

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.

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

Android information and devlopment resources

The Android javadoc is great reference material:
http://developer.android.com/reference/packages.html

The Android Application components another important resource:
http://developer.android.com/guide/components/index.html

The Android Welcome page
http://developer.android.com/about/index.html

The Android Open Source Project
http://source.android.com/

Linux Kernel: Standard services - Provides infrastructure mechanisms to manage mobile device resources
• Security
• Memory, process, & thread management
• Network & File I/O
• Device driver framework (pluggable devices)
Android specific includes power management, Android Shared memory, low memory killer, Binder (Inter Process communication) , alarm driver, debugger, logger
http://en.wikipedia.org/wiki/Android_(operating_system)#Linux_kernel

Native System Libraries (C/C++ Native DK) core performance sensitive activities on device
System C library - (std os system calls such as process/thread creation, memory allocation, mathemetical) bionic libc
• Surface Manager - (updating the display) display management
• Media Framework - (playback) audio/video streaming
• FreeType - library for rendering fonts
• Webkit - (rendering and display web pages ) web browser engine
• OpenGL ES, SGL - graphics engines
• SQLite - relational database engine
• SSL - secure sockets layer
http://developer.android.com/tools/sdk/ndk/index.html

Runtime (part of System libraries layer)
Davlik virtual machine executes the android apps, code written in java compiled into series of bytecode files , Davlik dx program transforms java classes into single Dex bytecode file (classes.dex). File packaged with other resources and installed on device. Dalvik VM executes the Dex Bytecode file when invoked on device.
Dalvik VM designed to be resource constrained environment with slower cpu, less memory, limited battery life
http://en.wikipedia.org/wiki/Dalvik_(software)
Core Libraries
• Core Java classes (building blocks)
• android.* (application lifecycle)
• java.*, javax.* (data structures, concurrency, I/O)
• junit.* (unit testing)
• org.* (internet/ web services)
org.json.*, org.xml.*
http://en.wikipedia.org/wiki/Comparison_of_Java_and_Android_API

Application Framework - reusable software that many applications will need
Package Manager - Manages application packages on device such as info about apps
Window Manager - Manages top-level window’s look & behavior (notification bar, main application window, sub-menus/dialogs)
View System - common user interface elements such as Tabs, Lists, grids, text boxes, buttons, textview
Resource Manager - Manages non-compiled code resources: strings, graphics, & layout filesContent Providers - Inter-application data sharing (i.e. databases)
Activity Manager - Application lifecycle & common navigation stack
Telephony Manager - State of telephony services
Location Manager - Access to system location services
Notification Manager - Notify users when events occur
https://sites.google.com/site/io/inside-the-android-application-framework

Application - built in apps. Can substitute apps.
Home, Contacts, Phone, Browser, Email

Activity : Represents a single screen with a user interface (view user interface) - see Activity class
- activity lifecycle or http://developer.android.com/reference/android/app/Activity.html
- Can be started by creating an Intent object & passing it to startActivity()
- Parameters can be passed as “extras” to the Intent used to start the Service
- Apps can have multiple Activities

Service -operation in background, can bind to other services or Activities. For performing long-running operations or to access remote resources. Extends the Service class.
Started Service – Often performs a single operation & usually doesn’t return a result to the caller directly
Bound Service – Offers a client-server interface that allows components to interact with the Service
http://developer.android.com/guide/components/services.html

Content Provider - Manages a shared set of application data , Never accessed directly,
but via a Content Resolver
Consistent access to data (i.e. Rest, Crud operations)
Data store backing options like SQLite, Web, File systems
Can consume data from other content providers
Extends the ContentProvider class
http://developer.android.com/guide/topics/providers/content-providers.html

Broadcast Receiver - A component that responds to system-wide Intent broadcast announcements
- Supports complex Intent filtering
- delivered asynchronously to all receivers
Extends BroadcastReceiver class
http://developer.android.com/reference/android/content/BroadcastReceiver.html

Intents - messages (i.e. events) that link application components together
http://developer.android.com/guide/components/intents-filters.html

https://sites.google.com/site/io/anatomy--physiology-of-an-android

http://developer.android.com/guide/components/fundamentals.html

ADT Bundle:
latest android platform
eclipse and ADT plugin
latest image for emulator
additional dev tools
http://developer.android.com/sdk/index.html

Emulator:
network/speed latencies
battery power
location coordinates

telnet localhost port# (i.e. 5554)

slow network:
network speed edge
network speed full
power capacity 5

power status not-charging

geo fix 0.0 40.0

sms send 3015555555 "msg"

call port number other emulator
http://developer.android.com/tools/devices/emulator.html

Davlik debug Monitor service (DDMS) perspective

- file explorer
- logcat
- button in ddms to start and stop profiling at debug tracept

Open perspective -> Hierarchy view

http://developer.android.com/guide/index.html
http://developer.android.com/training/index.html
http://www.androiddevtools.com/
http://www.dre.vanderbilt.edu/~schmidt/cs282/
http://www.cs.swarthmore.edu/~aviv/classes/s13/cs71/
http://www.cs.odu.edu/~cs495/
http://www.vogella.com/tutorials/android.html
http://www.cs.unibo.it/projects/android/2013/index.html#links
http://liisp.uncc.edu/mbapps/
http://www.stanford.edu/class/cs193a/
http://cs76.tv/2012/spring/
https://www.youtube.com/watch?v=RNaOWBBvAGo

Thursday, September 25, 2014

Web Components 101

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):