Shaw @shaw.city · 28/09/2026Blocks 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/2026Cats: I'm fierce and independent! Watch me hunt! Don't touch me! Also Cats: help. claw stuck. 020
Reposted by ShawAdam Argyle @nerdy.dev · 24/09/2026Couple a dorks n their bum-dittys nerdy.dev/camp-night-w... @chriscoyier.netnerdy.devBanjoCSS · September 19, 2026Banjo, guitar, drums, trees, n' mountains. 7503
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 ShawShaw @shaw.city · 23/09/2026Tomorrow 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.comCodePen School | Q&A, Live Coding, Tutorials & More!YouTube video by CodePen 011
Shaw @shaw.city · 23/09/2026Tomorrow 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.comCodePen School | Q&A, Live Coding, Tutorials & More!YouTube video by CodePen 011
Reposted by ShawEric Bailey @ericwbailey.website · 18/09/2026I 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.websiteCSS-Tricks could be a co-opThe 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.ioMultiplayer Cursor with Itty SocketsA code demo by Shaw created on CodePen 040
Reposted by ShawKevin Powell @kevinpowell.co · 17/09/2026I 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_upvxCAUzMyoutu.beDigital Ocean killed CSS-Tricks... againYouTube video by General Musings with Kevin Powell 79723
Shaw @shaw.city · 16/09/2026On 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.ioLongest Alphabetical Word in Sentence - Cassidoo Newsletter ChallengeA code demo by CodePen created on CodePen 171
Shaw @shaw.city · 16/09/2026Don't be late for class. 🧑🏫 @codepen.io School: Live in 10 minutes. youtube.com/live/BFvGpJT...youtube.comCodePen School: Round TwoYouTube video by CodePen 001
Reposted by ShawShaw @shaw.city · 12/09/2026If 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/2026If 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 ShawRoma Komarov @kizu.dev · 12/09/2026Note that my more complicated technique is based on the same simple anchored technique I posted about in 2023 — kizu.dev/shrinkwrap-p... :)kizu.devThe Shrinkwrap Problem: Possible Future SolutionsThere 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/2026Oops. I invented a new CSS shrink-wrap technique and blogged about it. blog.codepen.io/2026/09/11/s...blog.codepen.ioShrink-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/2026Fun 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 ShawCodePen @codepen.io · 11/09/2026Live 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/codepenyoutube.comCodePen School | Q&A, Live Coding, Tutorials & MoreShare 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/2026School 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.comCodePen School | Q&A, Live Coding, Tutorials & MoreYouTube video by CodePen 152
Reposted by ShawBen Evans @ivorjetski.bsky.social · 10/09/2026It'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.comCSS LED ART CHALLENGE!YouTube video by Ben Evans 1126
Shaw @shaw.city · 11/09/2026New & 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... 022
Reposted by ShawShaw @shaw.city · 10/09/2026In 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/2026In 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 ShawBramus @bram.us · 10/09/2026TIL 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.usIntroducing <mermaid-element>, a custom element to display Mermaid diagramsToday 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 ShawShaw @shaw.city · 08/09/2026New 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/2026New 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 ShawChris Coyier @chriscoyier.net · 31/08/2026Woke up excited about subdomains. They are free(ish) and easy. C'mon. www.youtube.com/watch?v=Bi1u...youtube.comSubdomains are awesome. They are like free websites. CodePen can host them easily.YouTube video by CodePen 2252
Reposted by ShawCodePen @codepen.io · 20/08/2026Hosting images on CodePen is, like, pretty good actually. (Quick video on the superpowers: www.youtube.com/watch?v=ANw0...)youtube.comHosting 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 ShawAndré Ruffert @andreruffert.com · 21/08/2026It's been 13 years since I started using @codepen.io 🫶 172
Shaw @shaw.city · 17/08/2026My 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 ShawCodePen @codepen.io · 13/08/2026A 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 ShawChris Coyier @chriscoyier.net · 12/08/2026Pretty 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 ShawJosh Collinsworth @collinsworth.dev · 13/08/2026PSA 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/2026I'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/2026If 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 ShawChris Coyier @chriscoyier.net · 07/08/2026Just me and the GOAT hanging out. 🏄🏽♂️ 3425
Reposted by ShawKevin Powell @kevinpowell.co · 07/08/2026I'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_0RweY2VJcyoutu.beCodePen just got a HUGE upgradeYouTube video by Kevin Powell 3287
Reposted by ShawCodePen @codepen.io · 05/08/2026In 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
Reposted by ShawElaina @elaina.bsky.social · 20/07/2026Wowowowowow an archive of old user interfaces. Let's go back to thissssss typewritten.org/Media/ 0156
Shaw @shaw.city · 03/08/2026We 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 ShawWebDesignMuseum @webdesignmuseum.org · 03/08/2026The diversity of horizontal navigation in 2004 16660152
Shaw @shaw.city · 02/08/2026What’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 ShawCodePen @codepen.io · 01/08/2026What 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/2026Repairs 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.comRescued Pokémon YellowI guess I just want bragging rights, but here's the short story of rescuing Pokémon Yellow. I run "fix your gameboy game for £10" which occasionally … 100
Shaw @shaw.city · 30/07/2026During 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.io3D RectAreaLight CubeThree.js RectAreaLight cube 110
Reposted by ShawChris Coyier @chriscoyier.net · 30/07/2026CodePen 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.netCodePen 2.0Noting 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 ShawCodePen @codepen.io · 29/07/2026You 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 ShawEric Bailey @ericwbailey.website · 29/07/2026I 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.comGitHub - 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