CodePen Blog
405: Elasticsearch → Postgres Search
Alex & Chris get into a fairly recent technological change at CodePen where we ditched our Elasticsearch implementation for just using our own Postgres database for search. Sometimes choices like this are more about team expertise, dev environment practicalities, and complexity tradeoffs. We found this change to be much better for us, which matters! For the most part search is better and faster. Postgres is not nearly as fancy and capable as Elasticsearch, but we werent taking advantage of what Elasticsearch had to offer anyway.
For the power users out there: it’s true that we’ve lost the ability to do in-code search for now. But it’s temporary and will be coming back in time.
Time Jumps
* 00:07 Alex is back!
* 01:10 The history of search at CodePen
* 02:15 Why was Elasticsearch not the right choice for CodePen?
* 09:36 Why we’re using PostGres instead
* 15:18 What does triggers have to do with search?
* 21:02 Figuring out what people are actually searching for
* 24:19 Some of the tradeoffs in changing search
405: Elasticsearch → Postgres Search
Alex & Chris get into a fairly recent technological change at CodePen where we ditched our Elasticsearch implementation for just using our own Postgres database for search. Sometimes choices like this are more about team expertise, dev environment practicalities, and complexity tradeoffs. We found this change to be much better for us, which matters! For the most part search is better and faster. Postgres is not nearly as fancy and capable as Elasticsearch, but we werent taking advantage of what Elasticsearch had to offer anyway.
For the power users out there: it’s true that we’ve lost the ability to do in-code search for now. But it’s temporary and will be coming back in time.
Time Jumps
* 00:07 Alex is back!
* 01:10 The history of search at CodePen
* 02:15 Why was Elasticsearch not the right choice for CodePen?
* 09:36 Why we’re using PostGres instead
* 15:18 What does triggers have to do with search?
* 21:02 Figuring out what people are actually searching for
* 24:19 Some of the tradeoffs in changing search
Html codes
Photo
CodePen Blog
Chris’ Corner: Pretty Palettes
I’m not terribly good at picking a good color palette out of thin air. My go-to is a dark look with bright colored accents, but I’m wildly envious whenever I see a beautiful website with great looking colors that are very far away from what I could pull off.
Sometimes, a little inspiration can go a long way. Here’s some!
Color Lisa
Color Lisa is a curated list of color palettes based on masterpieces of the worlds greatest artists. Each palette was painstakingly created by color obsessed designers, artists, museum curators, and masters of color theory.
https://blog.codepen.io/wp-content/uploads/2025/08/Screenshot-2025-08-22-at-12.53.19-PM-1024x915.png
Flexoki
Flexoki is minimalistic and high-contrast. The colors are calibrated for legibility and perceptual balance across devices and when switching between light and dark modes.
https://blog.codepen.io/wp-content/uploads/2025/08/Screenshot-2025-08-22-at-12.55.07-PM-1024x559.png
Mildliner Reference
A guide to all the Mildliner colors and sets.
https://blog.codepen.io/wp-content/uploads/2025/08/Screenshot-2025-08-22-at-12.56.15-PM-1024x480.png
Kind of Rebeccapurple
The story of how the new CSS logo came together, including a journey through lots of colors, only to land on definitely the right choice.
https://blog.codepen.io/wp-content/uploads/2025/08/Screenshot-2025-08-22-at-1.04.34-PM.png
Hued
Match today’s color in three guesses.
https://blog.codepen.io/wp-content/uploads/2025/08/Screenshot-2025-08-22-at-1.06.09-PM.png
Gradient Generator
Offers fairly advanced settings for a tool like this, including easing and interpolation modes.
https://blog.codepen.io/wp-content/uploads/2025/08/Screenshot-2025-08-22-at-1.07.51-PM-1024x540.png
Chris’ Corner: Pretty Palettes
I’m not terribly good at picking a good color palette out of thin air. My go-to is a dark look with bright colored accents, but I’m wildly envious whenever I see a beautiful website with great looking colors that are very far away from what I could pull off.
Sometimes, a little inspiration can go a long way. Here’s some!
Color Lisa
Color Lisa is a curated list of color palettes based on masterpieces of the worlds greatest artists. Each palette was painstakingly created by color obsessed designers, artists, museum curators, and masters of color theory.
https://blog.codepen.io/wp-content/uploads/2025/08/Screenshot-2025-08-22-at-12.53.19-PM-1024x915.png
Flexoki
Flexoki is minimalistic and high-contrast. The colors are calibrated for legibility and perceptual balance across devices and when switching between light and dark modes.
https://blog.codepen.io/wp-content/uploads/2025/08/Screenshot-2025-08-22-at-12.55.07-PM-1024x559.png
Mildliner Reference
A guide to all the Mildliner colors and sets.
https://blog.codepen.io/wp-content/uploads/2025/08/Screenshot-2025-08-22-at-12.56.15-PM-1024x480.png
Kind of Rebeccapurple
The story of how the new CSS logo came together, including a journey through lots of colors, only to land on definitely the right choice.
https://blog.codepen.io/wp-content/uploads/2025/08/Screenshot-2025-08-22-at-1.04.34-PM.png
Hued
Match today’s color in three guesses.
https://blog.codepen.io/wp-content/uploads/2025/08/Screenshot-2025-08-22-at-1.06.09-PM.png
Gradient Generator
Offers fairly advanced settings for a tool like this, including easing and interpolation modes.
https://blog.codepen.io/wp-content/uploads/2025/08/Screenshot-2025-08-22-at-1.07.51-PM-1024x540.png
CodePen Blog
406: Hot Trends of 2025
Marie and Chris jump on to discuss some of the trends of what people are building on CodePen here, approximately halfway through 2025.
New CSS!
* Custom
* if() function
* clip-path &
* corner-shape and the superellipse
* Scrolling stuff
* The attr() power up
Hot Styles
* Liquid glass (Jhey’s demo, Spark)
* Hard glitch (CRT-like effect with VFX-JS, Glitchy button hover effect with VFX-JS, ❍ Cinematic Glitch Slideshow)
* Holographics (CSS Holographic Masks)
* Grainy textures (Grainy distorted interactive 1 gradient blobs)
* Innovative blurs (wavy wobbly lava orb, Bubbles Background Animation)
* New color spaces (OKLCH Swatch Example, CSS Color Functions, CSS oklch Gradation)
Hot Pens
* Petr Knoll’s Glass Button (From February, well ahead of liquid glass)
* Mike Bespalov’s Monospace ASCII art generator (known to be “vibe coded”)
* Adam Kuhn’s Severance Lumon Macrodata Refinement
* Steve Gardner’s “Who Needs Shaders”
Collection of Pens Discussed in CodePen Radio 406
Time Jumps
* 00:06 406
* 00:31 Circling back to Marie
* 03:00 CSS is so cool right now
* 08:20 Clip path shapes
* 17:22 Liquid Glass is trending now
* 21:28 Glitching and datamoshing styles
* 24:48 Classic holographic textures
* 26:26 Grainy textures
* 30:03 AI is affecting trends on CodePen
* 37:53 4 hot pens from this year so far
406: Hot Trends of 2025
Marie and Chris jump on to discuss some of the trends of what people are building on CodePen here, approximately halfway through 2025.
New CSS!
* Custom
@functions (just landed)* if() function
* clip-path &
shape()* corner-shape and the superellipse
* Scrolling stuff
* The attr() power up
Hot Styles
* Liquid glass (Jhey’s demo, Spark)
* Hard glitch (CRT-like effect with VFX-JS, Glitchy button hover effect with VFX-JS, ❍ Cinematic Glitch Slideshow)
* Holographics (CSS Holographic Masks)
* Grainy textures (Grainy distorted interactive 1 gradient blobs)
* Innovative blurs (wavy wobbly lava orb, Bubbles Background Animation)
* New color spaces (OKLCH Swatch Example, CSS Color Functions, CSS oklch Gradation)
Hot Pens
* Petr Knoll’s Glass Button (From February, well ahead of liquid glass)
* Mike Bespalov’s Monospace ASCII art generator (known to be “vibe coded”)
* Adam Kuhn’s Severance Lumon Macrodata Refinement
* Steve Gardner’s “Who Needs Shaders”
Collection of Pens Discussed in CodePen Radio 406
Time Jumps
* 00:06 406
* 00:31 Circling back to Marie
* 03:00 CSS is so cool right now
* 08:20 Clip path shapes
* 17:22 Liquid Glass is trending now
* 21:28 Glitching and datamoshing styles
* 24:48 Classic holographic textures
* 26:26 Grainy textures
* 30:03 AI is affecting trends on CodePen
* 37:53 4 hot pens from this year so far
Bluesky Social
Una Kravets (@una.im)
🥳 CSS functions have arrived*!!! 🥳
And they are *AWESOME*
Now, you can do:
@function --alpha(--color, --opacity) {
result: rgb(from var(--color) r g b / var(--opacity));
}
div {
background: --alpha(red, 80%);
}
Lean more: https://una.im/5-css-functions/…
And they are *AWESOME*
Now, you can do:
@function --alpha(--color, --opacity) {
result: rgb(from var(--color) r g b / var(--opacity));
}
div {
background: --alpha(red, 80%);
}
Lean more: https://una.im/5-css-functions/…
Html codes
Photo
CodePen Blog
Chris’ Corner: Clever Clever
David Darnes made a <code-penweb component, which is a basic HTML/CSS/JS panel layout that renders them into an iframe (using the very cool <syntax-highlightweb component as well).
Then it ate itself when Ariel Salminen put a <code-penin a <code-pen.
Then the universe collapsed upon itself when Rob Rhoades made a code pen linking to a code pen inside a <code-peninside a CodePen.
https://blog.codepen.io/wp-content/uploads/2025/08/bafkreiapfnkwlb47qkeegkjzvdguclzzfuvk6ubck527d6bxiaz4hdbjj4.jpg The kids are alright.
Speaking of, uhhhh, eating oneself, Julia Miocene has a video of a Recursive square that is a very satisfying watch. I almost forgot what was happening up until the end when you’re like ohhhhhhhh right it’s a perfect loop. Clever clever.
There is a thing you need to do once in a while where the more text you have, the smaller you want the
https://blog.codepen.io/wp-content/uploads/2025/08/Screenshot-2025-08-28-at-7.51.10-AM-1024x588.png
I liked the Zach’s clever thinking in his Eleventy Image project where, when display an image that starts as SVG, it converts them to a raster format (like PNG or JPG) only when the converted image is actually smaller. Like it’s smart enough to pick which choice to make depending on file size. Or maybe I just like the name: SVG Short Circuiting.
Cassidy blogged a little while back a fairly succinct way of figuring out an element’s “index” when you need it. That is, say a
The pseudonymous dade blogged an idea that I’m pretty surprised I’d never seen before now, as it feels like an old school progressive enhancement technique. If you need to hide a feature on the page that you know only works with JavaScript, you can put a
Clever, clever.
Chris’ Corner: Clever Clever
David Darnes made a <code-penweb component, which is a basic HTML/CSS/JS panel layout that renders them into an iframe (using the very cool <syntax-highlightweb component as well).
Then it ate itself when Ariel Salminen put a <code-penin a <code-pen.
Then the universe collapsed upon itself when Rob Rhoades made a code pen linking to a code pen inside a <code-peninside a CodePen.
https://blog.codepen.io/wp-content/uploads/2025/08/bafkreiapfnkwlb47qkeegkjzvdguclzzfuvk6ubck527d6bxiaz4hdbjj4.jpg The kids are alright.
Speaking of, uhhhh, eating oneself, Julia Miocene has a video of a Recursive square that is a very satisfying watch. I almost forgot what was happening up until the end when you’re like ohhhhhhhh right it’s a perfect loop. Clever clever.
There is a thing you need to do once in a while where the more text you have, the smaller you want the
font-size to be (and vice-versa). I remember doing this ages ago on a quotes site where I wanted very short quotes in big text and very long quotes in small text. I counted the letters in PHP and applied a font size based on ranges. It wasn’t pretty. Dave blogged that (as long as you have the character count as an HTML attribute) you can do this in CSS (in supporting browsers). You set an “ideal” number of characters per line, then do a little division to get a ratio, and apply the ratio to the font-size (while setting a clamp-ed minimum and maximum). Clever clever.https://blog.codepen.io/wp-content/uploads/2025/08/Screenshot-2025-08-28-at-7.51.10-AM-1024x588.png
I liked the Zach’s clever thinking in his Eleventy Image project where, when display an image that starts as SVG, it converts them to a raster format (like PNG or JPG) only when the converted image is actually smaller. Like it’s smart enough to pick which choice to make depending on file size. Or maybe I just like the name: SVG Short Circuiting.
Cassidy blogged a little while back a fairly succinct way of figuring out an element’s “index” when you need it. That is, say a
indexOf of the button. (Clever, clever.) I actually think it’s more interesting that we’ll have this information in CSS soon with sibling-index() and friend (sibling-count()).The pseudonymous dade blogged an idea that I’m pretty surprised I’d never seen before now, as it feels like an old school progressive enhancement technique. If you need to hide a feature on the page that you know only works with JavaScript, you can put a
Clever, clever.
CodePen Blog
407: Our Own CDN
Robert and Chris jump on to talk about own own little CDN project. Maybe that’s not the right term, but we struggled with naming it. Truth be told, it’s the
There are several complications along the way. One is that we need to fingerprint these files so we can cache-bust them when needed. We also need to be able to import the URLs in other parts of the repo, so we need manifest files that contain those URLs in multiple formats. Plus many of the files have their own build process, they aren’t just entirely static files. In the end, building our own thing was probably the right move.
The files go to Cloudflare R2, which, I suppose, is the CDN part.
Time Jumps
* 00:40 Introducing Robert
* 01:02 Our public CDN
* 04:25 How we might make the first version of this
* 09:58 How we link to fonts on the web
* 14:01 What is the correct way to implement this?
* 17:19 Accounting for different dev environments
* 22:29 How do we run deployment?
* 31:06 Why did we make our own build tool?
* 40:27 Taking in environment variables
407: Our Own CDN
Robert and Chris jump on to talk about own own little CDN project. Maybe that’s not the right term, but we struggled with naming it. Truth be told, it’s the
/public/ folder in our monorepo, where the purpose is getting files to the world wide internet at URLs that anyone can access. Our favicon is a good example, where many of our sites need access to that, but we only want it once in our repo (but we have actually lots of use-cases.)There are several complications along the way. One is that we need to fingerprint these files so we can cache-bust them when needed. We also need to be able to import the URLs in other parts of the repo, so we need manifest files that contain those URLs in multiple formats. Plus many of the files have their own build process, they aren’t just entirely static files. In the end, building our own thing was probably the right move.
The files go to Cloudflare R2, which, I suppose, is the CDN part.
Time Jumps
* 00:40 Introducing Robert
* 01:02 Our public CDN
* 04:25 How we might make the first version of this
* 09:58 How we link to fonts on the web
* 14:01 What is the correct way to implement this?
* 17:19 Accounting for different dev environments
* 22:29 How do we run deployment?
* 31:06 Why did we make our own build tool?
* 40:27 Taking in environment variables
Basic Computer Devices:
1.System Unit
2.Monitor
3.Keyboard
4.Mouse
5.Printer
6.Scanner
Additional Computer Devices:
1.Speakers
2.Headphones
3.Webcam
4.External Hard Drive
5.USB Flash Drive
6.Microphone
Follow us @Html_codee
1.System Unit
2.Monitor
3.Keyboard
4.Mouse
5.Printer
6.Scanner
Additional Computer Devices:
1.Speakers
2.Headphones
3.Webcam
4.External Hard Drive
5.USB Flash Drive
6.Microphone
Follow us @Html_codee
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glitch Text Effect</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #111;
margin: 0;
}
.glitch {
font-size: 60px;
font-weight: bold;
color: #fff;
position: relative;
text-transform: uppercase;
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
width: 100%;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
.glitch::before {
left: 2px;
text-shadow: -2px 0 red;
animation: glitch 2s infinite linear alternate-reverse;
}
.glitch::after {
left: -2px;
text-shadow: -2px 0 cyan;
animation: glitch 2s infinite linear alternate-reverse;
}
@keyframes glitch {
0% { clip: rect(10px, 9999px, 50px, 0); }
20% { clip: rect(60px, 9999px, 90px, 0); }
40% { clip: rect(20px, 9999px, 70px, 0); }
60% { clip: rect(40px, 9999px, 100px, 0); }
80% { clip: rect(30px, 9999px, 80px, 0); }
100% { clip: rect(50px, 9999px, 120px, 0); }
}
</style>
</head>
<body>
<h1 class="glitch" data-text="Glitch Effect">Glitch Effect</h1>
</body>
</html>
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 …