Articles I've written about workflow, code, tools, productivity tips, and more.

Pattern Build: CodePen Card

In this new Pattern Build series, we’re going to pick a pattern on the web and write modular, responsive, and reusable HTML and CSS for the particular pattern. This week, we’re going to recreate the cards seen on CodePen.

Documents on GitHub

I’ve talked a lot about GitHub in the past for version control, as well as working collaboratively with a team. However, I’ve found additional uses for GitHub. Particularly, storing documents -- a collection of Markdown files -- that are managed entirely within GitHub’s interface. Let’s talk about how to set this up.

You Don’t Have to Know Everything

Today’s web developer is exposed to a lot of technologies. And I mean, like, a lot. Seriously. There’s a new JavaScript framework every other day. So how do you stay on top of all of it? You don’t.

Personal Organization

In order to stay on top of projects and tasks, I use a combination of notes and todos. When working on a team, I use tools like Trello and GitHub, but these notes and todos are just for me, so I have a specific approach to how I manage them. Let’s talk about each of these systems of organization.

Spreadsheets Can Be APIs, Too

In the previous post, “Spreadsheets Can Be Pretty, Too,” we talked about how to make our spreadsheets more visually appealing. In this post, we’re going to do something — at least in my mind — infinitely cooler and more useful. We’re going to publish our spreadsheet to give us the data in JSON, and, from there, consume the JSON with JavaScript to display the data. Let’s do this!

Spreadsheets Can Be Pretty, Too

Spreadsheets are excellent for presenting information in an easy-to-read format. They allow you to present data, make calculations, and apply conditional formatting. But, if we’re being honest, they sometimes leave much to desire in terms of design. That doesn’t have to be the case, though! Let’s talk about some easy ways to format spreadsheets for maximum pretty.

Tool Sharpening

Workflow automation is all about continual refinement. Nothing is perfect, and you will continually evaluate and improve your systems of organization. It’s an endless battle, and things can always be better.

Improving Efficiency With Alfred

Alfred is a powerful efficiency application for the Mac. I use it to launch applications, search sites on the web, create custom workflows, and a whole lot more. I’d like to focus on a few, specific aspects of Alfred usage: Custom Searches and Hotkeys.

Input-System-Action Process

To test systems of organization, I use a process I call the “Input-System-Action Process.”

Designing Your Code

For me, organizing is second nature. It weaves itself through all facets of my life. And this includes the code that I write. No matter the language, I “design” my code to optimize readability. I’m biased, but I think it looks better, too.

Weekly Project Iterations

On the front-end team at Code School, we've implemented the idea of "Weekly Project Iterations."

Spellbook Dispatcher

Dispatcher is a JavaScript class that determines which page is active, and runs page-specific initialization code based on that determination.

Workflow Automation: Keyboard Maestro

Workflow automation improves efficiency and productivity, and there are a variety of ways to achieve it. Continuing on in the series on workflow automation, let’s turn our attention to Keyboard Maestro.

Workflow Automation: Hazel

Workflow automation improves efficiency and productivity, and there are a variety of ways to achieve it. Continuing on in the series on workflow automation, let’s turn our attention to Hazel.

Workflow Automation: Bin Scripts

Workflow automation improves efficiency and productivity, and there are a variety of ways to achieve it. Continuing on in the series on workflow automation, let's turn our attention to bin scripts.

Workflow Automation

That's my definition of workflow automation. Essentially, it's reducing a set of tasks into an automated process. In this first article in a series on workflow automation, I'd like to discuss what types of things I consider workflow automation, why it's important, and how to determine when and where to set it up.

5 Command Line Productivity Tips

As developers, we spend a lot of time on the command line. It's important to not only be comfortable working in it, but to create efficiencies for how we work in it. Let's go through 5 tips to improve productivity on the command line.

Modular CSS Tools

Contextual style changes can bloat CSS. Whether it's random spacing or color changes (damn designers), small variations can get out of hand. How can we manage contextual tweaks _without_ growing the size and scope of our CSS? Let's take a look at using single-property tool classes for managing one-off design changes.

Automated Text Formatting in Vim

I constantly evaluate my workflow to discover areas of repetitiveness. If I’m continually repeating a particular process, I will work on automating it.

The Google Myth

