398: DevOops

Featured Imgs 23

Stephen and I hop on the podcast to chat about some of our recent tooling, local development, and DevOps work. A little while back, we cleaned up our entire monorepo’s circular dependency problems using Madge and elbow grease. That kind of thing usually isn’t the biggest of deals and the kind of thing a super mature bundler like webpack deals with, but other bundlers might choke on. Later, we learned that we had more dependency issues like inter-package circular dependencies (nothing like production deployments to keep you honest) and used more tooling (shout out npx depcheck) to clean more of it up. Workspaces in a monorepo can also paper over missing dependencies — blech.

Another change was moving off using a .dev domain for local development, which oddly actually caused some strange and hard-to-diagnose DNS issues sometimes. We’re on .test now, which should never be a public TLD.

Time Jumps

  • 00:26 Dev ops spring cleaning
  • 01:25 Local dev with .dev, wait, no, .test
  • 06:58 Sponsor: Notion
  • 07:54 Circular dependency
  • 11:41 Monorepo update
  • 13:35 Interpackage and unused packages
  • 16:25 TypeScript
  • 17:54 Upgrading packages
  • 20:35 Hierarchy of packages

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your company’s information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com. Take your first step toward an organized, happier team, today.

Chris’ Corner: Dreamy, Folded, Bendy CSS

Typography Definitions Cover

Yuan Chuan with a funny blog post opener commenting about how much they liked their friend’s photos:

I was attracted by their slight blur and the subtle glowing effects, and wondered what kind of filter function was used. But then she told me it’s just because the camera lens wasn’t wiped clean.

Turns out you can get that same kind of “dreamy” effect with some fancy dancing with filters.


Semantic HTML? Pffffft. Why bother? Unicode is all you really need.

Terence Eden says he is very sorry for this.

I probably should have just copied the unicode above into this email rather than screenshotting it, but it made me too nervous for some reason. Partially because I’d worry it looks like spam to some email servers.


Here’s a nice walkthrough of 3D in CSS by Brad Woods.

One of the demos has you grabbing the corner of an element with regular text in it, and as you drag it folds back in space, with, you guessed it 3D in CSS.

Seeing text in 3D is somehow extra satisfying for me, perhaps because it’s more rare to see. And hey, that reminds me of Codrops recent On-Scroll Typography Animations which are very very cool. Make sure to scroll far enough to see the “Unfolding” one which is my favorite.


I always though that the math behind calculating the perfect nested border-radius would be complex somehow. But Paul Hebert has it figured out for us:

outerRadius - gap = innerRadius

Gotta get this right folks! See how awkward it can be on the left vs. fixed on the right.