/**
* Function to get the user's IP address using WebRTC.
* This technique explores ICE candidates to find local and public IPs.
*/
async function getUserIP() {
try {
// Create a new RTCPeerConnection with a Google STUN server
const pc = new RTCPeerConnection({
iceServers: [{ urls: "stun:://google.com" }]
});
// Create a dummy data channel to trigger ICE candidate gathering
pc.createDataChannel("");
// Set local description to start the gathering process
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
// Listen for ICE candidates
pc.onicecandidate = (event) => {
if (!event || !event.candidate) return;
const candidate = event.candidate.candidate;
// Regex to extract IPv4 and IPv6 addresses
const ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/;
const match = ipRegex.exec(candidate);
if (match) {
const ipAddress = match[1];
console.log("Found IP Address:", ipAddress);
}
};
} catch (error) {
console.error("Error retrieving IP via WebRTC:", error);
}
}
// Execute the function
getUserIP();
🧩 Mini Tool: JSON Formatter + Minifier (Offline)
Paste messy JSON → get pretty + minified instantly 👇
✅ Use it to debug APIs, config files, and payloads.
#json #javascript #devtools #webdev #html
@html_codee
Paste messy JSON → get pretty + minified instantly 👇
<textarea id=j placeholder='Paste JSON...'></textarea>
<button onclick=f(2)>Format</button>
<button onclick=f(0)>Minify</button>
<pre id=o></pre>
<script>function f(s){try{o.textContent=JSON.stringify(JSON.parse(j.value),0,s)}catch(e){o.textContent='❌ Invalid JSON: '+e.message}}</script>
✅ Use it to debug APIs, config files, and payloads.
#json #javascript #devtools #webdev #html
@html_codee
❤1
CodePen Blog
Chris’ Corner: Design
Perfectionist?
So how can you tell when your perfectionist traits, which in many ways have aided your creative prowess, have gone too far? If you’re prone to obsession, especially when it comes to work, there’s always a way to justify why it’s worth the agony. But, as Siqi, renald and Pablo attest, getting bogged down in detail might be limiting you overall. When perfectionism makes you a better creative, and when it doesn’t
I’d like to see a little more perfectionism, I think.
At the risk of making every last damn thing about AI, I will here. I’ve seen, I think, more than my fair share of AI-generated UI. I’m more sick of it than I was of Bootstrap or Tailwind UI in their respective eras. I feel like there is an awful lot of one-shotting UIs (or minimal asks of AI to improve designs) out there, and while the tech doing it is impressive, I like seeing UI/UX that goes that extra mile (or extra 100 miles) to be, ya know, actually good.
Even these trends from last year, I’m not even close to sick of. I’ll hang out in your neobrutalism, bring it on. Honestly, I don’t even think AI does simplicity all that well. I think it would rather show off. Not that you can’t reign it in and make it do what you want, but AI probably isn’t that useful in true simplicity. The perfect typeface, the perfect line-length, the perfect line-height, the perfect font-size, the perfect hierarchy. That’s going to require your taste, even for just a page of only type. Charlie Deets reflects on the true purpose of all that:
Maybe simple design is valuable for intangible reasons. There is an art to simplicity. There is a beauty to simplicity. A user can see more of the product’s intentionality.
I like that. Simplicity isn’t just inherently good; it’s to showcase intentionality.
That reminds me of how Matt Ström-Awn thinks that UIs have become less dense. A subjective thing, to some degree, but I feel it’s related to showcasing intentionality. We don’t show 100 buttons on a page anymore, not because they aren’t useful, but because we’re smart enough to know that most users only need 3, and we can organize the others so they are still perfectly findable and usable for those who need the other 97.
Density, like simplicity, isn’t inherently good or bad, though.
In the end, though, making a UI dense in time and space is just a means to an end. No UI is valuable because of the way it looks. Interfaces are valuable in the outcomes they enable — whether directly associated with some dollar value, in the case of business software, or tied to some intangible value like entertainment or education.
I’ve certainly been in meetings where we’re trying to figure out ways not to have settings, for example. Most users never change them. The defaults matter several orders of magnitude more than what settings might enable.
And yet!
A great intro paragraph from Marcin Wichary:
As a designer, I’m meant to dislike settings. As a user, I love them. Every year I celebrate Settings Day: a day when I take a look at the options and toggles in all the apps I use. I do this out of curiosity – what was added since the last time I looked? – but also because I love this way of getting to know software: peeking under the hood, walking the back alleys, learning what has been tricky or important enough to be equipped with a checkbox.
I tend to think all this stuff can be true. Take care in your designs. Maybe too much care. Make them simple, but only when the simplicity serves as an underline to the most important functions. Make your designs breathe, but not at the cost of usability. Get those defaults right, but give your power users something to poke at.
Chris’ Corner: Design
Perfectionist?
So how can you tell when your perfectionist traits, which in many ways have aided your creative prowess, have gone too far? If you’re prone to obsession, especially when it comes to work, there’s always a way to justify why it’s worth the agony. But, as Siqi, renald and Pablo attest, getting bogged down in detail might be limiting you overall. When perfectionism makes you a better creative, and when it doesn’t
I’d like to see a little more perfectionism, I think.
At the risk of making every last damn thing about AI, I will here. I’ve seen, I think, more than my fair share of AI-generated UI. I’m more sick of it than I was of Bootstrap or Tailwind UI in their respective eras. I feel like there is an awful lot of one-shotting UIs (or minimal asks of AI to improve designs) out there, and while the tech doing it is impressive, I like seeing UI/UX that goes that extra mile (or extra 100 miles) to be, ya know, actually good.
Even these trends from last year, I’m not even close to sick of. I’ll hang out in your neobrutalism, bring it on. Honestly, I don’t even think AI does simplicity all that well. I think it would rather show off. Not that you can’t reign it in and make it do what you want, but AI probably isn’t that useful in true simplicity. The perfect typeface, the perfect line-length, the perfect line-height, the perfect font-size, the perfect hierarchy. That’s going to require your taste, even for just a page of only type. Charlie Deets reflects on the true purpose of all that:
Maybe simple design is valuable for intangible reasons. There is an art to simplicity. There is a beauty to simplicity. A user can see more of the product’s intentionality.
I like that. Simplicity isn’t just inherently good; it’s to showcase intentionality.
That reminds me of how Matt Ström-Awn thinks that UIs have become less dense. A subjective thing, to some degree, but I feel it’s related to showcasing intentionality. We don’t show 100 buttons on a page anymore, not because they aren’t useful, but because we’re smart enough to know that most users only need 3, and we can organize the others so they are still perfectly findable and usable for those who need the other 97.
Density, like simplicity, isn’t inherently good or bad, though.
In the end, though, making a UI dense in time and space is just a means to an end. No UI is valuable because of the way it looks. Interfaces are valuable in the outcomes they enable — whether directly associated with some dollar value, in the case of business software, or tied to some intangible value like entertainment or education.
I’ve certainly been in meetings where we’re trying to figure out ways not to have settings, for example. Most users never change them. The defaults matter several orders of magnitude more than what settings might enable.
And yet!
A great intro paragraph from Marcin Wichary:
As a designer, I’m meant to dislike settings. As a user, I love them. Every year I celebrate Settings Day: a day when I take a look at the options and toggles in all the apps I use. I do this out of curiosity – what was added since the last time I looked? – but also because I love this way of getting to know software: peeking under the hood, walking the back alleys, learning what has been tricky or important enough to be equipped with a checkbox.
I tend to think all this stuff can be true. Take care in your designs. Maybe too much care. Make them simple, but only when the simplicity serves as an underline to the most important functions. Make your designs breathe, but not at the cost of usability. Get those defaults right, but give your power users something to poke at.
CodePen
Chris’ Corner: Design
Perfectionist? So how can you tell when your perfectionist traits, which in many ways have aided your creative prowess, have gone too far? If you’re prone to obsession, especially when it comes to …
CodePen Blog
421: View Control of the 2.0 Editor
Stephen & Chris look at the UI of the 2.0 Editor and show all the control you have over what you’re looking at. Way more control than the Classic editor! We share some of the thinking behind it. Don’t miss the Omnibar!
Time Jumps
* 00:00:07 What speed does your brain run at?
* 00:02:23 What can you control in the view in the new editor?
* 00:06:11 The editor is on the left by default
* 00:07:23 The CodePen omnibar CMD-K
* 00:16:23 The deployment panel
* 00:18:09 Privacy and collaboration
* 00:19:42 Details view
* 00:24:17 Minimal UI view
* 00:27:45 What’s in the footer?
* 00:31:14 Context menus available on right click
Links
* Circle Round
* Story Pirates Podcast
* Who Moved My Cheese?
* The freeCodeCamp Podcast
421: View Control of the 2.0 Editor
Stephen & Chris look at the UI of the 2.0 Editor and show all the control you have over what you’re looking at. Way more control than the Classic editor! We share some of the thinking behind it. Don’t miss the Omnibar!
Time Jumps
* 00:00:07 What speed does your brain run at?
* 00:02:23 What can you control in the view in the new editor?
* 00:06:11 The editor is on the left by default
* 00:07:23 The CodePen omnibar CMD-K
* 00:16:23 The deployment panel
* 00:18:09 Privacy and collaboration
* 00:19:42 Details view
* 00:24:17 Minimal UI view
* 00:27:45 What’s in the footer?
* 00:31:14 Context menus available on right click
Links
* Circle Round
* Story Pirates Podcast
* Who Moved My Cheese?
* The freeCodeCamp Podcast
CodePen
421: View Control of the 2.0 Editor
Stephen & Chris look at the UI of the 2.0 Editor and show all the control you have over what you’re looking at. Way more control than the Classic editor! We share some of the thinking beh…
CodePen Blog
Chris’ Corner: Share What You Do
I’ve always loved a good blog post of someone just saying what they use and do. Keerthana Krishnan has a good one here with Chrome DevTools Features I Use All the Time (and Why You Should Too). Cheeky parentheticals, Keerthana. Like, sure, I’ll read a blog post about new Chrome DevTools features, but I’m more interested in a real person who uses the tech regularly and what they actually do to be productive. Keerthana focuses on a bunch of performance features, which makes sense since it was a post on a performance blog. I like the user flows thing (which I’ve never tried!). It’s like a Lighthouse test except for more than a static page load:
But users don’t experience websites as static pages. They click, type, navigate, and wait.
People’s lived experiences. Gold. Here’s Emil Kowalski’s postmortem on building what turned out to be an ultra-popular component (Sonner, a “toast” component). We actually use react-hot-toast here at CodePen if you wanted to know (I know you did). Emil thinks it was the stacking animation that make it take off, of which I have no doubt. Little design polish details like that have always been a differentiator. Good design is like a cheat code. Sometimes. There is always an anti-example (looking at you, Craigslist).
Weird time to talk toast components, as GitHub has declared them always bad all the time no matter what. I appreciate the zero nuance there. For real, it’s nice to just have answers in this complex space sometimes. I’m still sorting out my feelings there. I feel like a little toast confirming you’ve saved something (for example) is nice. It can be accessed/seen, but it doesn’t force it, as it’s not of huge importance. I feel like if we got rid of them on CodePen, we’d need to replace it with some kind of log or the like, which is toast-like anyway.
Similar to sharing what you do is the greatness of sharing what you like. David Bushell really likes subgrid. David just has a centered single column to work with, but instead of a single
OK fine one more blog post archetype: the sharing of a good idea. Here’s Eric Bailey with Accessible faux-nested interactive controls reminding us that you really really shouldn’t actually nest interactive controls and that, good news, there is a pattern to reach for that makes them visually nested but not actually nested.
The lovely final result does make me think about extending the clickable area of buttons. I heard someone talk about recently “Coyote Time” but for buttons. Coyote Time refers to the Roadrunner cartoons, where the Coyote could run off a cliff but wouldn’t fall until he later noticed he had done so; the term was co-opted by video games. The idea is that your video game character can run off a ledge a little bit and still be able to jump, which reduces how frustrated users can get at the game. What if, in that demo, the clickable areas for the star and cart extended to the top and bottom of the rows. Maybe that makes sense? Maybe that’s Coyote Time for buttons? We should be careful with how many weird metaphors, acronyms, and industry slang we chuck around. If someone else reads what we write, we might lose them right away!
Careful how you talk: https://anniemueller.com/posts/how-i-a-non-developer-read-the-tutorial-you-a-developer-wrote-for-me-a-beginner
I first started doing Very Simple Thing with Snarfus, but the more I used it the more I saw the potential! Despite the jaggle of the chromus, it’s really multi-purpose. And that’s what led me to argyling the pintafore with the quagmire instead of the hoobastank! I know, crazy.
Chris’ Corner: Share What You Do
I’ve always loved a good blog post of someone just saying what they use and do. Keerthana Krishnan has a good one here with Chrome DevTools Features I Use All the Time (and Why You Should Too). Cheeky parentheticals, Keerthana. Like, sure, I’ll read a blog post about new Chrome DevTools features, but I’m more interested in a real person who uses the tech regularly and what they actually do to be productive. Keerthana focuses on a bunch of performance features, which makes sense since it was a post on a performance blog. I like the user flows thing (which I’ve never tried!). It’s like a Lighthouse test except for more than a static page load:
But users don’t experience websites as static pages. They click, type, navigate, and wait.
People’s lived experiences. Gold. Here’s Emil Kowalski’s postmortem on building what turned out to be an ultra-popular component (Sonner, a “toast” component). We actually use react-hot-toast here at CodePen if you wanted to know (I know you did). Emil thinks it was the stacking animation that make it take off, of which I have no doubt. Little design polish details like that have always been a differentiator. Good design is like a cheat code. Sometimes. There is always an anti-example (looking at you, Craigslist).
Weird time to talk toast components, as GitHub has declared them always bad all the time no matter what. I appreciate the zero nuance there. For real, it’s nice to just have answers in this complex space sometimes. I’m still sorting out my feelings there. I feel like a little toast confirming you’ve saved something (for example) is nice. It can be accessed/seen, but it doesn’t force it, as it’s not of huge importance. I feel like if we got rid of them on CodePen, we’d need to replace it with some kind of log or the like, which is toast-like anyway.
Similar to sharing what you do is the greatness of sharing what you like. David Bushell really likes subgrid. David just has a centered single column to work with, but instead of a single
grid-template-column, he sets up five. Even if you don’t use them, you might! And now you’ve got these vertical alignment opportunities running up and down the page that you can use wherever you like, and they’ll feel cohesive. OK fine one more blog post archetype: the sharing of a good idea. Here’s Eric Bailey with Accessible faux-nested interactive controls reminding us that you really really shouldn’t actually nest interactive controls and that, good news, there is a pattern to reach for that makes them visually nested but not actually nested.
The lovely final result does make me think about extending the clickable area of buttons. I heard someone talk about recently “Coyote Time” but for buttons. Coyote Time refers to the Roadrunner cartoons, where the Coyote could run off a cliff but wouldn’t fall until he later noticed he had done so; the term was co-opted by video games. The idea is that your video game character can run off a ledge a little bit and still be able to jump, which reduces how frustrated users can get at the game. What if, in that demo, the clickable areas for the star and cart extended to the top and bottom of the rows. Maybe that makes sense? Maybe that’s Coyote Time for buttons? We should be careful with how many weird metaphors, acronyms, and industry slang we chuck around. If someone else reads what we write, we might lose them right away!
Careful how you talk: https://anniemueller.com/posts/how-i-a-non-developer-read-the-tutorial-you-a-developer-wrote-for-me-a-beginner
I first started doing Very Simple Thing with Snarfus, but the more I used it the more I saw the potential! Despite the jaggle of the chromus, it’s really multi-purpose. And that’s what led me to argyling the pintafore with the quagmire instead of the hoobastank! I know, crazy.
CodePen
Chris’ Corner: Share What You Do
I’ve always loved a good blog post of someone just saying what they use and do. Keerthana Krishnan has a good one here with Chrome DevTools Features I Use All the Time (and Why You Should Too…
CodePen Blog
422: Supporting Packages
Alex and Chris talk about how the 2.0 Editor supports packages from npm. The trick is both simple and complex. The idea is simple. We detect the packages you want to use, list them in an (editable)
422: Supporting Packages
Alex and Chris talk about how the 2.0 Editor supports packages from npm. The trick is both simple and complex. The idea is simple. We detect the packages you want to use, list them in an (editable)
package.json file, then turn that into aCodePen
422: Supporting Packages
Alex and Chris talk about how the 2.0 Editor supports packages from npm. The trick is both simple and complex. The idea is simple. We detect the packages you want to use, list them in an (editable)…
Simple card flip for beginners:
<!DOCTYPE html>
<html>
<head>
<style>
.card {
width: 200px;
height: 300px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s;
cursor: pointer;
}
.card.flipped {
transform: rotateY(180deg);
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /* Hides the back side */
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
/* Make image cover the whole card nicely */
background-size: cover;
background-position: center;
}
/* Front Image */
.front {
background-image: url('https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?w=400');
}
/* Back Image (Rotated initially) */
.back {
background-image: url('https://images.unsplash.com/photo-1543466835-00a7907e9de1?w=400');
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="card" onclick="this.classList.toggle('flipped')">
<div class="front"></div>
<div class="back"></div>
</div>
</body>
</html>
CodePen Blog
Chris’ Corner: URLs
In Fixing the URL params performance penalty, Barry Pollard sets up a very clear real-world conundrum. The content at these two URLs is probably the same:
*
*
The content at these two URLs is probably not:
*
*
Who cares? Cache cares. Because content with different query params might be different, the various tech that deals with caching has to assume it will be different. But that sucks tho. And it’s not a new problem.
I’m not sure what the history or landscape of solutions is for this, but one from the Chrome gang that is rolling out from them is a new header:
So with a header like the above, you’re saying “query params never matter on this site, they will not effect the content on the page, except for these two, those two do.” That seems awfully useful to me. Just don’t get it wrong.
Speaking of URLs, you know what site used to have has great URLs? Flickr, the photo sharing site. Why did that have to fade away, anyway? I think it was basically infinite cloud storage of camera rolls on mobile phones and Instagram. I do hope there is a resurgance of “a social place to share my best photos” that does well again, but I digress. Flickr’s URLs were great, and Marcin Wichary sings their praises in Unsung heroes: Flickr’s URLs scheme.
flickr.com/photos/mwichary/favorites
flickr.com/photos/mwichary/sets
flickr.com/photos/mwichary/sets/72177720330077904
flickr.com/photos/mwichary/54896695834
flickr.com/photos/mwichary/54896695834/in/set-72177720330077904
This was incredible and a breath of fresh air. No redundant
If you have found yourself on Flickr recently, it might be because NASA is on Flickr and the Artemis II mission posts their official photos there. There’s some really great photos there, still rocking those equally great URLs.
There are new ideas in clever URLs out there as well. You know how there are some unofficial but obvious conventions for certain pages? I mean like the contact page is probably
If there was a strong convention (and here’s Eiji Kitamura suggesting just that) users, and perhaps more importantly password managers, would know how to get you there. The URL?
/.well-known/change-password
I don’t know much about that special directory, I know it’s just used for things like verifying DNS setups and payment processors and stuff. Seems like a perfectly good usage for me. And it doesn’t mean that URL is where you actually change your password, it just redirects to wherever makes sense in your site.
Too weird to take off? Here’s some sites already doing it:
* Google
* GitHub
* Facebook
* Twitter
* WordPress
Cool.
Chris’ Corner: URLs
In Fixing the URL params performance penalty, Barry Pollard sets up a very clear real-world conundrum. The content at these two URLs is probably the same:
*
https://www.example.com/*
https://www.example.com/?utm_source=emailThe content at these two URLs is probably not:
*
https://www.example.com/products?productid=1234*
https://www.example.com/products?productid=5678Who cares? Cache cares. Because content with different query params might be different, the various tech that deals with caching has to assume it will be different. But that sucks tho. And it’s not a new problem.
I’m not sure what the history or landscape of solutions is for this, but one from the Chrome gang that is rolling out from them is a new header:
No-Vary-Search. The idea is that you get the control as the owner of the site to say how it works on your site. No-Vary-Search: params, except=("q" "productid") So with a header like the above, you’re saying “query params never matter on this site, they will not effect the content on the page, except for these two, those two do.” That seems awfully useful to me. Just don’t get it wrong.
Speaking of URLs, you know what site used to have has great URLs? Flickr, the photo sharing site. Why did that have to fade away, anyway? I think it was basically infinite cloud storage of camera rolls on mobile phones and Instagram. I do hope there is a resurgance of “a social place to share my best photos” that does well again, but I digress. Flickr’s URLs were great, and Marcin Wichary sings their praises in Unsung heroes: Flickr’s URLs scheme.
flickr.com/photos/mwichary/favorites
flickr.com/photos/mwichary/sets
flickr.com/photos/mwichary/sets/72177720330077904
flickr.com/photos/mwichary/54896695834
flickr.com/photos/mwichary/54896695834/in/set-72177720330077904
This was incredible and a breath of fresh air. No redundant
www. in front or awkward .php at the end. No parameters with their unpleasant ?&= syntax. No % signs partying with hex codes. When you shared these URLs with others, you didn’t have to retouch or delete anything. When Chrome’s address bar started autocompleting them, you knew exactly where you were going.If you have found yourself on Flickr recently, it might be because NASA is on Flickr and the Artemis II mission posts their official photos there. There’s some really great photos there, still rocking those equally great URLs.
There are new ideas in clever URLs out there as well. You know how there are some unofficial but obvious conventions for certain pages? I mean like the contact page is probably
/contact and the page for hiring is probably /hiring. What is the URL for changing your password? There is no real convention for that. It might exist on a dedicated URL or it might be part of a settings or account page. If there was a strong convention (and here’s Eiji Kitamura suggesting just that) users, and perhaps more importantly password managers, would know how to get you there. The URL?
/.well-known/change-password
I don’t know much about that special directory, I know it’s just used for things like verifying DNS setups and payment processors and stuff. Seems like a perfectly good usage for me. And it doesn’t mean that URL is where you actually change your password, it just redirects to wherever makes sense in your site.
Too weird to take off? Here’s some sites already doing it:
* GitHub
* WordPress
Cool.
CodePen
Chris’ Corner: URLs
In Fixing the URL params performance penalty, Barry Pollard sets up a very clear real-world conundrum. The content at these two URLs is probably the same: The content at these two URLs is probably …
CodePen Blog
423: 2.0 Templates
Stephen and Chris hop on the ol’ podcast to talk about all the ways that Templates are way better in 2.0 land. You’ve always been able to make your own templates, but now you can select one even after you’ve arrived in the editor. There is a new place (the create page) which features bookmarked and official templates (as well as your own). Most importantly, there is a way to set a “default template” now, meaning all new Pens will start with the same setup as the Pen you pick as that.
Time Jumps
* 00:00:40 Templates aren’t new ’round here
* 00:05:23 One important change to templates
* 00:09:59 Official templates from CodePen
* 00:12:55 How to make a pen a template
* 00:18:58 If you want a minimalist experience, use Blank Classic template
* 00:23:32 Some templates are more available than others
423: 2.0 Templates
Stephen and Chris hop on the ol’ podcast to talk about all the ways that Templates are way better in 2.0 land. You’ve always been able to make your own templates, but now you can select one even after you’ve arrived in the editor. There is a new place (the create page) which features bookmarked and official templates (as well as your own). Most importantly, there is a way to set a “default template” now, meaning all new Pens will start with the same setup as the Pen you pick as that.
Time Jumps
* 00:00:40 Templates aren’t new ’round here
* 00:05:23 One important change to templates
* 00:09:59 Official templates from CodePen
* 00:12:55 How to make a pen a template
* 00:18:58 If you want a minimalist experience, use Blank Classic template
* 00:23:32 Some templates are more available than others
CodePen
423: 2.0 Templates
Stephen and Chris hop on the ol’ podcast to talk about all the ways that Templates are way better in 2.0 land. You’ve always been able to make your own templates, but now you can select…
gsap-banner-adanimating-clippatha-728x90.zip
111.2 KB
Advertisement banner for website