Life as a web developer may offer many rewards, but when project managers or clients are asking you to do more and more in less and less time, it can become frustrating. So it's always good to find tools and services that can make your work faster and more productive.
Here we've gathered together some of the most useful tools and services that should be part of every web developer's toolkit. Whether you a building a simple "Hello World" app or a complex web application, these tools should make your coding easier and increase productivity.
1. Babeljs.io/repl
Write your code in modern JavaScript and let Babel transform your code into JavaScript that is compatible with even older browsers.
2. Basecamp
Developed by 37signals, Basecamp is a popular online tool to help you manage collaboration and project management with ease. It all runs in the cloud and most people working in web design and development will be familiar with it.
3. BLOKK
BLOKK is a fun-to-use font for "clients who do not understand Latin". In other words, it replaces all text with blocks to suggest generic text instead. That way you can create good looking mock-ups and wireframes without confusing people with Lorem Ipsem
4. Buildregex.com
Construct regular expressions visually.
5. Bundlephobia.com
Quickly find the import cost (download size) of any package in the NPM registry. Or upload your package.json file to scan all dependencies in your project.
6. Codeply.com
Quickly build frontend responsive layouts with frameworks like Bootstrap, Materialize CSS and SemanticUI.
7. CSS Sprite Generator
By reducing the number of HTTP requests, this tool aims at increasing the loading speed of your website. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.
8. Devdocs.io
API documentation for all popular programming languages and frameworks. Includes instant search and works offline too.
9. Fontello
This icon generator is truly one of a kind. Pick the icons you want and Fontello will compile them into customized web fonts. You can also edit and customize the symbol codes and names.
10. Foundation
Made by develpopers for developers at ZURB, this prototyping tool acts as a blueprint for your responsive design projects. Its latest version is an easy grid-structure that makes styling even more convenient and flexible. It works with both SASS and CSS.
11. Glitch
Create your own web apps in the browser, import GitHub repos, use any NPM package or build on any popular frameworks and directly deploy to Firebase.
12. httpie.org
A command-line tool that is useful for making HTTP requests to web servers and RESTful APIs. Almost as powerful as CURL and Wget but simpler.
13. jex.im/regulex
Write any regular expression into the editor and get a visual representation of how the pieces work.
14. Load Impact
A successful website is one that loads faster and quickly. Load Impact is a cloud-based service for load testing and website optimization that generates traffic load by simulating users. In other words it lets you test how your website, web app, mobile app or API will perform with up to 1.2 million concurrent users.
15. Pingdom
Pingdom is a service that tracks the uptime, downtime, and performance of websites. Upload a full page in HTML and it will mimic the loading process of the entire website, incorporating all the elements (namely JavaScript, RSS, CSS and images), thereby enabling you to check and monitor the efficiency of your site.
16. Cloud9 IDE
Cloud9 IDE is a tool to help you collaborate with others on big-scale code projects. Letting developers around the world edit the same code and chat together in realtime, it's fast emerging as one of the best browser-based IDEs. Features include code completion and editor, drop-document trees, smart drag and FTP integration.
17. Cloud Comp
This lightweight and easy to use tool helps you share website and apps with others. It's been specifically built to give designers and developers a way to present comps to their clients inside of a realistic device shell.
18. Prefix-free
This cool tool from Lea Verou lets you use unprefixed CSS properties. It essentially works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.
19. Regexr.com
A good tool for testing your regular expressions in the browser.
20. Typetester
The Typetester is a browser tool for comparing different kinds of fonts, Choose the typeface you want to test out, along with your chosen size, tracking, colour etc, and Typetester applies it to a set piece of text so you can see what it will look like.
21. W3c Markup Validation Service
Validating web documents is an important step that can dramatically help improving and ensuring their quality. This free service from the W3C helps you to check the markup validity of different web documents, in HTML, SMIL, XHTML and MathML and more.
(images: Kubo agency)
