the-tech-tools-I-use-as-frontend-engineer
Rajesh Royal
Posted on October 5, 2020
A list of tools I use Daily:
whether I'm working on
- Personal side projects
- My full-time job
- Or working on Upwork with clients
Design tools
- Adobe Illustrator for logo, icon and illustration design
- Adobe XD for designing user interfaces & wireframes
- Photoshop for editing pictures
- Adobe After Effect for editing videos
- Dribbble/Behance for inspiration and work showcase.
- Dev.to for blogging rajeshroyal
- Grammarly as writing assistance.
Code
The code editor I'm currently using is VSCode with Cobalt theme and Dank mono font.
You can find my VSCode settings here
I share my code & look for inspiration on:
- GitHub
- Codepen
- CodeSandbox
If I’m simply coding an interface that I might integrate into a web app I use plain HTML/CSS & vanilla JavaScript.
I made my personal Html5 boilerplate to speed up that process. It has 6K+ downloads on VSCode marketplace
But if I'm working on a landing page, documentation website, blog or even a large web app I use:
Primary stack
- The JAM stack:
- Gatsby
- Serverless functions are written in JavaScript (when required)
- Headless CMS (when required) otherwise WordPress
- Markdown, Yaml, Json etc... (when required)
For CSS, I’m cool to use whatever tech available out there that makes my task done quickly & well, I have personally used Bootstrap 4, Bulma, tailwind, Foundation. I prefer coding with vanilla CSS or CSS in JS using styled-components or CSS modules, because I enjoy styling my elements from scratch since the components are fully reusable with React.
I have used Theme UI and styled-system as well, I do think they are good and useful and I do recommend them.
Secondary stack
-
MERN stack:
- MongoDB
- Express
- React (CRA)
- Node Js
or
NestJS instead of express
The MERN stack is my secondary stack for building web apps
I use Git bash as my terminal when I’m on windows, Terminal when I’m on Linux.
For the backend, I was using PHP/MySQL which I didn’t personally like, so I switched to Node js meaning that I currently use Express Js/Mongoose and MongoDB as a NoSQL database to make Restful APIs which I deploy on Heroku if it was an MVP.
Optional stack
This can be part of the JAM stack
the "A" part on JAM which stands for APIs
- Firestore
- FaunaDB
- Auth0
- ...
Mobile stack
- React Native > I have used Cordova before didn't like it
For native apps, I use React Native to build mobile apps (ios & Android).
Deployment
- Vercel/Netlify using their GitHub integration or the Vercel/Netlify CLI
- Amazon AWS
- App Store / Play Store using Fastlane
Growth
For growth, I focus more on building useful products that users really need in their lives then I simply share it on this blog, dev.to, Reddit and on social media.
Setup
Laptop
Personal
-
Acer Nitro 5"
- Display: 15.6" IPS (In-Plane Switching) technology, Full HD 1920 x 1080
- Processor: Intel Core i5-9300H processor, turbo up to 4.10 GHz
- Graphics: NVIDIA GeForce GTX 1650 with 4 GB of Dedicated GDDR5 VRAM Graphics
- Ram: 24 GB 2667 MHz DDR4(16 GB) / 2467 MHz DDR4 (8 GB) I know different freq. 😅
- SSD: 256 GB
- HDD: 1 TB
Equipment
- Monitor: LG 24 Inch
- Keyboard: Zebronics, Acer RGB keyboard
- Main Headset: Boat Rockerz
- Secondary headset: PTron Boom 3D
- Earphones: PTron Boom 3D
- Microphone: PTron Boom 3D
- Desk: Simple wooden desk
- Mouse: Eastern Media model T9 multicolour
- Mousepad: My desk 😅
Phones
- For Android, I'm using the Asus Zenfone Max Pro
- Android 11
- For iOS, I'm using the iPhone 7
- pending......
Previously, I was carrying only an Intext Aqua Power HD which I had to stop using due to some reasons
Cameras
At the moment, I'm only carrying with me a Mobile Camera 😞
Ai assistant
Currently, I'm using "OK Google"
VR
Acer Mixed Reality
Your tools in the comments are more than welcome
Posted on October 5, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.