HTML5 Summer DevFest in Vancouver on June 21st!

HTML5 Summer DevFest

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.

IE9+WP7 Developer Boot Camp in Edmonton!

IE9   WP7 Developer Boot Camp Edmonton

Creative Commons photo by Darren Kirby

Internet Explorer 9 and Windows Phone 7 are two Microsoft technologies that have taken a lot of people by surprise. People expected them to be mere incremental releases rather than what they were: complete re-thinks of their predecessors. IE9 brought serious web standards compliance and hardware acceleration to Internet Explorer, and WP7 was a complete from-the-ground-up reworking of the way we did phones. For many people, IE9 and WP7 are terra incognita – unknown territory – and we’d like to help you navigate it.

Join me and members of the Edmonton developer community on Tuesday, May 17th at the Art Gallery of Alberta - Ledcor Theatre (2 Sir Winston Churchill Sq.) for four awesome sessions on these two awesome technologies. Here’s the breakdown of the event and what we intend to cover:

A Lap Around Internet Explorer 9 and HTML5
A look at IE9’s support for the troika that collectively goes by the name “HTML5”: HTML5, CSS3 and JavaScript. You’ll see how standards compliance and the resulting “same markup” will make life good for both developers and users and how that same markup runs faster on IE9 thanks to the newer, faster JavaScript engine and hardware acceleration.

Enhancing Pinned Sites with Internet Explorer 9
IE9’s “pinned sites” feature makes web apps feel more like desktop apps by letting users add website to the taskbar and start menu and let developers add custom context menus to pinned site icons, provide visual notifications on the task bar with icon overlays and even add custom buttons on the default thumbnail preview. This session will show you how to best use this feature and also cover IE9’s developer tools.

Windows Phone 7 Silverlight Recipes
You’ve read the introductory material and written “Hello World” on the Phone, and you’re now thinking of starting a bigger project. You’re now asking this question: “How do I do X on Windows Phone?”. This session is the answer. You’ll learn all the recipes for building blocks of applications, which you can use, modify and combine in your own Windows Phone 7 apps.

Windows Phone 7 XNA Kickstart
Haven’t you always wanted to write a videogame, but could never get started? This is your chance. This session will show you the basics of XNA, the game development framework for Windows Phone (and the Xbox 360 and Windows too!). You’ll get your feet wet writing 2D videogames, learn some game coding techniques and get you need to start you on your journey as a game developer.

Here’s where and when they’re taking place. Remember, they’re free – you just have to register!

REGISTER TODAY!

MIX11: Bringing the Developer Awesomeness

MIX11

Spring is here and what a better way to kick off this season of renewal by getting up-to-speed on some of the latest tools and technologies! Last month in Las Vegas, we hosted the MIX11 conference; a 72-hour conversation, featuring developers, designers, UX experts and business professionals creating the most innovative and profitable consumer sites on the web. At this event, we made a number of key announcements and I wanted to take this opportunity to highlight them.

Get Your MIX FixBy the way, if you weren’t able to attend MIX11, DO NOT WORRY. All of the sessions were recorded and are now available for you to watch online. Simply visit http://live.visitmix.com/, grab a coffee and enjoy the awesomeness from MIX11 in beautiful HD via Silverlight Streaming!

Alternatively, if you are the type of person who likes to have media assets closer to home, you can follow the steps outlined by Scott Hanselman to download all of the videos from MIX11 via RSS. Go check out his blog post entitled, Mix 11 Videos - Download them all with RSS to find out how to do this.

Just a Few Canadian Highlights at MIX11

As you know, there was a large group of Canadians who went down to Las Vegas for MIX11. Here’s are a few of the highlighted captured by that group:

Now, onto what we announced!

Windows Internet Explorer - Small

As you know, Internet Explorer 9 shipped in March, which – if you haven’t already done so – you can download from beautyoftheweb.ca. Building on that momentum at MIX11, we announced the public availability of IE10 Platform Preview 1. The purpose of this release is to give developers a head’s up on the next wave of progress we’re making in HTML5. IE10 PP1 provides some awesome new capabilities like CSS3 Flexbox layout, grid alignment, multi-column layout and gradients. (Don’t forget to check out the recent blog post I’ve written about CSS3 gradients in IE10.) Also, IE10 PP1 adds support for ECMAScript strict mode! w00t! You can download IE10 PP1 and check out our latest demos featuring these capabilities by visiting ietestdrive.com.

