There are so many overlooked online tools out there, and in many cases are missing out on. This article’s intention is to aid both web developers and programmers find the best tools to make day to day operations better. 33 web tools are listed below for both beginners and experts alike.

StackOverflow, a huge community of developers posting questions to be advised from other developers, it’s a stroke of genius. Most developers will already of heard of this absolute gem. It’s on this list of tools because it is ultimately one of the best websites to use for gaining knowledge.

I’ve lost count of how many times I’ve been stuck with my code and searched for some clues. You can bet your bottom dollar that issue has been flagged on StackOverflow before, and before you know it, you have an answer to your problem.

SO is free to use, just make sure that you search for answers before you ask one as you will be prone to some negative votes! Believe me, when I say, this is an imperative tool for both front-end and back end developers, it will always come in handy sooner or later.

Fiddle with the code on the fly; just add JavaScript alone to execute or add some CSS & HTML too. JSFiddle will render your code to an output window. It’s even capable of saving versions of your code that you can repost or send to other people.

Fiddle allows CSS & JavaScript to be injected from other web addresses and can preload JQuery for you too. It’s a great tool to play around with at times.

CodePen is pretty similar to JSFiddle but each pen automatically generates website integration code that you can paste directly into your site. After rendering your webpage with the code, that ‘Pen’ will be visible, this also comes with various settings you can control too. CodePen also has user’s public designs listed on their website so you can discover some interesting mock-ups.

Don’t have a database on your device? Then this tool is the perfect solution, simply add some SQL Syntax wrapped around data to create a temporary table. From there you can execute SQL statements on the table’s data and await the result. Choose from MySQL, Postgres, and SQLite engines to render your syntax.

DotNed fiddle allows multiple configurations in languages and project types. Choose from C#, F# and Visual Basic for the language and select the project type from the drop-down, for instance, MVC. After configuration, write and run your code against the dot net engine. Another quick tool without having to have the full packages installed on your device.

This fiddler has a responsive version that’s usable on your mobile or tablet device with ease. Lastly, share your code with other users by posting to Twitter or emailing a link.

Another favorite of mine, this tool is invaluable when it comes to debugging JSON formatting. Lint flags exactly where you’ve missed a comma or curly brace enabling rapid remedy. Once JSONLint is happy your JSON is valid, you will be presented with a message to say its good to go. A really great web tool if your working with complicated JSON.

WhatTheFont can very cleverly analyze an image of any particular text. The web app then checks it’s extensive font data for a match. If one or matches are found, the website will present a list of the closest matches fonts with the links to their source. It’s very handy if you see an image with a font you love but is no indication of what font style it is.

Upload a single image, usually a logo, this generator will parse your image and generate an icon pack with multiple sizes. Each size has its own specific purpose. Some for IOS shortcuts, Android shortcuts, and the general browser favorite icon. Another speedy tool for web developers to save some time in an image editing tool.

Validate your HTML syntax with the proper hypertext markup language standards. W3C will analyze your HTML, then point out the exact elements, if any, that doesn’t validate with the correct format. It’s as simple as putting your website’s URL in and pressing the Check button. Alternatively, the option for direct pasting of code is available.

Probably one that will only be used every time you set up a development environment but makes life so easy. XDebug is a PHP debugging module that allows full functional debugging of code in an IDE. Sometimes it’s a pain to set up, so xDebug made a page on their website where you can paste your PHP settings by printing phpinfo() . After the site analyses the PHP info settings, it specifies the exact module needed for that PHP build. In addition, it even tells you how to add it to your project.

If you’ve heard of Visual Studio Code before, then it’s time to get excited, Monaco Editor is the intelligent engine that sits within Visual Studio Code. Now, you can actually use the Monaco Editor housed within a web interface. It even comes prepared with Intellisense and validation. Not only this, Monaco can interpret lots of languages, some of which are C#, PHP, HTML, PowerShell, Python, and Objective-C.

Both JavaScript and CSS are ‘minified’ to ease website load time. Essentially, it takes all of the white space and breaks out of the files. After it’s been re-formatted, it’s pretty impossible to understand, but the size of the file will of reduced. This developer tool is very much associated with the next tool in number 14.

Sometimes, you download some source code from git hub or many other places around the web and sometimes, there is only a ‘minified’ version of the code inside. This tool, you guessed it, unravels a ‘minified’ JavaScript or CSS file consequently making them readable again.

No one want’s to build a website that users can’t use because it’s simply to slow. This is what this tool from Pingdom is for. Enter your URL and Pingdom will present you with some excellent statistics about how fast or slow your website is. It even grades your site against Google Page Speed standard and also gives you a ranking against other tested websites.

Browserstack is an extremely powerful tool, although, you only get a thirty-minute free trial. Within this 30 minutes though, you can check out how your website renders against different mobile and tablet devices. I don’t know how they do it, but it’s absolutely incredible!

