Jump to content

Welcome to CodeNameJessica

✨ Welcome to CodeNameJessica! ✨

💻 Where tech meets community.

Hello, Guest! 👋
You're just a few clicks away from joining an exclusive space for tech enthusiasts, problem-solvers, and lifelong learners like you.

🔐 Why Join?
By becoming a member of CodeNameJessica, you’ll get access to:
✅ In-depth discussions on Linux, Security, Server Administration, Programming, and more
✅ Exclusive resources, tools, and scripts for IT professionals
✅ A supportive community of like-minded individuals to share ideas, solve problems, and learn together
✅ Project showcases, guides, and tutorials from our members
✅ Personalized profiles and direct messaging to collaborate with other techies

🌐 Sign Up Now and Unlock Full Access!
As a guest, you're seeing just a glimpse of what we offer. Don't miss out on the complete experience! Create a free account today and start exploring everything CodeNameJessica has to offer.

Programmer's Corner

A blog by Blogger in CodeName Blogs

  • Entries

    296

  • Comments

    0

  • Views

    9330

Entries in this blog

Stuff & Nonsense Practical Layout Workshop

by: Geoff Graham Mon, 11 Aug 2025 12:16:00 +0000 We don’t publish a big ol’ bunch of links pushing products and whatnot around here. But I do like sharing a good resource when it’s available and that’s what I’m doing here with Andy Clarke’s upcoming Practical Layout Workshop. First off, the deets: Date: Thursday, 18th September Time: 3:00 p.m. (UK) Duration: 2 hours (live, with demos and Q&A) Format: Online (join from anywhere), recording included Price: £69

How to Prepare for CSS-Specific Interview Questions

by: Shivam Bhalla Fri, 08 Aug 2025 13:42:31 +0000 If you landed on this article, chances are you might have a front-end interview coming up, perhaps one with a focus on CSS, or you are in the market to start preparing for CSS-related interviews altogether. Depending on the exact role you are interviewing for, it’s unlikely that you will only be asked questions about CSS. Typically, you will encounter a combination questions covering things like HTML, CSS, and JavaScript. For this article, w

404: Preventing Infinite Loops from Crashing the Browser

by: Chris Coyier Wed, 06 Aug 2025 18:50:41 +0000 Stephen and Chris hop on to talk about how we’re saving everyone from crashed browser tabs in CodePen’s 2.0 editor. One simple: while(true) { } Executing JavaScript can cause a browser tab to entirely lock up, preventing you from doing anything, like potentially saving your work. It can even crash other same-domain tabs. But not on our watch! CodePen is now using a “heartbeat” technique to report up from the preview iframe to the parent pa

Bringing Back Parallax With Scroll-Driven CSS Animations

by: Blake Lundquist Wed, 06 Aug 2025 13:39:06 +0000 For a period in the 2010s, parallax was a guaranteed way to make your website “cool”. Indeed, Chris Coyier was writing about it as far back as 2008. For those unfamiliar with the concept, parallax is a pattern in which different elements of a webpage move at varying speeds as the user scrolls, creating a three-dimensional, layered appearance. A true parallax effect was once only achievable using JavaScript. However, scroll-driven animation

Chris’ Corner: Scroll-Driven Excitement

by: Chris Coyier Mon, 04 Aug 2025 17:00:40 +0000 Scroll-Driven Animations are a bit closer to usable now that Safari has them in Technical Preview and Firefox has them behind a flag. Chrome has released them. Saron Yitbarek has been blogging about it for Apple, and it’s nice to see. Apple hasn’t ever been super big in the “we make educational content for web development in general” department but maybe that’s changing. I like how Saron lays scroll-driven animations out: What I like

Thinking Deeply About Theming and Color Naming

by: Zell Liew Mon, 04 Aug 2025 13:14:45 +0000 As a front-end developer, I’ve been pretty curious about how other people code up their websites. So I tend to poke my head into design systems whenever I find one. Then, late last year, a conversation with Geoff Graham set me off thinking even deeper about theming websites. (If you don’t know that dude, he’s the chief editor of this site, so that guy’s a pretty big deal, too.) So I’ve been watching, pondering, and exploring: How can we

Keeping Article Demos Alive When Third-Party APIs Die

