I'm Wes Bos

from HAMILTON

I make web development courses and have a podcast called Syntax

These slides will be available shortly after this talk
I'll tweet the link out.

@wesbos

Getting Better at JavaScript

A mix bag of tips and techniques that will make you a better JS developer, regardless of which framework you use

With Intersection Observer, you can be alerted when an element is fully or partially scrolled into or out of view.

Uses

• Animate elements in on scroll
• Play video on scroll in
• Lazy Load images
• Record views for ads beyond fold
• Use with sticky headers

Ready for Meta?

How does it work?!

1. Options

2. Create an empty Observer

3. Give it a callback

4. Observe Away!

.closest()

Finds the closest ancestor that matches the passed selector

.matches()

Does this element match the selector?

Event Delegation

.contains()

Bling.js

The best 11 lines of code

Intl methods()

The Intl object is the namespace for the ECMAScript Internationalization API

Intl. DateTimeFormat()

Intl. RelativeTime Format()

Intl. Number Format()

Intl. List Format()

Intl. Plural Rules()

Intl.Collator()

Data Massaging

Array.from()

Turns an iterable into an array

Unique-ify

...spread and ...rest

Async Flow Control

Promises are an IOU for something that will happen in the future

They either resolve() or reject()

Let's look at some patterns around handling different types of requests

Promise.all()

When all resolve()

Short circuits when one reject()s

It takes an array of baby promises and makes a Mega promise

They run concurrently (at the same time)

Promise.race()

When one resolve() or reject()

Promise.any()

When one resolve() or all reject()

Stage 1

Promise

.allSettled()

When all finished - can be mix of resolve() or reject()

Stage 3

Error Handling

A few options

Option #1

Make sure Errors Don't Happen

Why waste dev time on something that should never happen? #ProblemSolved

Option #2

Try / Catch

Wrap that sucker in a safety blanket

Option #3

Higher Order Function

Async Functions can chain a .catch()

Just Live Your Life

Create a HOF

Hot Shot Implicit Return (WHAT)

Create a new function with your HOF

Very Handy in Node & Express!

Normally we'd Handle each possible Error with next()

🤔 But that doesn't cover errors we throw, unhandled errors or syntax errors...

We need to catch all errors and pass along to the next middleware function

Enter HOF

Then we just wrap our routes!

Any unhandled error will simply get passed along to next()

Option #4

Handle The Error When you Call it

Option #5

Node's Unhandled Rejection Event

Node.js will soon exit your process on unhandled rejected promises

Neat!

This is the part of the talk where
I check how much time I have left

Some Future Stuff

Not totally a standard yet

Web Speech Detection

DEMO TIME

Thanks Folks!

Questions?

(I have lots of stickers too!)