DEV Community: Kevin Langley Jr

Lesser Known Features of the Browser Console

Kevin Langley Jr — Mon, 13 Dec 2021 03:38:51 +0000

The browser console is a frontend developers best friend.
While we are all aware of the basic methods like console.log(), console.warn(), console.debug(), or console.error(), are you aware of some of the lesser known, but still powerful, features?

Let's dive in!

Grouping Output

With the console.group(), console.groupCollapsed(), and console.groupEnd() methods, we can easily group console output within collapsible groups and subgroups.

`console.group( groupName )`

Starts a new group with the supplied name.

`console.groupCollapsed( groupName )`

Starts a new group with the supplied name that is collapsed by default.

`console.groupEnd()`

Ends the current console group.

console.group('Group #1');
console.log( 'Item 1' );
console.log( 'Item 2' );
console.log( 'Item 3' );
console.log( 'Item 4' );
console.group('Subgroup');
console.log( 'Subitem 1' );
console.log( 'Subitem 2' );
console.log( 'Subitem 3' );
console.log( 'Subitem 4' );
console.groupEnd();
console.groupEnd();
console.groupCollapsed('Collapsed Group');
console.log( 'Collapsed item 1' );
console.log( 'Collapsed item 2' );
console.log( 'Collapsed item 3' );
console.log( 'Collapsed item 4' );
console.groupEnd();

String Substitutions

When using console.assert(), console.log(), console.info(), console.warn(), console.error(), or console.trace(), you can use string substitution within the message that is passed into the method.

%o or %O - JavaScript object

const user = { name: 'Kevin' };

console.log( 'The user is %o!', user );
// The user is ▸ {name: 'Kevin'}!

%d or %i - Integer (Number formatting is supported, only in Firefox and Safari, per my testing)

const count = 123;

console.info( 'The count is %d!', count );
// The count is  123!

console.info( 'The count is %.4d!', count ); // This only works in Firefox and Safari 😕
// The count is 0123!

%s - String

const name = 'Kevin';
const state = 'Florida';

console.warn( 'Hi my name is %s and I am from %s!', name, state );
// Hi my name is Kevin and I am from Florida!

%f - Floating-point value (Number formatting is supported, only in Firefox and Safari, per my testing)

const average = 8.987;

console.log( 'The average is %f!', average );
// The average is 8.987000!

console.log( 'The average is %.4f!', average ); // This only works in Firefox and Safari 😕
// The average is 8.9870!

const error = { errorMessage: 'It failed!' };

console.error( 'The error was %o', error );
// The error was {errorMessage: 'It failed!'}

Styling Console Output

Using the %c specifier in strings allows us to apply styles to console output. The output string in the first parameter has the style rules in the subsequent parameters applied to it in their respective places in the string.

console.log('%cStyled content #1!', 'background: #222; color: #f9b434');

console.log('%cStyled content #1! %cStyled Content #2!', 'background: #222; color: #f9b434', 'background: #f9b434; color: #222;');

console.log('%cJavaScript', 'font-weight: 700; font-size: 50px; color: #fff; text-shadow: 3px 3px 0 #f00, 6px 6px 0 #ffa500, 9px 9px 0 #ff0, 12px 12px green, 15px 15px #00f, 18px 18px #4b0082, 21px 21px #ee82ee;' );

Assertions

Using console.assert() you can validate an assertion and write an error message to the console if the assertion fails.

console.assert( assertion, obj [obj2, ..., objN]);
console.assert( assertion, msg [strSub, ..., strSubN]);

let value = true;

console.assert( value, { error: 'Did not work', value } ); // No output

value = false;

console.assert( value, { error: 'Did not work', value } );
// Assertion failed: {error: 'Did not work', value: false}

console.assert(false, 'This is a %o test', { error: 'Did not work', value } );
// Assertion failed: This is a ▾ {error: 'Did not work', value: false} test

Counting Instances

Using console.count() you can create a simple counter that will count the number of times it is called with the specified label.
And with console.countReset(), you can easily reset that counter.

console.count([label]);
console.countReset([label]);

const order = [ 'item1', 'item2', 'item3' ];

function processItem( item ) {
  console.count( item );

  return item;
}

for (const item of order) {
  processItem( item );
}

// item1: 1
// item2: 1
// item3: 1

processItem( order[0] );
processItem( order[0] );
processItem( order[0] );
processItem( order[1] );

// item1: 2
// item1: 3
// item1: 4
// item2: 2

// Let's reset the count.
console.countReset( order[0] );


// Let's count it once more to show it starts at 0 again.
processItem( order[0] );

// item1: 1

Browser Profiling

With the console.profile() and console.profileEnd() methods, you can easily run some JavaScript profiling.
Where the profiling data is displayed depends on the browser being used.

In Firefox, you'll find the profiling data within the Performance tab in the developer tools.

In Chrome, you'll find the JavaScript Profiler tab by navigating to the three-dot menu -> More tools -> JavaScript Profiler.

And the data is displayed in the main frame of the developer tools.

It should be noted that this feature is not standard in the specification, so do not use it in production at all.

Formatting Tabular Output

You can format an object as tabular data very easily using console.table()!
You are able to pass any primitive values here also, but they render like how console.log() does.
Objects are where this method really shines.

const user = { name: 'Kevin', location: 'Florida', age: 33 };
console.table(user);

Stack Trace

Wth the console.trace() method, we can print a stack trace to the web console.
You can also pass in data parameters and they will be formatted like console.log is.

function testTrace() {
  console.trace();
}

testTrace();

// console.trace
// testTrace
// (anonymous)

Self-Hosting Plausible Analytics With Dokku

Kevin Langley Jr — Mon, 13 Dec 2021 00:29:45 +0000

In my search for a self-hosted alternative to Google Analytics, I found Plausible Analytics. Plausible is an open-source and privacy focused alternative to Google Analytics, which I wanted to remove entirely from my sites. Self-hosting with the instructions from their documentation is not geared towards someone trying to host it on a Dokku host. This guide will help walk you through the steps of setting up Plausible on a Dokku host. We will create the application, install the required plugins, create all the necessary databases, link them to the application, and deploy the application.

What is Dokku?

Dokku is a popular, open-source, and self-hosted platform as a service (PaaS) that allows users to easily deploy and manage their applications, very similar to your own self-hosted Heroku. Under the hood, Dokku is powered by Docker, uses Heroku buildpacks by default, and has a number of official and community plugins.

There is a one-click install image you can use from Digital Ocean, but I personally like to start with a fresh box and enjoy installing and configuring it all myself.

The only system requirements are 1GB of memory and either Ubuntu 18.04/20.04 x64, Debian 9+ x64, or CentOS 7 x64.

You can read more about using Dokku in my blog post yesterday.

What is Plausible?

Plausible is an open-source and privacy focused alternative to Google Analytics. It uses no cookies and is fully compliant with GDPR, CCPA, and PECR. While it is easiest to just pay the $6 / per month for a cloud hosted instance, I will always choose self-hosted if it is an option and here is no exception. Self-hosting with the instructions from their documentation is not geared towards someone trying to host it on Dokku. Because of it, I wanted to document the process in hopes of helping others set up their own instance of Plausible.

The only requirement is a working Dokku host.

We are going to use the domain analytics.example.com for demonstration purposes. Be sure to replace it with your own domain name when running through the bash command snippets.

First, we're going to SSH into your Dokku Host and create the Plausible app:

dokku apps:create plausible

Next, we will install the PostgreSQL and Clickhouse plugins, if they aren't already installed.

dokku plugin:install https://github.com/dokku/dokku-postgres.git postgres
dokku plugin:install https://github.com/dokku/dokku-clickhouse.git clickhouse

And then, we'll create our instances of the PostgresSQL and Clickhouse databases.

dokku postgres:create plausible-db
dokku clickhouse:create plausible-events-db

Let's then set the environment variables for the database scheme, which just sets it to use the scheme expected within the Plausible Docker image. Then we'll link the databases to the application.

dokku config:set plausible CLICKHOUSE_DATABASE_SCHEME=http
dokku postgres:link plausible-db plausible
dokku clickhouse:link plausible-events-db plausible

Next, we'll slightly adjust the URL that was provided from linking the Clickhouse database and change the name of the environment variable for it as well to match what is expected within the Plausible docker image.

dokku config:set plausible CLICKHOUSE_DATABASE_URL=$(dokku config:get plausible CLICKHOUSE_URL)/plausible
dokku config:unset plausible CLICKHOUSE_URL

Then, we'll generate a secrete key using openssl.

dokku config:set plausible SECRET_KEY_BASE=$(openssl rand -base64 64 | tr -d '\n')

And then, we'll set the BASE_URL environment variable and set the domain for the application — make sure to use your domain here.

dokku config:set plausible BASE_URL=https://analytics.example.com
dokku domains:set plausible analytics.example.com

