7 Tips to boost your productivity as a web developer 🚀

Being more productive as a software developer can sometimes be done by simply using the right tools for the job. If you can save just one minute a day, you will save up to four hours a year, if you don't take any vacation that is :)

So without further a due here are my 7 tips that could help save time:

A faster querySelector

As web developers, we spend a lot of time in the browser, or should I say, in the devtools of our browsers. Well from the console of those devtools you can select an element either by the document.getElementByIdAPI or from the more versatile document.querySelector and document.querySelectorAll APIs.
But there's a faster way to do it. Instead, you could use:

$('.some-class') // instead of document.querySelector
$$('.some-class') // instead of document.querySelectorAll

Note that querySelectorAll returns a NodeList while $$ returns an array.

Inspecting an element

Another useful feature you can use when you inspect an element (with the inspect tool of the devtools) is $0. After inspecting an element you can access it in the console by typing $0:

The powers of the console object

If you are working on a web project, chances are that you are using console.log to debug your app. Did you know the console object has other methods that can help you debug your code faster?

The console.table for instance is a far less known method but it can be very useful since it organizes your output in an array fashion where you could quickly sort your variable's values. (console.table takes a second argument as an array of the columns you want to keep, and it will filter the rest of the columns):

Another useful method is console.dir. This method will let you log the javascript object of a DOM element instead of its HTML.

const element = $$('your-component')[0];

console.log(element); // displays the HTML element

console.dir(element); // displays the list of the element's properties

Better ways to debug

The console object is great but if you are it using it to debug your code, then you might be spending more time than you need to. Instead of console logging, you variables then inspecting them in the console, you can use debugger then you would have access to all the variables of the scope the debugger is in.

See an example of using debugger bellow:

Did you know about designMode?

Let's imagine the following scenario: You are working on styling a component that holds text inside it. And you want to test some edge cases by changing the text of the component, like for example putting an insanely long text or no text at all.

While you could achieve this by editing the HTML of the component in the DOM tree or in your source code, the easiest way is to set the designMode property of the document to 'on', then changing the text directly on the web page.

In the devtools run: document.designMode = 'on':

Well, enough about debugging, let's see how to be more productive while writing some code:

Taking advantage of object destructuring

If you are using ES6, or any transpiler, you can take advantage of destructuring by quickly accessing objects (and arrays) properties.

One great use-case is declaring new variables. Here's an exemple :

// Using it on arrays

const geolocation = [1.420000, 42.10000];
// Slow to type
const long = geolocation[0];
const lat  = geolocation[1];
// Fast
const [long, lat] = geolocation;

// Same goes for objects:

const geolocation = { long: 1.420000, lat: 42.10000 }
// Slow to type
const long = geolocation.long;
const lat  = geolocation.lat;
// Fast
const { long, lat } = geolocation;

Another great usage of destructuring is swapping variables values. You can do it like this:

let a = 1; 
let b = 2;

[a, b] = [b, a]

console.log(a, b) // 2, 1

ℹ️ Destructuring is a vast subject. You can read more about it in this article.

The Spread Operator

Last but not least, this last tip is by far my favorite one of the list, one that I use all the time. Thanks to the spread operator, Javascript has become more dynamic than ever.

One way to use this operator is to copy and concatinate arrays and objects:

// For arrays

const arr1 = [0, 1];
const arr2 = [2, 3];

const copyOfArr1 = [...arr1];
const concatenating = [...arr1, ...arr2]; // [0, 1, 2, 3]

// Same works with objects:

const ob1 = { name: 'mark' };
const ob2 = { surname: 'smith' };

const copyOfOb1 = {...ob1};
const concatenating = {...ob1, ...ob2}; // { name: 'mark', surname: 'smith' }

Also, you could use the spread operator to push/unshift values into objects and arrays. Here is an example of that:

let array = [1, 2, 3];

array = [0, ...array, 4]; // [0, 1, 2, 3, 4]

This also works for objects but with a subtlety that if the property was already defined in the object, it will be overwritten:

let ob = { name: 'mark', age: 30 };

ob = { ...ob, age: 20 };
console.log(ob); // { name: 'mark, age: 20 }

Another use of the spread operator you could take advantage of is calling a function with an array of arguments:

const numbers = [1, 2, 3, 4, 5, 6, 7];

Math.max(...numbers); // 7

That's it for this post. I hope you liked it. If you did, please share it with your friends and colleagues. Also you can follow me on twitter at @theAngularGuy as it would greatly help me.

Have a good day !

What to read next?

7 amazing CSS properties you may not know (yet)

Mustapha Aouas ・ Apr 20 '20

#css #webdev #design #beginners