Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Andrea Giammarchi WebReflection

🎯
Focusing
View GitHub Profile
@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 September 11, 2023 19:24
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
@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

⬛⬛🟨⬛🟨
🟨🟨🟨🟨⬛
🟩🟨⬛🟨🟨
🟩🟩🟩🟩🟩
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>
View hooks-in-a-nutshell.js
// WARNING: There's much more to know/do around hooks, and
// this is just a simplification of how these work.
// shared references, updated
// per each hook invoke
let execution = null;
let current = null;
let context = null;
let args = null;
View if-then-else-if-else.js
const If = expression => {
let call = true, value;
return {
then: callback => Promise.resolve(value).then(callback),
Then(callback) {
if (call && expression) {
call = false;
value = callback(expression);
}
return this;
View async-tag.js
const {isArray} = Array;
const sync = async values => {
for (let {length} = values, i = 0; i < length; i++) {
const value = await values[i];
values[i] = isArray(value) ? await sync(value) : value;
}
return values;
};
@WebReflection
WebReflection / my-libraries-in-bytes.md
Last active September 24, 2021 22:03
My libraries in bytes
View my-libraries-in-bytes.md

Toward better libraries

I am recently re-branding my libraries as µ (micro), refactoring these when necessary, dropping IE < 11 support, improving the logic where possible, or providing a better, more robust, or faster, API.

In few words, on the right there is the modern version of libraries I've used for the last ~5 years in production or for side projects, and I suggest anyone having one of the earlier dependencies, to have a look at their modern, micro, counterpart.

How to read these tables

All sizes are minified, brotli compressed, and representing these two files, when possible:

View use-state-caller.js
function useState(value) {
const {caller} = arguments.callee;
const {arguments: a} = caller;
const {stack} = useState;
if (!stack.has(caller))
stack.set(caller, {a, i: 0, s: []});
const state = stack.get(caller);
state.a = a;
const {i, s} = state;
if (i === s.length) {