HTML5 Training Day (Mountain View) – Summary

Well, in the past month I was busy organizing this HTML5 Training Day for business web developers. You may want to stop and ask:
What Is HTML5 Training Day? So, our main goal is to have an open conversation with business web developers and to provide them with tools and knowledge to implement HTML5 features into their web apps. In this one day event, world-class experts talk about tools, tips and best practices in web development with focus on business.

It was a lot of fun and last week, we had in Google more then 24 companies that came to learn about the latest and greatest in the open web technologies.

We started the day with a short presentation that I gave on ‘The State of ChromeOS’. It’s amazing to see how fast is the pace and I suspect we are going to have a great 2012. After that (and two more cups of coffee) we got Pete LaPege (an excellent speaker, if I may) talking about: “HTML5 and new breed of web application” which aim to cover what defines a great Web App and show you how you can use HTML5 to create a new breed of web application that will delight and amaze your users.

Another cup of java and another web ninja: Mr. Eric Bidelman gave great talk with lots of demo on the ‘bleeding edge features in Chrome and the open web platform“.
and some HTML5 offline features. 

For the developers who wish to do ‘mobile first’ – we had a surprise from the snow country. Mr. Boris Smus (that build web stuff that make you – wow! for real) talking about A mobile web app technology stack. Here in his own words: “…Learn what it takes to build modern mobile web apps. We will start with the ideas of “adaptive apps” and “offline first”. Next, we’ll dive into some of the technologies, including MVC frameworks, templating engines, CSS frameworks, laying out views and multi-touch input. Finally, we’ll close off with mobile-specific tips and sweet demos.”

After Boris we had the pleasure to host David Kaneda (for the few that don’t know, David Kaneda is a creative web technologist. He created jQTouch, a jQuery plugin for mobile web development, and Outpost, the original iPhone app for Basecamp.) David gave another great talk on “Abstracting CSS for Complex Theming Systems.”

In the afternoon, Mr. Seth Ladd (The Michael Jordan of Dart) spoke about Dart and how it is a comprehensive effort to help app developers build complex, full featured, high fidelity apps for the modern web. He gave some nice short demos that showed the language, libraries, and editor of Dart.

Last but not least, Mr. Christos Apartoglou (The Chrome Web Store Chief) spoke about  Success stories in CWS. He talked about some bold success stories and showed what makes apps in the Chrome Web Store successful.

You can see the format of the day with the full descriptions of the talks over the public schedule that we kept for that day. It was a good tool to have a back channel (using the chat feature on the document) and to allow everyone to keep updated with the last minute changes. I hope to have some videos from that day public… I will post them here and on my G+ page.

See you all in our next Training day.

Install ChromiumOS On Your (Old) Laptop

ChromeOS - A new gift to your old laptop

In this post we will see how easy it is to take ChromiumOS to a test drive on your old hardware and see if it’s working for your needs. I did it on some old laptops that I have forgot all about them and 3 out of 4 are working great with this powerful OS. I was surprise to see that even with old hardware (More then 4 years) the laptop is working nicely and much faster. All the builds here are thanks to Chromium.org and this powerful open-source project and Mr. hexxeh that hack the builds and allow to download them (thank you!).

What is ChromeOS/ChromiumOS?

Chromium OS is an open-source project that aims to build an operating system that provides a fast, simple, and more secure computing experience for people who spend most of their time on the web. It gives you the familiar environment of Chrome with HTML5 & Flash support.

Install ChromiumOS on Linux

1. Extract the IMG file from the downloaded archive.
2. At the shell, run the following (where sdX is your USB stick and ChromeOS-Lime.img is the path to the IMG file you extracted):
   dd if=ChromeOS-Lime.img of=/dev/sdX bs=4M
3. Boot from the newly created Chromium OS USB stick!

Install ChromiumOS on Mac

• Like almost anything on Mac it’s very easy, with just one step. You will need to download this ChromeOS mac builder and you are good to go.

Install ChromiumOS On Windows

