Elementary - Drupal theme

I've finally had some time to start work on a new Drupal theme which I'm hoping to contribute back to the community. I've decided to call it Elementary, and my overall goal is to keep things as simple as possible & focus on written content above all else which I'm hoping will make it ideal for blogs.

An early screenshot:

Removing unwanted CSS files from a Drupal theme

If you've ever developed your own Drupal theme then you may have noticed that Drupal & other contrib modules provide their own stylesheets for you to contend with. Of course you could just override the CSS rules with your own, however the files are still being included on every single page load when they really don't need to be.

Just as an example: there were around 14 additional stylesheets being provided by core or contrib modules on my contact page alone.

Website bookmark icons for different iOS devices

A couple of years ago I wrote a short post on how to create an iPhone bookmark icon for your website which would appear if someone were to add your site to their homescreen. That post is getting on a bit now (the screenshot alone shows just how the UI has changed) and now there all sorts of new devices and perhaps more importantly: resolutions to consider when creating an icon.

Creating different shape masks in After Effects

I've always loved watching video tutorials on the web, I find having someone talk you through how to do something and being able to watch them do it is far more engaging than simply following a blog post with some screenshots.

BBC Olympic trailer - "Stadium UK"

The BBC revealed the "Stadium UK" trailer/ident for their coverage of the Olympic games during the Euro 2012 final last night - if you haven't already seen it, take a look:

After Effects motion tracking experiment

Another short motion graphics test, this time experimenting with motion tracking in After Effects to "parent" some visuals to the movement of my eye:

I'm pretty pleased with the results, using motion tracking like this can be a great way to annotate live action footage rather than having a static title displaying information.

Shapes - animation

Another little motion graphics piece I've created, this time to experiment with a couple of different techniques when animating 2D shapes in After Effects.

Assassin's creed logo animation

I wanted to have a go at animating the futuristic Assassin's creed logo in After Effects:

Motion graphics promotional video

To go along with my website redesign I thought it was time for a brand new promotional video as well. Here's the finished video:

Once again the music was provided by my good friend Andy - http://andyhudsonmusic.com

Motion graphics experiment: "Annotation"

As a little experiment into mixing live action footage with motion graphics I created the short sample videos below. The process involved tracking the motion of the video in After Effects and linking the position of the graphics to the tracked keyframes - this basically helps to keep the titles steady as the camera moves around slightly.

Version 1 -

JavaScript-less social share links

Social sharing widgets are everywhere these days and on a growing number of sites they even follow you down the page just so you're blatantly aware of where they are at all times.

As well as just being visual pollution on a webpage, these widgets are resource heavy too, chocked full of extra JavaScript which needs to be loaded for each individual widget - all of which slows your site down!

This is an issue I wrote about in my recent website redesign post and after seeing this tweet :

Introducing: Block - a simple tumblr theme

Today I submitted my first Tumblr theme: 'Block' for review. (I named it 'block' because the main navigation is quite block-like as is the general structure of the overall theme.)

Who's tweeting the most?

In an effort to learn a bit more about the Twitter API I decided to set myself a little weekend project to try and create something with the data available.

I'm used to working with PHP and found this pretty solid PHP library which gave me a good base with which to get started on. If you use another programming language, the Twitter developers site has a comprehensive list of other libraries available.

Tweet archive: Google calendar

A few weeks ago I blogged about archiving tweets by sending them to another web service using ifttt. In my case that web service was Google Calendar since I never really use it.

I just thought I would share a weekly snapshot of my tweets in calendar format:

Tweets in calendar format

GrammarTime JavaScript word clock

As a little side project I decided it might be pretty cool to create an online word clock which shows the time as you might speak it.

So, I created: GrammarTime.

I'm pretty pleased with the result, looks pretty nice in full screen mode too.

I also learned a nifty little trick for hiding the navigation bar in Safari on the iPhone, just use the following bit of JavaScript on page load:

A photo of the Moon taken from my iPhone

I took the photograph below by lining up my iPhone to the eyepiece of a telescope. It was slightly tricky to get lined up but I think the end result was pretty great:

The Moon taken from an iPhone by Thomas Davis

Pretty cool huh?

Let there be lightsabers

Another design I thought would make a pretty cool poster, although that could just be because I'm a pretty big fan of Star Wars.

This one was created for the 'light' brief over on GotBrief and started out as just a design of a lightsaber which then turned into the 'let there be lightsabers' idea:

let there be lightsabers poster


Using ifttt to archive your tweets

UPDATE: unfortunately due to recent changes in the Twitter API it seems IFTTT has to remove the Twitter triggers which means the following technique will no longer work. Thanks Twitter.

I’ve been seeing quite a few tweets about not being able to search back through your own tweets, with some users even offering to pay twitter for such a service:

The apostrophaces strike back

That's right they're back!

As I was sifting through my old blog posts I found the apostrophaces design I did just over a year ago and decided it was high time for a comeback!

The collection:
Apostrophaces posters

Font: Chiller
chiller apostrophace

My new website design

This post talks about the latest iteration of my site design and the steps I took in order to produce it. It’s not really about the code I used to create the theme but more the rationale behind the various decisions made, the thoughts running through my head and some general issues I had with my old design.

The main points will be covered as follows: