We’ve been using Chrome 16 since December 13, 2011. That’s almost two months — positively ancient for Google’s rapidly-updating browser! Like most releases, Chrome 17 provides a number of tweaks. There are fewer major new features than Firefox 10 but some would argue Chrome requires less polishing.

Let’s look at what Chrome 17 has to offer…

Omnibox Pre-loading

Type a search term into Chrome’s address bar (sorry Google — I still think “Omnibox” is a stupid name) and you’ll notice various suggestions and possible sites. If Chrome’s confident it’s read your mind correctly, it’ll start pre-loading your chosen page. Popular places such Facebook will then appear almost instantaneously although I had less success with other sites.

User opinion will be mixed. It makes Chrome seem faster but it’ll sap your bandwidth and could make sites slower by hitting them with unnecessary pre-load requests. I suspect Google has judged it about right — Chrome only pre-loads when it’s absolutely certain of your intentions. However, you can switch it off by unchecking “Predict network actions to improve page load performance” in Options > Under the Hood.

Malicious File Alerts

Chrome will now alert you when a download appears to be malware or some other nasty file. It’s important to note that Chrome doesn’t actually scan the file; it verifies the originating server against blacklists and looks for suspicious activity.

Override the User Agent

It’s now possible to set a different browser user agent without an add-on. Open the webkit inspector, click the settings cog and check “Override User Agent”. It offers various flavors of IE, Firefox, iPhone, iPad and Android or you can enter your own browser string.

Add-on Panels

Panels are small windows which pop-out to reveal applications which are running all the time but don’t require their own tab, e.g. music players, chat applications, stock checkers etc. Panels are only available to add-ons and the API has been updated accordingly.

Miscellaneous Updates

There are a number of smaller changes you may — or may not — like:

• Page zooming has been improved; it goes up to 500% and is more consistent with other browsers.
• Print Preview now appears in a modal dialog rather than its own tab.
• The History tab, chrome://history/, has been redesigned. You can filter and remove specific domains.
• A new chrome://profiler/ page provides task profiling and debugging information which could be useful for process-intensive web applications and add-ons.
• HTTP pipelining has been enabled. This permits multiple HTTP requests on a single TCP connection and has been in other browsers for a while.
• There have been a few dozen security fixes and the V8 JavaScript engine has been updated.
• New tab has lost its ‘+’ icon. I’m not convinced that’s a step forward though?

Chrome Arrives on Android

Perhaps the biggest news is Google’s release of Chrome on their Android OS. It’s a beta application available for Android 4.0 smartphones and tablets. Like Firefox mobile, the browser allows you to seamlessly synchronize your settings, bookmarks and open tabs on all devices. For more information, refer to Google’s Introducing Chrome for Android blog post.

Google claims they aren’t interested in dominating the browser market. It makes you wonder how far Chrome could have gone had they made more effort!

Award-winning mobile game Cut the Rope is an immediate favorite for anyone who plays it. It’s as fun as it is adorable. So we had an idea: let’s make this great game available to an even bigger audience by offering it on the web using the power of HTML5.

To do this, Microsoft’s Internet Explorer team partnered with ZeptoLab (the creators of the game) and the specialists at Pixel Lab to bring Cut the Rope to life in a browser. The end result is an authentic translation of the game for the web, showcasing some of the best that HTML5 has to offer: canvas-rendered graphics, browser-based audio and video, CSS3 styling and the personality of WOFF fonts.

You can play the HTML5 version of Cut the Rope at: www.cuttherope.ie.

We think that the HTML5 version makes the web more fun and it demonstrates the advances in standards support made in the latest version of Internet Explorer. With that in mind, we want to share some of the cool “behind the scenes” technical details used on this project to help you build your own HTML5 sites and ultimately get ready for the Windows 8 Store!

Cut the Rope running in IE9 as an HTML5 application, ported from the original iOS source code.

A screenshot of one of the specially designed levels that are uniquely available in this version.

Objective-C to JavaScript

In bringing Cut the Rope to a new platform, we wanted to ensure we preserved the unique physics, motion, and personality of the experience. So early on we decided to approach this game as a “port” from the native iOS version (rather than a rewrite). We kicked off the project with an extensive investigation of the original Objective-C codebase. Turns out it’s a big and complex game. The native iOS version consists of about 15,000 lines of code (excluding libraries)! The most complex parts of the codebase are the physics, animation, and drawing engines. They’re complex on their own, but made even more so by the fact that all three are tightly connected and highly optimized.

It was a daunting task: get this code into a browser while maintaining the unique personality and incredible quality that gamers are accustomed to. To accomplish this, we bet on JavaScript.

In the past, JavaScript had a reputation of being a slow language. Frankly, that reputation was initially valid. Older JavaScript engines were designed for simple “scripting” kinds of tasks (hence the name). Today, however, JavaScript engines have been highly optimized. With features like just-in-time compilation, JavaScript now can execute at near native speeds.

Beyond that, we know that coding for JavaScript is different from – and requires a different kind of mindset than – coding in a compiled language. As we ported the game from Objective-C, we knew we would need to embrace the task of making these sorts of changes and optimizations.

One obvious example was the lack of structs in JavaScript. Structs are lightweight aggregations of related properties. It’s easy to use a JavaScript object to hold a set of properties, but there are important differences between that approach and a proper struct. The first difference is that structs get copied whenever they’re assigned to a variable or passed to a function. So, a function written in a compiled language like Objective-C can modify a struct passed as a parameter without affecting the value in the caller. Even within a function, assignment of a struct to a different variable will copy the values. JavaScript objects, on the other hand, are passed by reference. So when a function modifies an object parameter, the changes will be visible to the caller.

An easy way to mimic the nature of structs is to create copies of JavaScript objects for assignment or parameter passing. In native languages there is typically very little overhead to using structs. Creating an object in JavaScript is much more expensive, so we had to be very careful to minimize the number of allocations. Particularly on assignments, whenever possible we tried to copy individual properties rather than creating entirely new object instances.

Another example is the object oriented nature of the Objective-C codebase. In lieu of traditional object-based inheritance, JavaScript offers prototypical inheritance, inheritance based on the Prototype property. This is a highly simplified form of object inheritance that really isn’t compatible with a traditional object oriented language like Objective-C. Fortunately, there are a variety of class libraries that can help you write object-oriented programming (OOP) style code for JavaScript; we made use of a very simple one that was written by John Ressig (of jQuery fame). (Note that ECMAScript5, the specification for the newest version of JavaScript, also includes some support for classes but we opted not to use it in this port due to our lack of familiarity with that version of the language coupled with our aggressive development schedule).

In addition to porting from Objective-C to JavaScript, we also needed to port our graphics code from OpenGL to the HTML5 Canvas API. Overall, this went really smoothly. Canvas is an amazingly fast rendering surface, especially in a browser where that API is hardware accelerated (like Internet Explorer 9).

An example of drawing the ropes with aliased lines using the canvas API.

Surprisingly, we encountered a few areas where the Canvas provides more functionality than does the version of OpenGL ES that was used by the mobile version of Cut the Rope. One example is drawing anti-alias lines. Drawing anti-aliased lines in OpenGL requires tessellating a line into a triangle strip and fading the opacity of the end caps to complete transparency. The HTML5 canvas automatically handles anti-aliasing for lines drawn with its line API. This meant we actually needed to remove code from the OpenGL version. Unwinding the array of triangle vertices in the OpenGL code also gave us much better performance over trying to natively copy the triangle strip method of drawing lines.

In the end, we have nearly 15,000 lines of code executing in the browser (it’s been minified so if you view the source code in your browser, it will be many lines fewer than that). Anticipating the complexity associated with that much code, Denis Morozov (the Director of Development at ZeptoLab) asked a fair question early on: will HTML5 give us the speed and performance that we need for this game?

To answer that, we created an early “performance” milestone, one where we focused on getting a minimal version of the most intense parts of the game running. Namely, we wanted to see what the ropes looked like and whether we could handle the complex physics engine in the browser.

Performance

Three weeks into the project, we finally had the basics of the physics and drawing engines in place with a simple timer to bootstrap the animation. We could now render a couple of ropes, a star, and an Om Nom sprite into the game scene. Progress! By week four, we had included some basic mouse interaction and with that we could actually play the game! We were testing performance along the way, but we wanted to let the team at ZeptoLab give us their feedback.

When we shared the code with ZeptoLab, they were pleasantly surprised by the performance (particularly the speed and smoothness from the game) that we were seeing in modern browsers. To be honest, we had been holding our breath just a little. We expected JavaScript to be fast but the physics calculations were intense and had to happen in real-time. This is a great example of where common preconceptions about the “slowness” of JavaScript turn out to be wrong. The latest generation of JavaScript engines is incredibly fast.

In this case, we were previewing the game in Internet Explorer 9. When you load the game, Internet Explorer 9’s Chakra JavaScript engine pre-compiles the code on a background thread—just as a compiler would compile a language like Objective-C or C++. It then, in real time, sends the compiled code (byte-code) to the game thread for execution. The result is near-native execution speeds. Amazingly, this is something that you just get for free from the JavaScript engine—we didn’t have to do anything special in the code.

Framerate test results early in the project (note that framerates are capped at 60FPS)

Our bet on JavaScript was paying off, so we turned our attention to hardware and browsers. With Internet Explorer’s hardware-accelerated rendering stack and our experience with Disney Tron and other HTML5 sites, we didn’t have any concerns about its ability to run the game perfectly on our test machines. We were easily hitting our capped goal of 60 FPS (frames per second). We wanted to be sure, however, that the game ran well on other hardware with other browsers. Here’s what we saw after some preliminary testing.

Based on those numbers, we set 30 FPS as our minimum bar. We decided that when the browser goes below that threshold, we would notify the user. They could still play the game, but we’d inform them that it could feel a little bit sluggish. This ensures that we support the huge diversity of hardware and software that’s out there and provide the best experience we can to all of the game’s visitors.

Two things we want to point out. One, the current version of the game works best on desktop PCs and Macs with a mouse. We have not added the support for touch based input yet, but this is something we’re considering for future versions.

