Today I learned about...
web api

You know how people say don’t roll your own auth? Well, maybe, now with passkeys, you could roll your own auth and stop paying for things like Auth0, Okta, etc.

That’s not me saying that, that’s Kyle Simpson 😅.

TIL that within the cotenxt of the Fetch API, you can use the credentials property to specify whether or not the request should extra data long with the request that the server can use to authenticate the user.

// always include credentials, even cross-origin.
fetch('https://jsonplaceholder.typicode.com/todos/1', {
	credentials: 'include',
})

// never send credentials in the request or include credentials in the response.
fetch('https://jsonplaceholder.typicode.com/todos/1', {
	credentials: 'omit',
})

// (the default): only send and include credentials for same-origin requests.
fetch('https://jsonplaceholder.typicode.com/todos/1', {
	credentials: 'same-origin',
})

Check it out

TIL about the Beacon API! It’s a way to send asynchronous and non-blocking requests to a web server.

It’s useful for sending analytics data to a server before the page is unloaded!

document.addEventListener('visibilitychange', () => {
	if (document.visibilityState === 'hidden') {
		navigator.sendBeacon('/log', analyticsData)
	}
})

Check it out

TIL, from Dom Farolino that he’s trying to make addEventListener extinct with the observables api!

// Filtering and mapping:
element
	.on('click')
	.filter((e) => e.target.matches('.foo'))
	.map((e) => ({ x: e.clientX, y: e.clientY }))
	.subscribe({ next: handleClickAtPoint })

This technology has been around for a while (> 3 years) and I haven’t used it personally, but it’s pretty damn slick. IndexedDB is a low-level API for client side storage. Its more popular brother, localStorage has its limitations and if you’re ever running into them, you might want to take a look at IndexedDB. In a nutshell, IndexedDB is a transactional database system that allows us to permanently store data inside a user’s browser. It would be useful for applications that store a large amount of data and applications that don’t need persistent internet connectivity to function.

Keep these key things in mind:

• It stores key-value pairs.
• It’s built on a transactional database model.
• The API is mostly async.
• It’s object-oriented 😲.
• It’s not SQL
• It adheres to the same origin policy.

So there’s this really handy web api that allows you to create a lightweight version of a Document and append nodes to said lightweight Document. The beauty with this is you can create this tree, make changes to it, and then all at once append the lightweight tree to the DOM.

This is much better than continually writing to the DOM and causing a shit ton of reflows.

Check it out

The unload event that is available to us web developers isn’t consistent across browsers (but we already know that many things arent 😂). Really, if you want to have predictable behavior and need to fire off some event/code when a user leaves/closes your page, you should be listening to a page visbility change.

Check it out