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 frontend journey on my Instagram page, madsemicolon. Do check it out ✌️