by: Mészáros Róbert Wed, 30 Jul 2025 13:21:05 +0000 After four years, the demos in my “Headless Form Submission with the WordPress REST API” article finally stopped working. The article includes CodePen embeds that demonstrate how to use the REST API endpoints of popular WordPress form plugins to capture and display validation errors and submission feedback when building a completely custom front-end. The pens relied on a WordPress site I had running in the background. But during a forced i

Making a Masonry Layout That Works Today

by: Zell Liew Mon, 28 Jul 2025 12:42:16 +0000 Many CSS experts have weighed heavily on possible syntaxes for a new masonry layout feature last year. There were two main camps and a third camp that strikes a balance between the two: Use display: masonry Use grid-template-rows: masonry Use item-pack: collapse I don’t think they’ve came up with a resolution yet. But you might want to know that Firefox already supports the masonry layout with the second syntax. And Chrome is testi

403: Privacy & Permissions

by: Chris Coyier Sun, 27 Jul 2025 15:27:51 +0000 Chris & Rachel hop on the show to talk about the expanded privacy (access) model in the 2.0 editor (in Private Beta as we speak). Private Pens have always been a big deal, but as private as they are, if someone has the URL, they have the URL, and it doesn’t always feel very private. There are two new levels of privacy in the 2.0 editor: password protected and collaborators only. Passwords are an obvious choice we probably should have done lon

How to Discover a CSS Trick

by: Lee Meyer Fri, 25 Jul 2025 13:48:36 +0000 Do we invent or discover CSS tricks? Michelangelo described his sculpting process as chiseling away superfluous material to reveal the sculpture hidden inside the marble, and Stephen King says his ideas are pre-existing things he locates and uncovers “like fossils in the ground.” Paragraph one is early for me to get pretentious enough to liken myself to those iconic creative forces, but my work on CSS-Tricks feels like “discovering,” not “inventing,

Atomic Design Certification Course

by: Geoff Graham Thu, 24 Jul 2025 16:16:30 +0000 Brad Frost introduced the “Atomic Design” concept wayyyy back in 2013. He even wrote a book on it. And we all took notice, because that term has been part of our lexicon ever since. It’s a nice way to divide web designs into separate layers of concern, leaning into biology terms to help scope their context by size: Atoms Molecules Organisms Templates Pages Atoms are part of molecules, which are part of organisms,

A First Look at the Interest Invoker API (for Hover-Triggered Popovers)

by: Daniel Schwarz Wed, 23 Jul 2025 12:36:48 +0000 Chrome 139 is experimenting with Open UI’s proposed Interest Invoker API, which would be used to create tooltips, hover menus, hover cards, quick actions, and other types of UIs for showing more information with hover interactions. The Interest Invoker API makes these components declarative and hover-triggered, meaning that you create them with HTML, and then the web browser handles the mouseenter and mouseleave events for you, sans JavaScript.

Chris’ Corner: AI for me, AI for thee

by: Chris Coyier Mon, 21 Jul 2025 17:54:20 +0000 Our very own Stephen Shaw was on an episode of Web Dev Challenge on CodeTV: Build the Future of AI-Native UX in 4 Hours. I started watching this on my computer, but then moved to my living room couch to put it on the big screen. Because it deserves it! It honestly feels like “real” TV, as good as any episode of a home renovation show or the like. Only obviously better as it’s straight down the niche of web maker nerds like us. All three team

A Primer on Focus Trapping

by: Zell Liew Mon, 21 Jul 2025 13:14:17 +0000 Focus trapping is a term that refers to managing focus within an element, such that focus always stays within it: If a user tries to tab out from the last element, we return focus to the first one. If the user tries to Shift + Tab out of the first element, we return focus back to the last one. This whole focus trap thing is used to create accessible modal dialogs since it’s a whole ‘nother trouble to inert everything else — but you don

Getting Creative With Versal Letters

by: Andy Clarke Fri, 18 Jul 2025 16:12:05 +0000 A while back, our man Geoff Graham treated us to a refresher on the CSS initial-letter property, but how can you style drop and initial caps to reflect a brand’s visual identity and help to tell its stories? Here’s how I do it in CSS by combining ::first-letter and initial-letter with other unexpected properties, including border-image, and clip-path. Patty Meltt is an up-and-coming country music sensation. My brief: Patty Meltt is

