Nathan Staines

Now powered by Jekyll

2013-04-05T18:35:00+01:00

Inspired by the brander newer version of Dave Rupert's blog I decided to make the switch from WordPress to Jekyll, a simple, blog aware, static site generator written by Tom Preston-Werner. It basically takes a template directory, runs it through some Markdown and Liquid converters and spits out a completely static website.

At first static websites can be a little tricky to get your head around. It kind of feels like a bit of a throwback to the early days of web development. Back when you didn't have to worry so much about databases and backend code, just pure front-end development before front-end development was even a thing.

Now hosted on GitHub

One of the best things about using Jekyll is the ability to use GitHub as a host. If you've ever used GitHub Pages before then you've already experienced Jekyll in action. Every GitHub Page is run through Jekyll when you push content to your repo. This means that you can host your site for free, have every change version controlled and your content deployed instantly.

However, it's not exactly a perfect fit if you want to use any of the plugins that are available for Jekyll. Unfortunately but understandably GitHub runs Jekyll in safe mode, which means the use of plugins is prohibited.

A solution to the plugin problem

After scouring the internet for quite a while, here's the solution I ended up using:

Setup two branches (source & master)
Work directly on the source branch
Build the pages locally
Stage all the changes
Delete the contents of master
Copy the _site folder across from source to master
Push both branches to GitHub

The git commands you'll need:

Or you can create a git alias to run them all:

Then all you need to remember is:

The source code for my site is available for your viewing pleasure on GitHub if you're interested in taking a look.

If you'd like any more info on how I setup Jekyll then send me an email or contact me via twitter @nathanstaines, I'd be happy to help out where I can.

WordPress word count

2012-06-25T13:00:00+01:00

When I redesigned this site last time around I decided it would be a good idea to display a word count for each of the articles; you know, for all those people just dying to know how many words were waiting to be read.

I assumed this would be an easy thing to achieve using WordPress, which to a certain extent it was. However, I also wanted to be able to exclude any code blocks from the final count.

Below you'll find a couple of solutions I came up with to help solve the predicament I found myself in, they may not be bulletproof solutions but they did work for me.

The simple solution

If you're not interested in removing any HTML elements from your final count then you can simply place the following function in your theme's functions.php file:

Then add this to your theme wherever you'd like the word count to appear:

The not so simple solution

This solution requires a little extra work. First you have to to create a new instance of the DOMDocument class and then disable the error reporting as it doesn't seem to want to play nice with HTML5.

From there you need to collect and remove any of the HTML elements that you no longer want to be included in your final count and then you can continue as per normal.

Simply place the following function in your theme's functions.php file:

Then add this to your theme wherever you'd like the word count to appear:

If you run into any problems or have any questions regarding these solutions feel free to send me an email or contact me via twitter @nathanstaines.

Directional buttons

2012-02-21T12:00:00+00:00

I've been waiting for an excuse to fine tune an idea I had about creating some directional buttons using just CSS. So after seeing the Simple light button playoff on dribbble, I decided to get my act together and finally finish it off and in the process, write my first blog post for 2012.

Prev Next

Note: For the sake of simplicity, vendor prefixes have been omitted. However, you can view the css and sass file on GitHub.

The HTML markup is pretty simple. Although, an extra span tag is required in order for the z-index styles to work on the :before pseudo-element.

First we start with our basic button styles:

Then we add the directional arrows using the :before pseudo-element:

And lastly we flip the direction of the arrow for one of the buttons.

If you feel as though this technique could be improved upon or you end up using it on one of your sites then please let me know via Twitter.

Macbook Pro SSD upgrade

2011-09-22T13:00:00+01:00

It's been just over two weeks since I decided to upgrade my Macbook Pro 15" late 2008 model with a 128GB Crucial M4 SSD also replacing my SuperDrive with the exisiting 320GB HDD in the process.

I was initially going to bite the bullet and purchase a brand new Macbook Air but figured I'd probably want to upgrade again within the next 12-24 months, so despite the fact that everyone seems to be raving about the Air at the moment I thought going with the SSD upgrade instead would save me some money in the long run.

Equipment used

Choosing the SSD

