Tuesday, September 30, 2014


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

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)




Android information and devlopment resources

The Android javadoc is great reference material:

The Android Application components another important resource: 

The Android Welcome page

The Android Open Source Project

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

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

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
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.*

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

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

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

Broadcast Receiver - A component that responds to system-wide Intent broadcast announcements
- Supports complex Intent filtering
- delivered asynchronously to all receivers
Extends BroadcastReceiver class

Intents - messages (i.e. events) that link application components together


ADT Bundle:
latest android platform
eclipse and ADT plugin
latest image for emulator
additional dev tools

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

Davlik debug Monitor service (DDMS) perspective

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

Open perspective -> Hierarchy view


Thursday, September 25, 2014

Web Components 101

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.

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

Show shadow dom in web tools under wrench:

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

Tuesday, September 23, 2014



Launch the editor

On right side in the initial display (or click on second button down on the right that looks like a book), you can add external libraries into your javascript. Either search for a library or click the button of an an already displayed library.

Note that the top icon on right is to preview on the right the generated output.

You can click the save button on top left to save your script to a generated web URL.

Double click a file name on left to rename it, click x icon to delete a file , or click the add file hyperlink to add a file.

There is preview button on right for a large  display of the displayed output.

Check mark button on the right is for lint integration.

Th gear icon is personal seetings like font and auto-refresh which runs the script again at interval selected . Or turn auto-refresh off.

Dev tools invocation will show you any JavaScript errors in console tab.

Right click on console and click options to clear console

To debug go in the sources tab.

ctrl-o to open your js file by entering file name in the input box.

debugging resume f8

Sunday, September 14, 2014

Great conference


Angular -

Ionic -

Less -

js in real world -
















- http://www.slideshare.net/ericcarlisle/the-new-ui-staying-strong-with-flexbox-sass-and-mustachejs
- http://www.slideshare.net/deesadler/ux-and-the-mobile-app
- http://www.slideshare.net/BenMcCormick/component-based-development