iiinova — where your digital self keeps evolving

How Anchors work in Modern CSS

There are lots of extra little details in the API, like position-try-fallbacks for adjusting the position based on whether or not the target can fit, using it with the popover API, etc. All the details are in the video 👇 youtu.be/zfQbVHyv3v4

youtube.com

Position elements relative to each other using just HTML and CSS, n...

000

The position-area is a quadrant with the anchor in the middle. You can use directional (e.g., left, top) or logical properties (e.g., block-start).

100

3️⃣ Target properties The target must be either position absolute or fixed. Then assign it's position-anchor and set it's relative position-area.

100

2️⃣ Anchor name In your CSS, give the anchor an "anchor-name", which is a name proceeded with a double dash.

100

1️⃣ Structure At the most basic, you need two elements: an anchor and a target.

100

How Anchors work in Modern CSS

How do anchors work in modern CSS? The Anchor Positioning API is deceptively complex. Here's everything you need to know in <8 min 👇 youtu.be/zfQbVHyv3v4

youtube.com

Position elements relative to each other using just HTML and CSS, n...

Watch the video for the full walkthrough 👇 youtu.be/sl_cGD327BY

030

The browser adds default styling, but you can use modern CSS to make it your own: - transition-behavior: allow-discrete - @⁠starting-style - position-area - :popover-open pseudo attribute

At it's most basic: - Open button: popovertarget pointing to ID - Popover: attribute of popover (with an ID) - Close buttons: same as open, but with popovertargetaction="close"

- Open button: popovertarget pointing to ID
- Popover: attribute of popover (with an ID)
- Close buttons: same as open, but with popovertargetaction="close"

Chris Pennington @codinginpublic.dev · 01/07/2026

If you're not using popovers yet...why not!? - Accessible by default - No JavaScript - Baseline 2025 Master popovers in 9 minutes 👇 youtu.be/sl_cGD327BY

131

One thing that will trip you up: whitespace is now collapsed automatically.  <span>Hello</span>{' '}<span>World</span> Or...you can fix this with a config (to use the old behavior)

Chris Pennington @codinginpublic.dev · 01/07/2026

Mostly, it just means everything is faster. Here's a real stress test with 3000 MDX routes (~40% faster). - Astro 7: 17.63 seconds - Astro 6: 29.06 seconds

two logs; one showing 17.63 seconds for Astro 7 and 29.06% with Astro 6

100

Chris Pennington @codinginpublic.dev · 01/07/2026

The new major version of @astro.build is out! Everything is moving to Rust! 🦀 youtu.be/KBOgV7kuSm8

Chris Pennington @codinginpublic.dev · 28/06/2026

Super proud of my daughter. - Ran her first 5k yesterday - Topped her age group at 29:41 Special thing to share running with her 🥰

Chris with his daughter holding their medals

040

Chris Pennington @codinginpublic.dev · 27/06/2026

What are you building today? I'm building out a custom API for all my task management with Convex as my backend, Vercel for deployment (I'm building a web interface), and a full MCP server, CLI, skills, etc. We've got full docs and more, too. Hoping to open source it soon.

130

Chris Pennington @codinginpublic.dev · 07/04/2026

Code with AI. Clean up poop. Need I say more? clawdagotchi.com

000

Chris Pennington @codinginpublic.dev · 07/04/2026

I built a tamagotchi for claude code. - approve/reject requests - clean up poops - try to keep it alive I will not be taking questions at this time clawdagotchi.com

120

5️⃣ Don't forget the people In the end, I'm still here for people. 🔸Cultivate empathy until it’s instinct. 🔸Look at people in the eyes. 🔸Be thankful for others; use your words. 🔸Notice successes; sympathize with loss. 🔸Filter criticism through empathy.

100

4️⃣ Pause as a practice Speed feels electric and thinking can destroy momentum, but when slowing down means picking the right heading, it’s always worth it. 🔸Excitement can blind you. 🔸Busyness isn’t always progress. 🔸Taste requires thought. 🔸Quality comes from cultivation.

100

3️⃣ Turn the problem Examine problems from multiple angles before devising solutions. 🔸Is the core ask being addressed? 🔸What is our motive? 🔸Is this work important now? 🔸What method should we choose? 🔸Where will this be consumed? 🔸Am I examining all audiences?

100

2️⃣ Question assumptions It’s hard to say, “no” and hard to ask, “why?” but both are crucial if I want to have an impact. 🔸Purpose drives action. 🔸Focus on work you can uniquely advance. 🔸You cannot avoid “no”; but you can choose it. 🔸The wrong work is always unproductive.

100

1️⃣ Start with intention With so much noise, it’s important to choose your signal. 🔸Urgency does not mean importance. 🔸Plan for margin; expect interruptions. 🔸Aim for impact, not for visibility. 🔸Remember the long-term in the short-term.

100

Chris Pennington @codinginpublic.dev · 24/02/2026

I’m trying to ask the hard questions, to develop a different way of thinking. 5 lessons I’m trying to learn. 👇

og image for "learning to think differently"

120

For those still writing CSS 😊 Here's a squishy hover I've been using a lot recently. 👇 youtu.be/HrSnHMaWpGA

youtu.be

Micro-interactions still matter

YouTube video by Coding in Public

010

Chris Pennington @codinginpublic.dev · 23/02/2026

My thoughts on @astro.build joining @cloudflare.social. TLDR; I'm optimistic, still sponsoring the community maintainers, and watching closely :) youtu.be/IISgoIsABs8?...

youtu.be

My thoughts on Astro joining Cloudflare

YouTube video by Coding in Public

0152

Chris Pennington @codinginpublic.dev · 09/12/2025

Something ✨ NEW ✨ is coming... LIVE content collections in @astrodotbuild 6.0. Here's an early sneak peak 👇 youtu.be/wgIYciR0hvk

youtu.be

Live content collections (first look)

YouTube video by Coding in Public