🌿 Did You Know AI Images Harm the Planet?
Creating one AI image with tools like DALL·E or Midjourney can use more energy than a ChatGPT reply.
Why?
Because generating a single image activates large GPU-powered servers for several seconds, consuming significant electricity—often from fossil fuels.
🔌 Studies show:
1 AI image ≈ 5–10 times more energy than a Google search
1000 images = several kg of CO₂ emissions
✅ How to Create Smarter, Greener AI Art:
🎯 Generate only one image — avoid unnecessary re-rolls
📏 Use smaller sizes like 512x512 when possible
🔄 Reuse or slightly edit existing images
🧠 Use AI art only when needed, not just for fun
Let’s create with purpose, not pollution.
Art can be beautiful — and responsible.
🙏Please share this post
#GreenAI #EcoPrompt #SustainableDesign #AIandClimate #SmartCreativity
Creating one AI image with tools like DALL·E or Midjourney can use more energy than a ChatGPT reply.
Why?
Because generating a single image activates large GPU-powered servers for several seconds, consuming significant electricity—often from fossil fuels.
🔌 Studies show:
1 AI image ≈ 5–10 times more energy than a Google search
1000 images = several kg of CO₂ emissions
✅ How to Create Smarter, Greener AI Art:
🎯 Generate only one image — avoid unnecessary re-rolls
📏 Use smaller sizes like 512x512 when possible
🔄 Reuse or slightly edit existing images
🧠 Use AI art only when needed, not just for fun
Let’s create with purpose, not pollution.
Art can be beautiful — and responsible.
🙏Please share this post
#GreenAI #EcoPrompt #SustainableDesign #AIandClimate #SmartCreativity
❤1
browser_progress_.html
1.7 KB
Do you know this animation?
CodePen Blog
Chris’ Corner: Tokens
Mr. Brad Frost, and his brother Ian, have a new course they are selling called Subatomic: The Complete Guide to Design Tokens.
To be honest, I was a smidge skeptical. I know what a design token is. It’s a variable of a color or
But then we had those fellas on ShopTalk Show and I’ve updated my thinking that you really do want to lean on the expertise of people that have done this time and time again at scale.
(p.s. they also gave us a 20% discount code when they were on the show: SHOPTALKSHOWISAWESOME)
Spoiler: they advocate for a three-tier system of custom properties. The first is just the raw ingredients. Colors, but you’re just naming the color; sizes, but you’re just naming the sizes. Then there is this middle tier where you are essentially crafting a theme from those raw ingredients. And this layer is the most important, as it gives you this perfect layer of abstraction where you’re both not reaching into the raw ingredients and you’re not being too overly specific, like naming individual parts of components. The third layer should be avoided as best as it can, but if you absolutely need to get hyper specific, this is where you do it, and are still keeping in the land of custom properties.
This feels particularly smart to me, and I wish I had the benefit of the Frost Brother’s expertise on this before building some custom property systems I have built in the past. I tend to have that first layer with just the raw ingredients, and then jump right to what they’d call the third tier, which leads to a real blowing up of how many custom properties are in use, to the point that it feels overly cumbersome and like the whole system isn’t even helping that much. I’ll definitely be thinking about the theming tier next time I have a good refactoring opportunity.
Brad has also been steady on his global design system idea. I’ve posted my thoughts on this before, but I keep coming back to this one:
It feels like every decision you make will chip away at who will use it.
I’m fascinated at seeing how decisions get made that keep this thing as “global” as possible. That absolutely must be done, otherwise it’s just another design system which I thinks falls short of the goal. I appreciated Brian’s deep thoughts on it all as well, and I’m basically writing all this as an excuse to link to that.
Would a global design system have any design to it at all? Maybe; maybe not. It makes me wonder if the era of “flat design” that it seems like we’ve been in for a decade or so was partially the result of design systems, where the simpler things look the more practical it is to build all the “lego blocks” of a cohesive aesthetic. But it’s likely design trends move on. Maybe flat is over. Are design systems ready for very fancy/complex looks? Definitely worth a read is Amelia’s thoughts on “balancing the hard structure and soft flexibility” of UIs.
Speaking of design tokens, designtokens.fyi is a nice site for defining all the terms that design systems/tokens people like to throw around. A site with word definitions can be awfully boring so I appreciate the fun design here. I like the idea of calling a value system a “t-shirt” where you’re actually defining, say, a set of padding options, but the options follow the mental model of t-shirt sizes.
Sometimes you just need to look and see what other people are doing. In design, there always has been and will be design galleries full of inspirational stuff. But instead of linking to one of those, I’m going to link to to the[...]
Chris’ Corner: Tokens
Mr. Brad Frost, and his brother Ian, have a new course they are selling called Subatomic: The Complete Guide to Design Tokens.
To be honest, I was a smidge skeptical. I know what a design token is. It’s a variable of a color or
font-family or something. I pretty much only work on websites, so that exposes itself as a --custom-property and I already know that using those to abstract common usage of colors and fonts is smart and helpful. Done. I get that people managing a whole fleet of sites (and apps running in who-knows-what technologies) need a fancier token system, but that ain’t me.But then we had those fellas on ShopTalk Show and I’ve updated my thinking that you really do want to lean on the expertise of people that have done this time and time again at scale.
(p.s. they also gave us a 20% discount code when they were on the show: SHOPTALKSHOWISAWESOME)
Spoiler: they advocate for a three-tier system of custom properties. The first is just the raw ingredients. Colors, but you’re just naming the color; sizes, but you’re just naming the sizes. Then there is this middle tier where you are essentially crafting a theme from those raw ingredients. And this layer is the most important, as it gives you this perfect layer of abstraction where you’re both not reaching into the raw ingredients and you’re not being too overly specific, like naming individual parts of components. The third layer should be avoided as best as it can, but if you absolutely need to get hyper specific, this is where you do it, and are still keeping in the land of custom properties.
This feels particularly smart to me, and I wish I had the benefit of the Frost Brother’s expertise on this before building some custom property systems I have built in the past. I tend to have that first layer with just the raw ingredients, and then jump right to what they’d call the third tier, which leads to a real blowing up of how many custom properties are in use, to the point that it feels overly cumbersome and like the whole system isn’t even helping that much. I’ll definitely be thinking about the theming tier next time I have a good refactoring opportunity.
Brad has also been steady on his global design system idea. I’ve posted my thoughts on this before, but I keep coming back to this one:
It feels like every decision you make will chip away at who will use it.
I’m fascinated at seeing how decisions get made that keep this thing as “global” as possible. That absolutely must be done, otherwise it’s just another design system which I thinks falls short of the goal. I appreciated Brian’s deep thoughts on it all as well, and I’m basically writing all this as an excuse to link to that.
Would a global design system have any design to it at all? Maybe; maybe not. It makes me wonder if the era of “flat design” that it seems like we’ve been in for a decade or so was partially the result of design systems, where the simpler things look the more practical it is to build all the “lego blocks” of a cohesive aesthetic. But it’s likely design trends move on. Maybe flat is over. Are design systems ready for very fancy/complex looks? Definitely worth a read is Amelia’s thoughts on “balancing the hard structure and soft flexibility” of UIs.
Speaking of design tokens, designtokens.fyi is a nice site for defining all the terms that design systems/tokens people like to throw around. A site with word definitions can be awfully boring so I appreciate the fun design here. I like the idea of calling a value system a “t-shirt” where you’re actually defining, say, a set of padding options, but the options follow the mental model of t-shirt sizes.
Sometimes you just need to look and see what other people are doing. In design, there always has been and will be design galleries full of inspirational stuff. But instead of linking to one of those, I’m going to link to to the[...]
Html codes
CodePen Blog Chris’ Corner: Tokens Mr. Brad Frost, and his brother Ian, have a new course they are selling called Subatomic: The Complete Guide to Design Tokens. To be honest, I was a smidge skeptical. I know what a design token is. It’s a variable of a…
“Home of the internet’s finest website headlines.” I love a good headline, myself. I’ve seen far too many sites that do a terrible job of just saying what their point is.
🎨 CSS Neon Glow Card
Give your project a cyberpunk vibe with this glowing neon card effect — no JS required.
💡 Use it for profile cards, login screens, or cool landing pages.
✨ More vibrant CSS magic every day — only at @Html_codee
#css #neon #frontend #htmlcodee #webdesign #uikit
Give your project a cyberpunk vibe with this glowing neon card effect — no JS required.
<div class="neon-card">
<h2>Html_codee</h2>
<p>Bright ideas in glowing code!</p>
</div>
<style>
body {
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.neon-card {
padding: 2rem;
border-radius: 15px;
background: #111;
color: #0ff;
box-shadow: 0 0 10px #0ff, 0 0 40px #0ff;
font-family: monospace;
text-align: center;
transition: 0.3s ease;
}
.neon-card:hover {
box-shadow: 0 0 20px #0ff, 0 0 60px #0ff;
transform: scale(1.05);
}
</style>
💡 Use it for profile cards, login screens, or cool landing pages.
✨ More vibrant CSS magic every day — only at @Html_codee
#css #neon #frontend #htmlcodee #webdesign #uikit
🌟 CSS Text Flicker Animation
Want to give your title that retro hacker screen vibe? Here’s a cool flicker animation in pure CSS:
💡 Use it for headers, hacker intros, or tech-themed pages.
📡 Stay tuned to @Html_codee for more motion-powered CSS gems!
#css #animation #textfx #frontend #htmlcodee #retro
Want to give your title that retro hacker screen vibe? Here’s a cool flicker animation in pure CSS:
<h1 class="flicker">Html_codee Hacks</h1>
<style>
body {
background: #000;
color: #0f0;
font-family: monospace;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.flicker {
font-size: 2.5rem;
animation: flickerAnim 2s infinite;
}
@keyframes flickerAnim {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
opacity: 1;
}
20%, 22%, 24%, 55% {
opacity: 0.1;
}
}
</style>
💡 Use it for headers, hacker intros, or tech-themed pages.
📡 Stay tuned to @Html_codee for more motion-powered CSS gems!
#css #animation #textfx #frontend #htmlcodee #retro
🚀 Top 5 New & Useful HTML Tools in 2025!
Supercharge your web dev projects with these gems 🔧💡
1. 🧩 HTMX (2025 Update)
Write less JavaScript! Use just HTML attributes.
👉 htmx.org
2. 🎨 Open Props
Modern CSS variables you can plug into any project.
👉 open-props.style
3. 🧪 WebContainers by StackBlitz
Run Node.js in the browser with just HTML.
👉 stackblitz.com/webcontainers
4. 📦 IconBuddy 2.0
Access 250,000+ SVG icons with ease.
👉 iconbuddy.app
5. 📱 Responsive Viewer Tools
Test your HTML on all screen sizes at once.
Try: Responsively App or Chrome Multi-screen View
✅ Save this post and follow @Html_codee for daily HTML/CSS/JS tips!
🗨️ Which tool is your favorite?
Supercharge your web dev projects with these gems 🔧💡
1. 🧩 HTMX (2025 Update)
Write less JavaScript! Use just HTML attributes.
👉 htmx.org
2. 🎨 Open Props
Modern CSS variables you can plug into any project.
👉 open-props.style
3. 🧪 WebContainers by StackBlitz
Run Node.js in the browser with just HTML.
👉 stackblitz.com/webcontainers
4. 📦 IconBuddy 2.0
Access 250,000+ SVG icons with ease.
👉 iconbuddy.app
5. 📱 Responsive Viewer Tools
Test your HTML on all screen sizes at once.
Try: Responsively App or Chrome Multi-screen View
✅ Save this post and follow @Html_codee for daily HTML/CSS/JS tips!
🗨️ Which tool is your favorite?
htmx.org
</> htmx - high power tools for html
htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext
htmx is small (~14k min.gz’d), dependency-free, extendable…
htmx is small (~14k min.gz’d), dependency-free, extendable…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TRX Wallet Creator</title>
<script src="https://cdn.jsdelivr.net/npm/tronweb/dist/TronWeb.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background: #0b0c10;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
padding: 30px;
}
.wallet-box {
background: #1f2833;
padding: 20px;
border-radius: 10px;
width: 100%;
max-width: 500px;
box-shadow: 0 0 10px #45a29e;
}
button {
background: #66fcf1;
border: none;
color: #0b0c10;
padding: 10px 20px;
margin: 10px 0;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}
input {
width: 100%;
padding: 10px;
margin-top: 5px;
background: #0b0c10;
color: #66fcf1;
border: 1px solid #66fcf1;
border-radius: 5px;
font-family: monospace;
}
label {
margin-top: 15px;
display: block;
}
</style>
</head>
<body>
<h1>🚀 TRX Wallet Creator</h1>
<div class="wallet-box">
<button onclick="generateWallet()">Generate New Wallet</button>
<label>TRX Address:
<input type="text" id="address" readonly>
</label>
<label>Private Key:
<input type="text" id="privateKey" readonly>
</label>
<label>Public Key:
<input type="text" id="publicKey" readonly>
</label>
<button onclick="copyAll()">📋 Copy All</button>
</div>
<script>
async function generateWallet() {
const tronWeb = new TronWeb({
fullHost: 'https://api.trongrid.io'
});
const account = await tronWeb.createAccount();
document.getElementById("address").value = account.address.base58;
document.getElementById("privateKey").value = account.privateKey;
document.getElementById("publicKey").value = account.publicKey;
}
function copyAll() {
const text = `
TRX Address: ${document.getElementById("address").value}
Private Key: ${document.getElementById("privateKey").value}
Public Key: ${document.getElementById("publicKey").value}
`.trim();
navigator.clipboard.writeText(text).then(() => {
alert("Copied to clipboard!");
});
}
</script>
</body>
</html>
🎮 CSS Game Button Pulse + Hover Glow
Level up your game UI or call-to-action buttons with this combo of pulse + hover glow effect — all in CSS!
🔥 This combo gives your button life — perfect for hero sections, dashboards, and game starts!
🎯 Follow @Html_codee for more stylish CSS tricks.
#css #animation #gameui #frontend #htmlcodee #creativecode
Level up your game UI or call-to-action buttons with this combo of pulse + hover glow effect — all in CSS!
<button class="pulse-button">Start Game</button>
<style>
body {
background: #111;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.pulse-button {
background: #28a745;
color: white;
padding: 1rem 2rem;
font-size: 1.2rem;
border: none;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 0 0 rgba(40, 167, 69, 0.7);
animation: pulse 2s infinite;
transition: 0.3s ease;
}
.pulse-button:hover {
box-shadow: 0 0 15px #28a745, 0 0 30px #28a745;
transform: scale(1.05);
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
}
70% {
box-shadow: 0 0 0 20px rgba(40, 167, 69, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
}
}
</style>
🔥 This combo gives your button life — perfect for hero sections, dashboards, and game starts!
🎯 Follow @Html_codee for more stylish CSS tricks.
#css #animation #gameui #frontend #htmlcodee #creativecode
CodePen Blog
401: Outgoing Email
Hi!
We’re back!
Weird right? It’s been over 2 years.
We took a break after episode 400, not because we ran out of things to talk about, but because we were so focused on our CodePen 2.0 work, it got old not being able to discuss it yet. We’ll be talking plenty about that going forward. But CodePen has a ton of moving parts, so we’ll be talking about all of it.
This week we’ll be kicking off the podcast again talking about a huge and vital bit of CodePen infastructure: our email system. Outgoing email, that is. We get plenty of incoming email from y’all as well, but this is about the app itself sending email.
Timeline
* 00:06 We’re back!
* 01:22 Our transactional email system
* 05:21 Templating in Postmark
* 08:31 Hitting APIs to send emails
* 10:23 Building a sponsored email
* 17:20 Marie’s Monday morning routine
* 24:19 Analytics and metrics
* 26:55 Dealing with large images
* 30:12 MGML framework for email
Links
* Postmark
* SparkPost
* Cloudflare R2
* MJML
* BuySellAds
401: Outgoing Email
Hi!
We’re back!
Weird right? It’s been over 2 years.
We took a break after episode 400, not because we ran out of things to talk about, but because we were so focused on our CodePen 2.0 work, it got old not being able to discuss it yet. We’ll be talking plenty about that going forward. But CodePen has a ton of moving parts, so we’ll be talking about all of it.
This week we’ll be kicking off the podcast again talking about a huge and vital bit of CodePen infastructure: our email system. Outgoing email, that is. We get plenty of incoming email from y’all as well, but this is about the app itself sending email.
Timeline
* 00:06 We’re back!
* 01:22 Our transactional email system
* 05:21 Templating in Postmark
* 08:31 Hitting APIs to send emails
* 10:23 Building a sponsored email
* 17:20 Marie’s Monday morning routine
* 24:19 Analytics and metrics
* 26:55 Dealing with large images
* 30:12 MGML framework for email
Links
* Postmark
* SparkPost
* Cloudflare R2
* MJML
* BuySellAds
Postmarkapp
Postmark: Fast, Reliable Email Delivery Service | SMTP | API
Send transactional and marketing emails and get them to the inbox on time, every time. Postmark is a fast and reliable email delivery service for developers.
🔮 CSS Magic Text Border Animation
Make your text pop with this mesmerizing animated border effect — no JavaScript needed!
✨ Use this for headers, nameplates, or anywhere you want dramatic flair.
Follow @Html_codee for more CSS spells daily 💫
#css #animation #border #frontend #htmlcodee #creativecode
Make your text pop with this mesmerizing animated border effect — no JavaScript needed!
<h2 class="magic-border">Html_codee Magic</h2>
<style>
body {
background: #000;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.magic-border {
font-size: 2.5rem;
color: white;
padding: 1rem 2rem;
border: 3px solid transparent;
border-image: linear-gradient(270deg, #ff00cc, #3333ff, #0ff, #ff00cc);
border-image-slice: 1;
animation: borderMove 5s linear infinite;
background-clip: border-box;
font-family: 'Courier New', monospace;
}
@keyframes borderMove {
0% {
border-image-source: linear-gradient(270deg, #ff00cc, #3333ff, #0ff, #ff00cc);
}
100% {
border-image-source: linear-gradient(630deg, #ff00cc, #3333ff, #0ff, #ff00cc);
}
}
</style>
✨ Use this for headers, nameplates, or anywhere you want dramatic flair.
Follow @Html_codee for more CSS spells daily 💫
#css #animation #border #frontend #htmlcodee #creativecode
Animated CDC design
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="cyber-bg" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#0f0c29" />
<stop offset="100%" stop-color="#302b63" />
</radialGradient>
<linearGradient id="neon-stroke" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#00ffe0">
<animate attributeName="stop-color" values="#00ffe0;#ff00ff;#00ffe0" dur="4s" repeatCount="indefinite" />
</stop>
<stop offset="100%" stop-color="#ff00ff">
<animate attributeName="stop-color" values="#ff00ff;#00ffe0;#ff00ff" dur="4s" repeatCount="indefinite" />
</stop>
</linearGradient>
<linearGradient id="text-neon" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#00f5ff">
<animate attributeName="stop-color" values="#00f5ff;#ff3cac;#00f5ff" dur="3s" repeatCount="indefinite" />
</stop>
<stop offset="100%" stop-color="#ff3cac">
<animate attributeName="stop-color" values="#ff3cac;#00f5ff;#ff3cac" dur="3s" repeatCount="indefinite" />
</stop>
</linearGradient>
</defs>
<!-- Background circle -->
<circle cx="100" cy="100" r="95" fill="url(#cyber-bg)" stroke="url(#neon-stroke)" stroke-width="8">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 100 100" to="360 100 100" dur="20s" repeatCount="indefinite" />
</circle>
<!-- Inner glow ring -->
<circle cx="100" cy="100" r="75" fill="none" stroke="url(#neon-stroke)" stroke-width="2" stroke-dasharray="5,5" opacity="0.5">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="360 100 100" to="0 100 100" dur="10s" repeatCount="indefinite" />
</circle>
<!-- </> Symbol -->
<text x="50%" y="50%" font-size="56" font-family="monospace" fill="url(#text-neon)" text-anchor="middle" dominant-baseline="central">
</>
</text>
</svg>
Html codes
Photo
CodePen Blog
Chris’ Corner: We Can Have Nice Things
It’s such a small, simple thing, but I’m very grateful that we’re getting “Gap Decorations” in CSS.
Microsoft is working on “
* Chris Coyier on Twitch
* CodePen on YouTube
https://blog.codepen.io/wp-content/uploads/2025/07/gap-decoration-1024x586.png
Part of what I like about it is that you don’t necessarily need to put grid items onto the grid to get the lines. Grid items on the grid might affect it, but it’s not required. That naturally leads on to think about styling grid areas without having to put HTML elements there to style. That’d be head, huh? The Chrome blog has the post on it for whatever reason (does Microsoft not have a good blog for this?). The demos are pretty compelling in that blog post, showcasing some of the more exotic syntax possible.
https://blog.codepen.io/wp-content/uploads/2025/07/cssgapdecorati-3n3gt15s44x_1920-1024x794.png
Speaking of turning a stream into a nicer video and demo, I did the same thing for an idea I had about reordering list items with View Transitions.
* It started as a stream.
* I cleaned up the demo.
* I polished it a smidge into a video.
* I wrote it up as a blog post.
* Now I’m writing it up here in my column.
I probably won’t give every little thing I do on a stream the full content round trip like this, but I thought the result was super fun and cool and I JUST WANTED TO OK.
https://blog.codepen.io/wp-content/uploads/2025/07/kickflip.png
I’m also super envious of Bramus’ idea of If View Transitions and Scroll-Driven Animations having a baby, which is just an ultra-cool idea. He got some good mileage out of that idea, including a meetup talk. 💪
I’ve had Ryan Mulligan’s Scrolling Rails and Button Controls bookmarked for quite a while. He made a
The timing of it is a little funny, as all this CSS Carousels stuff dropped very shortly after his work. Not that Ryan’s work was in vain, as it’s more cross-browser friendly than stuff like
Chris’ Corner: We Can Have Nice Things
It’s such a small, simple thing, but I’m very grateful that we’re getting “Gap Decorations” in CSS.
Microsoft is working on “
gap decorations” and have put together a nice playground to explore them, and I had a play. The idea is drawing lines where gaps would be, rather than empty space. It’s really quite well done with lots of control (do they hit the edges or stop short? do they overlap or not? which direction is on top? etc). I took a look at it the other day. Oh hey, that link is a lightly edited video I did from a stream I did. I’m enjoying the whole streaming thing. I’d love it if you came along for the ride:* Chris Coyier on Twitch
* CodePen on YouTube
https://blog.codepen.io/wp-content/uploads/2025/07/gap-decoration-1024x586.png
Part of what I like about it is that you don’t necessarily need to put grid items onto the grid to get the lines. Grid items on the grid might affect it, but it’s not required. That naturally leads on to think about styling grid areas without having to put HTML elements there to style. That’d be head, huh? The Chrome blog has the post on it for whatever reason (does Microsoft not have a good blog for this?). The demos are pretty compelling in that blog post, showcasing some of the more exotic syntax possible.
https://blog.codepen.io/wp-content/uploads/2025/07/cssgapdecorati-3n3gt15s44x_1920-1024x794.png
Speaking of turning a stream into a nicer video and demo, I did the same thing for an idea I had about reordering list items with View Transitions.
* It started as a stream.
* I cleaned up the demo.
* I polished it a smidge into a video.
* I wrote it up as a blog post.
* Now I’m writing it up here in my column.
I probably won’t give every little thing I do on a stream the full content round trip like this, but I thought the result was super fun and cool and I JUST WANTED TO OK.
https://blog.codepen.io/wp-content/uploads/2025/07/kickflip.png
I’m also super envious of Bramus’ idea of If View Transitions and Scroll-Driven Animations having a baby, which is just an ultra-cool idea. He got some good mileage out of that idea, including a meetup talk. 💪
I’ve had Ryan Mulligan’s Scrolling Rails and Button Controls bookmarked for quite a while. He made a
<scrolly-railweb component that makes simple, nice horizontal scrolling elements. That includes scroll snapping, smooth scrolling, pagination controls, and more. The timing of it is a little funny, as all this CSS Carousels stuff dropped very shortly after his work. Not that Ryan’s work was in vain, as it’s more cross-browser friendly than stuff like
::scroll-button() and the fancy features necessary for CSS carousels are. https://blog.codepen.io/wp-content/uploads/2025/07/carousel-1024x468.png But me, I’m so lazy into progressive enhancement, the last time I wanted to do a carousel, I went right for the fancy new stuff. That was for a template I was working on for our 2.0 Editor, which I streamed about, naturally.❤1
CodePen Blog
402: Bookmarks
Pins are dead!
Long live bookmarks!
Pins was never a good name for the feature we have on CodePen where you can mark a Pen or Collection to more quickly jump back to it from anywhere on the site. The word is too similar to “Pen” that it’s just awkward, not to mention it’s not exactly and obvious metaphor. A bookmark is a much more clear term and icon, so we decided to switch to it.
Switching the UI is kind of the easy part. It’s kind of a cultural thing at CodePen, but when we make a change like this, we change it 100% through the entire code base, down to the database itself. In order to do that, we had to chunk it into stages so that those stages can roll out independently, but in order, to make it seamless.
Now that it’s done, we were able to extend the functionality of Bookmarks a bit, such that bookmarking a template is extra useful. One place to see that is on the new Create page.
Time Jumps
* 00:05 You’re still here! Thanks for listening!
* 01:51 Pins are changing to…
* 04:51 How do you get alignment on changes or new features?
* 08:35 Figuring out the new icon
* 09:44 Updating the documentation
* 17:32 How does this affect templates?
402: Bookmarks
Pins are dead!
Long live bookmarks!
Pins was never a good name for the feature we have on CodePen where you can mark a Pen or Collection to more quickly jump back to it from anywhere on the site. The word is too similar to “Pen” that it’s just awkward, not to mention it’s not exactly and obvious metaphor. A bookmark is a much more clear term and icon, so we decided to switch to it.
Switching the UI is kind of the easy part. It’s kind of a cultural thing at CodePen, but when we make a change like this, we change it 100% through the entire code base, down to the database itself. In order to do that, we had to chunk it into stages so that those stages can roll out independently, but in order, to make it seamless.
Now that it’s done, we were able to extend the functionality of Bookmarks a bit, such that bookmarking a template is extra useful. One place to see that is on the new Create page.
Time Jumps
* 00:05 You’re still here! Thanks for listening!
* 01:51 Pins are changing to…
* 04:51 How do you get alignment on changes or new features?
* 08:35 Figuring out the new icon
* 09:44 Updating the documentation
* 17:32 How does this affect templates?
Animated radar with only SVG!
<svg viewBox="0 0 200 200" width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<!-- Background -->
<circle cx="100" cy="100" r="100" fill="#001f1f"/>
<!-- Radar Grid -->
<circle cx="100" cy="100" r="90" stroke="#00ffff" stroke-width="0.5" fill="none" opacity="0.15"/>
<circle cx="100" cy="100" r="60" stroke="#00ffff" stroke-width="0.5" fill="none" opacity="0.1"/>
<circle cx="100" cy="100" r="30" stroke="#00ffff" stroke-width="0.5" fill="none" opacity="0.08"/>
<!-- Cross lines -->
<line x1="100" y1="10" x2="100" y2="190" stroke="#00ffff" stroke-width="0.3" opacity="0.2"/>
<line x1="10" y1="100" x2="190" y2="100" stroke="#00ffff" stroke-width="0.3" opacity="0.2"/>
<line x1="30" y1="30" x2="170" y2="170" stroke="#00ffff" stroke-width="0.2" opacity="0.1"/>
<line x1="170" y1="30" x2="30" y2="170" stroke="#00ffff" stroke-width="0.2" opacity="0.1"/>
<!-- Glowing Center -->
<circle cx="100" cy="100" r="3" fill="#00ffff" opacity="0.8">
<animate attributeName="r" values="2;4;2" dur="1.5s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.8;0.3;0.8" dur="1.5s" repeatCount="indefinite"/>
</circle>
<!-- Radar Sweep -->
<g>
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 100 100"
to="360 100 100"
dur="2.8s"
repeatCount="indefinite"/>
<!-- Gradient beam -->
<path d="M100,100 L100,10 A90,90 0 0,1 190,100 Z" fill="url(#beamGrad)" />
</g>
<!-- Gradient Definition -->
<defs>
<radialGradient id="beamGrad" cx="100" cy="100" r="100" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#00ffff" stop-opacity="0.15"/>
<stop offset="100%" stop-color="#00ffff" stop-opacity="0"/>
</radialGradient>
</defs>
</svg>