something in the way

Android 4.0 was announced and the SDK was released. So, I’ve washed my hands, I’ve opened the emulator and I’ve started to dive into the new browser and see what’s in there and what’s not. Unfortunately it’s still Android Browser and not Chrome, but it comes in a better way.

Busy month

October 2011: Busy month for mobile web world.  Just a few days ago, I’ve blogged about Safari on iOS 5; yesterday BlackBerry announced the first mobile browser with WebGL support on the (future) PlayBook platform and a few weeks ago Amazon announced Silk, a new proxy-based browser for tablets.

And now, it’s the Android turn. Android 4.0 was released and while there is no real phone yet to test it on (the Galaxy Nexus will be available soon) I’ve downloaded the emulator and I’ve tested the browser comparing it to Android 2.3 (smartphones) and Android 3.2 (tablet) that I both have on my hands.

Google announced that Google Chrome will be the future of browsing in Android but it was not 4.0 the time for that.

Smartphones meets tablets

This version merges both smartphones and tablets, so smartphones jumps from 2.3 to 4.0 acquiring all the new things on the browser available on 3.x, including:

• SVG
• Motion Sensor API (accelerometer and gyroscope -on compatible devices-)
• 3D Transforms on CSS3
• XHR 2 & CORS
• File API
• HTML Media Capture API for camera/microphone access through file management
• Binary Arrays (Int16Array, Float32Array, etc.)

What’s still missing on Android 4.0

Unfortunately, there are still some missing APIs that are available on Google Chrome and on iOS5 -some of them-, including:

• No Server-sent events (BTW, does anybody use it?)
• No WebSockets
• No WebWorkers
• No IndexedDB
• No Web Notifications (that is a real shame for this platform – Firefox on Android is doing it-)
• No WebGL
• No History Management API
• No rich input controls! I’ve found a huge bug on the range input type (no rendering at all), and no date controls are working. Even it seems that Android 3.x has better support than 4.x (more testing soon)

New stuff

The new stuff for both smartphones and platforms I’ve found:

• Navigation Timing API, same API in IE9 on Windows Phone and in Firefox 7 for Android
• New Console API, but not working properly, for example there is a console.memory.usedJSHeapSize and console.memory.totalJSHeapSize attributes, and some new functions but I could not make them work yet.
• The HTML5 <keygen> new form is available
• Basic MathML seems to work

New things to know

We have a new feature javascript running on CAN:  Flocking.js by Lucas Dupin. Click top right corner button for demo.

Flocking experiment done in canvas. Each particle has it’s own set of attributes and also interacts with the group, depending on environmental variables. The flocking algorithm is based on Craig Reynolds research and is based on 3 simple rules: Separation Cohesion Attraction Uses toxiclibs for vector math and all code is commented at: http://lucasdup.in/js/bg.js The idea is a bunch of individuals which try to stay together when they feel far from a ‘safe point’ (the mouse). After finding the safe spot, they spread. This is a common behaviour that can be observed in fish and birds.

Many thanks Lucas!

http://lucasdup.in

If you’d like to submit your own, see this page for more info.

With the new IE10 engine included in the Windows Developer Preview, developers can work with more HTML5 technologies to build touch-friendly and beautiful interactive Web applications.

This video shows some of the touch-friendly HTML5 technologies in the third IE10 Platform Preview, included with the Windows Developer Preview.

Windows 8 includes one HTML5 browsing engine that powers two browsing experiences: the new Metro style browser and IE10 on the desktop. The common HTML5 engine provides strong support for Web standards and a consistently fast, safe, and powerful Web programming model for both browser experiences as well as for Metro style applications. You can read more about the new Metro style browsing experience on the Building Windows 8 blog.

With this update, IE10 includes support for touch-friendly sites to use many new technologies:

• Rich Visual Effects: CSS Text Shadow, CSS 3D Transforms, CSS3 Transitions and Animations, CSS3 Gradient, SVG Filter Effects
• Sophisticated Page Layouts: CSS3 for publication quality page layouts and application UI (CSS3 grid, flexbox, multi-column, positioned floats, regions, and hyphenation), HTML5 Forms, input controls, and validation
• Enhanced Web Programming Model: Better offline applications through local storage with IndexedDB and the HTML5 Application Cache; Web Sockets, HTML5 History, Async scripts, HTML5 File APIs, HTML5 Drag-drop, HTML5 Sandboxing, Web workers, ES5 Strict mode support.

