nooshu - Matt Hobbs' Web Development Blog

Kneeling on the shoulders of giants

Category: Browsers

Any browser related topics relating to browser performance and bugs.

Nooshu.com now with added HTML5 goodness

So I finally pulled my finger out and took the HTML5 plunge over the past day or so; the Nooshu WordPress theme now has a sprinkling of HTML5. Mmmm I have that warm fuzzy feeling of completeness! In all honesty it’s been an easy way to learn about the new HTML5 specifications (although they aren’t complete and won’t become a W3C recommendation until 2022… no that isn’t a typo!).

HTML5 has added a host of new tags which have much more semantic meaning. So instead of using ‘divs’ to section off areas of your page layout, you can now use:

1
2
3
4
5
6
<!-- Some of the new HTML5 Tags -->
<header></header>
<footer></footer>
<article></article>
<section></section>
<nav></nav>

It’s certainly a welcome addition to the modern web. My favourite part of HTML5 has to be the doctype (other than the canvas element):

1
2
3
4
5
<!-- No more -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- Much better! -->
<!DOCTYPE html>

Look how simple it is! No more copy / paste from a previous project for this doctype.

My main concern when converting the theme to HTML5 was how it would work in IE; as IE8 supports parts of HTML5 but IE6 and IE7 not at all. When IE comes across a tag it doesn’t recognise it just ignores it. Since the tags aren’t recognised you won’t be able to style your lovely new HTML5 template in IE6 & IE7. Lucky you can patch this missing functionality using JavaScript. Remy Sharp has created a script called html5shim, that adds the missing tags to IE. Just add the following code to your header and you will now be able to style your HTML5 tags:

1
2
3
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

The script must be in the header and must fire before the DOM is created. The script simply creates all the new HTML5 elements using the document method ‘createElement’, you don’t even need to attach the created elements to the DOM! Now IE will recognise the tags and you can get on with your page styling. Yay!

Those who use WordPress 3.0 may have noticed that the default Kubric theme is no more and it’s been replaced with a new theme called twenty ten. The theme uses the HTML5 doctype but it doesn’t use any of the new tags. I guess because of the IE issues. Maybe this will be changed in future releases.

The Nooshu theme is still a work in progress, and I’ll modify areas as I learn more about the new HTML5 features. Here are a selection of links that I found incredibly useful while working on the theme:

  • Dive into HTML5: Read through this article and you will be well on your way to learning HTML5. It delves into the history of HTML and progresses forward right up to implementing the new specifications.
  • HTML5 Doctor: Looking for HTML5 related news or need some clarification of a new tag? Look no further than HTML5 Doctor. Lots of articles available for you to read and there’s even the option to ask a question if you don’t find the answers you are looking for.
  • HTML 5 Outliner: So you’ve created your shiny new HTML5 template; why not check it with the outliner to see if it makes sense to a user / search engine.
  • W3C Markup Validator: It’s been a while since I’ve used a validator since I have one built into Firefox, but the W3C validator was very handy for pointing out attributes and tags that are no longer supported in the specifications. It also gives you a quick benchmark to aim at.

If you have any other useful HTML5 tips and links let me know below.

High Resolution Icons for Google Chrome

I’ve been using Google Chrome as my default browser for quite a few months, I still use Firefox for Web Development but for general browsing you really can’t beat the speed of Chrome. One of my favourite Chrome features is the ‘Create application shortcuts…’ function. Creating an application shortcut essentially adds an icon to your desktop, Chrome will then run the web application like it is a free-standing desktop application (you still need to be connected to the internet unless it uses some form of offline storage).

If you are a Gmail user I highly recommend creating an application shortcut to see this function in action. One thing you will notice when you create the shortcut with Gmail is it uses a high resolution icon. If you create a shortcut using a standard website, by default the favicon.ico is used. As the favicon is limited to 16 by 16 resolution it will look very ugly blown up on your desktop.

Various application shortcuts I've created

You can really see the difference between the Gmail icon (left) and the standard favicons.

The image above really illustrates the difference between a 16 x 16 icon and a high resolution version. Now of course you could just change the icon in the Windows properties…. but that’s boring. Why not offer your users a high resolution image along with the standard favicon? It really is very simple:

