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

    305

  • Comments

    0

  • Views

    9974

Entries in this blog

Is it Time to Un-Sass?

by: Jeff Bridgforth Wed, 17 Sep 2025 14:02:25 +0000 Several weeks ago, I participated in Front End Study Hall. Front End Study Hall is an HTML and CSS focused meeting held on Zoom every two weeks. It is an opportunity to learn from one another as we share our common interest in these two building blocks of the Web. Some weeks, there is more focused discussion while other weeks are more open ended and members will ask questions or bring up topics of interest. Joe, the moderator of the group,

409: Our Own Script Injection

by: Chris Coyier Tue, 16 Sep 2025 15:41:29 +0000 Chris and Stephen talk about how we use a Cloudflare Worker & HTMLRewriter to inject a very special <script> tag into the previews of the Pens you work on. This script has a lot of important jobs so it’s presence is crucial, and getting it in there reliably can is a bit of a challenge. Time Jumps 00:06 Injecting a script into your code 01:10 What we talked about previously that led up to this 02:45 What are the jobs of this s

Chris’ Corner: Terminological Fading

by: Chris Coyier Mon, 15 Sep 2025 17:18:42 +0000 I found myself saying “The Edge” in a recent podcast with Stephen. I was talking about some server-side JavaScript that executes during a web request, and that it was advantageous that it happens at CDN nodes around the world rather than at one location only, so that it’s fast. That was kinda the whole point about “The Edge” is speed. I don’t hear the term bandied about much anymore, but it’s still a useful architectural concept that many us

The “Most Hated” CSS Feature: cos() and sin()

by: Juan Diego Rodríguez Mon, 15 Sep 2025 14:31:06 +0000 No feature is truly “the worst” in CSS, right? After all, it’s all based on opinion and personal experience, but if we had to reach a consensus, checking the State of CSS 2025 results would be a good starting point. I did exactly that, jumped into the awards section, and there I found it: the “Most Hated Feature,” a title no CSS should have bear… This shocks me, if I’m being honest. Are really trigonometric functions really th

What Can We Actually Do With corner-shape?

by: Daniel Schwarz Fri, 12 Sep 2025 14:20:45 +0000 When I first started messing around with code, rounded corners required five background images or an image sprite likely created in Photoshop, so when border-radius came onto the scene, I remember everybody thinking that it was the best thing ever. Web designs were very square at the time, so to have border-radius was super cool, and it saved us a lot of time, too. Chris’ border-radius article from 2009, which at the time of writing is

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

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.