What’s in your tool kit?
It’s a pretty common question for just about any job out there. And personally I find it a great question, especially if you’re a beginner. Figuring out what people are using can point you in the right direction for getting started, particularly in web design and development.
As a web developer and designer, I use a lot of different tools to get the job done. From the local development environment to code editors to software and even the computer hardware, there are a lot of tools I use to get the job done. And to be honest, I didn’t think much about these tools until I sat down to write this post.
So let’s go through all of the tools I use as a web developer and designer, and maybe you’ll find something that will work for you!
Local Development
First off, let’s talk about my local development environment.
I use Local WP as my development environment of choice, and I really have no intention of switching anytime soon.
Originally I used DesktopServer for the longest time, and had a great experience with them. But unfortunately, it was shut down in late 2022.
Fortunately, Local WP is a great local development environment tool if you’re working with WordPress. It’s super easy to spin up a new website. And there are a ton of tools you can use, like being able to switch between versions of PHP, switching between Apache and nginx servers, easy setup for WordPress multisite and more.
Plus, if you’re building a client site and use WP Engine as your web host, there’s great integration with taking the website from your local environment right to the live site.
At some point I would really love to sit down and figure out Docker, but I just don’t have the time to do so right now and there’s no immediate pressing need.
Code Editors
I technically use two different code editors for development, but that’s for a good reason, as you’ll see.
My primary code editor is Visual Studio Code. That seems to be about the standard today for web development and other software development. It’s a really nice editor with a lot of different settings and themes to get it working just how I want it to. Plus it’s free, which is always a big plus.
There are also a lot of extensions you can add to your copy of VS Code to add more functionality. I don’t have a whole lot of extensions installed; just what I need for PHP Code Sniffer to work basically. But I’m always willing to try one that’s really cool, if you have any recommendations.
The other code editor I use is Sublime Text. This one is used really for one situation: editing a file from FileZilla directly. There are times where I need to try to edit something right from FTP (or SFTP) and using Sublime Text just works better for that one thing than VS Code.
Computers
I have three different computer/computer-like devices that I use when it comes to web development and content marketing.
My primary machine is a 24-inch 2021 iMac with the M1 chip, and it’s really my home base for everything. The vast majority of my coding and design as well as all of my video editing is done on this computer since it’s plugged in and has the most power of my three machines. If I’m at my apartment and it’s during the day, I’m probably on my iMac.
The secondary machine is a 16-inch 2019 MacBook Pro, and it’s what I use when I’m on the road or just away from my desk. It gets the job done, although at some point I would like to upgrade to a MacBook with an M1 or M2 chip.
Finally, I have an iPad Pro. Most of the time it just sits on my desk with a livestream of something, usually a Virtual Railfan cam, just as background noise. But I also tend to use it to brainstorm various things as well as use it as my primary writing device for blog posts, videos and just about any other piece of content since I find it less distracting.
It’s also great for use on long road trips and airplane flights. Seriously, when I’m in the zone on the iPad, I can knock out over 5,000 words of content in a four-hour trip.
Other Tools I Use
Finally, here are some of the other tools I use both for web development and design and other things.
- Notion — Notion is where I do a lot of my content marketing planning. I have kanban boards for each blog, channel and newsletter where I move content items between. And then in each item I will put in a basic outline and take notes on points I want to hit. It’s made writing a whole lot quicker and easier for me. There are paid plans, but I’m using the free version and it works just fine for me.
- Screen Studio — Screen Studio is one of the newer tools in my tool belt. I’m doing more stuff related to videos, particularly with web development tutorials. And Screen Studio makes it really easy to capture what I’m doing on the screen and packaging it nicely into a cool video. I can customize the background for the video, zoom in when I’m typing something so people can see what I’m doing and more. Really, if you’re looking to record tutorials on your screen, it’s the best tool out there to use.
- Omnifocus — Omnifocus is the task manager that I use. Previously I used Wunderlist which then became Microsoft Tasks. But Omnifocus is so much better. I can organize my tasks into different folders and projects. And, more importantly, I can create repeating tasks that happen on various schedules, like setting tasks for paying sales tax each quarter, getting a haircut every other month and so much more. Really, I’m not sure how I functioned before using it.
- Timery and Toggl — For time tracking I use a combination of tools. The first is Toggl, which provides the real meat and bones of time tracking. You can set up a bunch of different timers and tags for those timers and organize them in a way that works for you. Timery comes in and adds a much better user interface for the whole thing, especially on macOS and iOS. Timery allows me to easily start timers on my Macs, iPad and iPhone, and I’ve found that it’s easier to edit timed entries if I mess something up with starting or stopping a timer. If you want to track time, these are the two tools that you need.
- Slack/Discord — I know it might be a bit sacreligious to put both of these side-by-side, but I do use both of these. Discord is more of the “fun” place being in different servers, while Slack is more for work in a way (being in the Post Status, WP Campus and WordPress Slack instances). And I enjoy both services. Personally, I don’t have a preference between the two.
- Photoshop — I’ll be honest that I don’t do a whole lot of photo editing, but if I need to edit an image so that it’s the right aspect ratio for the featured image for a blog post, Photoshop is what I use. If I’m editing photos I’ve taken on my camera, I will use Lightroom first for better editing and converting them from RAW to JPG.
- Premiere Pro — I made a recent change for what I use to edit videos. For the longest time I was using Final Cut Pro since it was relatively easy to use and it’s what I used as a journalism major in college. But I’ve since moved on to Premiere Pro since it gives me more options and more control over my editing. I’m still not a video editing wizard (my brother is the one in the family who can do that), but I’m getting better at with each video.
- Figma — Finally we have Figma, which is what I’m using to design websites and WordPress themes. I had used Sketch for the longest time, but a few months into 2023 I made the decision to jump to Figma and I haven’t looked back. I love how easy the auto layout tools make designing various sections as well as the components feature where I can make once change here and it changes every other instance in the document. Plus, the DesignKit tool from Rafal Tomal is freaking awesome, and it made designing the Crosswinds Framework themes a lot easier.
What Tools Do You Use?
So now that I’ve gone through all of the tools I use for web development, I want to hear from you. What tools do you use for web design and development? I’m always curious to see what other people use since those tools might be better than the ones I’m using.
And if you have any questions about any of the tools that I mentioned here, be sure to ask about them. I would love to answer all of your questions.
Be sure to leave it all in the comments section below!
