Skip to content

Instantly share code, notes, and snippets.


Andrea Giammarchi WebReflection

Block or report user

Report or block WebReflection

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View abort-controller-dance.js
class Signal extends EventTarget {
#aborted = false;
constructor(controller) {
// one of those cases where unreachable listener
// is actually desired 'cause it's more secure
this.addEventListener('abort', event => {
if (event.detail !== controller)
View abort-controller-dance.js
class Signal extends EventTarget {
#aborted = false;
#controller = null;
constructor(controller) {
this.#controller = controller;
this.addEventListener('abort', this);
handleEvent(event) {
if (event.detail !== this.#controller)
View fancy-idl-indeed.js
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() {
WebReflection /
Last active Apr 4, 2020
A recap of my FE / DOM related libraries

My FE/DOM Libraries

a gist to recap the current status

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?)
WebReflection /
Last active Feb 27, 2020
The `handleEvent` ASCII doodle

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     |
WebReflection / local-storage-vs-compression.js
Created Feb 19, 2020
A benchmark to see how many items can be stored using WebCompressor
View local-storage-vs-compression.js
const findLimit = async (type, create) => {
`%c ${type} benchmark `,
let i = 0;
let length = 0;
while (true) {
try {

How to file a GitHub/Lab issue

helping each others

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.

<!DOCTYPE html>
<html lang="en">
<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="//"></script>
<script defer src="js/index.js"></script>
<!-- this script, after all others, will bring in reCAPTCHA -->
// nullify the global reference while instrumenting the form
StaticEmail = (function (StaticEmail) {
// we don't know when window.recaptcha will be called,
// so we use a promise to simplify our workflow
var captcha = new Promise(function (resolve) {
window.recaptcha = function () {
// resolve passing the widget id along
grecaptcha.render('recaptcha', {
// the SITE KEY reCAPTCHA provided
// nullify the global reference while instrumenting the form
StaticEmail = (function (StaticEmail) {
contact.addEventListener('submit', function (event) {
var from = contact.from.value.trim();
var md =;
if (from && md) {
contact.submit.disabled = true;
path: '/api/paperboy',
You can’t perform that action at this time.