Second, the current version of Chrome (version 16) has known issues related to media playback that make sound unpredictable in Cut the Rope. We researched workarounds and have attempted to re-encode the media in multiple formats (including WebM), but haven’t found a format or MIME configuration or anything else that will reliably fix the problem. These appear to be browser bugs and known issues. More importantly, the game continues to be playable and enjoyable in spite of the intermittent audio. In light of that, while we can say Internet Explorer 9 users get a great plug-in free experience, Chrome and some Firefox users could have run into an audio problem but will notice we fall back to a flash plugin to ensure that sound effects and music will work.

Tools

A great thing about HTML5 is that you don’t need to learn a new language to unlock the power of this new technology. If you know and understand JavaScript, you already have access to all that a modern browser can do. You could even create your own game like this!

Code Editor and Development Environment

Visual Web Developer 2010 Express is a free download and a great editor for even experienced web developers.

A screenshot from the profiler that shows the disproportionate amount of time being spent in Calc2PointBezier, a function that’s used to caculate the positions of the rope segments.

There are some great free tools that make working with JavaScript and HTML5 easy. Much of our development was done in Visual Web Developer 2010 (the “express” version is available for free here). This is a really robust web editor with autocompletion for JavaScript and CSS. It’s great that the express version is free! We did most of our testing in Internet Explorer 9 on Windows 7 and from time to time we would also test on Firefox, Chrome, Safari, and in Internet Explorer 10 developer preview. In general, all major browsers have a very consistent implementation of the HTML5 features we used and, in most cases, anything we tested in Internet Explorer 9 “just worked” everywhere else.

Check out our Resource Loader!

Cut the Rope has unique and very detailed visual styling – lots of media in the form of images, sounds and video – which comes at a small cost. The result is that the whole game is much bigger than an average website. Combined, it’s around 6 MB (compared to 200-300K for a typical site). That much media can take a little while to download and we can’t start the game until we know everything is there. A traditional web page is pretty forgiving if you’re missing an image or two but the HTML5 canvas API (drawImage) will fail if the image isn’t available.

To tackle this challenge, we wanted to create a resource loader that downloads all of the content we need for the page and gives us good feedback as things are downloaded. This bit of code does a bunch of smart things:

1. It deals with the peculiarities of how different browsers handle downloads and how they inform you of their progress.

2. It lets you make smart decisions about the order in which things are downloaded (you might want to start big files first, for example, or maybe download all of the menu images before you get the game images).

3. Finally, it gives you smart events as things arrive so that you can show the user progress or even start part of the game when the first group is completed.

Building these types of libraries is tricky to do well. Since we’re really pleased with how this all came together, we wanted to share the code for our resource loader with you. The result is PxLoader, a javascript Resource Loader library that you can user to make preloaders for HTML5 applications, games and sites. It’s open source and free. You can grab it from the top of the page, or just click here.

Performance Tools in Internet Explorer

Another indispensable tool in the development process was the JavaScript Profiler in Internet Explorer 9. Profiling lets you discover hot spots and bottlenecks in your code. At one point in our first performance related milestone, we nearly called it quits when we discovered that on some machines we were stuck at 20 or 30 FPS.

We did some initial code reviews, but nothing was jumping out. We loaded the game with the profiler and immediately saw that we were spending a lot of time inside the satisfyConstraints() function. That function calculates some of the math related to the physics of the ropes. The Objective-C implementation which we had ported was written recursively, passing a new object into each successively deeper call.

With some guidance from Microsoft, we decided to replace the recursive function with an “unpacked” iterative version of the same code. The results were amazing. We saw a 10x improvement in every browser! Frankly, we would have never found that without the profiling tools in Internet Explorer 9.

What’s next?

At BUILD in September, Microsoft showed a developer preview of Windows 8. With this announcement, the HTML5 story got more interesting because Metro style applications can be created using a variety of developer toolsets, including HTML5. This means that web developers can take code that was written for the web and easily and seamlessly port it to Windows 8. The investment in immersive experiences online now can pay off in real profits later with the Windows Store.

In fact, with very little extra work, we were able to port this HTML5 experience to a Windows 8 Metro style app. Read about Cut the Rope and its integration with the Windows Store in this blog post.

We are excited to see what developers can build today with HTML5. You can download Internet Explorer 9 and find other beautiful sites at www.beautyoftheweb.com, or download the Developer Preview of Windows 8 at dev.windows.com.

Computers cannot generate random numbers. A machine which works in ones and zeros is unable to magically invent its own stream of random data. However, computers can implement mathematical algorithms which produce pseudo-random numbers. They look like random numbers. They feel like random distributions. But they’re fake; the same sequence of digits is generated if you run the algorithm twice.

Planting Random Seeds

To increase the apparent randomness, most algorithms can be passed a seed — an initialization number for the random sequence. Passing the same seed twice will still generate the same set of random numbers but you can set the seed based on external input factors. The easiest option is the current time but it can be anything; the last keypress, a mouse movement, the temperature, the number of hours wasted on YouTube, or any other factor.

Random PHP Functions

PHP offers a number of random number functions. The main ones are:

1. rand() and the more efficient mt_rand() function. Both return a random number between zero and getrandmax()/mt_getrandmax(). Alternatively, you can pass minimum and maximum parameters:

   
   // random number between 0 and 10 (inclusive)
   echo mt_rand(0, 10);
   

2. srand($seed) and mt_srand($seed) to set a random number seed. This has been done automatically since PHP 4.2.0.

PHP is Too Random!

There are instances when creating a repeatable list of pseudo-random numbers is useful. It’s often used for security or verification purposes, e.g. encrypting a password before it’s transmitted or generating a hash code for a set of data. Unfortunately, PHP can be a little too random. A generated sequence will depend on your hosting platform and version of PHP. In other words, you can’t guarantee the same ‘random’ sequence will be generated twice on two different machines even if the same seed is used.

Rolling Your Own Random Class

Fortunately, we can write our own random number generator. You’ll find many algorithms on the web, but this is one of the shortest and fastest. First, we initialize our class and a random seed variable:

class Random {
	// random seed
	private static $RSeed = 0;

Next we have a seed() function for setting a new seed value. For the algorithm to work correctly, the seed should always be a positive number greater than zero but not large enough to cause mathematical overflows. The seed function takes any value but converts it to a number between 1 and 9,999,999:

	// set seed
	public static function seed($s = 0) {
		self::$RSeed = abs(intval($s)) % 9999999 + 1;
		self::num();
	}

Finally, we have our num() function for generating a random number between $min and $max. If no seed has been set it’s initialized with PHP’s own random number generator:

	// generate random number
	public static function num($min = 0, $max = 9999999) {
		if (self::$RSeed == 0) self::seed(mt_rand());
		self::$RSeed = (self::$RSeed * 125) % 2796203;
		return self::$RSeed % ($max - $min + 1) + $min;
	}
}

We can now set a seed and output a sequence of numbers:

// set seed
Random::seed(42);
// echo 10 numbers between 1 and 100
for ($i = 0; $i < 10; $i++) {
	echo Random::num(1, 100) . '<br />';
}

If you’ve copied this code exactly, you should see the following values no matter what OS or version of PHP you’re running:

76
86
14
79
73
2
87
43
62
7

Admittedly, repeatable “random” numbers isn’t something you’ll need every day — you’re more likely to require something closer to real randomness and PHP’s functions will serve you better. But there may be occasions when you find this useful.

Back in November, we were able to provide live streaming video for the Microsoft HTML5 Web Camp held in Mountain View, California.

For those who missed the live action – and those who want to revisit some of the sessions – we can now provide recorded video of the event, right here.

There are four videos, covering different sections of the camp.

The first video covers the morning session: Welcome by Joe Shirey; Introduction to HTML5 by Doris Chen, and Introduction to CSS3 by William Leong.

The second video features Doris Chen’s Overview of HTML5 Graphics: Canvas & SVG.

The third video is Adding Video, and Sound with HTML5 and Practical HTML5: Using It Today, both with Doris Chen.

The fourth video covers Doris Chen’s instructions for setting up the Lab and Alice Pang’s demonstration of WebMatrix.

You can also view these videos and download pdfs of slides used in the presentations at http://channel9.msdn.com/Events/HTML5-Web-Camp/HTML5-Web-Camp-Silicon-Valley

Today, HTML5 is kind of like a TV series without any future seasons written yet.

It has some episodes already filmed, some raw material that needs to be edited, some shots that are in line for cool special effects, and many, many rough drafts. Yeah, I’m talking about the whole HTML5 story, not just the spec, but hopefully you get the idea.

I’m going to focus on one interesting scenario that isn’t directly covered by the HTML5 standard, but is in high demand and visually impressive. It’s audio visualization using HTML5 Audio like this:

In my TV series analogy, audio visualization (specifically low-level API to access an audio stream) falls squarely between early drafts and ideas for future series.

What you can do with Audio … and what you can’t

The Audio element in HTML5, as you may already have guessed, doesn’t provide low-level API. It does allow you to manage the audio stream playback on a high level: play and pause, set and get current position on the timeline, know total duration, work with text tracks, and control volume level.

If you try to do anything more complex than playing a single music file with Audio—like synchronizing audio samples—you’ll realize it’s not as easy as you’d like it to be.

There are also limitations around other audio tasks that you might want to implement on your site:

• Support for multiple file formats or codecs like MP3 and H.264
• Browser features for controlling music players
• Browser pre-processing and network testing

As you can see, it depends not only on the spec itself, but also on real implementation in real browsers.

Future standards for audio … maybe

There is an initiative happening to provide the low-level API for audio stream by the Audio Working Group at W3C.

“The audio API will provide methods to read audio samples, write audio data, create sounds, and perform client-side audio processing and synthesis with minimal latency. It will also add programmatic access to the PCM audio stream for low-level manipulation directly in script.”

So, maybe someday in the future, we’ll see a common, standards-based solution for audio stream manipulations.

In the meantime, let’s come back to the real world and dive into what we can do with HTML5 today.

Practical approach: what can I do today?

First of all, what exactly do you need to build a visualization? You need some data that is time-aligned with the audio playback. It could be textual information like lyrics, data representing volume levels, or any other data you want to play with.

Where can you get data? The practical way is preprocessing. Yeah! So simple and trivial …

Basically, you’ll need to do some homework if you want to visualize audio. Analyze your audio stream first, and then you’ll be able to generate a visualization synchronized with the audio playing in the background.

