There are so many overlooked online tools out there, and in many cases are missed 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 of already heard of this absolute gem. It’s in 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.
CodePen is pretty similar to JSFiddle but it 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.
4. DB Fiddle
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 tables data and await the result. Choose from MySQL, Postgres and SQLLite 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 favourite 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 analyse 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 to 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 favourite icon. Another speedy tool for web developers to save some time in an image editing tool.
10. W3C Validator
Validate your HTML syntax with the proper hyper-text markup language standards. W3C will analyse your HTML, then point out the exact elements, if any, that don’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.
11. XDebug configure
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 setup, 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.
12. Monaco Editor
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 VS 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.
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 Pindom 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 its 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 your 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 are now taking consumers ability to view a website correctly on smart devices seriously, and so should you too.
19. Google Fonts
Google have 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, its epic.
23. CSS Validator
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.
28. Can I Use?
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 issues tab, stating any know browser issues, giving you a heads up on what to look out for when designing a website.
29. Regex Pal
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.
31. Code Sandbox
Make your Cascading Style Sheets more lovable, as stated on this websites homepage. 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.