 Resources from Mike Sherov in 2024

As developers, we have a responsibility to protect the data our users trust us with. No one wants to wake up to the news that their site was hacked and all of the user accounts stolen.

Security is important, yet it is often overlooked and forgotten.

Part of the reason for this is that security seems hard to get right. This results in developers crossing their fingers and hoping for the best.

In this course, you'll learn how to protect your application by learning how to attack it.

Start your journey into web security today!

Check out these [**community notes for this course on Github**](https://github.com/wjohnson85/eggheadio-web-security-essentails).

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

Web Security Essentials: MITM, CSRF, and XSS

Staying up to date with JavaScript’s changes saves you from being stumped by syntax.

In this course, you’ll learn about all latest language features published with ES2019 and see how they solve problems, using the example of a Nuxt.js application. 

From optional catch binding to creating an object from a list of key-value pairs, you’ll learn the benefits of these new features and understand when, why, and how to use them in your legacy projects and upcoming work. 

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

JavaScript ES2019 in Practice

Released in 2015, ES6 was a major update to the JavaScript language, providing many new powerful additions to the language. From arrow functions, classes, generators, and proxies to Promises and Modules, ES6 solved many of the languages problems with cleaner, more concise syntax and functionality.

Since then, a new version of JavaScript is released every year, providing even more power to JavaScript Developers:

ES2016 brings with it Array.prototype.includes, ES2017 has async and await, ES2018 adds new capabilities to regular expressions and async iterators, ES2019 has Object.fromEntries, Array.prototype.flat and flatMap, and ES2020 has dynamic imports, globalThis, and BigInt.

Staying up to date with the language as it evolves saves you from being stumped by new APIs and syntax! Learning ES6 and Beyond will ensure you can drop into any JavaScript codebase and have the best shot at being productive on day one.

ES6 and Beyond - JavaScript Tips and Tricks from ES2015 to ES2020

Bite-size video tutorials for badass web developers.

egghead

Live Workshop Recording

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.

Refactor es5 functions to es6 arrow functions

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



Explore ES2019 stable array sorting by example

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.

Use ES6 Sets to Improve Javascript Performance

HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

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

Track First Contentful Paint with PerformanceObserver and Google Analytics

webpack is a tool to build JavaScript modules in your application. To start using webpack from its cli or api, follow the Installation instructions. webpack simplifies your workflow by quickly constructing a dependency graph of your application and bundling them in the right order. webpack can be configured to customise optimisations to your code, to split vendor/css/js code for production, run a development server that hot-reloads your code without page refresh and many such cool features.

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

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

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.

Use ES2019 Array.prototype.flat to Flatten Multidimensional Arrays

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. 

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

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.

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

In this course, we'll learn how to use the new features available in the latest version of javascript, commonly referred to as ES2019. ES2019 is available in the latest version of Chrome, Firefox, Safari, and Node, and are available via compilation with Babel or Typescript.

The goal of this course is to introduce you to opportunities to use ES2019 in real situations from within an existing student grade tracking Nuxt.js application, and explore real world use cases and opportunities to use ES2019's new features.

We'll learn together as we discover how to use Object.fromEntries, Symbol.prototype.description, Array.prototype.flatMap, Array.prototype.flat, String.prototype.trimStart, String.prototype.trimEnd, Optional Catch binding, and Array Stable Sorting.

By the end of this course, you’ll know how and when to use ES2019 to accomplish more with less code, and my hope is that you'll be inspired to stay up to date with the latest changes to the core JS language as they come out.

Course Overview: JavaScript ES2019 in Practice

ES2019 introduces the optional catch binding syntax. This allows us to catch errors without assigning the error to a variable. In this lesson, we'll investigate cases where it's appropriate to catch errors without propagating them further. Then we'll introduce an optional catch binding to make our intent clear.

Handle Exceptions with ES2019 Optional Catch Bindings in JavaScript

Before ES2019, array sorting in Javascript was not guaranteed to be stable. In this lesson, we'll learn what stable sorting is by emulating stable sorting in an older version of Node. Then, we'll learn how and when stable sorting matters. Finally, we'll use nvm to switch between an older version of Node and a newer version and compare how each version deals with sorting.

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 [in this blog post](https://v8.dev/blog/array-sort)

Stable Sort an Array with ES2019 JavaScript

ES2019 introduces the Array.prototype.flat method. In this lesson, we'll see how to flatten an array using Array.prototype.reduce and Array.prototype.concat, and then refactor the code to do the same thing using the .flat method.

Flatten an Array with ES2019 flat in JavaScript

ES2019 introduces the String.prototype.trimEnd and String.prototype.trimStart methods. In this lesson, we'll investigate a common use case for .trimEnd. We'll figure out how to work around the lack of .trimEnd in older versions of JS, and then refactor the code to use .trimEnd to achieve an even better result with less complexity.

Trim the End of a String in JavaScript with ES2019 trimEnd

ES2019 introduces the Array.prototype.flatMap method. In this lesson, we'll investigate a common use case for mapping and flattening a multidimensional array. We'll then see how to do this using Array.prototype.reduce, and then refactor the code to do the same thing using the ES2019 .flatMap method.

Map Elements of an Array with ES2019 flatMap 

ES2019 introduces the Array.prototype.flatMap method. In this lesson, we'll investigate a common use case for mapping and filtering an array in a single iteration. We'll then see how to do this using Array.prototype.reduce, and then refactor the code to do the same thing using the ES2019 .flatMap method.

Use JavaScript ES2019 flatMap to Map and Filter an Array

ES2019 introduces the Symbol.prototype.description property. In this lesson, we'll learn why this property is useful and unlocks Symbols as appropriate to use to represent strings constants in JS. We'll investigate a use case for string constants and see why using Symbols prior to ES2019 was not appropriate. Then we'll see how using .description fixes that. Lastly, we'll learn why using Symbols may be better than strings for constants in certain use cases by examining what it means to be "collision free".

Represent Collision-free String Constants as Symbols in JavaScript

ES2019 introduces the Object.fromEntries method. In this lesson, we'll see how to convert Maps and Sets into Objects and why you'd want to translate between those data structures. First we'll see how this was done prior to ES2019, and then we'll refactor the code to do the same thing using Object.fromEntries. Seeing as ES2019 was only introduced to Node in Node 12, we'll also learn how to do feature detection for Object.fromEntries.

Topics

Instructors

Content Type

Mike Sherov