Set the required SMTP environment variables to set up transactional emails.

dokku config:set plausible MAILER_EMAIL=admin@example.com \
                           SMTP_HOST_ADDR=mail.example.com \
                           SMTP_HOST_PORT=465 \
                           SMTP_USER_NAME=admin@example.com \
                           SMTP_USER_PWD=example1234 \
                           SMTP_HOST_SSL_ENABLED=true

Let's set up our admin account for the application. And then, we can optionally disable registration, this is especially useful if this is just for you and you aren't inviting any clients or other users to utilize it.

dokku config:set plausible ADMIN_USER_EMAIL=admin@example.com \
                           ADMIN_USER_NAME=admin \
                           ADMIN_USER_PWD=password

## This is optional!
dokku config:set plausible DISABLE_REGISTRATION=true

Next, we need to clone (or fork!) the my repository on your local machine.

## Via SSH
git clone git@github.com:kevinlangleyjr/dokku-plausible.git

## Or HTTPS
git clone https://github.com/kevinlangleyjr/dokku-plausible.git

Set the Dokku host as the git remote for the repository and push it on up to your Dokku host!

git remote add dokku dokku@example.com:plausible

git push dokku master

After the initial push and deploy, we can then finally set up the SSL certificate from Let's Encrypt.

Let's start by installing the Let's Encrypt plugin, if you don't already have it installed.

dokku plugin:install https://github.com/dokku/dokku-letsencrypt.git letsencrypt

Then we can set the certificate contact email.

dokku config:set --no-restart plausible DOKKU_LETSENCRYPT_EMAIL=email@example.com

And finally, generate the certificates!

dokku letsencrypt plausible

At this point your instance of Plausible should be accessible via, the domain your provided, which for us is https://analytics.example.com.

Profit!!! 🎉🎉🎉

Easy Application Deployment and Management with Dokku

Kevin Langley Jr — Sun, 05 Dec 2021 21:35:00 +0000

Application management and deployment are some of the most important aspects of the web development process. Thankfully, we are long past the days of using FTP or similar toolings to manage application deployments. Especially for proof of concepts, I like to get things up and running with as little configuration as possible. In this case, I've opted to use Dokku and will give a brief overview here. Let's dive in!

What is Dokku?

There is a one-click install image you can use from Digital Ocean, but I personally like to start with a fresh box and enjoy installing and configuring it all myself.

The only system requirements are 1GB of memory and either Ubuntu 18.04/20.04 x64, Debian 9+ x64, or CentOS 7 x64.

Installation

wget https://raw.githubusercontent.com/dokku/dokku/v0.26.6/bootstrap.sh

sudo DOKKU\_TAG=v0.26.6 bash bootstrap.sh

This process can take between 5-10 minutes before it finishes. You can also see the other installation options which do not use curl, here.

Configuration

Next, you'll want to configure the SSH access and the servers domain using the following commands:

# Usually, you can find your key in the current user's `~/.ssh/authorized_keys` file.

cat ~/.ssh/authorized\_keys | dokku ssh-keys:add admin

# Be sure to replace this domain when running the command yourself!

dokku domains:set-global example.com

You'll want to also install and configure a simple firewall, something like UFW would work great. The only ports you need open to work with Dokku is the SSH port (can be customized), HTTP (80), and HTTPS (443) ports.

# Install UFW.
sudo apt-get install ufw

# Allow SSH access.
sudo ufw allow ssh

# Allow http, port 80, and https, port 443.
sudo ufw allow http
sudo ufw allow https

# Enable UFW
sudo ufw enable

You can find a more in depth guide to setup and configure UFW, here.

Let's deploy an app!

Let's create a simple Next.js app and deploy it to our new Dokku instance.

# Using yarn
yarn create next-app

# Or using NPM
npx create-next-app

Next, let's open our index.js file in the pages directory and modify a few things.

// ... more code not shown for brevity

