Mike Sherov

Explore ES2019 stable array sorting by example

2019 M02 19

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

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

2019 M02 13

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

2019 M02 6

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.

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

2019 M01 28

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

Track First Contentful Paint with PerformanceObserver and Google Analytics

2019 M01 21

"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.

Use ES6 Sets to Improve Javascript Performance

2019 M01 10

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.

Refactor es5 functions to es6 arrow functions

2019 M01 2

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.