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

    279

  • Comments

    0

  • Views

    8144

Entries in this blog

Chris Corner: For The Sake of It

by: Chris Coyier Mon, 09 Jun 2025 16:37:09 +0000 I love weird design ideas. Probably because so much of what we need to do as web designers is, appropriately, somewhat serious. We want things to be simple, clear, professional, so that people understand them and in many cases pay for them. So when the constraints relax, so can we. It’s unlikely that Taylor’s homepage would “perform well” in any sort of UX testing, but who cares? It’s not impossible to use, it’s just unusual. And crucially, i

Creating an Auto-Closing Notification With an HTML Popover

by: Preethi Mon, 09 Jun 2025 12:58:37 +0000 The HTML popover attribute transforms elements into top-layer elements that can be opened and closed with a button or JavaScript. Most popovers can be light-dismissed, closing when the user clicks or taps outside the popup. Currently, HTML popover lacks built-in auto-close functionality, but it’s easy to add. Auto closing popups are useful for user interfaces like banner notifications — the new-message alerts in phones, for instance. A picture

Better CSS Shapes Using shape() — Part 3: Curves

by: Temani Afif Fri, 06 Jun 2025 13:52:42 +0000 If you’re following along, this is the third post in a series about the new CSS shape() function. We’ve learned how to draw lines and arcs and, in this third part, I will introduce the curve command — the missing command you need to know to have full control over the shape() function. In reality, there are more commands, but you will rarely need them and you can easily learn about them later by checking the documentation. Better CSS Shapes

Exploring the CSS contrast-color() Function… a Second Time

by: Daniel Schwarz Thu, 05 Jun 2025 13:45:56 +0000 In many countries, web accessibility is a human right and the law, and there can be heavy fines for non-compliance. Naturally, this means that text and icons and such must have optimal color contrast in accordance with the benchmarks set by the Web Content Accessibility Guidelines (WCAG). Now, there are quite a few color contrast checkers out there (Figma even has one built-in now), but the upcoming contrast-color() function doesn’t check color

The State of CSS 2025 Survey is out!

by: Juan Diego Rodríguez Thu, 05 Jun 2025 11:13:00 +0000 The State of CSS 2025 Survey dropped a few days ago, and besides waiting for the results, it’s exciting to see a lot of the new things shipped to CSS over the past year reflected in the questions. To be specific, the next survey covers the following features: calc-size() shape() Scroll-driven animations Container scroll-state queries CSS Carousels text-box-edge and text-box-trim field-sizing ::target-t

Getting Creative With HTML Dialog

by: Andy Clarke Tue, 03 Jun 2025 14:39:04 +0000 Like ’em or loath ’em, whether you’re showing an alert, a message, or a newsletter signup, dialogue boxes draw attention to a particular piece of content without sending someone to a different page. In the past, dialogues relied on a mix of divisions, ARIA, and JavaScript. But the HTML dialog element has made them more accessible and style-able in countless ways. So, how can you take dialogue box design beyond the generic look of frameworks an

Chris’ Corner: Type Stuff!

by: Chris Coyier Mon, 02 Jun 2025 17:01:09 +0000 Let’s do typography stuff! Video: “A live demo by me of early font editors on a real Macintosh Plus” by Mark Simonson Font: “Is this font easy for you to read? Good—that’s the idea.” Hyperlegible is the name of the font, designed for people with low vision. Technique: “Fluid typography means thinking in terms of type scales and flexible spacing across your defined design space.” Richard Rutter goes retrofitting a new type sizing tech

Better CSS Shapes Using shape() — Part 2: More on Arcs

by: Temani Afif Fri, 30 May 2025 13:45:43 +0000 Ready for the second part? We are still exploring the shape() function, and more precisely, the arc command. I hope you took the time to digest the first part because we will jump straight into creating more shapes! As a reminder, the shape() function is only supported in Chrome 137+ and Safari 18.4+ as I’m writing this in May 2025. Sector shape Another classic shape that can also be used in pie-like charts. It’s already clea

What We Know (So Far) About CSS Reading Order

