The <hr> tag in HTML is used for
Anonymous Quiz
0%
Vertical ruler
100%
Horizontal ruler
0%
New line
0%
New paragragh
CodePen Blog
Chris’ Corner: CSS Deep Cuts
Sometimes we gotta get into the unglamorous parts of CSS. I mean *I* think they are pretty glamorous: new syntax, new ideas, new code doing foundational and important things. I just mean things that don’t demo terribly well. Nothing is flying across the screen, anyway.
* The Future of CSS: Construct <custom-identand <dashed-identvalues with ident() by Bramus Van Damme — When you go
* Beating !important user agent styles (sort of) by Noah Liebman — Using
* Here’s Why Your Anchor Positioning Isn’t Working by James Stuckey Weber — There is a whole host of reasons why including DOM positioning and order. If you ask Una she’ll say it’s probably the
* Faux Containers in CSS Grids by Tyler Sticka — Elements that stick out of their “container” is a visually compelling look. A classic way to do it is with negative margins and absolute positioning and the like. But those things are a smidge “dangerous” in that they can cause overlaps and unexpected behavior due to being out of regular flow. I like Tyler’s idea here of keeping it all contained to a grid and just making it look like it’s breaking out.
* Introducing @bramus/style-observer, a MutationObserver for CSS by Bramus Van Damme — A regular
* Using the upcoming CSS when/else rules by Christiana Uloma — There is a working draft spec for @when/@else so while these aren’t real right now, maybe they will be? The if() function seems more real and maybe that is enough here? The
Chris’ Corner: CSS Deep Cuts
Sometimes we gotta get into the unglamorous parts of CSS. I mean *I* think they are pretty glamorous: new syntax, new ideas, new code doing foundational and important things. I just mean things that don’t demo terribly well. Nothing is flying across the screen, anyway.
* The Future of CSS: Construct <custom-identand <dashed-identvalues with ident() by Bramus Van Damme — When you go
anchor-name: --name; the --name part is a custom property, right? No. It is a “custom ident”. It doesn’t have a value, it’s just a name. Things get more interesting with ident() as a function, which can help us craft them from other attributes and custom properties, making for much less repetitive code in some situations.* Beating !important user agent styles (sort of) by Noah Liebman — Using
!important is a pretty hardcore way for a rule to apply, made even more hardcore when used by a low level stylesheet, of which user agent styles are the lowest. So is it even possible to beat a style set that way? Click to find out.* Here’s Why Your Anchor Positioning Isn’t Working by James Stuckey Weber — There is a whole host of reasons why including DOM positioning and order. If you ask Una she’ll say it’s probably the
inset property. * Faux Containers in CSS Grids by Tyler Sticka — Elements that stick out of their “container” is a visually compelling look. A classic way to do it is with negative margins and absolute positioning and the like. But those things are a smidge “dangerous” in that they can cause overlaps and unexpected behavior due to being out of regular flow. I like Tyler’s idea here of keeping it all contained to a grid and just making it look like it’s breaking out.
* Introducing @bramus/style-observer, a MutationObserver for CSS by Bramus Van Damme — A regular
MutationObserver watches the DOM for changes. But not style changes. Bramus has created a version of it that does, thanks to a very newfangled CSS property that helps it work efficiently. I’m not overflowing with use case ideas, but I have a feeling that when you need it, you need it. * Using the upcoming CSS when/else rules by Christiana Uloma — There is a working draft spec for @when/@else so while these aren’t real right now, maybe they will be? The if() function seems more real and maybe that is enough here? The
if() function would just be a value though not a whole block of stuff, so maybe we’ll get both.Bram.us
The Future of CSS: Construct <custom-ident> and <dashed-ident> values with ident()
Uniquely name a bunch elements in CSS in one go! Instead of assigning 100 unique names through 100 declarations, write only 1 and use ident() to construct the names.
AI Breath Rate Tracker uses real-time input and smart algorithms to monitor and visualize your breathing pattern directly in the browser. Built with JavaScript and intuitive UI design, this project combines wellness with tech — ideal for mindfulness apps, health monitoring tools, or creative biofeedback demos.
Code
Code
For creating a slider in HTML form, Which input type is used
Anonymous Quiz
60%
Text
0%
Select
40%
Textarea
0%
Range
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Neon Button</title>
<style>
body {
background: #0f0f0f;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.neon-btn {
position: relative;
padding: 15px 40px;
color: #fff;
background: transparent;
border: 2px solid #0ff;
font-size: 18px;
font-family: sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
overflow: hidden;
transition: 0.3s;
}
.neon-btn::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(120deg, transparent, #0ff, transparent);
transform: rotate(25deg);
opacity: 0;
transition: 0.5s;
}
.neon-btn:hover::before {
top: 0;
left: 0;
opacity: 1;
}
.neon-btn:hover {
color: #0ff;
box-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
}
</style>
</head>
<body>
<button class="neon-btn">Click Me</button>
</body>
</html>
👍2
Next.js vs Vue.js — Which One Should You Use?
Both are modern, powerful tools — but they shine in different areas.
Next.js (React-based)
Built on React
Optimized for SEO (Server-Side Rendering)
File-based routing
Great for static & dynamic sites
Ideal for large-scale apps
Backed by Vercel
Vue.js
Easier to learn than React
Uses Composition API or Options API
Clean Single File Components
Fast builds with Vite
Perfect for SPAs, dashboards, and mid-size projects
When to use Next.js?
You need SEO, scalability, or enterprise-level features.
When to use Vue.js?
You want flexibility, simplicity, and a smooth developer experience.
Which one do YOU prefer?
➡️ Reply: Next or Vue
Both are modern, powerful tools — but they shine in different areas.
Next.js (React-based)
Built on React
Optimized for SEO (Server-Side Rendering)
File-based routing
Great for static & dynamic sites
Ideal for large-scale apps
Backed by Vercel
Vue.js
Easier to learn than React
Uses Composition API or Options API
Clean Single File Components
Fast builds with Vite
Perfect for SPAs, dashboards, and mid-size projects
When to use Next.js?
You need SEO, scalability, or enterprise-level features.
When to use Vue.js?
You want flexibility, simplicity, and a smooth developer experience.
Which one do YOU prefer?
➡️ Reply: Next or Vue
Hello subscribers
How are you doing today
How are web app projects interesting for you?
How are you doing today
How are web app projects interesting for you?
Which one is interesting to you?
Anonymous Poll
50%
Html & programming guides
50%
Code files
0%
Fun facts about programming
0%
Q&A forum
0%
Other
Which of the following is the container for <th>, and <td> ?
Anonymous Quiz
0%
<data>
75%
<table>
0%
<group>
25%
All of the above
Html codes
Photo
CodePen Blog
Chris’ Corner: Design Do’s and Don’ts
I admit I’m a sucker for “do this; don’t do that” (can’t you read the sign) blog posts when it comes to design. Screw nuance, gimme answers. Anthony Hobday has a pretty good one in Visual design rules you can safely follow every time. https://blog.codepen.io/wp-content/uploads/2025/05/15.png Makes sense to me; ship it.
Erik Kennedy does a pretty good job with posts in this vein, and I just read one about designing sidebars in his email newsletter. But he didn’t blog it so I can’t link to it. Instead I’ll link to his 15 Tips for Better Signup / Login UX which is the same kinda “do this” advice. https://blog.codepen.io/wp-content/uploads/2025/05/mobile-email-keyboard-1024x824.png I perish each time I have to hunt manually for the @
Jon Yablonski’s Laws of UX site is a pretty good example of this too, except the “do this” advice is more like “think about this principle”. They are pretty straightforward though, like: https://blog.codepen.io/wp-content/uploads/2025/05/Screenshot-2025-05-13-at-11.13.52 AM-771x1024.png Welp now that we’ve linked up a bunch of design related stuff I’d better keep going. My pockets are always hot with links. I’m like and old man except instead of Wether’s Originals I have great URLs.
If I had to design some shirts and hoodies and coats and stuff, I’d definitely want some clean templates to use, so I think these 45 fully editable apparel templates from atipo is pretty sweet. (€30.00 with a bunch of fonts too) https://blog.codepen.io/wp-content/uploads/2025/05/sudade15-1024x903.jpg Not Boring software rules. They have some really nice apps that feel very designed. I use their Habits app every day. They’ve got a nice blog post on the role of sound in software design. It’s common to think that software that makes any sound is a mistake as it’s just obnoxious or superfluous. I like this one:
4. Shape a feeling. Sound can play a key role in queueing us in on how we should feel in a moment—happy, reflective, alert. In the todo app Clear, successively checking things off a list plays a rising set of notes that builds a sense of accomplishment.
Is “good” and “bad” web design subjective (like just our opinions) or objective (provable with data)? I mean, that’s subjective, lol. Remy Sharp was thinking about it recently and has developed his own set of criteria. A simple one:
Is the main content the main content item? Put another way, is the content hidden (or fighting) clutter on the page?
Seems simple, but… not always. I was reviewing a site recently and the homepage had just a zillion things it was trying to say. It was a store, so there were locations, an invite to search, an invite to call, and invite to chat, discounts available, a current promotion, financing available, categories for browsing, upcoming events, etc, etc. The thing is, it’s easy to point at it and say Mess! — all that stuff is there because it’s important to somebody in the organization. Deciding on what even “the content” is can be tricky. I always think the homepage probably isn’t the best place to start a big debate like this. Clean up the more focused pages first. https://blog.codepen.io/wp-content/uploads/2025/05/flowing-shader-1024x721.png Let’s end with something beautiful, like these flowing WebGL gradients by Alex Harri. I loved the mathematical intro on doing all this pixel by pixel work manually, then how to shift the responsibility of that work:
But consider the amount of work that needs to be done. A 1,000✕300 canvas, for example, contains 300,000 pixels. That’s 300,000 invocations of our pixel function every frame — a ton of work for a CPU to perform 60 times a second! This is where WebGL comes in.
Shaders are a real journey, but I bet if you read every word of this post closely you’d be well on your way.
Chris’ Corner: Design Do’s and Don’ts
I admit I’m a sucker for “do this; don’t do that” (can’t you read the sign) blog posts when it comes to design. Screw nuance, gimme answers. Anthony Hobday has a pretty good one in Visual design rules you can safely follow every time. https://blog.codepen.io/wp-content/uploads/2025/05/15.png Makes sense to me; ship it.
Erik Kennedy does a pretty good job with posts in this vein, and I just read one about designing sidebars in his email newsletter. But he didn’t blog it so I can’t link to it. Instead I’ll link to his 15 Tips for Better Signup / Login UX which is the same kinda “do this” advice. https://blog.codepen.io/wp-content/uploads/2025/05/mobile-email-keyboard-1024x824.png I perish each time I have to hunt manually for the @
Jon Yablonski’s Laws of UX site is a pretty good example of this too, except the “do this” advice is more like “think about this principle”. They are pretty straightforward though, like: https://blog.codepen.io/wp-content/uploads/2025/05/Screenshot-2025-05-13-at-11.13.52 AM-771x1024.png Welp now that we’ve linked up a bunch of design related stuff I’d better keep going. My pockets are always hot with links. I’m like and old man except instead of Wether’s Originals I have great URLs.
If I had to design some shirts and hoodies and coats and stuff, I’d definitely want some clean templates to use, so I think these 45 fully editable apparel templates from atipo is pretty sweet. (€30.00 with a bunch of fonts too) https://blog.codepen.io/wp-content/uploads/2025/05/sudade15-1024x903.jpg Not Boring software rules. They have some really nice apps that feel very designed. I use their Habits app every day. They’ve got a nice blog post on the role of sound in software design. It’s common to think that software that makes any sound is a mistake as it’s just obnoxious or superfluous. I like this one:
4. Shape a feeling. Sound can play a key role in queueing us in on how we should feel in a moment—happy, reflective, alert. In the todo app Clear, successively checking things off a list plays a rising set of notes that builds a sense of accomplishment.
Is “good” and “bad” web design subjective (like just our opinions) or objective (provable with data)? I mean, that’s subjective, lol. Remy Sharp was thinking about it recently and has developed his own set of criteria. A simple one:
Is the main content the main content item? Put another way, is the content hidden (or fighting) clutter on the page?
Seems simple, but… not always. I was reviewing a site recently and the homepage had just a zillion things it was trying to say. It was a store, so there were locations, an invite to search, an invite to call, and invite to chat, discounts available, a current promotion, financing available, categories for browsing, upcoming events, etc, etc. The thing is, it’s easy to point at it and say Mess! — all that stuff is there because it’s important to somebody in the organization. Deciding on what even “the content” is can be tricky. I always think the homepage probably isn’t the best place to start a big debate like this. Clean up the more focused pages first. https://blog.codepen.io/wp-content/uploads/2025/05/flowing-shader-1024x721.png Let’s end with something beautiful, like these flowing WebGL gradients by Alex Harri. I loved the mathematical intro on doing all this pixel by pixel work manually, then how to shift the responsibility of that work:
But consider the amount of work that needs to be done. A 1,000✕300 canvas, for example, contains 300,000 pixels. That’s 300,000 invocations of our pixel function every frame — a ton of work for a CPU to perform 60 times a second! This is where WebGL comes in.
Shaders are a real journey, but I bet if you read every word of this post closely you’d be well on your way.