 Looking for a site to use in my https://perfnow.nl/ talk. What I need is a site with: * A fair number of third-party scripts Firefox released the first prototype of #CSS Masonry back in 2020, as an extension to Grid layout. Now Safari TP has it as well, while Chrome is working on an alternate proposal. I've been enjoying the discussions, and the way both proposals have improved because of the debate. But what's the current status, what's next, and what's at stake?  @geoff beat me to the publish button today, but I guess we're all watching the same discussions. 😅 His post on @csstricks is excellent. If you're interested in more, check that one out as well: https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/ “Added support for cross-document view-transitions.” 🤩 Add the following opt-in to your code to get started: ``` Full docs: https://developer.chrome.com/docs/web-platform/view-transitions/cross-document  ✨ New post: Top picks — 2024 September Classic end of the month article with a list of my favourite web dev resources I found in the past month. Also, a solid music recommendation this month. Enjoy! 📝 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again only when scrolling up again. By adding a long transition-delay to a CSS property under certain conditions (which you can do using a Style Query), you can persist its value. 🔗 https://brm.us/scroll-driven-header Demo by @fcalderan.  @bramus @fcalderan I find this to be an anti-pattern for usability. Often times when I'm reading a site that uses this, I feel like I have to fight with the site and produce a scroll pattern "just right" so that I can again access the site header. I wish it would either be sticky or not. @bramus I think I've solved that issue you noticed: I set an higher transition delay for the scroll-delayed property so it's longer just a bit more than the transition duration of the header (probably I updated the demo after your article). Anyway I commented all the CSS code and now it works fine for what I tested so far. 🙂 Don't sleep on `AbortController`: https://kettanaito.com/blog/dont-sleep-on-abort-controller. Very solid post about the versatile ways you can use `AbortController` in JavaScript.
Show previous comments
zsh: I never understood why the default for going back through the history is to keep duplicates. I finally looked for a way to fix that: https://superuser.com/questions/273047/zsh-up-arrow-only-repeats-unique-commands  @rauschma this is a nice feature to pair with context. Sometimes I don't only want to know "What was that NPM script?", but also "What do I usually run before and after it?" HSMW supports it: https://github.com/zdharma-continuum/history-search-multi-word 📝 The CSS Podcast 089: View Transitions Last week I joined my colleagues @argyleink and @Una on the #CSSPodcast to talk about View Transitions. https://www.bram.us/2024/09/26/the-css-podcast-089-view-transitions/ 📝 Observing Style Changes (2024.09.25 @ devs.gent) Today I gave a talk at the September 2024 devs.gent meetup on how to observe and respond to Computed Style Changes. Slides + write-up: https://www.bram.us/2024/09/25/observing-style-changes-2024-09-25-devs-gent/ Transition reveal a password field with #CSS `interpolate-size` and `:has()` New Values and Functions in CSS https://alvaromontoro.com/blog/68062/new-values-and-functions-in-CSS - gob-smacking things coming in CSS, detailed in this v nice article by @alvaromontoro So very, very excited by this! Speculation Rules enabled by default on all Cloudflare free plans!!!: https://blog.cloudflare.com/introducing-speed-brain/ It’s a very conservative setting for now (prefetch and conservative eagerness). And also will reject at Cloudflare’s edge if not in CDN’s cache. So pretty safe as only cached resources. But still a great thing to enable this by default for so many sites!!! @tunetheweb Very cool! Is there enough data around yet, e.g. in CrUX, to say what kind of real-world benefits people are seeing with speculation rules enabled? I guess it's a bit tricky to measure on a big scale given the apples/oranges nature of comparing one set of rules to another. A #CSS-only version of minesweeper for Chrome (but made with sharks 🦈). https://codepen.io/fcalderan/full/dyxPOwV You can arrange the sharks as you prefer, the other cells will update their numbers automa(g)ically. Feature detecting Scroll-Driven Animations with `@supports`: you want to check for `animation-range` too. The problem is that a check for simply `animation-timeline: scroll()` does not exclude Firefox Nightly, which only has a partial SDA implementation. Something to add to your CSS reset from now on: ``` It enables things like transitions from `height: 0` to `height: auto`. https://developer.chrome.com/docs/css-ui/animate-to-height-auto/
Show previous comments
 @bramus Caveats: Chrome 129+ only. Experimental. Not supported by Safari or Firefox. https://caniuse.com/mdn-css_properties_interpolate-size_allow-keywords A common piece of feedback I receive on this one is “it’s Chrome-only, so I won’t use it”. Here’s the kicker: that doesn’t really matter here, as it’s a nice #ProgressiveEnhancement: Browsers without support get the status quo. Browsers with support get the nice transition. At worst you make the experience better in browsers with support. https://developer.chrome.com/docs/css-ui/animate-to-height-auto/ @bramus I've been using the display:grid trick: https://terminal.space/tech/adding-a-sliding-animation-in-2024-why-is-this-so-hard/ Once this proposal gets broad compatibility, it would be a nice addition. a customized `<select>` with: - transitions ⤷ https://nerdy.dev/custom-select-with-transitions-boilerplate  |
Gregory's Server
The site owner would get the following out of the deal:
* Free performance audit with an emphasis on how to speed up third-party scripts
* If the experiments are successful, they can deploy them and speed up their site
* Publicity at the conference and on our blog
* Answers about their site performance and what they can do to improve it (beyond just third-party scripts)
Does anyone have any suggestions on good candidate sites?
The site owner would get the following out of the deal:
* Free performance audit with an emphasis on how to speed up third-party scripts
* If the experiments are successful, they can deploy them and speed up their site
* Publicity at the conference and on our blog
* Answers about their site performance and what they can do to improve it (beyond just third-party scripts)