Author | Lightnews

Max Duval @mxdvl.com · 1d

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

Accessibility | The Guardian

Latest news, sport, business, comment, analysis and reviews from the Guardian, the world's leading liberal voice

www.theguardian.com

1

Max Duval @mxdvl.com · 1d

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?

1 1

Max Duval @mxdvl.com · 1d

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?

2 1

Max Duval @mxdvl.com · 3d

Il suffisait de Louvrir!

14

Max Duval @mxdvl.com · 4d

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

1 2 14

Max Duval @mxdvl.com · 4d

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?...

Why Racing Games Feel Slow

YouTube video by MuYe

youtu.be

1

Max Duval @mxdvl.com · 22d

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...

feat: smooth transitions · mxdvl/immutability@1303b9f

as they are supported in all major browsers as of yesterday

github.com

Max Duval @mxdvl.com · 23d

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

Rendering Lists – React

The library for web and native user interfaces

react.dev

2

Max Duval @mxdvl.com · 23d

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.

1 1

Max Duval @mxdvl.com · 23d

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…

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...

www.joshwcomeau.com

2 3

Max Duval @mxdvl.com · 23d

An absolute beauty of an API — so chuffed to see it land in Firefox!

Astro @astro.build · 23d

Happy "View Transitions Level 1 support in all major browsers" Day! 🎉

With Firefox 144 now stable, everyone gets beautiful transitions with Astro ClientRouter

Learn how: docs.astro.build/en/guides/vi...

1 5

Reposted by Max Duval

firefoxdevtools.bsky.social @firefoxdevtools.bsky.social · 28d

As an experiment, we (the Firefox team) wanted to try a new way to get feedback on which Interop proposals matter most.

So, here's a web app where you can rank the proposals you care about, giving us data we can use when reviewing which ones to champion.

interop-rank.jakearchibald.com

Interop Feature Ranking

Rank the web platform features you care most about

interop-rank.jakearchibald.com

19 120 250

Max Duval @mxdvl.com · Sep 28

And the French “cv” one is Cheval-vapeur, which would literally be “horse-steam”

fr.wikipedia.org/wiki/Cheval-...

Cheval-vapeur — Wikipédia

fr.wikipedia.org

2

Max Duval @mxdvl.com · Sep 2

Turns out it’s improper to nestle with you colleagues

2

Max Duval @mxdvl.com · Aug 26

That cheque would be worth a whooping $1.46

1

Max Duval @mxdvl.com · Aug 25

From the company that brought you the checkbox for “do no allow bypassing the above settings” 🙃

github.com/orgs/communi...

Clarify wording of branch protection setting · community · Discussion #50256

Select Topic Area Product Feedback Body The use of negation creates unnecessary cognitive load on one of the branch protection setting checkboxes: “Do not allow bypassing the above settings”. Align...

github.com

1

Max Duval @mxdvl.com · Aug 23

Surprised by the “org” abbreviation, I must add… macwright.com/2021/02/17/t... 😜

Picking better names for variables, functions, and projects

Picking a better name than "thing"

macwright.com

Max Duval @mxdvl.com · Aug 23

const { org, members } = await getOrganisation(name)
.then(async org => ({ org, members: await getMembers(org['id']) }))

1

Max Duval @mxdvl.com · Aug 23

I bet I could build a website for that…

2

Max Duval @mxdvl.com · Aug 22

e.g. from Mathieu’s tool’s banana:

mxdvl.deno.dev/tools/svg?d=...

a screenshot showing the link between an SVG representation of a banana and the line of code that represent one of the middle segments: c 21 68 -4 242 -204 196

1

Max Duval @mxdvl.com · Aug 22

Seems like there are many of out out there! 😆

www.mxdvl.com/tools/svg

In mine, a highlighted links the segment to a path line, if there consistent formatting – it’s really helped me get better at drawing “by numbers”

MXDVL –

www.mxdvl.com

1

Max Duval @mxdvl.com · Aug 21

Jira is a tool like a half rusty scissor is a tool!

6

Max Duval @mxdvl.com · Aug 20

I’ll admit to being the sort of person that saw that GPT-5 graph with the impossible vertical axis and wondered whether the thickness of the box border should be inside, centred or outside to best convey the relative size of the values…

1

Max Duval @mxdvl.com · Aug 20

👀

Max Duval @mxdvl.com · Aug 18

Yeah at the Guardian they settled on the connected dots version on the web to avoid user agent checking.

github.com/guardian/dot...

dotcom-rendering/dotcom-rendering/src/components/ShareButton.importable.tsx at 155e5bd494cbf0375d777cfac0b39cd509fa2078 · guardian/dotcom-rendering

The Guardian web rendering service (aka DCR/DCAR). Contribute to guardian/dotcom-rendering development by creating an account on GitHub.

github.com

1