DEV Community

Cover image for Ultimate Tools for Developers 🛠
Technophile
Technophile

Posted on • Updated on

Ultimate Tools for Developers 🛠

Hey, there! 👋

Let me introduce you to this community-driven list of awesome tools for developers. It is a open-source project, built by the community. So, feel free to contribute to this list. You can find the contribution guidelines at the end of this post.

Alright, let's get started! 🚀

Table of Contents

Platforms 🌐

Learn to code — for free. Build projects. Earn certifications.

Learn to Code with Interactive Tutorials. Edit the code while watching the video tutorial. Cool, right?

Improve your front-end skills by building real projects. Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs.

Guidelines 🧭

High-level advice and guidelines for writing sane, manageable, scalable CSS

An opinionated styleguide for writing sane, maintainable and scalable Sass.

Documentation 📚

The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.

One of the best platforms to learn web development. Whenever you have a question about HTML, CSS, JavaScript, or any other web technology, always check MDN first.

A reference for pretty much any programming language you could imagine.

One of the greatest platforms for tips, tricks and techniques on using CSS (Cascading Style Sheets).

Code Editors and IDEs 💻

Being a free and open-source code editor, Visual Studio Code is a great tool for developers. It comes with a lot of features and extensions that make it a great choice for developers.

Simply put, CodeSandbox is an online version of Visual Studio Code.

The github.dev web-based editor is a lightweight editing experience that runs entirely in your browser.

There are 2 ways to open a web-based editor

  1. Press the . key on any repository or pull request
  2. Swap .com with .dev in the URL. E.g. https://github.dev/username/repo

CodePen is a playground for the front end side of the web. It's a place to experiment, test and show off your front end work. Also, you can find many inspirations from other developers.

Replit is a simple, powerful, and collaborative online IDE. It's a great place to code, collaborate, and host your projects.

A web IDE for Front-end and Full Stack developers.

Wanna play around with TypeScript? TypeScript Playground is a right place for you.

Images 🖼

Easily find beautiful, high-quality photos for your next project. All photos are free to use for commercial and personal use.

Pexels is a great source of free stock photos. All photos are free to use for commercial and personal use.

Carbon is a great platform to create and share beautiful images of your code, allowing you to customize the image with syntax highlighting, themes, fonts, and more.

Free Photo editor, animation and design.

Colors 🎨

Never waste Hours on finding the perfect Color Palette again! Just Enter a Color! And Generate nice Color Palettes

Create the perfect palette or get inspired by thousands of beautiful color schemes.

Want to know what colors look good together? Canva's Color Wheel makes color combinations easy.

Typography 📝

Google Fonts is a library of free licensed font families. Simply choose the fonts you want, either download them to your computer or use the provided CSS or HTML links to embed them in your web pages.

If you don't want to grab fonts from CDN, then use self-host Open Source fonts in neatly bundled NPM packages.

Nerd Fonts patches developer targeted fonts with a high number of glyphs (icons).

Design 🎨

A free, online and collaborative interface design tool and prototyping tool.

Pinterest is a visual discovery tool that you can use to find ideas for all your projects and interests.

Tools 🛠

Wait a second! Tools within tools? Yes, you heard it right. Here are some tools that will help you to find more tools. 😃

Stack Overflow is a question and answer site for professional and enthusiast programmers. It's a great place to ask questions and get answers.

A collection of useful tools for developers.

A collection of useful tools for developers.

Can I Use provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

Have you ever struggled to create a favicon for your website? Different sizes, different formats, different platforms.
Quickly generate your favicon from text, image, or choose from hundreds of emojis.

Both free and premium icon library.

Find a massive collection of cheat sheets for different technologies in an organized format.

A polyglot web converter. Easily convert HTML to Pug, TypeScript to JavaScript, Markdown to HTML and much more...

A website where you can find all the tools with better user experience.

Always stay up-to-date with the latest developer news, tools, and events.

DevOps backup & Disaster Recovery software for all GitHub, GitLab, Bitbucket and Jira data.

A great tool for organizing your issues and pull requests in a team.

No Code Tools For Non Programmers. It has a collection of tools you might need to transform data or generate data for tests, but also to convert ascii to hex as an example.

Contributing 🤝

Want to contribute? Here's how:

  1. Find an awesome tool that is not on this list and you think it should be 🤔
  2. Provide the title, description, and link of the tool to give a brief idea about it 📝
  3. Add "💎" (diamond) at the end of your comment. Why? Because you deserve it 😃! Also, it's easier for me to find your comment as well 🙂
  4. Bookmark the post, and you can always view the latest tools as we update 📑

