Mood musiccloud.io/sCfKxgxG

Saturday morning tunes musiccloud.io/uBBtInY7

A little glimpses of Patches.

What do you want us to work on in 2027? Here's a web app where you can rank the Interop proposals you care about, giving us data we can use to prioritise feature development. interop-rank.fxdx.dev

Interop Feature Ranking

Rank the web platform features you care most about

interop-rank.fxdx.dev

Kookaburra Call

Please test your pages with the browser forcing a dark theme... ... because some of us are vampires and sure to enable it when we find it... and then come across plenty that look atrocious this way. (yes, just handling dark mode suffices in a lot of cases... but not always)

If you're supporting me on Ko-fi or Patreon, then first of all thank you! And second, I've been posting stuff lately 😼 ❇️ ko-fi.com/anatudor ❇️ www.patreon.com/c/anatudor #code #Maths #3D

Support Ana Tudor

If you like my work and you want me to be able to continue coding, please consider supporting it.

ko-fi.com

So this came on www.youtube.com/watch?v=q_Qw... (the last time I saw them, heard them soundchecking this at noon while waiting outside the venue... and then they didn't play it... fingers crossed for 2027)

Die Toten Hosen - Ein guter Tag zum Fliegen, Pushed Again - Live @ Rock am Ring 2015

YouTube video by NPKV41

youtube.com

If you also want borders, I made another (hopefully accessible) tabs pattern demo using #SVG #filter and #CSS #subgrid to answer another reddit question last year www.reddit.com/r/css/commen... No extra elements or pseudos to create corner roundings. Works with unknown tab content length.

How would you create this in such a way that its individual parts can be scaled independently, including via CSS animations/ transitions? Here's my take on it www.reddit.com/r/css/commen...

There's a certain irony in the fact that the "where do you reside" dropdown is broken. I can see the options in DevTools, but clicking on that select doesn't open it... ¯\_(ツ)_/¯

Patrick Brosset@patrickbrosset.com · 6d ago

The State of HTML 2026 survey is now open! survey.devographics.com/en-US/survey...

Has anyone else encountered this? ¯\_(ツ)_/¯

Current status musiccloud.io/rRqyiuu4

Realistic grainy shadows on @codepen.io codepen.io/thebabydino/... Inspired by codepen.io/gayane-gaspa... except not setting each image as a div background, then duplicate it on a pseudo. Instead, I'm using a single img elem with an alt. More maintainable, accessible + get right click img menu.

#tinySVGtips: If you want a circle in the middle of your #SVG, choose your `viewBox` wisely. Both options below produce the same visual result, but the second one makes it easier to use the circle later. To animate transform (make it pulse), to build (animated) pie/ 🍩 charts and so on.

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

Simplest #SVG 🍩 chart with 3 equal slices! ✨ no char vomit in path data ✨ easy to understand and tweak ✨ minimal code, fits in a social media post Because somebody asked for it - see my solution with a detailed explanation of the how behind www.reddit.com/r/svg/commen...

blog.arxiv.org/2026/10/01/u... 👀

Fair Moderation, Equitable Access, and AI: arXiv’s Updated Rate Limit Policy

arXiv, and the scientific community at large, are facing a watershed moment. Scholarly publishing is currently changing at a rapid pace, and we are seeing a…

blog.arxiv.org

Gemini will summon Satan before it creates a pentagon with a vertex at 6 o'clock.

🎃 🐅 🍂 🐻 🍁 👻

Know the animated 🌈 border + glow effect that's all the rage? It's normally done by adding an opaque cover on top of two 🌈 layers. But what if we wanted a (semi)transparent background within the border? It's possible with pure #CSS! Heavily commented on @codepen.io: codepen.io/thebabydino/...

Slice! is one of my faves this year and my only 2024 demo to get hearted ❤️ 400 times. codepen.io/thebabydino/... Uses absolutely no text duplication whatsoever and no images save for CSS gradients. #SVG filters 🪄 take care of both the slice & offset effect and the texture.

Blast from the past. Because someone hearted this 8+ years old @codepen.io demo: codepen.io/thebabydino/... #CSS

If you're supporting me on Ko-fi or Patreon, then first of all thank you! And second, there's new stuff today... as was yesterday and the day before that... because when I can't find time to post these things, they just add up... ❇️ ko-fi.com/anatudor/posts ❇️ www.patreon.com/cw/anatudor/... #CSS

Support Ana Tudor

If you like my work and you want me to be able to continue coding, please consider supporting it.

ko-fi.com

I’ve been banging the drum about *not* using ARIA menu roles for site navigation for nearly a decade. I’ve just updated my 2017 post with what has become my general point-by-point refutation when I see them proposed: adrianroselli.com/2017/10/dont... #HTML #accessibility #a11y #ARIA

Don’t Use ARIA Menu Roles for Site Nav

Once again, the advice is in the title of the post. But I will ramble anyway since you scrolled this far. First run with the advice, and then review some background on ARIA and how navigation and menu...

adrianroselli.com

Rozi the cheetah purrs 😻 Sound on for beautiful cheetah purrs! Cats can either roar or purr, they can’t do both. Lions & tigers can roar, but they can’t purr. Cheetahs can purr, but they can’t roar.

Simplest sliced text with absolutely no duplication - not in the markup, not in any pseudos. This means it's contenteditable without requiring JS! Live demo on @codepen.io: codepen.io/thebabydino/... #CSS #SVG #filter

Cards with concave rounding on irregular grid codepen.io/thebabydino/... All is responsive. Real transparency for the gaps between cards and buttons. No sharp corners, all rounded. Card shapes adapt to changes in button size and shape - try changing just the font-size of the button elements! #CSS

Same text effect: ✨pure #CSS codepen.io/thebabydino/... ✨with an #SVG filter codepen.io/thebabydino/... Pure CSS version obviously requires a wrapper and if you're thinking why is the SVG version so overly complicated, well... browser bugs. Ironically, not even SVG, but CSS bugs...🪲

Stupid #a11y question: if multiple images form a logo and I wrap these `img` elements in a `div` with `role='img'` and an `aria-label`, do I still need to set an empty `alt` on the `img` elements?

Didn't get to do anything for this week's @codepen.io challenge yet, but here's an older demo: pure #CSS sphere of spheres codepen.io/thebabydino/... #CodePenChallenge Uses the spherical distribution tactic described 👇 then ensure no two spheres intersect. Also: pure CSS #3D shading!

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

Also #tinyCodingTip: sphere surface distribution with polar coordinates! u = rand(0, 1) v = rand(0, 1) ❌ DON'T (pole clusters) θ = 2·π·u φ = v·π - π/2 ✅ DO θ = 2·π·u φ = acos(2·v - 1) - π/2 ➞x,y,z x = r·cos(φ)·sin(θ) y = r·sin(φ) z = r·cos(φ)·cos(θ) In pure CSS 😼 https://cdpn.io/yLzxdjj

Video fill text on @codepen.io codepen.io/thebabydino/... Wraps naturally, is selectable, easily stylable from the #CSS. May have anything around text: an interactive canvas, another vid. Gets play button for vid if browser blocks autoplay/ prefers-reduced-data/ motion. Paused if outside viewport.