FeedCity

RE: https://fed.brid.gy/r/https://bsky.app/profile/did:plc:cs3zn3kikj5kwzljlvyr55sg/post/3mxfmi3rlvg2z

👀 Ooh, support for `interpolate-size: allow-keywords` and `calc-size()` in Safari Technology Preview 254.

These two allow you to do things like animating elements to `height: auto`.

Check https://developer.chrome.com/docs/css-ui/animate-to-height-auto to get the details.

Today I built `<calc-input>`. It’s a custom input element that accepts mathematical formulas — such as 2 + 3 or (2 + 3) * 4 — and automatically toggles between showing the formula on focus and the calculated result on blur.

→ https://brm.us/calc-input

Continuing my streak of small form-related Custom Elements (like <rich-input>), I built <calc-input>. It’s a custom input element that accepts mathematical formulas — such as 2 + 3 or (2 + 3) * 4 — and automatically toggles between showing the formula on focus and the calculated result on blur.

Continuing my streak of small form-related Custom Elements (like <rich-input>), I built <calc-input>. It’s a custom input element that accepts mathematical formulas — such as 2 + 3 or (2 + 3) * 4 — and automatically toggles between showing the formula on focus and the calculated result on blur.

Whenever I build a new tool or custom element (like <show-keystrokes> or <rich-input>), I always end up doing the same manual dance: checking if the package name is still free on NPM and if the matching <name>.netlify.app subdomain is still unclaimed on Netlify. To automate that check, I built caniname.

Whenever I build a new tool or custom element (like <show-keystrokes> or <rich-input>), I always end up doing the same manual dance: checking if the package name is still free on NPM and if the matching <name>.netlify.app subdomain is still unclaimed on Netlify. To automate that check, I built caniname.

Back in late 2024, I started working on a fun end-of-year side project named ie-page-transitions. It”s a CSS + JS library that brings back Microsoft Internet Explorer’s proprietary “Interpage Transitions” to modern browsers, powered by the View Transition API. After sitting unfinished for a while, I finally got all 23 classic effects over the finish line and published the project on page-transitions.style.

Back in late 2024, I started working on a fun end-of-year side project named ie-page-transitions. It”s a CSS + JS library that brings back Microsoft Internet Explorer’s proprietary “Interpage Transitions” to modern browsers, powered by the View Transition API. After sitting unfinished for a while, I finally got all 23 classic effects over the finish line and published the project on page-transitions.style.

If this looks familiar: I first started working on this in 2024 but never got round to finishing the project.

https://front-end.social/@bramus/113668504142777945

(I also mentioned it a few times at conferences)

Thanks to Gemini, I finally managed to implement the remaining effects and got to releasing the 1.0.0 version 😊

Remember Internet Explorer’s “Page Transitions”?

Well, they’re back, thanks to the View Transition API!

→ Blog post: https://brm.us/page-transitions
→ Demo site: https://page-transitions.style/

The project leverages IE’s meta tags so browser support is not limited to Modern Browsers™ but also includes IE 5.5–8.0 😆

After 7.5 months of tweaking, reviewing, and rewriting, the docs for Scroll-Triggered Animations have landed on @mdn (MDN)!

→ https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animation_triggers/Using_scroll-triggered_animations

Congrats and thanks to @chrisdavidmills and @estelle for their hard work and sweating the details on this!

Well well, what do we have here?

Try it Chrome Canary.

#CSS #AnchorPositioning #DevTools

RE: https://mastodon.social/@firefoxwebdevs/117354510309471164

That `overscroll-behavior: chain` is a nice one to complete the set of values for `overscroll-behavior`.

Check it out in https://codepen.io/editor/bramus/pen/01a0c81c-666b-7b74-b099-ffb6a76de6d6 to see how it compares to other values.

Supported in Blink/Chromium and Gecko/Firefox.

With Scroll-Driven Animations announced for Firefox, the time to ramp up your SDA skills is **NOW**

Go check https://scroll-driven-animations.style for a free 10-part video course created by yours truly, as well as a bunch of demos and tools.

And if you are using Chrome: Download the DevTools extension I built to help you debug and understand how these work.

And it is now the best ESC/POS and StarPRNT renderer there is. Probably even better than some printers.

But it will probably be used by just me. Or at most a handful of people.

And that is fine. I love this project.

I generated receipts using a dozen different open-source encoders and test suites of other rendered and compared them manually with the output of dozens of printers. Painstakingly making sure to capture every single quirk and detail...

The result is a renderer that exactly matches a real printer. And it does not just support the code my own projects generate…

And to render receipts, you need a bitmap font at specific sizes. And there wasn't yet one...

So I created a bitmap font editor... I know 🤪

But... what I really wanted is a renderer. For two reasons - some printers only support bitmaps, and I wanted to be able to print on those too.

But I also wanted to have a preview to see how a receipt rendered.

From the moment I've been working on this - 15 years ago - I've always wanted to build a decoder, so that I could inspect what we actually send to the printer... every single command that it receives.