Fabio Spampinato
@fabiospampinato
Followers
2,204
Following
123
Media
486
Statuses
6,946
Trying to write good software. @Meta @TheNotableApp @vobyjs .
Joined June 2011
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
FOTFOT NEW SINGLE
• 384449 Tweets
#NHK_MUSICEXPO
• 340398 Tweets
Oprah
• 319928 Tweets
Gus Walz
• 224006 Tweets
الرائد
• 220220 Tweets
El TSJ
• 185962 Tweets
sabrina
• 98867 Tweets
Merino
• 62544 Tweets
Barron
• 60727 Tweets
Golpe de Estado
• 58163 Tweets
Tribunal Supremo de Justicia
• 55565 Tweets
Tribunal Supremo de Venezuela
• 51294 Tweets
A'TIN ANG PANALO
• 48013 Tweets
#BackToBackBillboardFanArmy
• 44273 Tweets
Eagles
• 40755 Tweets
Yale
• 34957 Tweets
#MAPATHEFIRSTTAKE
• 33013 Tweets
#النصر_الرايد
• 29198 Tweets
Commanders
• 24660 Tweets
Ann Coulter
• 24514 Tweets
Dotson
• 21941 Tweets
#KademeAcilYasalaşsın
• 18913 Tweets
Kavkaz
• 18247 Tweets
Aaron Judge
• 15526 Tweets
Sekou Kone
• 13665 Tweets
Milito
• 13087 Tweets
Baldwin
• 12085 Tweets
Jermaine Jenas
• 11877 Tweets
TypeScript: your "chicken" can not cross the "road"
"road" can be crossed by "car"
"car" uses "wheels" to move
"chicken" uses "feet" to move
"wheels" and "feet" are not compatible
24
195
2K
Resizing panes horizontally or vertically feels pretty good, but resizing panes horizontally _and_ vertically at the same time is even better!
Idea shamelessly copied from
@code
, though my implementation doesn't require any extra elements at intersections 😎
10
21
437
In this little benchmark rendering 16k squares using the DOM goes at 10fps, and rendering 1M squares using raw WebGL goes at 120fps.
I understand the DOM does a lot more here, but surely with enormous effort a faster web renderer that destroys Blink is physically implementable?
27
23
405
@GregSarafian
That's cool-ish, but also, why? If one could delete a million things like that the code would be meaningfully simpler, and you wouldn't really lose anything, nobody expects to the bezels to budge, if they sort of do that's unexpected, hence weird, hence probably bad.
12
1
318
Apparently the TC39 proposal for Signals is now public!
This is a long thread on everything that jumps to my mind when reading it. I haven't assimilated everything yet, so this is more a list of first impressions.
7
33
267
If you want your
@npmjs
installations to go roughly 25% faster (sometimes even 90% faster it seems):
```sh
echo "audit=false" >> ~/.npmrc
```
7
17
247
The WebCrypto API is probably the ugliest Web API that I can think of.
17
5
215
The js-framework-benchmark table ordered by this new "run memory 10k" test seems really interesting, it gives you a picture of how memory usage will scale in real applications beyond tiny things.
11
32
204
The people have spoken! Very early results, but in this very specific scenario the experimental rewrite I'm working on is:
~2x faster than Prettier if there's no cache.
~10x faster than Prettier if there's a cache.
~4x faster than dprint if there's cache.
There's lot of excitement around faster pretty printers using Rust. The main issue is that none of them match the long tail of formatting logic of prettier.
I'm putting up a $10k bounty for any project written in Rust that passes > 95% of the prettier JavaScript tests.
71
174
1K
6
18
203
An interesting virtualization strategy: just render some placeholder content and replace it with the actual content once it becomes visible.
See how much less lag my EmojiPicker virtualized like this causes. You get most of the performance _and_ most of the simplicity also.
5
12
172
Hashing performance is so important, somebody should really try to speed things up in the JS ecosystem.
- Node's sha1 function seems 3x slower than Bun's.
- The browser with its obsession with making everything async is 40x slower than Bun, and it's not even giving me a string.
16
7
167
You can reduce the number of DOM elements and DOM operations _by a lot_ and speed things up as a result by highlighting things with the CSS Custom Highlight API ().
6
15
163
You may not like it, but this is what peak CSS resetting looks like 🤣
- Not using ":where" causes higher specificity.
- Writing a single ":where" is way slower in Chrome.
- Writing it as a blocklist rather than an allowlist is way slower also.
8
10
152
Hot take: useEffect is mostly a good API. You need a function that can wrap a function containing side effects, you need to clean those up, and you need to know when to re-execute it. That narrows the design space a lot, useEffect is not a bad choice from the remaining options.
7
3
151
@mwseibel
There are probably many dark answers to this question 🤔
It'd be interesting if things like Windows/macOS/Android/iOS/Chrome/Firefox stopped working in Russia and displayed a message saying that they'll work normally again once Russia retreats from Ukraine, ransomware-style.
2
7
146
How I see half of the recent discussion about signals 🤣Once you accept the signal as a primitive many things will fall into place naturally, and a lot of footguns will disappear.
6
10
139
New JS module: a single-file <1kb min+gzip implementation of something similar to
@solid_js
's reactivity system, optimized for being easy to understand, with annotated source code. Maybe worth a read if you'd like to more in depth understand Solid.
5
14
122
"rm -rf node_modules/.vite" is the new "Restart TS Server", cache invalidation is hard boys.
10
7
120
I've found a repo that highlights the speedup of the Prettier ~rewrite I'm working on best. Still very early days, but check this out:
~6x faster when single-threaded and without a cache.
~14x faster when multi-threaded and without a cache.
~100x faster finally with the cache.
5
6
117
Life update: today I had my first day at
@Meta
! This is my first experience as an employee so it should be doubly interesting 🤓
12
2
117
Possibly the (video of) the most optimized command palette you've ever seen on the web:
- 0 DOM creations, insertions and deletions in most cases.
- 1 text node and 1 div per item (!).
- Layout recalculations under 500 microseconds.
- Style recalculations under 50 microseconds.
4
2
112
Does anybody need a new code editor for the web that's 2x faster than Monaco, 10x smaller than CodeMirror, and works well on mobile? 😎
Well, this ain't it, it's just a little 3-days proof of concept. It might get there eventually though.
9
3
110
@gunsnrosesgirl3
Kind of a next-gen water purifier: you just need to make one tiny instance of these things and it grows by itself, it multiplies, it repairs itself, it's not noisy, when its time comes it just becomes one with nature again etc.
0
0
96
Apparently it takes ~24ms to make a network request with "fetch" in
@nodejs
🤔 14ms of which just to load undici, which ok-ish, you pay for it once at least, and another 10ms for the actual request.
I don't know how long this takes in Deno or Bun, but 10ms seems huuuge to me.
5
5
101
@Yampeleg
"fixed memory consumption" and "unlimited context length" obviously don't make any sense together though, one can't cram an infinite amount of information into a finite space.
9
0
102
New package: "fast-ignore", a fast parser and processor for ".gitignore" files.
Compared to "ignore" it can match files in Babel's monorepo against its ".gitignore" file ~7x faster, and against its ".prettierignore" file ~5x faster.
9
5
98
Apparently it takes ~180ms on my computer to run "npm run true", which executes the following script: "true": "true".
That's beyond "slow". Doing exactly the same thing with bun takes some ~7ms instead 🙃
I don't know what one would have to write to make it 25x slower.
12
2
93
Did you know? Apparently "Element.append" can be _much_ faster than "Node.appendChild" because of...... MutationObserver! 🤦♂️ I just stumbled on this: 1 "append" for N nodes causes the observer to give you 1 mutation record, N "appendChild" for N nodes cause N mutation records 🤦♂️
4
8
88
New package: "siero", a serialization library.
- For values containing large strings it can easily be 10x faster than JSON.
- It can ~serialize symbols, promises and arbitrary functions too.
- It could work between anything: workers, VMs, servers etc.
5
4
86
7
6
85
It was a fun exploration! Hopefully once stable this work will help speed-up formatting for many people.
Huge thanks to the
@PrettierCode
team, and to the donors for the OpenCollective (), without which OSS work like this would not have been possible.
As part of the performance push for prettier,
@fabiospampinato
rewrote the CLI to be MANY TIMES FASTER! You can try it out now and read the deep dive into all the optimizations:
2
35
308
6
4
83
It looks like without the debugger attached Node is twice as fast, so about 12ms. But Deno is 6x faster than that. And Bun is like 100x faster or something.
Come on now, there should be **nothing** where Node is 100x slower than Bun, that's insane.
8
2
82
New vscode extension, a cool one: "Banal", the quickest way I've seen to inspect the bundle size of your dependencies, just open the "package.json" file, and there they will be. One click on the size and esbuild's bundle analyzer will open up, instantly.
1
6
80
I wish somebody championed this JS extension:
```js
// In
foo?.bar = 123;
// Out
(foo == null ? undefined : = 123);
```
It's such a natural extension of the language 🥲
That I hit many times 🥲
Plis 🥲
4
3
76
Prettier's current CLI resolves .editorconfig files for each target file independently, and it takes ~12s to do that work for ~20k target files. If one memoizes most of that by folder path, rather than by file path, resolving the same configurations takes ~13ms, or ~1000x faster.
2
3
69
Yo, ~3000 of the "elements" that needed a style recalculation according to
@ChromeDevTools
were due to this rule:
```css
::selection {
background-color: blue;
color: white;
}
```
If this isn't a bug I don't know what to call it. There isn't even a selection on this page.
Somebody should figure out how to optimize CSS.
In this scenario I have 1 table with 2 columns, 311 rows, and each cell contains an input. Every row, cell and input has the same dimensions. Somehow this takes ~90ms to style. Surely this is _at least_ 100x slower than optimal?
6
3
33
7
6
67
@ESYudkowsky
"We understand what their concerns are"
Given that the question got the same reaction that a joke might get I'm inclined to think that that may not be exactly true 🤣
1
1
64
I've organized all my active repos, they are mostly TypeScript libraries written with performance in mind. ~150 of them have 0 third-party production dependencies. If that's your thing maybe check these out.
May the open-source be ever in your favor ❤️
7
4
65
A 10 pages performance deep dive on speeding up
@PrettierCode
's CLI seems a bit much 🤔 It'll probably put somebody to sleep.
9
0
65
I don't understand how an "npm install" can take 12 seconds, when the latest version of all 40 dependencies I have is already installed. Querying NPM for the latest version of things is really slow or something?
18
0
62
Async I/O, or maybe actually ~just Promise, is so slow in Node that switching to Sync I/O consistently shaves a significant amount of time for me in I/O heavy stuff, most recently 40% of the ~6s I needed. So ~2.5s was spent just dealing with asynchronicity. That's a lot, right?
7
6
61
Weird how "queueMicrotask" is part of the HTML spec rather than the ECMAScript spec. A feature that has 100% to do with minute details of the language, and 0% to do with HTML and the DOM, how does that make any sense?
4
4
59
New (?) performance trick for V8: apparently the engine is optimized for one-off tiny regexes, which I'm not sure how common they are, because the first execution of a regex is interpreted, only from the second execution the regex engine gets serious. Worth changing this imo 🤷♂️
7
2
58
Keeping track of how many signals, effects, memos and roots are created seems very very useful.
For example this table needs 7000+ memos. Without this number I wouldn't be able to spot any problems, because it seems fast, but now I can see that something is not quite right.
5
4
59
New JS module: "picorpc", a tiny RPC library and spec.
It's what I imagine JSON-RPC-v2's and
@trpcio
's baby would look like. A super simple spec, very convenient APIs, and it packs a punch. ~5x smaller than tRPC.
Built from scratch in a day 🤪
1
5
57
Is there a popular frontend framework that actually loves and fully embraces
@typescript
? 🤔
- React: ships with no types.
- Solid: redefines what JSX means within TS.
- Svelte: custom DSL.
- Vue: custom DSL.
- Lit: TS can't type-check template literals.
- Angular: custom DSL.
33
3
53
This stuff should get fixed somehow in
@code
. I haven't touched vscode in 24h or something, there just can't be 3 processes eating a whole core each indefinitely.
7
1
50
Some preliminary numbers I get when comparing Prettier's current cli with the one I'm writing, in a scenario with ~21k files.
Basically the current cli seems to spend ~38s resolving configurations, fixing that, and with a few other tricks, the speedup should be major.
3
5
52
@barelyreaper
It's a JS-only CLI wrapper on top of Prettier itself, to keep 100% backwards compatibility.
No NAPI, no Rust, no WASM, no parallelization, no bundling, no minification, no snapshots.
1
3
51
New Node lib: "tiny-bin", a library for building command line apps.
No third-party dependencies, beautiful help pages, typo detection, update notifier, package name and version detection, and super simple to use. For half the size of Commander.
0
3
45
Hold on, if you aren't using a default export it works 🤨 How did I not know about this?!
There's a bit of an annoying indirection overhead when using modules, if you have module A updating a value, and module B reading that value, now the value can't just be a plain variable anymore like it could have been if both codes existed inside the same module.
0
0
0
8
5
47
esbuild recently added support for rendering a treemap to its bundle analyzer, increasing my love for esbuild by ~22%.
If you are looking for a very weird command to try it out quickly you can try this one:
```sh
npx banal tree map of this and that
```
0
3
47
New JS library: "shosho", a modern and powerful shortcuts management library.
Lots of interesting features: shortcuts sequences, left/right modifiers, numpad keys, mouse buttons, Konami codes, punctuation chars, aliases, auto-cmd/ctrl... and fast! 😎
4
1
45
Some good slides about
@CanadaHonk
's Porffor.
Honestly this looks pretty good to me. If one adds types to the language, for simplicity and better and more predictable performance, and fixes a bunch of crap from JS, I could see myself switching to something like that eventually.
2
6
49
@tannerlinsley
@typescript
The author of SWC is currently rewriting the type checker in Rust, they say the performance so far is *very* good. Imagine if that'll end up delivering esbuild-level performance, who's going to keep using tsc then?
👈
2
1
45
Two important objects that seem missing from JavaScript: UnorderedMap and UnorderedSet.
Today it seems impossible to get better performance, because the native structures are all ordered, and very efficient unordered ones can't be written in userland.
Thoughts?
9
1
45
The performance of (A) String.prototype.indexOf and (B) Uint8Array.prototype.indexOf seems to vary *wildly* across engines, and it's a bit puzzling to see these numbers:
- Chrome: (A) ~300ms (B) ~850ms
- Safari: (A) ~1850ms (B) ~1950ms
- Firefox: (A): ~4000ms (B) ~136000ms
7
2
43
@jarredsumner
Mind-blowing how this isn't implemented already in JSX, like does anybody even have the power to change JSX? If so, are they asleep or what?
2
0
43
@paulg
But isn't another rule of thumb to not raise more money than one needs? "extra $4M" sounds like they possibly raised too much.
1
0
38
That is insane and should be fixed at the speed of light.
"npm run" AFAIK basically just spawns a subshell with a modified PATH env variable. One can do that, spend 100ms mining bitcoin to fund development, and it would still be a lot faster than today's "npm run".
If you replace “npm run” with “bun run” your CI will get at least 200ms faster
15
7
217
4
3
40
New package: "fast-string-width", a fast function for calculating the visual width of a string once printed to the terminal.
It is optimized, as far as I could manage, for common strings containing latin+ansi characters, and it works everywhere.
4
1
37
@github
I was so hoping the second tweet to say: "if you just stop reading threads you'll save loads of time, potentially even hours!"
0
0
38
I don't understand how there are still "major" functions in javascript's "standard library" that I've never seen before, but apparently there's an "Array.of" function of questionable utility.
8
1
38
New Node module: "pollex", a ~reimplementation of esbuild's filesystem watcher. It's kinda cute because it's 20x smaller than chokidar, very simple, based on polling, but on average it's both way more efficient than naive polling, and way more responsive.
1
6
38
I've ~rewritten Oby, my signal implementation. Mainly it now uses a lazy algorithm, which provides some awesome performance guarantees. Also lots of APIs got either deleted or streamlined somewhat, so the library should be simpler to use.
1
1
37
Apparently
@typescript
v5 shaved ~25MB off the package size, and I seem to have 194 instances of TS in this computer, so that change alone could save me almost 5GB 🤣
If you'd like to count yours:
```sh
find ~ -type d -path "*/node_modules/typescript"
```
1
2
36
The most cursed function I've ever written, hopefully. Worth remembering it with a tweet before I make it slightly less cursed 🥲
4
0
36
Apparently since Node v20 and Chrome v111 it's possible to perfectly* pass a synchronous function to a worker and for that worker to just call it synchronously, thanks to SharedArrayBuffer.prototype.grow.
*: assuming you don't have circular dependencies between the threads.
3
1
36
Kinda funny to see Voby, a framework that's very usable (in my biased (?) option), has zero ~cheat flags (those 772s), and with zero compile-time optimizations, to the _left_ of the vanilla web-components implementation in js-framework-benchmark ().
4
3
35
Kinda funny how the MIT license just starts shouting at one point.
20
65
1K
@Rainmaker1973
Uncompressed though, which is kind of a meaningless measure, a billion "a"s would require ~1GB to store uncompressed, but it would take only like 4 bytes to store once compressed. It's the actual bits of information in the thing that matters.
3
0
30
Somebody should figure out how to optimize CSS.
In this scenario I have 1 table with 2 columns, 311 rows, and each cell contains an input. Every row, cell and input has the same dimensions. Somehow this takes ~90ms to style. Surely this is _at least_ 100x slower than optimal?
6
3
33
@asidorenko_
To me that looks kind of like a bug of the UI framework really 🤔 I understand it isn't, but in
@solid_js
both implementations would have the same performance characteristics, not working like that feels wrong.
3
0
34
@LeaVerou
Arguably boxed primitives shouldn't be treated like primitives though. Arguably boxed primitives should be deleted from the language, but there doesn't seem to be enough willingness to add a "use strict2" and fix another bunch of issues.
2
1
33
@barelyreaper
No public repo yet, this needs more work. Mainly I'm just trying to not do any unnecessary work. In the scenario where there's a hot cache you basically know everything already, so there's almost nothing to do, so it should go at the speed of light just by default.
1
0
33
Bare-bones and hacky implementation, but this is near-optimal virtualized list rendering on the web, while scrolling no nodes are created, destroyed or attached/detached/moved in the DOM, and no VDOMs are diffed. There's barely anything happening, just pure performance 🤣
4
1
31
There's a nice detail in
@preactjs
' signals that I didn't realize: how signals works, with the getter/setter "value" property, seems the most memory efficient implementation possible.
2
2
32
React basically trades efficiency for "convenience" 🤔
Do you want to write code quickly that probably works and that it doesn't have awful performance? Go with React. Do you want to be arguably more careful with your code, but have more efficient code? Don't go with React.
11
4
32
If there was a backdoor hidden behind something taking 500ms longer than necessary imagine what "npm install" is doing 😂
1
3
29
New month, new debugging tool: a global switch to make animations run in slow-motion. Implemented perfectly, thanks to access to Electron's privileged APIs:
- It works with third-party components too.
- It takes effect immediately.
Do you like the "slow-motion enabled" icon? 🤣
1
2
30
It'd be interesting if there was a flag in
@nodejs
for disabling async hooks completely, or even better if they were near 0 cost until you actually used them, because in a Promise-heavy profile trace there's this stuff that seems related to async hooks all over the place.
5
4
29
Switching to a reactive framework from (P)react it feels so nice to just delete things, like refs, useCallbacks calls, dependencies arrays, all that nonsense disappears, just like that.
3
1
30
It'd be interesting if Meta explored writing a WebGPU renderer for React 🤔 React's model should be well suited for this, Meta presumably has the resources to take on this task, and WebGPU is low overhead enough and soon to be widely supported.
10
0
29
A before and after for one of my cli apps ().
I find it pretty gratifying when all third-party dependencies you had are deleted, you don't depend on anybody else, and the resulting package is ~7x smaller also. It tastes a bit like freedom, you know?
2
0
30
Maybe null and undefined should be sort of considered iterables in JS 🤔 Currently for convenience this is supported: "{...undefined}", but these aren't: "[...undefined]" and "for(const foo of undefined)". Maybe they should be? Isn't the convenience argument basically identical?
4
4
29
A kinda pretty use case for reactivity:
- I'm drawing a vscode-like minimap.
- Each line has its own effect, so if only it changes I don't have to re-draw the whole thing. Fast & easy.
What's the React equivalent? "Re-draw everything" works only up until perf really matters.
8
2
29
A little bench I just ran for my js-flavored grep alternative: .
With Bun reading files is **so much faster** than Node that the command takes ~75% (~4s) less time. That's huge, it seems within ~2x of ripgrep here, single-threaded.
@jarredsumner
@andymac4182
@bunjavascript
I just upgraded Bun and now it works! The way I'm spawning workers seems to hang the process though, "-j0" to turn on parallelization, this is the cli: .
The difference in I/O performance is immense, in Bun this seems within 2x of ripgrep, single-threaded.
1
0
4
2
3
29