Checkout my Getting Started with React video course on Skillshare. It is 100% free.

How to force addEventListener to be called just once

The addEventListener accepts a third argument called options. Using it you can configure the listener so that it is automatically removed after its first call:

.addEventListener('click', 
    () => alert('Event will be called just ONCE!'), 
    {once: true}
);

Here is a full working demo:

See the Pen
force addEventListener to be called just once
by JS Craft (@js-craft)
on CodePen.

Check out the full documentation for the options parameter here.

By the way, did you know you can use an object instead of the callback function in addEventListener?

Using objects with addEventListener in vanilla Javascript

The default way we use addEventListener is in conjunction with a callback function:

document.querySelector('.alert-me')
    .addEventListener('click', () => alert('This is an alert !!!');

However, it seems we can also pass it objects, as long as they have defined the handleEvent() method:

class MyHandlerObj { 
    constructor() { 
        this.alerts = 0; 
    } 

    // we need to have this method as it is
    // defined in the `EventListener` interface
    handleEvent() { 
        this.alerts++; 
        alert('Alerts triggered ' + alerts); 
    }
} 

document.querySelector('.alert-me')
    .addEventListener('click', new MyHandlerObj());

And, based on this, we can build a parent like :

class MyComponent { 
    constructor (el) { 
        this.el = el
        this.el.addEventListener('click', this) 
    } 

    handleEvent (event) { 
        console.log('my component element was clicked') 
    } 

    destroy () { 
        this.el.removeEventListener('click', this) 
    } 
} 

const component = new MyComponent(document.querySelector('button') );

Coll stuff! Kudos to Stefan Judis for writing about this one šŸ‘.

The CSS revert value – setting the default value for CSS properties

Have you ever been in the position to search for what CSS property has inherited from where so that you know how to revert it to its default stage?

Well, look no further! The revert CSS value does exactly this. It reverts a specific CSS property to its default user-agent style sheet value (meaning that it makes it as if you would not have applied any CSS at all to it).

Considering the following code:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="default">Fusce sit amet luctus mi.</p>
p {
    background-color: darkblue;
    color: orange;
}

You can apply it so that you will reset just one specific property:

p.default {
    background-color: revert;
}

Or you can reset all the properties in conjunction with all:

p.default {
    background-color: revert;
}

Happy reverting, folks! šŸ˜€

DHH about having a healthy relationship with work

David Heinemeier Hansson was for sure someone who has modeled my views about work and programming. I've just listened to a good podcast with him.

In particular, I've liked the part where he speaks about why it's important to manage your life in such a way that you enjoy the current day and get a feeling of fulfillment at the end of it.

Focus on having a good and balanced day, as the opposite of chasing that big achievement that will regulate all your emotions and fix almost anything.

Building a layout with CSS Grid video series: Part 2 – Defining the named template areas

In the second part of this screencast series, we will see how we can use the grid-template-areas to define the general cell tiles of the layout. Also, by using the grid-area we will place each component in its corresponding grid cell.

Stay tuned as the next week I will publish two new episodes from this series.

Also, you can check the other screencast series about Build a game with React part 1 and my full video course about React on Skillshare.

Building a layout with CSS Grid video series: Part 1 – Introduction

Hey guys! After all of the recent articles about CSS grid, I am happy to announce that I've started to recoded a new screencast series. It will be a 6 part video course about making a responsive homepage layout with CSS grid and named template areas.

Below is the first part, describing the full example and the starting files. Drop me an email at daniel at js-craft.io with your feedback šŸ™‚ Expect 1-2 videos per week.

Also, you can check the other screencast series about Build a game with React part 1 and my full video course about React on Skillshare.