Obviously the most important part of this process is in deciding which SSD to go with. As always our trusty friend Google had plenty to say on the matter but not everything it spat out was entirely helpful. I did however find this article from MacGateway had enough information to get me started.

There are already a number of good quality Solid State Drives to choose from and this is only going to increase as the technology behind them improves. I decided to go for a mixture of price, space and all-round speed settling on the 128GB Crucial M4 in the end.

Installation

I've always been a bit of a clean freak when it comes to computers. I love reformatting my HDD (now SSD) about every 6 months in an effort to trick myself into thinking I have a completely new machine. I had an external HDD lying around that I used that to back up all of the files I wanted to keep and took this opportunity to install a clean version OSX Lion.

Replacing the HDD with the SSD couldn't have been simpler (assuming of course you have the correct tools), whereas swapping out the SuperDrive with the HDD was a little bit trickier. To get the job done I basically followed these step by step instructions from ifixit.com and watched this guy take his machine apart on YouTube:

Conclusion

So far everything seems to be a lot snappier than it was before, applications are responding a lot quicker and waiting for my machine to boot up in the morning is now a thing of the past. If you're thinking about performing a similar upgrade on your machine - do it, you won't regret it.

A responsive redesign

2011-08-19T13:00:00+01:00

I've finally decided to do the responsible thing and go responsive with my website.

Today, sites are being viewed on a number of different devices and browsers each with differing dimensions and screen resolutions, gone are the days of the one size fits all design philosophy.

A responsive redesign

Ethan Marcotte outlines in his game changing book 'Responsive Web Design' that fluid grids, flexible images and media queries are the three technical ingredients that are needed for responsive web design, but that it also requires a different way of thinking.

So equipped with this new found knowledge I set out to create a WordPress theme that would allow users to easily read the content on this site regardless of screen size. I decided to take what I already knew from working with Starkers HTML5 and mixed it together with the HTML5 Boilerplate and Andy Clarke's 320 & Up boilerplate extension.

A fresh coat of paint

While I was at it with the whole responsive thing I also thought I'd go with a new WordPress inspired colour scheme, a homage to Flight of the Conchords on the homepage and the inclusion of Maykel Loomans' pull quote technique on some of the blog posts and pages.

What next?

I'm hoping this new look will inspire me to write blog posts a little more frequently but as always, only time will tell...

Thoughts on New Adventures 2011

2011-01-23T12:00:00+00:00

I had the opportunity this week to head up north to Nottingham along with another 600+ fellow web geeks for the inaugural New Adventures in web design conference.

From the moment I arrived at St Pancras train station it felt like I was playing a real life version of 'Where in the World is Carmen Sandiego?' it seemed like I had just missed other conference goers by only a matter of hours when I checked in on Gowalla.

