December 31, 2013

As we are all busy updating our footer copyright dates, I take a look back over the past year and think about what I hope to achieve in the 2014.

3D transforms, talks, and static sites

This year has been a big one for writing and publishing blog posts. I have found that writing about what I learn is a great way to put things into practise and make sure the lessons stick. It’s also a great way to get feedback and ideas from others doing the same.

I started the year a bit late with a post in March about static website development, The Holy Grail. Using Middleman to set up and host a website on Github Pages (and Amazon S3) was an interesting diversion from the usual Wordpress and PHP based sites I’d been building before.

While working on new websites, I started experimenting with 3D in CSS. I tested this by creating a 3D iPhone with CSS. Using some contenteditable CSS, I demonstrated how to build a 3D box and apply some images as textures to create the 3D phone.

This got me thinking about other ways CSS could be used to create interesting 3D effects, and I blogged about some of these experiments. Zelda - A Link to the CSS was all about 3D triangles and bordered text.

Portal CSS was an attempt to recreate a classic video game scene and made use of the way borders in CSS meet to give depth to an isometric 3D scene. I also made a CSS Mac Plus. The Mac Plus was originally going to be an article for Adobe Inspire, but an amended version ended up making the publication instead.

I was also lucky enough to be asked to write for .net magazine. In issue 244 I wrote a tutorial titled 3D CSS in the Real World.

In some 2D CSS posts, I created the iOS 7 logo using CSS (a combination of font-face and linear gradients) and also used gradients to make great looking CSS Balls.

I then tried some eye-crossing experiments in Stereoscopic CSS, in which the CSS perspective-origin property was used to create more real-looking 3D scenes.

I gave some talks earlier in the year, on topics such as AngularJS, CSS Animation, and I’d also been looking into Node.js (thanks to some great Node.js meetups). I managed to record a talk in which I introduce Node.js.

Towards the end of the year, I wrote about making a blog using Jekyll (Part 1, Part 2) (another static website generator).

People are so nice

It has been busy, and I’ve learned a lot. What surprised me more than anything else has been the response. I’ve had great support from some lovely people, including Zoran at CSS Weekly, Peter at HTML5 Weekly, Mary Lou at Codrops and loads of people on Twitter.

Hop.ie has been linked to by Jim Dalrymple, mentioned by Zeldman, had articles translated into Russian and French, and linked from countless other blogs.


I hope 2014 is as good. I expect it to. I’m helping build an interesting website for an event later in the year, and have some blogs to write about CSS transforms (including this Photos logo) and some canvas stuff.

In the next year I’d like to continue learning more about front-end development. Creating animated SVGs, looking into JavaScript frameworks such as Ember.js, and hopefully making more of the amazing Node.js are all on my list.

Thank you for the support. I hope 2014 is a wonderful year for you and yours.

To hear when new posts go live, follow me on Twitter.

In case you missed any…

Web dev

CSS & 3D transforms