Andrea Giammarchi WebReflection

Anchorable Headers / Elements

Passing any element through this function, will make it navigable via keyboard.

function anchorAble(e) {
  /*! (c) Andrea Giammarchi - ISC */
  if ('currentTarget' in e) {
    if (/^(?:32|13|undefined)$/.test(e.keyCode)) {
      e.preventDefault();

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.

This is an alternative to the Modern Script Loading tchnique, that doesn't need to wait for the load event.

Compatibility

This technique has been successfully tested down to IE9.

<!DOCTYPE html>
<html lang="en">

	// it notifies about the highest peak, and it logs it in console
	// it also saves it to the window.participants property
	(function () {
	var max = 0;
	var timer = 0;
	var target = document.querySelector('[type="participants"]');
	var Notification = self.Notification \|\| {permission: 'denied'};
	(new MutationObserver(() => {
	var now = Math.max(parseInt(target.innerText.trim()), max);
	if (max < now) {

	#!/usr/bin/env bash

	echo ""
	echo "benchmarking $(tput bold)$1$(tput sgr0)"
	echo ""

	case $1 in
	nginx )
	sudo systemctl start nginx.service ;;
	express )

	import {define as hookedDefinition} from 'hooked-elements'; // or wicked-
	import css from 'ustyler';

	export const define = (selector, definition) => {
	// let the library throw on duplicated selectors
	const result = hookedDefinition(selector, definition);
	// add styles for this selector
	if (definition.style) css(definition.style);
	// return the wicked/hooked magic 🌈
	return result;

	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) {

	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 {