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

Using the HTML img lazy attribute and link preload image to improve page performance

Two things that we can easily do improve to improve the image performance on our web pages:
1. lazy load the images: Basically, lazy loading an image means to make the request for that img only when we need to show it in the view.
Let's take an example where we have a long list of vertical images:

<img src="cat1.png" />
<img src="cat2.png" />
<!-- many cats here -->
<img src="cat25.png" />

By default, the page will request for all of them, even if just the first one is in the initial view. This will make our page slower to load.

But if we add loading="lazy" the browser will ask for an img only when the user scrolls down to that specific image. We are loading the images only when we need them.

<img src="cat1.png" loading="lazy"/>
<img src="cat2.png" loading="lazy"/>
<!-- many cats here -->
<img src="cat25.png" loading="lazy"/>

The second accepted value for the loading attribute is loading="eager". But is the same as the default; as not having the loading attribute declared.

  1. preload the critical big hero images. We can use the link rel=preload to request in advance the big images:
<link rel="preload" as="image" href="donut.jpg">

This will help with the Largest Contentful Paint metric. More details in this fantastic article from Smashing Magazine.Two things that we can easily do improve to improve the image performance on our web pages:
1. lazy load the images: Basically, lazy loading an image means to make the request for that img only when we need to show it in the view.
Let's take an example where we have a long list of vertical images:

<img src="cat1.png" />
<img src="cat2.png" />
<!-- many cats here -->
<img src="cat25.png" />

By default, the page will request for all of them, even if just the first one is in the initial view. This will make our page slower to load.

But if we add loading="lazy" the browser will ask for an img only when the user scrolls down to that specific image. We are loading the images only when we need them.

<img src="cat1.png" loading="lazy"/>
<img src="cat2.png" loading="lazy"/>
<!-- many cats here -->
<img src="cat25.png" loading="lazy"/>

The second accepted value for the loading attribute is loading="eager". But is the same as the default; as not having the loading attribute declared.

2. preload the critical big hero images: We can use the link rel=preload to request in advance the big images:

<link rel="preload" as="image" href="donut.jpg">

This will help with the Largest Contentful Paint metric. More details in this fantastic article from Smashing Magazine.

Using HTML buttons and inputs with the form, form-method and form-action attributes

The default way you would wite an HTML form would be like this:

<form action="/action_page.php" method="get" id="form1">
    <!-- your form inputs here -->
    <button type="submit">
</form>

This will submit the form to the /action_page.php via a get method. And also the submit button has to be included in the actual HTML form.

However we can have a button that submits a form in whatever place we want on the page. The association is done through the id of the form.

<form id="form1" action="/action_page.php">
    <!-- your form inputs here -->
</form>

<!-- Far away in the DOM -->
<button form="form1" formaction="/postToTwitter.php" formmethod="POST">Post Twitter</button>
<button form="form1" formaction="/sendOnSlack.php" formmethod="GET">Share on Slack</button>

One cool thing is that we can use the formmethod and the formaction attributes to send the data to multiple endpoints with different methods. See the above example.

Another advantage of the form attributes on buttons is that we have better CSS styling and control. There is no need anymore to place the button inside the actual form element so we can style things however we want.

Not just the buttons accept these attributes, but also the input elements.

It is currently supported in all modern browsers. Of course, Internet Explorer is not included in the modern browsers category šŸ˜€ .

You can read more about it here , here or here.

Using multiple values in a JS switch case

One thing to mention about the Javascript switch statement is that it continues its flow until it sees a break or a return from that function. It does not automatically ends when a new case statement appears. Conveniently, this solves the problem of matching multiple values.

switch (animal.type) { 
    case "CAT": 
    case "JAGUAR": 
        return "this is a feline";
    case "ALIGATOR": 
        return "this is a reptile";
    default: 
        return "not sure what animal is this"; 
}

The above flow will catch both the CAT and JAGUAR under the same action. This is often used in Redux reducers when updating the state in response to certain actions.

How display inline-grid works in CSS and how is different from display grid

When we think about the display of an element in CSS we can see it from 2 points of view: how it relates to its children and how it relates to its siblings.

Let's say we want to build this small component:

The HTML would be like this:

<div class="box is-inline-grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

To get that 2 x 2 layout we can make it a grid:

.box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 4px;
}

Now if we want to put this grid in the same line with time inline elements, like some spans, we will not be able do to that. We will get something like this:

We get the above layout because if we set the element to display: grid we are saying something similar to "set this element to be a grid for its children, and to be a block to its siblings". Being a block to its siblings means that it will break the flow of the inline elements.

To make it so that it stays on the same line as the spans we will have to use the display: inline-grid.

This will say "set this element to be a grid for its children, but to be inline to its siblings" .

So the difference between display: grid and display: inline-grid is how they behave in relationship with their siblings. Both will serve as a grid container for their direct children.

Check out the full codepen for this example:

See the Pen
inline-grid 1
by JS Craft (@js-craft)
on CodePen.

By the way, the display inline-flex is the same for display flex.

Going back to the root level with @at-root in SCSS

The @at-root takes the selector from its current nesting scope and moves that selector to the root of the file. This means that the following SCSS code:

.user {
    color: blue;
    @at-root .info {
        color: red;
    }
}

Will be compiled to:

.user { color: blue; }
.info { color: red; }
/* insead of :
.user { color: blue; }
.user .info { color: red; } */

It is useful as it allows us to group CSS rules but not to increase the specificity of these rules, making them easier to override if needed.

And this is true even in the case of multiple nesting. It will move the @at-root declaration at the top no matter how deep the nesting goes:

.container {
    .item {
        @at-root .title {
            color: red;
        }
    }
}
/* will be compiled just to .title { color: red; } */

One small this to note is using the @at-root with media queries. We can use @at-root (without: media) and @at-root (with: media) to decide if we want to still keep the media query or not.

@media (max-width: 600px) {
   .user {
      height: 8px;
      @at-root (without: media) {
            // rules here
      }
   }
}

How to make any HTML element resizable with the CSS resize property

Any element can be made resizable if we apply the folowing CSS to it:

resize: both;

Please note that it will work only if the overflow property is set to something other than visible. We can even combine the resize with something like min-width or max-with to set specific bonds for it. Also, any attributes like offsetWidth will be updated to the new sizes.

See the Pen
Resize
by JS Craft (@js-craft)
on CodePen.

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.