by: Daniel Schwarz Tue, 27 May 2025 13:02:32 +0000 The reading-flow and reading-order proposed CSS properties are designed to specify the source order of HTML elements in the DOM tree, or in simpler terms, how accessibility tools deduce the order of elements. You’d use them to make the focus order of focusable elements match the visual order, as outlined in the Web Content Accessibility Guidelines (WCAG 2.2). To get a better idea, let’s just dive in! (Oh, and make sure that you’re u

Chris’ Corner: Doing a Good Job

by: Chris Coyier Mon, 26 May 2025 15:54:28 +0000 This is a great story from Dan North about “The Worst Programmer I know”, Tim MacKinnon. It’s a story about measuring developer performance with metrics: Scared? Maybe you can guess. Tim was very bad at metrics. Why? Maybe you can guess again. Tim wasn’t playing that game, he was a true senior developer in the sense that he nurtured his team. Every organization is different though. Mercifully in the situation above, Da

Better CSS Shapes Using shape() — Part 1: Lines and Arcs

by: Temani Afif Fri, 23 May 2025 13:02:32 +0000 Creating CSS Shapes is a classic and one of my favorite exercise. Indeed, I have one of the biggest collections of CSS Shapes from where you can easily copy the code of any shape. I also wrote an extensive guide on how to create them: The Modern Guide For Making CSS Shapes. Even if I have detailed most of the modern techniques and tricks, CSS keeps evolving, and new stuff always emerges to simplify our developer life. Recently, clip-path was u

You can style alt text like any other text

by: Geoff Graham Thu, 22 May 2025 14:43:09 +0000 Clever, clever that Andy Bell. He shares a technique for displaying image alt text when the image fails to load. Well, more precisely, it’s a technique to apply styles to the alt when the image doesn’t load, offering a nice UI fallback for what would otherwise be a busted-looking error. The recipe? First, make sure you’re using alt in the HTML. Then, a little JavaScript snippet that detects when an image fails to load: const images =

SVG to CSS Shape Converter

by: Geoff Graham Wed, 21 May 2025 15:09:29 +0000 Shape master Temani Afif has what might be the largest collection of CSS shapes on the planet with all the tools to generate them on the fly. There’s a mix of clever techniques he’s typically used to make those shapes, many of which he’s covered here at CSS-Tricks over the years. Some of the more complex shapes were commonly clipped with the path() function. That makes a lot of sense because it literally accepts SVG path coordinates that you

Chris’ Corner: Design Do’s and Don’ts

by: Chris Coyier Mon, 19 May 2025 16:36:15 +0000 I admit I’m a sucker for “do this; don’t do that” (can’t you read the sign) blog posts when it comes to design. Screw nuance, gimme answers. Anthony Hobday has a pretty good one in Visual design rules you can safely follow every time. Makes sense to me; ship it. Erik Kennedy does a pretty good job with posts in this vein, and I just read one about designing sidebars in his email newsletter. But he didn’t blog it so I can’t link to it. Ins

A Reader’s Question on Nested Lists

by: Juan Diego Rodríguez Mon, 19 May 2025 12:32:22 +0000 A couple of days back, among the tens of crypto-scams that flood our contact inbox, we found an interesting question on nested lists from one of our readers. Styling lists? Enough to catch my attention. After all, I just completed an entire guide about CSS counters. The message continues: Fair enough! So, what we are looking to achieve is a nested list, where each sublist marker/counter is of a different kind. The example

HTML Email Accessibility Report 2025

by: Geoff Graham Fri, 16 May 2025 14:38:19 +0000 Some weekend reading on the heels of Global Accessibility Awareness Day (GAADM), which took place yesterday. The Email Markup Consortium (EMC) released its 2025 study on the accessibility in HTML emails, and the TL;DR is not totally dissimilar from what we heard from WebAIM’s annual web report: The results come from an analysis of 443,585 emails collected from the past year. According to EMC, only 21 emails passed all accessibility ch

Scroll-Driven Animations Inside a CSS Carousel

by: Geoff Graham Thu, 15 May 2025 12:30:59 +0000 I was reflecting on what I learned about CSS Carousels recently. There’s a lot they can do right out of the box (and some things they don’t) once you define a scroll container and hide the overflow. Hey, isn’t there another fairly new CSS feature that works with scroll regions? Oh yes, that’s Scroll-Driven Animations. Shouldn’t that mean we can trigger an animation while scrolling through the items in a CSS carousel? Why yes, that’s e

This Isn’t Supposed to Happen: Troubleshooting the Impossible

by: John Rhea Wed, 14 May 2025 14:01:42 +0000 I recently rebuilt my portfolio (johnrhea.com). After days and days of troubleshooting and fixing little problems on my local laptop, I uploaded my shiny new portfolio to the server — and triumphantly watched it not work at all… The browser parses and runs JavaScript, right? Maybe Chrome will handle something a little different from Firefox, but if the same code is on two different servers it should work the same in Chrome (or Firefox) no matter

Chris’ Corner: CSS Deep Cuts

by: Chris Coyier Mon, 12 May 2025 17:00:57 +0000 Sometimes we gotta get into the unglamorous parts of CSS. I mean *I* think they are pretty glamorous: new syntax, new ideas, new code doing foundational and important things. I just mean things that don’t demo terribly well. Nothing is flying across the screen, anyway. The Future of CSS: Construct <custom-ident> and <dashed-ident> values with ident() by Bramus Van Damme — When you go anchor-name: --name; the --name part is a cust

Using Pages CMS for Static Site Content Management

by: Ryan Trimble Mon, 12 May 2025 12:42:10 +0000 Friends, I’ve been on the hunt for a decent content management system for static sites for… well, about as long as we’ve all been calling them “static sites,” honestly. I know, I know: there are a ton of content management system options available, and while I’ve tested several, none have really been the one, y’know? Weird pricing models, difficult customization, some even end up becoming a whole ‘nother thing to manage. Also, I really en

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)