For example, if you want to extract semantically important data (like lyrics for a song), preprocessing is the only possible solution (unless you have enough skilled AI to understand words and sentences in a song).

Usually, it’s a tedious, manual task. You sit down, turn on your audio player, start playing the song, remember a line, pause, write it down, look at the timer, write down current time … and do it again and again. Sometimes, you can just pull it from the Internet somewhere.

The fact is, preprocessing is just plain efficient. Using this approach saves computational resources and consequently reduces the load on the client side. That means that you should compute (or write) your data for audio visualization only once, then just use this data to make your magic happen anytime you want.

Now let’s see how it works in real life…

Dealing with real-world examples

To familiarize yourself with all the great solutions I’ll address in a moment, you can use the developer tools in your favorite browser.  Internet Explorer provides great devtools for this purpose – just press F12.  You can use the Scripts panel to look into JavaScript code, debug it, set breakpoints, or run your own code in the console.

Sometimes you will need to deal with compacted (or minified) code. In that case, just press “Format JavaScript” to make it more readable.

Example #1: Chell in the Rain

Chell in the Rain is a stunning audio-textual visualization of the song Exile Vilify created by Matthew Merkle. You’ll see the lyrics for the song appear in perfect sync with the audio stream.

What’s inside

• jQuery + Sizzle.js (building jQuery)
• jPlayer (a library to play Audio and Video)
• And some code that we’re interested in ;)

How it works

The song is split into a few fragments or timeframes (or timings) pointing to the beginning of a phrase or some animation. All the timings are stored in an array:

var timings = newArray();
timings[0] = 11.5;
timings[1] = 17;
timings[2] = 24;
timings[3] = 29;
timings[4] = 35.5;

In parallel, there is an array of lyrics:

var lyrics = newArray();
lyrics[0] = 'Exile';
lyrics[1] = 'It takes your mind... again';
lyrics[2] = "You've got sucker's luck";
lyrics[3] ='Have you given up?';

Now the current time on the playback can be linked with the timings array and fire a corresponding event trigger to jump for the next phrase:

if(event.jPlayer.status.currentTime >= timings[currentTrigger] && nolyrics != true) {
    fireTrigger(currentTrigger);
    currentTrigger++;
}

Next, the fired trigger makes some animations using jQuery:

function fireTrigger(trigger) {
    switch (trigger) {
        case 0:
            $('#lyrics1 p').addClass('vilify').html(lyrics[0]).fadeIn(1500);
            break;
        case 1:
            $('#lyrics2 p').html(lyrics[1]).fadeIn(1000).delay(5000).fadeOut(1000);
            $('#lyrics1 p').delay(6000).fadeOut(1000);
            break;
        case 2:
            $('#lyrics1 p').fadeIn(1000);
            break;
        case 3:
            $('#lyrics2 p').fadeIn(1000).delay(4000).fadeOut(1000);
            $('#lyrics1 p').delay(5000).fadeOut(1000);
            break;
        case 4:
           $('#lyrics1 p').removeClass('vilify').html(lyrics[2]).fadeIn(1000);
           break;
        case 5:
           $('#lyrics2 p').html(lyrics[3]).fadeIn(1000).delay(3000).fadeOut(1000);
           $('#lyrics1 p').delay(4000).fadeOut(1000);
           break;
...

It is quite simple and very effective.

Notice how easily you can mix audio stream playback and features of HTML, CSS and JavaScript.

Example #2: Extracting audio data

In his blog post Music Visualizer in HTML5 / JS with Source Code, Grant shares his experience with audio visualization using HTML5.

Since HTML5 Audio doesn’t provide any API to extract low-level data from audio files, Grand wrote a small AIR application (with samples) to help us extract the data on volume levels from an MP3 file, then store it in a text file or an image.

Zoomed in, the volume levels data looks like this:

Now, with this image, we can easily extract all the data we need using HTML5 Canvas. And it is much easier for text files—I’m not showing it as it makes no sense to read it yourself as all the data is compressed.

To work with this type of preprocessed data, Grant also wrote a small JS-library (VolumeData.js, part of the .zip I downloaded above).

To visualize something, you need to load the data first:

loadMusic("music.jpg");

The function loadMusic just loads the image:

function loadMusic(dataImageURL) {
    image = new Image();
    image.src = dataImageURL;
    playing = false;
    Ticker.addListener(window);
}

Now you should create a new VolumeData object:

volumeData = new VolumeData(image);

And then on each time update, you can do everything you want using average volume data for current time or separate data for each of the channels (left and right):

var t = audio.currentTime;
var vol = volumeData.getVolume(t);
var avgVol = volumeData.getAverageVolume(t-0.1,t);
var volDelta = volumeData.getVolume(t-0.05);
volDelta.left = vol.left-volDelta.left;
volDelta.right = vol.right-volDelta.right;

All visual effects are done based on this data. For visualization, Grant is using the EaselJS library. Here are some samples: Star Field and Atomic.

Now you have all the tools you need to make cool audio visualizations.

To sum up: Use preprocessing to make your solution more efficient. Try combining audio playback with textual data, animations, and graphic effects based on the volume levels data to make compelling user experiences. Make it look like it’s magic!

Additional resources and more information:

Mike Tompkins Firework

Downloads:

• Grant Skinner’s AIR application(.zip)
• Sizzle.js
• jPlayer Library
• Easel JS Library

Today’s HTML5 applications can provide awesome experiences thanks to the new CSS3 specifications. One of them is CSS3 Animations. It can help you building rich animations on HTML elements. This can provide interesting feedbacks to the users and enables fast & fluid UIs. As those new animations are most of the time hardware accelerated by the GPU, they definitely raise the quality bar of the new generation of HTML5 applications.

According to the “CSS Animation Module Level 3” specification on the W3C site, CSS3 Animations introduces defined animations, which specify the values that CSS properties will take over a given time interval. This specification is an extension to CSS Transitions.

As CSS3 Animation is an extension to CSS3 Transitions, you should first read the article of my colleague David Catuhe on Transitions here: Introduction to CSS3 Transitions.

We’ll see in this article an interesting demo highlighting the potential of CSS3 animations, how to build simple animations & how to handle fallback in JavaScript:

1. CSS3 Animations
2. Browsers Support
3. CSS3 Animations JavaScript fallback library
4. Conclusion

Let’s first start by quickly demonstrating what CSS3 Animations are. Here is a sample animation of a Star Wars AT-AT which uses CSS3 Animations to animate parts of the transport (and which will fall back to JavaScript if your browser doesn’t support CSS3 Animations):

You can test this sample also in a separate window here: http://david.blob.core.windows.net/html5/css3atat/index.htm

Note: this sample has been tested successfully with native animations under IE10 PP3/PP4, Chrome 15, Firefox 8 & iPad 2 and with JS fallback under IE9 desktop & mobile (Windows Phone). For an unknown reason, it behaves in weird way under Opera 11.50 but works fine with the 11.60. Moreover, our lovely blogging platform is most of the time forcing the IE9 rendering engine via a meta tag. To force it back to the IE10 standards mode, press the F12 key and change the value of “Document Mode” back to IE10. Otherwise, view the demo in a separate window.

This sample is based on the awesome work done by Anthony Calzadilla. You can check other incredible demos on his website here: http://www.anthonycalzadilla.com . I’m a huge fan of the I twitty the fool sample using SVG & CSS3 Animation for instance.

CSS3 Animations

Introduction

Let’s first review on what you can play to build the animations. CSS3 Animations works basically on the same values as CSS3 Transition.

Here they are:

• color: interpolated via red, green, blue and alpha components (treating each as a number, see below)
• length: interpolated as real numbers.
• percentage: interpolated as real numbers.
• integer: interpolated via discrete steps (whole numbers). The interpolation happens in real number space and is converted to an integer using floor().
• number: interpolated as real (floating point) numbers.
• transform list: see CSS Transforms specification: http://www.w3.org/TR/css3-2d-transforms/
• rectangle: interpolated via the x, y, width and height components (treating each as a number).
• visibility: interpolated via a discrete step. The interpolation happens in real number space between 0 and 1, where 1 is “visible” and all other values are “hidden”.
• shadow: interpolated via the color, x, y and blur components (treating them as color and numbers where appropriate). In the case where there are lists of shadows, the shorter list is padded at the end with shadows whose color is transparent and all lengths (x, y, blur) are 0.
• gradient: interpolated via the positions and colors of each stop. They must have the same type (radial or linear) and same number of stops in order to be animated.
• paint server (SVG): interpolation is only supported between: gradient to gradient and color to color. They then work as above.
• space-separated list of above: If the lists have the same number of items, each item in the list is interpolated using the rules above. Otherwise, no interpolation.
• a shorthand property: If all the parts of a shorthand can be animated, then interpolation is performed as if each property was individually specified.

And the following properties must be supported for animations:

• background-color (color)
• background-image (only gradients)
• background-position (percentage and length)
• border-bottom-color (color)
• border-bottom-width (length)
• border-color (color)
• border-left-color (color)
• border-left-width (length)
• border-right-color (color)
• border-right-width (length)
• border-spacing (length)
• border-top-color (color)
• border-top-width (length)
• border-width (length)
• bottom (length and percentage)
• color (color)
• crop (rectangle)
• font-size (length and percentage)
• font-weight (number)
• grid-* (various)
• height (length and percentage)
• left (length and percentage)
• letter-spacing (length)
• line-height (number, length and percentage)
• margin-bottom (length)
• margin-left (length)
• margin-right (length)
• margin-top (length)
• max-height (length and percentage)
• max-width (length and percentage)
• min-height (length and percentage)
• min-width (length and percentage)
• opacity (number)
• outline-color (color)
• outline-offset (integer)
• outline-width (length)
• padding-bottom (length)
• padding-left (length)
• padding-right (length)
• padding-top (length)
• right (length and percentage)
• text-indent (length and percentage)
• text-shadow (shadow)
• top (length and percentage)
• vertical-align (keywords, length and percentage)
• visibility (visibility)
• width (length and percentage)
• word-spacing (length and percentage)
• z-index (integer)
• zoom (number)

SVG

The properties of SVG objects are animatable when they are defined as animatable:true in the SVG specification: http://www.w3.org/TR/SVG/struct.html. But at the time where this article is written, I didn’t manage to combine CSS3 Animation directly on SVG elements in any of the latest browsers versions. Today’s samples on the web are then doing a little trick: they are embedding SVG resources into different DIV animated by CSS3 like the I twitty the fool sample.

Declarations

To declare an animation in a CSS file, here is the kind of generic code you’ll need to write:

@keyframes name_of_the_animation {
  from {
    property_to_animate: initial_value;
  }
  50% {
    property_to_animate: intermediate_value;
  }
  to {
    property_to_animate: final_value;
  }
}

Which could also be written like that:

@keyframes name_of_the_animation {
  0% {
    property_to_animate: initial_value;
  }
  50% {
    property_to_animate: intermediate_value;
  }
  100% {
    property_to_animate: final_value;
  }
}

This animation definition declares 3 steps 0, 50 & 100%. You should at least set a from (or 0%) and a to (or 100%) steps to build a correct animation (minimum 2 steps thus). Once done, you may add as many keyframes as you’d like between 0 and 100% to handle precisely the various steps of your animations.

Once the definition is declared, you can affect it to an element using the classical CSS3 selectors and you’ll need also to configure the animation options. Here the kind of generic blocks you’ll see:

#id_of_the_html_element {
    animation-name: name_of_the_animation;
    animation-duration: number_of_seconds s;
    animation-iteration-count: number | infinite;
}

To better understand, let’s review a real sample. First of all, as the CSS3 Animations specification is still in a draft stage, you’ll need to use the appropriate vendor prefix. Let’s use IE10 as a sample with the –ms prefix then. Let’s now see how the head of our AT-AT is moving.

Here’s the animation declaration:

@-ms-keyframes rotate-skull {
    0% {
        -ms-transform: rotate(0deg)
    }
    25% {
        -ms-transform: rotate(15deg)
    }
    50% {
        -ms-transform: rotate(-5deg)
    }
    55% {
        -ms-transform: rotate(0deg)
    }
    75% {
        -ms-transform: rotate(-10deg)
    }
    100% {
        -ms-transform: rotate(0deg)
    }
}

We’ve got 6 steps (0, 25, 50, 55, 75 & 100%) working on the CSS3 2D transform attributes by changing the value of the rotation.

The animation is then applied via this CSS rule:

#skull
{
    -ms-animation-name: rotate-skull;
    -ms-animation-duration: 7s;
    -ms-animation-iteration-count: infinite;
}

We’re targeting the <div> element having the “id=skull” and we’re applying the animation named “rotate-skull” on it. The animation will have to be completed in 7s and be played an infinite number of times.

Here is the living result if your browser supports CSS3 Animations:

We could have written this rule in a shorter manner using the animation shorthand property:

#skull {
    -ms-animation: rotate-skull 7s infinite;
}

