Dom Magnifico

Dom Magnifico

@doom.codes

53 followers128 following63 posts

Pinned

Dom Magnifico
@doom.codes

I'm doing a thing now where I try to rediscover CSS properties I forgot about, or find new ones that are interesting to me. Today's is attr(). You can pull data attributes straight into the content property. No JS, no extra DOM. It's been in the spec forever and I just... never use it.

Dom Magnifico
@doom.codes

Threw together a little video on the progress() CSS property. Excellent for handling fluid typography. Check it out!

Dom Magnifico
@doom.codes

Took a look at the progress() property today. Fluid typography is getting easier and easier to manage. Cool to be able to more easily pin it to the container width too.

Dom Magnifico
@doom.codes

My latest bit of resistance against Al induced brain atrophy: text-box-trim Fonts carry invisible space above their capital letters and below the baseline. That's why text can look off center in a button even when the padding is identical on every side.

Dom Magnifico
@doom.codes

l've always fixed it with negative margins or slightly weird padding values. CSS can trim that extra space so the padding measures from the letters themselves. Useful little property.

Dom Magnifico
@doom.codes

In my battle against AI induced brain atrophy, I've been trying to find interesting CSS or JS properties to explore. The latest: field-sizing: content It lets a textarea grow with its content without manually calculating its height in JS. Add a max-block-size and it’ll grow, then start scrolling.

Dom Magnifico
@doom.codes

Wrote some more about how we're using AI @houseofgiants.com We had a massive amount of HoG history to throw at our company brain. And the very AI brained thing to do would have been to shove all of it into the system and call that memory.

Dom Magnifico
@doom.codes

I almost went that direction, because it feels productive. You have a folder full of old work, the agent can search it, and the dumb little voice in your head starts going, hell yeah, company brain. That wasn't the case 👇 dommagnifi.co/2026-06-18-a...

dommagnifi.coAI at House of Giants, Without the Spam Machine: Context Is Not MemoryPart 2 of the Krang build: why giving an AI operator more context made the system worse until House of Giants got stricter about memory, source material, and review.

Dom Magnifico reposted

Lea Verou, PhD
@lea.verou.me

As @una.im just mentioned in her #cssday talk, the CSS WG recently resolved to insert a ⓘ after EVERY SINGLE INTEREST INVOKER on touchscreens. Here’s a mock of what this would look like for bsky. This is the issue to let the CSS WG know what you think: github.com/w3c/csswg-dr...

Dom Magnifico
@doom.codes

I haven't used #CSS container queries as much as I should be. So I looked into some interesting things you can do with them, like the container style query. Pass a custom property to it, and you can style different variations. Saves you a bunch of BEM style modifier classes.

Dom Magnifico
@doom.codes

If you pair this with some pseudo classes like :has() or :in() or :not() you can do some pretty interesting stuff. Things like active navigation styles for example. Pretty cool. Read more about it here 👉 dommagnifi.co/lab/containe...

dommagnifi.co@container style(): components that read parent tokensCSS container style queries let child components react to custom properties on their parent, so theme, tone, and density can come from context instead of extra modifier classes.
Dom Magnifico
@doom.codes

It's both rad and annoying when you find a CSS attribute that solves a problem you've worked collective hours trying to solve for. contrast-color() is one of those. Give it one color and it resolves to either black or white, whichever has stronger contrast against that solid background. More 👇

dommagnifi.cocontrast-color(): readable text from one colorCSS contrast-color() lets the browser pick black or white text from a dynamic background color, which is perfect for badges, buttons, chips, and user-picked themes.
Dom Magnifico
@doom.codes

Working with dates in JavaScript has always been a nightmare. Because Date sucks, we needed a pile of workarounds for a 30-year-old mistake. That's why so many projects use moment or day.js. Temporal reached Stage 4 recently. Time to uninstall all those dependencies.

Dom Magnifico
@doom.codes

I love color-mix(). Trying to derive shades and hues by eye is such a pain in the ass, and I've been guilty of eyeballing hex values for way too long. Set one color, mix it with white or black in oklch, and get hover/disabled states, dark mode tints, whatever. All from one source. New lab entry 👇

Dom Magnifico
@doom.codes

Another day, another lab entry. If you've ever manually added <br> tags to fix heading wraps... stop it. text-wrap: balance is rad. And text-wrap: pretty handles single word orphan lines in paragraphs. Link 👇

Dom Magnifico
@doom.codes

I'm doing a thing now where I try to rediscover CSS properties I forgot about, or find new ones that are interesting to me. Today's is attr(). You can pull data attributes straight into the content property. No JS, no extra DOM. It's been in the spec forever and I just... never use it.

