DEV Community

Cover image for 7 Tips to boost your productivity as a web developer 🚀
Mustapha Aouas
Mustapha Aouas

Posted on • Updated on

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

Enter fullscreen mode Exit fullscreen mode

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:

Inspecting an element

Inspecting an element with "$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):

Using console.table

Using console.table

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
Enter fullscreen mode Exit fullscreen mode

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:

Using debugger

Using debugger

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':

Setting document.designMode to ON

Setting document.designMode to 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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

ℹ️ 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' }
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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?

Discussion (27)

Collapse
manutopik profile image
Emmanuel Salomon

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

Collapse
terabytetiger profile image
Tyler V. (he/him)

Holy wow!

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

Collapse
bmitchinson profile image
Ben Mitchinson

console.table and debugger; woah

thanks !

Collapse
mustapha profile image
Mustapha Aouas Author • 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

Collapse
douglasjb profile image
Douglas J B

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.

Collapse
chrisachard profile image
Chris Achard

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 :)

Collapse
shlomilachmish profile image
shlomi-lachmish

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

Collapse
blackmamba profile image
The Black Mamba🔥

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

Collapse
navin_moorthy profile image
Navin

Great Article... Learned a lot..

Collapse
mustapha profile image
Mustapha Aouas Author

Thanks for the feedback, i appreciate it

Collapse
myozawlatt_mzl profile image
Myo Zaw Latt

Cool!
Thanks for sharing

Collapse
ididnt_getalong profile image
Sudharshaun Mugundan

Thanks much !! never knew about the design mode..

Collapse
mustapha profile image
Mustapha Aouas Author

Thanks for the feedback. You could also set is programmatically in your JS and have fun with it :)

Collapse
selahattinunlu profile image
Selahattin Ünlü

Thanks for sharing! I've learned there is a faster way of querySelector. It's cool!

Collapse
devpablofeijo profile image
Pablo Ruan

Awesome tips, thanks! :D

Collapse
jirois profile image
Omas Ajiri

Great article.. I personally find the designmode tip to be fascinating..
Thanks man

Collapse
flaviovallone profile image
Flavio Vallone

console.table will change my life 😂

Collapse
kioviensis profile image
Max Tarsis

wow
very informative

thanks!:)

Collapse
sammlutz profile image
Sam Lutz

great article! thx

Collapse
fc250152 profile image
Nando

thank you, Mustapha. very useful and well done!

Collapse
sinteticwizard profile image
Ramon Ramirez

Nice

Collapse
dgray0229 profile image
Devin Gray

console.table() made my day! Also, it's great to know I can keep some jQuery habits with the $ and $$.

Collapse
mdhesari profile image
Mohammad Fazel

Thank you!

Collapse
animanoir profile image
Óscar A. Montiel

really cool, thanks