The animations will be triggered as soon as a matching rule is applied. You can then play or stop animations simply via JavaScript or via CSS3 to play with the classes affected to a tag.

Non-linear animations

The “animation-timing-function” property can be used if you want non-linear animations. You can even mix the type of timing functions during each keyframe.

Basically, CSS3 animations will use cubic bezier curve to smooth the animation by computing different speed over its duration.

The following functions are supported:

• linear: Constant speed
• cubic-bezier: Speed will be computed according to a cubic bezier curve define by two control points : P0 and P1 (so you will have to define 4 values here : P0x, P0y and P1x, P1y.
• ease: Speed will be computed with cubic-bezier(0.25, 0.1, 0.25, 1)
• ease-in: Speed will be computed with cubic-bezier(0.42, 0, 1, 1)
• ease-inout: Speed will be computed with cubic-bezier(0.42, 0, 0.58, 1)
• ease-out: Speed will be computed with cubic-bezier(0, 0, 0.58, 1)

Here is a simulation tool written by David Catuhe that uses pure JavaScript to show the impact of each timing function:

Note: this tool uses in-line SVG supported by Firefox, Chrome, Opera 11.60 & IE9/10. It won’t work properly under Opera 11.50 & Safari on iPad thus.

This is an awesome tool using SVG. You can even play with your mouse on the custom function to edit the curve. If you’d like to know more about this tool, please again have a look to David’s article.

If your browser supports CSS3 animations, let’s now see a simple demo using easing functions to animate a canvas tag containing an animated sprite with CSS3.

Here is the CSS3 animations code that will be used in this demo:

@-ms-keyframes demo {
    from {
    -ms-animation-timing-function: ease;
    -ms-transform: translateX(0px);
    }
    50% {
    -ms-animation-timing-function: ease-in;
    -ms-transform: translateX(300px);
    }
    to {
    -ms-animation-timing-function: ease-inout;
    -ms-transform: translateX(900px);
    }
}
 
#testCanvas
{
    -ms-animation-delay: 0s;
    -ms-animation-duration: 6s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-name: demo;
}

As well as all the vendor prefixes variations to make sure it works also in Google Chrome & Mozilla Firefox. And here’s the living output:

If your browser doesn’t support CSS3 Animation but support canvas, the sprite’s running animation should be displayed but the character won’t move through the width of the screen.

Note: if you’d like to know more about canvas and sprites animation, you can have a look to this article: HTML5 Gaming: animating sprites in Canvas with EaselJS

Delay

The “animation-delay” property simply allows an animation to begin execution some time after it is applied.

Events

3 events could be raised during an animation. They are named “AnimationStart”, “AnimationEnd” and “AnimationIteration”. Depending on your browser, the correct name will be for instance:

• Chrome: webkitAnimationEnd
• Firefox: mozAnimationEnd
• Internet Explorer: MSAnimationEnd

The event will give you the following details:

• animationName: name of the animation which raised the event
• elapsedTime: the amount of time the animation has been running, in seconds

Here is an usage sample for IE10:

elementToAnimate.addEventListener("MSAnimationEnd", function () {
    alert("the end !");
}, false);

More about CSS3 animations

CSS3 animations are really useful for 2 main reasons:

• Hardware acceleration: CSS3 Animations are most of the time directly handled by the GPU and could produce smoother results. This could then be a very interesting approach for mobile devices.
• Better separation between code and design: I know there is some debates on this point but with David, we think that a developer shouldn’t be aware of animations or anything related to design as much as possible. In the same way the designer/artist must not be aware of JavaScript. CSS3 offers then this possibility and could let the designers work with their classical tools to generate the appropriate animations on elements, between screens, etc.

To highlight this importance in performance, the following HTML5 game I wrote using a full frame <canvas>: HTML5 Platformer run at 60 fps in IE9/IE10 on my PC but at 10 fps max on a iPad 2. This is because its CPU is much more limited and the iPad is currently not hardware-accelerating <canvas>. Using CSS3 Transitions/Animations to animate several smaller <canvas> elements could provide a huge performance boost for this game. Think about it when you’re targeting mobile devices!

Browsers Support

Since the Platform Preview 3 of IE10 available in the Windows Developer Preview, we’re supporting CSS3 Animations. And as you can see on the following report produced by caniuse.com, the CSS3 animations are now supported on a wide range of browsers:

But as the specification is not finished yet (working draft), you must use vendor’s prefixes such as –ms-, –moz-, –webkit-, –o- to make a cross-browsers compatible application.

But the question could be: how to handle browsers that don’t support this new feature?

First option is to just do nothing. Thanks to the beauty of graceful degradation, you could just let the user only see a static image if you’ve worked correctly. This is for instance the case of these 2 original samples of Anthony: I Twitty the Fool! and Pure CSS3 AT-AT Walker . When watched in IE9, it looks like we only have a static image. When watched in IE10, the very same code shows nice animations. IE10 users will then have an enhanced version while IE9 will still be able to view and use properly the website. The more modern your browser is, the more visual bonus you will have.

The second option is to detect the feature via a JS library like Modernizr and try to offer the same animation via a JavaScript library that will mimic the animations. This is what we usually call a fallback mechanism. Unfortunately, I haven’t found today a working & complete JS library that could replace CSS3 animations when not supported by the browser.

I have then written a sample JS library more or less specifically designed for the AT-AT sample.

CSS3 Animations JavaScript fallback library

Animations are nothing more than a series of transitions separated by a certain duration defined via the keyframes. I’ve then reused the concepts built by David Catuhe in his transitions helper library. I let you reviewing his article to check the base of the concepts behind the code.

On my side, I’ve added some support to animate the CSS3 2D Transform rotation & translation values and a way to iterate through the keyframes.

Here is the main part of the library you need to review:

// Animation object
// It need the HTML targeted element, the name of the animation, its duration & iteration count and
// the keyframes contained in an array object
// View the animation simply as a sequence of transitions played a certain number of times
ANIMATIONSHELPER.animation = function (target, name, duration, iterationcount, keyframes) {
    // saving the properties values
    this.name = name;
    this.duration = duration;
    this.iterationcount = iterationcount;
    this.target = target;
 
    var elapsedtime = 0;
    var keyframeduration = 0;
    var elapsedtime = 0;
 
    // Transforming the percentage of each keyframe into duration value
    for (var i = 0; i < keyframes.length; i++) {
        keyframeduration = ((keyframes[i].percentage * duration) / 100) - elapsedtime;
        keyframes[i].duration = keyframeduration;
        elapsedtime += keyframeduration;
    }
 
    this.currentTransition = { isPlaying: false };
    this.keyframes = keyframes;
    this.keyframesCount = keyframes.length;
    this.currentKeyFrameIndex = 0;
 
    // The nextTransition() function return the next transition to run
    // based on the current keyframe to play
    this.nextTransition = function (keyframe, ease, customEaseP1X, customEaseP1Y, customEaseP2X, customEaseP2Y) {
        var properties = [];
        var finalValues = [];
        var transition;
 
        // Compared to the original TRANSITIONSHELPER of David Catuhe
        // We need a specific code to play with the CSS3 2D Transform properties values
        if (keyframe.propertyToAnimate === "transform") {
            for (var i = 0; i < keyframe.transformType.length; i++) {
                properties.push(keyframe.transformType[i].type);
                if (keyframe.transformType[i].type == "rotate") {
                    finalValues.push({ deg: keyframe.transformType[i].value1 });
                }
                else {
                    finalValues.push({ x: keyframe.transformType[i].value1, y: keyframe.transformType[i].value2 });
                }
            }
 
            // Create a new transition
            transition = {
                name: this.name + this.currentKeyFrameIndex,
                target: this.target,
                properties: properties,
                finalValues: finalValues,
                originalValues: ANIMATIONSHELPER.extractValues(target.style[ANIMATIONSHELPER.currentTransformProperty], this.name),
                duration: keyframe.duration,
                startDate: (new Date).getTime(),
                currentDate: (new Date).getTime(),
                ease: ease,
                customEaseP1X: customEaseP1X,
                customEaseP2X: customEaseP2X,
                customEaseP1Y: customEaseP1Y,
                customEaseP2Y: customEaseP2Y,
                isPlaying: true,
                type: "transform"
            };
 
            return transition;
        }
        // If it's a classic property to animate, we're using more or less the TRANSITIONSHELPER as-is
        else {
            return TRANSITIONSHELPER.transition(this.target, keyframe.propertyToAnimate, keyframe.value, keyframe.duration, TRANSITIONSHELPER.easingFunctions.linear);
        }
    };
 
    // each animation object has a tick function
    // that will be called every 17 ms (to target 60 fps)
    // This ticker is monitoring the current state of the transition and
    // create a new transition as soon as the old one is finished/dead
    this.tick = function () {
        if (this.iterationcount > 0) {
            if (!this.currentTransition.isPlaying) {
                this.currentTransition = this.nextTransition(this.keyframes[this.currentKeyFrameIndex], ANIMATIONSHELPER.easingFunctions.linear);
                // We're using our own global ticker only for the 2D transformations
                // Otherwise, we're using the one from the TRANSITIONSHELPER library
                if (this.currentTransition.type === "transform") {
                    ANIMATIONSHELPER.currentTransitions.push(this.currentTransition);
                }
                this.currentKeyFrameIndex++;
 
                // We've reached the last keyframe (100%). We're starting back from the beginning
                if (this.currentKeyFrameIndex >= this.keyframesCount) {
                    this.currentKeyFrameIndex = 0;
                    this.iterationcount--;
                }
            }
        }
    };
};

The first part of the code is iterating through each keyframe to compute the exact duration specified by each percentage. We’re then defining a nextTransition() function that will dynamically build the next transition to play based on the current index into the keyframes collection. At last, we’ve got a tick() function that will monitor the current state of the transition applied. Once the transition is finished or dead, it asks for the next transition, push it to the stack of transitions to be played and moves the indexes.

This tick() function is called thanks to this code:

ANIMATIONSHELPER.launchAnimation = function (animation) {
    // Launching the tick service if required
    if (ANIMATIONSHELPER.tickIntervalID == 0) {
        ANIMATIONSHELPER.tickIntervalID = setInterval(ANIMATIONSHELPER.tick, 17);
    }
 
    // Little closure to launch the tick method on the appropriate animation instance
    setInterval(function () { animation.tick(); }, 17);
};

At last, we have this kind of code that helps us building the keyframes:

// Object to build a new generic keyframe (not working on the CSS3 2D Transform properties thus)
ANIMATIONSHELPER.keyframe = function (percentage, propertyToAnimate, value) {
    this.percentage = percentage;
    this.propertyToAnimate = propertyToAnimate;
    this.value = value;
};
 
//Objects to build specific rotation keyframes
ANIMATIONSHELPER.rotationkeyframe = function (percentage, value) {
    this.percentage = percentage;
    this.propertyToAnimate = "transform";
    this.transformType = [];
    this.transformType.push(new ANIMATIONSHELPER.transformType("rotate", value));
};

To highlight its usage, let’s recreate the previous simple CSS3 Animation skull sample with this library :

// number of times you'd like the animations to be run
var iterationsNumber = 100;
 
var skullElement = document.getElementById("skull");
var keyframes = [];
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(25, 15));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(50, -5));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(55, 0));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(75, -10));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(100, 0));
 
