Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Andrea Giammarchi WebReflection

🎯
Focusing
1.9k followers · 1 following
View GitHub Profile
@WebReflection
WebReflection / esx.md
Last active March 5, 2023 19:26
Proposal: an ESX for JS implementation
View esx.md
@WebReflection
WebReflection / smarter-jsx.md
Last active November 17, 2022 10:10
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.

@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>
@WebReflection
WebReflection / hooks-in-a-nutshell.js
Created January 4, 2021 17:50
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;
@WebReflection
WebReflection / if-then-else-if-else.js
Last active November 27, 2022 20:30
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;
@WebReflection
WebReflection / async-tag.js
Created December 30, 2020 11:03
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:

@WebReflection
WebReflection / use-state-caller.js
Created December 15, 2020 08:34
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) {
@WebReflection
WebReflection / heydonworks.md
Last active December 1, 2020 14:14
A privileged answer to a well known issue.
View heydonworks.md

This site throws in users and, most importantly, developers face, the fact publishing websites with hundreds of JS Kilobytes just to see some content, content that might also break due JS itself or browsers that haven't been tested or targeted, is very bad.

The same site is also great to remind everyone that a11y (accessibility) matters, and if you got upset by its disruptive technique, and you are a Web developer, now you know how it feels for people incapable of surfing the "modern Web" with its overly-bloated frameworks and practices that way too often don't take a11y into account.

However, JS is not to blame here, while developers abusing JS without following graceful enhancement practices, or without testing their sites offer some meaningful content even for users that might have disabled JS for whatever reason, are to blame so ... please "don't be that kind of developer".

That being said, as an exercise to see if I could surf it via JS, I've created this ti