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)
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.
Plus they also work on Windows
I was looking for free alternatives. Thank you for suggesting these. I'll check them out!
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/
Why hadn't I heard of this?! It's amazing! Thanks for sharing :)
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.
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.
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.
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 :?
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.
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.
Nice, thank you
Thanks for share!
Don't forget about Stream for your Feed and Chat needs!
Is Stream like Slack?