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

    7974

Entries in this blog

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

Chris’ Corner: Modern CSS Features Coming Together

by: Chris Coyier Mon, 23 Jun 2025 15:47:48 +0000 I like the term “content aware components” like Eric Bailey uses in the Piccalilli article Making content-aware components using CSS :has(), grid, and quantity queries. Does a card have a photo? Yes, do one thing, no, do another. That sort of thing. Eric has some good examples where a UI component has a bunch more “tags” than another, so the layout adjusts to accommodate them better. Thanks to :has(), the idea of “quantity queries” (e.g.

A Better API for the Intersection and Mutation Observers

by: Zell Liew Mon, 23 Jun 2025 13:41:34 +0000 In a previous article, I showed you how to refactor the Resize Observer API into something way simpler to use: // From this const observer = new ResizeObserver(observerFn) function observerFn (entries) { for (let entry of entries) { // Do something with each entry } } const element = document.querySelector('#some-element') observer.observe(element); // To this const node = document.querySelector('#some-element') const obs = resizeO

Color Everything in CSS

by: Juan Diego Rodríguez Fri, 20 Jun 2025 14:04:12 +0000 I have had the opportunity to edit over a lot of the new color entries coming to the CSS-Tricks Almanac. We’ve already published several with more on the way, including a complete guide on color functions: color() hsl() lab() lch() oklab() oklch() rgb() And I must admit: I didn’t know a lot about color in CSS (I still used rgb(), which apparently isn’t what cool people do anymore), so it has been a fun le

CSS Color Functions

by: Sunkanmi Fafowora Thu, 19 Jun 2025 15:01:18 +0000 If you asked me a few months ago, “What does it take for a website to stand out?” I may have said fancy animations, creative layouts, cool interactions, and maybe just the general aesthetics, without pointing out something in particular. If you ask me now, after working on color for the better part of the year, I can confidently say it’s all color. Among all the aspects that make a design, a good color system will make it as beautiful as p

How to Keep Up With New CSS Features

by: Sacha Greif Tue, 17 Jun 2025 13:13:15 +0000 How do you keep up with new CSS features? Let’s say for example that, hypothetically speaking, you run a popular web development survey focused on CSS, and need to figure out what to include in this year’s edition. (In a total coincidence the aforementioned State of CSS survey for this year is actually open right now — go take it to see what’s new in CSS!) You might think you can just type “new CSS features 2025” in Google and be done with

Chris’ Corner: Liquid Ass

by: Chris Coyier Mon, 16 Jun 2025 16:23:56 +0000 First a quick heads up about… me. I have a weird itch to do “streaming”, so I’m letting myself just be a hardcore beginner and giving it a shot. The plan is just hang out with whoever shows up and make stuff and talk about front end web development and design. So: Me on Twitch CodePen on YouTube Seems like those two platforms make the most sense for that, so here we go. I made this super sick banner for Twitch, which you can’t

A Better API for the Resize Observer

by: Zell Liew Mon, 16 Jun 2025 12:47:51 +0000 Resize Observer, Mutation Observer, and Intersection Observers are all good APIs that are more performant than their older counterparts: ResizeObserver is better than the resize event MutationObserver replaces the now deprecated Mutation Events IntersectionObserver lets you do certain scroll interactions with less performance overhead. The API for these three observers are quite similar (but they have their differences which we wil

Breaking Boundaries: Building a Tangram Puzzle With (S)CSS

by: Sladjana Stojanovic Thu, 12 Jun 2025 13:58:38 +0000 For years, I believed that drag-and-drop games — especially those involving rotation, spatial logic, and puzzle solving — were the exclusive domain of JavaScript. Until one day, I asked AI: The answer: “No — not really. You’ll need JavaScript.” That was all the motivation I needed to prove otherwise. CodePen Embed Fallback But first, let’s ask the obvious question: Why would anyone do this? Well… To know how far

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

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.