The Knife Block: Tools of the Trade

I have a confession to make: I watch quite a bit of Food Network. Like almost a lot a lot. Don’t get me wrong – food is great, but my favorite part of watching is seeing highly skilled individuals wielding the tools of their trade with skill and finesse. Unlike a Web Chef, every tool that a Chef touches is visible. Anyone watching the Food Network could, theoretically, walk into a restaurant supply store and walk out with the tools needed to begin emulating their favorite chefs. Much of what Web Chefs do, however, is trapped in the (sometimes literal) black box of our computers.

It seems like every couple of years, there is a new gold rush of ideas about “getting into web development” and how all you need is a four year degree in Computer Science or maybe a 6 month boot camp (that costs roughly as much as a four year degree) or maybe just spend your obviously ample free time hacking through browser based courses and contributing to the incredibly friendly open source project of your choice. All of these seem to miss a vital first step however: learning the existence of, and usage of, the actual tools you need to do the job. Some of these tools are physical: a different keyboard; a standing desk; a vertical monitor. Some of these tools are software: a text editor; a browser’s developer tools; a version control system. Some of these tool are conceptual: hooking up remotely to your tablet through your desktop browser’s developer tools; using a CSS preprocessor to save wear and tear on your bourbon elbow; the fine art of rubber ducking. In this blog series, allow us, the Web Chefs, to invite you into our kitchen and show you some of our very favorite tools. Maybe they will become your favorites as well, but the intention is simply to show you different options and help you find what works best for you.

As the first entry, there is a considerable range of tools I could cover, however I think I am going to stick to the absolute basics: what can’t I live without as a web developer?

Hardware

A good keyboard is likely the best thing you can invest in, hardware wise. Even if you use a laptop without any other peripherals, an external keyboard can make all the difference in productivity. Some people like super clicky keys, like Austin’s own Das Keyboard, some enjoy the gentle curve of a Microsoft Natural. After putting countless full width clicky keyboards out to pasture after a key or two stopped responding, I’ve found myself gravitating towards the stock Apple keyboards. I currently use the Apple Bluetooth keyboard, the aluminum one without a number pad. Losing the number pad made for an easier reach to my trackpad, which cut down on some forearm strain. Losing the click also meant losing a lot of the pressure necessary for making the click, and while I may not type noticeably faster, I do find key combos (like the indispensable ctrl+space that brings up my robot butler Alfred) easier and more responsive, as well as being able to type longer without needing to stop and stretch out my fingers and wrists. You do take regular breaks to stretch out your fingers and wrists, don’t you?

Software

The most necessary piece of software for any web developer has to be the code editor. You have a near limitless set of options here, from the terminal based Vi / Vim, to the lightweight Sublime Text, to the heavier duty IDEs like PHPStorm and Eclipse. Your computer OS will make some determination for you – BBEdit can’t run on anything but a Mac – however the majority are available on Mac, Windows or Linux.

I’m personally a fan of Sublime Text, currently running the stable beta of version 3. It’s fast and it doesn’t get in my way, which is my starting point for considering software. I prefer a darker background, and recently switched to the nearly chrome-less Spacegray UI theme and the included Spacegray Eighties code highlighting theme. I’m currently enjoying Anonymous Pro as my code editing font, after a long time using Inconsolata and a brief dalliance with Source Code Pro. I have a slew of language specific Sublime Text packages installed, to highlight the syntax of all of the different languages I run across regularly. One of my personal favorite functional packages is GitGutter, which helps you see at a glance which lines of a file have changed, so I don’t have to bounce out to my terminal to run ‘git diff’ as often.

General advice

As a Web Chef working outside our Austin headquarters, one of the strange things I miss from my in-the-office days is some kind of background chatter. The gurgle of a coffee pot, the tapping of keyboard keys, the muffle cries of “PC Load Letter?!?!”. At home the only sounds that keep me company are the stomping feet of the teenagers who live in the apartment above and the occasional plaintive cries of hunger from my cat. I like to listen to a variety of music and podcasts, depending on the task at hand. Deep in a custom module with some thorny database modifications? Podcasts are generally too distracting, however music light on lyrics and generally calm is perfect: CHVRCHES, Katy B, Calvin Harris. Theming and CSS work? Something with a bit more oomph or a conversational podcast are ideal: Beyoncé, Childish Gambino, Neko Case on the music side, and Back to Work, Jordan, Jesse, Go!, IRL Talk on the podcast side. And of course, sometimes you just need silence.

Now finding what you like to listen to is almost as important as finding how you like to listen to it. I spent many years with a pair of earbuds in, but then discovered on ear headphones, like my trusty Sennheiser HD-280s, brought a different distance and timbre to what I was listening to, allowing it to fade into the background better. Working from home I have the ability to use a pair of Roland DM-10 desktop monitor speakers from my filmmaking days, which works even better to bring some aural distance between me and my audio, which I find helps create and maintain a mental distance, keeping me focused.

What works best for you?

Photo credit: Knife Block by Rina Pitucci / CC BY-ND 2.0