Tools I Like

Published: December 4, 2021

I love my IDE. It’s one of my happy places. Launching my IDE at the beginning of the day and strapping in to create and craft websites and Web applications puts a smile on my face (or perhaps it’s the cup of joe?!). Just as Web design and development have changed over time, so have the environments we work in and the tools we use. I thought I’d share a little bit about the excellent tools I use to accomplish my work.

In short, I leverage Nova for authoring code, CodeKit for compiling code and project building, MAMP PRO to spin up local Apache and MySQL servers and Terminal to interface with GitHub which I use preferentially for version control. When it comes to visual or graphic design I lean on Photoshop and Illustrator.

Nova (screenshot above) is the core tool in my IDE. It’s highly configurable, very easy on the eyes and has all the features and flexibility you might expect from a modern code editor. I like to run it with a project file browser at left top with SFTP and publishing options immediately below. I have most of the view in a split pane configuration, which allows me to work on two files simultaneously, and a local terminal view in the bottom right of the view to finish things off. I have no reservations when it comes to wholeheartedly recommending Nova. A bit of pertinent history — In the mid 1990’s I was writing code on a PC running Windows and Notepad was the tool of choice. Next came, what was then Macromedia’s Dreamweaver, which was a massive improvement over Notepad. In 2003 I moved from the Windows platform to MacOS which gave me some different choices in code editors and is about the time I discovered and became hooked on authoring in BBEdit. Not too long thereafter I stumbled across Coda by Panic which, at the time, was the best code editor I had ever used and I used it for many years. Eventually there came a time when Coda just didn’t quite cut the mustard and I begrudgingly made the switch to VSCode. VSCode was/is pretty good in my opinion however code editors are a very personal thing and VSCode never really felt like it was mine, if you know what I mean. That said, I was extremely excited when I learned Panic was developing a modern code editor designed from the bottom-up with modern Web development workflow(s) in mind. I was so excited that I attempted to participate in the Nova beta cycle but didn’t have the opportunity. Nevertheless, Nova finally became available at which point I got a trial version. Within about 15 minutes with it I was ready to get a license. It was one of my better choices and has made my already enjoyable day to day work even more enjoyable.

Speaking of enjoyable, CodeKit (screenshot above) is the second tool in my IDE that I could not live without (ok maybe that’s stretching things a bit but it really is awesome). Basically, CodeKit helps me accomplish two operations and makes them about as simple as they can possibly be. First, it allows me to manage how every single file and directory is handled at build time and how a single file is handled on save. For example, I ask CodeKit to listen for changes saved to my global.scss file. When it sees that save occur CodeKit compiles it, minifies it and saves it to my css directory as global.css, which is a useful file to me. The second thing Codekit does for me is show me a live and cache busted view of my project in a Web browser. This is true for HTML, CSS, and JavaScript files right out of the box. If you need the same live cache busted functionality extended to a server-side language like PHP for example, all you have to do is tell CodeKit where the root of you project is on your local server and it just works. It’s like magic.

While we’re on the topic of servers, I’ve leveraged MAMP (screenshot above) for as long as I can remember. While it can do lots of neat things, I use it solely for spinning up Apache and MySQL servers locally for my Web development work. In my experience, MAMP and CodeKit play very nicely together.

Last but not least, while I do very much enjoy taking visual Web designs created by other designers and building pixel-perfect functioning websites based upon them, I like to flex the visual design muscle from time to time too. I lean on the tried and true Illustrator (screenshot above) and Photoshop offerings from Adobe exclusively. Illustrator when vectors are the order and Photoshop when I need to color pixels. I have a soft spot in my heart for both. Back in the early 2000s, I had the good fortune to teach a course covering both applications at the University of Hawaii Leeward College on Oahu. Back then Adobe called their creative suit of graphic design applications just that, the Adobe Creative Suite. These days we know it as the Creative Cloud of course. While a lot has changed with both Illustrator and Photoshop over the years, the core of both remain the same.

So there you have it, the current state of my IDE and the tools I use to get the work done.

Filed in — Web Design, Web Development