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.

Tricks with the basic HTML list: using start, reversed and value

Just discovered 3 new things with the plain old HTML ordered list.

1. We can reverse an ordered list

If we add the reverse attribute to an ol, then the elements in that list will be listed end to start.

<ol reversed>
    <!-- content here -->
</ol>

Example:

  1. HTML
  2. CSS
  3. JS

2. The ol supports a start attribute

If we want to start the numbering of the elements from another value that the default 1 we can use the start attribute.

<ol start="3">
    <!-- content here -->
</ol>

It's great if we have an initial list like this one:

  1. javascript
  2. php

And after some other content to continue that list.

  1. ruby on rails
  2. java

3. We can set a value attribute for the li elements

To have full control of what value will be assigned to the li elements in the CSS counters we can use this value attribute. For example:

<ol>
    <li value="63">Octavianus Augustus</li>
    <li value="180">Commodus</li>
    <li value="54">Nero</li>
</ol>

Will output the following list:

  1. Octavianus Augustus
  2. Commodus
  3. Nero

After many years doing web stuff daily I am still amazed about how much detail goes even in the simple elements. Onwards!