 OK, so I know I promised myself I'd work on side projects today. (And I will.) But ... I got side-tracked and I ended up writing a blog post about the early origins of CSS masonry layout and the web standards process instead 🙂 https://sean.voisen.org/blog/figuring-out-css-masonry-takes-time "Scroll-driven animated card stack with scroll snap events." by Paul Noble Bramus dissected and explained here: https://buff.ly/3C2LF1i I'm excited that we're finally getting a customisable <select> on the web. However, there's one detail of it I'm really not sure about, and I'd like to hear your thoughts. Have your say before it's too late 😀 https://jakearchibald.com/2024/how-should-selectedoption-work/
Show previous comments
@jaffathecake Is <option> continue to be text only? If so, it should be easy to duplicate the text in <selectedoption>. Speak from my brief experience as an implementer, anything resembling <svg:use> opens a rather big can of worms. @jaffathecake I would vote for doing nothing by default, and having the other scenarios solved with js. If you need it to do something advanced then bring a bit of javascript code to do that. It's much better than having to do something weird or performance problematic by default with only a complicated way to prevent it. Thanks to everyone who gave feedback on this. The group resolved on going with the first option in this post: Clone once when the selected option switches, and that's it. A few months ago I published an article about lazygit TUI. Back then I liked the tool a lot, but four months later I can only encourage you one more time to give it a go. I rely on this tool heavily in my day-to-day work, and I use it hundreds of times a day. A massive improvement in a developer's life! https://pawelgrzybek.com/lazygit-the-convenience-of-gui-with-the-power-of-git-cli/ Apple's iOS 18.2 has implemented 6 of OWA's DMA compliance requests but Apple still has a long way to go to fully comply with the DMA and to allow fair and effective competition for the Web. https://open-web-advocacy.org/blog/apple-implements-six-of-owas-dma-compliance-requests/ Know how sometimes the warning emoji ⚠️ renders black and white, and sometimes as a proper colored emoji? In theory, you can control this with the variation selectors `U+FE0E` or `U+FE0F`, but in practice, it often doesn't work. As of Chrome 131, you can now _actually_ control the behavior thanks to the new `font-variant-emoji` CSS property! Here's a demo that shows the effect of `normal` (the current unpredictable default), `emoji`, and `text`: https://font-variant-emoji.glitch.me/ Blink: Intent to Ship: Dialog Toggle Events https://groups.google.com/a/chromium.org/d/msgid/blink-dev/670fea20.2b0a0220.137ef7.0d39.GAE%40google.com So, I guess I now need to add a "don't edit my speaker shot photos with AI without my consent and running the result by me before publishing it first" addition to my speaker conditions?
Show previous comments
 @stephaniewalter yikes, seems like it was just a mistake "I'll use AI to help this photo fit better". I feel like so many people are going to fall into these problems by not realizing the implications. Years ago, long before AI, a publisher decided to edit a book cover photo of mine to make my photo more smiley. So it's not new, but before it was definitely intentional, now your intention might be to create a better crop of the photo, and instead you get this sort of thing. @stephaniewalter maybe “don’t edit at all, here are several formats/sizes so that you won’t”. Better to not have it AI’d regardless of the appropriateness of what you see of the end product. IMHO. Boring Web Development: Web development is boring—or should be more boring. On us tending to celebrate the wrong side of web development. QQ: Which of the following CSS declarations signals “the name is an automatically generated value”? Anonymous poll
Poll
name: auto;
26
63.4%
name: self;
1
2.4%
name: from-element;
4
9.8%
name: auto-id;
41 people voted. 15
36.6%
Voting ended 23 October at 9:35. QQ2: Which of the following CSS declarations signals “the name is derived from the id attribute, falling back an automatically generated value”? (Answer 4 is `first-non-empty(attr(id), auto)` but it wouldn’t fit in the box) @patrickbrosset What can I do to prevent Edge’s Auto Updater from caching these old installs in `~/Library/Application Support/Microsoft/EdgeUpdater/apps`? @bramus @patrickbrosset That's literally why I uninstalled Edge (stable, beta, dev, canary). Can't afford it on my tiny SSD. My full set of notes from the *excellent* 10-part "Unleash the Power of Scroll-Driven Animations" course brought you by @bramus https://css-tricks.com/unleash-the-power-of-scroll-driven-animations/ Ready for tomorrow's #ReactBrussels conference. I'm scheduled at 11am with a talk on View Transitions. Overheard: “Progressive Enhancement becomes a challenge when C-level folks use iPhones and can't see the feature.”
Show previous comments
 @bramus better than the C-level folks I used to work for, who had ancient Androids that needed to have all the features… @bramus Would it be feasible to show them an older phone? Advertise as "this feature means if you have an old cheap car you still get service" and so pay $employer. 🦖 CSS selector structure 🦖 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors/Selector_structure The CSS selector represents a particular pattern of element or elements in a tree structure. The term "selector" can refer to a simple selector, a compound selector, or a complex selector. When included in the :has() pseudo-class as a parameter, these selectors are referred to as relative selectors, representing elements relative to one or more anchor elements. **Why isn't my **`position-try-fallback`** working in small spaces?** Learn from my `anchor()` and `inset-area` mistakes. ⤷ https://nerdy.dev/why-isnt-my-position-try-fallback-working-in-small-spaces New in #ChromeDevTools, create your own track in the performance panel with performance.measure and more! 🐶 @tunetheweb Check out the API & code sample here: https://developer.chrome.com/docs/devtools/performance/extension#code_examples If you are using React, this is a demo: https://github.com/and-oli/corgi-collage-React Animating height with only #CSS: "The tl;dr version: add `interpolate-size: allow-keywords;` to your stylesheet… Then, you can animate the height attribute to auto like we’ve all wanted to for years!" https://gomakethings.com/animating-height-with-only-css/ Seriously folks. Have you seen modern HTML and CSS? It rules and HTML/CSS programmers are awesome. |
Gregory's Server