1. Begin downloading Chrome Image
2. Download and extract the Windows Image Writer.
3. Copy the Windows Image Writer directory to the ROOT of your C: drive.  (failure to copy this directory, and the .img file for Chrome to the ROOT of the C: drive can cause the dreaded and annoying “Error 8:”)
4. Right-Click on the tar.gz image file, and use 7-zip to “extract here”.
5. After that completes, again, right-click on the .tar image file and use 7-zip to “extract here”.
6. This should leave you with a .img file.  Copy this file to the ROOT of your C: drive.  (failure to copy this file, and the directory for the Windows Image Writer, to the ROOT of the C: drive can cause the dreaded and annoying “Error 8:”)
7. Insert your USB flash drive or SD Card.
8. Enter the Windows Image Writer directory and execute the Win32DiskImageer.exe programme.
9. Select the .img file in the “Image File” window, and ensure that the proper drive letter is selected in the “Device” window.
10. Click on “Write”.
11. Once complete, remove your flash drive or SD Card, and insert them into your powered-off laptop.
12. Power on your laptop and TAP THE ESC KEY to select the boot order.  Don’t try to change the boot order in the CMOS/BIOS settings – it doesn’t seem to be able to detect a proper USB boot from there.
13. Boot from the USB device, rather than the internal SSD.
14. Enter “facepunch” as your username and “facepunch” as your password.
15. Once Chrome OS is booted and appears, press Ctrl-Alt-T to go the terminal.
16. Enter “sudo dd if=/dev/sdb of=/dev/sda bs=4m“.  Don’t bother with the “/usr/sbin/chromeos-install” advice that you see in places – it won’t work on a 2GB SSD.
17. Remove your USB device, and reboot.

In case you wish to ‘test the water’ without all this you can also test this powerful OS in VirtualBox. Here are the details to install ChromeOS in Virtual Box.

Enjoy and please let me know how it’s working for you and how we can make it better.

Mobile Web Performance

“You can’t manage what you can’t mesure” And it’s not easy to manage or get a clear picture on mobile web browsers. Since this is a very important subject to any web developer and specially those who focus on their ‘mobile first’ plan. I’ve saw this good presentation on this subject and wanted to share with you my main takes. Studies show that Mobile users expect equal or better performance than desktop, where they demand 2s load times. This is a hard requirement to fulfill, give the limitations mobile imposes. Guy Podjarny (the CTO of blaze.io) go over the different aspects of mobile: network, hardware & software. We’ll review the challenges each presents, understand how they affect web performance, and show ways to overcome those challenges. We’ll also show the impact of these optimizations on real world sites, gleaned from manipulating and measuring websites using Blaze technology. We’ll summarize with updates on the recent mobile OS releases, followed by Q&A.

The video of this talk

My notes from the talk

• You will lose 13% of your users after 2sec! and 25% of your users after 4sec of load time.
• HTML5 is supported on mobile so use HTML5 localStorage for caching: It’s available on all major mobile platforms. It doesn’t expire and it will survives power cycle. Its size limit is around 5MB so it’s most useful for caching javascript and CSS files (like Bing and google search pages are doing on mobile browsers).
• Scriptable access enables other optimizations.
• Use far-future expiry dates
• You got more then ’2 connections’ on modern mobile browsers (e.g. Galaxy S got a max of 12 connections) – so use them in parallel as you can.

 Other good tips

The presentation

Happy new year!

3D Art, Mobile And A New Tutorial On Web Databases

Why mobile native apps must die

This is a very interesting talk by Scott Jenson. He speaking about the ‘anti phone’ and why  a phone that is based on a browser will be very useful (to say the least). From his talk description: “…Mobile apps are on a clear trajectory for failure. It’s just not possible to have an app for every device in my house, every product I own and every store I enter. Much like Yahoos original hierarchy gave way to Google’s search, applications have to give away to a “just in time” approach to applications. This talk will explain how applications must give way to a more universal approach to application distribution, one based on the mobile web and cloud services. The problem of course, is that the mobile web has both hands tied behind its back. Any mobile app today is locked away behind a browser ghetto: in effect, a sub OS inside a larger mobile OS. This isn’t just an arbitrary technology debate, a just-in-time approach to application functionality can unleash entirely new sets of application, ones which are impossible with native apps. This talk will layout how this problem can be fixed, and what changes need to take place, outside of just HTML5, for it to happen.”

Migrating your WebSQL DB to IndexedDB

Lastly for this post, as WebSQL is deprecated, I recommend web developers to stop using the technology in new projects, as, effectively, the spec will receive no new updates and browser vendors aren’t encouraged to support this technology. The replacement is IndexedDB. As a ‘NoSQL’ database, IndexedDB is very different from relational databases, and it give us lots of power. IndexedDB let us create an Object Store for a type of data and simply persist Javascript Objects to that store. Each Object Store can have a collection of Indexes that make it efficient to query and iterate across. In this tutorial I’ve showed how you can convert the current usage of WebSQL and start leverage IndexedDB.

And let’s finish with some art…

3D Art + Com