Blown away by @andremichelle@mastodon.social's openDAW, which runs ENTIRELY in the browser! 🤯
So much thought and attention to detail went into this. And it's all Open Source too!
https://github.com/andremichelle/openDAW
The web is AMAZING 🤩
Remote
Bramus
@bramus@front-end.social
mastodon 4.7.3Chrome Developer Relations at Google (CSS + Web UI). CSSWG Member. PADI Divemaster. Blogs at bram.us. I’m primarily active on 🦋 nowadays.
3084 Followers
297 Following
45 Posts
Joined November 12, 2022
🔗 Blog:
🎮 Playground:
🦋 Bsky:
📍 Location:
Belgium
CSS `light-dark()` is about to support images!
Shipping in Firefox 150. Starting tomorrow, available behind a flag in Chromium 148.
If you’ve ever tried to build a data table with a sticky header and a sticky first column, you know the pain: the reality was that only one of both would stick.
A recent change to CSS fixes this: `position: sticky` now plays nice with _single-axis scrollers_.
Over the past years, I’ve written a bunch of posts and done quite a few experiments with View Transitions, such as optimizing the keyframes (so that they animate on the compositor) or driving a VT by scroll.
I noticed I repeated a lot of code while creating all those … so I bundled that all up in a package for you to use as well.
Optimizing the keyframes or a VT for example now is just a one-liner: optimize(transition);
RE: @webstandards@mastodon.world
You can find the slides of my #SotB2026 talk on my blog: https://www.bram.us/2026/02/28/anchors-aweigh-sotb2026/
At #Fronteers #DarkMode, @utilitybend@front-end.social proposed the HTML Element which he has been working on at Open UI.
It unlocks the multi-handle range slider, a pattern you might have already used when picking a price-range on a travel website.
- Explainer: https://open-ui.org/components/enhanced-range-input.explainer/
- Demos: https://brechtdr.github.io/enhanced-range-slider-poc/
- Feedback Form: https://docs.google.com/forms/d/e/1FAIpQLSdKgYidAF097VQQ1OCr3TqHOV-reS4mRDgCNFUgB_nKZt0o1Q/viewform?pli=1
RE: @leaverou@front-end.social
Before you blindly say 100px–200px–300px, hear me out: https://github.com/LeaVerou/blog/discussions/137#discussioncomment-16340589
(And if you really want it to be 100px–200px–300px then it’s simple: don’t type the --arg)
Can you Syntax Highlight a code snippet on the web without overloading the DOM with a ton of `` elements wrapped around the tokens?
Thanks to the Custom Highlight API, you can!
More details on the “parsing would be hard” part in https://www.bram.us/2026/03/19/more-easy-light-dark-mode-switching-light-dark-is-about-to-support-images/ ;)
Replying to
@leaverou@front-end.social To those finding this thread: before you vote 100-200-300, hear me out: https://github.com/LeaVerou/blog/discussions/137#discussioncomment-16340589
Thanks :)
Replying to
UPDATE: Now look what we have here … a Chrome Extension that does the job!
Review is still pending, so you can’t find it on the Chrome Web Store just yet. Maybe later today, or maybe tomorrow … no one really knows.
The source code is publicly available, so you can clone it and load it unpacked if you want: https://github.com/bramus/mastodon-view-profile
RE: @heypresents@mastodon.world
Come see me speak at All Day Hey! 2026 on May 7 later this year, where I will be bending the View Transition API in all sorts of unconventional ways.
Replying to
@AmeliaBR@front-end.social @leaverou@front-end.social That is already possible with the current syntax. See https://github.com/LeaVerou/blog/discussions/137#discussioncomment-16340589 for details :)
Replying to
@jimniels I was just gonna reply: tell me you are using Apple Music without telling me 😅
Put your #CSS calc() hat on because sin(), cos(), tan(), and friends are available in Chrome 111!
Now supported across all major browser engines 🎉
Replying to
@btconf Aw, thanks for the kind words there, Marc 🥰
And yes, it was weirdly a very long time before our paths actively crossed. I’m happy I got my calendar sorted this year and am very excited to be joining BT for the very first time — it’s been long overdue!
Replying to
@brad_frost No worries! Of all people I'd like to be mistaken with, it'd be @hdv — such a great guy! 🙇♂️
Replying to
Updating Firefox Nightly today be like ❌ → ✅
(Demo page used: https://codepen.io/bramus/pen/poWJXGY)
Some more prototyping fun: this time an extension to visualize the Containing Block of an element.
It shows the element and its containing block (an element, the Viewport, or the ICB) along with some base info.
Get it here: https://chromewebstore.google.com/detail/devtools-containing-block/cfhjohibdfclahlfljknkjmcdkfkcflj
What other info would you like to see in a feature like this?
(The heavy lifting to identify the containing block is done by the https://github.com/bramus/get-containing-block package which I also created for this)
Replying to
@brad_frost If you are familiar with Booka Shade’s “Movements” from 2006 … I’d watch that 😉
Good CTA by @kizu@front-end.social: (If you have time), get your hands dirty with experimental web platform features and try to bend them in all sorts of ways … and then share your feedback and findings (blog post, CSSWG issues, browser bugs, …).
Together we can make the web better.
Replying to
@ricvolpe@macaw.social @thomasreggi@indieweb.social @ampersarnie@mastodon.social @elizabeth@tech.lgbt @jlarky@fosstodon.org PR to include this metatag on Mastodon statuses: https://github.com/mastodon/mastodon/pull/21423
Also working on a revision of the bookmarklet so that it falls back to extracting the info from elsewhere in case the meta tag isn’t present.
Replying to
@drwpow@hachyderm.io It’s really weird. Had issues viewing 3 accounts from mastodon.social on my host, while others from that server worked fine.
Refreshing didn’t help either, DevTools kept showing a 404 getting returned from the endpoint.
Only after manually searching for those account, it found it.
This leaves me to assume that there’s a cache on the server that’s intervening.
A cache is fine, yet it shouldn’t store the result as “not found” in case the other server doesn’t respond in a timely manner.
Replying to
@SaschaFreud@mas.to @drwpow@hachyderm.io that's not the problem that this bookmarklet/extension is solving.
What is does solve is viewing a profile on another instance and then hitting follow. It won't work as you must do that on the instance that hosts your account.
This tool solves this by rewriting the profile URL so that it is served from your account's instance, so you can immediately hit follow without needing to manually copy-paste-search usernames.
Replying to
@mmasnick@mastodon.social As mentioned review is still pending. After approval - which is hopefully soon - the link will work :)
Replying to
@mattjbones@mastodon.social @ricvolpe@macaw.social Updated my bookmarklet. It now handles profile pages, profile pages that have moved to a different server, and status pages.
https://gist.github.com/bramus/d8bce55dab1881cde18aa2169c66ac33
Replying to
@ricvolpe@macaw.social @thomasreggi@indieweb.social @ampersarnie@mastodon.social @elizabeth@tech.lgbt @jlarky@fosstodon.org Updated my bookmarklet to cater for more scenarios.
It now handles profile pages, profile pages that have moved to a different server, and status pages.
https://gist.github.com/bramus/d8bce55dab1881cde18aa2169c66ac33
Feedback welcome :)
Replying to
Replying to
@thomasreggi@indieweb.social @ampersarnie@mastodon.social @ricvolpe@macaw.social @elizabeth@tech.lgbt @jlarky@fosstodon.org You need to adjust a value in the bookmarklet before you can use it on your masto host.
It's currently configured to work with front-end.social, which I am on.
Replying to
@ricvolpe@macaw.social @thomasreggi@indieweb.social @ampersarnie@mastodon.social @elizabeth@tech.lgbt @jlarky@fosstodon.org Ah I see. You need to visit a profile page, not a post detail page. Will look into it …
Replying to
@ampersarnie@mastodon.social @jlarky@fosstodon.org @elizabeth@tech.lgbt @thomasreggi@indieweb.social Nice!
One area where my bookmarklet differs from those other ones, is that mine does not rely on URL parsing and therefore plays nice with mastodon hosts that are served from a subdomain.
(In Mastodon config terms: LOCAL_DOMAIN vs WEB_DOMAIN – https://docs.joinmastodon.org/admin/config/#federation)
Replying to
@ricvolpe@macaw.social @mattjbones@mastodon.social Do you have an example profile URL page where it doesn’t work?
Replying to
@Chris https://scroll-driven-animations.style is the place to be. Every demo on the site has an info button with details explaining how it was built.
Also features a free 10-part video course and a DevTools extension for easy debugging.
I believe that should get you started 🙂
Replying to
@nachtfunke@indieweb.social @leaverou@front-end.social Because the function says `--arg` should be a ``, it will compute the value (similar to registered custom props). So where you `@apply` the mixin, it will take the CQ units from that element.
(If you don’t want that: don’t type the `--arg`. It’s a simple as that.)