Chrome, HTML5, JavaScript, webdev

A Hangout On HTML5 APIs And CSS3 (New) Layouts


Last night, I gave this talk to Google Developer Group Tallinn about the new APIs that we have today in HTML5 and CSS3. It was (another) great hangout where you can ‘touch’ people that are quite far from your location and speak with them about mutual interest.

Some of the topics that I covered during the talk where:

  • Access Native Hardware – One of the new capabilities are device APIs. We see a trend of getting ‘closer to the matel’ from HTML5 and here is just a subset of all the new options:
    • Device Orientation API – You can test your accelerometer in your DevTools. Click on settings (bottom-right corner) and then choose ‘Overrides’ in case you are with Chrome Canary (like you should).
    • Geolocation API – Yep… also supported in DevTools. You can override the location in order to check what your web app will do in certain locations.
    • WebGL ( GPU )
    • HTML5 Filesystem API – sandboxed filesystem that works on: Chrome and even IE10, FF we a JS shim.
    • navigator.onLine / navigator.connection – so you could check when the user got network connectivity and do smart sync.
    • Battery API – One good uses case will be to do ‘less’ in order to conserve the battery and still give the user to enjoy your app.
    • Gamepad API – There are many demos of ‘Drones flying in the air with Chrome networking and gamepad APIs’
    • WebRTC – The ‘native’ way for browsers to expose voice & video input so we would be able to work with them without any plugin (e.g. Java, Flesh).
    • Web Audio API – The ability to ‘touch’ audio core data and work with it.
  • CSS For Web Apps – CSS3 new layouts that give web developers the power to create a structure for their web app that will work on different devices. With these layout managers we don’t need to use hacks like ‘Floats stack’, relative positions or (god help us) absolute positioning. Here is a nice playground flex-box page that my college Eiji Kitamura created.
  • Data Binding – How to use it with AngularJS or plain vanilla Javascript.
  • Multithreaded Programs – Web workers and why they might improve the happiness of your users.
  • Access a Filesystem – The fact that you can work with ‘real’ directories and files on the client.
  • Efficiently Transfer Data – with the ability to use ‘Transferable Objects‘ when you wish to pass large objects to web workers.
  • Stream Multimedia – Web sockets and how to use them with binary data.

Chrome love HTML5

Now, we all know that “behind in front every great man there’s a great woman”. And just like that, “behind every great client side app there’s a powerful server side”© (I made it up late at night – so let me keep the copyrights, ok?).  When you wish to built a strong REST API that will give you the power, scale and the ability to serve many different client(s) – You might want to check Google Cloud End-Points. In many cases, developers will want to have one API and then use it from Android, iOS and the web. For that, Google Cloud End Points is good option. It’s giving you the power of Google App Engine (e.g. scaling, security, zero admin etc’) with powerful capabilities to create your API and more importantly, to maintain it, without pulling your hair. Here is a full tutorial –

Have a great weekend!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s