Just Because It's Ridiculous Doesn't Mean It's Stoopid

YOW! Melbourne 2011 and that Crankshaft Presentation

Greetings from Melbourne! This week, I attended YOW! 2011, a conference for Australian developers featuring talks on web development, infrastructure and coding practices.

According to the YOW! conference organizers, approximately 500 people registered for this event. This wasn’t a surprise to me; Melbourne has a fantastic developer community and has always supported events such as these. Mitch Denny and I were witness to this when we co-founded the Melbourne .NET User Group back-in-the-day.

Opening remarks at YOW! 2011 in Melbourne

On day 1, I attended a number of excellent presentations. However, there was one presentation in-particular that was simply awesome. It was a presentation by Kasper Lund from Google talking about Crankshaft, the compilation infrastructure of V8 (Chrome’s JavaScript engine). FWIW, Kasper’s also a member of the Dart team.

Kasper Lund (Google) at YOW! 2011 in Melbourne

In his presentation, Kasper went into great detail about how Crankshaft optimizes JavaScript. It’s amazing to hear some of the things that Crankshaft does to tease out every possible drop of performance possible from JavaScript. Much of it involves runtime inspection of the code as it’s running and optimizing when it’s appropriate to do so. The big take-away for me was realizing that JIT compilers have a tough job; they have to walk a fine line between making JavaScript run super-fast without bogging down the environment.

After Kasper’s presentation, it felt like my brain had been through the spin cycle of a washing machine. This is a good thing. Many presentations today are way too shallow. I always prefer to “go deep” on something, struggle along the way, and then reformulate afterward.

Anyway, I found a video up on Vimeo of a talk Kasper gave about the V8 engine:

It’s worth a look in order to gain a better understanding how Google Chrome optimizes JavaScript.

An Introduction to HTML5 Canvas

A few months ago, I delivered a presentation at Make Web Not War entitled, “An Intro to HTML5 Canvas”. The purpose of this presentation was to provide folks with a primer on this new element, which allows web developers to draw directly to the 2D context that it provides.

Here’s the video recording of my presentation:

Intro to HTML5 Canvas from Make Web Not War on Vimeo.

Here are the slides:

An Introduction to HTML5 Canvas

View more presentations from John Bristowe

IE10 Platform Preview 2 Now Available

Earlier today, we unveiled IE10 Platform Preview 2, which you can download from the IE Test Drive site.

IE10 PP2 has got a boat-load of web developer goodness and I wanted to this this opportunity to go through some of the “what’s new” and give you my thoughts and opinions on its capabilities.

Please note that IE10 PP2 is not a fully-featured browser; it’s just the rendering engine to give web developers, designers, and enthusiasts an advanced look at what’s to come. It’s not intended to be your default browser so please keep that in mind when downloading and installing the latest bits. 

So, what’s new in IE10 PP2? Well, here’s the high-level rundown:

Cascading Style Sheets (CSS) Positioned floats CSS3 gradients (on all image types) CSS style sheet limit lifted Document Object Model (DOM) support Improved hit testing APIs Floating point values in CSS Object Model (CSSOM) Media Query Listeners

HTML5 support Asynchronous script execution HTML5 Drag-and-Drop (DnD) File Reader API HTML5 Form and Input Validation HTML5 Sandbox Web Workers Web performance APIs requestAnimationFrame Page Visibility API setImmediate

Obviously, as a web developer, there’s a lot to like in this release. However, there are a number of new capabilities in IE10 PP2 that warrant considerable attention. Specifically, support for (1) HTML5 aspects like drag-and-drop, File Reader API, forms, and Web Workers and (2) web performance APIs like requestAnimationFrame and Page Visibility API. Both are important because they enable web developers to target a rich set of functionality to target a specific set of application scenarios and requirements.

New HTML5 Support in IE10 PP2

I was pleasantly surprised when I first reviewed the list of HTML5 capabilities supported in IE10 PP2. A big-time Internet high five to the IE team. Here’s some of the highlights:

Asynchronous Script Execution

The async attribute for the script element allows the associated script to load and execute asynchronously with respect to the rest of the page. That is, the script will load and execute in the background while the page continues to be parsed. For pages using processing-intensive scripts, the async attribute can significantly increase page-load performance.

