Web Development 102: Tools

I provided a high-level overview of web platforms in the first part of this series. This second installment will delve into tools. I should also say, at the outset, that I’ve been a Mac guy for some time now, and part of what I like about OS X are the many fine web development tools available for it. But I’ll mention Linux and/or Windows equivalents wherever possible.

Text Editors

Programmers of every sort are very particular about their choice of text editor, because the text editor is where you do most of your work. And each of them works by its own logic. Being familiar with your editor helps your productivity. Having to program on your second- or third-favorite editor feels like walking a mile with a rock in your shoe.

I’ve tried out a lot of editors over the years. The first one I ever used for web development was Pico, the text editor included with the Pine email program that was popular on Unix systems a long time ago. I still occasionally use Nano, which is an open source equivalent. (You can even install Nano on OS X. The simplest way to install it and other Linux apps is via Homebrew.)

But, to be honest, I’m not very productive using Terminal-based editors. Though I’ve tinkered with vi, Vim, Emacs, and others, I prefer a graphical editor. And the graphical editor I’ve come to love is Coda. One of the things web development has always lacked, compared to a lot of other programming domains, is an Integrated Development Environment (IDE). For my money, Coda comes the closest to creating a web-centric IDE, without a lot of the baggage that might imply. Given a decent amount of screen real estate, Coda allows you to code editors, browser previews, a file management pane, and a terminal all within view or, at worst, a tab selection away.

But I get that not everyone has $99 USD to spend on a text editor. And not everyone can afford a Mac. One of the nice things about web development is it can be done on many platforms. So, while I would encourage you to buy a MacBook Pro and a copy of Coda, there are options out there where are far less expensive. Sublime Text (often called “Sublime,” for short) is a very capable and much-loved editor. It’s $70, but you can evaluate it for as long as you want. So, depending upon your sense of ethics, you could use it indefinitely. There are versions for Mac, Windows, and Linux.

There are also many free text editor options out there. On Windows, Notepad++ is a good option that I’ve used in the past. The folks at GitHub have put together Atom, which is free and available for Mac, Windows, and Linux. The folks at Adobe have given us Brackets, another free, cross-platform option. Finally, if you’re hardcore, there are implementations of Vim and Emacs for pretty much every platform under the sun.

Local Development Environments

Developing web sites, especially when you start to get into back-end work, goes much more smoothly if you create a local development environment. While you could wire one up yourself from available open source software, it’s easier to download a package that takes the pain out of it. On OS X, MAMP is your friend. MAMP originally stood for Mac, Apache, MySQL, and PHP (which is a riff on LAMP, which is Linux, Apache, MySQL, and PHP). MAMP provides those tools, of course, but it also provides tools to help manage them. And, while it’s primarily used for PHP environments, it also includes Perl and Python. Despite the name, they now make a version of MAMP for Windows. Before MAMP moved into the Windows market, my recommendation would have been WampServer, and that’s still worth checking out if you only need PHP on the backend.

  • OS X/Windows: MAMP

Image Editors

While you may never have real graphic designer chops, as a web designer, you’re going to need the ability, at a minimum, to crop and web-optimize images. If you have more money than you know what to do with, you can get a subscription to Adobe Photoshop for that purpose, or you can buy something with a less ambitious feature set that is, nevertheless, perfectly fit to the task. I use Acorn for that. It’s great, and the people who make it, at Flying Meat Software, are cool. It has everything I need and nothing I don’t. On top of all that, it’s very affordable. It’s also a Mac-only solution (do you see what I was getting at earlier, when I mentioned my preference for Macs).

I don’t know what Windows people who don’t want to pay for Photoshop use. If you do, let me know, and I’ll work it in. I suspect Linux people use GIMP (and Windows and Mac people could use it, if they wanted to).

Hosting

At some point, you’ll want to move the great site you’ve designed from your local development machine to a home in the cloud. Web hosting is a very competitive space. I’ve used several hosts over the years. I’ve been with my current host, A2 Hosting, for years. I like them. They provide a lot of value for a very competitive price.

FTP Clients

Shuttling files from local to the cloud, unless the functionality is built into your editor, requires a separate app. I use Transmit, from Panic, the people who make Coda (even though Coda has built-in file-transfer capabilities that I also use from time to time). There are many free/cross-platform options. Two that come to mind are CyberDuck and FileZilla.

Onward

Web developers can talk about tools forever. I’ll stop here. The next installment will focus on workflow.