Today I learned about...
html

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

TIL that the button html element accepts a form attribute. This is cool because it allows you to associate a button with any form, even if it’s not a direct ancestor of our button! How cool is that ❤️!

Check it out

If you pass in a name, it’ll behave like an actual accordion. Thanks Adam Argyle!

Check it out

TIL that you can inject other non SVG XML into an SVG document. From our context, that means we can inject some HTML elements in the SVG. I’ve used it once at work and it was kind of nice 😃.

Check it out

TIL that there’s a fieldset element in HTML that allows for grouping of several elements in a web form.

Check it out

TLDR; this property, when applied to an html element will make it so that the element ignores user input (this also applies to screen readers).

Check it out

Turns out you can have a contenteditable attribute on your html and that’ll make (you guessed it), your content editable lol.

…go ahead… try it out on the list below… you know you want to. 🤪

• Food
• Food
• Food