My 2013 Frontend Web Development Workflow

My frontend development workflow for the new year.

I've refined my frontend development workflow over the last year and learned a few new languages along the way. The list below is a breif guide to all of the software and languages that I now use on a daily basis. If you have any suggestions, feel free to leave me a message in the comments below!

Note: Just a heads up, I develop exclusively on a mac. Some of the tools towards the bottom might not apply to the windows and (to a lesser extent) linux users out there.

Languages & Frameworks

  • Git / Github / Tower - This might be the most important set of utilities in my toolkit this year. Git helps me from entering development hell by helping me crate snapshots of my projects and [dividing projects] into sub-projects.

  • Stylus / nib - CSS with less syntax, variables, mixins and inheritance. In my opinion, better structured code. Stylus is virtually backwards compatible with SASS, SCSS & CSS so it makes the learning curve much more approachable.

  • JADE - Jade, similar to HAML, is a language that lets you write HTML without the extra syntax and forces you to write in an indented fashion, which is easier to read. (I will probably be switching to SLIM, a JADE+ so to speak, once a javascript interpreter is created)

  • CoffeeScript - I've only recently converted to developing all my projects with CoffeeScript, but I haven't turned back since. CoffeScript is a language that lets you write javascript in a much more succinct and expressive way. At the end of the day, it's still javascript after its compiled, but productivity has been up (and headaches have been down) ever since.

  • Node - I'm not a backend developer but its nice to easily create a command line tool using Javascript (or CofeeScript). This blog also runs on a Node based platform called Poet.

  • Semantic Versioning - This methodology is a set of guidelines on how to approach labeling the different versions of the same software. I'll be using this in all of my project's roadmaps and changelogs from now on.

  • Oh My Zsh - Frontend development is finally showing signs of maturity with the vast amount of tools available. Most of these are command line based tools, so having a better relationship with your terminal is a crucial factor to your success in this industry. Oh My ZSH is a set of open source scripts for ZSH (an alternative to the bash prompt) to simplify movement inside the command line.

Tools

  • Sublime Text 2 - I was a loyal TextMate fan since 2007, but the lack of updates left me wanting more out of a text editor. Sublime was built with programmers in mind and the preference window wont convince you otherwise. Sublime has a handy package manager available in and encourages you not to leave your keyboard for faster development sessions.

  • VIntage Mode - I've unsuccessfully attempted to adopt VIM into my workflow many times in the past. Now with sublimes vintage mode, I'm going to try to use the mouse less during development.

  • Chrome - As much as I love Safari's native look on my Mac, it just doesn't hold up to the depth of Developer Tools and Extensions on Google Chrome.

  • CodeKit - Codekit allows you to code in several preprocessor languages (CoffeeScript, JADE, SASS, Compass, etc) and will compile them into HTML/CSS/Javascript in real time. It also reloads your browser automatically to speed up your development time.

  • TextExpander - I'm using this one less and less thee days but it will plays a vital part in my frontend development workflow. Whether its responding to common client emails or odd username/password combinations, its great to have a nice shortcut setup for the computer to type for you

  • TotalTerminal - Simply put, TotalTerminal gives me very quick access to the command prompt by showing or hiding the terminal with a keyboard shortcut.

  • Dropbox - Dropbox is the best tool for synchronizing and backing up preference files. You can easily create a symbolic link to the dropbox folder and never have to think about backing up it again.

  • Marked - All of my posts here are written in markdown syntax. Marked lets me view the layout of my posts as I'm typing them.

  • Yeoman - This isn't necessarily an app in itself, but rather a collection of apps to streamline the process of downloading components, setting up boilerplates and compiling your code.

  • CheatSheet - Ever wanted to speed up your workflow with keyboard shortcuts? Just hold down the ⌘ key for 3 seconds in any application and CheatSheet will open with all of the current app's keyboard shortcuts.

  • Transmit - Although all of my modern development is managed with git, I still use FTP when managing some older websites of mine. Transmit has a gorgeous and intuitive interface for managing your remote files.

  • Flux - Flux will mimic natural lighting by changing your screen colors based on your current time and location. This app helps keep my circadian rhythm in check after an all night coding session.

  • Dimmer - The MacBook Air has a bright screen even at its lowest setting. Dimmer adds a layer of black to the screen to reduce the light levels even further.

  • Spaces - This has been around for a while but I've finally managed to work in Mac's Spaces into my development cycle. With the plethora of tools now available to frontend developers, window management becomes an important factor in keeping yourself sane.

  • TaskPaper - I've tried all of the popular task managers out there, but most of them tend to over complicate things. TaskPaper is just a step above Mac's TextEdit with automatic formatting and simple keyboard shortcuts for managing tasks.

Productivity Tools

  • Alfred - Alfred is a great replacement for Spotlight. I use it primarily as an app launcher, quick access to a calculator, and to access my iTunes library.

  • Concentrate - Concentrate allows you to automate opening files, switching desktops and block websites based on the type of work you are about to preform.

    • Pomodoro - I'll admit, I'm not the best with time management. Luckily, computers were created to solve problems for us. Pomodoro adopts the Pomodoro method and keeps me in check by encouraging me to work on sections of work and taking small breaks in between.

      I've also taken this a step further and [created a hack](/posts/ how-I-force-myself-to-take-breaks) to force my self into taking breaks. If you don't want to compile the code yourself (I don't blame you), you can download the app here

  • Sparrow - Apple's Mail client has gotten sluggish over the years. Sparrow is light on the user interface and mimics the flow of Gmail (including its keyboard shortcuts). It even rewards you for reaching Inbox Zero.

  • Better Touch Tool - This is quite possibly one of my favorite productivity tools. BTT allows you to assign keyboard shortcuts or mouse gestures to common actions, such as window management, launching apps, itunes access & more.

  • Better Snap Tool - One feature that I've always admired from windows users was the ability to throw a window to the edge and have it expand to that section of the screen.

Help & Support

  • ProStack - Stack Overflow is a great resource for developers to ask programming related questions. The level of talent there is incredible and I typically get a response within 30 minutes.

  • Linkinus - IRC has been around since the technological stone age, but it's still quite popular with technophiles. Freenode is the defacto IRC server for most open source projects.

  • Forrst - Forrst is THE social network for frontend developers & designers. Twitter has its place too, but you're more likely able to build a better community from the people on Forrst.

Miscellaneous

  • GrowlVoice - Rather than typing on my phone, GrowlVoice notifies me of new SMS messages and lets me quickly respond to a text without taking my hands of the keyboard. (You do need a Google voice account for this)

  • Bartender - With all of the useful apps out there, your menu bar can clutter up fast. Bartender will store less important menu bar icons in a sub panel, and display them only when their status changes (i.e. an instant message)

  • Hazel - Hazel is a simpler version of Apple's Automator. I have it set up to constantly archive the files on my desktop on a weekly basis. As a bonus, it also gets rid of System files when you move them to the trash.