Tools of a front end developer
List of softwares I use daily for building front end in 2021
The time has gone when the front end actually meant — HTML & CSS. A developer has to think about app design, prototyping, brainstorming sessions, lots of sticky notes, and what not…
To manage all the hard work, here is the list of softwares I use on a daily basis to go with my front end tasks —
🧩 Prototyping or Flow diagrams
For making a rough prototype or mockup, I use Adobe XD. Though, I am not a pro at XD but I know how to get my things done on it.
But recently, I got to know about an online tool — ExcaliDraw, which gives you a hand-drawn look and feel for your mockups. I use it for making rough skeleton structure of apps and designing app flows.
📝 Brainstorming and note making
Before starting any project, I note down the features of the app, technologies that I am going to use and if any alternatives available, collecting UI inspirations from Dribbble or Behance, and future scope and scaling.
To jot down all these things, I use Notion and Hashnode drafts. I prefer hashnode as I found it simple and easy to use. And, auto-save as you type feature helps me to continue from where I left.
💻 Coding
Many people think that writing code is the main part of this pipeline. But, I keep it below the above two processes. Coding hardly takes much time if you have a prototype ready and have a clear plan of structuring the app, managing the app state, routing, etc.
Okay. Back to the point. I use VS Code with Dark theme (Sorry Light theme coders, we can’t be friends!). I also have Sublime Text but I rarely open it.
Some of the VS Code extensions that I cannot code with —
- Ayu Mirage PowerUp, favourite dark theme
- Material-icon-theme for file icons
- Path intellisense for file path auto-complete
- Terminal for vscode
- Prettier for code formatting
- vscode-styled-components for css highlighting while using styled-components
🌱 Version Control
I use git for source code management and versioning. I avoid terminal as much as I can and use Sourcetree and Github Desktop as git GUI. First preference is Sourcetree though!
🌐 Browsers
Google Chrome ruling at the top! Mozilla or Safari to check if the bug is chrome specific. 😬
So, you know about my tools, it’s time to know a bit about me. I am a front end developer building conversational experiences at Active.Ai, working mostly with React ecosystem.
I do pet projects and blogs whenever I get time. You can visit my website to have a look at my work. For projects, you can check my GitHub. I also share my front end journey on my Instagram page, madsemicolon. Do check it out ✌️
