Skip to content

Instantly share code, notes, and snippets.

View WebReflection's full-sized avatar
🎯
Focusing

Andrea Giammarchi WebReflection

🎯
Focusing
View GitHub Profile

This gist is a simple no-brainer description of the 3 ways (actually 2.5) the Web handle events.

<tag onclick />

The declarative inline HTML event listener is mostly an indirection of DOM Level 0 events, meaning this simply uses the equivalent of tag.onclick = listener behind the scene.

Example

click me
@WebReflection
WebReflection / ten-tdec.md
Last active March 3, 2025 21:05
TextEncoder & TextDecoder shenanigans

TextEncoder & TextDecoder shenanigans

This gist is to remind developers that resizable or growable buffers don't play nice with TextEncoder or TextDecoder instances.

Setup

// setup
const ref = new TextEncoder().encode("hello");
@WebReflection
WebReflection / dom-libraries.md
Last active February 24, 2025 11:28
A recap of my FE / DOM related libraries

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?)
@WebReflection
WebReflection / ai2svg.md
Last active February 21, 2025 18:08
Transform AI to SVG, requires Inkscape

Save this file as ai2svg, make it executable via chmod +x ai2svg then run it optionally passing the folder to look for.

It will convert in that folder, or the current one, all .ai files into .svg

#!/usr/bin/bash

createsvg() {
  local margin="$1"
 local d
@WebReflection
WebReflection / proxy-traps-cheat-sheet.md
Last active February 16, 2025 23:41
Proxy Traps Cheat Sheet

Proxy Traps Cheat Sheet

There are various shenanigans around the Proxy API, including issues with Array.isArray and Object.ownKeys so that this gits purpose is to describe all the undocummented caveats to help anyone dealing with all possibilities this half-doomed API offers.

The 3 + 1 Proxy Types

  • object: any non primitive value can be proxied but apply and construct traps won't work with it. If the object somehow wants to represent an array without being one, it's impossible to survive Array.isArray brand check (it will be false) and with ownKeys the target needs to have a non configurable length property or it will also fails once reached
  • array: it's like object but it survives the `
@WebReflection
WebReflection / gnome.md
Last active February 5, 2025 19:16
Minimal GNOME Setup for ArchLinux

This is a personal reminder about few things I need to remember wheneve I install the most basic Gnome on ArchLinux.

Minimal Installation

bash <(curl -s https://archibold.io/install/gnome)

This will install automatically pamac-aur, Firefox, and many other common software so that the rest of this document could be ignore.

@WebReflection
WebReflection / sqlite-as.md
Last active January 25, 2025 15:12
Bun sqlite `.as(Class)` alternative

This is a simple demo of how latest Bun could've implemented .as(Class) instead of using the quite jurassic Object.create which is slow, bloated due descriptors logic, if used at all, and incapable to play nicely with features introduced after Object.create was even specified.

// what `as(Class)` should return
const { assign } = Object;
const asClass = new WeakMap;
const setAsClass = Class => {
  class As extends Class {
    constructor(fields) {
      assign(super(), fields);
@WebReflection
WebReflection / inline-js-modules.js
Last active November 14, 2024 22:54
PoC: How to inline ES modules
const env = {
m1: `import {func} from './m2.mjs'; console.log(func());`,
m2: `export function func() { return 'abc'; }`
};
const inlineModule = (env, text) => `data:text/javascript;base64,${
btoa(inlineModules(env, text))
}`;
const inlineModules = (env, text) => text.replace(
// https://webreflection.medium.com/using-the-input-datetime-local-9503e7efdce
Date.prototype.toDatetimeLocal =
function toDatetimeLocal() {
var
date = this,
ten = function (i) {
return (i < 10 ? '0' : '') + i;
},
YYYY = date.getFullYear(),
MM = ten(date.getMonth() + 1),

A Runtime ImportMap Example - now as a module

While it's not possible to define a <script type="importmap"> within a module, it is possible to define it in a synchronous <script> tag, as long as it's before any module starts executing.

Example (works in Chrome / Edge / WebKit / Safari / Firefox)

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