1
2
<link rel="icon" href="/icon_32x32.png" sizes="32x32" />
<link rel="icon" href="/icon_48x48.png" sizes="48x48" />

Simply place this code in your head tag of your web application and link to the corresponding icons. Now when your user creates an application shortcut they will have a nice high resolution icon on their desktop.

Hi resolution Chrome icon

You can really see the difference when you add a high resolution icon

I’ve added a high resolution icon for my blog administration, now if only F1 live timings would do the same. For those of you who want to add a high resolution icon to your WordPress blog add the following code to your functions.php:

1
2
3
4
5
6
function wp_hi_res_admin_icons() {
    echo '<link rel="icon" href="/wp-content/themes/' . basename(dirname(__FILE__)) . '/images/icon_name_32.png" sizes="32x32" />'."\n";
    echo '<link rel="icon" href="/wp-content/themes/' . basename(dirname(__FILE__)) . '/images/icon_name_48.png" sizes="48x48" />'."\n";
}
add_action('login_head', 'wp_hi_res_admin_icons');
add_action('admin_head', 'wp_hi_res_admin_icons');

This will add the icon code to your administrator login panel and dashboard; or paste the raw HTML into your header.php so all users can see the icons.

Adding Content using CSS3

CSS3 is an exciting new browser technology, it’s implementation is improving with every new browser release. Microsoft is adding a whole host of CSS3 selectors to the their next version of Internet Explorer, version 9. Until IE9 is released and the vast majority of users start using it, (2016 maybe?) it’s a case of having to use CSS3 quite cautiously.

Using the ‘progressive enhancement’ methodology, we build a website that works in all browsers first, then ‘layer on’ the cool features and ‘nice to haves’ after, so users with modern browsers get the full site experience and older browsers still have access to all the content. CSS3 sits in the ‘nice to have’ category for the moment.

While looking through the W3C CSS3 Working Draft I came across a section called ‘Inserting content into an element’. The CSS3 pseudo-elements listed here are used to add content to the page using CSS. Cool! ….wait a second; for years we’ve been separating layout from content, allowing us to easily edit a whole website layout from a single file. The pseudo-elements seem to be going against this mantra! Uh ohh! It’s controversial, but I believe if used responsibly the pseudo-elements shouldn’t cause any major accessibility issues.

::before & ::after
The ::before and ::after pseudo-elements are used to add content before and after the content inside the selected element (surprising huh!):

1
2
3
4
5
6
#element::before {
    content: "Paradox: ";
    }
#element::after {
    content: " Now my head hurts."
    }

View a demo here.

The specifications even allow you to add more content by iterating the pseudo-elements, so ::after::after (or ::after(2)) but this isn’t supported in current browsers I have tested. I’m personally hoping that part of the specification isn’t implemented, as you can have too much of a good thing. You could end up in the nightmare situation of pages completely generated using CSS3 using multiple levels of ::before and ::after.

The CSS3 specification has also outlined the pseudo-element ::outside but it hasn’t been implemented yet in the current version of Firefox I’m using (3.6.3).

Outline will allow you to wrap an element inside another element and then add styling to it. Usually you’d modify the source code by adding extra divs to do this, but it isn’t always possible. Outline would have been very useful over the past couple of years for adding ‘sliding doors’ and rounded corners where needed, without having to clutter up the mark-up with ‘for style’ only tags. Oh well it’s a tool for the future.

I can’t say I’m a big fan of these new pseudo-elements as they seem to be stepping on HTML’s toes. It’s hard to think of a situation where you’d want the CSS to be writing content to the pages since it isn’t accessible to screen readers or search engines, but I’m sure there are some. The only example that springs to mind is when you add a ‘:’ after the label on a form field, you don’t want a screen reader to read out the ‘colon’ so you add it using CSS.

I’d love to hear where other people plan on using ::before and ::after, or where you are using them at the moment.

Audio Visualisation using HTML5 and Canvas

I’ve been interested in audio visualisations for some time, I first encountered them when I started using Sonique as my default audio player many years ago. I then started using the superb Milkdrop and G-Force plug-ins for Winamp, which are both in a league of their own for audio visualisation. So I jumped at the chance to create my own when I saw the Audio Data API on the Mozilla wiki.

