Today I learned about...
web api

TIL about the output tag! The <output> element represents the result of a calculation performed by the application, or the result of a user action.

<form id="example-form">
	<input type="range" id="b" name="b" value="50" />
	+
	<input type="number" id="a" name="a" value="10" />
	=
	<output name="result" for="a b">60</output>
</form>

<script>
	const form = document.getElementById('example-form')
	const a = form.elements['a']
	const b = form.elements['b']
	const result = form.elements['result']

	function updateResult() {
		const aValue = a.valueAsNumber
		const bValue = b.valueAsNumber
		result.value = aValue + bValue
	}

	form.addEventListener('input', updateResult)

	updateResult()
</script>

Check it out

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.

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