✨ RARE COSMIC EXPLOSION IN 2026! 🚀

Get ready! A rare "Nova" explosion of the star T Coronae Borealis is expected to happen sometime in 2026.

🌟 Key details:
Visibility: It will be visible to the naked eye (no telescope needed!).
Brightness: It will shine as bright as the North Star for several days.
Rare Event: This only happens once every 80 years!

Don't miss this once-in-a-lifetime show in the night sky! 🌌

#Astronomy #Space2026 #Nova #StarWatch

CodePen Blog
Chris’ Corner: Two Liners

The real reason that fancy modern CSS is exciting is because of what we can now actually do in CSS.

I remember one of my favorite dudes Hakim El Hattab made a thing called “Progress Nav” ten years ago. The idea is a Table of Contents component that could tell where you are scrolled in the page and reflects that in the design of the ToC.
https://blog.codepen.io/wp-content/uploads/2026/01/CleanShot-2026-01-15-at-11.59.21.gif
Perhaps you won’t be surprised that functionality works via JavaScript. It’s not horridly huge or complex, but, it does rely on totally-not-even-debounced window.addEventListener( 'scroll', ... which is known to be a cause of janky performance.

But it’s cool, right?!

This kind of thing has been come to be known as a “scroll spy” effect. I’m sure you can see where I’m going with this: CSS can do scroll spy now. In Chrome anyway. Remember when all that CSS carousel stuff was happening? This is highly related. I remember people gently trying to say this isn’t just CSS carousels, it’s interesting CSS primitives that combined can make a carousel, but totally have other users too. Well, here’s something.

Una’s blog post is a live demo of it working.
https://blog.codepen.io/wp-content/uploads/2026/01/CleanShot-2026-01-15-at-13.13.59.gif
Here’s the main CSS that does it:
.parent { scroll-target-group: auto; } :target-current { /* styles for active anchor */ }
Wow.

It’s also obviously ultra important that we can do Battlestar Galactica corners, as Dave explains:

… the sci-fi film and television trope where all rectangles (doors, windows, furniture, user-interfaces) have one to three angular corners instead of all corners being the old, boring, un-futuristic 90º rectangle corners. They are the cooler version of rectangles by all accounts.

Another two-liner 😍:
.sci-fi { border-start-end-radius: 50px; corner-shape: bevel;
}
https://blog.codepen.io/wp-content/uploads/2026/01/Screenshot-2026-01-15-at-3.25.41-PM-1024x471.png

You know when an element moves when View Transitions are used? They say “they aren’t screenshots” used during the moving/morphing… but… they kinda feel like they are screenshots. And so, sometimes it looks awkward. Bramus notes that an example of this is when an element has a different border-radius. Fixing this is more complicated than I’d like it to be and showcases how sometimes these fancy features require a pretty deep dive once you get into the details. The good news is there is a (slightly) simpler approach, which requires thinking about the individual parts you are actually animating. That part, thankfully, makes sense to me. Like giving the element itself and the guts of it different names:
.card { view-transition-name: card;
} .card > .card-content { view-transition-name: card-content;
}
I’ll leave you with a beast of a Julia Micocene blog post about lighting in 3D CSS.

Stop using flat colors for your headers.

Use background-clip: text to create a flowing, animated gradient fill. It adds an instant layer of polish to any landing page.

👇 Copy Code:

<style>
  body{background:#000;height:100vh;margin:0;display:flex;align-items:center;justify-content:center;font-family:sans-serif}
  
  .liquid-text{
    font-size:5rem;font-weight:900;text-transform:uppercase;
    background:linear-gradient(to right,#00f2ff,#ff009c,#00f2ff);
    background-size:200% auto;
    color:transparent;
    -webkit-background-clip:text;
    background-clip:text;
    animation:shine 3s linear infinite;
    filter:drop-shadow(0 0 15px rgba(0,242,255,0.3))
  }
  
  @keyframes shine{to{background-position:200% center}}
</style>

<div class="liquid-text">CYBER</div>

#CSS #Typography #Design #Frontend #Snippet

CodePen Blog
Chris’ Corner: Type

Have you seen Kiel Danger Mutschelknaus’ Space Type Generator? This thing is absolute monster of amazing text-on effects. Bought a coffee for this beautiful bit of work for sure.

The effect you see when landing on that homepage is extremely cool. Playing around with the sliders and presets make for almost entirely different demos, each more amazing than the last. https://blog.codepen.io/wp-content/uploads/2026/01/hoops-620x1024.png But don’t miss the Select… menu in the upper right which has another ~20 effects (!!!). If you’re like me, each new one you open is the new best one. https://blog.codepen.io/wp-content/uploads/2026/01/codepen-rules-1024x516.png Well fine now that we’re doing type, I gotta empty my pockets with cool type I’ve saved lately. Swiss Cheese Mono

I like that the font was made by hand, but then… “After taking some photos of real cheese, playing around with Adobe Firefly’s generative AI image tools” you can make it look like, ya know, real Swiss Cheese. https://blog.codepen.io/wp-content/uploads/2026/01/Slide2-819x1024.webp https://blog.codepen.io/wp-content/uploads/2026/01/SwissCheeseMonooncuttingboard-1024x1024.webp Fran Sans

This is a great story to go along with a great font. I love it when people get the bug on something, and other people pop in to give them the right tools and ideas at the right time to complete the journey. https://blog.codepen.io/wp-content/uploads/2026/01/Screenshot-2026-01-18-at-4.22.47-PM-1024x662.png Shop Sans

Ya know, I don’t believe I’ve ever met a font with this express purpose.

Shop Sans is a typeface for setting text on circles and curved text paths. Its ‘Curve’ variable font enables adjustments to optimize details for bending type smoothly with an adjustable radius. https://blog.codepen.io/wp-content/uploads/2026/01/large_Shop_Sans_Curve-1024x1024.png Miles To Go

I’m almost annoyed with this font because I think I “liked” it on Instagram and it now the image below follows me to the ends of the Earth. But it’s just so fun! And it’s only $17! https://blog.codepen.io/wp-content/uploads/2026/01/1_0ad1c01d-1d26-49a1-9978-504470b8eaef.webp Clauthbound

Another new one from Dan Cederholm, also very affordable. https://blog.codepen.io/wp-content/uploads/2026/01/clauth-gold-cm-1-1024x683.png I’ll leave you with Tobias Frere-Jones’ account of the typeface Gotham. I put Gotham on a pedestal in my mind somehow. It’s the the ultimate modern very good typeface. It’s popular, but not so popular I ever got sick of it. It’s just an absolute workhorse that when it works, it’s perfect (like in Obama’s campaign). I still associate the font with “Hoefler & Frere-Jones” in my mind, but that partnership is long over, and the font stayed with the company “Hoefler & Co”, which still exists I guess but is now part of Monotype. I like that Tobias wants to make sure the story has a proper URL.

As these families are now further removed from their origin, I want to ensure that their stories are accurately recorded.

Tiktok clone
➡️ Live demo

🌀 New CSS Loader: "Neon Orbit"
Simple, modern, and smooth.

HTML

<div class="loader" aria-label="Loading">

<span></span><span></span><span></span>
</div>

CSS

.loader{

width:56px;height:56px;
position:relative;
filter:drop-shadow(0 0 10px #00e5ff);
}
.loader span{
position:absolute;inset:0;
border-radius:50%;
border:3px solid transparent;
border-top-color:#00e5ff;
animation:spin 1s linear infinite;
}
.loader span:nth-child(2){
inset:10px;
border-top-color:#a855f7;
animation-duration:.85s;
animation-direction:reverse;
}
.loader span:nth-child(3){
inset:20px;
border-top-color:#22c55e;
animation-duration:1.15s;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* optional: center on page */
body{margin:0;min-height:100vh;display:grid;place-items:center;background:#0b1220}

Tip: Change colors or inset values to create new variants.

#css #loader #animation #fron

CodePen Blog
Chris’ Corner: Lovingly Esoteric CSS

Can you reason out the difference between a selector doing :has(:not) vs :not(:has)? Kilian Valkhof wrote up that post I just linked to. I like how he teaches the way to think it out is to write out all the implied selectors at work. For instance: .card:has(:not(img)) {} .card:not(:has(img)) {}
is really: .card:has(*:not(img)) {} .card:not(.card:has(img)) {}
The latter becomes a lot more clear to me:

1. Select all the stuff in a .card that isn’t an img.
2. Select the card as long as it doesn’t contain an img.

Super different. I love stuff like this. Like Sudoku puzzles for CSS nerds.

Speaking of :has(), Heydon gets a bit philosophical with a “Sidebar” layout, explaining how it can get a lot more flexible when we think of how to handle it with any particular layout that just so happens to have a sidebar. And just so happens is a specialty of :has(), polished up with a nice dollop of @container.

I didn’t know this was coming, but I love it, and it makes intuitive sense to me. Una explains in Range Syntax for Style Queries. /* Range query for rain percent (new) */ @container style(--rain-percent > 45%) { .weather-card { background: linear-gradient(140deg, skyblue, lightblue);
}
}
My brain goes right now how line-height often needs to get sucked in when the font-size goes up. So assuming those are custom properties powered, something like this could be cool: @container style(--font-size > 2rem) { line-height: 1;
}
But my enthusiasm is tempered by the fact that you can’t do a container query on the same element you set the custom property on. So like this doesn’t work: h1, h2, h3 { font-size: var(--header-font-size, 1.5rem);
@container style(--header-font-size > 2rem) { line-height: 1;
}
} h1 { --header-font-size: 3rem;
}
You can see what I mean here with a working version.

Because I’m setting --header-font-size at the same “level” as I’m testing it with @container it just doesn’t work. It would have to be set at least one DOM level higher, which is probably not what I’d be doing on an element like this. Oh well, it’s still cool.

I appreciate Roma Komarov’s obsessing about a tiny detail here. This website Ink & Switch has these kinda rough hand-drawn underlines on it. But when they wrap the wrapping edge is “hard cut”. But it needn’t be so. The CSS property box-decoration-break: clone fixes it entirely. Beautiful. You can kinda forgive someone not knowing this as the browser support isn’t perfect. And more, the fact that it starts with box- kinda makes you think it’s gonna be related to box-shadow but really it’s (get this): border-radius, border-image, box-shadow, and background. That’s some good bar trivia right there for you and all your CSS buds.

My toxic trait is that I like to declare winners of things. Like how Apple won with grid-lanes 😬. Or how oklch() is the winning modern color format. Instead of giving those topics the nuance they deserve. I also have a lot of muscle memory for just using rem units everywhere, considering them the winning unit. But that one is almost certainly too narrow of an opinion. In fact, it’s probably not any one particular unit, but as Miriam says The Best CSS Unit Might Be a Combination: We don’t have to choose between px and rem for spacing. .card { /* use 1lh, unless we run out of space */ --min: min(1lh, 2vi); /* round-up to the nearest half-line */ --nearest-half: round(up, 2vi, 0.5lh);
}

Best JavaScript libraries for websites (pick what you need)

UI: React / Vue / Svelte
CSS/UI: Tailwind CSS, Bootstrap
Animations: GSAP, Framer Motion
Charts: Chart.js, D3.js
Forms: React Hook Form, Formik
HTTP: Axios
Dates: Day.js
Validation: Zod, Yup
State: Redux Toolkit, Zustand
Build: Vite

Tip: don’t add libraries “just in case”-opt for the smallest stack.

#javascript #webdev #frontend #html #coding