Skip to content

Instantly share code, notes, and snippets.

View WebReflection's full-sized avatar
🎯
Focusing

Andrea Giammarchi WebReflection

🎯
Focusing
2.1k followers · 3 following
View GitHub Profile
@WebReflection
WebReflection / proxy-traps-cheat-sheet.md
Last active November 23, 2023 19:35
Proxy Traps Cheat Sheet
View proxy-traps-cheat-sheet.md

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

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 / web_events.md
Last active November 20, 2023 19:25
View web_events.md

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 / builtin-extends-only.md
Last active June 29, 2023 12:23
Builtin Extends Only
View builtin-extends-only.md

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.

@WebReflection
WebReflection / esx.md
Last active November 26, 2023 15:56
Proposal: an ESX for JS implementation
View esx.md
@WebReflection
WebReflection / smarter-jsx.md
Last active August 31, 2023 09:52
Brainstorming a smarter JSX
View smarter-jsx.md

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.

@EllyLoel
EllyLoel / reset.css
Last active November 5, 2023 06:23
CSS Reset
View reset.css
/*
Made by Elly Loel - https://ellyloel.com/
With inspiration from:
- Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
- Andy Bell - https://piccalil.li/blog/a-modern-css-reset/
- Adam Argyle - https://unpkg.com/open-props@1.3.16/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE
Notes:
- `:where()` is used to lower specificity for easy overriding.
*/
@huytd
huytd / wordle.md
Last active October 9, 2023 02:23
Wordle in less than 50 lines of Bash
View wordle.md

image

How to use:

./wordle.sh

Or try the unlimit mode:

@WebReflection
WebReflection / wordle.md
Last active January 21, 2022 11:31
Create wordle report
View wordle.md

Apparently there's no share button after wordling in my browsers, so I created this copy/paste JS to put in console, which will produce an output like:

Wordle 212 4/6

⬛⬛🟨⬛🟨
🟨🟨🟨🟨⬛
🟩🟨⬛🟨🟨
🟩🟩🟩🟩🟩
@WebReflection
WebReflection / importma.md
Last active November 13, 2022 16:11
View importma.md

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)

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