Thursday, October 30, 2014

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');

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

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


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

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

Hidden document fragment

Using markup to control it

Browser vendors been holding out

Filled in markup

Shadow dom gets rendered

Style things

This time add styling make it red


Host element provide default styles

Custom elements (require hyphen)

Ability to define new elements

Plunkr example 

Using js html.prototype

Html imports

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>

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

bower init
- prompted to create json file

- directory:relative path to folder

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

Related post : []

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


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:

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)


Define your package :

Define your Actvity:
            android:label="@string/app_name" >
                <action android:name="android.intent.action.MAIN" />

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

Define your layout in answer_layout :
        android:textSize="24sp" />"

set your layout and access your widget
   TextView answerView = (TextView) findViewById(;
   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(;
        final EditText value2 = (EditText) findViewById(;

        final TextView result = (TextView) findViewById(;

        Button addButton = (Button) findViewById(;
        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;
                } 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 {

        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

import android.util.Log

 private final String TAG = "TheAnswer";

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

settings custom locale:

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>


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.