15 Cool Coder-friendly Tools for Web Developers

15 Cool Coder-friendly Tools for Web Developers

The year has been a bit of a bumpy ride for coders. For all the advancements in web development, coders still have got their work cut out for them. Thanks ever so much for that, Internet of Things.

But coders are nothing if not adaptable. We keep up with the onslaught of client-demands and time-crunch, juggle multiple projects at once, get our spines bent from infinite hours of coding.
It’s enough to make anyone tear out their ear hair. But we manage to cope, thanks to a load of tools in arsenal.

Here’s a list of 15 of our favorites among them. Take a look.

1. Vagrant

It’s not just software, it is environment.

This beauty allows you to create portable, reproducible work environments; by combining virtualization, server box, and configuration tools in one awesome punch. It’s written in Ruby and works with PHP, Python, C#, Java, and JavaScript. Platforms like Windows, Mac OSX, Linux, and FreeBSD support Vagrant

There’s no silly frills attached with Vagrant. It is brutally fast because there’s no GUI to take up space and screw up functionality.

Absolutely must for testing and development.

2. BugZilla

For the low, low price of absolutely-nothing-at-all, you get a sweet server-side system that tracks bugs on your behalf.


Brought to you by trusty folks at Mozilla Foundation, Bugzilla lets you keep track of bugs, code changes, collaborate with others, review and submit patches, and maintain your site’s overall quality. A dedicated team supports, reviews, and tests the tool constantly.

The tool works on Windows/ Mac OSX/ Linux. It can be used for system administration, deployment, and IT support queues.

Thanks, Mozilla.

3. Notepad++

This is a beautiful text editor for Windows.


Based on Scintilla and written in C++, Notepad++ is free and lightweight and very fast. A significant upgrade from traditional Notepad, it has line numbering, syntax highlighting, search-and-find, and more improvements.

For a basic text editor, it’s pretty neat.

4. Sublime Text

While Notepad++ is for writers, Sublime Text is a complete IDE just for coders.

Sublime Text

It’s supported on Windows/ Mac OSX/ Linux, and based on Python. It is fast. It has amazing features that’ll get you hooked like multiple selection for interactive, quick code changing, split screens, distraction free mode, project switch, command palette for sorting/ indenting code and the like, and looks great.

5. –prefix-free

You can thank Lea Verou for “deliverance from ‘prefix hell’.”


This tool adds vendor prefix to style sheets in link or style elements without you having to bother yourself about it. Also, with the help of plugins, prefixes for any changes in CSS files, new link or style elements and jQuery’s .css() , will also be taken care of.

All of it behind the scenes; so you don’t have to face prefixes again.

6. CSS 3.0 Maker

CSS 3.0 Maker prevents us from throwing rage-tantrums when we can’t remember trivial CSS3 style syntax.

CSS 3.0 Maker

This neat tool generates code for box radii, gradients, transforms and transitions, text shadows, box shadows, and rotations of all degrees. The generated code can be copy-pasted from a viewing area, or downloaded in an HTML file.

It will also show desktop and mobile browsers that support those style properties so all your hard work doesn’t go to waste. It’s a nice guy like that.

7. Blokk Font

‘Lorem Ipsum’, the standard placeholder text, literally means ‘pain itself’. Internet is hilarious, you guys!

Blokk Font

But we’ve also beaten the joke to death five times over with a ruler. It’s been that long.
So in the memory of the joke’s ‘dead horse’, we use Blokk Font. It replaces all the text with blocks.
It’s simple and makes for neat wireframes and mockups.

8. Fontello

The idea behind this thing is so simple it’s almost laughable. But instead of chortling, we raise our hands and thank Vitaly Puzrin for brainstorming it.


Fontello generates scalable, single-colored icon font-files. You can select the icons from a sizeable gallery, customize them, and Fontello will wrap them up in a nice font file for you to install and use.

Did we mention it’s free? It is.

9. Typetester

This one is pretty straightforward. Typetester is an online tool that lets you compare different fonts and test how they would look on a website. You can customize size, tracking, color, etc. until you find something you like.


It doesn’t sound like much, but when you have to compare 36 different typefaces at once, you’ll need this.

10. CSS Lint

“Will hurt your feelings, but help you code better.” – CSS Lint homepage

CSS Lint

CSS Lint is the professor that knows what he’s talking about and will take no cheek from anyone.

It’s a powerful online CSS cleanup tool, and unique. As it points out your mistakes, it will also tell you, in tear-inducing details, why you’re an amateur and how to stop being one.

Okay that was exaggerated. But you get the point.

11. Browser Shots

You checked your design on different screen sizes but it still isn’t ready to go.

Browser Shots

That’s because you have to check how your site renders itself across different browsers too. Browser
Shots checks your page for browser compatibility on recent and old versions of all the popular browsers and some that are not (I am looking at you, IE).

You can tick the boxes on browsers you want to see your site rendered on. It will then allow you to download the screenshots. Easy.

12. Foundation

There’s no point to this list if never got into RWD.


Foundation is amazing and the internet (and most front end developers) will tell you that. Other than the sort-of unfinished-looking interface, Foundation is practically perfect. The grid systems, right to left support, off-canvas navigation, and tours are off-the-charts.

It works great with SASS and CSS. It’s flexible and fast and a favorite of ours.

13. PageSpeed Insights

Google’s PageSpeed gives you insights on a webpage’s front-end performance. It has punctured quite a few developers’ egos.

You enter your page’s URL and it measures the time elapsed between request sent and above-the-fold content rendering; and request sent and full-page rendering. The test is based on network-independent aspects to calculate page performance: server configuration, HTML markup structure, JavaScript, CSS, and any other media.

You’ll find it impossible to score anything above 95 points, so don’t try. Otherwise, it’s a great tool for performance testing and improving.

14. Git

GitHub is a community of Git repositories. Git itself is an open-source revision control and source code management system that keeps image-based track of your version history in a repository. It’s the digital equivalent of an assistant.


It’s a great tool for creative experimentation and collaborative efforts with others. With multiple repositories and branching/merging, you can pick out individual features in separate versions to work on and merge them together.

It’s fully distributed, so you won’t have to fear no-net-nightmare when you’re offline (by design or accident). You can simply add the updates in your main repository, which will be waiting for you patiently back online.

15. W3C Markup Validation

W3C Markup Validation is a necessary test. Those who observe the best coding practices will take it without fear.

W3C Markup Validation

It teaches you how to be standard compliant, which is a good thing, because browsers are built on those standards.

Wrapping Up

After years of coding, every professional developer will eventually gather or create their set of tools. Most free applications on this list ended up being there because another coder realized it was inconvenient and did something to make it easy.

So keep creating. The next big idea could be yours.


Tracey Jones is renowned Web Developer by profession with hobbies of innovative and technical writing. She works with a leading WordPress development company HireWPGeeks Ltd. Feel free to get in touch with her if you are about hire WordPress theme developer. Follow her company on various social media platforms such as: Twitter, Facebook and GooglePlus.

Leave a comment!