Tools Every Developer Should Know and Use

SO FAR SO GOOD
I hope your Web Dev journey sounds like that.
Well if yes, then I have something that can make good to great and,
if no, then don't worry folks these tools will make that good.

I have some fantastic Chrome Extensions and Websites that can make your life way easier as a web developer. I use these tools and they are amazing, secure, and time-saving.

Note: I highly encourage you to learn basics(HTML, CSS, JS), then move towards using these tools.

Websites

• Uxwing: For Free PNG and SVG icons for your projects.
• Unsplash: For Wallpapers and Images of different sizes.
• Jsonplaceholder : For JSON free API.
• lighthouse: Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public, or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more.
• Css-tricks: Name suggests what it does :) fantastic css articles
• css-box-shadow: Create box shadows in an instant, do check out front-end developers.
• css-gradient: Create gradient real quick and easy.
• Sharingbuttons.io: Super fast and easy Social Media Sharing Buttons. No JavaScript. No tracking. Super Helpful.
• convert CSS to JS: Convert CSS to JS and VICE VERSA.

Extensions

• Wappalyzer: Wappalyzer is a technology profiler that shows you what websites are built with. Find out what CMS a website is using, as well as any framework, eCommerce platform, JavaScript libraries, and many more.
• Adblock: Enough of Cringy and attention deflecting ads.
• WhatFont: The easiest way to identify fonts on web pages.
• ColorZilla: Advanced Eyedropper, Color Picker, Gradient Generator, and other colorful goodies.
• Imageye - Image downloader: Find and download all images on a web page. The best tool, I use while cloning any website for practice.

If you have any tool to share, then do write it in the comments
and if you like my work then follow me on
Twitter 😊 Himanshu
Linkedin 😄 thehimanshutiwari

Comments

[Andrew Brown 🇨🇦]

You forgot Vimium: (Vim for Chrome) 🙃

chrome.google.com/webstore/detail/...

[Aspiiire]

Man this is a banger thank you so much i loved it never knew about it thanks again!! 🔥

[𒎏Wii 🏳️‍⚧️]

I personally prefer vb4c (a fork of cVim after that was abandoned) :D

[Himanshu Tiwari 🌼]

Ahaan, that's because I knew you will do comment that, lol
Thank you so much for
Telling me about this one dude

[brandon_wallace]

Add the VisBug Chrome extension to the list.
Visbug is an open source browser design tool built with JavaScript.

It's features are:

• Point, click & tinker
• Edit or style any page, in any state, like it's an artboard
• Inspect styles, spacing, distance, accessibility and alignment
• Nitpick layouts & content, in the real end environment, at any device size
• Leverage adobe/sketch skills
• Edit text, replace images
• Design within the chaos: use production or prototypes and the odd states they produce, as artboards and design opportunities
• Design while DevTools simulates latency, i18n, media queries, platform constraints, CPUs, screen size, etc
• Make more decisions on the front end of your site/app (a11y, responsive, edge cases, etc)
• No waiting for developers, just go direct and edit the end state (regardless of framework) and execute or test an idea

There are other great photo websites.

pixabay.com/
pexels.com

For PNG images with transparency
klipartz.com/en

[Himanshu Tiwari 🌼]

Great, definitely will try

[Adrian Matei]

Bookmarks.dev to manage your dev bookmarks and code snippets...

[Vinay]

Great tool, very nifty and useful.

[Himanshu Tiwari 🌼]

Niceee 😃😃

[Winston Puckett]

neumorphism.io/ too :)

[Himanshu Tiwari 🌼]

What's that for

[Winston Puckett]

It generates neumorphic css, so you don't have to mess around with box shadows yourself :)

[Himanshu Tiwari 🌼]

nice will try thanks

[Petr Stříbný]

The title of the post absolutely doesn't correspond to the content. Also, writing an article where the title would be apt is almost impossible.

[Himanshu Tiwari 🌼]

What if you have to choose a title for the post? What will you choose?

[Petr Stříbný]

You have made a post about "every developer", but those tools are front-end/web development only. What's more is that I don't consider them anything that everybody "has to know and use".

I suggest naming it according to what it really is, e.g. "Tools I like and use as a web developer".

[Himanshu Tiwari 🌼]

Good, insight
Next time will think of that, dude

[om chhabra]

I will try all these extensions when I will complete my course...

[Himanshu Tiwari 🌼]

Definitely, then you will save a lot time

[Aspiiire]

Thanks man really great article, never knew about Uxwing really interesting 😁

[Andrew Baisden]

So many great tools what would we do without them.

[Antoine]

You could maybe add Visbug and Responsive Viewer. They are just awesome for a webdev

[Himanshu Tiwari 🌼]

Some one already added in discussion, so i think now it's not needed
If you have any other awesome extension to share ?

[Antoine]

Yes You re right ^^
Im using extensions like postman for debuging api endpoints. I use darkreader too.. It's Nice for reading documentation at 4 am 😅

[Himanshu Tiwari 🌼]

Darkreader that's really nice
Thanks for sharing

[Konstantin Bogomolov]

Website monitoring: uptime.onl
Bugtracking: bugsnag.com
Expose project from local machine: ngrok.com

[Himanshu Tiwari 🌼]

Wow, so much of amazing tool you have dude

[Reaper]

Fonts Ninja, another alternative to WhatFont, adds up to your browser and you can point on any font on a webpage
fonts.ninja/

[Himanshu Tiwari 🌼]

Nice, Do you have any new to add on the list

[Andrei Dascalu]

Sounds more like UI focused tools, rather than generic development or even web development.

[Himanshu Tiwari 🌼]

Glad you found them useful, BTW do you have some to add in my list? Would love to share some

[Tran Quan]

Thanks! This is so useful

[Himanshu Tiwari 🌼]

Glad it was useful