March 4, 2021
Development Software and Tools
I use a lot of tools to build websites. I try to keep this list updated as my workflow adapts.
I've been building websites for the better part of 6 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'll list and talk about my development tools and software here, and 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.
Atom.io used to fit that bill, but in 2020, it wasn't being maintained and a lot of the plugins died. The remote-sync plug-in had completely collapsed and there were a bunch of forks out there with varying degrees of functionality. I gave up on atom and in early 2021 switched to VSCode. I'm still getting used to it because I spent something like 3 years with Atom, but right off the bat, it's got a lot of great features and works real well. Out the gate in default configuration, it offers a live server, which may eliminate my need for MAMP (if I can figure out how to get a dummy database going). I like it so far and have used it to build projects start to finish already. I run it with a small suite of extensions and will probably find more useful ones soon:
- Easy Sass: Have a SASS file? Compile it on save. Really easy to use and configure.
- FTP-Sync: FTP in the editor. Works from a single JSON config file. I had to add one line to the source code to fix the uploadOnSave feature not working right, but that was stupid simple and this works the best from what I could find.
- Minify: Minifies JS & CSS. Theres some config options but it does exactly what you think it does.
- Live Server: Serve pages and force the browser to reload when you save them. Eliminates a step, I guess. It speeds up the process for me a bit. Other cool features include HTTPS support, customizable host name, and remote connect.
I like the way VSCode looks out of the box, but if you don't, it's pretty cusomizable. All in all it's the best editor I've used since I first found Atom. I'd even argue that with the extensions (especially Live Server) VSCode is closer to an IDE.
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: I use a Mac so testing in IE and Edge are annoying, at the least, and difficult, at the worst. But I do have a Windows device that I can use to test in Edge, IE, and Windows versions of Chrome and FF.
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
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. If there is anything else and you'd like to see me try it, shoot me a message at firstname.lastname@example.org.
I use the Sass preprocessor to make writing CSS a lot easier and a bit more programmatic. VSCode 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
- More Hosting: Aiso
- Fonts: Google Fonts
- Icons: FontAwesome and Google Material Icons
- Domains & SSL: Namecheap
- File Management: Google Drive
- Virtual 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. I would say that a text editor, a virtual server, and an FTP client 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.
- Samsung 19" Monitor
- WD 1TB MyPassport for Mac (entertainment, backups)
- Logitech Wireless Mouse
There is other hardware I use nearly daily, mostly for research, communication, or testing purposes.
- iPhone 11 Pro
- Apple Watch to unlock my computer after I walk away
- NeuTab N7 Pro (cheap Android Powered tablet for testing, reading/comms on-the-go)
- Lenovo IdeaPad Tablet (my sole Windows machine)
- iPad Mini (testing & podcasts)
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.
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. It's also a good metric by which to measure one's growth. Looking at that first book, I see a lot of sketched layouts and very specific designs, like buttons with exact pixel values written in. More recent notebooks are a lot less dense (whitespace, baby!) and contain a bunch of math, SQL queries (lol), notes from getting my car fixed like 40 times this year, and a lot of discovery notes from meeting with clients. Everything has a subject line, so if I'm talking to a client, I'll write the date at the top with the name of the client, so that when I go back, I know what it's about.
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.