export default function Home() {

  return (

    <div className={styles.container}>

      <Head>
        <title>Create Next App and Deploy to Dokku!</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js</a> and <a href="https://dokku.com">Dokku!</a>
        </h1>
        { // .... more code down here }
      </main>

    </div>
  );

}

// ... yep, you guessed it, more code not shown here.

Next, we need to add the git remote for our project.

# Be sure to replace `example.com` with the domain for your dokku instance and `new-app-name` with the name for your application.

git remote add dokku dokku@example.com:new-app-name

And now, we can simply deploy with a git push to that new dokku remote.

git push dokku main

Enumerating objects: 7, done.
Counting objects: 100% (7/7), done.
Delta compression using up to 8 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 358 bytes | 358.00 KiB/s, done.
Total 4 (delta 3), reused 0 (delta 0)

-----> Set main to DOKKU\_DEPLOY\_BRANCH.
-----> Cleaning up...
-----> Building test-app from herokuish
-----> Adding BUILD\_ENV to build environment...
 BUILD\_ENV added successfully
-----> Node.js app detected
-----> Creating runtime environment
NPM\_CONFIG\_LOGLEVEL=error
USE\_YARN\_CACHE=true
NODE\_VERBOSE=false
NODE\_ENV=production
NODE\_MODULES\_CACHE=true
-----> Installing binaries
 engines.node (package.json): unspecified
 engines.npm (package.json): unspecified (use default)
 engines.yarn (package.json): unspecified (use default)
 Resolving node version 14.x...
 Downloading and installing node 14.17.6...
 Using default npm version: 6.14.15
 Resolving yarn version 1.22.x...
 Downloading and installing yarn (1.22.11)
 Installed yarn 1.22.11
-----> Restoring cache
 - yarn cache
-----> Installing dependencies
 Installing node modules (yarn.lock)
yarn install v1.22.11
[1/4] Resolving packages...
[2/4] Fetching packages...
 info @next/swc-darwin-arm64@11.1.2: The platform "linux" is incompatible with this module.
 info "@next/swc-darwin-arm64@11.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
 info @next/swc-darwin-arm64@11.1.2: The CPU architecture "x64" is incompatible with this module.
 info @next/swc-darwin-x64@11.1.2: The platform "linux" is incompatible with this module.
 info "@next/swc-darwin-x64@11.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
 info @next/swc-win32-x64-msvc@11.1.2: The platform "linux" is incompatible with this module.
 info "@next/swc-win32-x64-msvc@11.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
 info fsevents@2.3.2: The platform "linux" is incompatible with this module.
 info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
 warning "next > styled-jsx > @babel/plugin-syntax-jsx@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
 warning "eslint-config-next > @typescript-eslint/parser > @typescript-eslint/typescript-estree > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] Building fresh packages...
 Done in 3.95s.
-----> Build
 Running build (yarn)
yarn run v1.22.11
 $ next build
 info - Loaded env from /tmp/build/.env
 info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
 warn - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
 Attention: Next.js now collects completely anonymous telemetry regarding usage.
 This information is used to shape Next.js' roadmap and prioritize features.
 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:

 https://nextjs.org/telemetry
 info - Checking validity of types...
 info - Creating an optimized production build...
 info - Compiled successfully
 info - Collecting page data...
 info - Generating static pages (0/3)
 info - Generating static pages (3/3)
 info - Finalizing page optimization...

 Page Size First Load JS
 ┌ ○ / 4.65 kB 71.6 kB
 ├ └ css/5dd3a863eec8dc33b66f.css 727 B
 ├ /\_app 0 B 66.9 kB
 ├ ○ /404 194 B 67.1 kB
 └ λ /api/hello 0 B 66.9 kB
 + First Load JS shared by all 66.9 kB
 ├ chunks/framework.b97a0e.js 42 kB
 ├ chunks/main.c4f254.js 23.6 kB
 ├ chunks/pages/\_app.68998c.js 555 B
 ├ chunks/webpack.fb7614.js 770 B
 └ css/120f2e2270820d49a21f.css 209 B

 λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
 ○ (Static) automatically rendered as static HTML (uses no initial props)
 ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
(ISR) incremental static regeneration (uses revalidate in getStaticProps)

 Done in 15.95s.

-----> Pruning devDependencies

yarn install v1.22.11

[1/4] Resolving packages...
[2/4] Fetching packages...
 info @next/swc-darwin-arm64@11.1.2: The platform "linux" is incompatible with this module.
 info "@next/swc-darwin-arm64@11.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
 info @next/swc-darwin-arm64@11.1.2: The CPU architecture "x64" is incompatible with this module.
 info @next/swc-darwin-x64@11.1.2: The platform "linux" is incompatible with this module.
 info "@next/swc-darwin-x64@11.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
 info @next/swc-win32-x64-msvc@11.1.2: The platform "linux" is incompatible with this module.
 info "@next/swc-win32-x64-msvc@11.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
 info fsevents@2.3.2: The platform "linux" is incompatible with this module.
 info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
 warning "next > styled-jsx > @babel/plugin-syntax-jsx@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
 warning "eslint-config-next > @typescript-eslint/parser > @typescript-eslint/typescript-estree > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] Building fresh packages...
 warning Ignored scripts due to flag.
 Done in 1.69s.
-----> Caching build
 - yarn cache
-----> Build succeeded!
! Unmet dependencies don\'t fail yarn install but may cause runtime issues
 https://github.com/npm/npm/issues/7494
-----> Discovering process types
 Default types for -> web
-----> Releasing test-app...
-----> Checking for predeploy task
 No predeploy task found, skipping
-----> Checking for release task
 No release task found, skipping
-----> App Procfile file found
=====> Processing deployment checks

 No CHECKS file found. Simple container checks will be performed.

 For more efficient zero downtime deployments, create a CHECKS file. See https://dokku.com/docs/deployment/zero-downtime-deploys/ for examples

-----> Deploying test-app...
-----> Attempting pre-flight checks (web.1)
 Waiting for 10 seconds ...
 Default container check successful!
 Scheduling old container shutdown for web.1 in 60 seconds

-----> Running post-deploy

-----> Configuring test-app.example.com...(using built-in template)

-----> Creating https nginx.conf

 Enabling HSTS

 Reloading nginx

-----> Renaming containers

 Found previous container(s) (ed302d9e2e9b) named test-app.web.1

 Renaming container (ed302d9e2e9b) test-app.web.1 to test-app.web.1.1632683188

 Renaming container test-app.web.1.upcoming-2851 (2c1f0d45c456) to test-app.web.1

-----> Checking for postdeploy task

 No postdeploy task found, skipping

-----> Shutting down old containers in 60 seconds

=====> Application deployed:

 http://test-app.example.com

 https://test-app.example.com

To example.com:test-app

 778f90c..8521e6c main -> main

Dokku Plugins

There are a number of official and community based plugins available for use. These plugins range from databases like MariaDB, Postgres, Redis, Mongo and more, all the way to Memcached, Let's Encrypt for SSL certificates, and Elasticsearch for search integration.

Ledokku

Ledokku dubs itself as a "beautiful web UI for all things Dokku" and I think they hit the nail right on the head. With Ledokku, you can view the logs, edit/add/remove environment variables, change domain configuration settings, link databases or other services, and more!

Installation

wget https://raw.githubusercontent.com/ledokku/ledokku/v0.7.0/ledokku-bootstrap.sh

sudo bash ledokku-bootstrap.sh

Be sure to change `example.com` to your domain!

dokku domains:set ledokku dashboard.example.com

# Let's throw it behind SSL!

dokku config:set --no-restart ledokku DOKKU\_LETSENCRYPT\_EMAIL=your@email.com

dokku letsencrypt:enable ledokku

There are also manual installation instructions you can find here.

Now, you should be able to open ledokku.example.com, with example.com being changed to the domain supplied previously.

What's new in ES2021 or ES12?

Kevin Langley Jr — Sun, 28 Nov 2021 20:16:00 +0000

As I explain in my Modern JS with ES6+ post, the TC39 is the group that is responsible for advancing the ECMAScript specifications and standardizing these specifications for the JavaScript language. Ever since the 2015 release of ES2015 or ES6, we've had a yearly release cycle for the next version of ECMAScript. Before a feature can be added to a release, it must first go through four proposal stages before finally being approved for release. Here we'll be looking at the features that were added in ES2021 or ES12.

You can check out all of the finished proposals, from across the years, on GitHub.

`String.prototype.replaceAll`

replaceAll(regExp, replacementString);

replaceAll(regExp, replacerFunction);

replaceAll(substr, replacementString)

replaceAll(substr, replacerFunction)

The .replaceAll() method is very similar to the .replace() method, but the latter will replace only the first instance and the former replaces all occurrences of a regular express or substring. This method can accept either a substring or a regular express for the first parameter and either the replacement string or a replacer function that returns a string for the second parameter. It's important to note that if the first argument of a replaceAll() call is a RegExp object or regular expression literal, and the second parameter is a function, the function will be invoked multiple times. For more information, like what parameters a replacerFunction has passed into it, check out the MDN docs.

const str = 'James lives in Central Florida. James has a dog named d00d.';

const strReplaced = str.replace( 'James', 'Kevin' ); // Kevin lives in Central Florida. James has a dog named d00d.

const strAllReplaced = str.replaceAll( 'James', 'Kevin' ); // Kevin lives in Central Florida. Kevin has a dog named d00d.

`Promise.any`

Promise.any(iterable);

The Promise.any() method accepts an iterable of Promise objects as it's only parameter and will return a single Promise objet that resolves when any of the passed in Promise objects resolve, with the value of the resolved original Promise object.

const promise1 = new Promise( resolve => setTimeout( resolve, 100, 'first' ) );

const promise2 = new Promise( resolve => setTimeout( resolve, 300, 'second' ) );

const promise3 = new Promise( resolve => setTimeout( resolve, 700, 'third' ) );

Promise.any( [
 promise1,
 promise2,
 promise3,
] ).then( value => console.log( value ) );

WeakRefs

WeakRefs allow you to create a reference to an object while not preventing garbage collection from removing it later. References to objects are strongly held in JavaScript, which means that as long you have a reference to the object, it won’t be garbage-collected. WeakRefs are a way of creating a reference that is not strongly held and can be garbage-collected.

According to the proposal itself, the correct use of WeakRef and FinalizationRegistry take careful thought, and they are best avoided, if possible. This is because they rely heavily on the garbage collection that takes place in the language. As a brief and nowhere near expansive explanation of it, JavaScript is a garbage collected language which means that if a variable is no longer reachable, the garbage collector will automatically remove it from memory. The hard part here is that the when and how garbage collection takes place is entirely up to the JavaScript engine itself. The different engines will more than likely produce different results on when or how the garbage collection takes place.

The concept is pretty simple but the use case is very rare, specific, and advanced and since these are power-user features, most usage will take place within frameworks or libraries.

A WeakRef is created with the new WeakRef constructor, and the value of the WeakRef variable can be accessed via the deRef method.

const wr = new WeakRef( {
 name: 'Kevin'
} );

console.log( wr.deref()?.name );

//output: Kevin

You can force clear the garbage collector in Chrome within the Performance tab of the dev tools.

Logical Assignment Operators

The purpose of this proposal was essentially to combine logical operators (&&, || or ??) and assignment expressions.

Logical OR assignment operator ||=

x ||= y;

The logical OR assignment operator, ||=, is a short-circuit evaluation just like the logical OR operator (||), which means that the second operand is only evaluated if the first operand is evaluated as falsy. The syntax expression above is the same as x || (x = y) and not x = x || y, where the latter always performs the assignment. This means that y will only be assigned to x if x is falsy, otherwise, x retains its original value.

const updateVoteCount = user => {
  // We can do this.
  if ( ! user.votes ) {
    user.votes = 1
  }

  // Or this.
  user.votes = user.votes || 1;

  // Or use the new logical assignment operator.
  user.votes ||= 1
}

Logical AND assignment operator &&=

x &&= y;

The logical AND assignment operator, &&= is also a short-circuit evaluation just like the logical AND operator (&&), which means that the second operand is only evaluated if the first operand is evaluated as truthy. The syntax expression above is the same as x && (x = y) and not x = x && y, where the latter always performs the assignment. This means that y will only be assigned to x if x evaluates as truthy, otherwise, x retains its original falsy value.

let x = 1;
const y = 2;

x &&= y;

console.log( x ); // 2

Logical nullish assignment operator ??=

x ??= y;

The logical nullish assignment operator, ??= is also a short-circuit evaluation just like the logical nullish operator (??), which means that the second operand is only evaluated if the first operand is evaluated as null or undefined. The syntax expression above is the same as x ?? (x = y ) and not x = x ?? y, where the latter always performs the assignment. This means that y will only be assigned to x if x evaluates as null or undefined, otherwise, x retains it's original value.

const getKey = () => 'test-key';

const user = { name: 'Kevin', age: 33 };

user.key ??= getKey();

console.log( user.key ); // 'test-key'

Numeric separators

Is 1000000000 a million, a billion, or somewhere in between? With the new numeric separator you can more easily determine the actual value of Numbers and BigInts by allowing the numbers to be separated by _ to separate number groups.

let num = 1_000_000_000; /// 1 billion.

num = 1_000_000; // 1 millon.

num = 100_000_000; // 100 millon.

Generating an RSS Feed and Sitemap in Next.js

Kevin Langley Jr — Wed, 30 Jun 2021 05:35:00 +0000

With my new site being built with Next.js, I needed to figure out a way to still provide RSS feeds and a sitemap using the MDX files as a source. I use next-mdx-remote from Hashicorp for the parsing and rendering of my MDX files and with the latest major version, v3, it got to be a little tricky so hopefully you'll find this helpful!

RSS Feed

To generate an RSS feed for my Next.js site, I used the aptly named feed package and installed it as a dev dependency.

Installation

# Using yarn
yarn add feed -D

# or using NPM
npm install feed --save-dev

Implementation

I then created a file named feeds.tsx in my utils directory. And we'll start off with this:

import fs from 'fs';
import { Feed } from 'feed';
import { serialize } from 'next-mdx-remote/serialize';
import { MDXRemote } from 'next-mdx-remote';
import { renderToStaticMarkup } from 'react-dom/server';
import { MDXComponents } from '@components/MDX';
import { getPosts } from '@utils/mdx';

const generateFeeds = async () => {

}

From there, I start with some basic data like the date, my name and author information, as well as the site url and I also fetch the posts which are just local MDX files in the data directory.

// ...

const generateFeeds = async () => {
  const domain = process.env.NEXT_PUBLIC_MAIN_DOMAIN || process.env.VERCEL_URL;
  const posts = await getPosts();
  const siteURL = `https://${domain}`;
  const date = new Date();

  const author = {
    name: 'Kevin Langley Jr.',
    email: 'me@kevinlangleyjr.com',
    link: 'https://kevinlangleyjr.dev',
  };
}

// ...

Then I created a new Feed object.

// ...

const feed = new Feed( {
  title: 'Kevin Langley | Web Engineer',
  description: '',
  id: siteURL,
  link: siteURL,
  image: `${siteURL}/kevinlangleyjr.jpg`,
  copyright: `All rights reserved ${date.getFullYear()}, Kevin Langley Jr.`,
  updated: date,
  generator: 'Next.js',
  feedLinks: {
    rss2: `${siteURL}/rss/feed.xml`,
    json: `${siteURL}/rss/feed.json`,
    atom: `${siteURL}/rss/atom.xml`,
  },
  author,
} );

// ...

Then we can finally start looping over our posts to add to the feed. With the latest changes to the next-mdx-remote package and no longer having the renderToString method in v3, we are using renderToStaticMarkup from react-dom/server to generate the markup to add to our feeds.

// ...

for ( const post of posts ) {
  const url = `${siteURL}/blog/${post.slug}`;
  const { content, ...postData } = post;
  const mdxSource = await serialize( content, {
    scope: postData as Record<string, any>, // Scope expects a <Record> here.
    mdxOptions: {
      remarkPlugins: [
        // I use a few different remark plugins, check out my "How I built my blog" article for more information!
      ],
    },
  } );

  const markup = renderToStaticMarkup(
    <MDXRemote components={ MDXComponents } { ...mdxSource } />
  );

  feed.addItem(
    {
      title: post.title,
      guid: post.slug,
      id: url,
      link: url,
      description: post.excerpt,
      content: markup,
      author: [author],
 contributor: [author],
 date: new Date( post.published_date ),
    }
);

}

// ...

And then we can finally write those feeds to their appropriate files.

// ...

fs.mkdirSync( './public/rss', { recursive: true } );
fs.writeFileSync( './public/rss/feed.xml', feed.rss2() );
fs.writeFileSync( './public/rss/atom.xml', feed.atom1() );
fs.writeFileSync( './public/rss/feed.json', feed.json1() );

// ...

Now, how do we get these feeds to automatically run on build?

Easy! Just call it in the getStaticProps method in the blog index and it will generate on build. I like to wrap it in a check for the VERCEL environment variable which will then only run when building on the Vercel platform, or if I pass in the environment variable when building locally.

// ...

export const getStaticProps: GetStaticProps = async () => {
  const { posts, hasNextPage } = getPostsForPage();

  if ( process.env?.VERCEL ) {
    await generateFeeds();
  }

  return {
    props: {
      posts,
      hasNextPage,
    },
  };
};
// ...

Here is the entire feed.tsx file with all the steps completed.

import fs from 'fs';
import { Feed } from 'feed';
import { serialize } from 'next-mdx-remote/serialize';
import { MDXRemote } from 'next-mdx-remote';
import { renderToStaticMarkup } from 'react-dom/server';
import { MDXComponents } from '@components/MDX';
import { getPosts } from '@utils/mdx';

const generateFeeds = async () => {

  const domain = process.env.NEXT_PUBLIC_MAIN_DOMAIN || process.env.VERCEL_URL;
  const posts = await getPosts();
  const siteURL = `https://${domain}`;
  const date = new Date();
  const author = {
    name: 'Kevin Langley Jr.',
    email: 'me@kevinlangleyjr.com',
    link: 'https://kevinlangleyjr.dev',
  };

  const feed = new Feed( {
    title: 'Kevin Langley | Web Engineer',
    description: '',
    id: siteURL,
    link: siteURL,
    image: `${siteURL}/kevinlangleyjr.jpg`,
    copyright: `All rights reserved ${date.getFullYear()}, Kevin Langley Jr.`,
    updated: date,
    generator: 'Next.js',
    feedLinks: {
      rss2: `${siteURL}/rss/feed.xml`,
      json: `${siteURL}/rss/feed.json`,
      atom: `${siteURL}/rss/atom.xml`,
    },
    author,
} );

for ( const post of posts ) {
  const url = `${siteURL}/blog/${post.slug}`;
  const { content, ...postData } = post;
  const mdxSource = await serialize( content, {
    scope: postData as Record<string, any>, // Scope expects a <Record> here.
    mdxOptions: {
      remarkPlugins: [
        // I use a few different remark plugins, check out my "How I built my blog" article for more information!
      ],
    },
  } );

  const markup = renderToStaticMarkup(
    <MDXRemote components={ MDXComponents } { ...mdxSource } />
  );

  feed.addItem(
    {
      title: post.title,
      guid: post.slug,
      id: url,
      link: url,
      description: post.excerpt,
      content: markup,
      author: [author],
 contributor: [author],
 date: new Date( post.published_date ),
    }
  );

  fs.mkdirSync( './public/rss', { recursive: true } );
  fs.writeFileSync( './public/rss/feed.xml', feed.rss2() );
  fs.writeFileSync( './public/rss/atom.xml', feed.atom1() );
  fs.writeFileSync( './public/rss/feed.json', feed.json1() );
}

Sitemap

For the sitemap functionality, I chose to use next-sitemap which provides a simple API to create a sitemap from your static, dynamic, and server side pages in Next.js.

I'm only using static pages on my site, but you can check out the README if you're interested in generating dynamic or server-side sitemaps.

Installation

# Using yarn
yarn add next-sitemap -D

# or using NPM
npm install -D next-sitemap

Implementation

From there, I created a new file in the root of the project named, next-sitemap.js and I provided a basic configuration within. You can find the different configuration options supported in the README

module.exports = {
 siteUrl: `https://${ process.env.VERCEL\_URL }`,
 generateRobotsTxt: true,
};

And then in my package.json, I added next-sitemap to the postbuild script.

{
  "build": "next build",
  "postbuild": "next-sitemap"
}

From there, whenever you build your project you'll have a sitemap.xml and if you set generateRobotsTxt to true in the configuration, a robots.txt generated into your public directory.

Profit! 🎉🎉🎉

Modern JS with ES6+

Kevin Langley Jr — Sun, 08 Apr 2018 05:35:00 +0000

This is the accompanying blog post to my Modern JS with ES6 talk for the Learn JavaScript Deeply course I taught at WordCamp Miami 2018.

Today in 2018, JavaScript is the most popular language to use on the web, according to the StackOverflow 2018 developer survey.

But the JavaScript we know and love today, is not the same JavaScript from the 2000's or even the early 2010's.

Let's dive in!

ES_???

ES is short for ECMAScript. Every time you see ES followed by a number, it is referencing that version of ECMAScript.

Only recently, with ES6 or ES2015 did JavaScript make the biggest leap in syntax and added functionality. These additions were intended to make large-scale JavaScript development easier.

ES1: June 1997
ES2: June 1998
ES3: December 1999
ES4: Abandoned
ES5: December 2009
ES6/ES2015: June 2015
ES7/ES2016: June 2016
ES8/ES2017: June 2017
ES9/ES2018: June 2018
ES10/ES2019: June 2019
ES11/ES2020: June 2020
ES.Next: This term is dynamic and references the next version of ECMAScript coming out.

TC39

The TC39 is the group that is responsible for advancing the ECMAScript specifications and standardizing these specifications for the JavaScript language.

All changes to the specification are developed within a process that evolves a feature from the idea phase to a fully fledged and specified feature.

Stage 0 - Strawperson
Stage 1 - Proposal
Stage 2 - Draft
Stage 3 - Candidate
Stage 4 - Finished

You can see an active list of proposals for the TC39, here.

Modules

Modules allow you to load code asynchronously and provides a layer of abstraction to your code. While JavaScript has had modules for a long time, they were previously implemented with libraries and not built into the language itself. ES6 is the when the JavaScript language first had built-in modules.

There are two ways to export from a module.

Named exports
Default export

Named Exports

With named exports, you just prepend what you want to export with export.

// mathlib.js

export function square(x) {
  return x * x;
}

export function add(x, y) {
  return x + y;
}

And then they can be imported using the same name as the object you exported.

// main.js

import { square, add } from './mathlib';

console.log(square(9)); // 81

console.log(add(4, 3)); // 7

Default Export

With default exports, you just prepend what you want to export with export default.

// foo.js
export default () => {
  console.log('Foo!');
}

// main.js
import foo from './foo';

foo(); // Foo!

Default and Named Exports

The two ways can even be mixed!

// foobar.js

export default () => {
  console.log('Foo!');
}

export const bar() => {
  console.log( 'Bar!' )
}

// main.js

import foo, { bar } from './foobar';

foo(); // Foo!

bar(); // Bar!

Variable Scoping

`var` vs `let` vs `const`

var is either function-scoped or globally-scoped, depending on the context.

If a var is defined within a function, it will be scoped to that enclosing function as well as any functions declared within. And would be globally scoped if it is declared outside of any function.

if ( true ) {
  var foo = 'bar';
}

console.log( foo ); // bar

function hello() {
  var x = 'hello';
  function world() {
    var y = 'world';
    console.log(x); // hello (function `hello()` encloses `x`)
    console.log(y); // world (`y` is in scope)
  }
  world();
  console.log(x); // hello (`x` is in scope)
  console.log(y); // ReferenceError `y` is scoped to `world()`
}

hello();

let and const are block scoped.

if ( true ) {
  let foo = 'bar';
  const bar = 'foo';
}

console.log( foo ); // ReferenceError.
console.log( bar ); // ReferenceError.

You can create new block scopes with curly brackets {} as shown in the below code sample.

let and const

let first = 'First string';

{ // Each layer of curly brackets gives us a new block scope.
  let second = 'Second string';
    {
      let third = 'Third string';
    }
    // Accessing third here would throw a ReferenceError.
}
// Accessing second here would throw a ReferenceError.

const variables can only be assigned once. But it is NOT immutable.

const foo = { bar: 1 };

foo = 'bar'; // 'foo' is read only.

But, you can change the properties!

const foo = { bar: 1 };

foo.bar = 2;
console.log(foo); // { bar: 2 }

Object.freeze() prevents changing the properties. Freezing an object returns the originally passed in object and has a multitude of effects on the object.

It will prevent new properties from being added to it, existing properties from being removed, changing the value of properties, and even prevents the prototype from being changed as well.

The object's properties are made immutable with Object.freeze()

const foo = { bar: 1 };

Object.freeze(foo);
foo.bar = 3; // Will silently fail or in strict mode, will return a TypeError
console.log(foo.bar); // 2

Another option you have is to seal an object to prevent changing the object structure.

Photo Credit: Eva Rinaldi

Wait, no. Not that Seal!

Photo Credit: Amy Asher

Yeah, no. Not that one either...

const foo = { bar: 1 };

Object.seal(foo);
foo.baz = false; // Will silently fail or in strict mode, will return a TypeError
foo.bar = 2;
console.log( foo ); // { bar: 2 }

Hoisting

Hoisting in JavaScript is a process where variables and function declarations are moved to the top of their scope before code execution.

Which means you can do this with functions and vars:

sayHello();

function sayHello() {
  console.log('Hello!');
}

console.log( foobar ); // undefined (note: not ReferenceError!)
var foobar = 'Woot!'

In ES6, classes, let, and const variables are hoisted but they are not initialized yet unlike var variables and functions.

new Thing(); // TypeError
class Thing{};

console.log(foo); // 'foo' was used before it was defined
let foo = true;

console.log(bar); // 'bar' was used before it was defined
const bar = true;

Temporal Dead Zone

Photo Credit: Giles Turnbull

While the temporal dead zone sounds like something from the plot of a Doctor Who episode, it is way less scary than it sounds.

A const or let variable is in a temporal dead zone from the start of the block until the initialization is processed.

if ( true ) {

  // TDZ starts!
  const doSomething = function () {
    console.log( thing ); // OK!
  };

  doSomething(); // ReferenceError
  let thing = 'test'; // TDZ ends.
  doSomething(); // Called outside TDZ!
}

Referencing the variable in the block before the initialization results in a ReferenceError, contrary to a variable declared with var, which will just have the undefined value and type.

But, what should I use?!? `var`? `let`? `const`?

The only difference between const and let is that const makes the contract that no rebinding will happen.

Use const by default. Only use let if rebinding is needed.var shouldn't be used in ES2015.

Mathias Bynens - V8 Engineer @ Google

Use var for top level variables Use let for localized variables in smaller scopes. Refactor let to const only after some code has been written and you're reasonably sure there shouldn't be variable reassignment.

Kyle Simpson - Founder @ Getify Solutions

I, personally, follow the first approach of using const by default, never use var, and only use let when I know I need to reassign the variable.

Iterables & Looping

When iterating or looping using var, you leak a global variable to the parent scope and the variable gets overwritten with every iteration.

for ( var i = 0; i < 10; i++ ) {
  setTimeout( function() {
    console.log( 'Number: ' + i );
  }, 1000 );
}

// Number: 10
// Number: 10
// Number: 10
// Number: 10
// Number: 10
// Number: 10
// Number: 10
// Number: 10
// Number: 10
// Number: 10

Using let in a for loop allows us to have the variable scoped to its block only.

for ( let i = 0; i < 10; i++ ) {
  setTimeout( function() {
    console.log( 'Number: ' + i );
  }, 1000 );
}

// Number: 0
// Number: 1
// Number: 2
// Number: 3
// Number: 4
// Number: 5
// Number: 6
// Number: 7
// Number: 8
// Number: 9

ES6 also gives us a new way to loop over iterables!

Using a for...of statement loops over an iterable with a very clean and simple syntax.

const iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}

// 10
// 20
// 30

You can even iterate over NodeLists without having to use any other trickery! 🤯

const articleParagraphs = document.querySelectorAll('article > p');

for (const paragraph of articleParagraphs) {
  paragraph.classList.add('read');
}

Or even, use it to iterate over letters in a string!

const foo = 'bar';
for (const letter of foo) {
  console.log(letter);
}

// b
// a
// r

Arrow Functions

Arrow functions are a more concise alternative to the traditional function expression.

// Traditional function expression.
const addNumbers = function (num1, num2) {
  return num1 + num2;
}

// Arrow function expression.
const addNumbers = (num1, num2) => {
  return num1 + num2;
}

Arrow functions can have implicit returns:

// Arrow function with implicit return and without any arguments.
const sayHello = () => console.log( 'Hello!' );

// Arrow function with implicit return and a single argument.
const sayHello = name => console.log( `Hello ${name}!` );

// Arrow function with implicit return and multiple arguments.
const sayHello = (firstName, lastName) => console.log( `Hello ${firstName} ${lastName}!` );

What about `this`?

With the introduction of ES6, the value of this is picked up from its surroundings or the function's enclosing lexical context. Therefore, you don't need bind(), that, or self anymore!

function Person(){
  this.age = 0;

  setInterval(function() {
    this.age++; // `this`refers to the Window 😒
  }, 1000);
}

function Person(){
  var that = this;
  this.age = 0;

  setInterval(function() {
    that.age++; // Without arrow functions. Works, but is not ideal.
  }, 1000);
}

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // `this` properly refers to the person object. 🎉🎉🎉
  }, 1000);
}