Getting Clarity on Apple’s Liquid Glass

by: Geoff Graham Thu, 17 Jul 2025 13:23:52 +0000 Folks have a lot to say about “liquid glass,” the design aesthetic that Apple introduced at WWDC 2025. Some love it, some hate it, and others jumped straight into seeing how to they could create it in CSS. There’s a lot to love, hate, and experience with liquid glass. You can love the way content reflects against backgrounds. You can hate the poor contrast between foreground and background. And you can be eager to work with it. All of those c

10 Best DevOps Automation Tools in 2025

by: Neeraj Mishra Thu, 17 Jul 2025 03:36:01 +0000 DevOps tooling has become mission-critical. What used to be a niche engineering function is now a core business driver. And with the DevOps automation market projected to hit $72.81 billion by 2032, your choice of tools can literally make or break your product velocity. Whether you’re a CTO at a scale-up, a DevOps engineer in the trenches, or a founder juggling release chaos, choosing the right automation tools is no longer optional, it’s strate

402: Bookmarks

by: Chris Coyier Wed, 16 Jul 2025 19:42:27 +0000 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

What I Took From the State of Dev 2025 Survey

by: Sunkanmi Fafowora Wed, 16 Jul 2025 12:54:14 +0000 State of Devs 2025 survey results are out! While the survey isn’t directly related to the code part of what we do for work, I do love the focus Devographics took ever since its inception in 2020. And this year it brought us some rather interesting results through the attendance of 8,717 developers, lots of data, and even more useful insights that I think everyone can look up and learn from. I decided to look at the survey results with an

Chris’ Corner: We Can Have Nice Things

by: Chris Coyier Tue, 15 Jul 2025 14:56:20 +0000 It’s such a small, simple thing, but I’m very grateful that we’re getting “Gap Decorations” in CSS. 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 Part of what I like about it is that you don’t necessarily need to put grid items onto the g

Setting Line Length in CSS (and Fitting Text to a Container)

by: Daniel Schwarz Mon, 14 Jul 2025 12:38:23 +0000 First, what is line length? Line length is the length of a container that holds a body of multi-line text. “Multi-line” is the key part here, because text becomes less readable if the beginning of a line of text is too far away from the end of the prior line of text. This causes users to reread lines by mistake, and generally get lost while reading. Luckily, the Web Content Accessibility Guidelines (WCAG) gives us a pretty hard rule to foll

The Layout Maestro Course

by: Geoff Graham Fri, 11 Jul 2025 17:07:13 +0000 Layout. It’s one of those easy-to-learn, difficult-to-master things, like they say about playing bass. Not because it’s innately difficult to, say, place two elements next to each other, but because there are many, many ways to tackle it. And layout is one area of CSS that seems to evolve more than others, as we’ve seen in the past 10-ish years with the Flexbox, CSS Grid, Subgrid, and now Masonry to name but a few. May as well toss in Container Q

Scroll-Driven Sticky Heading

by: Amit Sheen Fri, 11 Jul 2025 12:43:59 +0000 Scroll-driven animations are great! They’re a powerful tool that lets developers tie the movement and transformation of elements directly to the user’s scroll position. This technique opens up new ways to create interactive experiences, cuing images to appear, text to glide across the stage, and backgrounds to subtly shift. Used thoughtfully, scroll-driven animations (SDA) can make your website feel more dynamic, engaging, and responsive. A few

401: Outgoing Email

by: Chris Coyier Thu, 10 Jul 2025 11:04:57 +0000 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

Better CSS Shapes Using shape() — Part 4: Close and Move

by: Temani Afif Mon, 07 Jul 2025 12:48:29 +0000 This is the fourth post in a series about the new CSS shape() function. So far, we’ve covered the most common commands you will use to draw various shapes, including lines, arcs, and curves. This time, I want to introduce you to two more commands: close and move. They’re fairly simple in practice, and I think you will rarely use them, but they are incredibly useful when you need them. Better CSS Shapes Using shape() Lines and Arcs

Important Information

Terms of Use Privacy Policy Guidelines We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.