Conclusion 🎉

I hope you found this list useful. And, it's not over yet! We'll keep expanding and updating this list with more tools.

If you have any questions, feel free to ask in the comments. Thanks for reading! 🙂

🔝 Back to Top

Top comments (29)

Collapse
 
parenttobias profile image
Toby Parent • Edited

In the VS Code category, I want to add the in-browser VS Code is remarkably powerful. To see what I mean, visit one of your repos in the browser, and press the . key - the IDE will load in-browser, with full functionality.

Absolute time-saver, when folks ask me to look at a problem in their code - I can simply load the IDE right there, and view their repository in the browser in a familiar interface!

Collapse
 
dostonnabotov profile image
Technophile

Added it to the list 📁. That's definitely the easiest and fastest way to open up an editor and start coding. Thanks for the contribution 😃

Collapse
 
dajramirez profile image
dajramirez

Thank you for the list. I love it.

I find this page a few days ago and it's being very useful to me.
OverAPI.com: It contains a great amount of different technologies documentation. Very good organized and with helpful cheat sheets.💎

Collapse
 
dostonnabotov profile image
Technophile

Added it to the list ✅📁. That's exactly what I was looking for. Thanks for the contribution 🙂

Collapse
 
jd2r profile image
Dominic R.

Hey there! Nice list you've got here 👍

StackBlitz: a web IDE for frontend and full stack devs.
W3Schools: a reference for pretty much any programming language you could imagine.

Collapse
 
dostonnabotov profile image
Technophile

Thanks for the contribution. 👍 Added them to the list 📁

Collapse
 
dostonnabotov profile image
Technophile

Update: ✨

Thanks for checking out this article. Always feel free to contribute to this list 🙂

Collapse
 
vikirobles profile image
Vicky Vasilopoulou

I have also been using this tool if you want to add it on your list, I am using queries a lot: transform.tools/

Collapse
 
dostonnabotov profile image
Technophile

Added it to the list ✅📁 Thanks for the contribution 🙂

Collapse
 
raibtoffoletto profile image
Raí B. Toffoletto

I find FontSource (fontsource.org) super useful when we don't want to grab fonts from cdn 🙂💎

Collapse
 
dostonnabotov profile image
Technophile

Added it to the list 📁✅. Thanks for the contribution and following the guidelines 😃

Collapse
 
pratham891 profile image
Pratham Singh

Canva Color Wheel
.
.
Helped me a lot..

Collapse
 
dostonnabotov profile image
Technophile

Added it to the list 📁. Really cool color combination tool 🎨. Thanks for the contribution 😃

Collapse
 
vikirobles profile image
Vicky Vasilopoulou

really useful thank you <3

Collapse
 
06ergin06 profile image
İbrahim Hakkı Ergin

Thanks for the nice list

Collapse
 
pandadev_ profile image
PandaDEV

Linear is one of the greatest tools for organizing your issues and pull requests in a team.

Collapse
 
dostonnabotov profile image
Technophile

Added it to the list ✅📁 Thanks for the contribution 🙂

Collapse
 
frederickprice profile image
Frederick Price

This is a really helpful list. Definitely adding to my favourites!

Collapse
 
hackertab profile image
Hackertab.dev 🖥️

Interesting set of tools, I think Hackertab would be a good fit in this list, as it helps developers to stay up-to-date with the latest developer news, tools, and events.

Collapse
 
dostonnabotov profile image
Technophile

Added it to the list ✅. Great extension. Thanks for the contribution 🙂

Collapse
 
ssmarta profile image
Marta Przybylska

Hi,

I wouldn't be myself if I didn't mention GitProtect.io - DevOps backup & Disaster Recovery software for all GitHub, GitLab, Bitbucket and Jira data - gitprotect.io/ 💎

Collapse
 
dostonnabotov profile image
Technophile

Added it to the list ✅. Thanks for the contribution 🙂

Collapse
 
andritogv profile image
Alex González

I would add nerd fonts in the Typography section.
nerdfonts.com/

Collapse
 
dostonnabotov profile image
Technophile

Added it to the list 📁. Definitely needed something for Typography and Icons. Thanks for the contribution 🙂

Collapse
 
dostonnabotov profile image
Technophile

Added it to the list 📁. Great job you've done here 😃! Thanks for the contribution.