Max Duval

“Mid size city with downtown by a river”

Avec plaisir! To be quite frank I was trying to figure it out for myself, so thanks for coming along for the ride/ramble…

I am in awe at how your articles provide such fertile ground for curiosity to blossom — I always want to probe, explore and make while & after reading them!

Subgrid Paradox ...

It’s maybe most apparent when thinking about columns and when the subgridded element is neither spanning until the end, nor the last in its row: codepen.io/mxdvl/pen/Pw...

I think I get it now: if there were implicit tracks, that would inherently mean the child element would need to dynamically change how many rows & columns it spans in the parent component, and that becomes impossible to satisfy!

And the spec itself does not explain why “the subgrid does not have implicit grid tracks in the subgridded dimension(s)” www.w3.org/TR/css-grid-2/

Subgrid - CSS | MDN The CSS grid layout module includes a subgrid value for grid-template-columns and grid-template-rows. This guide details what subgrid does and gives some use cases and design patterns that the feature...

Specifically, this is reminiscent of how height works. If all subgrids could contribute to the calculation of auto rows and columns, it would be difficult to assess where they came from. MDN states it’s “as per the spec” but does not explain why… developer.mozilla.org/en-US/docs/W...

The Height Enigma • Josh W. Comeau One of the most perplexing and befuddling things in CSS for me, for many years, was the behaviour of percentage-based heights. Sometimes, seemingly at random, setting <code>height: 100%</code> would h...

There’s this mind-boggling good article on why properties need to either flow up or down the DOM, but not both: www.joshwcomeau.com/css/height-e...

Top-tier content, highly recommend a read as it’s truly one of the most thought expanding CSS article I came across! 😉

“I’m not exactly sure why the typical auto-assignment algorithm doesn’t work with subgrid, but I assume there’s some technical limitation”

As you mention earlier in the article, both the parent and child are grids. If they could both influence each other it could lead to contradictory constraints

🐍 ≫ 🐫

Also the skeleton dance has recently entered public domain!

bsky.app/profile/arch...

Logarithmic scale - Wikipedia

If only there existed a scale that allowed comparison of different datasets… oh wait!

en.wikipedia.org/wiki/Logarit...

Kiddie Text Effect ...

I couldn’t get transitions to work well with it, and only a small subset of styles can be applies, so this “kiddie” version is the best I could come up with – codepen.io/mxdvl/pen/Jo...

CSS custom highlight API - CSS | MDN The CSS custom highlight API module provides a programmatic way to target specific ranges of text defined by range objects, without affecting the underlying DOM structure. The range objects can then b...

Would the CSS highlighting API work for this? Will have a crack at it!

developer.mozilla.org/en-US/docs/W...

It’s such a pretty language, will definitely use for this year’s advent of code

Inspired by @gearsco.de’s talk at #ffconf I finally took @gleam.run for a proper spin and… I love it!

🙆

awaiting pictures of cats and stuff #ffconf

A view of the beach & sea in sunny* Brighton, UK *cloudy, more like

hello @ffconf.org 👋

For example: zod-playground.vercel.app?appdata=N4Ig...

I think it depends how much you’re allowed to modify the Zod schema. Ideally I’d suggest transforming the input so that when trimmed to an empty, it returns undefined or null, and apply the url validation subsequently. Alternatively a union/or could work, or even an optional + catch.

By soliciting feedback, you’ve unlocked… dark mode beta on www.theguardian.com/help/accessi... — just click the button and set your system accordingly

1. Here’s how I avoid a FOUC on my own website: github.com/mxdvl/mxdvl/...
2. See attached video on the right side — maybe a stroke-dasharray / -dashoffset issue?

Really neat for those late night Big O lullabies! 🌑

On iOS Safari, very smol notes:

1. Short initial flicker of light mode
2. Flickering of line ends on the right side
3. Doggos very bright
4. Blue links low contrast
5. Bright light footer

Maybe colour scheme not as welcoming as the light one?

Il suffisait de Louvrir!

Recap: you can use “in lieu of” instead of “instead of” and “instead of” in lieu of “in lieu of”.

YouTube video by MuYe Why Racing Games Feel Slow

The closer you are to objects, the faster they move in your field of view. There are a lot of good YT videos covering racing games, like youtu.be/e9OriySqLjQ?... or youtu.be/e9OriySqLjQ?...

feat: smooth transitions · mxdvl/immutability@1303b9f as they are supported in all major browsers as of yesterday

I did a talk/live demo today at @reactadvanced.gitnation.org on the merits of immutability and couldn’t resist sprinkling this tiny little gem in: github.com/mxdvl/immuta...

Rendering Lists – React The library for web and native user interfaces

The new docs are pretty good: react.dev/learn/render... and I also find some of the educators on YouTube to be pretty good

Also: if your key prop is stable, React will not re-render the component. This can be used to prevent unnecessary re-renders, as long as you have a consistent serialisation.

Why React Re-Renders • Josh W. Comeau In React, we don't update the DOM directly, we tell React what we want the DOM to look like, and React tackles the rest. But how exactly does it do this? In this tutorial, we'll unpack exactly when an...

One of the best resources on the subject is @joshwcomeau.com’s www.joshwcomeau.com/react/why-re...

Using composition is one of the key ways you can prevent re-rendering part of the DOM — note I browsers will re-render any modification to an SVG’s children anyways, even in vanilla JS…