This is a huge win for web developers with pages that use some gnarly scripts. And, let’s face it: sometimes, these situations are not avoidable. Very happy to see this added to IE10 PP2.

HTML5 Drag-and-Drop (DnD)

 Drag-and-drop (DnD) is something that users have come to take for granted as “just working.” Internet Explorer 9 and earlier versions of Internet Explorer supports the dataTransfer object and events to drag images, links, and text. Internet Explorer Platform Preview adds the draggable attribute to any element, and drag-and-drop support for one or more files from the desktop to a webpage.

Of course, drag-and-drop is something that’s achievable through frameworks like Dojo, jQuery and others. However, having it baked into the HTML5 specification and supported is really nice. IE10 PP2 adds support for this and offers an interactivity model that – when combined with other capabilities like File API – allows web applications to behave more like native applications.

Here’s a quick video that the IE team recorded for Channel 9 that demonstrates this capability:

File Reader API

As I indicated earlier, many of the capabilities of HTML5 enable developers to build web applications to behave more like native applications. File API certainly falls within that classification as well.

Internet Explorer Platform Preview introduces support for File API. File API is a W3C draft web specification for representing file objects in web applications, as well as programmatically selecting them and accessing their data. The File API is currently being standardized by the W3C Web Applications Working Group. By using File API, web developers can access local files on the client machine in a secure way without the need of extensions or plugins.

The ability for web developers to work with local files is tremendously powerful, particularly when combined with other capabilities like drag-and-drop and XMLHttpRequest. Collectively, they form the basis of applications that can run entirely in the browser. Incidentally, File API also eliminates the need for plug-ins or extensions that facilitate (multiple) file uploads or the post-submit inspect/manipulation of form data.

HTML5 Form and Input Validation

Internet Explorer Platform Preview adds support for new HTML5 input types and attributes. This support enables developers to quickly and easily provide user prompting and input validation with a minimal amount of script. Before the HTML5 input types and attributes were available, checking that a phone number doesn’t contain alpha characters, or verifying that a properly formed email address has been entered required that the developer write extra logic for validation. Support for HTML5 client-side form and input validation allows the developer to concentrate on other tasks instead of building validation functions.

HTML5 form and input validation is nice. And, in the similar respect to drag-and-drop, it’s something that’s possible to support through various frameworks. However, having it supported within the browser gives us a win around dependencies and (indirectly) overall performance. It reduces – or in some cases – eliminates the need for these frameworks that perform client-side validation and styling, which, in turn, can improve overall performance by eliminating the round-trip to the server that’s necessary to pull these resources down. Validation is another important aspect that’s worth mentioning:

Tooltips like these ones are integrated as part of the overall experience through HTML5 form and input validation and offer up a level of consistency across the sites that utilize them. They can also be used to help validate entries:

Again, very nice and a super-useful capability for web developers building HTML5 applications and sites.

HTML5 Sandbox

Internet Explorer Platform Preview supports the sandbox attribute, which enables security restrictions for iframe elements that contain untrusted content. These restrictions enhance security by preventing untrusted content from performing actions that can lead to potentially malicious behavior.

More goodness. Now, I will admit that it’s an extremely rare occurrence for me to use iframes. However, I like that this attribute provides an extra layer of protection from potential attack vectors like script injection.

Web Workers

Internet Explorer Platform Preview introduces support for Web Workers. The Web Workers API defines a way to run scripts in the background.

Web Workers are da bomb. Essentially, they establish threading within the scripting context of the browser. That is, the ability to execute processing-intensive scripts in the background. One of the immediate benefits of Web Workers is to offload these computations so that, for example, the user interface may continue to respond to user-generated events like mouse clicks.

Traditionally, browsers have been single-threaded, forcing all the script in your application to run together in a single UI thread. Although you can create the illusion of several things happening at once by using DOM events and the setTimeout API, it takes only one computationally intensive task to bring the user experience to a screeching halt.

The Web Worker API provides a way for web application authors to spawn background scripts that run in parallel with the main page. You can spawn several threads at a time to use for long-running tasks. A new Worker object requires a .js file, which is included via an asynchronous request to the server.

Here’s an example of Web Workers at-work in IE10 PP2:

