Front End Development Workflow

Although my front-end development work slowed down in 2012, I still managed to adopt a lot of new tools and processes in my development work. Perhaps slowing down and working more in pure design gave me the desire and breathing room to look around and see what was new. I feel like my workflow really changed dramatically this past year, enough that I'd like to take a couple of minutes and write these changes down and hopefully put something across your lap that you may or may not have seen before.

Sublime Text

I was an avid user of Coda since it was first launched, but a lack of updates initially led me to investigate other options (Sublime Text). After Coda 2 was released, it was clear to me that I would be using Sublime Text as my full-time text editor. Frankly, I was a little disappointed with the upgrade to Coda and felt that the application had become bloated and clunky. Furthermore, much of the way Coda worked no longer fit the way I was starting to do front-end development. So, I was looking for an IDE that was simpler, lighter, yet still really flexible. I looked at Espresso and Chocolat, both of which had many features I liked, but I ultimately settled on using Sublime Text. This app may or may not be for every designer or front-end developer, but if you're in the market to try a new editor, I would highly recommend it.

Sass & Compass

After using Less for a handful of personal projects, I decided to dip my toes into Sass and see what all the fuss was about. Jumping into Sass for most designers isn't easy, in my opinion. The documentation can be a little confusing or vague, and I think it takes more of a developer's mindset to grasp a lot of what it can do. After some initial hurdles, I stuck with Sass and continued to use it for a few more personal projects, and things started to click. From there, I checked out Compass and knew I wasn't ever going back to Less. Less is still a great pre-processor, but in my opinion, there are a lot of advantages Sass has over it. I don't want to go into them here because there are a lot of other people who have written more extensively on this subject, but at the end of the day, both are great options if you want to get into using a CSS pre-processor.

CodeKit

Although CodeKit does a lot more than compile Sass, it has really made working with it a pleasure. I would highly recommend it if you're going to use a CSS pre-processor in any of your projects. There are a lot of other great features too, like live browser reloading, CSS minifying, and file compression.

Github & Git

Being more of a designer, version control was always honestly a little bit foreign to me. I had some exposure with Subversion and CVS working at previous companies and was familiar with a lot of the concepts of source control. But, this past year I really decided to hunker down and learn Git. I wanted to start versioning a lot of the HTML and CSS that I worked on, so I wouldn't have to reinvent the wheel every time I started a new project. This way, I could also continually improve the code that I worked on, so I started moving all my projects to Github.

Markdown

Markdown has been around for a while, but I've only recently incorporated it into my workflow. I have Jekyll to thank for this, but I've also found that Markdown is superior in many ways to plain text. I'm now using it in a lot of places, such as my GitHub gists, documentation files, and personal notes. I went ahead and purchased Byword on my Mac, iPad, iPhone, and iCloud. The syncing works really well, so now I can edit or work on any document I have saved, no matter where I am. Mou is also a really nice free Markdown editor that has a great export and preview feature, so you should definitely check it out.

Static Site Generators

I think we all saw a lot of designers and developers ditch their CMS last year in favor of using a static site generator. It's easy to understand why; there are many compelling reasons to use something like Jekyll, such as portability, easy maintenance and simplicity. After using Stacey (a great static site generator written in PHP) for about a year, I decided to check out Jekyll after reading many positive reviews. I purchased Mijingo's Jekyll screencast, which helped me get up and running quickly and made it easy to hack on.

Alfred

Alfred isn't just a pure front-end development tool, but it has enough features in this area to make it worth mentioning. I think some people may think of Alfred as just a file launcher, which isn't true. If you invest in the Powerpack, you'll find a lot of value in this software. There are two key features Alfred provides that keep me using it: clipboard history and snippets. It's like combining several Mac apps like Jumpcut and Textexpander into one place. Plus, Alfred is actively developed, so you can feel good about buying it.

I'm really happy with my workflow lately. It's improved a lot this past year and I'm always looking for new software, frameworks, and technology that can make my development faster, easier, and better. What have you found this past year that has improved the way you work?

Posted on January 9th, 2013