Tools of a front end developer
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.
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
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 ✌️
Other articles you might be interested in —
The Best Approach To Design React Component Hierarchy
A maintainable, scalable and testable structure for your react application