Using Sitespeed.io in a Vagrant Virtual Machine

sitespeed.io

Not so long ago I came across a fantastic command line tool called sitespeed.io. It enables you to generate a nicely formatted report about the speed and performance of a site. Performance is somthing I’m really interested in, and this is a perfect tool to add to the arsenal.

Now, being a glutton for punishment I decided against the easy install option (using Homebrew on a Mac) and instead decided to try and get it working in a Vagrant virtual machine.

Read More

Optimising the Critical Rendering Path, and Loading CSS Asynchronously and Conditionally

Go straight to the asynchronous and conditional CSS loading script →

Optimising the Critical Rendering Path

I’ve recently been looking into frontend optimisation, or as clients like to refer to it, “can you fix our slow site?” - in my defence I mainly work with Magento sites, so this is not a straightforward task.

Ilya Gregorik at Google has done some great work educating others in optimising the critical rendering path, and one of his recommendations is to inline critical CSS in the head and defer the loading of other CSS files until after the initial paint.

Read More

Responsive Images With The ‘picture’ Element and Picturefill 2

Just want the good stuff? Get straight to the Picturefill 2 polyfill →

Back in February of this year, at An Event Apart in Atlanta, Mat Marqis confirmed that browser vendors have finally agreed to support the picture element. You can read Luke Wroblewski’s notes on the talk here.

This is fantastic news as we can finally stop asking what we’re going to do about the problem of ‘responsive images’ and start implementing them!

Read More

A Simple Vagrant Boilerplate For Frontend Development

image

Feeling impatient? Get straight to the code on Github →

As a designer and frontend developer I’ve been working hard over the past couple of years trying to ‘up’ my skill levels. I’ve been learning how to use development tools, such as ComposerNodeGruntBower and so on. To that end I always try to pay attention to what other ‘backend’ developers are talking about as the tools they use often end up making their way into frontend workflows.

Recently I’ve been hearing the word Vagrant bandied about the office, so I decided to find out more - and I like what I’ve found!

Read More

OS X: Bring Your Dock Back To Your Primary Display

image

If you have a second display you may have noticed that from time-to-time it seemingly ‘takes over’, i.e. your dock, quick app-switcher, spotlight search and so on move over to the other screen. This is annoying!

You can stop this happening by going into System Preferences > Mission Control and deselecting Displays have separate spaces. You can find more info about Spaces here.

However, I don’t like the way this works - I actually prefer my displays to have separate spaces. This means I can quickly switch between Spaces on my main display, but my second monitor stays as it is with open apps that I always want to be able to see (such as my terminal, or Flowdock or whatever).

So what now? Well all is not lost - there’s a little known method that will quickly bring ‘control’ back to your main display.

Simply make sure you are ‘on’ your main display (click on the desktop for example), then move the mouse cursor from the top, to the bottom of the screen. In doing so you should find that the dock switches back to this display (and the app-switcher, spotlight search etc.).

Neat!

Speed-Up Your OS X Workflow With a Few Simple Keyboard Shortcuts

image

I’m not one for making New Year resolutions, but I’ve started something that just happens to have coincided with that wonderful time of the year when good intentions rule (and mostly fail).

In fact this isn’t really the start, but more the continuation of something that’s been happening to me over the past year or so, and that’s the streamlining and speeding-up of my OS X workflow.

I grew up using the mouse, I learned to design using the mouse, so learning to type stuff (largely thanks to the command line and code editors) has been an, at times, painful process. However, I’ve noticed that I’m increasingly ignoring the mouse in favour of keyboard shortcuts.

Read More

A Beginner’s Guide to Using Grunt With Magento

image

Following on from the success of my Front-end Process, Flat Builds and Automation article last year I thought I’d take things a step further and write about how I’m starting to integrate Grunt into my Magento front-end workflow.

Here’s the result, I hope you find it informative and useful: A Beginner’s Guide to Using Grunt With Magento

Make sure you put aside a few hours though, it’s a long one!…

generator-bones - A Yeoman Generator for Scaffolding Out a Basic Web Project

I thought I’d publish a link to a little project I set up recently as it seems to be garnering some interest on Github - generator-bones, a Yeoman generator for scaffolding out a basic web projects.

Yeoman is absolutely awesome, and if you’re not using it yet you should check it out. It comes with a generator for scaffolding web projects, but it includes a lot of things I don’t use, so I decided to create my own somewhat simplified version and include some other cool stuff that I do use - Grunticon for automating your SVG workflow, and Assemble for building static HTML files from modular templates and data.

Enjoy!

Graphic Novels You Should Be Reading

image

One of the loves in my life, other than web design/dev and movies, are graphic novels. The designer in me really gets a kick out of collecting gorgeously illustrated works of art. As with my taste in films I tend to lean towards darker stories and I would like to tell you about some of my recent discoveries. So, in no particular order…

Read More

1 2