January 6, 2020
The tools I use
I’ve always thought that building a website is a lot like building a home. There are similar layers to the process. The bones of the house, the framed walls, are like the bones of a website, the semantic HTML elements. The design choices and decorations such as paint and trim and cabinet textures are like the CSS presentation layer of the web. The functionality of the home, the plumbing, the solar panels, the thermostat and heating system are like the JavaScript functionality of a website.
When you’re building a house, you need the right tools. And after my years of construction I have a set of tools that are my reliable go-tos. My framing hammer with a waffle sticking surface and magnetic divot to hold a 16-penny framing nail makes it easy to start a nail in the top of a wall without needing to find a step ladder, and it’s weighted just right so that it drives a nail in with ease. My speed square is invaluable as so many 90-degree angles appear in construction - it helps me mark boards for cuts on a compound mitre saw, provides an edge to score a vinyl tile with a utility blade (be careful doing that, I lost the tip of a finger once - it grew back), and many other useful functions. Likewise, when building a website I have a reliable set of tools that I refer to as well.
Here are my web-building tools:
Firefox Developer Edition - the developer edition of Firefox is really enhanced with the developer in mind. I usually have all versions of Firefox installed (standard, developer, and nightly) but Developer Edition is where I do most of my dev work. I’ve been a Firefox fan/advocate for well over a decade. The popular Firebug extension is the tool that first really helped me dig into code. Developer Tools, the evolution of Firebug, contains so many helpful tools for digging into code. The CSS Grid and Flexbox panels are great for visualizing these newer layout tools.
VS Code - for the kind of work I do, any text editor will do, and I have tried a lot of text editors. I can’t really say that one truly is the best -and you can’t go wrong with any of them. But VS Code just happens to be so incredibly reliable and fast, and I really like that it comes with Emmet and a lot of other useful extensions built-in. I have a soft spot for the Atom text editor, and often switch back and forth between the two. I used Notepad++ quite a bit and if I was working primarily in Windows that tool would be in my bucket for sure.
iA Writer - there is something to be said for a simple clean writing interface. I like that it allows me to focus on one sentence at a time. But I really like how iA Write offers grammar-syntax-highlighting (not to be confused with code-syntax highlighting found in text editors) which is incredibly useful is visualizing how you’re constructing sentences.
Sketch - I’ve been using Sketch for a few years for mocking up web design. The UI is so simple and intuitive for web design. I love the grid features for doing layout. I’ve also really liked using Adobe’s copy of Sketch, Adobe Xd, but as I mention later, I just can’t get my mind around the monthly subscription cost.
Affinity Photo/Designer/Publisher - sure at work I use Adobe products all day long. They are the industry standard. But I just can’t get my mind around the idea of paying an infinite recurring subscription to Adobe for my personal work. Affinity’s products faithfully recreate the features of Photoshop, Illustrator and InDesign and only cost a one time payment of $50 each! I know you get a lot with a Creative Cloud subscription but I just don’t need most of it, and I can’t stomach that monthly price tag. I really wish Adobe would offer a discounted Creative Cloud option for independent freelancers/enthusiasts that was priced similar to a Netflix subscription. That would be a no-brainer for me, but until that day comes, and it probably never will, I’ll be using Affinity’s versions that do nearly the exact same thing. I’ve also tried a lot of open-source design alternatives (here is a blog post I wrote about an open-source alternative to Creative Cloud a couple years ago) and while I’ll highly suggest giving them a try too, I do recognize that their UI is a challenge, and frankly getting Inkscape to run on a Mac is a chore. Considering the very low cost for Affinity and much better UI, and familiarity with Adobe, I can’t suggest Affinity enough.
Scout-App is a great open-source tool for compiling your CSS.
Hyper - An open source alternative to your terminal window. Having a highly customizable terminal window is a really nice way to make working in a terminal a lot cooler!
Spotify - music makes me more productive. Spotify is just easier to access across devices/platforms.
Labels: web design, web development
