10 online tools to glide through the simplest tasks
Photo by Samantha Gades on Unsplash
The internet is not just here to teach you how to become coders or developers, it has a lot more to offer that can make you better at your craft every day. There’s no question that hard work can get you ahead in your career, but smart work can really take you places that were once a dream opportunity. Noone wants to reinvent the wheel, and the same applies to development as well.
You shouldn’t be spending time doing something if someone has already found a way to do it for you in the best way. Tools that can save you time and help you create efficient projects without having to go through the hassles of doing the extra work. Here’s a list of 10 tools that help you in your development journey. Please note that all of these tools are websites or browser extensions that can be easily used by even a beginner. (sorted in no particular order).
1. Frontendchecklist
The Front-End Checklist is an online tool that has a complete list of all elements you need to have or test before launching a website or a single HTML page to production. It has a very easy-to-use interface that lets you check each item as completed and generate a comprehensive report at the end that you can share or print. What makes it even more useful is that it provides links and resources that can help you understand the use/test of elements or features.
All items in the Front-End Checklist are required for the majority of the projects, but some elements can be omitted or are not essential ( for example in the case of an administration web app, you may not need RSS feed). These are color-coded in red, yellow, and green in the order of their importance or priority respectively.
2. hoppscotch
Postman is a tool that has become almost unavoidable when it comes to web development. Hoppscotch ( formerly known as postwoman ) is basically a website version of postman that has almost all the features of the original and maintains a very lightweight and minimalistic UI making it very easy to use from anywhere.
Testing APIs on Hoppscotch
3. GitIgnore
Yes, you read that right, it is what the name says. Gitignore is an online tool developed by Toptal that lets users copy code for their .gitignore files. It allows you to choose from a large list of Operating Systems, IDEs, or Programming Languages and the tool instantly generates a gitignore file content for you to get started.
The interface of gitiginore.io
4. ColorsandFonts
The name is self-explanatory here, colorsandfonts is an online tool that provides color and typography guides for web Developers and Digital Designers. It can be used as a handy guide for Color Palettes, Color Gradients, Color Systems, Font Pairings.
Finding best font pairings on ColorsandFonts.
5. cssscan
If you’re a web developer you would’ve used the inspect element feature on chrome at least once, and it’s not a very user-friendly tool to use. Sometimes you may have to search through 100s of lines of code to find that one property you are looking for. cssscan is a browser extension ( supports all modern browsers including Safari and edge) that allows you to copy CSS of any element with just a click. It also lets users edit the CSS inline and view the changes instantly on any element on any website, so you can play around to customize CSS properties before copying them.
6. Axe
Being a web developer have you ever thought about how do people with disabilities use computers or navigate websites? Tools they use, how it works, or what it's like? Most websites ignore the accessibility part due to a lack of awareness and time. But adding accessibility features on a website is very important to inclusive of all types of users or audiences of your product.
Axe is the World’s leading digital accessibility toolkit, used by developers and testers at many popular companies like Microsoft, Google etc. It provides a browser extension that can run a set of tests on any website to find accessibility issues. It provides a report right in the browser along with suggestions to fix the same.
Scanning for accessibility issues on a website.
7. webdevchecklist
This is another web development checklist that can be used to make sure that everything is on point when it comes to your latest web project. It lacks many features that the checklist we listed on top has, but the best part about this tool is that it also has a browser extension that can be used used to run the checklist instantly on any live website.
Web Developer checklist
8. Cloudcraft
Cloudcraft is a tool that helps you design and budget your cloud. It has a very simple drag & drop interface to create 3D diagrams, by connecting different cloud infrastructure services (currently only for AWS). It also has a budget tab, which will give you a breakdown of your costs for the current architecture.
Planning cloud architecture using AWS services.
9.iHateRegex
While writing code we may come across very specific validation conditions like — the username should start with an alphabet and cannot include special characters except @, or the password should contain at least one uppercase and one special character. Validating against a regex expression is one of the most common techniques used on the front end to validate against custom conditions like this.
But writing the precise regular expression for these conditions is not something everyone loves, especially if you are not familiar with regex. iHateRegex is a tool that can be used to find regex expressions for most common use cases. It also lets you validate the selected regex against inputs and visualize it for better clarity.
Regex for password on iHateRegex
10. Clear Cache
Clearing cache to test a new feature or reflect UI changes is one of the most common things web developers do every day. But having to right-click to go to page settings is also one of the most annoying things to do. ClearCache is a simple browser extension that lets you clear all cache contents with just a click.
That’s it, hope these tools make your life easier as a developer. But as always, if you have more tools in your arsenal that can help fellow developers add them in the comments section.