Front End Developers – A Bunch Of Tools

I’d like to start by saying that this was meant to be a short list of a few tools that we front-end developers use on a day to day basis to build websites. Unfortunately, it’s not really that simple and it turns out we use quite a few apps, tools and websites to get our jobs done. So, here they are:

A Mac

I shouldn’t have to expand on this should I? Why would you use anything else???

Developing

Chrome + Extensions (Web Developer Toolbar, YSlow, Awesome Screenshot, EditThisCookie, ColorZilla) + Developer Tools and Console + Emulation

For me, Chome is the best browser to build websites in. This is mostly because I’m a fan of speed and ease of access, and I find other browsers just can’t compete with Chrome in these areas. The extensions and tools listed above make it the best environment for building, testing and debugging.

Sublime Text 2 + Packages (Advanced New File, Alignment, Emmet, Gist, Inc-Dec-Values, Indent Guides, JQuery Snippets, Sidebar Enhancements, Transmit Docksend, WordPress)

Sublime Text is the definitive text editor. I don’t want a screen taken up by buttons and panels and menus, I just want to write code, fast. ST2 fits perfectly with how we work and offers us the tools we need to get our jobs done.

Transmit

There are hundreds of FTP clients out there, and the vast majority of them are free. Unfortunately the vast majority of them are dumb. Transmit may be considered expensive at £24 but the time it has saved me, especially as ST2 can plug straight into it, it has paid for itself many times over.

Photoshop + Plugins (ICO file format)

The industry standard, and an application we need to know our way around. When building a site we’ll spend a decent chunk of time in PS so we need to know how to use it, and how to communicate with the designers (in their language) to get the best out of their work.

iTerm

Sometimes, stuff just has to get done the old fashioned way and we need to know how to use the terminal. iTerm just makes the experience a bit nicer.

Speed

Alfred + Powerpack

This is a powerful system search and app launcher. With the powerpack it also stores your clipboard history and makes it available at the press of a keyboard shortcut. Perfect for a speed freak like me.

1Password + Chrome Extension

We look after hundreds of websites, they all have admin login details, cpanel usernames and password, MySQL usernames and passwords, Google Analytics accounts, Facebook accounts…you get the idea. 1Password allows us to store all of these secure passwords (which are all strings of gibberish!) and the extension does all the searching and logging in for you!

LittleIpsum

You’re building a site and you need to put some dummy text into it. Click a button, select from a word, a sentence, a paragraph or a few paragraphs and it’s in your clipboard ready to go.

Hot Corners (Mac feature) and Total Spaces

I’m constantly flicking from app to app, from window to window and I cannot stand mess, even on my computer! Apps are organised into a grid of four virtual desktops (two by two, through Total Spaces) and the bottom corners of my screens are set up to show all of my open windows. I don’t want to waste time trying to find something, it’s a daft problem to have.

Productivity

Google Keep

We have a project management system which stores all of our tasks and jobs, but sometimes you just want to make a simple list. Be it changes you’ve made to a site that you need to remember or a reminder for a support ticket. Google Keep is simple and fast, perfect.

Spotify

Keeps us focused, keeps us going.

Websites

Google

It’s your friend!! If I don’t know something, I go here, and usually end up at…

Stack Overflow

Life as a web developer would be painful without it. Our industry benefits so much from community and people that are so willing to share solutions to so many problems.

WordPress Codex

After Stack Overflow, we end up here. Most of the site we build are in WordPress and it’s impossible to remember every argument of every function. It’s possible the best documentation on the web…

PHP Manual

Second only to this behemoth. As we build in WordPress, we have to know PHP. Don’t get me wrong, we’re not back-end developers, but, as with the designers, we need to be able to speak the language to get problems sorted.