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

    281

  • Comments

    0

  • Views

    8204

Entries in this blog

405: Elasticsearch → Postgres Search

by: Chris Coyier Tue, 19 Aug 2025 19:15:02 +0000 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

3D Layered Text: The Basics

by: Amit Sheen Mon, 18 Aug 2025 13:46:00 +0000 Recently, a client asked me to create a bulging text effect. These are exactly the kinds of creative challenges I live for. I explored several directions, JavaScript solutions, SVG filters, but then I remembered the concept of 3D layered text. With a bit of cleverness and some advanced CSS, I managed to get a result I’m genuinely proud of. Visually, it’s striking, and it’s also a perfect project to learn all sorts of valuable CSS animat

Covering hidden=until-found

by: Geoff Graham Fri, 15 Aug 2025 12:55:36 +0000 Filing this in the “Missed First Time Around” category. It popped up in the Firefox 139 release notes and I was, like, ooo neat. Then I saw it’s been in Chrome since at least 2022. And as I wrote this, it landed in Safari Technology Preview 125. So there you have it. Turns out there are a few good posts and tutorials about hidden=until-found floating out there, so I thought I’d jot down a few key takeaways for later reference. It makes

A Few Things About the Anchor Element’s href You Might Not Have Known

by: Geoff Graham Fri, 15 Aug 2025 12:26:00 +0000 I love “re-learning” things I thought I knew. HTML is full of those opportunities (case in point, like today) since it’s where you typically start learning about web development. And in those early days, you don’t know what you don’t know. So, thanks Jim Nielsen for giving me a reason to give URL patterns another look. It’s easy to take URL superpowers for granted, even if you already have these patterns under your belt. The patterns:

On Accessibility Conformance, Design Systems, and CSS “Base” Units

by: Geoff Graham Thu, 14 Aug 2025 13:10:11 +0000 My brain can’t help but try to make connections between seemingly disparate ideas. And that’s what happened yesterday when I read: Hidde’s “Can components conform to WCAG?” Joas’s “Automating Design Systems” Zell’s “We Might Need Something Between Root and Relative CSS Units for “Base Elements” What we have is: A semantic issue of saying that individual components can conform to WCAG. We might be able to “optimize” a co

We Might Need Something Between Root and Relative CSS Units for “Base Elements”

by: Zell Liew Wed, 13 Aug 2025 13:24:55 +0000 CSS provides us with root and relative values. Root values are like rem and rlh — they’re tied to the values written in the :root selector (the most common one would be the html element). Relative values are like em, lh, ch and various others — they’re tied to the font-size in that specific element. I’ve come to realize that perhaps we need to have a unit between root and relative values. Having such a unit allows us to size things wit

CSS-Questions

by: Geoff Graham Tue, 12 Aug 2025 15:02:21 +0000 Sunkanmi Fafowora is a frequent flier around here. You’ve probably seen his name pop up in the CSS-Tricks Almanac and we actually just published something today that he wrote up for the color-mix() function. The guy spends a lot of time in the Almanac because he loves technical documentation, something he showed off when writing the CSS Color Functions Guide. And it’s that love for technical documentation that lead him to ship CSS-Questions (

Chris’ Corner: Browser Wars Micro Edition

by: Chris Coyier Mon, 11 Aug 2025 15:54:50 +0000 Ages ago, Firefox shipped “masonry layout” where you simply grid-template-rows: masonry; instead of defining specific rows in a grid or letting them auto-create. It wasn’t terribly powerful but it did the trick for a lot of use cases. There has been renewed interest in this the past year or so, where Google and Apple have competing ideas on how to do this style of layout better. Google-folk think display: masonry; is best, with a bunch

Getting Creative With Quotes

by: Andy Clarke Mon, 11 Aug 2025 13:43:14 +0000 Block quotes and pull quotes are useful for punctuating solid blocks of running text. They’re also two of the best typographic elements for acting as visual landmarks to catch someone’s eye. There are no rules about how long a quote should be, how big it should look, or even how it’s styled. So, how do you design block quotes and pull quotes to reflect a brand’s visual identity and help tell its story? Here’s how I do it by styling the HTML bl

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

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.