Sign in

Shaw

@shaw.city
792 followers 171 following 561 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 · 2h
It's like PBS for Developers.
041
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.
7503
Shaw @shaw.city · 23/09/2026
Passing period's almost over. Head to class in 10 minutes!
000
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
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
🗺️ 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
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
79723
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
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
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
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
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
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
Reposted by Shaw
CodePen @codepen.io · 20/08/2026
Hosting images on CodePen is, like, pretty good actually. (Quick video on the superpowers: www.youtube.com/watch?v=ANw0...)
youtube.com
Hosting Your Images is Eeeaasssyyy (and powerful with autoformatting, resizing, and quality control)
CodePen can host images right in your Pen. Or, you can use Global Asset Hosting to provide easy access to the image from any Pen (or anywhere) and it includes the ability to serve the best-format…
061
Reposted by Shaw
André Ruffert @andreruffert.com · 21/08/2026
It's been 13 years since I started using @codepen.io 🫶
Look at you. (Coo Coo Cachoo.) You've been here for 13 years. Thanks for being a part of the CodePen community!
172
Shaw @shaw.city · 17/08/2026
My biggest personal flaw? Hm... I’d have to say it’s that every time someone mentions “Christian Slater” I can only picture A.C. Slater and it’s very confusing.
010
Reposted by Shaw
CodePen @codepen.io · 13/08/2026
A PRO feature on CodePen is that the Live Preview URL you see right in the CodePen Editor you can pluck out and open in as many URLs and devices as you like. It's nice for multi-monitor setups, cross-browser testing, real device testing, etc.
282
Reposted by Shaw
Chris Coyier @chriscoyier.net · 12/08/2026
Pretty niche, but @codepen.io passes the ?query params from a Pen down to the preview, so you can access and use them inside of a Pen. Like a "timer" Pen that you can set with ?h=2&m=30 or the like.
2462
Reposted by Shaw
Josh Collinsworth @collinsworth.dev · 13/08/2026
PSA on redesigns: You hate it because it's new. Your brain will do its best to invent other reasoning, but it's mostly retcon; your brain is wired to reject the unfamiliar. It'll be invisible to you in a month, until it's updated again, and then you'll hate that new one because it's not this one.
3202
Shaw @shaw.city · 13/08/2026
I've only had a short hike in Big Walk, but what an amazing game. I'd love to be able to play this with my kids without a thousand dollars worth of systems to run it 😅
140
Shaw @shaw.city · 10/08/2026
If you need to entertain a kid all day, just ask them to clean up the toy bucket that they dumped onto the floor. Sure, you'll probably end up with a bigger mess than they started with, but guaranteed they'll be distracted by the toys and play for hours.
000
Reposted by Shaw
Chris Coyier @chriscoyier.net · 07/08/2026
Just me and the GOAT hanging out. 🏄🏽‍♂️
3425
Reposted by Shaw
Kevin Powell @kevinpowell.co · 07/08/2026
I'm sure you already heard about the big update to @codepen.io. If you're still trying to work your way around it @chriscoyier.net sat down with me to walk me through all of the changes. youtu.be/q_0RweY2VJc
youtu.be
CodePen just got a HUGE upgrade
YouTube video by Kevin Powell
3287
Reposted by Shaw
CodePen @codepen.io · 05/08/2026
In which Bramus learns that MDN publishes their page view data publicly, builds a website, and deploys it on CodePen. Site: ready-unit-fowl.codepen.app Blog post: www.bram.us/2026/08/03/m...
021
Shaw @shaw.city · 05/08/2026
Turns out coffee is not a substitute for actual sleep.
100
Reposted by Shaw
Elaina @elaina.bsky.social · 20/07/2026
Wowowowowow an archive of old user interfaces. Let's go back to thissssss typewritten.org/Media/
A yellow-toned old OS interface with various windows open that use a monospace typeface. One is a terminal, the other is an App manager, and  there are various user action buttons at the bottomVarious windows open on top of each other depicting an older interface against a gray background. One is a color picker with various colors in squares, the main window is a terminal window on a white background, and other windows have a clock, a keyboard emulator, and an isometric circular imageAn old desktop user interface with an 8-bit blue background. There are various finder windows open, a cursor selecting "Print Spooler" from a dropdown menu in a toolbar, and a few desktop icons depicting Trash, Floppy Disk, and Hard disk
0156
Shaw @shaw.city · 03/08/2026
We have easier layout tools and more options available on the web than ever before. why do we settle for friggin hamburger menus for every website???
172
Reposted by Shaw
WebDesignMuseum @webdesignmuseum.org · 03/08/2026
The diversity of horizontal navigation in 2004
The diversity of horizontal navigation in 2004
16660152
Shaw @shaw.city · 02/08/2026
What’s it called when you’re not really a morning person and not really a late night person or even a middle of the day person?
100
Reposted by Shaw
CodePen @codepen.io · 01/08/2026
What if there is a specific file in a Pen you want to use elsewhere? Just grab the URL for it and use it. Global Assets is more specifically designed for that, though — especially for images where it's got extra superpowers like resizing, quality control, and auto-formatting.
041
Shaw @shaw.city · 31/07/2026
Repairs like this are so cool. remysharp.com/tif/2026-07-... I wish I were as knowledgeable as @remysharp.com! Just had my NES repaired at a shop because my attempts to fix it weren't sufficient. I'm jealous of the knowledge and skill to be able to trace the issues and patch them.
remysharp.com
Rescued Pokémon Yellow
I guess I just want bragging rights, but here's the short story of rescuing Pokémon Yellow. I run &quot;fix your gameboy game for £10&quot; which occasionally …
100
Shaw @shaw.city · 30/07/2026
During the branding work for @codepen.io 2.0, I came up with a lot of cool concepts that didn't (yet!) make it into the marketing pages or anything for various reasons, but they're still really great demos. codepen.io/editor/shsha...
codepen.io
3D RectAreaLight Cube
Three.js RectAreaLight cube
110
Reposted by Shaw
Chris Coyier @chriscoyier.net · 30/07/2026
CodePen 2.0 Noting perhaps my largest personal career accomplishment, which is launching CodePen 2.0. Far more work, believe it or not, than the entire creation of the original CodePen. This isn't the... chriscoyier.net/2026/07/30/codepen-…
chriscoyier.net
CodePen 2.0
Noting perhaps my largest personal career accomplishment, which is launching CodePen 2.0. Far more work, believe it or not, than the entire creation of the original CodePen. This isn't the place to describe every detail of what we did and why we did it. If you're interested, perhaps our Why 2.0? podcast or the What's...
6836
Reposted by Shaw
CodePen @codepen.io · 29/07/2026
You know how we write the HTML emails we're using for our launch email campaign? In MJML! mjml.io It's such a nice language for crafting HTML emails that work across all email clients. You know where we do it? On CodePen (because we support .mjml now). 💪
2352
Reposted by Shaw
Eric Bailey @ericwbailey.website · 29/07/2026
I made an app! What Can't I Press helps you discover what keyboard shortcuts are already claimed by running apps, with a focus on screen readers. This helps prevent you from overriding something someone might rely on to get what they want or need. #a11y github.com/ericwbailey/...
github.com
GitHub - ericwbailey/what-cant-i-press: ⌨️ Lists what keyboard shortcuts are claimed
⌨️ Lists what keyboard shortcuts are claimed. Contribute to ericwbailey/what-cant-i-press development by creating an account on GitHub.
1213231