Whew! Lots of awesomeness! And that doesn’t even cover everything! Just the new HTML5 goodness. Why not download it yourself and check it out?

Make Awesome Web: 200 Awesome Resources and Counting

About six months ago, fellow Microsoft Developer Evangelist, Michael Kordahi (@delic8genius) launched Make Awesome Web, a link-blog dedicated to client-side web awesome-ness:

Hours after its launch, I asked Michael if I could help out. Reason being, over the past number of years, I’ve used a number of tools and found a lot of awesome examples. The problem? I didn’t have a great place to share them with others. Enter Make Awesome Web.

Since its inception just six months ago, we’ve posted 200 awesome resources (including examples and sites) that should help and inspire you to build great web experiences. The response from the web developer community has been pretty incredible. For example, the site experienced over 16,000 views in the month of June alone. Going forward, the plan is to continue posting examples, sites and tools that champion web developer awesomeness. If there’s a resource that’s missing, please let me know! Also, don’t forget to subscribe to the RSS feed if you prefer getting these posts through a reader.

Awesome Canadian HTML5 Coat of Arms is Awesome

CC Attribution: HTML5 Logo by W3C

Downloads

• PNG download (732px x 594px, 134KB)
• SVG download (371KB)

jsConsole Remote Debugging in IE9 on Windows Phone Mango

Debugging mobile web apps can be challenging for a couple of main reasons: (1) the screen size makes it difficult to integrate rich developer tools without killing the interface and (2) the tools are somewhat lacking. Recent developments with WebKit (for example) makes this a little easier. However, for the most part, it’s still challenging, especially when you’re trying to test on devices or through emulators. That’s why utilities like jsConsole exist. For those of you who haven’t heard about jsConsole or the man behind the tool – Remy Sharp (@rem) – then I suggest you check out the following video of him demonstrating this utility:

As with all tools/utilities, a word of warning from Remy:

Note that this technique is also injecting code directly in to your web app - this tool should only be used for debugging. I can’t take respibility for how you use this tool, basically: take care!

I tried jsConsole out earlier today with IE9 in the emulator for Windows Phone Mango and I’m happy to report that (1) it works and (2) it works quite well!

For what it’s worth, when things work this easily, my reaction can be best summed up by the following photo:

By the way, you can grab the (free) developer tools for Windows Phone Mango – which includes the emulator – from create.msdn.com. Ideally, this should be your homepage but if it’s not, bookmark it. And, if you targeting a mobile web browser and you’re looking to do a little debugging, check out jsConsole. Awesome stuff.

HTML5 Summer DevFest in Vancouver on June 21st!

Registration is now open! http://html5summerdevfest.eventbrite.com/ (Tickets are limited)

Come celebrate the Summer Solstice by joining us for a little something we like to call HTML5 Summer DevFest, a one-day event on Tuesday, June 21st, 2011, at The Waldorf Hotel. This event is designed to showcase what you can do today, as well as to highlight some of the evolving standards and technologies that surround the greater HTML5-o-sphere. It's also designed to be a lot of fun spent on a Tuesday kicking off summer in Vancouver. We'll have a full day of speakers, plus a secondary room for hacking, developing, and lightning talks. Take the day off, learn/do some HTML5, and come devfest with us!

Follow us on Twitter at @html5vancouver for updates, also on Lanyrd at http://lanyrd.com/2011/html5-summer-devfest/.

13-Minute Overview of IE9 Pinned Sites for Developers

Earlier this week, I recorded a short screencast on pinned sites, a feature that was first introduced in Internet Explorer 9. In this video, I provide a general overview of what they are and how they work. I also highlight a recently-released site called Build My Pinned Site. Its purpose is to provide a short circuit on supporting pinned sites for your new/existing sites. Through seven easy steps, you can enable an awesome experience for your site’s visitors.

Fun with Arcs and Canvas in HTML5

Earlier today, I spent a few minutes playing around with the 2D drawing context for the HTML5 canvas element and came up with the following simple example:

This example (above) shows how to animate a series of arcs (i.e. circles) over time on the HTML5 canvas. The blending of arcs that occurs is accomplished by applying a decreasing alpha value to each arc for each pass the drawing code executes over time. Alternatively, these arcs are removed if they hit the top of the context boundary.