Map and Flatten Multidimensional Arrays with ES2019 Array.prototype.flatMap

🕒02:24 🏷️JavaScript

ES2019 introduces the Array.prototype.flatMap method. In this lesson, we'll map and flatten a multidimensional array using Array.prototype.map, Array.prototype.reduce and Array.prototype.concat, and then refactor the code to do the same thing using the .flatMap method. Then, we'll see how we can use empty arrays in our map function to act as a filter before mapping.

Use ES2019 Array.prototype.flat to Flatten Multidimensional Arrays

🕒01:17 🏷️JavaScript

ES2019 introduces the Array.prototype.flat method. In this lesson, we'll flatten a multidimensional array using Array.prototype.reduce and Array.prototype.concat, and then refactor the code to do the same thing using the .flat method. We'll then use the depth parameter to flatten a 3 dimensional array.

Track First Contentful Paint with PerformanceObserver and Google Analytics

🕒02:42 🏷️HTML 5, JavaScript

"If you can't measure it, you can't improve it." The first step when doing performance work is to measure meaningful metrics to establish a baseline for improvement. In this lesson, we'll measure Time to First Contentful Paint, a user-centric performance metric. We'll first create a PerformanceObserver object and explore the information it captures. Next, we'll send that information to Google Analytics to track FCP over time. Lastly, we'll discover why PerformanceObserver is one of the few bits of Javascript that rightly belong in the head of your document.

Delete Unused Code with Webpack and unused-files-webpack-plugin

🕒03:19 🏷️webpack

As you refactor and modify applications, it's difficult to manage and keep track of files as they become unused. Keeping this "dead" code around adds noise to your application and reduces clarity. Just as ESLint can tell us when variables become unused, Webpack (with the help of the unused-files-webpack-plugin) can tell us when entire files become unused. First, we'll install the plugin with npm and save it as a devDependency. Next, we'll use npm run scripts to build a new command that will run Webpack with the plugin. Finally, we'll learn how to use Webpack environment variables to conditionally add plugins to your Webpack config. By the end of the lesson, you'll have a useful cli command you can run to check for unused modules in your Webpack build

Explore ES2019 stable array sorting by example

🕒01:57 🏷️JavaScript

Before ES2019, array sorting in Javascript was not guaranteed to be stable. In this lesson, we'll learn what stable sorting is by seeing an example of unstable sorting. We'll use nvm to switch between an older version of Node and a newer version and compare how each version deals with sorting. Lastly, we'll mimic stable sorting by adding indexes to our array elements and comparing the indexes during sort. You can find installation instructions for nvm here: https://github.com/creationix/nvm Stable sorting was adding to v8 v7.0 (Chrome 70 and Node 11), as noted here: https://v8.dev/blog/array-sort

Refactor es5 functions to es6 arrow functions

🕒01:37 🏷️JavaScript

In this lesson we'll learn how to refactor es5 functions into es6 arrow functions to decrease visual noise in our program. We'll take a step by step approach, increasing clarity with each rewrite.

Lazyload below the fold images and iframes with native browser lazy-loading

🕒02:59 🏷️HTML 5

In this lesson, you'll learn how to use the `loading="lazy"` attribute available on images and iframes to lazily load below the fold images, which saves bandwidth and increases the load time performance of web pages. You'll also learn how to prevent images from lazy loading if necessary, and how to add lazy loading to responsive images as well. Lazy loading is supported in Chrome 76, and will be available in the next version of Edge and has public signals of support from Firefox, and Safari as well.

Use ES6 Sets to Improve Javascript Performance

🕒03:34 🏷️JavaScript

Using Sets in ES6 to produce lists of unique objects is faster than using arrays, and less error prone than using objects. In this lesson, we explore the pitfalls of the object approach and the speed implications of the array approach. We will then instrument the array approach and the set approach to measure the number of operations each approach performs, and it's implications on program speed.