Chrome, HTML5

Chrome Is Pushing The Web (Faster Then You Think)

There are many technology improvements that are pushing the web forward.One of them is WebGL. Web what?
Well.. it’s a shortcut for: Web-based Graphics Library which is a software library that extends the capability of the JavaScript programming language to allow it to generate interactive 3D graphics within any compatible web browser. Most of the leading browsers today got ‘some’ support for it. This New (amazing) video clip that was design for Chrome is showing the power that artist, developers and users got today under their belt (or their chrome…)

Or just check the source at ROME (Pss… do it from Chrome and not other good browsers).

Standard
HTML5, webdev

HTML5 And The Future Of Everywhere

HTML5 technology is harnessing developers with a very unique way to be ‘everywhere’.

Unlike, the old Java days (1996-1997) where we thought that ‘write once run everywhere’ is going to be the future. This time, all the major browsers (yes, Firefox, Chrome, Safari and even IE) are supporting it. You can build today web apps that looks and act like ‘native’ apps  by using HTML5 features. Not only, you get the option to target iOS, Andriod, PalmOS, Windows7 phones etc’ with great user experience you code base should be ‘write once’. It’s not only the smart decision for start ups and independent developers but rather for all type of companies. Even gorillas like Netflix is taking this direction. Main features that you might want to checkout are:

  • Geo location
  • Video (without flash…) – I’ve told you… it’s 2011.
  • Audio (again – I know you don’t believe me but try it with out flash).
  • File Access is an API for reading file content in JavaScript. Here is a good article about the subject “Exploring the FileSystem APIs“. It give you all the nice simple examples to start handling files from your Chrome browser and soon… you will be able to do the same with your ChromeBook, nice ahh?!
  • CSS3 – extensions to CSS3 including: 2D Transformations, Transitions, 3D Transforms and WebFonts to name just a few.
  • 2D Canvas – feel like a painter for a day.
  • WebGL – games/games/games and more amazing stuff from Google earth.
  • SVG – just like in iOS.
  • Application cache, localStorage e.g. localStorage["name"] = username;. Unfortunately, present implementations only support string-to-string mappings, so you need to serialise and deserialise other data structures. You can do so using JSON.stringify() and JSON.parse().
    More ‘real life’ option to store stuff locally: Web SQL Database gives you all the power – and effort – of a structured SQL relational database. Indexed Database is somewhere in between Web Storage and Web SQL Database. Like Web Storage, it’s a straightforward key-value mapping, but it supports indexes like those of relational databases, so searching objects matching a particular field is fast; you don’t have to manually iterate through every object in the store.

If you want to dive into this new world, I recommend two strong sites:

  1. Dive into HTML5
  2. HTML5 Rocks

Both are giving very good explanations, tutorial and examples, so have fun. For the full experience you might want to use Chrome browser.

This year, Google I/O was around two main subjects: Andriod and Chrome. I’ve went to see some talks on both themes. Here are some good Google I/O Talks I’ve been this year are:

HTML5 Showcase for Web Developers: The Wow and the How

Standard
HTML5, JavaScript, webdev

HTML5 And CSS3 – New Features And Tips #io2011

I had a good busy day today at the #IObootCamp overall, there were lots of good sessions and it is great to meet so many familiar developers. I didn’t had too much time to put all my notes. But here is a quick list I’ve took from few great sessions. In one hands on session I had the fun to hack this ‘awesome to-do list‘. Is it the best to-do list on the web today, or what? (only on Chrome you will get the ‘awesomeness’). It’s all based on @jeromegn work for a demo of backbone.js

CSS3 New Features

  • CSS3 patterns – so many option to get very nice background that are pure CSS based.
  • HSL play tool – change and play with HSL (shh… you can get similar stuff in chrome dev tools by clicking on the right side bar (the one that show you the CSS attributes). You can click on the background-color and it will change between the different methods to define it.
  • Web Fonts – No more the 8 old (=boring) fonts that we have in browsers… you can (and should) use in your sites/apps a wide range of fonts.
  • CSS3 Please – let you change/edit the page and see the nice element on the top right corner change in real time. Good tool for beginners. You can get the same ‘feature’ if you use chrome dev tools… (and it’s better because it will record your history of changes both to the CSS and scripts).
  • Transforms sandbox

Browsers Compatibility

JS Framework

  • yepnope – It is an asynchronous conditional resource loader that’s super-fast, and allows you to load only the scripts that your users need.
  • MVC (yep in JS) – Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.

and let’s not forget the new API discovery tool that Google release today. It’s a good starting point to any project these days.

Have fun and I hope to have lots of new notes/posts during the up coming week.

Standard