var animation1 = new ANIMATIONSHELPER.animation(skullElement, "rotate-skull", 7000,
                            iterationsNumber, keyframes);
 
ANIMATIONSHELPER.launchAnimation(animation1, ANIMATIONSHELPER.easingFunctions.linear);

And here is the result that will now work in every browser supporting CSS3 2D Transform:

At last, the very first sample demonstrated at the beginning of this article uses Modernizr to check the support for CSS3 Animations. If it’s not the case, it loads the code that will mimic the keyframes defined in the file master.css, moz-master.css & ms-master.css :

// Checking if CSS3 animations is supported
if (!Modernizr.cssanimations) {
// if so, we can use our JS fallback library
    supportElement.innerHTML = "CSS3 Animations <strong>are not supported</strong>";
    LoadJSAnimationsFallback();
}
else {
    // if CSS3 animation is supported, we have nothing to do.
    // The *master.css stylesheets will be automatically applied & used.
    supportElement.innerHTML = "CSS3 Animations <strong>are supported</strong>";
}

The LoadJSAnimationsFallback() function is defined into jsfallback-master.js which simply contains all the keyframes declarations and the 19 animations needed to mimic the behavior created by Anthony in pure CSS3. In this approach, the designer then needs to rewrite all rules using the library. Another approach could be to parse one of the CSS file using an XHR call and to create dynamically the JavaScript calls to the library. This needs more work as you almost need to reimplement the CSS3 animations specifications in JavaScript!

You now have an idea on the way to build a fallback mechanism to support more browsers while starting to use the latest CSS3 specifications.

You can download the files for the main sample here: http://david.blob.core.windows.net/html5/css3atat/CSS3ATATNonMinified.zip

It contains the unminified versions of the animationsHelper.js, transitionsHelper.js, jsfallback-master.js JavaScript files as well as the various CSS3 declinaison files for the main vendors prefixes.

Conclusion

CSS3 Animations is a powerful technology to push HTML5 applications to a new level. It offers interesting scenarios. Designers could use it to create a new generation of UI screens with smooth & fluid animations without the need of developers. As it’s hardware-accelerated most of the time, developers should also pay attention to this specification. At last, both could collaborate. Designers could work on a series of predefined animations covering most scenarios. Developers could then create JavaScript libraries that will implement those animations. This library could offer in a transparent way 2 implementations: a dynamic generation of CSS3 on the fly or a fallback for older browsers.

Going further

• Article about CSS3 Transitions by David Catuhe: Introduction to CSS3 Transitions
• CSS3 Animations specifications: http://www.w3.org/TR/css3-animations/
• IE Test Drive on CSS3 animations: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_animations.htm

Other useful posts:

• Events are relatively limited in the CSS3 Animation spec. Joe Lambert is proposing an interesting solution to trigger events on each keyframe: CSS Animation Keyframe Events (Javascript solution)

I expected last month’s browser statistics to be a little unusual. With a large proportion of the western world on vacation, the ratio of home to business usage rises. Typically, IE usage would drop and the other browsers would rise. You’d expect IE fluctuations to stop following the return to business in January. So let’s look at the latest worldwide StatCounter statistics to see if that happened:

The table shows market share estimates for desktop browsers. The ‘change’ column shows the absolute increase or decrease in market share. The ‘relative’ column indicates the proportional change, i.e. another 12.4% of IE6 users abandoned the browser last month. Party time! There are several caveats so I recommend you read How Browser Market Share is Calculated.

I previously reported that, despite widespread reports, Chrome 15′s victory as the world’s most-used browser version was short-lived. The release of Chrome 16 on December 13 2011 split the user base so IE8 quickly retained its lead.

However, we’re now at the end of Chrome 16′s life. In fact, Chrome 17 is around a week overdue so the vast majority of Chrome users — 25.79% — are using version 16 (I was tempted to refer to it as ‘old’ but it’s hardly past its prime at seven weeks of age!) The next release will split Chrome’s user base again, but IE8 is losing ground too rapidly to keep up. It lost another 1.3% in January after a 1.88% drop the month before. The browser looks likely to dip below 20% during the next few weeks.

Although IE9 had a good month, overall, IE dropped 1.19%. Firefox also lost half a percent. While most of those users switched to Chrome, Safari also received a surprise boost. Did you receive a new Mac or iPad during the holidays? If so, perhaps you’re partially responsible for that half-percent jump.

Chrome is looking unbeatable. It’s monthly 1% rise is holding firm and it’s likely to overtake IE by the middle of the year.

Mobile Browser Usage

The mobile market remained busy during January and usage accounted for 8.49% of all web activity.

The primary mobile browsing applications are:

1. Opera Mini/Mobile — 23.34% (down 0.88%)
2. Android — 21.39% (up 1.17%)
3. iPhone — 19.51% (up 1.10%)
4. Nokia browser — 11.82% (down 1.10%)
5. Blackberry — 6.68% (down 0.85%)

There’s little point reading too much into these figures; there are too many handset harlots switching phones more frequently than their underwear! The only obvious trend is Blackberry’s continuing misfortunes; but you don’t need browser statistics to see that.

Firefox reached double-digit version numbers on January 31, 2012. It’s been a mere six weeks since we received Firefox 9.0 but there are several interesting features in the new version…

Page Inspector

Firefox now has it’s own built-in page inspector. To launch it, select Inspect from the Web Developer menu, point to an element and choose “Inspect” from the right-click context menu, or press Ctrl+Shift+I. The active element will be highlighted and a bar appears at the bottom of the window showing a clickable breadcrumb trail of the DOM hierarchy.

The HTML button shows the element’s location in the page source while Style displays an editable list of applied CSS rules and properties.

Let’s be honest: it’s not Firebug. But it looks good, works well and will be invaluable on those rare occasions when Firebug isn’t available. I was a little concerned the Inspector would clash with Firebug in some way but I’m yet to encounter a problem.

CSS 3D Transforms

Like the webkit browsers, Firefox 10 now supports CSS 3D transforms which allow you to rotate, skew and translate objects in three-dimensional space. You’ll require the -moz prefix but I suspect more developers will experiment with the effects now they’re supported in Firefox, Chrome, Safari and IE10.

Fullscreen API

The fullscreen API is another webkit feature which has been implemented in Firefox 10. You guessed correctly — it allows a page to launch the browser in full-screen mode which makes it ideal for videos, games and other interactive media.

Before hackers and pop-up advertisers become too excited, you should note that the browser places several restrictions on the feature and users cannot be placed in fullscreen mode without their knowledge or consent. The API is not particularly stable; the W3C Fullscreen specification is an early draft and there are minor differences between the webkit and gecko implementations.

