Gregory's Server
I'm happy so many people liked my first article!
Now I wrote about why focus outlines deserve better treatment in web design, and how to make them both beautiful and accessible ✍️
|
Have you seen any good articles or projects using Cascade Layers for CSS architecture? Modern CSS seems capable of something similar to BEM without complex tooling, but I’m struggling to make it work. You know, 15-year-old habits won’t let you go easy. I’ll start: https://www.miriamsuzanne.com/2022/09/06/layers/ by @mia https://daverupert.com/2022/08/modern-alternatives-to-bem/ by @davatron5000 https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/ by @5t3ph  @pepelsbey I think this one from @keithamus is a pretty good "naming things" companion to the posts you listed: https://www.keithcirkel.co.uk/css-classes-considered-harmful/ It also might help to break BEM into parts, as… - A way of thinking about elements that belong to blocks, and the modifiers for each. That could still be a useful way to think?  🚀 Good morning, everyone. I made a game called Mundango, it's about noticing the small things in life.  @davatron5000 where's the checkbox for noticing this website? it is also one of the small joys of life. great work dave! Any idea who’s right? It would be nice to be able to position a popover right next to the button that triggers it. Firefox and Safari both make it easy. Chrome’s behavior makes me sad. @pepelsbey Though if you do add that to the div, it doesn't change what Chrome does, like elements in the top layer are not just out of the document flow but totally disconnected from it. Maybe they're rushing to anchor positioning being *the* way to do it. @hdv Now that I found your article¹ on the topic, what do you think about Firefox’s and Safari’s behavior² that lets you anchor popovers to a button? 1 https://hidde.blog/positioning-anchored-popovers/ TIL: Firefox has a machine translation system built into `about:translations`. This also works on mobile.
Show previous comments
 @shtrom Excellent. I was trying to find out if this existed recently but couldn't figure out the URL — it's not yet listed in about:about ! The old Firefox translations extension had a pop-up widget on the toolbar, but that disappeared when translations were integrated in the core browser. And this is much easier to use, anyway. Limited languages so far, but once it has downloaded the language models, it runs offline. @shtrom See, I knew that Firefox could translate websites, but I didn't realise it also had a front-end for translating whatever I wanted!  Yesterday, I gave a talk about MathML, and I heard that some people thought “ML” stood for “machine learning.” “Math Machine Learning” even makes some sense. To their disappointment, I was talking about markup language instead. It got me thinking… With all the hype around AI, maybe next time I pitch an HTML talk, I should throw in “Hypertext Machine Learning” somewhere in the description, just to improve my odds 🤔   @pepelsbey "Reaching more people using HypertextML". Guaranteed keynote at any corporate conference. Then show them performance graphs for pure HTML pages and say that the web is the world's biggest distributed computer, and we'll have every big company making nice web pages by the end of next year.  proposed a #CSS `scroll-state` query for easily knowing which direction the user is scrolling want it? **give it a vote or comment!** Anonymous poll
