Mustapha Aouas

Posted on Aug 15, 2019 • Updated on Oct 25, 2021

7 Tips to boost your productivity as a web developer 🚀

#javascript #webdev #beginners #productivity

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 ・ 5 min read

#css #webdev #design #beginners

Top comments (25)

Emmanuel Salomon • Aug 16 '19

To toggle design mode, put this in your favorite:
javascript:(function(){document.designMode=document.designMode==="on"?"off":"on"})();

Mustapha Aouas • Aug 15 '19 • Edited

Also, because the array destructuring uses the iteration protocol, we can't destructure a null array:

a = null;
[...a]; // throws an error
{...a}; // works fine

About the performance considerations, do you have some benchmarks?

I tried a simple array destructuring for pushing values to an array, and it's faster than the push method: jsben.ch/IFmIz

Ben Mitchinson • Aug 16 '19

console.table and debugger; woah

thanks !

Tyler V. (he/him) • Aug 15 '19

Holy wow!

The $0 in console after inspecting an element is a game changer!

Douglas J B • May 10 '20

I've been thinking a lot about this recently, and this is the trick: Pump yourself up about what you're working on. It can't be fake. You really have to somehow make yourself genuinely excited about what you're working on. Productivity will follow automatically. Nothing else even moves the needle compared to this, as far as I'm concerned.

Navin • Sep 13 '19

Great Article... Learned a lot..

Mustapha Aouas • Sep 13 '19

Thanks for the feedback, i appreciate it

shlomi-lachmish • Aug 18 '19

first time I see document.designMode 🤯🤯🤯
thanks !

The Black Mamba🔥 • Aug 15 '19

$$ and destructuring array was new for me!! thanks

Chris Achard • Aug 16 '19

Ah! I never knew about design mode... that's neat. Not exactly sure what I'll do with that knowledge or how I'd use it... but it's neat to know that it exists :)