Andrea Giammarchi WebReflection

My FE/DOM Libraries

a gist to recap the current status, also available as library picker!

Minimalistic Libraries

do one thing only and do it well

µhtml (HTML/SVG auto-keyed and manual keyed render)
augmentor (hooks for anything)
wickedElements (custom elements without custom elements ... wait, what?)

About This Gist

This gist summarizes the handleEvent(event) pattern features, something standard, something described by me many times, written in my tiny book, tweeted about, and yet it's something most Web developers ignore.

The `handleEvent` ASCII Doodle

                  ┌---------------------------------┐
var handler = {   | any object that inherits or     |

How to file a GitHub/Lab issue

Original Medium post

Filing an issue is not about delegating your problem to another developer, it’s about helping maintainers solve issues they haven’t encountered yet.

	class WeakValue extends Map {
	#registry = new FinalizationRegistry(key => {
	if (this.has(key) && !this.get(key).deref())
	this.delete(key);
	});
	get(key) {
	const value = super.get(key);
	return value && value.deref();
	}
	set(key, value) {

	class Signal extends EventTarget {
	#aborted = false;
	constructor(controller) {
	super();
	// one of those cases where unreachable listener
	// is actually desired 'cause it's more secure
	this.addEventListener('abort', event => {
	if (event.detail !== controller)
	event.stopImmediatePropagation();
	else

	class Signal extends EventTarget {
	#aborted = false;
	#controller = null;
	constructor(controller) {
	super();
	this.#controller = controller;
	this.addEventListener('abort', this);
	}
	handleEvent(event) {
	if (event.detail !== this.#controller)

	customElements.define('any-element', class extends Element {
	get data() {
	return this.dataset;
	}
	set data(value) {
	// more or less this operation, but previously known keys,
	// not found in value, should be dropped from the dataset
	Object.assign(this.dataset, value);
	}
	get aria() {

	const findLimit = async (type, create) => {
	console.log(
	`%c ${type} benchmark `,
	`font-weight:bold;color:white;background-color:black`
	);
	localStorage.clear();
	let i = 0;
	let length = 0;
	while (true) {
	try {

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>A Static Email Form Example + reCAPTCHA</title>
	<link rel="stylesheet" href="css/index.css">
	<script defer src="//unpkg.com/static.email"></script>
	<script defer src="js/index.js"></script>
	<!-- this script, after all others, will bring in reCAPTCHA -->