Content-aware styles

19 July 2016

24 Ways has been producing web-related content every December since 2005. In this time-sensitive field, how does it distinguish the old content from the new? By subtly changing the colour scheme. In this post, I figure out how to replicate this effect and think about further applications for content-aware styles. Read more

Tags: CSS Design Sass

Skip to navigation

Recreating a folding corner effect with cel animation

05 July 2016

In this post, I recreate the folding corner effect of the article summaries on 24 Ways. It reveals a whole treasure trove of CSS techniques, in particular how to simulate old-school cel animation. Read more

Tags: Animation CSS SVG

Skip to navigation

CSS, SVG and base64

21 June 2016

24 Ways uses a cracker of a trick on their homepage to reveal author profile pics when the mouse hovers over an article summary. In this first post on the topic, I'm interested in how they include SVG code in CSS by using base64. Read more

Tags: Animation CSS SVG

Skip to navigation

Colour design: green

31 May 2016

Green. What does it mean to you? The great outdoors? Toxic waste? The almighty dollar? In this post, I review some mind-blowing sites whose only link is the use of the colour green. Behold their greenness! Read more

Tags: Design

Skip to navigation

Anchors, buttons and inputs

10 May 2016

CSS frameworks, like Bootstrap, often allow you to style anchors, buttons and inputs in the same way. But what's the difference between them, and when should you choose one over the others? Read more

Tags: Bootstrap HTML PHP

Skip to navigation

Third-party scripts on Rotten Tomatoes

19 April 2016

Like many high-traffic sites, Rotten Tomatoes downloads a ton of third-party scripts. In this post, I examine 20 of these scripts, and find out what they do, whether they're free, how big and how up-to-date they are, and what dependencies they have. Read more

Tags: JavaScript

Skip to navigation

Redesigning my portfolio from the ground up

05 April 2016

Transforming my portfolio into an automated and unified Jekyll site has given me more of an online identity, and drastically speeded up my process for deploying new content. In this post, I discuss my approach to redesigning my site, and some of the problems and solutions I found. Read more

Tags: Projects

Skip to navigation

Bootstrap mega menu

29 March 2016

The main navigation on Rotten Tomatoes is a highly tweaked implementation of Bootstrap's dropdown menu. Instead of a simple list of links, its dropdowns contain several columns of links, headings and images. I investigate how this is achieved, as well as what problems it might cause for users. Read more

Tags: Bootstrap HTML JavaScript

Skip to navigation

A new website for a new venture

10 March 2016

I worked with a former colleague to create a website for his new business venture, Real World English. Although the project was small, I was keen to do a professional job. The result is a smart-looking, responsive site which makes content the star. Read more

Tags: Work

Skip to navigation