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

How To Create An App-Like Desktop Icon For Websites (Single-Window Chrome Instances) On OSX

image

Since Google announced the demise of Reader I’ve been looking for an alternative, and I’ve settled on Feedly which is rather good. It’s sad that Reader has been shut down, but I still need my daily dose of front-end news - if you haven’t done it already, you should check out Paul Irish’s curated selection of front-end feeds.

One thing Feedly doesn’t have though is a desktop app, you have to use your browser, or a smart phone app. Whilst this isn’t a big deal I like having some things running in separate windows that won’t be affected if, for example, I accidentally close my browser by mistake.

Fortunately this is possible to do using a brilliant little shell script. Read on, to find out how.

Read More

Front-end Process, Flat Builds and Automation

I recently published a four part series of articles that document my front-end process at GPMD. They cover using Yeoman to scaffold projects, Grunt to automate tasks, and inuit.css as a CSS framework.

It took a while to put it all together, but I think it was really useful for my own learning. Hopefully it will help others too:

Grunt - Synchronised Testing Between Browsers/Devices

Today I discovered how easy it is to synchronise testing between browsers/devices when using grunt server.

UPDATE: It has been pointed out to me that I should make it clear that grunt server is part of Yeoman’s Gruntfile. If you’ve set up your project not using Yeoman then this command might be different.

Read More

1 2