If you’re in Ottawa or Edmonton this month, don’t forget to register and attend the IE9 / WP7 Boot Camp! This is a great way to get up-to-date on these two great products!

ASP.NET

Another big highlight at MIX11 was the ASP.NET MVC 3 Tools Update, which you can install via Web PI or download by going to the download details page. The Tools Update adds a lot of awesomeness to Visual Studio and NuGet, in order to help web developers targeting ASP.NET MVC and NuGet for package management. Note: You can check out the release notes as well for more details. For a higher-level description of what this release might mean to web developers, I encourage you read Phil Haack’s blog post entitled, Introducing ASP.NET MVC 3 Tools Update. Also check out the latest statistics on NuGet by visiting http://stats.nuget.org/. Lots of open source goodness going on!

Of course, this cannot be understated:

Phil Haack with Popped Collar

Of course, I kid because we love Phil Haack.

Microsoft Silverlight - Small

Of course, it wouldn’t be MIX without Silverlight. At MIX11, we announced the public availability of Silverlight 5 Beta, which includes some of the following new features:

  • XAML Debugging with breakpoints for binding debugging
  • Implicit data templates for easy UI reuse
  • Double (and multi) click support
  • GPU-accelerated XNA-compatible 3D and immediate-mode 2D API
  • Low-latency sound effects and WAV support
  • Real operating system windows and multi-display support
  • Significant performance improvements, fixes and much more

There’s a ton of goodness in Silverlight 5 Beta and rather than trying to articulate everything that’s in the Beta release, I’ll simply encourage you to go check out Pete Brown’s blog post entitled, Announcing the Silverlight 5 Beta Release and the Silverlight.net Redesign. Tim Heuer also has an excellent blog post on the Silverlight 5 Beta feature-set entitled, Silverlight 5 Beta–A guide to the new features. Both posts provide a great overview of the Silverlight 5 Beta and I’d recommend you take a moment to check them out!

Windows Phone - Blue - Small

Finally, we announced some great new tools and enhancements for Windows Phone. However, just like the Silverlight 5 Beta, I don’t have enough room here to share with you all of the “what’s new”. The good news is that fellow Canadian and Windows Phone expert, Mark Artegea and gone ahead and summarized everything you need to know in a guest blog post he’s written for the Canadian Developer Connection. Check out his post entitled, MIX11 and Windows Phone Re-Cap for all the news and highlights we announced at MIX11 around Windows Phone.

Whew! That’s a lot of great stuff! I would recommend that you take a few minutes away from watching the Stanley Cup Playoffs (Go Canucks!) and check out these great tools and technologies!

