references for the curious:
Uint32Array trick from 2011, still holds up:
hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/
canvas reuse patterns:
web.dev/articles/canvas-performance
willReadFrequently for getImageData:
schiener.io/2024-08-02/canvas-willreadfrequently
![for (let i = 0; i < pixelCount; i++) {
const pixel = data32[i]!;
// unpack RGBA from Uint32Array (little-endian)
const a = pixel >>> 24;
if (a <= contrastThreshold) continue;
const r = pixel & 0xff;
const g = (pixel >>> 8) & 0xff;
const b = (pixel >>> 16) & 0xff;
// squared euclidean distance from white
const distSq = (r - 255) ** 2 + (g - 255) ** 2 + (b - 255) ** 2;
if (distSq < contrastDistanceSq) continue;
// recover x,y from flat index
const x = i % sw;
const y = (i - x) / sw;
// accumulate weighted visual center
totalWeight += distSq * a;
weightedX += (x + 0.5) * distSq * a;
weightedY += (y + 0.5) * distSq * a;](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:7ajfpfi33pcwwq3i7xc7ova6/bafkreiaejfghmeqoxttbsmy3nr6i2ahq6svbgysmkug4342ppnynwawnee@jpeg)
for (let i = 0; i < pixelCount; i++) { const pixel = data32[i]!; // unpack RGBA from Uint32Array (little-endian) const a = pixel >>> 24; if (a <= contrastThreshold) continue; const r = pixel & 0xff; const g = (pixel >>> 8) & 0xff; const b = (pixel >>> 16) & 0xff; // squared euclidean distance from white const distSq = (r - 255) ** 2 + (g - 255) ** 2 + (b - 255) ** 2; if (distSq < contrastDistanceSq) continue; // recover x,y from flat index const x = i % sw; const y = (i - x) / sw; // accumulate weighted visual center totalWeight += distSq * a; weightedX += (x + 0.5) * distSq * a; weightedY += (y + 0.5) * distSq * a;
i collapsed it into 1 pass over a Uint32Array, downsampled to ~45x45, reused canvases at module level, and added caching so changing baseSize/scaleFactor doesn’t re-scan
content detection: 1.4ms -> 37us per logo (38x)
full mount: 29ms -> 828us for 20 logos (35x)
github.com/sanity-labs/...
it was doing 3 full pixel scans per logo (bbox, visual center, density). each scan made a new canvas, drew full-res, then walked every pixel. 400x400 is 160k pixels, 3x
got asked why react-logo-soup doesn’t just precompute visual weights server-side. fair 🧵
fun css tip from yesterday's react-logo-soup post:
if you render logos as inline-block, the browser treats them like words. which means css text-wrap: balance just works. it distributes logos evenly across lines instead of leaving one sad orphan on the last row
Hey! I wrote something 🖼️ Give it a read!
![Code block with the following code:
```groq
export const headingsProjection = \`
_key,
"title": array::join(children[].text, ""),
"level": select(
style == "h2" => 2,
style == "h3" => 3
)
\`
```](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:7ajfpfi33pcwwq3i7xc7ova6/bafkreianoymfv4444bsz3qaqkp4yssnj6typ5ldydl64kkzpimf545ldvy@jpeg)
Code block with the following code: ```groq export const headingsProjection = \` _key, "title": array::join(children[].text, ""), "level": select( style == "h2" => 2, style == "h3" => 3 ) \` ```
i love groq sm <3
@zed.dev can i get access to your agent beta to test this out in Zed?
been hearing that MCP's are the cool new thing - we got one github.com/sanity-io/sa... @sanity.io
Here it is in real-time (and Dark Mode) 🥰 Coming to a @sanity.io UI near you 🔜
A Git commit message with the text "feat: remove next/image usage"
how to become a millionaire
Zed is beyond goated
npm create sanity@latest -- --template nuotsu/sanitypress
Install SanityPress with the Sanity CLI!
Beautiful!! 🫶
You can now init a new Sanity project with a remote template!
Here are some to get you started:
$ npm create sanity@latest -- --template
sanity-io/sanity-template-astro-clean
sanity-io/sanity-template-nextjs-clean
sanity-io/sanity-template-sveltekit-clean
sanity-io/sanity-template-remix-clean
Really impressed by this stack!
Real-time live previews with localized path names—so cool that this works seamlessly.
@nextjs.org
@sanity.io
next-intl next-intl-docs.vercel.app
Bibbidi-Bobbidi-Boo
My theory is that Black Week was invented by SREs to load balance human spending—turns out spreading chaos across the week is more efficient than handling a single peak day
idk if arc will even get new features anymore, but a @vercel.com integration is all i want for xmas
@hamburger.cloud you are in my thoughts every day as I leave the office.
These are just bad code ligatures tho. Fira's is better imo
❤️❤️❤️
Help us ship more quality bugs 🫶
