Issue #8 - Speed up build times with Netlify and Next.js, understand how TypeScript generics work, and a tip for handling form errors

Check out how you can decrease build times with Netlify’s new On-Demand builder, delight your users with the Browser Hacker’s guide to instantly loading everything, test all kinds of accessibility for your designs with a simple tool and test your understanding of JavaScript promises.

Tip of the day

You can use form controls’ .validationMessage property to get the native validation message, and display it in the UI the way you like it. This may help you with a lot of manually implemented logic, via Tomek Sułkowski.

const inputEl = document.querySelector('#quantity');

inputEl.addEventListener('input', e => {
    const value = inputEl.valueAsNumber;

    if (value > 10) {
      alert('Value must be less than or equal to 10.')
    } else if (value < 1) {
      alert('Value must be greater than or equal to 1.')
    } else if (isNaN(value)) {
      alert('Please enter a number.')
    }
    // And maybe a few more cases
})

// Or a much easier and safer way to do it

inputEl.addEventListener('input', e => {
  // Use the platform
  const { validationMessage } = validationMessage;

  if(typeof validationMessage === 'string' && validationMessage.length > 0) {
    alert(validationMessage);
  }
}

Articles

Breaking Down Bulky Builds With Netlify And Next.js

Take a look at how you can use Netlify’s new On Demand Builder with Next.js’ Incremental Static Site Generation to significantly reduce your static generation build times improving both the end user and the developer experience along the way.

by Átila Fassina

Understanding TypeScript Generics

Generics in TypeScript can be overwhelming for beginners, and they can sometimes miss out on whey they exist and what are they used for. This article explains why they exist and provide some simple examples to illustrate what makes them useful.

by Seán Barry

Tools

Adee

A free accessibility testing tool for inclusive design that offers a colorblind simulator, contrast checker, touch target size checker, and so much more.

by Adee App

Popper

Popper is a tooltip and popover positioning engine that helps you position tooltips and popovers. It will position any UI element that “pops out” from the flow of your document and floats near a target element.

by Federico Zivolo

Tech Talks

The Browser Hackers Guide To Instantly Loading Everything

Venture deep into the belly of the browser, with Addy Osmani, to uncover the secret incantations to instantly load anything. Learn when should you use preload prefetch and preconnect, how can you ship JavaScript bundles that don’t break the bank on mobile and more tips to delight your users.

Quiz

What will be the output of the below snippet?

const promisedData = new Promise((resolve) =>
  setTimeout(() => {
    resolve("JavaScript");
  }, 200)
);

async function someAsyncFunction() {
  console.log(await promisedData);
  return "Scriptified";
}

someAsyncFunction().then((data) => {
  console.log(data);
});

This week in GIF

Liked this issue? Share on Twitter or read previous issues.