Test multiple REST calls using Put, Get, Post, Delete and more to get a real-time response of your desired object. This really neat Ajax tool is free to use and should be bookmarked for when you’re in need of debugging any REST functionality. If you haven’t heard of REST before, check out this article.

Put your URL into this responsiveness checker and see your website rendered through a series of tests. This tool is very important due to Google rolling out a ‘Mobile first indexing’ update. Google is now striving for consumers ability to view a website correctly on smart devices seriously, and so should you too.

Google has made is so easy to load a fresh font to your website for instant use. On the Google Fonts website follow these steps –

Find a font you love

Select it

Google will then give you the direct links to the font files to be called from your HTML meta tags

All’s is left to do is adjust your CSS styles to use that font family, it is epic.

CDNJS Hosts over 3000 JavaScript libraries in over 80,000 versions ready for your disposal. For example, need JQuery 1.9.1? Then find it on this site, get the link, add it to a meta tag, voila, you’ve now got JQuery! These quickly delivered libraries are also really handy when using JsFiddle & CodePen.

No doubt you’ve already heard of this, but if you haven’t then this tool will become a lifetime companion of yours. Dev tools can help your web development in a huge variety of ways. Debug JavaScript, edit CSS in real time, change HTML elements on the fly and much, much more. See this tutorial on getting started with the developer tool in Chrome.

This extension is quite similar to Chrome’s developer tools, so if you would rather use FireFox, then this browser extension is perfect. Edit and debug JavaScript and mess around with your CSS & HTML directly in the browser. Changes you make will affect your view of the website in real-time.

Copy and paste your CSS styles directly into this ‘linter’ and await a huge range of checks to be made against your code. Checks are made for proper CSS guideline standards, flagging up if there are any problems. A very simple but invaluable tool.

GraphQL is a new kind of REST, it enables query-style syntax for API calls, see this article that explains it beautifully on Medium. This Fiddler allows you to play around with the GraphQL technology and write query-syntax to request data in real-time.

I don’t know if you’ve ever tried pasting code directly into Microsoft Word. Well, it sucks, and this web tool eradicates that problem. Simply paste in your code to this online tool and the interface will render your code in beautifully colored code. Export the code screenshot as a PNG or SVG to post to Twitter or print as a reference. The world is your oyster with this tool!

When it comes to web development, images can be a nightmare. Especially for performance, this tool helps boost performance by adding lots of single images into one big ‘sprite’. You can then use CSS background-image styles to position the exact viewpoint of the image you want to display. Consequently, you could have 20 images in one single load.

Pick a font from the huge font directory from Google, then take it for a test drive to make sure it looks the real deal. Typecast allows changing of font-size, margins, line height and much more to get a taste of a proper visual environment.

The Can I Use tool allows querying of CSS properties and returns a vast table of browser support verification. For example, enter flexbox, and the tool will advise which browsers support it. Below the browser support table is a known issue tab, stating any know browser issues, giving you a heads up on what to look out for when designing a website.

Regex’s can be somewhat annoying and hard to get perfectly correct. This nifty online web-interface allows execution of RegEx so you can test your syntax quickly. The best thing to this tool is that there is a ‘Top Regular Expression’ feed with other user’s saved regex’s, meaning it’s a great resource for discovering some new tricks too.

With over seven billion lines of code from seven million projects around the globe, rest-assured that a function you want a bit of real-life clarity on will be present. Search a function, property or method, you name it, this code database has it. After searching for a particular piece of code, a huge result set is returned, with that specific piece of code within some working source code, you can even drill down with filters by languages like PHP, C#, or JavaScript. Additionally, there is another brilliant feature to filter from sources like Github or GitBucket. It’s gotta be seen to be believed!

More tailored to the JavaScript community, Code Sandbox lets you load up a pre-configured coding environment for React, Vue, Angular, Preact and Vanilla JavaScript. This powerful tool features a snappy online IDE, the ability to create files and the functionality to save and share your project. Search through their communities saved projects or create a fresh one. Enjoy the sandbox with fully functioning ESLint!

Make your Cascading Style Sheets more lovable, as stated on the homepage of this website. Paste in your original CSS styles and let this tool completely transform it into SCSS for you. CSS2SCSS re-formats your styles and creates variables to hold certain properties in seconds. A super-speedy useful tool.

Have you ever wanted to tinker with a certain technology and language set, but never got round to installing and configuring the environment needed? Then look no further, Repl.it solves this problem with their super-powerful web-interface that’s equipped with an IDE and compiler.

Repl has lots of languages to choose from including Ruby, C#, PHP, Python, ES6 and much, much more. It currently features a Beta ‘Web Framework’ selection, where you can pick any pre-configured environment for developing with frameworks like Django, Gatsby, and Express. Repl comes with other general features too like saving and sharing, you could literally spend hours on this tool.

The Author: Dan Englishby

Post navigation