When should I not use arrow functions?

Check out my article, about when to not use arrow functions in JavaScript

Default Arguments

Here's a basic function.

function calculateTotal( subtotal, tax, shipping ) {
return subtotal + shipping + (subtotal * tax);
}

const total = calculateTotal(100, 0.07, 10);

Let’s add some defaults to the arguments in our function expression!

The old way 😕

function calculateTotal( subtotal, tax, shipping ) {
  if ( tax === undefined ) {
    tax = 0.07;
  }

  if ( shipping === undefined ) {
    shipping = 10;
  }

  return subtotal + shipping + (subtotal * tax);
}

const total = calculateTotal(100);

A little better

function calculateTotal( subtotal, tax, shipping ) {
  tax = tax || 0.07;
  shipping = shipping || 10;

  return subtotal + shipping + (subtotal * tax);
}

const total = calculateTotal(100);

Now with ES6+! 🎉🎉🎉

function calculateTotal( subtotal, tax = 0.07, shipping = 10 ) {
  return subtotal + shipping + (subtotal * tax);
}

const total = calculateTotal(100);

What if I wanted to only pass in the first and third argument?

function calculateTotal( subtotal, tax = 0.07, shipping = 10 ) {
  return subtotal + shipping + (subtotal * tax);
}

const total = calculateTotal(100, , 20); // SyntaxError! Cannot pass empty spaces for argument.

