Useful tools & software for freelance front-end developers
Last modified: 24th April 2024
I try and limit the tools I use, because I think sometimes too many tools can be a hindrence. However, over the years there’s some that have made my life as a freelance developer that much easier.
So here’s my list of favourites as of April 2024. These are by no means in any sort of ranking order, I love them all equally*
*Okay maybe I love ClickUp the most
Ybug
Cost: from Free (for 1 project).
Website: Ybug
What does it do? Easily collect visual feedback on a development site.
When reviewing a website, rather than clients sending you lengthy descriptions of changes or bugs, this provides a way for them to comment directly on the website you’re working on. They can even draw a doodle or highlight certain areas. Ybug then generates a screenshot of the feedback and creates a task/bug list for you.
It also integrates with lots of different project management tools, like ClickUp for example (which you can read about further down the page), meaning tasks are automatically created in clickup along with a screenshot and details of the commenters browser & OS information.
It’s the best priced in browser bug tracker I’ve found.
Toggl track
- Cost: Free (with Pro plans available)
- Website: Toggle track
- What does it do? Tracks time for your projects.
I never used to use timers, but a few years ago I decided to use one in order to see where I was spending my time. Boy was it an eye opener! Once I started using Toggl I realised how much time I spent faffing around in a day. I found that putting the timer on enabled me more focused work time rather than flitting around between projects. It also highlighted whether or not I had capacity to take on additional work by showing me how many hours I was actually working in a day, and helps to ensure your projects don’t go over budget.
It comes with a desktop app too so you can easily start/stop your timer.
Perfect Pixel
- Cost: Free
- Website: Perfect Pixel
- What does it do? A browser extension that allows you to overlay an image over your website.
As a front end developer, my job is to take designs (given to me by an agency or designer) and develop them as closely as possible to the original mockups. This tool is extremely useful for that. You simply upload your PNG or JPEG export of the web page you’re building, and it overlays it so you can tweak your code to match. Simple as that!
Outliner CSS (Chrome Extension)
- Cost: Free
- Website: Outliner CSS
- What does it do? At the click of a button, it adds an border to all elements on the web page.
Every front-end developer knows the border: 1px solid red rule for checking how something is sitting within the DOM. This takes it one step further and adds an outline around everything. It can be a lifesaver for when you’re trying to figure out what the heck is making your website scroll horizontally when you don’t want it to.
WAVE Evaluation Tool
- Cost: Free
- Website: Wave Evaluation Tool
- What does it do? Checks your website for accessibility issues.
Because everyone should be able to use your website! You can either test your website directly on the Wave website, or you can add browser extensions to make it even easier to test your site.
It will highligth any errors, contrast issues and alert you to some areas you could improve on. It also gives you a structural overview of your website.
Colour Contrast Checker
- Cost: Free
- Website: Colour Contrast Checker
- What does it do? Tests your website/brand colours for contrast accessibility.
This is a tool I use during the design phase and often during the development phase. You simply add your colour in Hex value, and choose whether you want to test it against a background, or use it as a background and test another colour on top.
It will tell you how accessible that colour combination is. Then you can use the slider to adjust your colour to find something accessible if yours isn’t hitting the right spot.
PageSpeed Insights (Lighthouse)
- Cost: Free
- Website: PageSpeed Insights
- What does it do? Checks your website for performance, accessibility, best practices and SEO.
A staple amongst a lot of developers; you can either use the main website or it comes as part of Chrome Inspector (under the ‘Lighthouse’ tab).
ClickUp
- Cost: Free (with pro plans available)
- Website: ClickUp
- What does it do? Project management board.
Oh ClickUp, where would I be without you? Probably scrambling through my emails trying to figure out what’s left to do on a project. If you’ve ever used Trello it’s like that, but a step up.
If you’re like me and have multiple ongoing projects that you are responsible for managing, then this tool is amazing. I use it as a Kanban board, with columns for To Do, In Progress, Review, and Closed. There are many many features to this, many of which I don’t always utilise, but it’s good to know they are there.
I’ve used it with lots of different types of clients; agencies, end clients, non-technical people, and freelancers.
Yes it can be a little clunky in places (sometimes have to refresh the site to update everything) but I’m willing to forgive it because it makes my life that much easier.
Slack
- Cost: Free (with pro plans available)
- Website: Slack
- What does it do? Essentially a workspace chatroom.
Unless you’re new to the world of development you’ve probably heard of, or most likely used, Slack. In it’s basic form it’s a chatroom. You can have different channels for different topics, or projects. It’s free to use until you want to do things like seperate colleagues from clients; otherwise you’ll end up adding all your clients into the same chat space which isn’t ideal.
Personally I have my own Slack where I invite any freelancers I’m collaborating with to work on projects. I’m also a member of over a dozen other Slack groups, either communities, or agencies who I’m working with. I find it much easier to collaborate using Slack rather than email.