The Audio Data API is a draft extension specification that allows developers to read and write raw audio data. As it’s only a draft specification I’ve had to use a custom build of Firefox 3.7 with the extension hacked into it (which you can download from here). The visualisations rely on a custom browser event displayed here:

1
<audio src="audio/Abigail.ogg" id="player" controls="true" onaudiowritten="visualisation.audioWritten(event);"></audio>

The onaudiowritten event fires when audio is played, the raw data is passed to a pre-calculated FFT (Fast Fourier Transform) from which you can start generating your visualisations; it is then written to the audio layer for users to hear.

Canvas visualizations using HTML5 and patched version of Firefox

Here are 6 visualisations I've built, using the modified version of Firefox you can switch between them with live data.

You can view a demo of my visualisations, or for those of you who don’t have the custom version of Firefox installed I’ve created a short video of them in action. Each visualisation lasts approximately 10 seconds before changing. The music is courtesy of a friends band called ‘Good Dangers‘.

I hope the Audio Data API is approved and other browsers implement it, as it’s an exciting use of browser technology and defiantly an area I’ll be keeping an eye on.

Coolclock: HTML5 Clock that is Actually Quite Cool*

*: Unless you’re Internet Explorer, then not so much.

Every so often a designer asks for something a little different, this time it was for an animated clock that sits in the top right corner of a website. Usually that means looking for a Flash based solution, but Canvas is the new Flash… apparently; luckily Coolclock is available to plug the no-flash gap.

Coolclock is a fantastic little script that will generate a canvas based clock from the parameters you pass it via the class attribute (I don’t agree with that, but it works). It’s fully customisable by way of a little JSON data, allowing you to create your own skins. There are quite a few user submitted skins available to use on the Coolclock homepage if you don’t want to create your own.

I needed the clock to be able to change depending on the country that’s chosen from a dropdown list, here’s how I achieved it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//Generate the clock
var generateClock = function(){
    //Create our dropdown, time difference compared to GMT as a value
    var dropHTML = "<select id='localTime'>";
    dropHTML += "<option value='0'>United Kingdom</option>";
    dropHTML += "<option value='+1'>France</option>";
    dropHTML += "<option value='-4'>New York</option>";
    dropHTML += "</select>";
    //Append to the container
    $("#time").append(dropHTML);
   
    //Initial clock appended to the page (local time)
    var clockHTML = '<canvas id="clk1" class="CoolClock:swissRail:27:noSeconds"></canvas>';
    $("#clock").append(clockHTML);
   
    //When the dropdown changes
    $("#localTime").bind("change", function(){
        var value = $(this).val();
        var localClockHTML = '<canvas id="clk1" class="CoolClock:swissRail:27:noSeconds:' + value + '"></canvas>';
        //Empty the old clock, append the new clock
        $("#clock").empty().append(localClockHTML);
        //Fire the coolclock function to generate the new clock
        CoolClock.findAndCreateClocks();
    });
}();

Very simple, the relevant HTML code is generated with JavaScript as to not leave a pointless dropdown on the page when it’s turned off. The key to the solution was calling the CoolClock.findAndCreateClocks() function from the coolclock.js file, without that the clock isn’t recreated when the dropdown is changed.

As mentioned above, the script seems to come unstuck when viewed in Internet Explorer, since IE doesn’t support the canvas tag. You can plug the lack of canvas support using ExplorerCanvas, but even then coolclock is a little quirky. I managed to get the clock working with IE6 & IE7 but IE8 wasn’t having any of it; bit of of shame as it’s a nice solution. Good news is on the horizon though, IE9 will support canvas by default so no nasty JavaScript hacks.

Eventually I decided to add the clock as a type of ‘progressive enhancement’ by wrapping the function in the following:

1
2
3
4
//IE returns false since it uses 'styleFloat'.
if(jQuery.support.cssFloat){
    //IE can't see this code
}

It’s not great, and I hate having to do it but if users want to see a cool clock they will have to upgrade to a modern browser (that’s not IE8).

For those who are interested, here’s a quick demo of the code in action.

Currently on page 1 of 212