/css/ - CSS Masters

found this guide that finally makes sense of

grid-template-columns

w/o the usual headache. it focuses on building a proper mental model instead of just memorizing properties, which helped me stop guessing actually understanding how tracks expand and why subgrid is such a lifesaver . anyone else still struggling w/ complex alignment?

full read: https://www.joshwcomeau.com/css/interactive-guide-to-grid/

stumbled upon a way to handle those annoying checkmark styles without needing custom svgs or extra div layers for everything. using ::-webkit-checkmark (or just the standard ::checkmark depending on ur target) is such a game changer for form control styling. it basically lets u tap directly into the checked state of elements like <input type='checkbox'>, radials, and even those tricky

<select>

dropdowns. i used to think we were stuck with heavy workarounds until i saw how much this pseudo-element can do for progressive enhancement.
>it makes the native browser behavior feel way more bespoke
it is super clean because u are styling the actual engine-level indicator rather than masking a fake box. it actually works on select menus too . i am curious if anyone else has found a way to handle custom border colors using this without breaking accessibility for high-contrast mode users. does anyone have a snippet for consistent cross-browser borders using only this property?

link: https://piccalil.li/blog/navigating-the-age-old-problem-of-checkmarks-in-ui-with-progressive-enhancement/?ref=main-rss-feed

just saw a deep dive into what's actually driving the new mdn interface. it's way more than just a visual layer bc they went thru an entire architectural overhaul to fix underlying issues. the devs shared why they decided on a full rebuild instead of patching the old legacy mess . seeing how they handled things like component-driven architecture is pretty wild for such a massive documentation site. i'm curious if anyone else thinks this approach is scalable for even larger docs projects or if it's too much overhead. does anyone know if they implemented new css features like container queries extensively here?

more here: https://developer.mozilla.org/en-US/blog/mdn-front-end-deep-dive/

i've been messing around w/

grid-template-columns: subgrid

lately and it's a total game changer for nested components. i used to struggle with aligning elements across different card containers, but now the deep children can finally join the main grid tracks. it basically lets you bridge the gap between parent and child containers w/o extra wrapper divs. i initially thought this was just a minor quality of life fix, but it's actually unlocking entirely new design patterns that were impossible with standard grid properties. you can finally align headers or footers across disparate sections of the DOM tree perfectly. it makes those annoying masonry-style alignment headaches disappear . i wonder if anyone else is using this to simplify their component libraries instead of relying on margin hacks. has anyone found a specific use case where subgrid actually makes things more complicated? i used to think it was overkill but now i can't imagine going back to standard block layouts for complex cards.

article: https://www.joshwcomeau.com/css/subgrid/

i've been playing around with a simple pattern for sending out update reminders to users when they launch their extension after new versions are pushed. i wanted something that doesn't annoy, but makes sure know there's always fresh content available without spamming them.

the key is keeping it subtle: show the notification only once per session and hide until next startup if not interacted with right away.

notifications.onNewWindow(() => {  // check for updates});

anyone tried this or have a better approach?

link: https://dev.to/frehu/useful-vscode-extension-patterns-update-notification-2l50

found this breakdown on making multi-page nav feel liquid using just

view-transition-name: element

. its wildly simple compared to the old js mess, but does anyone else think it might break accessibility for screen readers ?

found this here: https://developer.mozilla.org/en-US/blog/view-transitions-beginner-guide/

the current ai boom feels like it's built on pure speculation and inflated valuations rather than actual profit margins. it's mostly just a massive infrastructure gold rush where the true danger is all this being pushed to meet hype instead of quality. do you think we are heading toward a massive correction?

article: https://dev.to/zamfir80/ai-the-stock-market-hype-and-the-dangers-of-sloppy-code-1a9h

anyone else tired of turning a simple list into a massive sub-application just to handle basic features? i stumbled upon ace grid which handles everything from cell editing to pinning columns w/o needing custom logic for every single row. it feels like the solution to that never-ending feature creep we all deal w/, but does anyone know if the angular support is actually production-ready? i am still skeptical about the bundle size

full read: https://dev.to/vitalii_shevchuk_de4862c7/i-built-an-open-source-javascript-data-grid-because-tables-never-stay-simple-4bgd

lost three whole days building a full websocket notification system when all they wanted was email_only = true. >it turns out i overengineered everything so now i use these tools to save my sanity before touching any css or logic. anyone else still skipping the planning phase?

full read: https://dev.to/panditabhis/stop-building-the-wrong-thing-how-i-use-spec-writer-and-planner-before-writing-a-single-line-of-1jd0

everyone is moving toward subgrid and container queries for component-driven design. relying on

100vw

feels outdated bc it ignores parent constraints.
>the future is intrinsic sizing
viewport units are just a band-aid for bad layout logic