Development Software and Tools

March 4, 2021
Tips and Tricks Web Development

HomeTips TricksDevelopment Software And Tools

I’ve been building websites for the better part of 6 years now. In that time, I’ve switched operating systems four or five 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!

Text Editor

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:

I like the way VSCode looks out of the box, but if you don’t, it’s pretty customizable. 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.

Browsers

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:

Virtual Server

For all of my local testing (pre-staging), I use MAMP (Mac Apache MySQL PHP). I stole a license from my old job, so I do have the Pro version, which has SSL. 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. If there is anything else and you’d like to see me try it, shoot me a message at nate@natenorthway.com.

Sass

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. To compile, I use Dart Sass, the CLI for Mac.

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.

Software

Most of this software is free, but if it’s not, it’s really cheap or worth the price

Services

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.

Hardware

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.

MacBook Pro (13-inch, M1, 2020)

I’ve got a 12-inch M1 MacBook Pro with 8GB RAM and 256gb onboard flash storage, running Monterey 12.1. I am a fan of this, despite the touch bar. It’s a great computer that is capable and fast and just as much of a workhorse in 2022 as the rMBP I used to have was in 2015. My only issue with it is the touchbar, which sometimes has a slow response or no response at all. This computer has never crashed, and even runs a bunch of games I thought I’d never play on Mac. However, at work, I have the 2021 16″ Model, with the M1 Pro – and that’s quite the workhorse. I’m hoping to get that before long.

Accessories

Other Hardware

There is other hardware I use nearly daily, mostly for research, communication, or testing purposes.

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.

No Comments...yet

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post

URI Schemes for the front end

From March 2, 2021

URI Schemes like mailto and tel are common, but there is a whole lot more out there.

Read This Article
Next Post

Let’s Build A More Accessible Collapsible

From September 6, 2021

Collapsible elements are useful pieces of UI that make digesting lots of content easier. But they’re often not accessible.

Read This Article