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

    275

  • Comments

    0

  • Views

    7922

Entries in this blog

Compiling Multiple CSS Files into One

by: Geoff Graham Thu, 11 Sep 2025 15:16:34 +0000 Stu Robson is on a mission to “un-Sass” his CSS. I see articles like this pop up every year, and for good reason as CSS has grown so many new legs in recent years. So much so that much of the core features that may have prompted you to reach for Sass in the past are now baked directly into CSS. In fact, we have Jeff Bridgforth on tap with a related article next week. What I like about Stu’s stab at this is that it’s an ongoing journey rather

What’re Your Top 4 CSS Properties?

by: Geoff Graham Wed, 10 Sep 2025 13:13:41 +0000 That’s what Donnie D’Amato asks in a recent post: This really got the CSS-Tricks team talking. It’s the nerdy version of “if you could only take one album with you on a remote island…” And everyone had a different opinion which is great because it demonstrates the messy, non-linear craft that is thinking like a front-end developer. Seems like a pretty straightforward thing to answer, right? But like Donnie says, this takes some strate

408: Proxied Third-Party JavaScript

by: Chris Coyier Tue, 09 Sep 2025 15:55:27 +0000 Chris and Stephen hop on the podcast to discuss the concept of a proxy. Possibly the most “gray hat” thing that CodePen does. We use a third-party analytics tool called Fullres. We could just put a link to the <script> necessary to make that work directly to fullres.com, but being an analytics tool, it’s blocked by a ton of ad blocking browsers and browser extensions. We made the conscious choice to have that <script> point to a codep

Federated Learning Explained: Collaborative AI Without Data Sharing

by: Nitij Taneja Mon, 08 Sep 2025 18:02:39 GMT Introduction In an era where data privacy is paramount and artificial intelligence continues to advance at an unprecedented pace, Federated Learning (FL) has emerged as a revolutionary paradigm. This innovative approach allows multiple entities to collaboratively train a shared prediction model without exchanging their raw data. Imagine scenarios where hospitals collectively build more accurate disease detection models without sharing sensitive p

Chris’ Corner: Simple, Accessible Multi-Select UI

by: Chris Coyier Mon, 08 Sep 2025 17:01:16 +0000 There’s a nice article by Enzo Manuel Mangano called Checkbox Interactions – The beauty of Layout Animations. In the end, you get some nicely animated checkboxes, essentially: I like it. It’s a modern-looking multiple-choice with very clear UX. Enzo’s tutorial is all React Native-ified. I think Enzo is a React Native guy and that’s his thing. And that’s fine and makes sense. A lot of time UI like this is part of highly dynamic we

Composition in CSS

