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

    312

  • Comments

    0

  • Views

    10248

Entries in this blog

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

The Gap Strikes Back: Now Stylable

by: Patrick Brosset Tue, 01 Jul 2025 12:42:38 +0000 Four years ago, I wrote an article titled Minding the “gap”, where I talked about the CSS gap property, where it applied, and how it worked with various CSS layouts. At the time, I described how easy it was to evenly space items out in a flex, grid, or multi-column layout, by using the gap property. But, I also said that styling the gap areas was much harder, and I shared a workaround. However, workarounds like using extra HTML element

Chris’ Corner: Tokens

by: Chris Coyier Mon, 30 Jun 2025 17:04:57 +0000 Mr. Brad Frost, and his brother Ian, have a new course they are selling called Subatomic: The Complete Guide to Design Tokens. To be honest, I was a smidge skeptical. I know what a design token is. It’s a variable of a color or font-family or something. I pretty much only work on websites, so that exposes itself as a --custom-property and I already know that using those to abstract common usage of colors and fonts is smart and helpful. Done.

Using CSS Cascade Layers With Tailwind Utilities

by: Zell Liew Mon, 30 Jun 2025 13:16:43 +0000 Adam Wathan has (very cleverly) built Tailwind with CSS Cascade Layers, making it extremely powerful for organizing styles by priority. @layer theme, base, components, utilities; @import 'tailwindcss/theme.css' layer(theme); @import 'tailwindcss/utilities.css' layer(utilities); The core of Tailwind are its utilities. This means you have two choices: The default choice The unorthodox choice The default choice The default ch

How Japanese Programmers Are Leveraging MT5 for Advanced Algorithmic Trading

by: Neeraj Mishra Fri, 27 Jun 2025 17:48:27 +0000 MetaTrader 5 (MT5) is an advanced trading platform supporting a multitude of different assets like Forex, cryptos, commodities, and so on. It is incredibly popular among Japanese traders and regulated brokers. Many programmers in Japan are employing its MQL5 programming language to develop advanced trading algorithms and we are going to explain how they are using MT5 for advanced algorithm development and trading below. Identical syntax to C/C++

CSS Blob Recipes

by: Juan Diego Rodríguez Fri, 27 Jun 2025 13:48:41 +0000 Blob, Blob, Blob. You hate them. You love them. Personally, as a design illiterate, I like to overuse them… a lot. And when you repeat the same process over and over again, it’s only a question of how much you can optimize it, or in this case, what’s the easiest way to create blobs in CSS? Turns out, as always, there are many approaches. To know if our following blobs are worth using, we’ll need them to pass three tests: They

KelpUI

by: Geoff Graham Thu, 26 Jun 2025 16:42:32 +0000 KelpUI is new library that Chris Ferdinandi is developing, designed to leverage newer CSS features and Web Components. I’ve enjoyed following Chris as he’s published an ongoing series of articles detailing his thought process behind the library, getting deep into his approach. You really get a clear picture of his strategy and I love it. He outlined his principles up front in a post back in April: And that’s what I’ve seen so far.

Poking at the CSS if() Function a Little More: Conditional Color Theming

by: Daniel Schwarz Wed, 25 Jun 2025 14:33:45 +0000 Chrome 137 shipped the if() CSS function, so it’s totally possible we’ll see other browsers implement it, though it’s tough to know exactly when. Whatever the case, if() enables us to use values conditionally, which we can already do with queries and other functions (e.g., media queries and the light-dark() function), so I’m sure you’re wondering: What exactly does if() do? Sunkanmi gave us a nice overview of the function yesterday, poking

Poking at the CSS if() Function a Little More: Conditional Color Theming

by: Daniel Schwarz Wed, 25 Jun 2025 14:33:45 +0000 Chrome 137 shipped the if() CSS function, so it’s totally possible we’ll see other browsers implement it, though it’s tough to know exactly when. Whatever the case, if() enables us to use values conditionally, which we can already do with queries and other functions (e.g., media queries and the light-dark() function), so I’m sure you’re wondering: What exactly does if() do? Sunkanmi gave us a nice overview of the function yesterday, poking

Lightly Poking at the CSS if() Function in Chrome 137

by: Sunkanmi Fafowora Tue, 24 Jun 2025 15:17:10 +0000 We’ve known it for a few weeks now, but the CSS if() function officially shipped in Chrome 137 version. It’s really fast development for a feature that the CSSWG resolved to add less than a year ago. We can typically expect this sort of thing — especially one that is unlike anything we currently have in CSS — to develop over a number of years before we can get our dirty hands on it. But here we are! I’m not here to debate whether if() in

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.