Visibility API

The visibility API allows you to check three new document true/false properties:

• visible — your document is the foreground tab of a non-minimized window
• hidden — your document is either a background tab or on a minimized window
• prerender — your document is being pre-rendered and is not visible to the user

It’s simple but allow us to make more efficient and usable web pages. For example, changing tabs could automatically pause a video or slow down Ajax requests.

Dynamic Forward Button

The Forward navigation button now automatically hides itself when there’s no page to forward to! I’ve not heard anyone complain about wasted toolbar space, but it’s a logical interface enhancement since the button’s rarely used.

Better Add-On Compatibility

Probably. Until version 10, Firefox assumed add-ons were incompatible if they were marked as valid for an earlier version. This was rarely the case and you could often force an add-on to install by changing the supported browser number. Mozilla has now reversed the policy; any extension which is compatible with Firefox 4.0 and doesn’t contain compiled code is presumed to be compatible.

Add-on issues have not been stopped completely, but the situation has improved considerably since last year.

Overall, Firefox 10 is a solid release with a good number of features. Say goodbye to version 9.0 and upgrade today … because version 11 will be with us on March 13, 2012.

Knowing the location of your users can help boost the quality of your website and the speed of your service.

In the past, users had to actively input their location and submit it to a site, either by typing it, using a long drop-down list, or clicking a map. Now, with the HTML5 Geolocation API, finding your users (with their permission) is easier than ever.

Figure 1 shows a website using geolocation to determine the location of a user, represented in latitude and longitude. The numbers can easily be translated into something more understandable, such as the street name or city.

Figure 1 Showing a User’s Location with the Help of Geolocation

Imagine how useful your site could be if it provided online timetables for all public transportation in a particular city. Using geolocation, the site could recommend optimal travel routes to get people where they’re going as quickly as possible. Desktop users could get their start location sorted by proximity to their computer. Mobile users trying to get home after a night out could quickly find the closest bus stop within walking distance. These possibilities and more are just an API away.

Scenarios for Using the Geolocation API

Here are 12 simple scenarios that illustrate how a website can accommodate users and customize their experience by taking their location into account. Some of them might seem obvious, but the small things often make the biggest differences.

• Public transportation sites can list nearby bus stops and metro locations.
• Late night out? Taxi or car service websites can find where you are, even if you don’t know.
• Shopping sites can immediately provide estimates for shipping costs.
• Travel agencies can provide better vacation tips for current location and season.
• Content sites can more accurately determine the language and dialect of search queries.
• Real estate sites can present average house prices in a particular area, a handy tool when you’re driving around to check out a neighborhood or visit open houses.
• Movie theater sites can promote films playing nearby.
• Online games can blend reality into the game play by giving users missions to accomplish in the real world.
• News sites can include customized local headlines and weather on their front page.
• Online stores can inform whether products are in stock at local retailers.
• Sports and entertainment ticket sales sites can promote upcoming games and shows nearby.
• Job postings can automatically include potential commute times.

How Geolocation Works

Technically speaking, a PC or a mobile device has several ways to find out its own location (hopefully, in the same place as the user).

• GPS is the most accurate way to determine positioning, but it’s less energy efficient than other options and sometimes requires a lengthy startup time.
• A-GPS (assistive GPS) uses triangulation between mobile phone towers and public masts to determine location. Although not as precise as GPS, A-GPS is sufficient for many scenarios.
• Mobile devices that support Wi-Fi access points can use hotspots to determine the user’s location.
• Stationary computers without wireless devices can obtain rough location information using known IP address ranges.

When it comes to sharing the physical location of users, privacy is a serious concern. According to the Geolocation API, “user agents must not send location information to websites without the express permission of the user.” In other words, a user must always opt in to share location information with a website.

Figure 2 shows a typical message requesting a user’s permission. For more information about ensuring security with the Geolocation API, see Security and privacy considerations.

Figure 2 Sample User Permission Request

Three Simple Functions

Are you ready to incorporate geolocation into your website? You need to learn only three simple functions to master the entire API, which resides within the geolocation object, an attribute of the Navigator object. Learn more about the geolocation object here.

The getCurrentPosition function gets the user location one time. It takes two arguments in the form of callbacks: one for a successful location query and one for a failed location query. The success callback takes a Position object as an argument. It optionally takes a third argument in the form of a PositionOptions object.

navigator.geolocation.getCurrentPosition(locationSuccess, locationFail);
    function locationSuccess(position) {
        latitude = position.coords.latitude;
	longitude = position.coords.longitude;
    }
    function locationFail() {
        alert(‘Oops, could not find you.’);
    }

The Position object contains the properties shown below.

Properties of the Position Object

The watchPosition function keeps polling for user position and returns an associated ID. The device determines the rate of updates and pushes changes in location to the server.

The clearWatch function stops polling for user position. It takes the ID of watchPosition as an argument.

Presenting Location Data: Geodetic or Civic

There are two ways of presenting location data to the user: geodetic and civil. The geodetic way of describing position refers directly to latitude and longitude. The civic representation of location data is a more human readable and understandable format.

Each parameter has both a geodetic representation and a civic representation, as illustrated below.

Examples of Geodetic and Civic Data

When using the Geolocation API, you get the geodetic data back from the functions. Presenting location data in raw numbers is rarely friendly or useful. Online services, such as Bing Maps and Yahoo GeoPlanet can help you translate between the two presentation modes.

Browser Support

Internet Explorer 9+	Firefox 3.5+	Chrome 5+	Opera 10.6+
Safari 5+	iPhone 3+	Android 2+	Windows Phone 7.5+

Browsers that support the HTML5 Geolocation API

Even though geolocation works in all the major browsers, you still have to take into account the scenarios in which location can’t be provided. For example, a user might be running an older browser or have hardware that doesn’t include positioning devices, or simply might not want to automatically share location information. The location detected could even be incorrect. In such situations, you should always include an alternative or a fallback method so users can enter or change their location manually.

Geolocation in Action

Copy and paste the example code below and save it as an HTML file. Open it in your favorite browser and follow the two-step instructions on the website to see the Geolocation API draw a blue circle around your current location.

Using the Geolocation API

<!doctype html>
<html lang="en">
<head>
    <title>Geolocation demo</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>Geolocation demo</h1>
    <p>
        Find out approximately where you are.
    </p>
    <p>
        Step 1: <button onclick="GetMap()">Show map</button>
    </p>
    <p>
        Step 2: When prompted, allow your location to be shared to see Geolocation in action
    </p>
    <div id="mapDiv" style="position: relative; width: 800px; height: 600px;"></div>
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    <script type="text/javascript">
        var map = null;
        function GetMap() {
            /* Replace YOUR_BING_MAPS_KEY with your own credentials.
            Obtain a key by signing up for a developer account at
            http://www.microsoft.com/maps/developers/ */
        var cred = "YOUR_BING_MAPS_KEY";
        // Initialize map
        map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
           { credentials: cred });
        // Check if browser supports geolocation
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(locateSuccess, locateFail);
        }
        else {
            alert('I\'m sorry, but Geolocation is not supported in your current browser.');
        }
    }
    // Successful geolocation
    function locateSuccess(loc) {
        // Set the user's location
        var userLocation = new Microsoft.Maps.Location(loc.coords.latitude, loc.coords.longitude);
        // Zoom in on user's location on map
        map.setView({ center: userLocation, zoom: 17 });
        // Draw circle of area where user is located
        var locationArea = drawCircle(userLocation);
        map.entities.push(locationArea);
    }
    // Unsuccessful geolocation
    function locateFail(geoPositionError) {
        switch (geoPositionError.code) {
            case 0: // UNKNOWN_ERROR
                alert('An unknown error occurred, sorry');
                break;
            case 1: // PERMISSION_DENIED
                alert('Permission to use Geolocation was denied');
                break;
            case 2: // POSITION_UNAVAILABLE
                alert('Couldn\'t find you...');
                break;
            case 3: // TIMEOUT
                alert('The Geolocation request took too long and timed out');
                break;
            default:
        }
    }
    // Draw blue circle on top of user's location
    function drawCircle(loc) {
        var radius = 100;
        var R = 6378137;
        var lat = (loc.latitude * Math.PI) / 180;
        var lon = (loc.longitude * Math.PI) / 180;
        var d = parseFloat(radius) / R;
        var locs = new Array();
        for (x = 0; x <= 360; x++) {
            var p = new Microsoft.Maps.Location();
            brng = x * Math.PI / 180;
            p.latitude = Math.asin(Math.sin(lat) * Math.cos(d) + Math.cos(lat) * Math.sin(d) * Math.cos(brng));
            p.longitude = ((lon + Math.atan2(Math.sin(brng) * Math.sin(d) * Math.cos(lat), Math.cos(d) - Math.sin(lat) * Math.sin(p.latitude))) * 180) / Math.PI;
            p.latitude = (p.latitude * 180) / Math.PI;
            locs.push(p);
        }
        return new Microsoft.Maps.Polygon(locs, { fillColor: new Microsoft.Maps.Color(125, 0, 0, 255), strokeColor: new Microsoft.Maps.Color(0, 0, 0, 255) });
    }
  </script>
</body>
</html>

If you run the code as is, your location will be shown along with a message about invalid credentials, as shown in Figure 3. To get a result without the warning text (Figure 4), you need to replace YOUR_BING_MAPS_KEY with your own key, which is generated when you sign up for a Bing Maps Developer account.

Figure 3 Geolocation Demo Mapping a Location without a Valid Key

Figure 4 Geolocation Demo Mapping a Location after Inserting a Valid Key

To see other examples of geolocation, which map your location using a push pin, visit IE Test Drive or attend an HTML5 Web Camp.

Learn more about geolocation here:

• How to Create a Location Aware Web-Site
• W3C Geolocation API in IE9/10
• W3C Geolocation API Spec

DealFuel is here. The best thing to happen since bearded dragons learnt how to play ant crusher :) And we’re kicking things off with 4 cool tech deals for:

• Web devs who want to profit from their talent
• jQuery wanna-bees and students
• Designers who are keen to work faster
• Website owners who demand peace-of-mind

There’s something for everyone!

We look forward to seeing you on DealFuel, and welcome your feedback and comments (below)

