Sign in

Shaw

@shaw.city
793 followers 173 following 564 posts

◈ shaw.city ◈ AKA "shshaw" on Twitter & other platforms ◈ Developer at @codepen.io codepen.io/shshaw ◈ Cohost of @keyframe.rs web animation tutorials keyframe.rs

PostsRepliesMedia
Shaw @shaw.city · 13h
omg. Our nearby theaters have occasional dollar movie days, but you still aren’t getting out of there for less than $30 if you add in any kind of snacks.
110
Shaw @shaw.city · 02/10/2026
🖐️✊ More Drag & Drop on @codepen.io 2.0! Panels can be dropped into the tab area for an expanded view, now including Settings & Assets. You can even drag the Console to a tab!
170
Reposted by Shaw
CodePen @codepen.io · 01/10/2026
"Inline Block Processing" is a cool thing CodePen can do. Here's a video showing it off: www.youtube.com/watch?v=AyAF... Docs: blog.codepen.io/docs/pens/bl... Examples: codepen.io/collection/e...
032
Shaw @shaw.city · 30/09/2026
Fun fact: When you have a kid, you’re basically committed to providing 3 meals a day plus snacks for at least 18 years. That’s nearly 20,000 meals!
020
Shaw @shaw.city · 30/09/2026
It's like PBS for Developers.
061
Shaw @shaw.city · 28/09/2026
Blocks and Files combine to form the ultimate power and flexibility of @codepen.io 2.0. This is a great example: One user file, script.test.js, and yet there's still a Preview... showing the test results!
012
Shaw @shaw.city · 25/09/2026
Cats: I'm fierce and independent! Watch me hunt! Don't touch me! Also Cats: help. claw stuck.
020
Reposted by Shaw
Adam Argyle @nerdy.dev · 24/09/2026
Couple a dorks n their bum-dittys nerdy.dev/camp-night-w... @chriscoyier.net
nerdy.dev
BanjoCSS · September 19, 2026
Banjo, guitar, drums, trees, n' mountains.
7513
Shaw @shaw.city · 24/09/2026
Forget conferences. We need conifers. Sign me up for some Forest Web Jams.
120
Shaw @shaw.city · 23/09/2026
Passing period's almost over. Head to class in 10 minutes!
000
Shaw @shaw.city · 23/09/2026
Curation and quality assurance are more crucial than ever. Is it important? Does it work? Does it make sense?
110
Shaw @shaw.city · 23/09/2026
🕒 Class starts in 3 hours! If you're one of those "do homework right before the bell" kind of folks, this is your time. ✍️
012
Reposted by Shaw
Shaw @shaw.city · 23/09/2026
Tomorrow at 10am Pacific: @codepen.io School live stream with @chriscoyier.net & @shaw.city! 📝 HOMEWORK ASSIGNMENT 📝 Complete this week's CodePen Challenge "Lines and Bars" using the new Mermaid Block! codepen.io/challenges/2... youtube.com/live/Nv09OH0...
youtube.com
CodePen School | Q&A, Live Coding, Tutorials & More!
YouTube video by CodePen
011
Shaw @shaw.city · 23/09/2026
Tomorrow at 10am Pacific: @codepen.io School live stream with @chriscoyier.net & @shaw.city! 📝 HOMEWORK ASSIGNMENT 📝 Complete this week's CodePen Challenge "Lines and Bars" using the new Mermaid Block! codepen.io/challenges/2... youtube.com/live/Nv09OH0...
youtube.com
CodePen School | Q&A, Live Coding, Tutorials & More!
YouTube video by CodePen
011
Shaw @shaw.city · 18/09/2026
Good news! There’s actually a config option for the Jest Block now that lets you output the test results anywhere, like… index.html! codepen.io/editor/shsha...
codepen.io
Jest Tests: FizzBuzz
From https://buttondown.com/cassidoo/archive/u1f92a-theres-power-in-looking-silly-and-not/
130
Reposted by Shaw
Eric Bailey @ericwbailey.website · 18/09/2026
I have a lot of feelings about the whole CSS-Tricks debacle. Here's me trying to be constructive about it. ericwbailey.website/published/cs...
ericwbailey.website
CSS-Tricks could be a co-op
The web will calcify without voices sharing what they know.
25918
Shaw @shaw.city · 18/09/2026
Yuppp. That totally makes sense.
010
Shaw @shaw.city · 18/09/2026
🗺️ Multiplayer Cursors with Itty Sockets! @techsev.bsky.social mentioned ittysockets.com, a cool little library that seamlessly handles websocket connections for doing realtime communication. I had to give it a try, so I built this fun cursor demo. So much potential! codepen.io/editor/shsha...
codepen.io
Multiplayer Cursor with Itty Sockets
A code demo by Shaw created on CodePen
040
Shaw @shaw.city · 18/09/2026
Ahhhh. My mind was trenched in length units, I would’ve given the same answers @trost.codes . Seconds makes sense, but degrees? Are a lot of folks doing transform: rotate and/or radial gradients out there?
210
Reposted by Shaw
Kevin Powell @kevinpowell.co · 17/09/2026
I hadn't posted over on the second channel in a while now, but I felt that it was important to talk about what's going on with @digitalocean.com and @css-tricks.bsky.social as the site has now gone quiet for a second time. youtu.be/9_upvxCAUzM
youtu.be
Digital Ocean killed CSS-Tricks... again
YouTube video by General Musings with Kevin Powell
79724
Shaw @shaw.city · 16/09/2026
On this episode of @codepen.io School, we solved the latest @cassidoo.co Newsletter challenge using the new Jest Block: codepen.io/editor/team/... Naturally @chriscoyier.net and I did it LIVE ON-AIR with Zero Prep and Research but somehow managed to solve it. youtu.be/BFvGpJTAr54?...
codepen.io
Longest Alphabetical Word in Sentence - Cassidoo Newsletter Challenge
A code demo by CodePen created on CodePen
171
Shaw @shaw.city · 16/09/2026
Don't be late for class. 🧑‍🏫 @codepen.io School: Live in 10 minutes. youtube.com/live/BFvGpJT...
youtube.com
CodePen School: Round Two
YouTube video by CodePen
001
Reposted by Shaw
Shaw @shaw.city · 12/09/2026
If you're into shrink-wrapping text, give @kizu.dev's article from 2023 a read. Roman goes into depth about the position-anchor technique and is nearly identical to what I thought was a novel idea 😅 bsky.app/profile/kizu...
051
Shaw @shaw.city · 12/09/2026
Where the speakers all play Muse and the theater plays TMNT2: Secret of the Ooze.
010
Shaw @shaw.city · 12/09/2026
If you're into shrink-wrapping text, give @kizu.dev's article from 2023 a read. Roman goes into depth about the position-anchor technique and is nearly identical to what I thought was a novel idea 😅 bsky.app/profile/kizu...
051
Shaw @shaw.city · 12/09/2026
shape would probably be the right modern way to do it, but there are many ways to fake it, too: codepen.io/swards/pen/g...
codepen.io
iOS CSS Chat Message Bubbles
This is one way to get that little tail to show up on your bubbles. This also has the gradient in the bubbles....
000
Reposted by Shaw
Roma Komarov @kizu.dev · 12/09/2026
Note that my more complicated technique is based on the same simple anchored technique I posted about in 2023 — kizu.dev/shrinkwrap-p... :)
kizu.dev
The Shrinkwrap Problem: Possible Future Solutions
There is one old, yet unsolved, CSS problem: shrinking containers to fit the content when it automatically wraps. While not intentional, anchor positioning allows us to come closer to solving it, at l...
151
Shaw @shaw.city · 12/09/2026
Ah! Look at that. Don’t know how I missed that in my searches. Bravo. I’ll update the article. 🙌
020
Shaw @shaw.city · 12/09/2026
Yup; we didn’t catch that until after. Streams will be hi-def hence forth.
010
Shaw @shaw.city · 12/09/2026
Oops. I invented a new CSS shrink-wrap technique and blogged about it. blog.codepen.io/2026/09/11/s...
blog.codepen.io
Shrink-wrap Text with `position-anchor`
Normal text wrapping can leave big gaps in your container, which can become even more exaggerated with the new-ish CSS values of text-wrap: balance and text-wrap: pretty. You almost certainly want …
69116
Shaw @shaw.city · 11/09/2026
Fun time just talkin' about CodePen, animations, and the new React 19.3 ViewTransitions API. Kinda cool little demo to come out of it: codepen.io/editor/chris...
codepen.io
<ViewTransition>
A code demo by Chris Coyier created on CodePen
011
Reposted by Shaw
CodePen @codepen.io · 11/09/2026
Live streamin' soon! (10am Pacific) I think we're gonna call it CodePen School. We hang out, build stuff, look at interesting things, try to be educational, etc. YouTube: youtube.com/live/ioOYSdv... Twitch: www.twitch.tv/codepen
youtube.com
CodePen School | Q&A, Live Coding, Tutorials & More
Share your questions and hang out with the Cool Teachers at CodePen School. Like office hours with your favorite professor, but actually fun.🧑‍🏫🏫🧑‍🏫
042
Shaw @shaw.city · 11/09/2026
School is now in Session! Join @chriscoyier.net and myself for an office hours-ish hang with Q&A, Live Coding, Tutorials and more. 🧑‍🏫🍎 youtube.com/live/ioOYSdv... 🍎🧑‍🏫
youtube.com
CodePen School | Q&A, Live Coding, Tutorials & More
YouTube video by CodePen
152
Reposted by Shaw
Ben Evans @ivorjetski.bsky.social · 10/09/2026
It's the 2026 LED ART CSS Challenge! 🥳 I've created an LED experiment... Do something cool! The most creative and maddest will feature in my next YouTube. Your time starts now... youtube.com/watch?v=wHcJ... codepen.io/editor/ivorj...
youtube.com
CSS LED ART CHALLENGE!
YouTube video by Ben Evans
1126
Shaw @shaw.city · 11/09/2026
New & Improved! visibility:hidden to hide the container & inherit style properties for the psuedo-element bg without CSS variables. Easier anchor positioning. Fading gradients with background-attachment:fixed & box-shadows to show the bg isn't clipping. codepen.io/editor/shsha...
Updated code using less magic for positioning.
022
Reposted by Shaw
Shaw @shaw.city · 10/09/2026
In CSS, "shrink wrapping" backgrounds to text content with `text-wrap: balance` is a huge pain, but with a little `position-anchor` trickery, we can now make those backgrounds snap to the right size of the wrapped text. codepen.io/editor/shsha...
2152
Shaw @shaw.city · 10/09/2026
In CSS, "shrink wrapping" backgrounds to text content with `text-wrap: balance` is a huge pain, but with a little `position-anchor` trickery, we can now make those backgrounds snap to the right size of the wrapped text. codepen.io/editor/shsha...
2152
Reposted by Shaw
Bramus @bram.us · 10/09/2026
TIL that @codepen.io supports Mermaid Diagrams … and also TIL that there is no custom element to easily include these in your markup … so I built one (assisted by Antigravity). → brm.us/mermaid-elem...
brm.us
Introducing <mermaid-element>, a custom element to display Mermaid diagrams
Today I learned that CodePen supports Mermaid diagrams — Chris Coyier has a a whole collection with examples here — and I also learned that there is no custom element to easily include these in your markup … so I built one.
3315
Shaw @shaw.city · 10/09/2026
So much of all the Editor Pane functionality was inspired/based on your work a decade or so ago on the Classic Editor. It's been fun to take that feel and bring it into a true tabbed interface with 2.0! 😄
010
Reposted by Shaw
Shaw @shaw.city · 08/09/2026
New on @codepen.io: 🖐️✊ Draggable Panels 🖐️✊ Try dragging & dropping a Sidebar Panel into the Editors for even more ways to customize the UI. Great to combine with Minimal UI when you still want certain Panel content easily visible. www.youtube.com/watch?v=fcPe...
1113
Shaw @shaw.city · 08/09/2026
New on @codepen.io: 🖐️✊ Draggable Panels 🖐️✊ Try dragging & dropping a Sidebar Panel into the Editors for even more ways to customize the UI. Great to combine with Minimal UI when you still want certain Panel content easily visible. www.youtube.com/watch?v=fcPe...
1113
Shaw @shaw.city · 08/09/2026
We don't have a public issue tracker, but if you write in to codepen.io/support we'll be glad to help with any problems you're running into! We did a lot of work last week blocking Bots and improving speed across the entire site, so do let us know if you're still running into any slowness.
codepen.io
CodePen Support
001
Shaw @shaw.city · 02/09/2026
Understood. Good feedback. We're actively working on some changes to Package support on CodePen so we'll take that into account. Thanks!
010
Shaw @shaw.city · 01/09/2026
Here's a working example showing how the importmap gets merged in our Packages Block: codepen.io/editor/shsha... A small update to your script should produce the same results with the dynamic import map. Alternatively: Publishing the package on NPM would make the dynamic imports much easier.
codepen.io
Bitmae Import Map Example
A code demo by Shaw created on CodePen
110
Shaw @shaw.city · 01/09/2026
I'm also on iPhone 17 with Safari 26 and the 2.0 Editor seems to be working fine. Perhaps it's more related to all the extra WebGL stuff happening in your Pens. What do you see? Do the Pen and file contents load? Do you get the "Uh oh. Preview unresponsive" error?
000
Shaw @shaw.city · 01/09/2026
Unfortunately you can't have more than one importmap on a page, that's why we go through all the work to merge with an existing one if present.
100
Shaw @shaw.city · 01/09/2026
The Packages Block plays nice with importmaps that are inline in the HTML. If you have custom overrides, that's the way to go. It looks like you have your own dynamic importmap script. If you update that to combine/replace an existing importmap on the page, then it should work as expected.
rawcdn.githack.com
200
Shaw @shaw.city · 01/09/2026
On CodePen, we did a lot of testing to try to ensure our iframes in the Editor and Embeds allow for `color-scheme` values that respond to the system theme (if you want them to!)
010
Reposted by Shaw
Chris Coyier @chriscoyier.net · 31/08/2026
Woke up excited about subdomains. They are free(ish) and easy. C'mon. www.youtube.com/watch?v=Bi1u...
youtube.com
Subdomains are awesome. They are like free websites. CodePen can host them easily.
YouTube video by CodePen
2252
Shaw @shaw.city · 22/08/2026
But did you have to accept cookies?
010