The Blog

Semi-regular postings about a range of topics to do with web development and design. Subscribe via RSS or follow me on Twitter to be notified of new posts.

Creating CSS Animations With animation-delay

The CSS animation-delay property is obviously used to delay the commencement of a CSS animation for a specified amount of time. But, like many CSS properties, there’s more than meets the eye… Using animation-delay you can create a variety of complex and beautiful pure CSS animations with ease, by applying it to a set of otherwise identical elements at varying time values.

All of the following examples follow the same basic setup: a number of looping animated elements are created, all of which are identical save for a unique numeric class which allows each element to be selected individually via CSS. Using this, a different animation-delay time can applied to each element, causing each animation to run asynchronously with the others to create various effects. I’ll go into more detail in the examples, below.

continue reading…

Why your website needs to use HTTPS

I recently did something I’ve been meaning to do for a while: I set up my website to use HTTPS. Whilst previously HTTPS was often considered a “nice to have” by web developers working outside of sectors such as banking and retail, we’ve now reached a point where it’s essential for all types of website to use it.

HTTPS is the secure version of the HTTP protocol, used by web browsers and devices to communicate with the servers on which websites are hosted. If you visit a website with an address starting with “http://”, that website is using the standard version of the HTTP protocol. Any interactions you have with that website will be transmitted across the internet as plain text, readable by anyone who might be monitoring the connection.

If you visit a website which has an address beginning with “https://” (or, you can see a padlock symbol in your browser’s address bar) then that site is using HTTPS, the secure version of HTTP. This means that all data sent between the web browser and the server is encrypted. Anyone monitoring your connection would see a random stream of letters and numbers, practically impossible to decode.

But what are the implications of this, and why is it so important that your website uses HTTPS today?

continue reading…

Fun With Local Storage: Multi-Window JavaScript Apps & Canvas Streaming

A short while ago I was invited to participate in µChip3, an arts event curated by Antonio Roberts & Sam Wray which involved chiptune, digital art, hacking, modified hardware and much more. My role was to perform live visuals to accompany performances by some notable chiptune artists, so I set about building a custom browser-based visualiser based on the piece I produced for the BYOB 2013 exhibition.

Visualiser applications need to work across two windows (a control window with which you create and modify visuals, which appear in a display window), so working out how to produce an application able to function reliably in this way was my first concern. I worried it would involve some fiddly work with a local server, but after some research the solution proved straightforward: simply store commands in local storage via the command window, which are then be detected by the display window using the storage event listener.

As well as multi-window web applications, local storage can also be used to keep web apps open in multiple tabs in sync with each other, or even to stream the output of a HTML5 canvas from one window to another. Read on for some demos…

continue reading…

BYOB Birmingham 2013: Art, Projectors & Box2D

On Friday November 29th I found myself exhibiting an artwork at Vivid Projects as part of their Bring Your Own Beamer (BYOB) exhibition. BYOB is a global series of exhibitions which see artists using projectors to display their work, with Birmingham’s event organised by notable local artists Antonio Roberts and Pete Ashton.

The night was a great success, with a diverse range of pieces being exhibited by more than twenty artists. My piece was a physics-y controllable visualiser, using Box2DJS as its foundation.

continue reading…

The Responsive Future

I recently attended Canvas Conference 2013, an event for developers, designers and digital marketers which took place here in Birmingham. The event featured a wide variety of speakers covering a huge range of topics: everything from physical product development to new and emerging tools, as well as your slightly more “traditional” subjects related to web development and marketing.

After a few days spent absorbing the huge amount of information I was exposed to, I noticed a common thread running through quite a few of the talks: that of the future of the responsive web.

continue reading…

The ZTE Open Firefox OS Phone

A short while ago I was lucky enough to bag a ZTE Open smartphone, during it’s initial, limited release on ebay. To the uninitiated, it’s one of the first phones available running on Mozilla’s Firefox OS platform – a new community-based mobile OS primarily aimed at low-end handsets and developing markets. What makes Firefox OS different to other mobile operating systems is that everything – right down the the UI of the OS itself – is written in HTML5 & JavaScript, running inside Mozilla’s Gecko rendering engine.

I’m not going to talk about the handset or operating system too much in this post, as fairly detailed accounts can be found elsewhere – I’m more interested in the opportunities that devices like this present.

continue reading…

Behind the Scenes

Hello, and welcome to my new site. I’ve been a web developer and designer for some five years now, both as a freelancer as well as having worked with agencies. If you’d like to read a bit more about me then you can do so here, and do please let me know if you encounter any bugs or want to give me any feedback.

With this first post I want to talk about my workflow whilst creating this site, and some of the processes and tools I used. My initial objective was simply to create a site which conveys my skills whilst being nice and easy to use across a range of devices, so I decided that a simple design and content structure — with an emphasis on responsive design and performance — would help me meet this objective.

continue reading…