Skip to main content

My OSCON 2012 Thursday

Posted by haroldcarr on July 19, 2012 at 9:48 PM PDT

OSCON Thursday July 19, 2012

live streaming

1 9:00am OSI - Simon Phipps

  • now open to individual membership

2 9:05am Making Magic From Cloud To Client - Mark R. Shuttleworth (Canonical Ltd.)

  • juju for scaling - devops distilled

3 9:30am Open Source: A Recipe For Success - John Mone (Endurance International Group)

open source

  • internet: google, facebook
  • hosting: blue host, ipage, host gator

4 9:45am An Interview with Gianugo Rabellino (Microsoft) - Edd Dumbill (O'Reilly Media, Inc. )

5 9:55am Disrupting Hardware: The Next Era of Openness - Frank Frankovsky (Facebook)


  • early trains had many gauges
  • had to lift trains to switch wheels
  • training lifting companies fought standardization
  • once standardized costs dropped dramatically
  • openness always wins (in the end)

open web

  • php, mozilla, linux, openstack, apache, hadoop
  • more focus, no lock-in


  • software open, but deployed on proprietary x86 systems
  • how many two-cpu slot motherboards are out there? power supplies?
    • wasted engineering hours - better spent elsewhere (on innovation)

6 10:40am PhoneGap : Cross the Gap from HTML5 to Mobile

Paul Beusterien


why apps?

  • 1 billion tv sets; 2 billion web-enabled mobile devices (and growing)


  • android/java; nokia, windows mobile, objective c, …
  • HTML5 to the rescue


  • run as web page in device browser
    • but app better
      • expected distribution model for mobile
      • interact with native platform
  • PhoneGap, AppCelerator, Sencha, jQuery, Boot to Gecko, …

PhoneGap is hybrid - web tech packaged as app

  • HTML/CSS/Javascript -> mobile capabilities -> native app -> device
  • accelerometer, compass, device, geolocation, camera, storage, …
  • PhoneGap by default gives access to all device capabilities
    • be sure lock down to only what is neededbefore shipping (e.g., disable contact access)

PhoneGap impl

  • web source -> native web view -> native apis -> mobile OS

PhoneGap vs Titanium (see slides)


  • PhoneGap originally developed by Nitobi
  • Adobe bought Nitobi
  • open-sourced as Apache Cordova

UI libraries

  • PhoneGap is not a UI library
    • it gives access to device
    • and packages as native app
  • candidates: Jo EmbedJS, zepto.js, jQ.Mobi, sencha, jQuery
    • he recommends jQuery mobile


  • use browser for HTML parts
  • Ripple : browser plugin to give even more capabilities from browser
  • Weinre : run on device; connect remotely to app on device; can call functions on device, tweek CSS, …

7 11:30am jQuery: Mobile Sites That Feel Like Apps

Anna Filina

mobile site

  • quick/inexpensive
  • point of entry to first-time users
  • others link to your site

mobile app

  • faster, more features/control, works offline

Does your site work on different devices, browsers?

  • viewport size; pointing method, ajax support, qwerty keyboard, images, colors, https, utf-8, percent width, …

jQuery mobile

  • javascript UI mobile framework (adapted from jQuery)
  • one codebase to rule them all
  • site looks same everywhere

mobile-specific events

  • tap: quick/hold; swipe left/right; orientation change


  • transitions; dialogs, themes, history/caching, list filtering
  • toolbar and button groups, forms (slider, flip switch, ajax submitting)
  • big lists: split into groups, few groups (use nav bar); many groups (use intermediate list)
  • nav: lists where appropriate; back/home buttons; keep narrow and shallow; describe links (icons+text);
  • performance: minimize transitions; minimize round-trips; use sprite-maps
    • link to for *.js and *.css files

UI builder


  • convert mobile UI to native app

8 1:40pm Location, Location, Location: Mastering HTML 5 Geolocation

Andy Gup

HTML5 (approxmiate) geolocation

  • W3C API draft
  • built into browser (opt-in required)
  • use native for accuracy


  • find info around user (without requiring user to enter address/zip)
  • auto language, targeted sales


  • detect HTML5 feature detection : if (navigator.geolocation)
  • popup to ask if share is OK (not way to disable this popup).
  • if not supported: IP geolocation or user enter info
  • navigator.geolocation.getCurrentPosition(function(position, error) {...})
    • position.coords.latitude, …

Accuracy depends on

  • type of browser, device, wifi enabled, internet connectivity, GPS enabled, VPN

Geolocation service

  • provided by google, MS, apple (has cell-phone tower map)
  • automatic request made via HTTPS
  • sends info to remote service, including, wifi macid, ssid, signal strength


  • normalize: time, distance, speed, heading : reject bad results
  • too many updates : define rules, local storage limits; remote DB sync
  • geocoder
    • service: lat/long -> address (+ accuracy score)
    • ip: IP address -> address
  • spatially-enabled DB
    • spatial index system
    • points, lines, polygons
    • shift focus from data management to building functionality
    • rather than do geometry, just lookup

-storing location data

  • client
    • Web SQL - not recommended
    • IndexedDB - not recommended
    • HTML5 eb storage (=< 5M)
    • storage: UID, location, timestamp, accuracy, browserType
  • service

browser support


  • get legal advice if you are storing people's location
  • follow W3C geolocation guidelines
  • allow for opt-out
  • be clear about your privacy policy


9 2:30pm A Look at The Network: Searching for Truth in Distributed Applications

Scott Andreas

network details

  • reliablility, security, administration, latency, bandwidth, heterogeneity,
  • topology, transport cost/format, …


  • apps/vertice + network/edge = graph
  • edges represented as time series


  • partitions, GC pauses, load balancing, impaired nodes, security breaches, …

Tools (gather)

  • NProbe, NTop
  • CFlowd, flow-tools
  • TCPDump, TCPReplay
  • CollectID

Tools (Anaylze)

  • R/, RStudio
  • esper
  • dynamic time waring
  • python, numpy, scipy

further reading

  • network flow analysis
  • eamonn keogh
  • k-snap
  • medians and beyone
  • exponential smoothing
  • gigascope
  • dynamic time warping
  • study complex adaptive systems
  • hyperloglog, count-min sketch

10 4:10pm Mashing up JavaScript – Advanced techniques for modern web applications

Bastian Hofmann

Javascript App

  • code at:
  • CSS: use bootstrap, from Twitter
  • framwork:

Same Origin Policy

  • only access stuff on same domain as app
  • but need for API request
    • JSONP
    • CORS : Corss-Oring Resource Sharing


  • mustache.js


  • OAuth1
    • relies on shared secret (that is visible in your public code)
  • OAuth2 solves
    • user-agent profile

Local Storage

  • store access token in local storage



  • Caja
    • sanitize HTML (dynamically retrieved from others) to avoid scripting attacks

Instant updates without reloading

  • pubsubhubbub
  • Websockets (
  • webkit browser notifications


  • too much separation between client and service side frameworks


11 5pm Viewports: Handling the many screens on the Mobile Web

Joe Bowser

  • mobile web is part of web


  • web sites that code to only mobile browser (or only app)
  • pixel resolution

solution (no silver bullet)

  • multiple versions
  • css media queries
  • multiple web assets
  • viewport meta tag
  • javascript apis for detecting DPI
  • test on multiple devices

multiple assets

  • chrome allows you to set resolution for testing


  • css pixels : …
  • device pixels : actual pixels you can't use
  • device independent pixels : CSS pixes at 100% zoom

pixel density: tablet vz phone

  • impossible to determine on pixel alone
  • iOS reports 2 for Retina

the viewport: screen width/height