This trend continued until after I had checked in at the Premier Inn (where everything's premier but the price) and headed on out to the now famous:

Erskine Bowling

Bowling shoes • photo by Marc Thiele

The guys from Erskine Design organized a great night of bowling, creating a nice laid-back atmosphere where the conference attendees could catch up and enjoy themselves in a social setting before having to put their thinking caps on the next morning.

As far as the bowling was concerned everyone seemed to peak early except wee @jackosborne who improved only slightly as the night went on.

Now I haven't exactly been to a lot of web design conferences but I'm pretty sure it's safe to say that the people who go look forward to these sort of social events almost as much as the conference talks themselves.

During the course of the night I had the pleasure of meeting some amazing people from within our industry where many great conversations were had.

And even though I wasn't lucky enough to be apart of a bowling team I did get the opportunity to knock over a few pins every now and then.

I didn't stick around to see which team was crowned champions but overall the night to me was plenty of fun.

Conference Speakers

Albert Hall • photo by Simon Collison

Thursday brought with it a reasonably early start, a queue around the corner to get inside Albert Hall and plenty of coffee in hand.

Over the course of the day there were some brilliant ideas and opinions presented from some of the industry's most respected voices like Dan Rubin, Mark Boulton, Sarah Parmenter, Elliot Jay Stocks, Jon Tan, Tim Van Damme, Greg Wood, Veerle Pieters, Andy Clarke and Brendan Dawes.

All my favourite talks in one way or another seemed to revolve around the content. From Mark Boulton's idea of designing from the content out, not the canvas in, to Greg Wood's personal experiment with art directed/editorial design and whether or not this works on the web, then finally Andy Clarke's idea of telling stories with 'Once upon a time on the web'.

For me the conference accomplished everything it set out to do:

New Adventures... will be carefully curated; chock-full of integrity, opinion, and fresh content, with an emphasis on shaking things up and challenging convention. This event has inspiration, thinking, and intelligence at its core. It will encourage debate, enthuse, excite, ask questions, and look for real outcomes.

Now although New Adventures was always billed as having a fast-paced punchy format, my one and only criticism would be to say that 10 speakers in a day is a lot to take on - and a lot to take in.

The After Party

Argh! • photo by gablaxian

Once the conference had officially finished up I headed back to the hotel with a couple of the GBOLs to drop off our stuff and head out for some food.

A few hours later and we arrived at Escucha to find plenty of fellow web geeks catching up on the days events.

There's always a few factors at play when it comes to hosting a successful after party (in my opinion at least). The venue, the free tab at the bar and the volume. All of which were spot on!

Final Thoughts

Overall the New Adventures in web design conference in my eyes was a huge success, I love the opportunity to catch up with other people in our industry to discuss and/or question the direction in which we're all headed.

For more reviews and write-ups of the conference check out lanyard.
And for all the photos of the event there's no better place than the New Adventures flickr pool.

Thanks @colly and team for such an entertaining and inspiring conference.

Working with media queries

2010-12-02T12:00:00+00:00

The use of media queries simply allows us to apply different CSS styles based on resolution and/or device orientation. It uses the same old media declaration that we've used for serving up print stylesheets but now it just has a few more features under its belt.

Everyone's doing it... ok, so maybe not everyone but it's definitely starting to gain some traction amongst the designers who are prepared to push the boundaries - or at the very least experiment with them from time to time.

Hicks Design

How do we use them?

First we need to set the viewport to device-width

We can either link to external stylesheets

Or add them to an existing stylesheet

Is it supported?

The browser support for media queries is actually pretty good. The latest versions of Firefox, Safari, Chrome, and Opera are all using it. Internet Explorer 9 will be, but IE8 and below do not :( however there is a jQuery media queries plugin - for those not-so-capable browsers.

Final thoughts

One thing to keep in mind - Although we can now tailor our designs to suit different devices we'll still be dealing with the exact same content. (CSS3 flexbox can help rearrange some content if necessary) So even if we decide to use CSS to hide images on the iPhone, they'll still be downloaded by the user.

Notable Mentions

Mediaqueri.es - A collection of responsive web design.
Less Framework - A CSS grid system for designing adaptive websites.
CSSgrid - A 1140px wide, 12 column grid. Fluid all the way down to mobile.
A Jason Grigsby article - On media queries for mobile being fools gold.

Ed Merritt

Simon Collison

Starkers HTML5

2010-07-22T13:00:00+01:00

Update: Unfortunately I'm no longer able to maintain and/or update Starkers HTML5 although you can still get a copy from GitHub and use it in its current state.

Alternatively I'd suggest downloading the original Starkers recently updated by Viewport Industries or the underscores theme by Automattic.

It's been roughly 2½ years since Elliot Jay Stocks first released Starkers, a completely naked Wordpress theme for designers and developers to build on.

Like so many others I found Elliot's theme invaluable, and so about 7 months ago I decided to create an HTML5 version that others would be able to use.

Starkers is a bare bones WordPress theme created to act as a starting point for the theme designer...

Elliot Jay Stocks, Starkers

With the introduction of Wordpress 3.0 I'm pleased to unveil the new version of Starkers HTML5, just like the previous version this one has been based on Elliot's Starkers, which in turn was based on the new default theme known as Twenty Ten.

So what's new?

Thanks to Wordpress 3.0 theme developers now have new APIs that allow them to easily implement custom backgrounds, headers, shortlinks, menus, post types, and taxonomies.

The Twenty Ten theme shows off all of these new features, whereas Starkers leaves the functionality but strips back the styling.

For a more comprehensive look at everything that has improved in Wordpress 3.0 you can check out the 3.0 Codex page.

Final notes

Starkers HTML5 comes packed with Modernizr, a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

For a more in-depth look into HTML5 you can check out the following websites: HTML5 Doctor, Dive into HTML5, the WC3 working draft and the WHATWG working draft.

Although Starkers HTML5 is a great starting point for any WordPress theme development I highly recommend you take the time to check out and dig through Paul Irish and Divya Manian's HTML5 Boilerplate.

Scrolling against the grain

2010-02-11T12:00:00+00:00

Recently I was faced with the challenge of creating a horizontally scrolling website, a challenge in which very few have survived with their sanity still intact. The challenge lies in 'going against the grain' because by default, browsers want to wrap the content to fit vertically within the window.

There are plenty of different options out there for you when it comes to making your site go sideways, firstly the horizontal way have a template that you can download and have a play with.

Chris Coyier has also come up with a solution using jQuery to create a table based layout on the fly, while Antonio Lupetti discusses another option of manually setting the width of your containing element.

How I went horizontal

I think I may have decided to go the road less traveled with the QCD Boards website, choosing to dynamically set the width of the containing element using jQuery.

I know it's considered bad practise to handle page layout with JavaScript and it may not degrade as nicely as it should but has anyone really come across a bulletproof technique yet?

Well the idea behind this method is to come up with a set width for each post, multiply it by the number of posts you have and then include that figure in the CSS file, which in turn forces the browser to grow horizontally.

This is achieved by first setting the width of the post element in the CSS file:

Then all you need to do is include this simple jQuery function:

Obviously if you want to employ this technique on your own site then you could change the values to something that better suits your needs. Also, if you require more detailed instructions on how to implement this method just let me know and I'll do my best to help you out.

In closing

I know that there are plenty of horizontally scrolling websites out there so if you've come across a different/better solution for scrolling against the grain then please let me know.

A Helpful Tip: if you hold shift while using your mouse wheel, most horizontal websites should scroll sideways for you.

How do you say HTML?

2010-02-11T12:00:00+00:00

Earlier this year I came to the realisation that I say HTML or more importantly the letter H, a little differently to a lot of others out there.

My journey of self discovery started with the release of a new WordPress theme which was initially going to be called 'Genesis: an HTML5 variant of Starkers' but seeing as there was already a theme framework with a similar name, Elliot Jay Stocks and myself decided on 'Starkers HTML5' instead.

So my confusion lay in the use of 'an HTML' instead of 'a HTML'. At first I thought it was a simple typo by Elliot but then it dawned on me (thanks to a little bit of help from Google) that not all people pronounce the letter H the same way I do... weird I know.

Aitch vs Haitch?

H is the eighth letter in the basic modern Latin alphabet. Its name in both British and American English is aitch, plural aitches, though it is also pronounced haitch if you’re cool like me.

There is plenty of information as to why there are two different pronunciations of the letter H but I'd personally like to thank the Catholics.

We conducted a survey of the television programme Wheel of Fortune over a period of some weeks, just to see how many of the participants were aitchers and how many were haitchers. The results: 40% aitched and 60% haitched... Australians from a wide variety of backgrounds are haitchers these days.

Ab(h)ominable (H)aitch, by Frederick Ludowyk

So is it an HTML or a HTML?

The rule of thumb is that you use 'a' before words that start with a consonant sound and 'an' before words that start with a vowel sound, so depending on how you pronounce the letter H will determine how you write it.

I personally say haitch instead of aitch and I understand that it's most likely the lesser of the two alternatives but I've always been one to cheer for the underdog.

Hello world!

2010-01-15T12:00:00+00:00

I'm here, I've finally made it... my very own slice of the world wide web! Now don't get me wrong, I've had websites before but I've never had one named after me... it's kind of a big deal.

Just like a builder who builds his own house or a mechanic who puts together his own car a designer who designs his own site, is never really finished. Even though I'm happy with the way things look at the moment I can certainly guarantee that over time improvements will be made.

Now depending on your choice of web browser, things may look a little differently from where you're sitting (there might be a few issues with the inline labels in IE). The whole site has been designed using HTML5 and CSS3 which at the time of writing this have yet to be finalised and fully supported.

If you think you've come across any errors or just want to help me improve the site with some friendly advice then please send me an email.