Dom Magnifico
@doom.codes

I always forget about scroll-margin-top. If you have sticky or fixed nav type UI on your site, paired with anchor navigation, it will offset the scroll target so your content lands below the sticky element instead of hiding behind it. 🔥

Dom Magnifico
@doom.codes

I built out a documentation site for the insane block markup associated with #WordPress Gutenberg blocks. There were sparse docs, and using the WP Block GitHub as a reference was silly. Contributions and feedback welcome 🤘 Documentation Site: www.wpblockdocs.com GitHub: github.com/house-of-gia...

wpblockdocs.comWordPress Block HTML Reference - Complete Developer GuideThe ultimate resource for WordPress Gutenberg block HTML markup, syntax, and properties. Learn WordPress block development with interactive examples and comprehensive documentation.
Dom Magnifico
@doom.codes

Web Components are a hot topic - I love the potential they have for nice clean markup. At the same time it feels like the wild west again in terms of being able to do anything you want within the markup. I worry about the future being incoherent hashed Web Component names.

Scott Jehl@scottjehl.com

Hi! A couple of promos for the Web Components Demystified online course. I'm raffling off 5 full access coupons today. To enter, reply or quote with something you love OR don't love about web components. Ends at 5pm ET. 💘 And! Get 60% OFF today through Feb 22nd using the code HEARTS 💘

scottjehl.comWeb Components Demystified online course | Scott Jehl, Web Designer/DeveloperA comprehensive, premium course about building dynamic, fast, resilient apps with standard web components.

Dom Magnifico reposted

Scott Jehl
@scottjehl.com

Hi! A couple of promos for the Web Components Demystified online course. I'm raffling off 5 full access coupons today. To enter, reply or quote with something you love OR don't love about web components. Ends at 5pm ET. 💘 And! Get 60% OFF today through Feb 22nd using the code HEARTS 💘

scottjehl.comWeb Components Demystified online course | Scott Jehl, Web Designer/DeveloperA comprehensive, premium course about building dynamic, fast, resilient apps with standard web components.
Dom Magnifico
@doom.codes

Tons of potential with advanced attr() - Excellent article from Una on the subject!!

Una Kravets@una.im

Dang I'm excited about new semantic attr() capabilities in CSS! I wrote a post about why this feature is so powerful, how it could change the way you build components, and how I would use it. Advanced attr() is rolling out in Chrome 133 starting next week 🥰 una.im/advanced-attr/

una.imuna.im | New capabilities for attr()Advanced attr() is landing in Chrome 133, and I'm really excited for this feature! Here's a bit about it and how you can use it.
Dom Magnifico
@doom.codes

One of the best portfolio sites I've ever seen, hands down 👏

henry ✷@strange.website

new year, new website :) with thy surest steel gathered to thy side, turn to face these new nightmares, these...True Terrors (of the New Dark Web) plenty to do but i'm thrilled to publish this 🤍 thanks a lot if you end up taking a look, but hark! go heedfully: scroll with caution & with care!

henry.codesHenry From OnlineThe personal site & portfolio of creative web developer Henry from Online

Dom Magnifico reposted

⚒️ Nick ⚒️
@gabaghoulish.bsky.social

Dude, it's insane that Zegema Beach releases just banger after banger. This split is from the American band Crowning and the Japanese band Oaktails. It's noodly. It's melancholic. It's aggressive. It's mathy. Just superb. Spend 13 minutes of your time and blast this

Dom Magnifico reposted

Andy Bell
@bell.bz

After 15+ years of teaching, architecting & delivering CSS for global organisations & startups, I’ve collated that experience into an extensive course. Complete CSS has taken nearly a year to produce and finally, it’s officially live for a limited Black Friday launch price of £189 complete-css.com

Dom Magnifico reposted

OddBird
@oddbird.dev

We put together a video playlist about #CSS Anchor Positioning. Hope it's useful! Featuring the Birds @jamessw.com, @namastacy.bsky.social, @miriam.codes www.youtube.com/playlist?lis... - Anchor Positioning intro - Anchor-scope - CSS image comparison slider, no JS - Anchor Positioning in practice

youtube.comCSS Anchor Positioning - YouTubeLearn the latest about using CSS Anchor Positioning, and use it now with OddBird's polyfill- github.com/oddbird/css-anchor-positioning.

Dom Magnifico reposted

Chris Coyier
@chriscoyier.net

Tired: @media (min-width: 500px) { } Wired: @media (width >= 500px) { } Even better when you need to double up like: @media (500px <= width <= 1000px) { } Took a minute but I got my brain to flip over to the new way. Also easier to avoid weird 1px gaps. Good article: cssence.com/2024/superio...