I’ve been building websites for the better part of 3 years now. In that time, I’ve switched operating systems three times, I’ve used dozens of text-editors, hundreds of tools, and many, many browsers and devices. I don’t think I’ve ever written down what I’ve used, aside from the brief mention on Twitter every once in awhile. So, I’m gonna start doing just that.
I’m gonna break down my development tools and software here, then when something changes, whether I add to or remove something from the pile, I’ll update this article (without removing what was replaced, if anything was). So, let’s go!
I think the text editor is the heart of every developer’s tool kit. It’s where in most of the work of development is done, and can lend a huge hand in speeding up (or slowing down) your website development game. When I first started looking for editors, I wanted something that was free, good looking, open-source, and had good documentation. I still want all those things, but I want more than just that short list. I also want something I can customize, with a nice set of default features but can also be built on, and a good community behind it.
For those reasons, I hang with Atom.io, ‘the hackable text editor’.
I like Atom because of all the things I mentioned above: it’s free, good looking, open-source, has good documentation, it’s customizable (read: hackable), has nice default features, is expandable, and has a pretty good community behind it.
I run Atom with a few (non-default) packages:
- Remote-sync by yongkangchen: FTP in the editor. Works from a single JSON config file. The only thing I don’t like about this is that there isn’t a default keybinding.
- Atom-minify by armin-pfaeffle: Minification of CSS and JS files, with an option to minify on save. Minify in file or directly to another file
- Autoprefixer by sindresorhus: Adds browser prefixes to CSS properties/attributes. No need to find and manually update prefixes. Comes with lots of options
- HTML-Head-Snippets by joshbuchea: Josh Buchea’s HEAD is a really good resource for solid SEO and general
<head>content. This package lets the developer add snippets into their file right from Atom, eliminating a Copy/Paste step.
- Linter by atom-community: A base linter. You do need to install specific packages for your language, but it does really well and all of the packages are robust and work like a charm.
The other thing I like about Atom is that it just looks really damn good. The dark theme is what I went to right away and the syntax highlighting and colors, oh man, everything just feels like the exact thing I want to look at when coding.
Among other important tools in a web developer’s kit lie the browsers they use. I’m not going to break down everything, but I will break down what browsers I use and for what purposes:
- Chrome: Chrome is my daily driver. I use it for all my normal browsing, in addition to some testing. I do most of my layout testing in Chrome and a lot of the initial design in Chrome as well. I always disable plug-ins while first testing, but once I’ve got things going how I like, I re-enable plug-ins that are known to disrupt UI (post coming about that soon, I swear!).
- Safari: I rarely use desktop Safari for normal browsing, but I use it daily for testing. I usually open up Safari when I’m done with initial layout/design elements in Chrome. I’m constantly testing on my iPhone for mobile Safari, from first layout to final touches.
- Firefox: I don’t use Firefox for anything other than testing. I don’t like it. That being said, it can bring up a lot of issues that aren’t found in other browsers, so it’s important to test in. I usually don’t open it until I’ve gotten to putting on final touches.
- Mobile Chrome: I really dislike Android, not for the design or UI, but because of the inconsistencies across hardware platforms. For that reason, I’ve never intentionally bought an Android device. Until I realized I needed to, about a month ago. So I started using mobile Chrome and the Android browser to test alongside the rest of my flow. The tablet I have is always sitting on my desk, ready to look at whatever. It also serves a double purpose as my media device, so music is always streaming from it. Helps with the mood.
- Anything else: Unless there is a real use case, I don’t test in other browsers. I use a Mac so testing in IE and Edge are annoying, at the least, and difficult, at the worst. But I do run a Windows VM and once I’ve started staging the site I do a quality check in IE (back to 12) and Edge. I do, also, quality check on Firefox and Chrome on Windows.
For all of my local testing (pre-staging), I use MAMP (Mac Apache MySQL PHP). It’s really easy to set up, requires VERY little maintenance, and comes with everything that I need: Apache, MySQL, and PHP. It also comes with the ability to connect different devices on my local network, and when I have it set up correctly, I can remote into my network from a client’s office (or the coffee shop) to see what’s being worked on at home. This makes pre-staging testing a breeze and makes local development kinda fun!
I don’t know what else is out there, to be honest. As far as virtual server software goes, my understanding is that MAMP is the cream of the crop, baby. If there is anything else and you’d like to see me try it, shoot me a message at email@example.com.
I use the Sass preprocessor to make writing CSS a lot easier and a bit more programmatic. Atom plays nicely with it and it’s really easy to learn how to use.
I think that just about wraps up everything that is worthy of a breakdown. I use a lot more tools, but not all of them are worthy of a full breakdown. I’m happy to list them, but why I use them should be evident if you visit the link I’ll provide
Most of this software is free, but if it’s not, it’s really cheap or worth the price
Most of these services are free to some extent, but most of it has a paid option that is vastly superior to the free option. I really suggest that with the free stuff you strongly consider their paid alternatives. Google Suite, CodePen, and Browser Stack are the services I’m happy to pay for because the functionality they provide is unmatched. Look into what’s right for you, though.
- Hosting: Site5
- Fonts: Google Fonts
- Icons: FontAwesome and Google Material Icons
- Domains: Namecheap
- Project Management: Trello
- File Management: Google Drive
- Even More Browser Testing: Browser Stack
- Favicons: Real Favicon Generator
- Demos: CodePen
I was motivated to list my hardware. I think it’s important to note that hardware is pretty interchangeable. What I have is not the best setup. It’s the best setup for me. Some software is very necessary. Like, a text editor, a virtual server, and an FTP client, I would say are necessary parts. Which ones you use may not be so much. The same goes for hardware. A computer is absolutely necessary, but multiple testing devices probably aren’t, though they’re nice to have. That being said, here’s what I’ve got.
MacBook Pro (Retina, 13 inch, Early 2015)
I’ve got a 13″ 2015 rMBP with 128gb flash storage, 8GB RAM, and the 2.7GHz Intel Core i5. I run El Capitan. I love this computer. It’s powerful enough for what I do, the battery lasts all day through meetings, it looks great, the keyboard and trackpad feel great, and it’s pretty durable, too.
I don’t like two things about it. First off, it doesn’t like to read my hard drive. I’ve been told this is an OS level issue, but I’m hesitant to upgrade to Sierra. Secondly, when I stress it, it tells me. I’ve never had a laptop that heats up or gets as loud as this one. But those two compromises are much smaller than the compromises I’ve had to make with most of the previous laptops I’ve owned.
- Acer 23.5″ Monitor
- WD 1TB MyPassport for Mac (entertainment, backups)
- Logitech Wireless Mouse
- Kingston 16GB Flash Drive (jump drive?)
- PS3 Controller for gaming
There is other hardware I use nearly daily, mostly for research, communication, or testing purposes.
- iPhone 7
- NeuTab N7 Pro (cheap Android Powered tablet for testing, reading/comms on-the-go)
- Samsung 19″ Monitor (more testing)
In addition to all that crap, I also always carry a notebook and a couple nice pens. Nothing beats jotting down ideas. Don’t throw that paper away. On slow days, I look through these notebooks (I have 7 on my bookshelf now) for inspiration and add lost ideas to my Trello ‘ideas’ board (after deliberation).
I also use these notebooks for initial meetings with clients. Unless absolutely necessary, when meeting clients, I keep my laptop in my bag and engage with the client, writing down specifics in the notebook and translating that to a Google Document later.
This list is incomplete. I use more software and services, but I don’t use them every single day. As I come across pieces that I’ve missed, I’ll add more to this article.