Poll
Clamps to 3 lines
35
85.4%
Clamps to 4 lines
4
9.8%
Doesn't clamp
41 people voted. 2
4.9%
Voting ended 30 October at 8:09.
Show previous comments
@andreu I know most people vote for the “clamp 3 lines” option, but it’s the basic principle of CSS cascade we’re about to break here. I’d rather rename the property than introduce this special case. Have you considered renaming it to something else since it’s more of a new property than the unprefixed version of an old one?  @andreu I voted for 3 because you just explained that the prefixed version will work only with the old flexbox properties. This voting looks more like a test for IQ than a test of our CSS knowledge unfortunately. And of course we all are smart, ya 😂  @pepelsbey I don’t know TBH. You could try and work your way back using “Chrome for Testing” to try and manually find out. ```  Most probably with anchor positioning, as [align/justify/place]-self are used there for aligning the target to anchor, when the other dimension is set with anchor(something). I wrote a new article: “Possible Future CSS: Tree-Counting Functions and Random Values” https://kizu.dev/tree-counting-and-random/ Many exciting things were added to #CSS specs over the years, but some have yet to be implemented by browser engines. In this article, I spotlight two features from Level 5 of the CSS Values and Units Working Draft, describe how we can prototype them with what we have in CSS today, and provide several interactive demos of their use cases.  Note: currently, it might not work in mobile Safari. I spent a few hours trying things, the latest dev deploy of my site worked, but the prod one does not. If you cannot open it by the link about in Safari, a workaround that works for me (but still slow) is to go to https://kizu.dev directly and then go to the article. Will investigate later again, but oh well. Sorry. As usual, the credits: - @argyleink, Jonathan Neal, Giorgio Pretto, Sebastian Malton & Oriol Brufau for CSSWG issues related to `sibling-index()` and `sibling-count()`. - @tabatkins & Benjamin De Cock for CSSWG issues related to `random()`. - Michal Čaplygin for an issue about tree-counting functions in Open Props. - @heydon, @leaverou & @me for Quantity Queries. - @leaverou and Alex Walker for the articles on cicada principle. - @kevinpowell for his talk at CSS day. [1/2] 🚨 New Price Alert! I’ve dropped the price of my book from $39 to just $19.99 to make it accessible to a wider audience! 🎉 Level up your CSS debugging skills 🔍 and get your copy today. www.debuggingcss.com Finally, I released a text version of this tutorial 🎉 All the following tutorials will be posted in video and text. Stay tuned! JS in your web app slowing load times and impacting user interactions? 🐌 Debugbear explains these bottlenecks and how you can address them: See how you can tackle them 👇 Last week, I successfully broke free from the vendor-locked and rather limited Apple smart home ecosystem and jumped straight into the rabbit hole of Home Assistant, running on a VM inside of my NAS with Zigbee and Bluetooth dongles sticking out of it. If you know what the hell I’m talking about, give me a sad like and share some of your favorite Home Assistant tricks and resources 🤓  @pepelsbey you have my sad like, but I have enough moody computers at work to allow this to proliferate at home ;)  @pepelsbey @matuzo I have manual switches on the wall. I don’t need no automation. Manual switches will not do stupid shit when I don’t need it. Time to meet up for #html and #webstandards :) we created a #meetup event for the upcoming #hamburg #html meetup: Simultaneously, there will also be a LinkedIn event published soon. We also still have the meetup account which is run by @agalliat, we additionally published it over there to make sure people don't miss it:) https://www.meetup.com/de-DE/hhhtml/events/304004563/?eventorigin=group_upcoming_events Also, we still run the website, in order to be kind of independent from those propietary event websites :) There, you will also find information on how to submit a proposal. I have documented the new CSS calc-size() function (https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size) and interpolate-size property (https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size#browser_compatibility) on MDN. These enable animation to/from and calculations involving intrinsic size values. Thanks to @estelle for the review! The wait is over. HTML for People is OUT NOW! I feel strongly that anyone should be able to make a website with HTML if they want. This web book will teach you how to do just that. It doesn’t require any previous experience making websites or coding. I will cover everything you need to know to get started in an approachable and friendly way. And it’s free for all. 🚀
Show previous comments
Do you want a deeper understanding of #CSS? Not just the individual properties, but how they work together? From cascading, to custom properties, layout, and organization? I have a workshop coming up with @smashingconf, that covers exactly that: 5 online sessions, October 14–28 https://smashingconf.com/online-workshops/workshops/modern-css-miriam-suzanne/  @mia @smashingconf I'm very excited to be able to join this! Quick question for you: there's a possibility that I may have an interruption on the last day. I forgot I have an HVAC maintenance person coming. Will that be a critical day? I realize I'll have access to the sessions after the fact as well. |
@medienbaecker Ha so cool! Just wat i am focussing on for clients a lot now. Great examples!
@medienbaecker thanks a lot for this article! Well written, easy to follow and just in time for our next project!
@medienbaecker great article! Love the animations and different background info