Max Duval
@mxdvl.com
Digital Toolmaker — I love me an SVG.
Web Tech Lead & Data Viz @ Hometrack
he/him il/lui
(parfois j’écris en Français…)
Web Tech Lead & Data Viz @ Hometrack
he/him il/lui
(parfois j’écris en Français…)
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?
2. See attached video on the right side — maybe a stroke-dasharray / -dashoffset issue?
November 5, 2025 at 11:31 PM
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?
2. See attached video on the right side — maybe a stroke-dasharray / -dashoffset issue?
August 22, 2025 at 8:11 AM
So silly it won’t allow to post even a mere 249 characters…
August 8, 2025 at 9:37 PM
So silly it won’t allow to post even a mere 249 characters…
It is indeed a limitation of TypeScript’s static analysis…
I’ve found more often than not the benefits of being able to know exactly which type of element I’m getting, which attribute it may contain and direct links to MDN worth the cost of a small `instanceof HTMLAnchorElement`
I’ve found more often than not the benefits of being able to know exactly which type of element I’m getting, which attribute it may contain and direct links to MDN worth the cost of a small `instanceof HTMLAnchorElement`
![Screenshot of TypeScript’s type information for HTMLAnchorElement.href:
Returns the hyperlink’s URL.
Can be set, to change the URL.
MDN Reference
Full code snippet:
for (const email of document.querySelectorAll('a[href*="mailto:"]')) {
if (!(email instanceof HTMLAnchorElement)) continue;
const button = document.createElement("button");
button.classList.add("copy");
button.innerText = "Copy";
/** @type {number | undefined} */
let timeout;
button.addEventListener("click", () => {
navigator.clipboard.writeText(email.href.replace("mailto:", ""));
button.innerText = "Copied";
clearTimeout(timeout);
timeout = setTimeout(() => button.innerText = "Copy", 3600);
});
email.insertAdjacentElement("afterend", button);
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:ragnyp2umnktcv2krif4lhvs/bafkreihpk62cvnd3e6ki7ldcyrntreggcse6bj7pvpqm7huo6brt3qdd7e@jpeg)
July 16, 2025 at 4:08 PM
It is indeed a limitation of TypeScript’s static analysis…
I’ve found more often than not the benefits of being able to know exactly which type of element I’m getting, which attribute it may contain and direct links to MDN worth the cost of a small `instanceof HTMLAnchorElement`
I’ve found more often than not the benefits of being able to know exactly which type of element I’m getting, which attribute it may contain and direct links to MDN worth the cost of a small `instanceof HTMLAnchorElement`
Saturday Parkrun iOS tip: you can create a shortcut to display a QR code for your athlete’s number, then add it to your lock or home screen.
Here’s mine, for example – in French:
Here’s mine, for example – in French:
June 14, 2025 at 11:56 AM
Saturday Parkrun iOS tip: you can create a shortcut to display a QR code for your athlete’s number, then add it to your lock or home screen.
Here’s mine, for example – in French:
Here’s mine, for example – in French:
Finally got the gingerbread reindeeno sticker! I think that’s as far as I’ll go this year…
mxdvl--aoc-2024.deno.dev/aoc/2024/day...
mxdvl--aoc-2024.deno.dev/aoc/2024/day...
December 16, 2024 at 2:44 PM
Finally got the gingerbread reindeeno sticker! I think that’s as far as I’ll go this year…
mxdvl--aoc-2024.deno.dev/aoc/2024/day...
mxdvl--aoc-2024.deno.dev/aoc/2024/day...
December 10, 2024 at 7:19 AM
Making a CSS only slideshow has a lot of moving parts — it helps to visualise layers: https://svelte.dev/repl/20177b676e9d4f3893b85ce0608b8d16?version=4.2.0
August 12, 2023 at 2:11 PM
Making a CSS only slideshow has a lot of moving parts — it helps to visualise layers: https://svelte.dev/repl/20177b676e9d4f3893b85ce0608b8d16?version=4.2.0