We love tools—especially developer tools that make our lives easier. And if they’re free? BONUS. Here are some of our favorite developer tools.
Goes without saying that for a developer our text editor is our most important tool. This is where we spend the majority of our time and apply a lot of customization to fit our needs and workflow. For example, I use Sundial to change between a light and dark theme based on the time of day.
If you are currently using Sublime Text or Atom I would highly recommend trying VS Code for a week, you might be surprised how much you can customize your work area and improve your performance.
Besides writing good code developers need to store and backlog all our changes. From large teams to a single developer this is a must-have. Repos and Git allow us to do just that and there are plenty of popular amazing solutions for this such as BitBucket, GitHub, and GitLab.
It’s just as important to manage and organize these repos and a Git GUI Client like GitKraken does just that. Using a GUI Client allows us to onboard new developer faster and is easier to manage the various repos we have in an agency environment. Between the dark UI and the color-coded branches, GitKraken is a favorite for our developers.
Every front-end developer needs a digital playground to experiment, test, and just have fun exploring new techniques. CodePen is the best solution for this and is extremely easy to set up and start using. Some teams even integrate CodePen further into their workflow by storing templates, starting points and even replacing their text editor altogether.
Gulp + Various Packages
Build systems are a standard developer tools tand there are plenty of great solutions, our team personally uses Gulp. We don’t believe one is better than the other so I recommend using one your most familiar with. The important part is to set up your system to take care of any routine tasks it can. From basic code minification with CSSNano too complex image optimization with Imagemin and much more.
Our developers love working locally on their computer vs constantly pushing code directly to the server. However, eventually you will need to add the code to the server and manually migrating the code via SFTP is not the most efficient process. Buddy will automatically push your code and will even notify you if something goes wrong. You can even set up different rules for the different branches you have within your repo.
Some hosting providers have begun creating there own solutions such as local by Flywheel or WPengine’s new DevKit.
The designer to developer hand-off has always been a sensitive part of creating a website. However, in recent years new solutions have been released that simplifies this process. InVision is our go-to hand-off tool for the designer to a developer or even design and client. The easy to use comment system allows a developer, or even clients, to ask questions on appearance or functionality.
Communication is key for any team and no tool makes it easier than Slack. From one on one communication, team-wide, video calls, sending files, and more, Slack’s easy to use interface in combination with its conversation structuring and customization makes it easy to stay organized. You can even search through old conversations if you need to trackback. Slack also integrates with so many tools you can easily automate notifications.
As web developers, part of our job is answering questions and training our clients, and possibly team members, on how to manage their website. With Loom explaining, training, and walkthroughs have never been so easy. Since many of the training sessions for our clients cover the same topics, we can now send a library of screen recordings that cover all the standard questions we receive. Depending on the need we also create recordings specific to the client if their site has a unique feature or they ask for something more specific. With this, we can drastically lower the time we spend training and in some cases remove it altogether.
The best part? All of these tools are free or offer a free plan.
So go check them out today and see if they would help your development process. Did we miss any tools? What do you use?