A common misconception I see with new developers is the apprehension to “Google” something. There’s an assumption that Googling is wrong or somehow cheating. Despite popular belief, developers don't store every single piece of information in their head. Developers use Google. A lot.

CSS Architecture is Really, Really Hard

I’ve come to the conclusion that CSS architecture is the most difficult thing I spend my time on. I’ve built a Sinatra application powered by Basecamp’s API, spent time working with the React JavaScript framework, built a few Rails applications, and started learning more Ruby (outside of Rails). Yet, for me, CSS architecture takes the cake for difficulty. And why is that?

Front-end Organization at Code School

At Code School, we work hard to constantly improve the front-end development team organization. I thought I’d spend some time talking about the organization as it stands right now.

The Front-end Spectrum

Front-end development has had an interesting evolution. In the “olden” days, we were known as “web designers.” We would take pixel-perfect Photoshop files from designers and convert them into functioning HTML, CSS, and the occasional bits of JavaScript. From there, a backend developer would hook up the front-end to dynamic, server-side data to create a fully functional application.

Git & GitHub Conventions

I spend a large majority of my day working with Git and GitHub. I’m also very opinionated, so this is a random collection of opinions and techniques that I employ while working in said technologies.

Managing Projects with Trello

Trello is a great tool for managing projects. I've developed a specific project template for use in Trello that has been working out really well.

Building a Better Gulpfile

Gulp is a streaming build system that helps to automate and enhance your workflow. Let's look at some ways that we can clean up the Gulpfile in order to make it more modular and customizable.


We’re frequently building sites or applications that don’t quite lend themselves to being built with a JavaScript framework, such as Angular, Ember, Backbone, React, etc. Sometimes we only need a collection of components and architectural conventions that can make our application more manageable. That’s where Spellbook comes in.


Firstly, what are "dotfiles"? Well, dotfiles is a name used to denote a set of configuration files (generally hidden ones with a '.' before the filename) that are used to set up and configure various applications and settings.

Git Feature Branch Workflow

If you work with Git and GitHub on a large team, then you're probably familiar with the idea of feature branches.

Single Responsibility

When it comes to writing modular CSS, I try to stick to the Single Responsibility Principle wherever possible. This will limit the scope of your modules and allow you to easily build and combine them to create flexible style patterns.

Sharing is Caring

I'm not good at sharing the things that I build. Well, externally, that is. My coworkers know all about the little applications I create, and I'm more than happy to show them off to them. Why? Is it because I trust them and know that they'll only give me constructive feedback? Am I scared of the Internet? I don't know. Whatever the reason, I'm not doing it anymore. I've let way too many projects sit in a private GitHub repository. No more!


Middleman is my preferred tool when it comes to building static sites. Not only do I use it on all my deployed sites, but I use it even when I'm prototyping an application that will ultimately move into a different system. Let's talk about static-site generators and, more specifically, Middleman.


In this article, I'm going to cover the basics I go through when setting Moom up, and cover some more advanced tips and tricks. Hopefully this is useful if you have trouble understanding Moom's full power. Let us begin.


We all have moments where a project stagnates, we get "writer's block" (or at least the equivalent of that for front-end developers), and we need a "win" to keep the motivation rolling. For me, that's building little apps for myself. Let me tell you about "Gificiency," my outlet that helped reinvigorate my motivation on a project I was working on.


Alfred is a fantastic application that I could simply not live without. It's the first application that I install on a fresh copy of OS X. I'm going to show you how to set it up to optimize your productivity with the application.


It feels like such a short time ago that Nick Walsh and I, determined to apply proper conventions to our CSS, came together and created MVCSS.

Sublime Text (2)

The usefuless of this setup guide will vary based on your personal preferences for how your text editor should function, but it should help with the initial setup of Sublime Text.

Everything is a Module

I would like to share my thought process behind building modular HTML and CSS components. I assume you have a solid grasp of HTML and CSS, and you are looking to get into the more complex details of writing modular, maintainable markup and styles.

The Method of We

One of my favorite aspects of the team at Envy Labs is the way in which problems are approached. They are not viewed as something only pertinent to the team member that is tasked to work on that particular problem. Rather, problems are approached in unison, using what I like to term, "The Method of We."

Moom is a Real Thing

Moom is a real thing, and it is amazing. There are numerous window management solutions out there on the Mac (Divvy, Breeze, etc.), but Moom is by far my favorite.