javascript web components phantomJS CSS bash LESS productivity layout performance semantic web


A Practical Guide to ES6 Destructuring

What is destructing? There’s a new way to assign variables in ES6, and it’s called destructuring. If your familiar with Perl or Python, this is nothing new, but if all you know is JavaScript, then saddle up. Instead of assigning a single variable at once, like var a = ‘apple’; destructuring lets you ass… read more


My First Web Component

If you're like me, you've probably heard a lot about Web Components^tm over the past few years, but if you've never created one yourself, I'll show you how. As you probably know, the Web Component spec is a beast. It encompasses the Shadow DOM, Custom Elements, HTML Imports, and Templates. All… read more


Batch Rendering Screenshots with PhantomJS

There are 1001 ways to skin this cat, from browser plugins to dedicated apps, to just using the "command+shift+4" shortcut on your mac. However, if I want to take multiple screenshots at once, I prefer the most automated way possible. PhantomJS describes itself as a "headless WebKit… read more

CSS Ruler

Ever used a 'ch' or 'ex' unit in your CSS? Neither have I. Anyway, it's nice to know they exist. This CSS ruler displays all the valid CSS length units available. When you hover over each unit it reveals a description of that unit. Here are some fun facts I learned while making this: Percentage… read more

Javascript Recipe: Partial Application with Iterators

I've read about partial application in Javascript many times, however the concept has always seemed academic and I've rarely applied it to my own code, until recently. For those who are unfamiliar with the concept, I recommend this article by Reginald Braithwaite on the subject. His definition of… read more

Easily Split Videos with FFmpeg

Forget iMovie, FFmpeg is the easiest way to take long videos and split them into smaller clips. Unlike most developers, I actually prefer using GUI's over the command line, but after messing around with iMovie for half an hour, it dawned on me that FFmpeg is much better suited for this task. If… read more


Tumblr Theme Development with Dropbox & LESS

This is a simple tip to speed up your tumblr theme development. Most of the work on Tumblr themes is really just CSS. CSS preprocessors can make writing CSS a lot easier, so wouldn't it be great if you could use them while building your tumblr theme? With LESS CSS, you can. LESS in The Browser… read more

How to Write an Effective To-do list

You've made millions of lists in your life, but have you ever though about how to write a to-do list effectively? I have, and this is what I've come up with. Make it Focused As the name implies, a to-do list is a list of things to do. A good to-do list contains items that are focused and… read more

A Justified CSS Grid Revisited: The Bane of inline-block.

Last week I discovered a pretty novel way of created a CSS grid layout. After living with this layout for a week, I revisit some of the pitfalls it has caused. The Bane of inline-block The pitfalls of using inline-block for layout have been well documented over the years, however it seems I'm slow… read more

A Justified CSS Grid Layout

CSS Layouts are hard. Emerging standards like flexbox make them easier, but what if you need something that works in older browsers, Like IE8? This question led me to a pretty novel idea. The Problem This is the layout I wanted to create. It's a simple grid with three items per row. Notice the… read more

Creating Your Own CSS Grid System

CSS Grids have been around a long time. Often they come bundled in frameworks such as Bootstrap. I'm not a Bootstrap hater, but sometimes using a framework is overkill if all you really need is a grid. Here's how to make your own CSS Grids from scratch. The elements of a CSS Grid As we can see,… read more - An Introduction to Structured Data is a standardized way of using HTML on your website that makes it easier for search engines to find stuff. In this post I'll be going over what is all about, the problems it solves and why it should be an important weapon in your web-designer arsenal. is an HTML… read more 101 - The Basics

The purpose of this post is to teach you how to read the documentation on After reading this post I hope you'll be able to look at a page like and instantly understand how to implement this microformat. A Quick Intro To The purpose of is to make… read more

Open Heart Doxie Surgery

This isn't about dogs, it's about the Doxie Go Scanner, and how I MacGyvered it back into shape with nothing but a piece of paper and some masking tape. After what felt like months of waiting, my Doxie Go scanner finally arrived at the post office today. This itself was a miracle, considering the… read more

Custom Sketch Artboard Presets

I love Sketch. It's my web-design tool of choice, great for creating mockups, prototypes, icons etc. When creating artboards in Sketch, you can choose from a set of -- in my opinion, very apple-centric -- presets. Here I'll show you how to create your own artboard presets. The Easy Way Clicking… read more

What Does It Mean To Make Something 'Intuitive'?

"The only intuitive interface is the nipple. After that it's all learned." Bruce Ediger When we say something is intuitive, it means that something easy to use. We don't have to spend time reading instruction manuals to figure out how it works, we just use it, and it works. It's simple.… read more

Expanding VirtualBox Hard Drives on a Mac

I do all my web-development through VirtualBox on my mac. This lets me run Ubuntu Server on my local machine and gets me a little closer to replicating a production server on my mac. Occasionally though, the VirtualBox hard drive gets full and I need to expand it. This is how I do it. Disclaimer:… read more

Designing With Data

A recent episode of the Big Web Show, 'Designing with Data' touched on this topic and it got me thinking. In the episode Zeldman mentions Doug Bowman's famous '41 shades of blue' experience at Google. For those unfamiliar with the story, Bowman was designer at Google, and on one occasion, the… read more

The Importance of Perceived Speed

"Page speed is in the eye of the beholder" - me. As I was browsing youtube recently, I was struck by just how fast clicking through pages seemed. Now obviously, Google should have the fastest servers on the planet, but it got me thinking about that red loading bar youtube introduced last… read more

From Kindle to Calibre to iBooks

epubs and mobis and azws oh my! Let's face it, the Kindle For Mac app is horrible. It's not optimized for retina displays, and hasn't been for over a year, making it essentially useless on my retina macbook pro. Also, you cannot copy and paste from it. However, like many people, I own a kindle, and… read more


nvALT and Middleman FTW

Static site generators are soooo hot right now. But let's face it. They're a pain in the ass. It's a fact. Anyone who's ever switched to a static site generator for the purposes of blogging has fallen off the face of the earth. It's been documented here, here, and here. Why? because Fact Of The… read more

Progressive Enhancement

Back in September, the web got a bit riled up about progressive enhancement. Zed's Dead by Tom Dale sparked the debate. I'm all for javascript-driven web development, but I think there's a right way to go about it, and I think if we dig a little deeper, p.e. can lead us in that direction. … read more