const total = calculateTotal(100, undefined, 20); // 🎉🎉🎉🎉

Destructuring

Destructuring allows you to extract multiple values from any data that is stored in an object or an array.

const person ={
  first: 'Kevin',
  last: 'Langley',
  location: {
    city: 'Beverly Hills',
    state: 'Florida'
  }
};

Using the above object, let's create some variables from the object's properties.

const first = person.first;
const last = person.last;

Before ES6, we were stuck just initializing a variable and assigning it to the object property you'd like to extract.

const { first, last, location } = person;

const { city, state } = location;

But with ES6+, we're able to destructure the variable and create new variables from the extracted data.

You can also alias the extracted data to a different variable name!

const { first: fName, last: lName } = person;

const { city: locationCity, state: locationState } = person.location;

It even works with nested properties!

const { first, last, location: { city } } = person;

console.log( city ); // Beverly Hills

What if I tried to destruct a property that doesn't exist?

The returned value for that variable will be undefined.

const settings = { color: 'white', height: 500 };
const { width, height, color } = settings;

console.log(width);// undefined
console.log(height); // 500
console.log(color);// white

You can even set defaults in your destructuring!

const settings = { color: 'white', height: 500 };
const { width = 200, height = 200, color = 'black' } = settings;

console.log(width);// 200
console.log(height); // 500
console.log(color);// white

