Chris Pennington

poetryfoundation.orgHoly Sonnets: Batter my heart, three-person'd GodBatter my heart, three-person'd God, for you As yet but knock, breathe, shine, and seek to mend; That I may rise and stand, o'erthrow me, and bend Your…

7 Sept

If you're seeing this, comment with a link to your favorite poem. I'll start. www.poetryfoundation.org/poems/44106...

forward.resend.comResend Forward • Oct 21, 2026An event for builders

7 Sept

Collecting "crafted arts" in advance of Resend Forward, a dev conference about the craft of building software in SF on October 21st. Starting today with poems. Join us 👇 (use CR4FT43VER for 20% off) forward.resend.com/register/di...

Chris Pennington reposted

UtahJS

@utahjs.com

30 Aug

Chris Pennington (Resend, @codinginpublic.dev) on the modern CSS patterns your AI agent doesn't know yet — and how to fix that. #UtahJS, Sept 18 @ 2:35 PM. ti.to/utahjs/2026

ti.to2026 UtahJS ConferenceThe 15th Annual UtahJS Conference will be a one-day event with three tracks.

15 Aug

👋 I'm speaking at UtahJS! Come join me September 18th! 👇 ti.to/utahjs/2026

6 Aug

PSA in case you are also going insane looking. Cursor word wrap NOT in settings, but here...

youtube.comCSS 20 years in the making?Did you know you can now transition from `display: none` to `displa...

We've waited like 20 years for this? display: none → display: block; youtu.be/3QUOstYE7-Q

P.S. with dialog, popover, etc. you'll likely need to transition both display and overlay like this 👇

developer.mozilla.org@starting-style CSS at-rule - CSS | MDNThe @starting-style CSS at-rule is used to define starting values for properties set on an element that you want to transition from when the element receives its first style update, i.e., when an element is first displayed on a previously loaded page.

2️⃣ @⁠starting-style Define the starting style to control the entrance animation. developer.mozilla.org/en-US/docs/...

youtube.comCSS 20 years in the making?Did you know you can now transition from `display: none` to `displa...

We've waited like 20 years for this? display: none → display: block; youtu.be/3QUOstYE7-Q

developer.mozilla.orgtransition-behavior CSS property - CSS | MDNThe transition-behavior CSS property specifies whether transitions will be started for properties whose animation behavior is discrete.

It relies on two properties... 1️⃣ transition-behavior Set it to allow-discrete to allow for discrete animated properties. developer.mozilla.org/en-US/docs/...

15 July

A story in 4 parts 1. Needed a chrome extension for showing OG images. 2. Didn't want to find an extension + trust the dev. 3. Open Claude and prompt, then back to work. 4. 1 min later, Claude was done. Think it would've genuinely been slower to find an extension in the store.

youtube.comHow Anchors work in Modern CSSPosition elements relative to each other using just HTML and CSS, n...

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

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).

youtube.comHow Anchors work in Modern CSSPosition elements relative to each other using just HTML and CSS, n...

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.comHow Anchors work in Modern CSSPosition elements relative to each other using just HTML and CSS, n...

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

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

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.

youtube.comHow Anchors work in Modern CSSPosition elements relative to each other using just HTML and CSS, n...

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

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

github.comGitHub - coding-in-public/popover-basicsContribute to coding-in-public/popover-basics development by creating an account on GitHub.

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

Here's my finished code: github.com/coding-in-p...

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

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

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"

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

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

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)

astro.buildAstro 7.0 | AstroAstro 7.0 brings faster builds with Vite 8, a new Rust compiler, Advanced Routing, background dev server support, and structured logging.

Read all about the new changes 👇 astro.build/blog/astro-7/

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

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

28 June

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

27 June

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.

chrispennington.devPredictability is a Superpower - Chris PenningtonIf you can predict how long tasks take you, it gives you a big advantage in daily life.

5 May

Some thoughts on how I plan my days. chrispennington.dev/blog/predict...

7 Apr

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

Chris Pennington@codinginpublic.dev

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

7 Apr

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

youtu.beThe channel is changingYouTube video by Coding in Public

1 Apr

My second annual dumb tradition 👇 youtu.be/xClmQZCJuTk

youtu.beNEW Astro Component StarterYouTube video by Coding in Public

13 Mar

New Astro Component Starter by @cloudcannon.bsky.social Here's everything you need to know 👇 youtu.be/ZoXyK96nyCg

cloudcannon.comAstro Component StarterThe Astro Component Starter is built on web fundamentals, easy to customize, fast to use, and simple to maintain. Every component is built to work seamlessly in CloudCannon's Visual Editor.

13 Mar

Try it out yourself! cloudcannon.com/templates/as...

youtu.be(NEW) Astro 6: First LookYouTube video by Coding in Public

12 Mar

First look at @astro.build 6 🚀 youtu.be/WxUEtNg07gE

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

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.

chrispennington.devLearning to Think Differently - Chris PenningtonMore and more, I'm realizing that careful thinking and thoughtful direction is today's superpower. Here's how I've been trying to grow.

When everything in my world keeps telling me to speed up, these thoughts encourage me to move with purpose. chrispennington.dev/blog/learnin...

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

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?

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.

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

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.

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.

youtu.beMicro-interactions still matterYouTube video by Coding in Public

24 Feb

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

youtu.beMy thoughts on Astro joining CloudflareYouTube video by Coding in Public

23 Feb

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

Craft time

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

youtu.beLive content collections (first look)YouTube video by Coding in Public

github.com/coding-in-pu...

9 Dec 2025

github.comGitHub - coding-in-public/live-content-collections-first-lookContribute to coding-in-public/live-content-collections-first-look development by creating an account on GitHub.

9 Dec 2025

My course is 33% off for the holidays. Ask someone to get it for you with a custom link 👇

learnastro.devAstro Course by Coding in PublicLearn the Astro web framework through a project-based learning approach

9 Dec 2025

learnastro.dev/christmas