Nick Breaton

@nickbreaton.com

web dev doing web things 👨🏻‍💻 Asheville, NC • Web Eng at Cash App 🌐 https://nickbreaton.com

Okay Effect Atom is freaking 🔥 So many state management solutions out there, but none of them achieve the pit of success for a large team on a non-trivial SPA. Atom feels like it might, but still early days.

✨Heads up! Observables are shipping natively to a browser near you soon! Huge thank you and congrats to @domfarolino.com ❤️ I've helped / worked on / watched this through different standards bodies for more than 10 years now. ☠️ (I'm going to have a lot of work now to adapt RxJS to this 😅)

BildBildBildBild

A strategy I’ve also found useful for aligning form inputs with varying length labels and error messages. Less pretty example:

align fields (subgrid!)

...

codepen.io

Ana Tudor@anatudor.bsky.social · 2y ago

Because this keeps getting asked over and over... subgrid is how you get such cards whose grids align even with varying component heights. www.reddit.com/r/css/commen... Both the card wrapper and the cards get `display: grid` and the rest you can see in the Styles panel in DevTools below. #CSS

Screenshot showing the page with grid overlays. DevTools is open on the right, showing the relevant code.

```
main, article { display: grid }

main { grid-template: repeat(3, max-content)/ repeat(auto-fit, min(35ch, 100%)) }

article {
  grid-row-end: span 3;
  grid-template-rows: subgrid
}
```

Platforms should take inspiration from one another. As a web dev working in SwiftUI, check this out: Here's a navigation transition accomplished by leveraging a combination of withAnimation and .matchedGeometryEffect() to transition between shared objects

Found out today Safari is still capped at 60 fps on high refresh displays. There’s a feature flag to disable the cap, but it’s not on by default.

Hi new web dev followers! Here's the best tweet I've managed in 12 years, just so you know where the ceiling is on this account

A comic. First panel: someone labeled "Designer" passes a note labeled "SVG" to a person labeled "Developer".

Second panel: Developer opens the note to find a long unreadable string starting with "data:image/png"