@sirpepe.bsky.social
Vanilla #webdev, cats, travel. Reading web technology specs and building smol frontend frameworks for fun. Less #JavaScript and fewer nazis plz. Also at @sir_pepe@mastodon.social
10.08.2025 15:40 — 👍 1 🔁 0 💬 0 📌 0
part of my resentment towards LLMs is to do with them crowding out anything else we could be talking about. there are so many things I could be reading to get better at my craft but I'm presented with "you should actually get worse at it on purpose because nothing matters any more"
08.08.2025 19:27 — 👍 632 🔁 122 💬 7 📌 21🧐 TIL: the font shorthand property, even though it CAN NOT set font-size-adjust, implicitly RESETS font-size-adjust anyway
👉 drafts.csswg.org/css-fonts/#f...
#CSS #webdev
TIL: If you ever need to traverse a DOM tree, you don't need to do so manually: NodeIterator is there for you! The API's kinda nuts (the whatToShow property is a bitmask, not that common a construct in #JavaScript), but should work in every browser!
👉 developer.mozilla.org/en-US/docs/W...
#webdev
Turns out this does not work in Safari, which does not respect color-scheme inherited from parent 😭
developer.mozilla.org/en-US/docs/W...
FML.
Demo: codepen.io/SirPepe/pen/...
(the image CDN is a tad slow, be patient)
<object width="32" height="32" data='data:image/svg+xml, <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <foreignObject class="node" x="0" y="0" width="32" height="32"> <body xmlns="http://www.w3.org/1999/xhtml"> <style> :root, body { margin: 0 } </style> <picture> <source srcset="http://127.0.0.1:5500/dark.png" media="(prefers-color-scheme: dark)" /> <img src="http://127.0.0.1:5500/light.png" /> </picture> </body> </foreignObject> </svg>' ></object>
... but not if you use <object> apparently! There it is, <picture> respecting color-scheme 🥳
#SVG #CSS #webdev
<img src='data:image/svg+xml, <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <foreignObject class="node" x="0" y="0" width="32" height="32"> <body xmlns="http://www.w3.org/1999/xhtml"> <style> :root, body { margin: 0 } </style> <picture> <source srcset="http://127.0.0.1:5500/dark.png" media="(prefers-color-scheme: dark)" /> <img src="http://127.0.0.1:5500/light.png" /> </picture> </body> </foreignObject> </svg>' />
Oh, it DOES work when the SVG is not embedded in the document! Only remaining problem: browsers refuse to download the external rsources...
#SVG #CSS #webdev
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500" style="color-scheme: dark"> <foreignObject class="node" x="0" y="0" width="200" height="300"> <body xmlns="http://www.w3.org/1999/xhtml"> <!-- Respects style="color-scheme: dark" --> <style> @media (prefers-color-scheme: dark) { .foo { color: red } } </style> <p class="foo">Text</p> <!-- Ignores style="color-scheme: dark" --> <picture> <source srcset="./dark.png" media="(prefers-color-scheme: dark)" /> <source srcset="./light.png" media="(prefers-color-scheme: light)" /> <img src="./light.png" alt="" /> </picture> </body> </foreignObject> </svg>
How frustrating: <foreignObject> in #SVG in #HTML inherits the parent's color-scheme settings... but <source> in <picture> ignores it anyway 😭
developer.mozilla.org/en-US/docs/W...
#webdev
comptime.ts enables compile-time evaluation of expressions marked with comptime
👉 comptime.js.org
#typescript #webdev
🤯 TIL: there is a #JavaScript equivalent to #CSS support queries; a static method on the global CSS object!
👉 developer.mozilla.org/en-US/docs/W...
#webdev
I must be doing something wrong then: codepen.io/SirPepe/pen/...
06.08.2025 15:10 — 👍 0 🔁 0 💬 2 📌 0This is obviously egregious misinformation. A brief look at the specifications or a tiny experiment could easily have told you that this is entirely wrong. Delete your post.
06.08.2025 14:58 — 👍 1 🔁 0 💬 1 📌 0😱 Today I realized: unconditionally setting the display property in a :host rule overrides the effect of the global hidden (developer.mozilla.org/en-US/docs/W...) attribute. This is... bad!
#webdev #webcomponents #JavaScript
WHATWG asks: "Should we remove XSLT from the web platform?"
👉 github.com/whatwg/html/...
#XML heads, make your voices heard!
#webdev
I must not rewrite the state management. Rewriting state management is the mind-killer. Rewriting state management is the little-death that brings total obliteration to side projects.
#webdev
WHATWG asks: "Should we remove XSLT from the web platform?"
👉 github.com/whatwg/html/...
#XML heads, make your voices heard!
#webdev
TIL: If you ever need to traverse a DOM tree, you don't need to do so manually: NodeIterator is there for you! The API's kinda nuts (the whatToShow property is a bitmask, not that common a construct in #JavaScript), but should work in every browser!
👉 developer.mozilla.org/en-US/docs/W...
#webdev
Code.Movie 0.0.32 adds support for #PHP!
👉 code.movie/blog/php-sup...
Also included: out-of-bounds checks for decorations, improved animation heuristics for #JavaScript and #TypeScript, and full support for @scope rules in #CSS
Code.Movie 0.0.32 adds support for #PHP!
👉 code.movie/blog/php-sup...
Also included: out-of-bounds checks for decorations, improved animation heuristics for #JavaScript and #TypeScript, and full support for @scope rules in #CSS
🤯 TIL: there is a #JavaScript equivalent to #CSS support queries; a static method on the global CSS object!
👉 developer.mozilla.org/en-US/docs/W...
#webdev
"We propose new HTML Canvas APIs for rendering HTML content into the canvas for Canvas 2D and WebGL."
👉 github.com/WICG/html-in...
#webdev
I'm no slouch when it comes to writing bad documentation, but BunnyCDN is the GOAT of incomprehensibility.
01.08.2025 09:42 — 👍 1 🔁 0 💬 0 📌 0
News from Code.Movie: Improved animation heuristics in version 0.0.31
👉 code.movie/blog/improve...
TLDR: The animation heuristics got better, at least for some corner cases. Also this version has been released for over a month, but I have had no time to write about it 🤷
Nope, no productive work for me today github.com/parcel-bundl... 🥴
Build tools: not even once! Modern #webdev is a con.
News from Code.Movie: Improved animation heuristics in version 0.0.31
👉 code.movie/blog/improve...
TLDR: The animation heuristics got better, at least for some corner cases. Also this version has been released for over a month, but I have had no time to write about it 🤷
There's my bug report: github.com/parcel-bundl...
Turns out that when #CSS or #JavaScript syntax gets more complex, minifiers have a hard time keeping up. Surprise!
Just uninstall your minifiers. Remember: removing the source of a problem is always more efficient than building a solution.
#webdev
I love debugging #CSS minifiers actually 🤬
Hot take: minifying source code (be that #CSS or #JavaScript) is obsolete bullshit anyway. GZIP (or whatever) on the server is enough and saves you a bunch of dependencies. And could have saved my afternoon.
#webdev
Pro tip: "it's supposed to work like this" does not mean it's not bad. ☝️
28.07.2025 10:52 — 👍 1 🔁 0 💬 0 📌 0Just had to unfollow someone who I have really admired for over 20 years over their glib rejection of valid AI cricitisms. Please, don’t fall prey to the “works for me, what is the problem?” line of argument and believe that washes you clean of the ethical and environmental nightmare.
28.07.2025 06:25 — 👍 10 🔁 1 💬 1 📌 0