by: Zell Liew Mon, 08 Sep 2025 13:55:26 +0000 Tailwind and other utility libraries have been huge proponents of composition. But, to me, their version of composition has always carried a heavy sense of naïveté. I mean, utility composition is basically adding CSS values to the element, one at a time… <div class="p-4 border-2 border-blue-500"> ... </div> If we’re honest for a minute, how is this composition different from adding CSS rules directly into a class? /* This

What You Need to Know About CSS Color Interpolation

by: Sunkanmi Fafowora Fri, 05 Sep 2025 13:44:06 +0000 Color interpolation, loosely speaking, is the process of determining the colors between two color points. It allows us to create unique colors, beautiful palettes, better gradients, and smooth transitions. I recently wrote a Guide to CSS Color Functions but didn’t have the chance to explain color interpolation in any great depth — which is a shame, since it allows us to create cool demos like this one: CodePen Embed Fallback D

Should the CSS light-dark() Function Support More Than Light and Dark Values?

by: Sunkanmi Fafowora Tue, 02 Sep 2025 14:44:26 +0000 One of the newer CSS features that has piqued my interest: the light-dark() function. And I’ve been closely following it ever since it became Baseline back in May 2024. The light-dark() function, briefly If you don’t know, the light-dark() function takes two color arguments: one for light mode and one for dark mode. Hence, the name light-dark(). It toggles between the two light and dark values based on a user’s preferences. Sa

407: Our Own CDN

by: Chris Coyier Tue, 02 Sep 2025 14:32:51 +0000 Robert and Chris jump on to talk about own own little CDN project. Maybe that’s not the right term, but we struggled with naming it. Truth be told, it’s the /public/ folder in our monorepo, where the purpose is getting files to the world wide internet at URLs that anyone can access. Our favicon is a good example, where many of our sites need access to that, but we only want it once in our repo (but we have actually lots of use-cases.) There a

407: Our Own CDN

by: Chris Coyier Tue, 02 Sep 2025 14:32:51 +0000 Robert and Chris jump on to talk about our little CDN project. Maybe that’s not the right term, but we struggled with naming it. Truth be told, it’s the /public/ folder in our monorepo, where the purpose is getting files to the world wide internet at URLs that anyone can access. Our favicon is a good example, where many of our sites need access to that, but we only want it once in our repo (but we have actually lots of use-cases.) There are s

Chris’ Corner: Clever Clever

by: Chris Coyier Mon, 01 Sep 2025 17:29:09 +0000 David Darnes made a <code-pen> web component, which is a basic HTML/CSS/JS panel layout that renders them into an iframe (using the very cool <syntax-highlight> web component as well). Then it ate itself when Ariel Salminen put a <code-pen> in a <code-pen>. Then the universe collapsed upon itself when Rob Rhoades made a code pen linking to a code pen inside a <code-pen> inside a CodePen. The kids are alr

CSS Elevator: A Pure CSS State Machine With Floor Navigation

by: Christian Sabourin Fri, 29 Aug 2025 13:06:48 +0000 As a developer with a passion for state machines, I’ve often found myself inspired by articles like “A Complete State Machine Made with HTML Checkboxes and CSS.” The power of pure CSS-driven state machines intrigued me, and I began to wonder: could I create something simpler, more interactive, and without the use of macros? This led to a project where I built an elevator simulation in CSS, complete with direction indicators, animated transi

406: Hot Trends of 2025

by: Chris Coyier Thu, 28 Aug 2025 14:01:41 +0000 Marie and Chris jump on to discuss some of the trends of what people are building on CodePen here, approximately halfway through 2025. New CSS! Custom @functions (just landed) if() function clip-path & shape() corner-shape and the superellipse Scrolling stuff The attr() power up Hot Styles Liquid glass (Jhey’s demo, Spark) Hard glitch (CRT-like effect with VFX-JS, Glitchy button hover effect with VF

A Radio Button Shopping Cart Trick

by: Preethi Wed, 27 Aug 2025 14:18:12 +0000 Editor’s note: This is a really clever idea that Preethi shared, but you will also see that it comes with accessibility drawbacks because it uses duplicated interactive elements. There are other ways to approach this sort of thing, as Preethi mentions, and we’ll look at one of them in a future article. Two large pizzas for yourself, or twelve small ones for the kids party — everyone’s gone through the process of adding items to an online cart. Gro

Getting Creative With Images in Long-Form Content

by: Andy Clarke Mon, 25 Aug 2025 17:16:35 +0000 When you picture placing images in long-form content — like articles, case studies, or reports — the standard approach is inline rectangles, breaking up blocks of text. Functional? Sure. Inspiring? Hardly. Why do so many long-form articles feel visually flat? Why do images so often seem bolted on, rather than part of the story? And how does that affect engagement, comprehension, or tone? Images in long-form content can (and often should) d

Chris’ Corner: Pretty Palettes

by: Chris Coyier Mon, 25 Aug 2025 16:17:42 +0000 I’m not terribly good at picking a good color palette out of thin air. My go-to is a dark look with bright colored accents, but I’m wildly envious whenever I see a beautiful website with great looking colors that are very far away from what I could pull off. Sometimes, a little inspiration can go a long way. Here’s some! Color Lisa Flexoki Mildliner Reference Kind of Rebeccapurple The story of how

3D Layered Text: Interactivity and Dynamism

by: Amit Sheen Fri, 22 Aug 2025 13:14:31 +0000 In the previous two chapters, we built a layered 3D text effect, added depth and color, and then brought it to life with motion. We explored static structure, animated variations, and even some clever decoration tricks. But everything so far has been hard-coded. This time, we’re going dynamic. In this final chapter, we’re stepping into the world of interactivity by adding JavaScript into the mix. We’ll start by generating the layers program

3D Layered Text: Interactivity and Dynamicism

by: Amit Sheen Fri, 22 Aug 2025 13:14:31 +0000 In the previous two chapters, we built a layered 3D text effect, added depth and color, and then brought it to life with motion. We explored static structure, animated variations, and even some clever decoration tricks. But everything so far has been hard-coded. This time, we’re going dynamic. In this final chapter, we’re stepping into the world of interactivity by adding JavaScript into the mix. We’ll start by generating the layers program

3D Layered Text: Motion and Variations

by: Amit Sheen Wed, 20 Aug 2025 13:54:52 +0000 In the previous chapter, we built a basic 3D layered text effect using nothing but HTML and CSS. It looks great and has a solid visual presence, but it’s completely static. That is about to change. In this chapter, we will explore ways to animate the effect, add transitions, and play with different variations. We will look at how motion can enhance depth, and how subtle tweaks can create a whole new vibe. 3D Layered Text Article Series

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

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.