You can destructure arrays as well!

const details = ['Kevin', 'Langley', 'kevinlangleyjr.com'];
const [first, last, website] = details;

console.log(first);// Kevin
console.log(last);// Langley
console.log(website); // kevinlangleyjr.com

Spread... and ...Rest

Before ES6, we would run .apply() to pass in an array of arguments.

function doSomething (x, y, z) {
  console.log(x, y, z);
}

let args = [0, 1, 2];

// Call the function, passing args.
doSomething.apply(null, args);

...Spread Operator

But with ES6, we can use the spread operator ... to pass in the arguments.

function doSomething (x, y, z) {
  console.log(x, y, z);
}

let args = [0, 1, 2];

// Call the function, without `apply`, passing args with the spread operator!
doSomething(...args);

We can also use the spread operator to combine arrays.

let array1 = ['one', 'two', 'three'];
let array2 = ['four', 'five'];

array1.push(...array2) // Adds array2 items to end of array.
array1.unshift(...array2) //Adds array2 items to beginning of array.

And you can combine them at any point in the array!

let array1 = ['two', 'three'];
let array2 = ['one', ...array1, 'four', 'five'];

console.log(array2); // ["one", "two", "three", "four", "five"]

We can also use the spread operator to create a copy of an array.

let array1 = [1,2,3];
let array2 = [...array1]; // like array1.slice()

array2.push(4);

console.log(array1); // [1,2,3]
console.log(array2); // [1,2,3,4]

We can also use the spread operator with destructuring.

const players = ['Kevin', 'Bobby', 'Nicole', 'Naomi', 'Jim', 'Sherry'];
const [first, second, third, ...unplaced] = players;

console.log(first); // Kevin
console.log(second); // Bobby
console.log(third); // Nicole
console.log(unplaced); // ["Naomi", "Jim", "Sherry"]

const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };

console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

We can also use the spread operator to expand a NodeList.

const elements = [...document.querySelectorAll('div')];

console.log(elements); // Lists all the div's on the page.

...Rest Operator

The rest operator allows us to more easily handle a variable number of function parameters.

function doMath(operator, ...numbers) {
  console.log(operator); // 'add'
  console.log(numbers); // [1, 2, 3]
}

doMath('add', 1, 2, 3);

Template Literals

The template literal, introduced in ES6, is a new way to create a string.

const name = 'Kevin';

// The old way...
console.log('Hello, ' + name + '!'); // Hello, Kevin!

const name = 'Kevin';

// With ES6 template literals.
console.log(`Hello, ${name}!`); // Hello, Kevin!

Within template literals you can evaluate expressions.

const price = 19.99;
const tax = 0.07;
const total = `The total price is ${price + (price * tax)}`;

console.log(total); // The total price is 21.3893

With template literals you can more easily create multi-line strings.

console.log('This is some text that flows across\ntwo lines!');

// This is some text that flows across
// two lines!

console.log(`But so does
this text!`);

// But so does
// this text!

New String Methods

With ES6, we have a few new string methods that can be very useful.

.startsWith()

This method returns a bool of whether the string begins with a substring, starting at the index provided as the second argument, which defaults to 0.

Syntax

startsWith( searchString )
startsWith( searchString, position )

Examples

const str = 'Learn JavaScript Deeply';

console.log(str.startsWith('Learn'));// true
console.log(str.startsWith('JavaScript'));// false
console.log(str.startsWith('Deeply', 17));// true

.endsWith()

This method returns a bool of whether the string ends with a substring, with the optional parameter of length which is used as the length of the str and defaults to str.length.

Syntax

endsWith( searchString )
endsWith( searchString, length )

Examples

const str = 'Learn JavaScript Deeply';

console.log(str.endsWith('Deeply'));// true
console.log(str.endsWith('Learn'));// false
console.log(str.endsWith('JavaScript', 16));// true

.includes()

This method returns a bool of whether the string includes a substring, starting at the index provided as the second argument, which defaults to 0.

Syntax

includes( searchString )
includes( searchString, position )

Examples

const str = 'Learn JavaScript Deeply';

console.log(str.includes('JavaScript'));// true
console.log(str.includes('Javascript'));// false
console.log(str.includes('PHP'));// false

.repeat()

This method returns a new string which contains a concatenation of the specified number of copies of the original string.

Syntax

repeat( count )

Examples

const str = 'Deeply';

console.log(str.repeat(3));// DeeplyDeeplyDeeply
console.log(str.repeat(2.5));// DeeplyDeeply (converts to int)
console.log(str.repeat(-1));// RangeError

Enhanced Object Literals

const first = 'Kevin';
const last = 'Langley';
const age = 29;

Let's assign our variables to properties of an object!

const person = {
  first: first,
  last: last,
  age: age
};

Now let's do it again but with object literals this time.

const person = {
  first,
  last,
  age
};

You can even mix object literals with normal key value pairs.

const person = {
  firstName: first,
  lastName: last,
  age
};

We can also use a shorter syntax for method definitions on objects initializers.

The syntax we're all familiar with in ES5...

var obj = {
  foo: function() {
    console.log('foo');
  },
  bar: function() {
console.log('bar');

}

};

Can now be simplified with the new syntax for method definitions!

const obj = {
  foo() {
    console.log('foo');
  },
  bar() {
    console.log('bar');
  }
};

Or even define keys that evaluate on run time inside object literals.

let i = 0;
const a = {
  ['foo' + ++i]: i,
  ['foo' + ++i]: i,
  ['foo' + ++i]: i
};

console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3

Let's clean that up a bit with string template literals for the keys!

let i = 0;
const a = {
  [`foo${++i}`]: i,
  [`foo${++i}`]: i,
  [`foo${++i}`]: i
};

console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3

New Array Methods!

Array.find()

The Array.find static method returns the first value in the provided array that satisfy the testing function or undefined if no elements match.

Syntax

// Arrow function
Array.find( element => { conditional } )
Array.find((element, index) => { conditional } )
Array.find((element, index, array) => { conditional } )

// Callback function
Array.find(callbackFn)
Array.find(callbackFn, thisArg)

// Inline callback function
Array.find(function callbackFn(element) { conditional })
Array.find(function callbackFn(element, index) { conditional })
Array.find(function callbackFn(element, index, array){ conditional })
Array.find(function callbackFn(element, index, array) { conditional }, thisArg)

Examples

const posts = [
  {
    id: 1,
    title: 'Hello World!'
  },
  {
    id: 2,
    title: 'Learn JS Deeply!'
  }
];

const post = posts.find(post => post.id === 2);
console.log(post); // {id: 2, title: "Learn JS Deeply!"}

Array.findIndex()

The Array.findIndex static method returns the index of the first value in the provided array that satisfy the testing function or undefined if no elements match.

Syntax

// Arrow function
Array.findIndex( element => { conditional } )
Array.findIndex((element, index) => { conditional } )
Array.findIndex((element, index, array) => { conditional } )

// Callback function
Array.findIndex(callbackFn)
Array.findIndex(callbackFn, thisArg)

// Inline callback function
Array.findIndex(function callbackFn(element) { conditional })
Array.findIndex(function callbackFn(element, index) { conditional })
Array.findIndex(function callbackFn(element, index, array){ conditional })
Array.findIndex(function callbackFn(element, index, array) { conditional }, thisArg)

Examples