by: John Rhea Thu, 08 May 2025 12:33:29 +0000 I recently updated my portfolio at johnrhea.com. (If you’re looking to add a CSS or front-end engineer with storytelling and animation skills to your team, I’m your guy.) I liked the look of a series of planets I’d created for another personal project and decided to reuse them on my new site. Part of that was also reusing an animation I’d built circa 2019, where a moon orbited around the planet. Initially, I just plopped the animations into the

Why is Nobody Using the hwb() Color Function?

by: Sunkanmi Fafowora Wed, 07 May 2025 12:25:19 +0000 Okay, nobody is an exaggeration, but have you seen the stats for hwb()? They show a steep decline, and after working a lot on color in the CSS-Tricks almanac, I’ve just been wondering why that is. hwb() is a color function in the sRGB color space, which is the same color space used by rgb(), hsl() and the older hexadecimal color format (e.g. #f8a100). hwb() is supposed to be more intuitive and easier to work with than hsl(). I ki

GSAP is Now Completely Free, Even for Commercial Use!

by: Ryan Trimble Tue, 06 May 2025 14:14:41 +0000 Back in October, the folks behind the GreenSock Animation Platform (GSAP) joined forces with Webflow, the visual website builder. Now, the team’s back with another announcement: Along with the version 3.13 release, GSAP, and all its awesome plugins, are now freely available to everyone. Webflow is celebrating over on their blog as well: Check out the GSAP blog to read more about the announcement, then go animate something

Chris’ Corner: GSAP, more like FREESap

by: Chris Coyier Mon, 05 May 2025 17:00:34 +0000 The news is that GSAP, a hugely popular animation library on CodePen and the web writ large, is now entirely free to use thanks to their being acquired by Webflow. Cool. In celebration, they are also running a Community Challenge where you make stuff and submit it and maybe win some swag. You make something to submit either with Webflow or CodePen, and they provide a quick Pen template to get started. As you can see in that temp

Modern Scroll Shadows Using Scroll-Driven Animations

by: Kevin Hamer Mon, 05 May 2025 13:01:43 +0000 Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before (indeed, it’s one of his all-time favorite CSS tricks), by layering background gradients with different attachments, we can get shadows that are covered up when you’ve scrolled to the limits of the element. Geoff covered a newer approach that uses the animation-timeline property. Using animation-timeline, we can tie CSS animation to the scr

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.