With a new website finally ready, what better way to start things off than with a big post of unsolicited recommendations? Honestly, I’ve wanted to do one of these for a while, but either felt that I wasn’t at a point in my career where I had much to offer, or just didn’t have a blog to post on. This one’s going to be a bit long, so I’ve split the post into two main sections, one for dev and one for design. That way, if code isn’t your thing, you can skip to the design section.
“The Missing Package Manager for macOS (or Linux)”
MacOS, Linux | https://brew.sh/
Regardless of how you have the server-side portion of your local dev environment set up, Homebrew is a valuable utility to have on hand if you develop on a Mac, especially if it has an M1 chip. With Homebrew, you can quickly install any of the open source software you may find yourself needing, whether it be something as large as apache2, or something smaller like phpcs. For M1 Macs, arm64 (native) packages are available for most if not all packages, so anything you install will take full advantage of your new hardware.
Since most of what I do involves building WordPress themes or plugins, I pretty much rely on having a locally-hosted MAMP or LAMP stack in place to get any work done. Over the years, I’ve tried many different approaches to accomplishing this, but the ones I’ve adopted over the last few years have been by far the most successful.
Since switching to an M1-powered Mac, I’ve used Homebrew to install Apache, PHP, and MySQL directly on Mac OS and disabled the bundled version of Apache. A quick guide to accomplishing this can be found here. This biggest advantage to taking this route is that it makes it possible to take full advantage of the M1 chip’s performance, as arm64 packages are available for everything required. It’s also free, whereas my pre-M1 solution required paying for software licensing. The only downside to this approach is the major MacOS updates have caused problems with local dev setups installed directly into the OS in the past, so this approach may not do as well against the test of time.
Prior to upgrading to the M1, I swore by using an Ubuntu-hosted LAMP stack through Vagrant, using VMWare Fusion (or Workstation, for Linux users) as a provider. Vagrant offers exceptional integration with MacOS and the local filesystem, while VMWare provides the fastest virtualization and file syncing available. A key advantage to this approach is that, while it may not be as fast, your local dev stack is isolated in a dedicated VM, making it immune to the effects of MacOS updates or reconfigurations. This approach also gives you finer control over system resource allocation, as you can control how many CPU cores and how much memory is made available to the VM. The only real downside is that to use VMWare as a provider, you’ll need to buy a license for Fusion, plus an additional license for the plugin to integrate it as a Vagrant provider. It’s definitely a little more on the costly side, but if you’re wanting to go the VM route, this is by far the best solution when it comes to performance and speed.
Tool to automate repetitive tasks.
Multiplatform | https://gulpjs.com/
Gulp is an awesome utility to have for any web development project. Through it, you can automate all those little, annoyingly repetitive tasks that drag your workflow’s speed needlessly down. For example, when developing WordPress themes, I have a task set up to create a Browsersync session so that any time I modify theme files, the browser reloads. At the same time, those task monitors all the .scss files in my theme directory and it’s subfolders, and recompiles the theme stylesheet any time one of those files is changed. Gulp will save you a ton of time, and I can’t recommend it enough. For an example of what a gulpfile looks like, you can check out the one I include with Method here.
Automatic reload that works with your local dev setup and allows access from network devices.
Multiplatform | https://browsersync.io/
Speaking of Browsersync, it’s an awesome live-reload tool that allows you to easily get up and running with cross-browser, cross-device testing, and integrates with both gulp and grunt for easy automation. For WordPress sites, I provide it with a local dev URL to use as a proxy, and I’m good to go. Once running, your site becomes available locally at http://localhost:3000, and also becomes available to local network devices over port 3000. This not only makes it easy to instantly see code changes locally, but also makes it possible to easily test the site on mobile devices and other computers. It’s also been nice to have at Bold, because I can show changes to people in the office before they’ve been deployed to online staging environments.
A versatile foundation to accommodate any frontend.
Multiplatform | https://getbootstrap.com/
Bootstrap is my framework of choice when it comes to building the frontend portion of most projects. It can be extended to fit any project and provides a solid foundation to work from out of the gate. My workflow for building with Bootstrap has been to download the SASS source files and import them into my theme’s stylesheet. By doing this, you gain access to all of Bootstrap’s variables, and can even override them by declaring overrides before Bootstrap’s import. This approach allows me to completely customize Bootstrap down to the smallest detail, whether I just need to change the primary brand color, or want to do something more ambitious, like switch from a 12 column layout grid to a 20 column one.
An example of importing and overriding Bootstrap variables can be found in the SASS file for Method’s primary stylesheet. Here, a custom shade of green is provided to override Bootstrap’s default green, and then set to be the primary brand color. Because these overrides are provided before importing Bootstrap, all of Bootstrap’s components that use the primary brand color will reflect this change once the stylesheet is compiled.
Using Bootstrap for frontend work has saved me countless hours of dev time and has made the process of converting design comps into a functioning product much more efficient. I can’t recommend it enough.
A flexible IDE with countless extensions versus a flexible IDE with countless extensions.
Multiplatform | https://code.visualstudio.com/, https://www.sublimetext.com/
As much as it pains me to say, I finally made the switch to VSCode after avoiding it for several years. To be fair, VSCode is an amazing IDE that, through its countless extensions, can be configured to work with pretty much anything. It’s a solid editor. I held out on VSCode because SublimeText, which offers a very similar set of features, just…felt…better? More intuitive? I can’t say why specifically, but for me, it was just a more productive editor. At least, until development on version 3 became almost nonexistent to accommodate production on the next release. If you’re in the market for a great code editor, either one is a solid choice.
Repository management and continuous integration.
Preferably Linux | https://about.gitlab.com/install/
If you’re comfortable doing some remote server configuration via command line, taking a little time to set up a GitLab server and associated GitLab runner on your VPS provider of choice can really pay off. Doing so will provide you with a centralized location to manage all of your code, and through GitLab CI, you can set up custom deployment processes to safely and easily deploy code revisions to any hosting server that you can SSH into. Best of all, aside from the cost of VPS hosting, it’s all free. You can opt to try the included GitLab Ultimate features for a limited time, but chances are all of the features you’ll need will be available without it.
A powerful GUI for GIT.
MacOS, Windows | https://www.git-tower.com/
Tower is a great GUI for managing your local GIT repos, especially if you’ve for a lot of them. You can also browse and clone your repos on connected services, including GitHub and self-hosted servers (GitLab, BitBucket, etc). You can also easily switch between multiple identities and associated GPG keys, and overall makes the process of working with many different repos a simple one.
A GUI for managing MySQL databases.
MacOS | https://github.com/Sequel-Ace/Sequel-Ace
Sequel Ace is essentially a maintained fork of the popular-but-abandoned Sequel Pro MySQL client for MacOS. With this app, you can easily connect to any MySQL server, whether it be on your local dev environment or remote. From there, you can edit existing database, import sql dumps, create or delete databases, etc. It’s a great tool to have on hand if your platform of choice uses MySQL.
A great FTP client for MacOS.
MacOS | https://panic.com/transmit/
Transmit is a powerful, intuitive FTP client for MacOS. From Panic, the team behind the Coda (and now Nova) code editor, this FTP GUI has support for several protocols and file sharing services, custom transfer rules that allow you to easily omit dev directories from transfer (.git/, .svn/, node_modules/, etc), multi-device sync for saved connections, and countless other features.
An essential Finder extension for easily opening the current folder in your default terminal app.
MacOS | App Store Link
A simple but very useful MacOS Finder extension that makes it easy to open the current folder in a new terminal window or tab.
Text & Tree view for JSON
MacOS | App Store Link
If you work with any sort of API (including WordPress’ built-in API), chances are you’re dealing with JSON-formatted data. With Lexi, you can view this data as a structured tree, which makes sifting through large JSON datasets a much smoother process.
Mac’s missing archive manager.
MacOS | https://macitbetter.com/
While MacOS technically supports zip files, that support lacks basic features, such as browsing and extracting portions of archives. BetterZip bridges the gap.
Browser testing with local dev support, countless browser versions, and access to mobile devices.
Web-Based Service | https://www.browserstack.com/
While a bit pricey, BrowserStack can be a lifesaver, especially when it comes to reproducing frontend bugs on specific browser versions. The service essentially provides you with access to the last several releases of every major browser on every platform to test with, including support for local development environments via a desktop utility. While a lot of browser testing can be done in-house through VMs and simulators, BrowserStack offers one of the most comprehensive solutions available for making sure your code works on every browser you need to support.
The best tool for website and ui design, period.
MacOS | https://www.sketch.com/
If you’re designing a website or app interface, there’s just no beating Sketch. The closest thing is Adobe XD, which arguably only exists as a reaction to the mass exodus of designers from Photoshop to Sketch. With far more features and far better OS integration, Sketch makes design work
Access to all available Sketch plugin and menu commands through a powerful search bar.
MacOS | https://sketchrunner.com/
Runner is an essential add-on for Sketch that allows you to access most of Sketch’s functionality though a powerful search bar overlay, including plugin functions. Over the course of a project, it can save a lot of time.
A Sketch plugin for easily creating custom Bootstrap grids.
MacOS | https://github.com/konki-vienna/sketch-bootstrap-helpers
This plugin allows you to easily create custom Bootstrap grids to work from, and integrates with Runner. If you’re designing a website that’s going to be built with Bootstrap, this plugin will make your life a lot easier.
Unparalleled for creating vector artwork and setting type, from the company we all love to hate.
MacOS, Windows | https://www.adobe.com/products/illustrator.html
While my opinion of Adobe as a whole may be increasingly negative, possibly from the blood loss required to sign their yearly licensing agreements, nothing can really touch Illustrator when it comes to working in vector. Out of the other Creative Cloud apps, it also has the best type setting controls, making it my go-to app for creating type-heavy artwork.
Stock icons for nearly any conceivable need.
Web-Based Service | https://thenounproject.com/
The Noun Project contains one of the largest, most unique collections of vector icons available, all easily accessible from their desktop app.
A library to store all your design inspiration in.
Multiplatform | https://eagle.cool/
Eagle is like iPhoto, but instead of building a library of photos, you build a library of design inspiration. Eagle offers several ways to categorize and organize assets, making it possible to maintain a large library of visual inspiration to come back to when needed.
A HiFi Music Player & Tidal Client
MacOS, Windows | https://audirvana.com/
If you have a DAC, this music player will let you take full advantage of its capabilities. With support for VST and AU plugins, Tidal integration, and a slew of other audiophile-grade features, no other app I’ve seen comes close to this one for hifi music playback.
Because Math is Hard, And Frame Rates Don’t Help
MacOS | App Store Link
Timecode Calculator is a really nice utility to have for video editing. With support for any frame rate, it makes timecode math far less headache-inducing.
© 2021 Rob Clark /
Proudly Powered by WordPress
Comments
There are currently no comments for this post.