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 where 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 had not seen before.
I was an avid user of Coda since it was first launched, but a lack of updates initially brought me to investigate other options (Sublime Text). After Coda 2 was released it was clear to me that I was going to be using Sublime Text as my full-time text editor. Frankly, I was a little disappointed with the upgrade to Coda and felt that this application had become slightly bloated and clunky. Also a lot of the way Coda worked in general no longer fit the way I was starting to do front-end development. Now, I was looking for an IDE that was simpler, lighter but still really flexible. I looked at Espresso and Chocolat, both had a lot of 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. I also think it takes more of a developer mind 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 that 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.
Although CodeKit does alot 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 alot of other great futures too like live browser reloading, CSS minifying, and file compression as well.
Github & Git
Being more of a designer, version control was always honestly a little bit foreign to me. I had some exposure to 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 really 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 continually improve the code that I worked on as well, so I started moving all my projects to Github.
Markdown has been around awhile, but it is only recently that I’ve incorporated it into my workflow. I have mostly Jekyll to credit for this, but I’ve also found that Markdown is really superior in a lot of ways to plain text. I’m now using it in a lot of places like 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 and now pretty much wherever I am I can edit or work on any document I have saved. Mou is also a really nice free Markdown editor that has a really nice export and preview feature you should check out.
Static Site Generators
I think we all saw a lot of designers and developers ditch their CMS this past year in favor of using a static site generator. It’s hard not to understand why, there are a lot of compelling reasons to use something like Jekyll mainly 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 praise after praise for it. I purchased Mijingo’s Jekyll screencast which helped me ease into using it and made it super simple to get something up and running that I could hack on.
Alfred isn’t a pure front-end development tool, but I believe it has enough functionality in this space to warrant a mention. I get the feeling there are some people out there that think of Alfred as simply a file launcher, which isn’t the case. If you invest in the Powerpack, I think you’ll find a lot of value in this piece of software. There are two critical features Alfred provides that has me glued to this app: clipboard history & snippets. It really combines several mac apps like Jumpcut and Textexpander into one place. Also, Alfred is actively developed which makes you feel great about purchasing it.
I’m really happy with my current workflow, I feel like it improved by leaps and bounds this past year and I’ll be on the lookout this new year for any piece of software, framework or technology that can make my development easier, faster, better. What did you stumble onto this past year that improved the way you work?