@evanw@hachyderm.io
@evanw@hachyderm.io avatar

evanw

@evanw@hachyderm.io

Working on esbuild. Tinkering with peer-to-peer software.

This profile is from a federated server and may be incomplete. Browse more on the original instance.

evanw, to random
@evanw@hachyderm.io avatar

I've been studying algorithms for collaborative text editing recently. The best way for me to understand something complex is to implement it myself, so I made my own simple text editing CRDT. It comes with an interactive demo to show what goes on "under the hood":

https://madebyevan.com/algos/crdt-text-buffer/

The code is small enough to understand (only 500 lines including comments). But the internals use optimized block-based storage similar to Yjs (a popular CRDT text library), so it should be pretty realistic.

evanw, to random
@evanw@hachyderm.io avatar

Made a little parser for Figma's file format: https://madebyevan.com/figma/fig-file-parser/. This isn't intended to be used for automation (there are already other libraries out there for that). Instead it's intended to be used for exploring the underlying file structure. It's interesting to see how some things are represented!

evanw,
@evanw@hachyderm.io avatar

@switz I haven't worked at Figma for quite a while now. But when I was there, it was mainly accessed in C++/WASM and not in JS. The renderer is in C++, so it made sense for the canvas objects to live in C++, so it made sense for kiwi parsing to live in C++.

evanw,
@evanw@hachyderm.io avatar

@switz Generally yes. In C++ using a byte for an enum and a bit for a bool can be done without giving up good developer ergonomics, while in JS those are 32-bit or 64-bit values. Less memory means more performance (better use of cache). You can also use an arena allocators to go faster than a garbage collector if you're clever.

But that only makes sense for large amounts of data, as WASM may be an order of magnitude larger than JS. Turning trivial stuff into WASM may slow it down.

evanw,
@evanw@hachyderm.io avatar

@switz You can do this stuff in JS too. But it starts to look less and less like writing JS and more and more like writing WASM (manually shuffling data in and out of Uint8Arrays) which harms developer ergonomics. For example: https://mbebenita.github.io/LLJS/

evanw, to random
@evanw@hachyderm.io avatar

You can now use modern CSS gradients and esbuild will convert them to legacy gradients for older browsers. This includes non-sRGB colors, interpolation in other color spaces, and alternate hue interpolation modes.

The picture below compares Firefox's rendering of the original CSS (looks incorrect due to Firefox bugs) with esbuild's transformed CSS (looks correct).

Release notes: https://github.com/evanw/esbuild/releases/tag/v0.19.9
Playground demo: https://esbuild.github.io/try/#dAAwLjE5LjkALS1sb2FkZXI9Y3NzIC0tdGFyZ2V0PWZpcmVmb3gxMDAAZGl2IHsKICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoCiAgY29sb3IoZGlzcGxheS1wMyAxIDAgMCksCiAgY29sb3IoZGlzcGxheS1wMyAwIDAuNiAwKSkKfQ
Some visuals are here: https://esbuild.github.io/gradient-tests/

evanw, to random
@evanw@hachyderm.io avatar

The bundle size analyzer on esbuild's website now has a treemap visualization. This should be more familiar for people coming from other similar tools, as well as make better use of large screens.

Website: https://esbuild.github.io/analyze/

evanw, to random
@evanw@hachyderm.io avatar

Parcel's latest release brings a huge speedup on esbuild's benchmark (pictured below). It's wonderful to see such significant performance improvements in our web development tools. A 2x end-to-end speedup is no small feat. Congrats to the Parcel team for the achievement!

More information about Parcel's release: https://mastodon.social/@devongovett/111220049288065502

evanw, to random
@evanw@hachyderm.io avatar

Version 0.18.7 of esbuild supports the "using" declaration feature that will be released in TypeScript 5.2.

Release notes: https://github.com/evanw/esbuild/releases/tag/v0.18.7
More about "using" declarations: https://github.com/microsoft/TypeScript/pull/54505

evanw, to random
@evanw@hachyderm.io avatar

I have a working MVP of a new WebAssembly implementation: https://github.com/evanw/polywasm. It implements WebAssembly in JavaScript (i.e. it's a polyfill for WebAssembly), which allows WebAssembly-based apps to still work even when the browser's WebAssembly implementation has been disabled. They will run much slower of course, but some WebAssembly apps don't require real-time performance.

evanw, to random
@evanw@hachyderm.io avatar

There is now a way to try esbuild live on esbuild's website without installing it: https://esbuild.github.io/try/

In addition to making it easier to evaluate esbuild, this should also make it more efficient to generate esbuild bug reports. For example, you can use it to compare the behavior of different versions of esbuild on the same input. The state of the page is stored in the URL for easy sharing.

evanw, to random
@evanw@hachyderm.io avatar

New favorite life hack: sticking furniture pads on things that lack physical buttons to bring physical buttons back.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • β€’
  • anitta
  • InstantRegret
  • mdbf
  • ngwrru68w68
  • magazineikmin
  • thenastyranch
  • rosin
  • khanakhh
  • osvaldo12
  • Youngstown
  • slotface
  • Durango
  • kavyap
  • DreamBathrooms
  • JUstTest
  • tacticalgear
  • ethstaker
  • modclub
  • cisconetworking
  • tester
  • GTA5RPClips
  • cubers
  • everett
  • megavids
  • provamag3
  • normalnudes
  • Leos
  • lostlight
  • All magazines
    •