Archives

Articles I really must read when I get to work

Quick post with a series of URLs I’m keen to look at in more detail. I tend to skim things when I come across them, but the following pages deserve a closer look and a demo or 2.

Creating awesome CSS3 animations – Thomas Fuchs

At the moment, my work is all about how to start producing Flash style animation without Flash. This looks like it should give me a few insights into achieving this with CSS.

Processing demos at Monocubed

On the path to figuring out this animation puzzle I’ve also been playing around with ProcessingJS. Monocubed has heaps of great demos, most of which are really easy to replicate

How to Centre and Layout Pages Without a Wrapper

As soon as I read  the first paragraph I’d ripped off the idea and starting playing with code. But I really should read through this article entirely

HTML5 Doctor

Just sit down and devour this site I think…

CSS Gradients

Turns out that ye olde IE6+ has some gradient tricks up it’s sleeve… not quite (!) as flexible as the modern browsers, but still work reviewing this to see what can be squeezed out of the old dog.

Playing with SVG via Raphael

A few weeks ago I spent some time looking into animating content on the web using Raphael (this eventually formed the basis of some challenges for the team I’m in at work).

The demos are pretty basic:

Hand Draw http://www.david-lewis.com/test/svg/handdraw.php
This small script takes a SVG path, and chops it up into an array, then loops through the array building up the path data. Sprinkle in a bit of Raphael’s animation, and you’ve got something that looks like the path being drawn.

It’s very crude and basic, but works well when combined with graph drawing.

Load SVG file http://www.david-lewis.com/test/svg/loadfile.php
SVG is great, but doesn’t render on all browsers (hello IE). So this little test shows how you might break down the SVG file and run it through Raphael so it works almost anywhere. I based the demo on an Inkscape file, not on the spec for SVG. Hence it works nicely with SVG files from Inkscape but not much else (sorry).

The long term goal with something like this is to allow designers to use a nice image editor, and the developer to just treat the images as external assets… therefore, if the designer wants to make changes, they don’t have to hassle the developer.

Both these demos can only be considered proof of concepts. I will return to the SVG parsing, once I’ve played around more with animating content without  the need for Flash (next stops: Canvas, and good old jQuery Javascript animation).