jaffathecake

jaffathecake, 25 days ago to random

If the person behind me on this plane pulls my seat any harder, I'll be catapulted into business class. Win fucking win.

jaffathecake, 1 month ago to random

If you want an element to fully contain margins (and floats, remember them?), but you don't want the contents to be clipped, display: flow-root is what you're looking for. https://jsbin.com/hafawud/edit?html,css,output

jaffathecake, 1 month ago to random

We use self-closing syntax in HTML where it doesn't do anything. People see it and assume it does something.

Why do we keep doing this to ourselves?

https://www.reddit.com/r/webdev/comments/1cceb03/i_thought_i_knew_html_until_i_saw_this/

jaffathecake, 1 month ago to random

📝 HTML attributes vs DOM properties.

They're completely different, but often coupled.

Here's the difference, and why it matters: https://jakearchibald.com/2024/attributes-vs-properties/

jaffathecake, 1 month ago to random

🧶 What would it mean to "put React in the browser"?

Can something like element.replaceHTML(html) be added to the platform to perform diffing and update the DOM?

Me and @surma talk it through: https://offthemainthread.tech/episode/putting-react-in-the-browser/

jaffathecake, 1 month ago to random

I asked Suno to create a German industrial song about the second coming of Jesus but this time he's a cucumber.

The chorus has been stuck in my head all week.

https://app.suno.ai/song/1ebf2eed-1161-444f-92cc-1da585f94ed1/

jaffathecake, 2 months ago to random

I get it. I get the whole point of it. But CSS logical properties are so confusing. Even after reading the first two paragraphs of https://developer.mozilla.org/en-US/docs/Web/CSS/block-size I'm left thinking ENOUGH WITH THE FUCKIN RIDDLES.

Ok, so if display: block makes the thing full width, block-size will change the width.

lol no guess again!

jaffathecake, 2 months ago to random

It's such a mess that we still can't use headings in HTML fragments, and have the heading structure be local to that part of the document.

It's so shit that browsers shipped the styling part of <section> + <h1> but not the accessibility part. That was the important bit.

jaffathecake, 2 months ago to random

🔊 Apple is removing web app features from Safari in the EU, rather than allowing other browsers to have those features on iOS.

Here's a new episode of OTMT with all the details, and what you can do about it:

https://offthemainthread.tech/episode/the-apple-pwa-ban/

jaffathecake, 2 months ago to random

I'm currently pushing the idea that our component library's tests should be a separate package (in a monorepo), so we're testing the real built version of the library, and also the package.json exports.

Folks are a little uncomfortable that the component's tests are in a different folder to the implementation.

Is there a solution to this that isn't… very hacky?

jaffathecake, 3 months ago to random

Rather than allow other browser engines to install-to-homescreen on iOS, Apple is removing the feature entirely in the EU.

Some features are tied to install-to-homescreen, such as push messages. Apple is unshipping those for EU users.

We need to act now: https://open-web-advocacy.org/apple-attempts-killing-webapps/

jaffathecake, 3 months ago to random

📝 New post: Handling aspect ratio changes in view transitions.

Lots of tips on customising view transitions, and of course, live demos.

https://jakearchibald.com/2024/view-transitions-handling-aspect-ratio-changes/

jaffathecake, 3 months ago to random

Really sad that the Navigation API isn't being included in interop 2024. This API makes a night-and-day difference to handling navigations. It cannot be polyfilled, and cannot really be used as progressive enhancement. We need it yesterday. https://github.com/web-platform-tests/interop/issues/435#issuecomment-1921896911

View transitions isn't being included either, but I'm less sad about that, because it can be used as progressive enhancement. https://github.com/web-platform-tests/interop/issues/437#issuecomment-1921897450

jaffathecake, 3 months ago to random

This always catches me out:

When specifying grid-template sizes, if values aren't wrapped in minmax(), then they're implicitly minmax(auto, value).

So 1fr is implicitly minmax(auto, 1fr).

If you actually want 1fr, you need to use minmax(0, 1fr).

https://codepen.io/jaffathecake/pen/BabrWqa

jaffathecake, 3 months ago to random

I was delighted to hear the EU managed to lift the browser ban on iOS, but Apple are trying to make it worthless https://open-web-advocacy.org/blog/developers-react-apple-eu-dma-compliance/

jaffathecake, 4 months ago to random

Wait wait wait wait… AV1, the latest and greatest video format, adopted by browsers, does not support an alpha channel??

What???

jaffathecake, 4 months ago to random

📴🧵 OMGOTMT it's a new episode of Off The Main Thread!

In this episode, @surma talks about Bevvy, an ECS game engine written in Rust, then we take a look at TC39 Stage 3 stuff that hasn't yet gone into browsers, and pick some favourites.

https://offthemainthread.tech/episode/tc39-roundup-and-ecs/

jaffathecake, 4 months ago to random

Yay! React 19 will have custom element support! https://github.com/facebook/react/issues/11347#issuecomment-1899140345

jaffathecake, 4 months ago to random

This resonates. Due to changes at the top, Google became a place where you succeeded not by doing the right thing, but by being a business wanker.

https://www.tbray.org/ongoing/When/202x/2024/01/15/Google-2024

jaffathecake, 4 months ago to random

Setting up home audio stuff. It still blows my mind that Google abandoned Chromecast Audio. Didn't even give the home mini an audio out. Madness.

jaffathecake, 4 months ago to random

Catching up on articles from over the holidays. https://developer.chrome.com/blog/css-wrapped-2023 is an excellent round-up of CSS features. Some proper dev-rellin from @Una @bramus and @argyleink

jaffathecake, 4 months ago to random

🔊 New episode of Off The Main Thread!

Me and @DasSurma wonder if build tools are a symptom of a wider problem in web development, or if they're part of the solution.

And what is Bazel, and what makes it different from other build tools?

https://offthemainthread.tech/episode/big-build-bool-bonanza/

jaffathecake, 5 months ago to random

As I was heading to bed, my dad said "remember to brush your teeth". I'm 39.

jaffathecake, 5 months ago to random

Since it's Christmas: CARROT IN A BOX https://youtu.be/emidnnQi-bg?si=zWPieFo5TlQE92DH

(Sorry for the Jimmy Carr link, the other copy of the video is region locked)

jaffathecake, 5 months ago (edited 5 months ago) to random

Safari 17.2 includes linear() - a way to define custom CSS easings, enabling things like bounce and elastic.

Here's a tool to convert JavaScript and SVG curves to this new format https://linear-easing-generator.netlify.app/?codeType=js&code=self.bounce+%3D+function%28pos%29+%7B%0A++const+n1+%3D+7.5625%3B%0A++const+d1+%3D+2.75%3B%0A%0A++if+%28pos+%3C+1+%2F+d1%29+%7B%0A++++return+n1+