We’ve also updated the IE Test Drive site to be touch-friendly as well, and added some fun multi-touchable demos like Particle Acceleration, Lasso Birds, and Touch Effects:

IE10 also includes support for AutoCorrect in addition to spell checking, so people can expect common typos (like ‘teh' in English) less often as they type in Web pages.

Looking Ahead: Consumer ready, together

IE10 continues IE9’s precedent of enabling Web applications to do more in the browser without plug-ins. Many sites already run plug-in free for other devices and browsers; we recommend that developers look closely at using native browser patterns when their code detects that plug-ins are not available. This will enable more people to successfully experience these sites.

Similarly, we recommend that developers update their sites’ older, out of date libraries (like this one) that don’t work well with new browsers like IE10.

We also continue to recommend that developers use feature detection (rather than browser detection) to accommodate the differences between browsers that are changing all the time:

The quality and correctness of different browsers’ HTML5 engines continue to vary widely. As different browsers support the same markup to produce the same results, we can all realize the promise of HTML5. To fulfill the goal of interoperability and same markup, we continue to contribute to the test suites under development at standards bodies. With this update to IE10, we have posted over 312 new tests to the IE Test Center and submitted them to the standards bodies.

You can find a full list of new functionality available to developers in the IE10 developer guide here. Download the Windows 8 developer preview to try this update to IE10. We look forward to continued engagement with the developer community and your feedback on Connect.

―Dean Hachamovitch, Corporate Vice President, Internet Explorer

ps – many sites offer plug-in free versions, for example YouTube requires you to opt-in for HTML5 here: http://www.youtube.com/html5

[ editor note: updated to fix typo, "figures" replaced with "positioned floats" ]

There are an infinite number of ways to start coding a fresh website, but the HTML5 Boilerplate is one of the best. It starts you out with all the HTML, CSS, and JavaScript, that you’ll most likely need to start any website. Exactly one year since the initial release, version 2.0 is now available with a ton of great updates!

Head over to http://html5boilerplate.com/ to read release notes and download the latest and greatest version.

Created by Jürg Lehni & Jonathan Puckey, Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves

Paper.js is based on and largely compatible with Scriptographer, a scripting environment for Adobe Illustrator, originally developed by Jürg and Jonathan and with more than 10 years of development.

Feature overview :
- A Scene Graph / Document Object Model for vector graphics: Work with nested layers, groups, paths, compound paths, rasters, symbols etc.
- The handling and drawing of these graphic items is automatic and optimised, allowing you to construct or modify your items and styles and leave the drawing commands to Paper.js.
- A well designed and battle hardened Programming Interface.
- There is a good reason for the word Vector in Vector Graphics. Paper.js offers best of breed Vector Mathematics through its core types such as Point, Sizeand Rectangle.
- PaperScript, a simple extension of JavaScript allows the scoped execution of scripts without polluting the global scope, the execution of multiple scripts per page in their separate sand-boxed scopes while sharing the library code, and the manipulation of Point and Size objects using direct math operations as if they were plain numbers.
- Simple, yet elaborate mouse and keyboard interaction.
- Construct paths and manipulate their curves and segments in very convenient ways.
- Inspect and manipulate the precise bounding box of any item, supporting complicated stroke styles with square ends and miter limits.
- Smoothen curves, simplify path segments by fitting curves through points.
- Simulate dashed strokes which are currently lacking from the Canvas object, at near native drawing speed.

For more information see paperjs.org

Related Posts:

• Textify.it [WebApp, Javascript, iPad, iPhone]
• Hypertext Remix [Scripts]
• Rot.Sketch [WebApp]
• Conductor [WebApp]
• Towards and Beyond [WebApp]
• FlyBaby [Scripts, WebApp]

I love PureMVC because of the simple idea behind it. Have Model-Viewer-Controller pattern that can span languages and therefore time, as explained in this article by Clifford Hall. I started using it in the Flex world when it was competing with Cairngorm for that very reason. Cairngorm was Flex specific and PureMVC was language agnostic.

Coming form a mostly strict-typed MVC environment, it was very hard for me to even start thinking about big scale applications in JavaScript and HTML5 which were reserved for widget type implementations for a while.

As a natural progression of the idea behind PureMVC, it started being ported to JavaScript frameworks that emulate classes through an effort of great folks like Frederic Saunier, Justin Wilaby, Tony DeFusco and David Foley. Music to my ears! Heck, there is even an ongoing ‘native’ JavaScript port.

I decided to see if the story holds and lately I have had a great experience with the MooTools implementation of PureMVC. It feels very familiar. File structure is the same, meaning well organized with recognizable command, model and view folders that imitate packages. I use ANT to combine these files in two varieties. One just plain stacked for debugging and the other compressed using YUI Compressor for production.

There is also something magical about working with PureMVC. It feels far more like solving a workflow puzzle than coding by knowing that the same PureMVC based program can be fairly easily ported to another language and in that way have longevity. Kinda leads you to think that programing is most about managing workflows of user experience.

This setup is enough to make me feel comfortable as a programmer about big scale applications developed in JavaScript. Which begs a question: “Why would you want to develop big scale applications in JavaScript?”. Because I want to share the fun.

You can read about the PureMVC developments for JavaScript here.

Previously, WRD had shared HTML5 Boilerplate which was an HTML/CSS/JS template to be used as a starting point when building a HTML5 website.

The same team now presents Mobile Boilerplate which aims to be a base template when creating a mobile web application.

It is not a framework and works well with popular frameworks like jQuery Mobile, Sencha Touch and others.

Rather, Mobile Boilerplate offers a ready-to-use offline caching setup, fast button clicks, a media query polyfill, and many common mobile WebKit optimizations.

The template works with all modern browsers and has fallback support for legacy Blackberry, Symbian and IE Mobile.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Mozilla has announced the launch of the first milestone release for their Web Application project.

The project is the rival for Google's Chrome Web Store and follows a more open philosophy by letting them to work on any device/browser + not pushing any limits for the distribution (can be any store or directly by the developer).

With the stable APIs, developer utilities and documentation provided, web apps are ready to be built using HTML5 + JavaScript.

In order to find out how Web Apps can enable a rich user experience, check out the user interface concepts gallery.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

First off, I would like to thank Microsoft for regrouping, restaffing, and developing Internet Explorer 9. There is much to be thankful for. Very soon, new Windows 7 users will have, by default and without any installation, a browser that supports

• Canvas without JavaScript translation libraries
• SVG without amazing translating-to-Flash hacks, including inline SVG in HTML
• Geolocation without plugins
• Persistent local storage (note: this is already in IE8)
• H.264 video without plugins
• New semantics elements without JavaScript shims
• Rounded corners and other CSS improvements

This is quite remarkable. I’ve been busily updating Dive Into HTML5, changing phrases like “no version of Internet Explorer supports…” to “versions of IE before 9.0 did not support…” I never, ever, ever thought this day would come. Thank you, Microsoft.

So here’s a downer: what if this is it? What if, after years of increasing evangelism and fever-pitch hype and demos and speeches and books and talks and blogs and tweets and logos, Microsoft shifts direction once again, destaffs the IE team, and “deprioritizes” any notion of an IE 10? And all these promising technologies die on the vine, or at most, grow up to smack hard against the glass ceiling of “no version of Internet Explorer supports…”

• Web Forms 2.0 (datepickers, validation, and so forth)
• Web Workers (background JavaScript)
• WebSockets (real-time bidirectional communication)
• AppCache (offline web applications)
• WebGL (3-D canvas)
• WebM (open video)
• IndexedDB (advanced persistent local storage)
• History API (twiddle with the entire URL without reloading)
• Device API (videoconferencing without plugins)
• File API (sandboxed in-browser filesystem)
• Audio data API (dynamically creating music with JavaScript)
• and on and on…

What if this is as good as it gets?