I turned website loading into music, so you can hear the threads, not just see them. Some sites turn into a great track you can loop and work to. blog.alena.rocks/en/artifacts...
Alёna Batitskaia
@abatickaya.bsky.social
Frontend developer, speaker, writer, team lead Doka.guide, WomenTechmakers Ambassador. Obsessed knitter 🧶 London, UK
Sat there wondering what CSS actually looks like. A night sky, obviously! 634 properties and at-rules turned into stars, spec sections into constellations, and a Milky Way made of vendor prefixes. blog.alena.rocks/en/artifacts...
The CSS Night Sky
612 CSS properties as a star chart: a star’s size is the real share of page loads, the Milky Way is vendor-prefixed properties. Search, constellations by spec area and links to MDN.
blog.alena.rocks
There's only one way trouble starts: a woman with time on her hands. blog.alena.rocks/en/artifacts...
Periodic Table of HTML Elements
All 115 elements of the current HTML specification laid out as a periodic table: search, filters by spec section and links to MDN.
blog.alena.rocks
LUMINANCE is here 🤍 A triangular lace shawl — lace and cable, 175 cm wingspan after blocking. Advanced level, fingering weight. ravelry.com/patterns/library/luminance
Luminance pattern by Alёna Bat
LUMINANCE
ravelry.com
First pattern release — Sylvan Veil: a fern-and-canopy lace wrap in fingering weight 🌿 25% off on Ravelry until 10 June. www.ravelry.com/patterns/lib... #knitting #lace #shawl #knittingpattern #knittersofbluesky
Sylvan Veil pattern by Alёna Bat
LAUNCH SALE — 25% OFF UNTIL JUNE 10, 2026
ravelry.com
Went to a flea market yesterday and somehow gravitated straight to the darkest corner. Now I have the most badass yarn bowl in existence! 🤩
PSA: I knitted something unreasonably beautiful. Thank you for your attention.
Do we really need a framework for every damn project? (Hint: probably not.) 🧵👇
Junior starts work: here's the documentation, here's the code, here's the tasks for the week, and here's a mentor — ask if you need anything. Senior starts work: here's the access. If something breaks, you'll find out first. Oh, and there's no documentation, you'll write it yourself.
👓 <syntax-highlight> element v1.0.0 - A custom element that uses the CSS Custom Highlight API for syntax highlighting. Code highlighting works without modification (no need to wrap each token with a <span> element) 👀 Demo: andreruffert.github.io/syntax-highl... ℹ️ Repo: github.com/andreruffert...
<syntax-highlight> element - Web Component
A <syntax-highlight> web component that uses the CSS Custom Highlight API.
andreruffert.github.io
We’re discussing "beautiful numbers" in chat. Everyone has their own favorites—I love multiples of 5, someone prefers 10, or better yet, 12. But somehow, 207 was unanimously declared *ugly*. Are you the same, or are you normal?
🎉 Introducing my upcoming third course, Whimsical Animations! This course will teach you how to build top-tier animations and interactions using a variety of techniques. ✨ You can join the waitlist on the course’s brand-new site, which is the most ridiculous thing I’ve built in quite some time:
Whimsical Animations
Learn how to create charming interactions and delightful touches using the magic of CSS, JavaScript, SVG, and Canvas. I’m sharing all my tricks in this one!
whimsy.joshwcomeau.com
Every time someone publishes an article about CSS colors mentioning only rgb(), hex notation, and hsl(), an angel loses its wings. Two angels if the article only mentions the comma-notation for rgb() and hsl(). Three angels if the article only mentions the 6-chars hex notation, rgba(), and hsla().
Continuing the letter theme: the pound symbol in the Korolev font is really beautiful. www.devicefonts.co.uk/catalogue/ko...
Just swapped my code editor font to Martian Mono—never going back. 🚀
A quick reminder: Martian Mono 1.1, now with coding ligatures, is out! Grab it for free on GitHub or install via Homebrew.
Today I learnt about the existence of branded types in TS. Looks useful 👍 www.learningtypescript.com/articles/bra...
Branded Types | Learning TypeScript
How the concept of branded types allows describing primitives more precisely than TypeScript normally allows.
learningtypescript.com
CSS Weekly #605 🚀 Optimizing The Critical Rendering Path 😶🌫️ Focus by Negation Effect 🔎 Dynamic Focus Zoom Effect 🌄 Favicon & Gif in 2025 Featuring @mattzeunert.com, @kevinpowell.co, @en.sitnik.ru, @ryantrimble.com, @geoffreygraham.bsky.social, @tahazsh.bsky.social, @jhey.dev. cssw.io/issue-605
CSS Weekly Issue #605
Find out how to optimize the Critical Rendering Path, how to create cool-looking CSS effects, how to work with favicons and animated images in 2025, and more.
cssw.io
If your website isn't aiming for mega creativity, please don’t use a custom cursor! Where’s the "tip" of this heart? With a regular arrow, it's obvious. But this? 🤨
Mama said I'm a software developer 😎 Tired of forgetting about npm run dev and it eating up my memory overnight. So I wrote a little script that checks if the editor window or localhost is open, and if not, shuts down the server after 10 minutes. Feeling proud of myself! 🙌
> Bugs in code behave just like those in real life: they live in the darkest, dirtiest places in the code… Immediately imagine dark corners of my codebase. And the funniest that I know exactly where they are! 😆 refactoring.guru/refactoring/...
[ 🔥 VS Code Quick Tip ] Did you know that you can click on breadcrumbs in @vscode.dev and quickly navigate between folders, files, and even symbols?
Think about this before you sleep tonight. We’re all young and full of energy now, but that won’t always be the case.
Am I the only one tired of AI everywhere? They even brought it into dev tools…
The interviewer didn’t show up for the interview. That’s a first! =)
"Imposible HTML & CSS" tread Start here → x.com/ABatickaya/s... Buttons are still the hardest part of UI Netflix
Blocking first sweater not for myself, but for a friend. So excited and a bit worried about their reaction! 😅