const posts = [
  {
    id: 1,
    title: 'Hello World!'
  },
  {
    id: 2,
    title: 'Learn JS Deeply!'
  }
];

const post = posts.findIndex(post => post.id === 2);
console.log(post); // 1 - Remember, this is zero based!

Array.from()

The Array.from static method let's you create Arrays from array-like objects and iterable objects.

Syntax

// Simple without any mapping
Array.from(arrayLike);

// Arrow function mapping (Can't utilize the third argument for the `thisArg` argument since the mapping uses an arrow function)
Array.from(arrayLike, element => [...] );
Array.from(arrayLike, (element, index) => [...] );

// Mapping named function
Array.from(arrayLike, mapFn );
Array.from(arrayLike, mapFn, thisArg);

Examples

We all know that unfortunately we cannot just simply loop over a NodeList.

const headers = document.querySelectorAll('h1');
const titles = headers.map(h1 => h1.textContent); // TypeError: headers.map is not a function

But, using Array.from we can loop over them easily!

const headers = document.querySelectorAll('h1');
const headersArray = Array.from(headers);
const titles = headersArray.map(h1 => h1.textContent);

// Or we can use the `mapFn` parameter of `Array.from`.

const titles = Array.from(
  document.querySelectorAll('h1'),
  h1 => h1.textContent
);

Array.indexOf()

The Array.indexOf static method returns the index at which passed in element can be found in an array.

Syntax

Array.indexOf(searchElement)
Array.indexOf(searchElement, index)

Examples

const values = Array.of(123, 456, 789);

console.log(values); // [123,456,789]

Array.of()

The Array.of static method creates a new Array that consists of the values that are passed into it regardless of the type of or the number of arguments.

The big difference between this and the Array constructor method is how each handles single integer arguments.Array.of(5) will create an array with a single element but Array(5) creates an empty array with a length of 5.

Syntax

Array.of(firstElement)
Array.of(firstElement, secondElement, ... , nthElement)

Examples

const values = Array.of(123, 456, 789);
console.log(values); // [123,456,789]

Promises

The Promise object is used for asynchronous operations and represents the eventual completion or failure of that operation, and its resulting value. ¹Promises are often used for fetching data asynchronously.

Promises exist in one of four states:

Pending - When defined, this is the initial state of a Promise.
Fulfilled - When the operation has completed successfully.
Rejected - When the operation has failed.
Settled - When it has either fulfilled or rejected.

const promiseA = new Promise( ( resolve, reject ) => {
  setTimeout( () => {
    resolve('Resolved!');
  }, 300 );
} );

Promise API

There are 6 static methods in the Promise class:

`Promise.all`

The .all() method accepts an iterable of Promise objects as it's only parameter and returns a single Promise object that resolves to an array of the results of the Promise objects that were passed into it. The promise returned from this method will resolve when all of the passed in promises resolve or will reject, if any of them rejected.

`Promise.allSettled`

The .allSettled() method accepts an iterable of Promise objects as it's only parameter and will return a Promise object that will resolve with an array of objects with the outcome of each Promise object when all of them have settled with either a resolve or reject. The biggest difference between .allSettled() and .all() is that the later resolves or rejects based on the outcomes of the passed in promises while the former will resolve once all Promise objects passed in are settled with either a resolve or reject.

`Promise.any`

The .any() method accepts an iterable of Promise objects as it's only parameter and will return a single Promise objet that resolves when any of the passed in Promise objects resolve, with the value of the resolved original Promise object.

`Promise.race`

The .race() method accepts an iterable of Promise objects as it's only parameter and will return a Promise object that resolves or rejects as soon as one of the passed in Promise objects resolves or rejects.

`Promise.resolve`

The .resolve() method returns a Promise object that is resolved with the value provided. If a thenable (has a then method) is the returned value, the returned Promise object will follow that then until the final value is returned.

`Promise.reject`

The .reject() method returns a Promise object that is rejected with the reason provided.

Let's jump into some examples!

const p1 = new Promise( (resolve, reject) => {
  resolve('Learn JavaScript Deeply!');
} );

p1.then(data => console.log(data)); // Learn JavaScript Deeply

Promises can even be chained!

const p2 = new Promise( (resolve, reject) => {
  setTimeout( () => resolve( 1 ), 1000 ); // Resolve with `1` after 1 second.
} );

p2
  .then( value => {
    console.log( value ); // 1
    return value * 2;
  } )
  .then( value => {
    console.log( value ); // 2
    return value * 4;
  } )
  .then( value => {
    console.log( value ); // 8
    return value * 2;
  } );

Let's look at some more in depth examples.

Often, you will run into using promises when trying to fetch data.

const postsPromise = fetch('https://miami.wordcamp.org/2018/wp-json/wp/v2/posts');

console.log(postsPromise);

// Promise {pending}
// __proto__: Promise
// [[PromiseStatus]]: "pending"
// [[PromiseValue]]: undefined

postsPromise
  .then(data => console.log(data));

// Response {type: "cors", url: "https://miami.wordcamp.org/2018/wp-json/wp/v2/posts", redirected: false, status: 200, ok: true, ...}

postsPromise
  .then(data => data.json()) // Get's JSON value from fetch.
  .then(data => console.log(data)) // Console log the value.
  .catch(err => console.error(err)); // Catch any errors.

// {id: 5060, date: "2018-03-15T17:41:09", ...}
// {id: 4954, date: "2018-03-14T00:21:10", ...}
// {id: 4943, date: "2018-03-13T19:16:11", ...}
// {id: 4702, date: "2018-03-10T11:04:36", ...}
// ...

You can catch errors that are thrown in promises using the .catch method as shown below.

const p = new Promise((resolve, reject) => {
  reject(Error('Uh oh!'));
});

p.then(data => console.log(data)); // Uncaught (in promise) Error: Uh oh!

p
  .then(data => console.log(data))
  .catch(err => console.error(err)); // Catch the error!

Classes

Behind the scenes, ES6 classes are not something that is radically new. They mainly provide more convenient syntax to create old-school constructor functions.

// Class declaration
class Animal {

}

// Class expression
const Animal = class {}

class Animal {

  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks!`);
  }
}

const puppy = new Dog('Spot');
puppy.speak(); // Spot barks!

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    this.breed = breed;
  }

  speak() {
    console.log(`${this.name} barks!`);
  }
}

Async/Await

The await keyword and async functions were added in ES2017 or ES8. They are really just syntactic sugar on top of Promises that help make asynchronous code easier and cleaner to read and write. The async keyword is added to functions to denote it will return a promise to be resolved, rather than directly returning the value.

Currently, you can only use the await keyword inside of an async function, but there is an open proposal for top-level await.

Let's take a look at some promises and how we can convert them to async/await!

const getUser = username => {
  return fetch(`https://api.github.com/users/${username}`)
  .then( response => {
    if ( ! response.ok ) {
      throw new Error( `HTTP error! Response status: ${response.status}` );
    }
    return response.json();
  } )
  .catch( e => console.error( e ) );
}

const user = getUser( 'kevinlangleyjr' );
console.log( user );

And now, let's turn change this to use async/await.

const getUser = async username => {

  try {

    const response = await fetch(`https://api.github.com/users/${username}`)

    if ( ! response.ok ) {
      throw new Error( `HTTP error! Response status: ${response.status}` );
    }

    const user = await response.json();

    return user;

  } catch ( e ) {
    console.error( e );
  }
}

const user = getUser( 'kevinlangleyjr' );
console.log( user );

The difference being, we're now wrapping the entire function body where we do our awaits in a try/catch block. This will catch any errors from the Promises that we are awaiting. We are also putting the async keyword in front of our function definition here as well, which is required for await to work properly.

Set/WeakSet

A Set object allows you to store unique values of any type. While it is similar to an Array, there are a couple of big differences. The first being that an Array can have duplicate values and a Set cannot. And the other is that Arrays are ordered by index while Sets are only iterable in the order they were inserted.

You can capture the entries in the set using .entries() which will keep the reference to the original objects inserted.

Map and Set both have keys() and values() methods but on Sets, those methods will return the same iterable of values since Sets are not key value pairs but just values.

const set = new Set();

set.add( 9 );      // Set(1) { 9 }
set.add( 9 );      // Set(1) { 9 } Ignored because it already exists in the set.
set.add( 7 );      // Set(2) { 9, 7 }
set.add( 7 );      // Set(2) { 9, 7 } Ignored because it already exists in the set.
set.add( 'Text' ); // Set(3) { 9, 7, 'Text' }
set.add( true );   // Set(4) { 9, 7, 'Text', true }

const user = {
  name: 'Kevin',
  location: 'Florida'
};

set.add( user );   // Set(5) { 9, 7, 'Text', true, { value: { location: 'Florida', name: 'Kevin' } } }

set.has( 9 );    // true
set.has( true ); // true

const newUser = {
  name: 'Kevin',
  location: 'Florida'
};

