One more post about things I’ve written elsewhere, then I’ll be back to writing original content here again…
Another pair of articles by me got published today; they’re both introduction-level:
Adventures In The Third Dimension, on Smashing Magazine, is a beginners guide to CSS 3D Transforms, explaining the syntax with a few demos; and for Ubelly I wrote The Five-Minute Guide to CSS Animations, which does the same job for CSS Animations.
I’ve an article coming up for .net Magazine soon; it’s called 10 CSS Techniques for 2012, it’ll be the cover article, and I’m very excited about as I wrote it in collaboration with Andreas Johansson, Harry Roberts, Lea Verou, Nicolas Gallagher, and Paul Adam Davis, all of whom do great work.
After that I have two more articles to write, should be tech editing a book on CSS3, then probably starting work on my own second book. 2012 is going to be a very busy year.
I’ve been writing some articles for different websites in the latter half of this year, and it strikes me that I haven’t done a very good job of promoting them on here. So please allow me to correct that, with this brief rundown in reverse chronological order.
I’ve put together my list of the 20 Best CSS Sites of 2011 for .net Magazine. Choosing only 20 turned out to be really difficult, as I wanted to get a broad range of approaches. I’m sure there are plenty I missed out, including any that aren’t in the English language.
For The Sass Way I wrote about How Sass Can Shape The Future of CSS, showing how many of the features contained in the pre-processed CSS extension are under discussion for inclusion in future versions of CSS.
Webdesigntuts+ interviewed me about my book and my opinions on CSS3, including what I’m excited about for the future, and things to beware of when using cutting-edge properties.
And again for .net Magazine I discussed The Future of CSS Layouts, a subject I’m really excited about at the moment, which led to an article that was very popular with .net’s readership.
I currently have two more articles waiting for technical review and proofreading, which I hope will see the light of day shortly, and have promised to write another two as soon as I get time (as well as one for a dead tree publication). I’m very happy to be writing about my craft, and appreciate feedback or further requests for articles from other sources — although, I won’t be able to write quite as much next year as I’m planning to start my second book.
As you may be aware I work at Top10.com, and last week we officially moved the site out of beta and released a new design and some revised interactions. We decided that we wanted to make the most of the capabilities of modern browsers, and one of the main ways we did that was with CSS.
As the bulk of our audience use modern browsers we were able to use generated content, web fonts, gradients, transitions and animations to give an enhanced experience for them. You can read more about the front-end build on the Top10 blog, and although I’d be happy to talk through all of it, in this post I’m going to focus on our use of CSS animations.
If you’ll pardon the indulgence, I’d like to quickly discuss a few personal matters. First is that I’ve making a change professionally and moving on from my current employers, Poke London. I’ve had some great experiences working here and built some sites I’m really quite proud of — Poke’s own website not the least of them — with some of the most talented colleagues it’s ever been my privilege to work with. Poke’s record speaks for itself and I was delighted to be a small part of it for the last 10 months.
But as of Tuesday next week I’ll be working at Top10, helping the currently small team grow and develop from a start-up to an established digital brand. What most attracted me about the move from agency to product is the opportunity to be involved in evolving and shaping, to analyse and iterate; as the song has it: performance, feedback, revision. The current Top10 team are a keen and clever bunch, and I’m looking forward to working with them.
Outside of work, my book, The Book of CSS3, has been out for a few months now (and has been getting some really positive reviews), I’ve got some print and online magazine articles planned for the near future, and an outline is forming for my second book.
Later this month I’ll be one of the instructors at the forthcoming UX Bootcamp: Prototyping in Code workshop. I really enjoy helping, teaching and communicating my craft, so I’m really happy to have the opportunity to do this.
Since the beginning of the year I’ve been giving a series of talks at web development groups around London. I’m looking to do more speaking, so if you organise or take part in any local web dev groups and you’re looking for speakers, please do let me know. There’s a full list of conferences I’ve talked at on Lanyrd, and you can see video and slides of my latest talk.
I don’t think I’ve ever been busier, or more excited and nervous about what’s coming next!
My last post was about using SVG values for the background-image property, and I pointed out one big problem with the technique:
The drawback of this is that it’s not ready for use just yet — browsers that don’t support SVG in
background-imagewill not provide any fallback, even if you supply anotherbackground-imagevalue; so in non-supporting browsers, no image at all will be displayed.
This was annoying me a little, and I couldn’t find any workarounds that didn’t use JavaScript. However, after a bit of head-scratching I’ve come up with a way to get around it.
I hope you’ll forgive a little self-promotion, as I’d just like to play a few quick notes on my own trumpet. The latest issue of Net magazine is now on sale, and features a tutorial article, Create A Dynamic Content Panel, written by me.
In the article I explain how to build a dynamic Contact area, as we did on our recent redesign of Preloaded.com, using the Web Storage API and the BBC’s Glow Javascript library.
I’m not sure what the rights situation is with this article, but I hope that at some point in the future I’ll be able to post it here on my blog. But in the meantime, you can buy a copy of Net magazine in the UK at all good newsagents, as the saying goes (I don’t know if it will be in overseas editions also).



On the subject of print, I’m also currently writing a book about CSS3 which should be published later this year. I’ll have more information on that nearer the time.
For no particular reason other than idle curiosity, I made a demo of a broken neon sign, using CSS Animations (you’ll need Firefox 5, Safari or Chrome to see it). It doesn’t degrade well at the moment, the root cause of which is down to what I think is a bug in Firefox’s implementation — I’ll need to confirm that.
One quick learning from making this: it would be really useful to have CSS Mixins when using a lot of repetitive keyframes, as I do in this animation. The W3C seem to be quite against them, however.
[#] 3 Comments