Tips to Stay Productive in Front-end Coding

As a front-end developer, I have formed some habits, which have successfully translated into productivity and made me more organized. I’m going to share some productivity tips that I’ve used and try to maintain in my daily life. Let’s get started!

Use the right tools

Tools have become an important resource for us. Use Tools as Weapons, Not Shields. Developers love their tools and are often loyal to those applications. Right tools help us write the best work. Here is my tool list that I used every day in my working life.

  • For the editor, I use visual studio code, which is a free solution that works great for me.
  • Chrome DevTools, Sketch, git bash, npm scripts, bower, sass, React, Redux, codepen and a few more.

Organize files

We have to work with many different files like HTML, SASS, JavaScript, Images, project documents, client-server assets etc. Make a directory layout with a separate directory for each topic. Inside each directory, we can divide files into sub-directories for different sub-topics.

Install useful browser extensions

There are a lot of Chrome plugins which can boost your performance. Here are few I use every day.

  • Color picker, Page ruler, awesome screenshot
  • React devtools, Redux devtools etc for frameworks debugging
  • Sight – The Syntax Highlighter for Chrome
  • JSON-handle – It’s a browser and editor for JSON document
  • WhatFont – for identify fonts
  • Window Resizer for responsive check

Create Guides

Create a set of guidelines for your next writing project. The guideline can include rules for flow, project files structure etc…

WebPagetest/ Performance 

Check the application/site performance/loading/request time using chrome dev tools network tabs.  optimize your images, minify your code.

Always Check Helpful sources for front-end development news in your free time

And Finally Be humble and curious. Never call yourself a guru or ninja.  It’ll make you more productive   🙂 

3 thoughts on “Tips to Stay Productive in Front-end Coding”

Leave a Reply

Your email address will not be published. Required fields are marked *