DEV Community

Leira Sánchez
Leira Sánchez

Posted on

Useful Tools for Web Devs

There are hundreds of tools for developers, both paid and free. It can be overwhelming to pick out which ones will actually benefit you. You also don’t want to clutter your workspace with every tool under the Sun. This is a list of the tools that have been helpful to me as I learned web development and in my job as a Software Engineer.

Fullstack

  • VSCode Extensions
    • Bracket Pair Colorizer 2 - colors matching brackets so they are easier to pair
    • Auto Rename Tag - whenever you change an HTML/XML tag, this extensions automatically renames its pair
    • TODO Highlight - leave yourself reminders throughout yoru code. Whenever you add TODO: it will highlight the phrase
    • Gitlens - this extension has a lot of great features but I mostly use it as a way to see who wrote what line of code and when (git blame). Let me know in the comments what else you use it for!
    • Markdown Preview Github Styling VSCode's markdown preview is great but with this extension, your preview will resemble the Github styles more closely
  • Postico - edit your database using a friendly UI instead of dry commands
  • Postman - many uses for this app but I mostly use it to test APIs
  • Bundlephobia - compute how much your app will grow in size when adding an npm package to it

Design

  • Coolors - free color palette generator
  • Sketch - Sketch makes it super easy to create wireframes for your apps
  • Appicon - generates icons and images for mobile apps right from your browser

Productivity Stuff

  • Spectacle – easily arrange windows with custom keyboard shortcuts. Unfortunately, it is no longer being maintained. There are other apps like this one but I haven't experimented with them yet since Spectacle has been working great in Catalina
  • Pomoday.app - keyboard-based task management app. It's very new but I already use it everyday. You can time how long a task takes and see a snapshot of your day
  • Notes - this is the native notes app from Apple. I used to use OneNote but Notes is much cleaner and faster. You can search easily through them so I make sure to include keywords in my notes
  • HabitBull - Habitbull makes it easy to track my habits
  • Overcast - this is my go-to app for podcasts. I am so sad that there isn't an Alexa skill that works with it but it's still better than Spotify or Apple Podcasts. My favorite feature is the ability to create playlists made up of episodes from different shows
  • Booksloth - I am an avid reader and always keep my Goodreads up to date. However, Goodreads seems to be stuck in the past. Booksloth is beautifully designed and adds the ability to rate books based on badges such as "Story", "Worldbuilding", "Writing Style"

You’ll have to experiment with what’s out there and make sure to keep only those that benefit you and your work. If you use any of these, comment on your experience with them or recommend me tools to use, and I’ll check them out.

Top comments (15)

Collapse
 
nathanminchow profile image
Nathan Minchow

Great list of resources!

For design and wireframing, I'd recommend Adobe XD and Figma in addition to Sketch. They all have similar functionality, but XD and Figma have free plans which may be more accessible to those who are just getting into development and/or design.

Collapse
 
ricoet22 profile image
Kamil Pawlak

Plus they also work on Windows

Collapse
 
leirasanchez profile image
Leira Sánchez

I was looking for free alternatives. Thank you for suggesting these. I'll check them out!

Collapse
 
pantsme profile image
Antonio Savage

Instead of the bloated postman, for more simple api work flows and testing apis, check out Postwoman. It's an open source kind of clone to Postman in the browser. Works amazingly and has all the features that you'd need for web dev. postwoman.io/

Collapse
 
leirasanchez profile image
Leira Sánchez

Why hadn't I heard of this?! It's amazing! Thanks for sharing :)

Collapse
 
pantsme profile image
Antonio Savage

No problem! I just found out about it like last week and was blown away by it so I am trying to share with everyone. Oh, its also mobile friendly and installs just like any other PWA on your phone in Chrome.

Collapse
 
nickytonline profile image
Nick Taylor

Congrats on your first post!

How do you find the Pomodoro method? I’ve tried it before several times, but In the end I just found I get into grooves and capping it at 25min kills my creativity.

Collapse
 
leirasanchez profile image
Leira Sánchez

I find the Pomodoro method useful in two cases. One case is when I have to do something I don't want to do. The Pomodoro makes it easier to stop procrastinating. The second case is when I'm trying to make something a habit. When I start getting into "the zone" and I'm not eager for the timer to go off, I know I've reached the point I wanted.

Collapse
 
mnkhod profile image
Munkh-Od

hi , what would ur advice be for people who are just starting out in web development #JuniorDev , should they learn css frameworks first? or focus on flex box and css grid of css3 native features :?

Collapse
 
nathanminchow profile image
Nathan Minchow

I agree with the other comments to avoid frameworks and get a good understanding of base CSS first.

MDN has a great learning CSS guide in their Learning Web Development series that does a good job of breaking everything down.

Collapse
 
leirasanchez profile image
Leira Sánchez

I would definitely get comfortable with CSS before starting a framework. You don't want to become dependent on a framework and unable to do CSS without it.

Collapse
 
semihcelikol profile image
Sem

Nice, thank you

Collapse
 
mauroere profile image
Mauro Rementeria

Thanks for share!

Collapse
 
nickparsons profile image
Nick Parsons

Don't forget about Stream for your Feed and Chat needs!

Collapse
 
leirasanchez profile image
Leira Sánchez

Is Stream like Slack?