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 / gnome.md
Last active January 10, 2024 12:47
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 / uce-vs-lit-element.md
Last active January 8, 2024 07:16
A very simple comparison table between uce and lit-element.

A very simple comparison table between these two libraries.

uce lit-element
version 1.11.9 2.4.0
license ISC (simplified MIT) BSD-3-Clause License
language JS w/ TS definition TS w/ JS transpilation
size ( brotli ) 9437b ES5 / 6811b ES2015+ 8634b ES5 / 6708b ES2015+
@WebReflection
WebReflection / why-i-use-web-components.md
Last active December 5, 2023 17:47
Why I use web components

Why I use web components

This is some sort of answer to recent posts regarding Web Components, where more than a few misconceptions were delivered as fact.

Let's start by defining what we are talking about.

The Web Components Umbrella

As you can read in the dedicated GitHub page, Web Components is a group of features, where each feature works already by itself, and it doesn't need other features of the group to be already usable, or useful.

@WebReflection
WebReflection / setup.md
Last active December 5, 2023 10:40
Personal coding setup
@WebReflection
WebReflection / proxy-traps-cheat-sheet.md
Last active November 23, 2023 19:35
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 `

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 / new-tab.md
Created October 23, 2023 14:54
WSL open a new TAB (not window) on the same folder

I've saved this file as /usr/local/bin/new-tab but I think there is a way to configure it as Ctrl+Shift+T shortcut somehow, yet I really wanted to write this down as I've lost 20 minutes of my life to have WSL behaving just like any regular Linux distro in a console/terminal.

#!/usr/bin/env sh

cmd.exe /c wt.exe wt -w 0 nt -d "$(pwd)" -p "$WSL_DISTRO_NAME"

If you have better tips, hints, or follow ups, you're more than welcome to share, thank you!

@WebReflection
WebReflection / todo.js
Last active September 19, 2023 14:31
Web Components, the React way, without Shadow DOM
// https://medium.com/@bdc/web-components-the-react-way-8ed5b6f4f942
const store = (() => {
let state;
return todos => {
if (todos) {
state = todos;
render("todo-list");
}
return state;
};
// 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),
@WebReflection
WebReflection / smarter-jsx.md
Last active August 31, 2023 09:52
Brainstorming a smarter JSX

Brainstorming a smarter JSX

Deprecated

The new proposal and hopefully the new transformer will be out soon.


This gist tries to narrow down all features and complexity hidden behind a smarter JSX, something landed already as @ungap/babel-plugin-transform-hinted-jsx module but not yet concretely, or efficiently, implemented.