We’ve been busy over at PHPMaster, working to bring you the best articles and tutorials so you can get to know one of the most widely used languages on the Web

Under the Hood of Yii’s Component Architecture, Part 1

This is Part 1 of a 3-part series that shows you some of the inner-workings of the Yii Framework’s component architecture. In this part you’ll learn how Yii’s CComponent class uses PHP’s magic __get() and __set() functions to take advantage of the benefits of getter and setter methods while still allowing access to properties as if they were public variables.

Pagination with CodeIgniter

Pagination is useful when displaying a large dataset which might have hundreds results and provides a much nicer user experience. In this tutorial, you’ll learn how to use CodeIgniter’s pagination library to create a paginated list of results from a MySQL database.

Bending XML to Your Will

Extensible Markup Language (XML) is a big building block of today’s web with hundreds of XML-based languages having been developed, including XHTML, ATOM, and SOAP just to name a few. Knowing how to process XML data is a crucial programming skill today, and thankfully, PHP offers multiple ways to work with it. In this article you’ll learn what XML is and how to use the XML Parser and SimpleXML extensions to parse it.

The Liskov Substitution Principle

The hard fight against mean machines that enjoy enslaving humans and using them like plain batteries will hopefully end up in a resounding triumph… if only Neo adheres to the Liskov Substitution Principle.

Rapid Application Development with CakePHP

CakePHP is a framework that provides a solid MVC base for PHP development, allowing users at all skill levels rapidly develop robust web applications. In this article you’ll learn about two of CakePHP’s most useful features: automatic code generation with Bake, and dynamic scaffolding.

CSS pseudo-classes which change styles in response to user actions have been with us for many years. You’ve almost certainly used :hover, :active and :focus; I can (only just) remember the excitement of changing IE4′s link colors back in 1997.

CSS3 also introduced :target; a powerful pseudo-class which can reduce the need for scripting in interactive widgets. Consider a page URL such as http://mysite.com/page#mytarget; an element with the id “mytarget” can have matching :target styles applied.

:target Browser Support

All modern browsers support :target and you won’t experience problems with IE9 or most versions of Chrome, Firefox, Safari and Opera. Unfortunately, that still leaves us with the older versions of IE. I wouldn’t worry too much about IE6 and 7, but IE8 remains the world’s most used browser version. All is not lost, however, since shims such as selectivizr can add :target support without requiring complex workarounds.

A Simple Document :target

We’ve recently been discussing website contracts. Generic contract small print such as payment schedules, hosting conditions, cancellation terms, support policies, glossaries etc. could be contained in one or more web pages. The document could grow to a considerable length even if you try and keep it concise!

Let’s look at a snippet of the document’s HTML5 in contract.html:

<h1>Website Contract</h1>
<nav>
	<ul>
		<li><a href="#payment">Payment Schedule</a></li>
		<li><a href="#support">Support &amp; Maintenance</a></li>
		<li><a href="#hosting">Hosting Terms</a></li>
		<li><a href="#glossary">Glossary</a></li>
	</ul>
</nav>
<article id="payment">
<h2>Payment Schedule</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
<article id="support">
<h2>Support &amp; Maintenance</h2>
<p>Ut euismod tempor porttitor.</p>
</article>
<article id="hosting">
<h2>Hosting Terms</h2>
<p>Suspendisse ac nisl lorem, ut fermentum erat.</p>
</article>
<article id="glossary">
<h2>Glossary</h2>
<p>Aenean id nibh eget nisl blandit hendrerit lobortis ac tortor.</p>
</article>

We can use the :target attribute to highlight active sections, e.g.

article:target
{
	background-color: #ffc;
	border: 2px solid #fcc;
}

Anyone viewing the contract can click a navigation menu item to highlight the appropriate section. You can also issue direct links to clients who require specific information, e.g. contract.html#support.

The :target selector offers further versatility — it’s possible to create dynamic effects in HTML5 and CSS without using JavaScript. Further SitePoint articles are coming soon…

It all started with Responsive Web Design, an article by Ethan Marcotte on A List Apart. Essentially, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Websites. Instead of responding to today’s needs for a desktop web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen.

Core Concepts

Three key technical features are at the heart of responsive web design:

• Media queries and media query listeners
• A flexible grid-based layout that uses relative sizing
• Flexible images and media, through dynamic resizing or CSS

Truly responsive web design requires all three features to be implemented.

The key point is adapting to the user’s needs and device capabilities. Suppose a mobile user will be viewing your site on a small screen. Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order. Don’t assume the user won’t need access to all the site information because she’s on a mobile device. You might need to change the fonts or interaction areas to respond better to a touch environment. All these factors influence responsive web design.

While mobile devices are changing the display landscape, with the appearance of more and more small screens, don’t forget what’s happening at the other end of the spectrum. Displays are also getting larger and larger. Having to serve both segments shouldn’t stop designers from being innovative on either.

Media Queries

Starting with CSS 2.1, media types were used to apply CSS for both screen and print. You might remember these media types:

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="printfriendly.css" media="print" />

That was it! Luckily, the W3C improved media queries in CSS3, moving them a big step forward.

Today, you can use media queries to scope styles to specific capabilities, applying different styles based on the capabilities that match your query. You can even combine queries that test for several features by using semantic operators such as AND and NOT). Features include width, height, max-width, max-height, device-height, orientation, aspect-ratio, resolution and more.

There are three ways to implement media queries:

1. Use the @import rule to import style rules from other style sheets:
2. @import url(style600min.css) screen and (min-width: 600px);
3. Put media queries directly in the style sheet, as shown below.

#nav
    {
        float: right;
    }
        #nav ul
        {
            list-style: none;
        }
    @media screen and (min-width: 400px) and (orientation: portrait)
        {
            #nav li
            {
                float: right;
                margin: 0 0 0 .5em;
                border:1px solid #000000;
            }
        }
    @media screen and (min-width: 800px)
        {
            #nav
            {
                width: 200px;
            }
                #nav li
                {
                    float: left;
                    margin: 0 0 0 .5em;
                    border: none;
                }
        }

Include a query in a linked style sheet’s media attribute:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 800px)" href="style800.css" />
 
Because of the (cascading) nature of CSS, default styles are defined at the top with the media query matching rules and styles below. Styles defined at the top will be cascaded to the matching styles in the rule, or even completely overwritten.

The following images present an example of a responsive web design approach that uses media queries.

Figure 1 and Figure 2 both show a desktop using Internet Explorer 9 in two different resolutions. Figure 3 shows the same responsive site on a Windows Phone, also with Internet Explorer 9.

Figure 1 Navigation Appears on the Left
 

Figure 2 In an 800×600 Resized Window, Navigation Switches to the Top
 

Figure 3 The Same Site on a Windows Phone
 
If you’re looking for some great examples of responsive web design that take full advantage of media queries, the http://mediaqueri.es/ enthusiast site can be addictive, as Figure 4 shows.

Figure 4 A Collection of Sites That Use Media Queries

Media Query Listeners

Taking media queries a step further, the CSS Object Model (CSSOM) working group at the W3C also created media query listeners, which provide an API for responding to media query changes. Instead of having to poll for changes or load several versions of a resource, you can use the API, for example, to download images only of a particular size when a media query match is triggered.

Today, Firefox and the Internet Explorer 10 Platform Preview implement media query listeners; you can see the demo “CSS3 Media Queries & Media Query Listeners” on the IE Test Drive.

A Word about the Viewport

When testing media queries on mobile browsers, you might notice that the correct media queries are not actually being applied. When this happens, the mobile browser is doing some work on your behalf to render the page optimally on the smaller screen.

So do you think there isn’t a way of getting the real resolution? Actually there is, in the viewport meta tag. The viewport meta tag controls the logical dimensions and scaling of the mobile browser’s (chrome-less) window. Setting the width equal to the device-width works around the problem:

<meta name="viewport" content="width=device-width">
 
Other viewport settings include maximum-zoom and initial-scale.

Flexible Grids

A flexible grid-based layout is one of the cornerstones of responsive design. The term “grid” is used rather freely and doesn’t imply a requirement to implement any of the available grid frameworks. What it means here is using CSS for positioning and for laying out margins and spacing, and for implementing various web layout types in a new way. Layouts and text sizes are typically expressed in pixels. Designers love pixels. Photoshop loves pixels. But a pixel can be one dot on one device and eight dots on another. So how do you approach responsive web design if everything is pixel-based? You might not like the answer: You stop using pixel-based layouts and start using percentages or the em for sizing.

By basing text sizes, widths and margins on percentages or on the em, a unit of measurement based on a font’s point size, you can turn a fixed size into a relative size. This means you’ll need to do a little math to achieve a flexible grid and text size system. But the formula for calculating the em is very simple:

target ÷ context = result
 
Let’s say the normal context for the body font size is 16 pixels. If the designer specifies that the H1 should be 24 pixels, you can calculate the following:

24 ÷ 16 = 1.5
 
This results in the following CSS style:

h1{
    font-size: 1.5em;
}

Always take the context into account. Continuing with the previous example, if you have an element inside the H1 that needs to be 12 pixels, you use the current H1 as the context. The context is now 24 pixels, so the context calculation for “H1 a” is:

12 ÷ 24 = 0.5
 

And the CSS style is:

h1 a{
    font-size: 0.5em;
}

 
You can also use percentages. The calculation algorithm is the same; you just end up with percentages.

Flexible grids use this approach. You can find several frameworks to help you craft your grid, such as Fluid Grid System or Fluid 960 Grid System (a fluid version of 960 Grid System). Moreover, several groups within the W3C have submitted new specs for better flexible grids, with some useful results.

CSS3 Grid Layout

The CSS3 Grid Layout (also known as Grid Alignment or, simply, the Grid), brings a typical grid system to CSS, similar to what XAML or Silverlight developers may be familiar with. At the time of this writing, the spec is an “Editor’s Draft.” It allows for defining regions in a layout, with columns and rows, spanning, spacing, padding, grid templates and more, enforcing full separation of concerns between HTML elements and CSS. Unlike HTML tables that are content, the Grid allows for placing HTML primitives into grid regions separate from actual content.

Combining the CSS3 Grid with media queries creates a powerful solution for building fluid, responsive applications.

