Category: Scripting

Using SVG in CSS with JavaScript detection

With the release of IE9 and Fire­fox 4 all major browsers are going to sup­port using SVG in the img ele­ment or as a CSS back­ground image, which is great news as SVG images are good for high def­i­n­i­tion, scal­able web­sites. I’ve writ­ten a cou­ple of posts recent­ly about using SVG with the background-image prop­er­ty, and how to cope with browsers that don’t sup­port it. The method I came up with works, but is far from ele­gant; for one thing, it does­n’t allow for transparency.

Anoth­er approach we can take to the prob­lem is to use JavaScript to detect SVG sup­port. Alex­is Dev­e­ria wrote a script which detects if your brows­er sup­ports SVG and, if not, replace the images with PNG. It’s a good script, but I won­dered if there was an alternative.

Read the full article

My Name In Print

I hope you’ll for­give a lit­tle self-pro­mo­tion, as I’d just like to play a few quick notes on my own trum­pet. The lat­est issue of Net mag­a­zine is now on sale, and fea­tures a tuto­r­i­al arti­cle, Cre­ate A Dynam­ic Con­tent Pan­el, writ­ten by me.

In the arti­cle I explain how to build a dynam­ic Con­tact area, as we did on our recent redesign of, using the Web Stor­age API and the BBC’s Glow Javascript library.

I’m not sure what the rights sit­u­a­tion is with this arti­cle, but I hope that at some point in the future I’ll be able to post it here on my blog. But in the mean­time, you can buy a copy of Net mag­a­zine in the UK at all good newsagents, as the say­ing goes (I don’t know if it will be in over­seas edi­tions also).

Printed TutorialPrinted TutorialPrinted Tutorial

On the sub­ject of print, I’m also cur­rent­ly writ­ing a book about CSS3 which should be pub­lished lat­er this year. I’ll have more infor­ma­tion on that near­er the time.

Building a better HTML5 video player with Glow

Last year I wrote a post (Build­ing HTML5 video con­trols with JavaScript) intro­duc­ing the HTML5 Media Ele­ments API and demon­strat­ing a sim­ple set of con­trols for play­ing video.

In this (some­what belat­ed) fol­low-up I’m going to explore build­ing a more inter­ac­tive set of con­trols using a JavaScript UI library; I’m going to use Glow, but it could eas­i­ly be adapt­ed to jQuery UI or similar.

Read the full article

Building The Front-end

This sub­ject of this post is the redesign of my employ­er’s web­site,, and is cross-post­ed from the Pre­loaded blog with permission.

At the begin­ning of the redesign project we agreed some design tenets: the new site should be a best-prac­tice show­case and an oppor­tu­ni­ty to learn and use some of the lat­est web tech­nolo­gies; and it should employ exist­ing ser­vices where practical.

Read the full article

Mozilla release Bespin Embedded preview

Mozil­la’s Bespin is a code edi­tor built using web tech­nolo­gies. It’s still in its infan­cy, but shows promise. A new release, Bespin Embed­ded, lets you use the basic edi­tor func­tion­al­i­ty on your own web­sites, using just a cou­ple of lines of Javascript. If you don’t want to down­load it your­self, I’ve got a work­ing demo. The edi­tor does­n’t real­ly do much at the moment, so this is real­ly only a proof of concept.

Using the GeoLocation API

With the rapid growth of the mobile web, loca­tion-aware ser­vices are very much in-demand; the GeoLo­ca­tion API was pro­posed to cater to this need.

Imple­men­ta­tion is spot­ty at the moment; Fire­fox 3.5 sup­ports it, as does Safari for iPhone (although not on the desk­top, AFAICS). But it’s so sim­ple to use, I’ve no doubt it will be adopt­ed rapidly.

Read the full article

Newer | Older


I’ve updat­ed my Speak­ing page to include more con­fer­ences, more videos, and a lit­tle on my speak­ing require­ments and pref­er­ences. I’m plan­ning to cut down on the num­ber of talks I give in 2014 (twelve is too many), but am always open to inter­est­ing offers and oppor­tu­ni­ties, so please get in touch if you’re organ­is­ing an event.

[#] 1 Comment