Html codes
Photo
CodePen Blog
Chris’ Corner: Simple, Accessible Multi-Select UI
There’s a nice article by Enzo Manuel Mangano called Checkbox Interactions – The beauty of Layout Animations. In the end, you get some nicely animated checkboxes, essentially:
https://blog.codepen.io/wp-content/uploads/2025/09/CleanShot-2025-09-04-at-12.33.45.gif
I like it.
It’s a modern-looking multiple-choice with very clear UX.
Enzo’s tutorial is all React Native-ified. I think Enzo is a React Native guy and that’s his thing. And that’s fine and makes sense. A lot of time UI like this is part of highly dynamic web apps that deserve that kind of treatment and embracing that style of code to help it live there is fine.
But I wouldn’t want anyone to think that it’s necessary you reach for a tool like React Native to create something like this. This is actually pretty darn simple HTML & CSS that can be quite performant, semantic, and accessible.
Each of those “buttons”, is really this:
Each button is really a
When it’s a label, the whole thing becomes “clickable” then, toggling the checkbox within.
We can hide the actual checkboxes (notice the UI doesn’t actually show them) by applying an accessible screenreader-only class. But each of them remains an interactive element and thus are able to be tabbed to. But because we can’t see them, we should do…
This will ensure there is a visual indicator when any of them are focused. And with that focus, the spacebar will work to activate them like any normal checkbox.
The fun part though is the neat interaction where activating one of the options animated the checkbox in and changes some colors. It’s easy! I promise! We just check if the label has a checked input and make those changes. All right in CSS.
The finished demo, I’d say, is near 100% the same experience as Enzo’s. Cheers!
CodePen Embed Fallback
Chris’ Corner: Simple, Accessible Multi-Select UI
There’s a nice article by Enzo Manuel Mangano called Checkbox Interactions – The beauty of Layout Animations. In the end, you get some nicely animated checkboxes, essentially:
https://blog.codepen.io/wp-content/uploads/2025/09/CleanShot-2025-09-04-at-12.33.45.gif
I like it.
It’s a modern-looking multiple-choice with very clear UX.
Enzo’s tutorial is all React Native-ified. I think Enzo is a React Native guy and that’s his thing. And that’s fine and makes sense. A lot of time UI like this is part of highly dynamic web apps that deserve that kind of treatment and embracing that style of code to help it live there is fine.
But I wouldn’t want anyone to think that it’s necessary you reach for a tool like React Native to create something like this. This is actually pretty darn simple HTML & CSS that can be quite performant, semantic, and accessible.
Each of those “buttons”, is really this:
Italian <svg<path<svgEach button is really a
label, because then you are appropriately connecting the text of the label to the checkbox in an accessible way. I will call out Enzo for this one: his final demo outputs
When it’s a label, the whole thing becomes “clickable” then, toggling the checkbox within.
We can hide the actual checkboxes (notice the UI doesn’t actually show them) by applying an accessible screenreader-only class. But each of them remains an interactive element and thus are able to be tabbed to. But because we can’t see them, we should do…
label {
cursor: pointer;
&:focus-within {
outline: 3px solid orange;
}
} This will ensure there is a visual indicator when any of them are focused. And with that focus, the spacebar will work to activate them like any normal checkbox.
The fun part though is the neat interaction where activating one of the options animated the checkbox in and changes some colors. It’s easy! I promise! We just check if the label has a checked input and make those changes. All right in CSS.
label {
--highlightColor: oklch(0.764 0.1924 65.38);
cursor: pointer;
border: 1px solid white;
&:focus-within {
outline: 3px solid var(--highlightColor);
}
svg {
width: 0;
transition: width 0.66s;
fill: var(--highlightColor);
}
&:has(:checked) {
border-color: var(--highlightColor);
background: color-mix(in srgb, var(--highlightColor), transparent 80%);
svg {
width: 0.88lh;
}
}
} The finished demo, I’d say, is near 100% the same experience as Enzo’s. Cheers!
CodePen Embed Fallback
❤1
Network Types 🌐:
• LAN – Local, home/office
• MAN – City-wide
• WAN – Global (Internet)
• PAN – Personal devices (Bluetooth)
▪︎Topologies: Bus, Star, Ring, Mesh, Tree
▪︎Control: Client–Server, Peer-to-Peer
》Technology: Wired (Ethernet), Wireless (Wi-Fi, 4G/5G)
• LAN – Local, home/office
• MAN – City-wide
• WAN – Global (Internet)
• PAN – Personal devices (Bluetooth)
▪︎Topologies: Bus, Star, Ring, Mesh, Tree
▪︎Control: Client–Server, Peer-to-Peer
》Technology: Wired (Ethernet), Wireless (Wi-Fi, 4G/5G)
CodePen Blog
408: Proxied Third-Party JavaScript
Chris and Stephen hop on the podcast to discuss the concept of a proxy. Possibly the most “gray hat” thing that CodePen does. We use a third-party analytics tool called Fullres. We could just put a link to the
408: Proxied Third-Party JavaScript
Chris and Stephen hop on the podcast to discuss the concept of a proxy. Possibly the most “gray hat” thing that CodePen does. We use a third-party analytics tool called Fullres. We could just put a link to the
CodePen
408: Proxied Third-Party JavaScript
Chris and Stephen hop on the podcast to discuss the concept of a proxy. Possibly the most “gray hat” thing that CodePen does. We use a third-party analytics tool called Fullres. We coul…
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="300" viewBox="0 0 1200 300">
<defs>
<!-- Golden gradient -->
<linearGradient id="goldGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#fff7c0"/>
<stop offset="0.2" stop-color="#f9d976"/>
<stop offset="0.5" stop-color="#b8860b"/>
<stop offset="0.7" stop-color="#f7d98d"/>
<stop offset="1" stop-color="#7c6012"/>
</linearGradient>
<!-- Glossy highlight -->
<linearGradient id="goldGloss" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffffff" stop-opacity="0.9"/>
<stop offset="0.3" stop-color="#ffffff" stop-opacity="0.2"/>
<stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
</linearGradient>
<!-- Inner shadow -->
<filter id="innerShadow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="0" dy="4" result="offsetBlur"/>
<feComposite in="offsetBlur" in2="SourceAlpha" operator="arithmetic"
k2="-1" k3="1" result="innerShadow"/>
<feColorMatrix in="innerShadow" type="matrix"
values="0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 0.6"/>
<feBlend in="SourceGraphic" in2="innerShadow" mode="multiply"/>
</filter>
<!-- Drop shadow -->
<filter id="dropShadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="6" result="blur"/>
<feOffset in="blur" dx="0" dy="10" result="offsetBlur"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Top glossy clip -->
<clipPath id="topHalf">
<rect x="0" y="0" width="1200" height="120"/>
</clipPath>
</defs>
<!-- Background -->
<rect width="100%" height="100%" fill="#0f1724"/>
<!-- Shadow -->
<g transform="translate(30,30)">
<text x="60" y="200"
font-family="Georgia, serif"
font-size="150" font-weight="bold"
fill="#000" opacity="0.7" filter="url(#dropShadow)">
GOLDEN
</text>
</g>
<!-- Main golden text -->
<g filter="url(#innerShadow)">
<text id="goldText" x="60" y="200"
font-family="Georgia, serif"
font-size="150" font-weight="bold"
fill="url(#goldGrad)">
GOLDEN
</text>
<!-- Glossy overlay -->
<g clip-path="url(#topHalf)">
<text x="60" y="200"
font-family="Georgia, serif"
font-size="150" font-weight="bold"
fill="url(#goldGloss)" style="mix-blend-mode:screen; opacity:0.9;">
GOLDEN
</text>
</g>
</g>
<!-- Thin rim highlight -->
<text x="60" y="200"
font-family="Georgia, serif"
font-size="150" font-weight="bold"
fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1">
GOLDEN
</text>
</svg>
CodePen Blog
Chris’ Corner: Terminological Fading
I found myself saying “The Edge” in a recent podcast with Stephen. I was talking about some server-side JavaScript that executes during a web request, and that it was advantageous that it happens at CDN nodes around the world rather than at one location only, so that it’s fast. That was kinda the whole point about “The Edge” is speed.
I don’t hear the term bandied about much anymore, but it’s still a useful architectural concept that many use. Salma Alam-Naylor has a good explainer post.
Take for example, the US West server on AWS. For me, making a request to US West from the UK takes longer than making a request to one of the European servers, due to the distance the data has to travel across the wire.
If you’re using serverless functions for server side rendering to enrich your Jamstack site, you need high availability on global servers in order to make your website fast for everyone in the world coupled with an intelligent network which knows how to route requests to the closest location to the user.
It’s just interesting how terms kinda just chill out in usage over time. They feel like such big important things at the time, that everyone has a thought about, then they just fade away, even if we’re all still doing and using the thing we were talking about.
Even terms like “SPA” (Single Page App) seemed like it’s all anyone wanted to argue about for quite a while there and now I see it chilling out. All the nuance and distinctions between that and a website with regular ol’ links and reloads have come to bear. Concepts like paint holding and view transitions make regular sites feel much more like SPAs and concepts like server side rendering make SPAs work as regular sites anyway. It’s not a fight anymore it’s just technology.
The more you understand, the more rote (and, dare I say, boring) all this becomes. Dave Rupert says:
… once you understand that your technology choices have security, performance, and accessibility considerations you become a much more boring developer. Acknowledging those obligations can sort of strips the fun out of programming, but we’re better for it.
Design, too, can be and benefits from being a bit boring. Fortunately we have grug to guide us.
grug not decorate. grug communicate.
grid keep thing straight. grid bring peace.
grug think: space good only when it help brain see fast.
if icon need tooltip, icon not good.
grug no want award. grug want thing to work.
Chris’ Corner: Terminological Fading
I found myself saying “The Edge” in a recent podcast with Stephen. I was talking about some server-side JavaScript that executes during a web request, and that it was advantageous that it happens at CDN nodes around the world rather than at one location only, so that it’s fast. That was kinda the whole point about “The Edge” is speed.
I don’t hear the term bandied about much anymore, but it’s still a useful architectural concept that many use. Salma Alam-Naylor has a good explainer post.
Take for example, the US West server on AWS. For me, making a request to US West from the UK takes longer than making a request to one of the European servers, due to the distance the data has to travel across the wire.
If you’re using serverless functions for server side rendering to enrich your Jamstack site, you need high availability on global servers in order to make your website fast for everyone in the world coupled with an intelligent network which knows how to route requests to the closest location to the user.
It’s just interesting how terms kinda just chill out in usage over time. They feel like such big important things at the time, that everyone has a thought about, then they just fade away, even if we’re all still doing and using the thing we were talking about.
Even terms like “SPA” (Single Page App) seemed like it’s all anyone wanted to argue about for quite a while there and now I see it chilling out. All the nuance and distinctions between that and a website with regular ol’ links and reloads have come to bear. Concepts like paint holding and view transitions make regular sites feel much more like SPAs and concepts like server side rendering make SPAs work as regular sites anyway. It’s not a fight anymore it’s just technology.
The more you understand, the more rote (and, dare I say, boring) all this becomes. Dave Rupert says:
… once you understand that your technology choices have security, performance, and accessibility considerations you become a much more boring developer. Acknowledging those obligations can sort of strips the fun out of programming, but we’re better for it.
Design, too, can be and benefits from being a bit boring. Fortunately we have grug to guide us.
grug not decorate. grug communicate.
grid keep thing straight. grid bring peace.
grug think: space good only when it help brain see fast.
if icon need tooltip, icon not good.
grug no want award. grug want thing to work.
CodePen
Chris’ Corner: Terminological Fading
I found myself saying “The Edge” in a recent podcast with Stephen. I was talking about some server-side JavaScript that executes during a web request, and that it was advantageous that …
Html codes
Photo
CodePen Blog
409: Our Own Script Injection
Chris and Stephen talk about how we use a Cloudflare Worker & HTMLRewriter to inject a very special
409: Our Own Script Injection
Chris and Stephen talk about how we use a Cloudflare Worker & HTMLRewriter to inject a very special
🔹 Did you know?:
1️⃣
✨ This forces all user input into UPPERCASE.
💡 Advanced: You can combine it with pattern="[A-Z]+" to validate uppercase only.
2️⃣
✨ The download attribute makes the link download a file instead of opening it.
💡 Advanced: You can customize the saved filename like this:
3️⃣
✨ With contenteditable, any element becomes live-editable.
💡 Advanced: Combine it with spellcheck="true" or save changes via JavaScript to create a mini in-browser editor.
1️⃣
<input type="text" placeholder="Uppercase only" style="text-transform: uppercase;">
✨ This forces all user input into UPPERCASE.
💡 Advanced: You can combine it with pattern="[A-Z]+" to validate uppercase only.
2️⃣
<a href="example.pdf" download>Download PDF</a>
✨ The download attribute makes the link download a file instead of opening it.
💡 Advanced: You can customize the saved filename like this:
<a href="report.pdf" download="My_Custom_Report.pdf">Download Report</a>
3️⃣
<p contenteditable="true">You can edit this text directly in the browser ✍️</p>
✨ With contenteditable, any element becomes live-editable.
💡 Advanced: Combine it with spellcheck="true" or save changes via JavaScript to create a mini in-browser editor.
CodePen Blog
Chris’ Corner: Little Bits of CSS
Adam Argyle is clear with some 2025 CSS advice:
I think every front-end developer should know how to enable page transitions, transition a
Nobody asked me, but if I had to pick a favorite of Adam’s six, it’s all the stuff about animating
Jeremy Keith also did a little post with CSS snippets in it, including a bit he overlaps with Adam on, where you by default opt-in to View Transitions, even if that’s all you do.
The idea is you get the cross-fade right way and then are set up to sprinkle in more cross-page animation when you’re ready. Una Kravets has a post about the very new
I’m intrigued by the idea of being able to abstract away the logic in CSS when we want to. Perhaps making it more reusable and making the more declarative parts of CSS easier to read.
Here’s another. I had absolutely no idea design control over the caret was coming to CSS (the thing in editable areas where you’re typing, that is usually a blinking vertical line). I guess I knew we had
Jump over to the Igalia blog post to see the video on that one.
OK that’s all for this week. Er wait actually you gotta watch Julia Miocene’s Chicken video. Now I’m done.
Chris’ Corner: Little Bits of CSS
Adam Argyle is clear with some 2025 CSS advice:
I think every front-end developer should know how to enable page transitions, transition a
<dialog, popover, and , animate light n’ dark gradient text, type safe their CSS system, and add springy easing to animation.Nobody asked me, but if I had to pick a favorite of Adam’s six, it’s all the stuff about animating
<dialog, popover, and . There is a lot of interesting new-ish CSS stuff in there that will help you all around, between allow-discrete, overlay, ::backdrop, :popover-open, @starting-style, and more. /* enable transitions, allow-discrete, define timing */
[popover], dialog, ::backdrop {
transition: display 1s allow-discrete, overlay 1s allow-discrete, opacity 1s;
opacity: 0;
}
/* ON STAGE */
:popover-open,
:popover-open::backdrop,
[open],
[open]::backdrop {
opacity: 1;
}
/* OFF STAGE */
/* starting-style for pre-positioning (enter stage from here) */
@starting-style {
:popover-open,
:popover-open::backdrop,
[open],
[open]::backdrop {
opacity: 0;
}
} Jeremy Keith also did a little post with CSS snippets in it, including a bit he overlaps with Adam on, where you by default opt-in to View Transitions, even if that’s all you do.
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
}
} The idea is you get the cross-fade right way and then are set up to sprinkle in more cross-page animation when you’re ready. Una Kravets has a post about the very new
@function stuff in CSS with a bunch of examples. I enjoyed this little snippet: /* Take up 1fr of space for the sidebar on screens smaller than 640px, and take up the --sidebar-width for larger screens. 20ch is the fallback. */
@function --layout-sidebar(--sidebar-width: 20ch) {
result: 1fr;
@media (width > 640px) {
result: var(--sidebar-width) auto;
}
}
.layout {
display: grid;
grid-template-columns: --layout-sidebar();
} I’m intrigued by the idea of being able to abstract away the logic in CSS when we want to. Perhaps making it more reusable and making the more declarative parts of CSS easier to read.
Here’s another. I had absolutely no idea design control over the caret was coming to CSS (the thing in editable areas where you’re typing, that is usually a blinking vertical line). I guess I knew we had
caret-color, which is prettttttty niche if you ask me. But now apparently we’re given control over the shape and literal animation of the caret. textarea {
color: white;
background: black;
caret-shape: block;
caret-animation: manual;
animation: caret-block 2s step-end infinite;
}
@keyframes caret-block {
0% { caret-color: #00d2ff; }
50% { caret-color: #ffa6b9; }
} Jump over to the Igalia blog post to see the video on that one.
OK that’s all for this week. Er wait actually you gotta watch Julia Miocene’s Chicken video. Now I’m done.
CodePen
Chris’ Corner: Little Bits of CSS
Adam Argyle is clear with some 2025 CSS advice: I think every front-end developer should know how to enable page transitions, transition a <dialog>, popover, and <detai…
❤1
CodePen Blog
410: Trying to help humans in an industry that is becoming increasingly non-human
Chris & Marie jump on the podcast to talk about just how drastically customer support has changed over the last few years. We still exclusively do customer support over email. Incoming email from real customers who need a hand with something where they type out that email in plain languages themselves are few and far between. Instead we get an onslaught of noise from users that don’t exist about Pens and situations that don’t exist. The influence of agentic AI is massive here, some of it with nefarious intent and some not. All of it needs work to mitigate.
Time Jumps
* 00:07 How much support has changed in the last 2 years
* 01:12 How do we do support at CodePen in 2025
* 07:41 How much noise AI has added to support
* 14:02 Verifying accounts before they’re allowed to use support or CodePen
* 23:05 Some of the changes we’ve made to help deal with AI
* 29:50 The benefits of learning to code with AI
410: Trying to help humans in an industry that is becoming increasingly non-human
Chris & Marie jump on the podcast to talk about just how drastically customer support has changed over the last few years. We still exclusively do customer support over email. Incoming email from real customers who need a hand with something where they type out that email in plain languages themselves are few and far between. Instead we get an onslaught of noise from users that don’t exist about Pens and situations that don’t exist. The influence of agentic AI is massive here, some of it with nefarious intent and some not. All of it needs work to mitigate.
Time Jumps
* 00:07 How much support has changed in the last 2 years
* 01:12 How do we do support at CodePen in 2025
* 07:41 How much noise AI has added to support
* 14:02 Verifying accounts before they’re allowed to use support or CodePen
* 23:05 Some of the changes we’ve made to help deal with AI
* 29:50 The benefits of learning to code with AI
CodePen
410: Trying to help humans in an industry that is becoming increasingly non-human
Chris & Marie jump on the podcast to talk about just how drastically customer support has changed over the last few years. We still exclusively do customer support over email. Incoming email fr…
Html codes
Photo
CodePen Blog
Chris’ Corner: Word Search
My daughter had a little phase of being into Word Searches. I found it to be a cool dad moment when I was like “I’ll make you a tool to make them!”. That’s what she was into. She liked doing them OK, but she really liked the idea of making them. So my tool starts with a blank grid where you can type in your words, then fill in the blanks with random letters, then print it.
https://blog.codepen.io/wp-content/uploads/2025/09/CleanShot-2025-09-23-at-11.06.40.gif
Perhaps unsurprisingly, this type of simple game with simple well-defined interactions is rife for front-end developer experimentation.
Interestingly, I’ve found most takes on HTML/CSS/JavaScript Word Searches to be more about the experience of solving them, which is just as interesting! Let’s look at some.
Christian Collosi’s Version on
Canvas is nice here as lines and arcs can be drawn at really specific coordinates to “circle” the words as you interact with it, and stay circled when you find a correct word.
https://blog.codepen.io/wp-content/uploads/2025/09/CleanShot-2025-09-24-at-08.30.40.gif
Mads Stoumann’s Pure CSS Version
You click on the letters individually, and if the ones you have clicked on match a word, it changes background to let you know you’ve got it. This all happens with s and simpler-than-you’d-think
https://blog.codepen.io/wp-content/uploads/2025/09/Screenshot-2025-09-24-at-8.41.43-AM-1024x529.png
Kevin Newcombe’s Responsive word search
The responsive-ness of Kevin’s approach here is actually really cool. It doesn’t just scale, it literally changes the columns/rows of the puzzle itself. But I’m actually even more into the SVG-drawn lines where you make guesses and the SVG-drawn circles around the successful guesses. Some sort of similar work here.
https://blog.codepen.io/wp-content/uploads/2025/09/CleanShot-2025-09-24-at-11.48.33.gif
Kit Jenson’s Word Search in Color
Gotta love the aesthetics here! Just not a game you usually see a lot of color in, so nice to see some playing in that direction.
https://blog.codepen.io/wp-content/uploads/2025/09/CleanShot-2025-09-25-at-13.03.57.gif
Part of what makes me so damn proud of the CodePen community is that this is really the tip of the iceberg of experimentation in this very niche thing. Go around exploring for this sort of thing and you’ll find loads more.
Chris’ Corner: Word Search
My daughter had a little phase of being into Word Searches. I found it to be a cool dad moment when I was like “I’ll make you a tool to make them!”. That’s what she was into. She liked doing them OK, but she really liked the idea of making them. So my tool starts with a blank grid where you can type in your words, then fill in the blanks with random letters, then print it.
https://blog.codepen.io/wp-content/uploads/2025/09/CleanShot-2025-09-23-at-11.06.40.gif
Perhaps unsurprisingly, this type of simple game with simple well-defined interactions is rife for front-end developer experimentation.
Interestingly, I’ve found most takes on HTML/CSS/JavaScript Word Searches to be more about the experience of solving them, which is just as interesting! Let’s look at some.
Christian Collosi’s Version on
Canvas is nice here as lines and arcs can be drawn at really specific coordinates to “circle” the words as you interact with it, and stay circled when you find a correct word.
https://blog.codepen.io/wp-content/uploads/2025/09/CleanShot-2025-09-24-at-08.30.40.gif
Mads Stoumann’s Pure CSS Version
You click on the letters individually, and if the ones you have clicked on match a word, it changes background to let you know you’ve got it. This all happens with s and simpler-than-you’d-think
:has(:checked + :checked ...) selectors. https://blog.codepen.io/wp-content/uploads/2025/09/Screenshot-2025-09-24-at-8.41.43-AM-1024x529.png
Kevin Newcombe’s Responsive word search
The responsive-ness of Kevin’s approach here is actually really cool. It doesn’t just scale, it literally changes the columns/rows of the puzzle itself. But I’m actually even more into the SVG-drawn lines where you make guesses and the SVG-drawn circles around the successful guesses. Some sort of similar work here.
https://blog.codepen.io/wp-content/uploads/2025/09/CleanShot-2025-09-24-at-11.48.33.gif
Kit Jenson’s Word Search in Color
Gotta love the aesthetics here! Just not a game you usually see a lot of color in, so nice to see some playing in that direction.
https://blog.codepen.io/wp-content/uploads/2025/09/CleanShot-2025-09-25-at-13.03.57.gif
Part of what makes me so damn proud of the CodePen community is that this is really the tip of the iceberg of experimentation in this very niche thing. Go around exploring for this sort of thing and you’ll find loads more.
This media is not supported in your browser
VIEW IN TELEGRAM
🎬 Sora 2: video AI gets a major upgrade
OpenAI has released Sora 2, its updated video generator.
What’s new:
• More realistic physics and object behavior
• Synced sound and dialogue
• Greater control over style and scene flow
• Ability to insert yourself or friends into videos with appearance + voice intact
Access will roll out gradually via invites (starting in the US & Canada). Free tier comes with “generous limits,” while Sora 2 Pro offers higher-quality generation under subscription.
AI Post 🪙 | Our X 🥇
OpenAI has released Sora 2, its updated video generator.
What’s new:
• More realistic physics and object behavior
• Synced sound and dialogue
• Greater control over style and scene flow
• Ability to insert yourself or friends into videos with appearance + voice intact
Access will roll out gradually via invites (starting in the US & Canada). Free tier comes with “generous limits,” while Sora 2 Pro offers higher-quality generation under subscription.
AI Post 🪙 | Our X 🥇
CodePen Blog
411: The Power of Tree-Sitter
Alex and Chris hop on the show to talk about a bit of technology that Alex calls “The 2nd best technological choice he’s ever made.” That technology is called Tree-sitter. It’s a code parsing tool for building ASTs (Abstract Syntax Trees) out of code. GitHub uses it to power search and “go to” functionality. The creators now work on Zen, where a code parser is paramount. We use it to understand an entire Pen very quickly so we can understand how it all links together (among other things) and make a plan for how to process the Pen (a “build plan”). It’s fast, accurate, forgiving, and extensible. Just a heck of a learning curve.
Jump Links
* 00:07 CodePen 2.0 is more than just a fresh coat of paint
* 03:00 Treesitter explained
* 12:04 Making the right choices with technology
* 21:50 How we parse your code
* 26:10 We don’t want you to have to be in config hell
* 28:48 Type type type stop see what happens
411: The Power of Tree-Sitter
Alex and Chris hop on the show to talk about a bit of technology that Alex calls “The 2nd best technological choice he’s ever made.” That technology is called Tree-sitter. It’s a code parsing tool for building ASTs (Abstract Syntax Trees) out of code. GitHub uses it to power search and “go to” functionality. The creators now work on Zen, where a code parser is paramount. We use it to understand an entire Pen very quickly so we can understand how it all links together (among other things) and make a plan for how to process the Pen (a “build plan”). It’s fast, accurate, forgiving, and extensible. Just a heck of a learning curve.
Jump Links
* 00:07 CodePen 2.0 is more than just a fresh coat of paint
* 03:00 Treesitter explained
* 12:04 Making the right choices with technology
* 21:50 How we parse your code
* 26:10 We don’t want you to have to be in config hell
* 28:48 Type type type stop see what happens
CodePen
411: The Power of Tree-Sitter
Alex and Chris hop on the show to talk about a bit of technology that Alex calls “The 2nd best technological choice he’s ever made.” That technology is called Tree-sitter. It̵…
CodePen Blog
Chris’ Corner: Discontent
Nothing is above a little healthy criticism.
Here’s Den Odell’s article We Keep Reinventing CSS, but Styling Was Never the Problem.
It’s easy to forget what CSS was originally designed for: documents. You’d write some HTML, style a few headings and paragraphs, maybe float an image to the left, and call it a day. In that world, global styles made sense. The cascade was helpful. Inheritance was elegant.
Fast-forward a couple of decades and we’re building highly interactive, component-based, state-driven, design-system-heavy applications, still with a language meant to style a résumé in the early 2000s.
CSS wasn’t built for encapsulated components. It wasn’t built for dynamic theming or runtime configuration or hydration mismatches. So we’ve spent years bolting on strategies to make it work.
If I can critique the critique, it makes some good and astute points, but pitting CSS evolution as the enemy up front doesn’t sit right. CSS itself, in my opinion, is doing great. It’s not the job of CSS to chase trends or bend toward fickle developer tooling trends. To be fair, Den also says it’s not really the fault of CSS, it’s a matter of choosing trade-offs with your eyes open, which I fully agree with.
Jono Alderson isn’t pleased, really, with modern web development entirely. I’ll quote some of his intro:
Most websites are awful.
Not just slow – awful. Bloated, fragile, over-engineered disasters. They load slowly, render erratically, and hide their content behind megabytes of JavaScript. They glitch on mobile. They frustrate users and confuse search engines. They’re impossible to maintain. And somehow, we’re calling this progress. […]
This isn’t evolution. It’s self-inflicted complexity. And we’ve normalised it – because somewhere along the way, we started building websites for developers, not for users.
Go look around at “modern” media-driven sites and you’ll see he’s not wrong. We all see it every day. It’s almost embarrassing these days to tell people you make websites, because everybody knows websites are pretty rough these days.
If I can, again, critique the critique, it’s that nobody (you, me, Jono) need to do this. The web isn’t forcing us to do this. The web is amazingly backward compatible. If you are nostalgic for some way of building websites gone by, well, just start doing it that way again, because it will still work. Jono does mention this, but misses naming the real enemy: the companies themselves that put up with this and hire specifically to enforce it. I can and do say you don’t need to build websites with the latest in JavaScript cargo-culting, but in order to get a decent paying job in web development, well, you just might have to. That’s the real shame here. Yes this is a problem, and we’re not going to fix it unless companies start writing checks to employees to remove cruft and remove complexity and give freedom to developers who care to improve the situation.
For a random little bonus… ain’t it a shame the lack of love for
Chris’ Corner: Discontent
Nothing is above a little healthy criticism.
Here’s Den Odell’s article We Keep Reinventing CSS, but Styling Was Never the Problem.
It’s easy to forget what CSS was originally designed for: documents. You’d write some HTML, style a few headings and paragraphs, maybe float an image to the left, and call it a day. In that world, global styles made sense. The cascade was helpful. Inheritance was elegant.
Fast-forward a couple of decades and we’re building highly interactive, component-based, state-driven, design-system-heavy applications, still with a language meant to style a résumé in the early 2000s.
CSS wasn’t built for encapsulated components. It wasn’t built for dynamic theming or runtime configuration or hydration mismatches. So we’ve spent years bolting on strategies to make it work.
If I can critique the critique, it makes some good and astute points, but pitting CSS evolution as the enemy up front doesn’t sit right. CSS itself, in my opinion, is doing great. It’s not the job of CSS to chase trends or bend toward fickle developer tooling trends. To be fair, Den also says it’s not really the fault of CSS, it’s a matter of choosing trade-offs with your eyes open, which I fully agree with.
Jono Alderson isn’t pleased, really, with modern web development entirely. I’ll quote some of his intro:
Most websites are awful.
Not just slow – awful. Bloated, fragile, over-engineered disasters. They load slowly, render erratically, and hide their content behind megabytes of JavaScript. They glitch on mobile. They frustrate users and confuse search engines. They’re impossible to maintain. And somehow, we’re calling this progress. […]
This isn’t evolution. It’s self-inflicted complexity. And we’ve normalised it – because somewhere along the way, we started building websites for developers, not for users.
Go look around at “modern” media-driven sites and you’ll see he’s not wrong. We all see it every day. It’s almost embarrassing these days to tell people you make websites, because everybody knows websites are pretty rough these days.
If I can, again, critique the critique, it’s that nobody (you, me, Jono) need to do this. The web isn’t forcing us to do this. The web is amazingly backward compatible. If you are nostalgic for some way of building websites gone by, well, just start doing it that way again, because it will still work. Jono does mention this, but misses naming the real enemy: the companies themselves that put up with this and hire specifically to enforce it. I can and do say you don’t need to build websites with the latest in JavaScript cargo-culting, but in order to get a decent paying job in web development, well, you just might have to. That’s the real shame here. Yes this is a problem, and we’re not going to fix it unless companies start writing checks to employees to remove cruft and remove complexity and give freedom to developers who care to improve the situation.
For a random little bonus… ain’t it a shame the lack of love for
sin() and cos() in CSS? Most hated?! Jeepers.CodePen
Chris’ Corner: Discontent
Nothing is above a little healthy criticism. Here’s Den Odell’s article We Keep Reinventing CSS, but Styling Was Never the Problem. It’s easy to forget what CSS was originally designed …