Skip to content

Instantly share code, notes, and snippets.

View WebReflection's full-sized avatar
🎯
Focusing

Andrea Giammarchi WebReflection

🎯
Focusing
View GitHub Profile
@WebReflection
WebReflection / dom-libraries.md
Last active October 14, 2024 09:22
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 / esx.md
Last active October 6, 2024 12:35
Proposal: an ESX for JS implementation
@WebReflection
WebReflection / jsc
Last active October 2, 2024 23:49
JavaScriptCore for macOS and Linux
#!/usr/bin/env bash
if [ -f /usr/lib/jsc ]; then
/usr/lib/jsc "$@"
elif [ -f /System/Library/Frameworks/JavaScriptCore.framework/Resources/jsc ]; then
/System/Library/Frameworks/JavaScriptCore.framework/Resources/jsc "$@"
fi

A Runtime ImportMap Example

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>
@WebReflection
WebReflection / pc-2-pi.md
Last active September 27, 2024 08:50
How to configure aarch64 Raspberry Pi 3 on ArchLinux

PC Setup

To make this possible you need qemu static built for other architectures. Be sure the following works before going any further here.

alias aur=pakku|yay|yaourt
aur -Sy --needed --noconfirm qemu-user-static # + deps, if proposed
# binfmt-qemu-static
@WebReflection
WebReflection / sqlite-as.md
Last active September 13, 2024 00:06
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 / proxy-traps-cheat-sheet.md
Last active September 13, 2024 00:05
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 / ai2svg.md
Last active August 13, 2024 17:12
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 / handle-event-doodle.md
Last active July 25, 2024 10:58
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
WebReflection / builtin-extends-only.md
Last active July 3, 2024 05:50
Builtin Extends Only

Builtin Extends Only

This gist simply lists all elements that can't be extended on "the platform" if not through the Custom Elements builtin extends feature.

This list does not focus on the "why would you?" rather on the "why can't you?" (on Safari) question out there, using the Permitted Parent section out of MDN Element Reference.