set.has( newUser );  // false - This doesn't do object property matching, it is an object reference check.

set.has( user );  // true

// Use .entries() to capture all the values in the set.

const entries = set.entries();

console.log( entries ); // SetIterator {9 => 9, 7 => 7, 'Text' => 'Text', true => true, {…} => {…}}

set.delete( true );  // true - This change is still reflected in entries because it keeps the reference

set.has( true );  // false

console.log( entries ); // SetIterator {9 => 9, 7 => 7, 'Text' => 'Text', {…} => {…}}

set.size // 5

// Iterating over a set is pretty simple but you have a few options.
for ( let item of set.values() ) {
  console.log( item );
}

// Is the same as,
for ( let item of set.keys() ) {
  console.log( item );
}

// And is also the same as,
for ( let [key, value] of set.entries() ) {
  console.log( key );
}

The main difference between a Set and a WeakSet is that the latter only accepts objects and the former can accept values of any type. The other big difference is that WeakSets hold weak references to the objects within them. So if there are no further references to an object that is within a WeakSet, those objects can be garbage collected. WeakSet's are also not enumerable nor is there a way to list the current objects within it, but you can .add(), .delete(), and check if a WeakSet .has() an object.

let ws = new WeakSet();
let user = { name: 'Kevin', location: 'Florida' };
ws.add( user );
console.log( ws.has( user ) ); // true
user = null; // The reference to `user` within the WeakSet will be garbage collected shortly after this point.

If you were to use the above code sample and then force garbage collection in the Chrome dev-tools by clicking the trash can under the Performance tab, you'd see that ws no longer holds the reference to user.

Map/WeakMap

The Map object, on the other hand, hold key-value pairs, tracks the insertion order, and can use either objects or primitive values for both the key and value.

While Objects are very similar to Maps and historically have been used in place of Maps prior to their introduction in ES6, there are some key differences. Maps can have keys of any type of value, including functions and Objects, while Objects can only have Strings and Symbols as keys. You cannot directly iterate over an Object while there are several ways to iterate over a Map. Also, there is no native support for JSON.stringify(), but it is possible with a bit of work.

const map = new Map();

map.set( 1, 'Learn' );// Map(1) {1 => 'Learn'}
map.set( 2, 'JavaScript' );// Map(2) {1 => 'Learn', 2 => 'JavaScript'}
map.set( 3, 'Deeply' );// Map(3) {1 => 'Learn', 2 => 'JavaScript', 3 => 'Deeply'}
map.set( 3, 'Very Deeply' );// Map(3) {1 => 'Learn', 2 => 'JavaScript', 3 => 'Very Deeply'} - Overwrite value of Deeply set on line above.

map.set(
  '1',
  'Different string value for the string key of 1.'
);  // Map(4) {1 => 'Learn', 2 => 'JavaScript', 3 => 'Very Deeply', '1' => 'Different string value for the string key of 1.'}

map.set(
  true,
  'Different string value for the bool of true.'
);  // Map(5) {1 => 'Learn', 2 => 'JavaScript', 3 => 'Very Deeply', '1' => 'Different string value for the string key of 1.', true => 'Different string value for the bool of true.'}

map.size // 5

map.delete( true );  // Map(4) {1 => 'Learn', 2 => 'JavaScript', 3 => 'Very Deeply', '1' => 'Different string value for the string key of 1.'}

map.delete( '1' );  // Map(3) {1 => 'Learn', 2 => 'JavaScript', 3 => 'Very Deeply'}

map.clear();  // Map(0) {size: 0}

/* New example with objects for keys. */

const user1 = { name: 'James' };
const user2 = { name: 'Kevin' };

// New Map for votes.
const votes = new Map();
votes.set( user1, 10 );  // Map(1) {{ name: 'James' } => 10}
votes.has( user1 );  // true
votes.has( user2 );  // false - Not set yet.
votes.set( user2, 20 );  // Map(2) {{ name: 'James' } => 10, { name: 'Kevin' } => 20}

votes.has( user1 );  // true
votes.has( user2 );  // true

votes.get( user1 );  // 10
votes.get( user2 );  // 20

votes.size // 2

References

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

When to not use arrow functions in JavaScript

Kevin Langley Jr — Mon, 02 Apr 2018 05:35:00 +0000

Arrow functions are a more concise alternative to the traditional function expression but they aren't appropriate everywhere.

Let's check out some examples of times you would not want to use arrow functions.

Scenario 1. Callback functions that require dynamic context.

Callback functions that require dynamic context, such as the element clicked, are not good candidates for arrow functions because you are unable to change the pre-defined context of this.

const button = document.querySelectorAll( '.cta-button' );

button.addEventListener( 'click', () => {

this.classList.toggle( 'selected' ); // `this`refers to the Window. 😔

} );

Using a regular function allows the value of this to change based on the context of the target element.

const button = document.querySelectorAll( '.cta-button' );

button.addEventListener( 'click', function() {

this.classList.toggle( 'selected' ); // `this`refers to the button! 🎉🎉🎉

} );

Scenario 2. Functions that use the `arguments` object.

Arrow functions do not bind the global arguments object.

const logUser = () => {

console.log(arguments[0]); // Uncaught ReferenceError: arguments is not defined 😕

}

logUser( 'Kevin' );

But with a regular function, you have access to the global arguments object.

function logUser() {

console.log(arguments[0]); // Kevin

console.log(arguments[1]); // Langley

}

logUser( 'Kevin', 'Langley' );

Scenario 3. Prototype Methods

function User(firstName, lastName) {

this.name = `${firstName} ${lastName}`;

}

User.prototype.sayHello = () => {

return `Hello, ${this.name}`;

}

const me = new User( 'Kevin', 'Langley' );

me.sayHello(); // Hello,

The this value in the sayHello method references the global object and not the User object that it is trying to access.

Instead, write your prototype methods the old fashioned way.

function User(firstName, lastName) {

this.name = `${firstName} ${lastName}`;

}

User.prototype.sayHello = function() {

return `Hello, ${this.name}`;

}

const me = new User( 'Kevin', 'Langley' );

me.sayHello(); // Hello, Kevin Langley

Scenario 4. Object methods

const user = {

 name: 'Kevin Langley',

sayHello: () => `Hello, ${this.name}`;

}

user.sayHello(); // Hello,

The this value in the sayHello method references the global object and not the User object that it is trying to access.

Instead, write your prototype methods the old fashioned way.

const user = {

 name: 'Kevin Langley',

sayHello() {

return `Hello, ${this.name}`;

}

}

user.sayHello(); // Hello, Kevin Langley

DEV Community: Kevin Langley Jr

Lesser Known Features of the Browser Console

Grouping Output

console.group( groupName )

console.groupCollapsed( groupName )

console.groupEnd()

String Substitutions

Styling Console Output

Assertions

Counting Instances

Browser Profiling

Formatting Tabular Output

Stack Trace

Self-Hosting Plausible Analytics With Dokku

What is Dokku?

What is Plausible?

Easy Application Deployment and Management with Dokku

What is Dokku?

Installation

Configuration

Let's deploy an app!

Dokku Plugins

Ledokku

Installation

Be sure to change example.com to your domain!

What's new in ES2021 or ES12?

String.prototype.replaceAll

Promise.any

WeakRefs

Logical Assignment Operators

Logical OR assignment operator ||=

Logical AND assignment operator &&=

Logical nullish assignment operator ??=

Numeric separators

Generating an RSS Feed and Sitemap in Next.js

RSS Feed

Installation

Implementation

Sitemap

Installation

Implementation

Modern JS with ES6+

ES_???

TC39

Modules

Named Exports

Default Export

Default and Named Exports

Variable Scoping

var vs let vs const

Hoisting

Temporal Dead Zone

But, what should I use?!? var? let? const?

Iterables & Looping

ES6 also gives us a new way to loop over iterables!

Arrow Functions

What about this?

When should I not use arrow functions?

Default Arguments

What if I wanted to only pass in the first and third argument?

Destructuring

What if I tried to destruct a property that doesn't exist?

Spread... and ...Rest

...Spread Operator

...Rest Operator

Template Literals

New String Methods

.startsWith()

Syntax

Examples

.endsWith()

Syntax

Examples

.includes()

Syntax

Examples

.repeat()

Syntax

Examples

Enhanced Object Literals

`console.group( groupName )`

`console.groupCollapsed( groupName )`

`console.groupEnd()`

Be sure to change `example.com` to your domain!

`String.prototype.replaceAll`

`Promise.any`

`var` vs `let` vs `const`

But, what should I use?!? `var`? `let`? `const`?

What about `this`?

`Promise.all`

`Promise.allSettled`

`Promise.any`

`Promise.race`

`Promise.resolve`

`Promise.reject`

Scenario 2. Functions that use the `arguments` object.