How does the Grid work? You start by setting the display block to ‘grid’. (You need to use CSS vendor prefixes because this is not yet a CSS3 recommendation. Right now, only Internet Explorer 10 Platform Preview supports the spec, so you’ll see the CSS vendor prefix -ms- used here.) Let’s look at three examples of how you can set up different views depending on screen size. Media queries are used to apply different grid styles depending on the screen width.

In the first example, the HTML for defining the content consists of one header and three different blocks of text.

<div id="mygrid">
    <header id="myheader">
        <h1>Hello world</h1>
    </header>
    <div id="block1">
        <h2>Lorem Ipsum section 1</h2>
        <p>
            Phasellus venenatis sem vel velit tincidunt tincidunt.
              Curabitur gravida, ante sit amet [... ...]
        </p>
    </div>
    <div id="block2">
        <h2>Lorem Ipsum section 2</h2>
        <p>
        Nam tempus justo eu massa ultrices eget imperdiet ligula placerat.
        Suspendisse [... ...].
        </p>
    </div>
    <div id="block3">
        <h2>Lorem Ipsum section 3</h2>
        <ul>
            <li>Curabitur ultrices tristique purus, sed pellentesque
               magna scelerisque ut.</li>
            <li>[... ...] </li>
        </ul>
    </div>
</div>

You start by laying out the blocks of content under each other so that the content fits smartphones.

@media only screen and (max-width : 480px) {
    #mygrid {
        display: -ms-grid;
        margin: 3px;
        -ms-grid-columns: 100%; /*one column taking full width */
        -ms-grid-rows: 70px auto auto auto; /*4 rows */
    }
    #myheader {
       -ms-grid-row: 1;
       -ms-grid-column: 1;
    }
    #block1 {
        -ms-grid-row: 2; /*place into row 2 / column 1*/
        -ms-grid-column: 1;
    }
    #block2 {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }
    #block3 {
        -ms-grid-row: 4;
        -ms-grid-column: 1;
    }
}

You can add background colors as shown in Figure 5 to make it clearer that you’re working with grid items.

Figure 5 Blocks of Content with Background Colors

In the second example, a media query applies styles defined for screen sizes greater than 481 pixels—anything wider than a typical smartphone. You can use the Grid to define two columns and move the blocks into desired positions, as below. The results are shown in Figure 6.

@media only screen and (min-width : 481px) {
/*make two columns and move block 3 next to 1 — just because we can*/
    #mygrid {
        display: -ms-grid;
        -ms-grid-columns: 10px 1fr 10px 1fr 10px; /*10px columns to spacing in between*/
        -ms-grid-rows: 100px 1fr 1fr; /*100px row and two rows each taking 1 fraction of available space*/
        margin: 5px;
    }
    #myheader {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
        background-color: #EEB215;
    }
    #block1 {
        -ms-grid-row: 2;
        -ms-grid-column: 2;
        background-color: #B2B0B0;
    }
    #block2 {
        -ms-grid-row: 3;
        -ms-grid-column: 2;
        background-color: #726E6E;
    }
    #block3 {
        -ms-grid-row: 2; /*block 3 can go into row 2*/
        -ms-grid-column: 4;
         background-color: #515050;
    }
}

Figure 6 A New Layout with Two Adjacent Columns

The third grid sample displays on screen widths greater than 1220 pixels. You define a grid with a wide header that spans multiple columns and then define three columns, each occupying one fraction of the available space, with a few 10-pixel columns in between. The results are shown in Figure 7.

@media only screen and (min-width: 1220px) {
    #mygrid {
        display: -ms-grid;
        -ms-grid-columns: 1fr 10px 1fr 10px 1fr;
        -ms-grid-rows: 100px 1fr;
        margin: 5px;
    }
    #myheader {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
        background-color: #EEB215;
    }
    #block1 {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
        background-color: #B2B0B0;
    }
    #block2 {
        -ms-grid-row: 2;
        -ms-grid-column: 3;
        background-color: #726E6E;
    }
    #block3 {
        -ms-grid-row: 2;
        -ms-grid-column: 5;
        background-color: #515050;
    }
}

 

Figure 7 Three Side-by-Side Columns with a Spanning Header

The Grid specification is a welcome addition for implementing responsive web designs.

Two other new CSS specifications are also worth mentioning: the Flexible Box Layout Module (Flexbox) and The Multi-column Layout Module. Both show a great deal of promise for designing responsive Websites.

Flexbox, currently a working draft at the W3C, adds support for four new layout modes: block, inline, table, and positioned. It enables you to lay out complex pages with relative position and constant size, even when screen sizes change.

The multi-column layout module is currently a candidate recommendation at the W3C. This solution is for content that you need to lay out in columns and that flow from one column into the next. You can view an interactive example of multi-column layout in this lab.

Flexible Images and Media

The final aspect of responsive web design is flexible images and media. Basically, this feature allows you to adapt your images or other media to load differently depending on the device, either by scaling or by using the CSS overflow property.

Scaling in CSS is pretty simple to implement for both images and video. You can set the media element’s max-width to 100 percent, and the browser will make the image shrink and expand depending on its container. You should supply the image in the best quality and size possible and then let CSS adapt the image to the right size.

img, object {
    max-width: 100%;
}

An alternative to scaling images is cropping them with CSS. For example, applying overflow:hidden allows you to crop images dynamically so that they fit into their containers as the containers resize to fit a new screen environment.

Having several options to scale and crop images in CSS might not be enough. Do you really need to take up all of a visitor’s mobile bandwidth because you don’t have a smaller version of an image? To better serve users, flexible images might mean using an alternative image—or even no image at all. Folks in the web design community are coming up with solutions based on JavaScript and cookies, and you can expect more of this as responsive web design evolves and becomes the basis for many quality Websites.

Legacy Browsers

What about older browsers that don’t support media queries? What about Internet Explorer before version 8, which has issues with scaling images? Solutions in the form of polyfills can help. Here are some useful examples.

• css3-mediaqueries.js by Wouter van der Graaf: code.google.com/p/css3-mediaqueries-js/
• Response.js: github.com/scottjehl/Respond
• Fluid images: unstoppablerobotninja.com/entry/fluid-images/

In Closing

Jumping on the responsive web design wagon isn’t something to take lightly. Take into account what you need to achieve, and consider whether catering to a specific version of a desktop or mobile device makes the most sense.

Responsive web design is in its early stages. Web designers will continue to offer different opinions and recommend directions related to whether to build for mobile first, how to fit these decisions into the design process, whether to slice up the comps into all the different screen sizes, and so forth. And as more and more screen sizes and form factors arrive, the conversation will continue.

HTML and CSS standards are evolving to help web designers deal with these issues. It’s clear that some form of responsive web design will be used to meet the challenges, and it’s equally clear that standards will continue to evolve as better ways of handling the changing world of devices and browsers are discovered.

Here are some additional resources:

• Responsive Web Design
• Responsive Web Design Techniques, Tools and Design Strategies
• Hardboiled CSS3 Media Queries
• Golden Grid System
• A Brief Look at Grid-Based Layouts in Web Design

Here you are, a web developer currently working on several different WordPress sites at varying stages of development. They’re all in different directories on your domain so clients can have a look and see how they’re coming along. Out of nowhere, a major new WordPress version is released, and the Genesis framework you’re using to build all your sites needs to be updated.

Managing all your WordPress installations at a times like this can be a real hassle. This may not be your exact story, but I’m sure many of you can sympathize.

WordPress Network comes to the rescue in situations like this. Once you’ve set it up, you can put multiple sites in directories and subdomains with the click of a button. Since they all share the same WP installation you can update and edit them all in one fell swoop from your Network Admin dashboard.

Before you start, unless this is a brand new WordPress installation with nothing to lose, you’ll probably want to back up your database and files. You also need to disable any active plugins. You can start them back up after the network setup is complete.

Now for the nuts and bolts of creating a new WordPress Network.

First you’ll need to enable Multisite. Use your FTP client or web server’s file browser and download a file called wp-config.php and save it to your desktop or a folder. Open it with your text editor and add this line above where it says "/* That's all, stop editing! Happy blogging. */".

define('WP_ALLOW_MULTISITE', true);

Save the file and upload it back to the server. Since the original wp-config.php is still there, it will ask you which file you want to keep. Choose “replace” or “overwrite” to save the newer, edited version.

You’ll need to refresh your admin panel in your browser to let these changes take effect.

In your Tools menu in the left sidebar, you’ll now see the Network Setup item. Click on that and then go to Create a Network of WordPress Sites. Follow the directions and choose a few options such as the URL structure and network name.

You’ll then be prompted to make a blogs.dir directory in /wp-content and it will provide several more lines of code to add to the wp-config.php file.

It will also tell you to add some rules to .htaccess, a server text file used to work with permissions and configurations for each directory.

Use your FTP program of choice to download this file. You may need to tell your FTP program not to hide this file, which you should be able to specify in the program’s options or preferences.

Even when you have downloaded the file, you may find your operating system’s file manager hides the file from you, so here are some directions for how to show it.

Mac

Open Terminal, found in Applications/Utilities.

Type/paste in this and hit return/enter:

defaults write com.apple.finder AppleShowAllFiles -bool true

Finder must be restarted to allow this to take effect. In Terminal paste in this and hit enter:

killall Finder

When you’re done, if you’d like to hide hidden files again, use the same line as used to hide it, but change “true” at the end to “false” and restart Finder.

Windows

Press the Start menu. Click on Control Panel, Appearance and Personalization, and then Folder Options. Go to the View tab. Under Advanced Settings, select “Show hidden files and folders” and hit “OK“.

Once you have shown hidden files, open .htaccess and add the code given by WordPress Network Setup, save the file and re-upload it.

It is possible that this file has not already been placed on your website. If, after setting your FTP program to display hidden files, you still don’t see the .htaccess file in your website’s root public directory, you’ll need to create a new one.

Create a new file in your text editor, paste in the code given by WordPress Network Setup, save that as .htaccess to your desktop or a folder, and upload it to the server, in the root public directory of your website.

When you log into the Network Admin, you’ll now see a “My Sites” item. Hover over that, and under “Network Admin”, there will be several administration items. When you click on “Sites”, you can add new sites with the click of a button!

Back under the main “My Sites” menu, you can manage all the network sites.

Setup is complete!

Now, with your WordPress network, updating and making changes to all your sites is simple and far less time-consuming.