← Feed

Posts

• Post #1804959

  What a week! A fantastic @btconf conference. Great speakers, atmosphere, got to meet so many nice people as well. I hearty recommend this conference! It is the perfect size and the vibe is really something else (In a good way) wasn't able to talk a lot to @marcthiele about it, but I'm sure he got the message from the audience, we loved it. Yesterday I got to top it off with a little presentation at @engkiosk and ended with a nice performance talk by @moonglum and @alaaReuschenba...

• Post #1097689

  So here's a fun one. You know the "hidey-bar" pattern: header hides when you scroll down, reappears when you scroll up? CSS can do that now with scroll-state(scrolled). And scroll-padding makes sure anchor links don't get buried behind the header. Except... clicking an anchor doesn't trigger scroll-state. The header doesn't know you just navigated. scroll-padding reserves space for a header that isn't there. Everything goes out of sync....

• Post #883745

  🚀The new CSS sibling-index() and sibling-count() functions let us create staggered animations, dynamic color palettes, and even complex circular layouts with ease. I wrote about my first experiments with these fantastic new CSS additions. So much fun! ♥️ ✨ https://utilitybend.com/blog/styling-siblings-with-CSS-has-never-been-easier.-Experimenting-with-sibling-count-and-sibling-index

• Post #883743

  🚀As a case study, I tried to recreate the famous Guess Who game with built-in AI and the Prompt API. It was an exciting experience, to say the least. My heart is at CSS & UI, and always will be. However, I do love to experiment with a variety of (web)technologies 😄 Read all about it at Chrome for Developers https://developer.chrome.com/blog/ai-guessing-game

• Post #883741

  🚀 There should be a native way to have more than one thumb on a range slider. For this, I need your help. I created a starting point and would love you all to talk about it and give some feedback. I am not a browser engineer, and my hope is that this gets picked up by people who can help this move forward. It still has a lot of room to grow. Let's slide! 🛝 👍 https://utilitybend.com/blog/a-native-way-of-having-more-than-one-thumb-on-a-range-slider-in-html

• Post #883740

  🚀 I made a holiday wishlist for DevTools in November! Because I can 😀 What's the thing you'd like to see to simplify your CSS/layout debugging? https://utilitybend.com/blog/5-css-debugging-features-i-want-to-see-in-chrome-devtools-holidays-list #Chrome #DevTools #CSS

• Post #883739

  Barbecue, D&D, and UI. This episode is packed with my favourite things. But one thing I'm extremely happy about is that @shoptalkshow talked about <rangegroup> from #openui. Thank you for the nice words as well! It might be a long journey, but every helping hand is welcome :) I'm not a browser engineer, just someone who is sick of seeing hacky, inaccessible solutions for this. We can do better. Watch the episode here: https://www.youtube.com/watch?v=rx...

• Post #883738

  I've been working a bit with Tailwind lately, and without jumping into a rage article, I took some time to gather my thoughts. It's not my favourite tool, but why? Here is an honest article on that: https://utilitybend.com/blog/why-tailwind-is-great-why-you-might-be-missing-out-and-why-it-isnt-for-me

• Post #883737

  🚀❄️ Yep, another "holidays" blog article. As tradition, I always try to create a little "happy holidays" card as well, with something new and shiny in CSS. In the past, I did scroll-driven animations and masks, but this time, the corner-shape property in CSS. Happy Holidays, ya'll 🎆 https://utilitybend.com/blog/css-corner-shape-books-talks-and-happy-holidays

• Post #883736

  🚀 I didn't think I'd start the year with another demo on customizable select, but people should know about the upcoming things. The customizable multiselect might still be a bit further down the road, but the size attribute updates should be shipped with Chrome 145.😍 https://utilitybend.com/blog/an-update-on-customizable-selects-the-multiple-select

• Post #883735

  🚀 Is it scrolled? Is it not? Let's find out with CSS @container scroll-state() queries. In Chrome 144, this has gotten a little update, so I thought it to be a good time to revisit. #CSS has once again gotten the keys to the state-machine, and it's fantastic! https://utilitybend.com/blog/is-it-scrolled-is-it-not-lets-find-out-with-css-container-scroll-state-queries

• Post #883733

  @brammm on refactoring with rector!

• Post #883732

  🚀Do we like scroll-driven animations? yes! Do we want scroll-triggered animations? Also yes! Would it be cool to combine them? Ow hell yes! And that's just what I did in this year's Valentine's article, enjoy! ❤️❤️ It's quite lengthy, but also contains some hot tips 🔥 https://utilitybend.com/blog/css-animation-triggers-playing-animations-on-scroll-without-scrubbing-its-a-match

• Post #883731

  🚀 I always talk a big game… “you can do this as a progressive enhancement.” Time to put my money where my mouth is! 💸 In recent months, I’ve updated my site with a range of new features. It is rock-solid across all modern browsers and is finally live! With a story 📖: https://utilitybend.com/blog/putting-my-money-where-my-mouth-is-a-redesign-built-on-progressive-enhancement

• Post #883730

  🚀 A little while ago, I released an article on my blog redesign as a progressive enhancement. A few people DM'd me after that, asking for more info on the architecture. Well, it sure isn't perfect, and I'll surely tinker more on it, but I wrote about how I did the new CSS Architecture 🤓 https://utilitybend.com/blog/under-the-hood-a-closer-look-at-the-css-architecture-behind-the-redesign