Ultimate CSS Gradient Generator (AKA, CSS3 gradients are hard. Let's go shopping!)

Ultimate CSS Gradient Generator

Recently, I blogged about my experiences with CSS3 gradients in IE10 PP1. In short, they’re not the easiest things to get right, especially in a cross-browser supported manner; translating the differences that exist between them can be a challenge. Well, never fear! Help is here! Earlier today, Alex Sirota (@iosart) updated his Ultimate CSS Gradient Generator to support IE10 gradients! Check it out!

Unfortunately, the tool doesn’t support radial or repeating gradients at this time. However, if you’re looking for help with linear gradients that allow you to support IE10 and other browsers, this is it!

CSS3 Gradients in IE10 PP1

Recently, I’ve been playing around with IE10 PP1, which you can grab from the IE Test Drive site. So far, I really like what I see, especially the support for CSS3 gradients. In fact, if you care to see a sampling of this work, check out the CSS Gradient Background Maker:

So, how does this all work in IE10 PP1? From the IE10 Platform Preview Guide for Developers:

IE10 PP1 supports CSS3 gradients as background-image property values (plus the image value of the background shorthand property), as specified in the Gradients section of the CSS3 Image Values and Replaced Content Module, which, as of this writing, is in the Working Draft stage.

Gradients are images that transition smoothly from one color to another. IE10 PP1 supports linear, circular, and elliptical CSS3 gradients, each of which are specified by a gradient line and two or more stop points. Each point has its own color, and IE10 fills in the area between each set of points with a continuous color transition from one to the other.

Here’s how these rules break down: 

  • Linear gradient: -ms-linear-gradient(<starting point>, <stop color & offset>, <stop color & offset>…);
  • Radial gradient: -ms-radial-gradient(<starting point>, <shape> <size>, <stop color & offset>, <stop color & offset, …>);
  • Repeating linear gradient: -ms-repeating-linear-gradient(<starting point>, <stop color & offset>, <stop color & offset>…);
  • Repeating radial gradient: -ms-repeating-radial-gradient(<starting point>, <shape> <size>, <stop color & offset>, <stop color & offset, …>);

If you check out the section on CSS3 gradients in the IE10 Platform Preview Guide for Developers, there are a few examples that demonstrate how they work.

Currently, as part of a mental exercise, I’m in the process of getting Doug Avery’s (excellent) 39 Ridiculous Things To Do With CSS3 Box Shadows working in IE10 PP1. Although this demo focused largely on box-shadow (supported in IE9+), it also leverages CSS3 gradients, which I why I decided to try and get it supported on IE10 PP1. That, and the fact that’s it pretty cool. So far, I’ve had some success in just a couple of hours of work:

For each of these list items, there’s a CSS3 radial gradient applied. The original source used -webkit-gradient. (As progress is made by the CSS Working Group, it’s my hope that these vendor prefixes will be dropped in favour of a simplified syntax like linear-gradient.) For this work, I’m using -ms-radial-gradient. For the screenshot above, the text for “the SOFT FOCUS” is missing because text-shadow isn’t supported. I’m trying to get “the SLIP” to look a little better. I’ve almost got it looking just right.

For “the LIGHT SOURCE”, the CSS3 gradient is applied dynamically via JavaScript. As you hover over the item, the radial gradient at the top of the item shifts to mimic a light source. The underlying radial gradient at the bottom of the item - representing the item’s shadow - moves in concert. Here’s a close-up of the behaviour in-action on IE10 PP1:

Here, I have my mouse cursor hovering on the left-hand side of the browser window. Notice that the radial gradient at the top and bottom of the list item are shifted to mimic a light source.

These list items are nearly pixel-perfect, except for “the DAZZLER”, which uses a CSS animation. Also, you’ll notice that there’s a border line that’s traced for “the IT’S SO CLOUD”. I’m confident that I’ll be able to figure out why this isn’t working properly soon.

Without animations, it’s difficult to recreate the behaviour I’m looking for in CSS. However, it should be noted that hover event transitions are supported. For example, here’s “the DIMMER SWITCH”:

And, here’s “the ECLIPSE”:

Other items that work include “(the SECRET)” and “the WIPEOUT”. I’m having some difficulty with “the SHY GUY” but it’s mostly due to text alignment.

This page needs some more work but I’m mostly there. Items like “the FOLD” are a little trickier than I first thought.

For the most part, the conversions have been rather simple. For example, add -ms-transition rules with -webkit-transition rules. Or, include border-radius with -webkit-border-radius. That stated, the biggest challenge I’ve faced thus far is mapping -webkit-gradient to -ms-radial-gradient. CSS3 gradients aren’t the easiest things to translate between browser implementations. But, as you can see, many of them work well.

As a side note, I would like to point out the awesome work the Internet Explorer team has done around border-radius. In short, it’s wonderful. The team has nailed the implementation and it looks really good. For example, here’s a zoomed-in screenshot “the VENN” in IE10 PP1 (from above):

Check out the curves that are applied via border-radius. They are “buttery smooth” and look fantastic.

I’m tremendously excited by all the goodness added to IE10 PP1. You should check out it! You can download IE10 PP1 right now from the IE Test Drive site.

Reducing FOUT with FOUT-B-Gone

While I’m a big-time fan of web fonts, I’m not a fan of a side effect I’ve observed in browsers like Firefox and IE. In particular, I’ve noticed that during the loading of a page, there’s a moment where web fonts aren’t applied. This is known as FOUT or “flash of unstyled type”. Coined by Paul Irish back in 2009, FOUT refers to an instance where web fonts appear briefly unstyled prior to apply the @font-face CSS rule. After the web page appears, the viewer sees unstyled fonts morph into styled web fonts. By way of example, here’s what you will see (briefly) on the initial load of pages that leverage web fonts:

You’ll notice here that the title of my blog isn’t applying a web font on the initial load. That’s because there’s a slight delay in particular browsers (i.e. Firefox and IE). It should also be noted that the delay is brief but noticeable. If you’d like to fix this, check out WebINK’s FOUT-B-Gone:

FOUT-B-Gone is a JavaScript library that inventories custom fonts used on a page and selectively hides only DOM elements that would cause FOUT. The end result of applying this to your page is a delayed rendering of text with applied web fonts. However, it is quite reliable and eliminates the artifact you’ll see otherwise. Now, I haven’t decided to apply FOUT-B-Gone to my page because I simply don’t care. However, if you are in the boat that does (or, have clients that do), this is a possible solution for you.

Adding the Awesomesauce Flavor with IE9 Pinned Sites

Last week at MIX11, I delivered a mini-session presentation on pinned sites, covering both the technical and non-technical aspects of this ability in IE9. The purpose of this talk was three-fold: (1) educate folks on what IE9 pinned sites are and how they work; (2) show folks how easy it is to pin sites via meta tags and JavaScript APIs we provide in IE9; and (3) encourage folks to start pinning their sites today. Additionally, I wanted to share some of the data some of our partners have collected around their implementations. As it turns out, many sites are seeing very real benefits to implementing this feature. Overall, these partners are seeing that visitors who use IE9 are coming back to their sites more frequently and for longer periods of time.

Here’s a recording of my mini-session delivered at MIX11:

Here’s the slides from my presentation:

Lots of great reasons to implement IE9 pinned sites. They’re great because they’re easy to implement, they don’t break the web, and they can deliver meaningful returns on your short investiment of time to incorporate them into your existing sites.

HTML5 Pirates Love EaselJS

At MIX11, I attended the HTML5 Canvas Mastery boot camp, featuring fellow Canucks, Lanny McNie (@astrostyle) and Shawn Blais from gskinner.com. These are the folks who built Pirates Love Daisies, a tower defense game built in HTML5.

Pirates Love Daisies

If you haven’t done so already, drop everything and check it out. It’s a great example of what’s possible with HTML5.

As part of the development process for this game, the developers at gskinner.com built a framework called EaselJS, which abstracted the 2D context API of the HTML5 canvas. Why? Well, because – frankly-speaking – the 2D context API can be a bit gnarly, especially for those folks who don’t have a background in game development. While the HTML5 canvas is great for pushing pixels, it’s an immediate-mode drawing API, which means that nothing is retained in-memory; you are responsible for managing and maintaining the drawing surface. And, while that’s great for things like performance (especially for browsers like IE9, which feature hardware-acceleration for things like the HTML5 canvas), it can be pretty challenging for web developers wanting to do this themselves. For these reasons, the folks at gskinner.com built EaselJS.

EaselJS

EaselJS is a JavaScript library that allows you to target the HTML5 canvas element in a rich and meaningful manner. Its audience is developers who are accustomed to work with sprites, graphics primitives, and input event handling (i.e. mouse events). It provides all of the building blocks for HTML5 games in canvas, without resorting to the 2D context API. In fact, a lot of the pitfalls with HTML5 canvas (i.e. pixel positioning) can be easily avoided through this framework.

Here’s the description from the EaselJS page:

The new Canvas element in HTML5 is powerful, but it can be difficult to work with. It has no internal concept of discrete display elements, so you are required to manage updates manually. The Easel Javascript library provides a retained graphics mode for canvas including a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.

So, what’s possible with this framework? Lots. The folks from gskinner.com have posted a number of examples, which you can check out for yourself: game, sparkles, drag & drop, localToGlobal, globalToLocal, sprites, graphics, bar graph. However, one of my recent favourites is The World’s Largest PAC-MAN.

WBP

The World’s Largest PAC-MAN was coordinated through Microsoft Australia and built by the talented folks at Soap Creative in Australia. It features a (virtually) never-ending, crowd-sourced super-maze for you to play one of the best arcade games ever created. It was built using a number of JavaScript libraries like Modernizr and jQuery. However, the bulk of the heavy-lifting was done by EaselJS.

WBP - 2

Again, I think examples like this, built with awesome frameworks like EaselJS, really demonstrate what’s possible with HTML5 today.

For a good primer of EaselJS, check out Mike Chambers’ excellent blog post, Getting Started with the Canvas Element and EaselJS.

Miguel Carrasco (@miguelcarrasco) happened to catch me coming out of the HTML5 Canvas Mastery boot camp and asked what I thought about the session:

If you’re interested in finding out more, go check out EaselJS and start cranking out some games. Even better: Submit an entry to the Dev Unplugged Contest we’re running. There’s a category for games and we want your entries!