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

    9929

Entries in this blog

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

CSS shape() Commands

by: Geoff Graham Fri, 02 May 2025 12:36:10 +0000 The CSS shape() function recently gained support in both Chromium and WebKit browsers. It’s a way of drawing complex shapes when clipping elements with the clip-path property. We’ve had the ability to draw basic shapes for years — think circle, ellipse(), and polygon() — but no “easy” way to draw more complex shapes. Well, that’s not entirely true. It’s true there was no “easy” way to draw shapes, but we’ve had the path() function for som

State of Devs: A Survey for Every Developer

by: Sacha Greif Thu, 01 May 2025 12:34:58 +0000 I don’t know if I should say this on a website devoted to programming, but I sometimes feel like *lowers voice* coding is actually the least interesting part of our lives. After all, last time I got excited meeting someone at a conference it was because we were both into bouldering, not because we both use React. And The Social Network won an Oscar for the way it displayed interpersonal drama, not for its depiction of Mark Zuckerberg’s PHP cod

Revisiting Image Maps

by: Andy Clarke Wed, 30 Apr 2025 12:12:45 +0000 I mentioned last time that I’ve been working on a new website for Emmy-award-winning game composer Mike Worth. He hired me to create a highly graphical design that showcases his work. Mike loves ’90s animation, particularly Disney’s Duck Tales and other animated series. He challenged me to find a way to incorporate their retro ’90s style into his design without making it a pastiche. But that wasn’t my only challenge. I also needed to achieve t

Open Up With Brad Frost, Episode 2

by: Geoff Graham Tue, 29 Apr 2025 14:27:25 +0000 Brad Frost is running this new little podcast called Open Up. Folks write in with questions about the “other” side of web design and front-end development — not so much about tools and best practices as it is about the things that surround the work we do, like what happens if you get laid off, or AI takes your job, or something along those lines. You know, the human side of what we do in web design and development. Well, it just so happen

Chris’ Corner: Reacting

by: Chris Coyier Mon, 28 Apr 2025 17:20:59 +0000 I was listening to Wes and Scott on a recent episode of Syntax talking about RSCs (React Server Components). I wouldn’t say it was particularly glowing. We use them here at CodePen, and will likely be more and more as we ship more with Next.js, which is part of our most modern stack that we are always moving toward. Me, I like Next.js. React makes good sense to me for use in a very interactive, long-session style application with oodles of s

Anchor Positioning Just Don’t Care About Source Order

by: Geoff Graham Mon, 28 Apr 2025 12:43:01 +0000 Ten divs walk into a bar: <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> There’s not enough chairs for them to all sit at the bar, so you need the tenth div to sit on the lap of one of the other divs, say the second one. We can visually co

The Lost CSS Tricks of Cohost.org

by: Blackle Mori Thu, 24 Apr 2025 12:49:42 +0000 You would be forgiven if you’ve never heard of Cohost.org. The bespoke, Tumblr-like social media website came and went in a flash. Going public in June 2022 with invite-only registrations, Cohost’s peach and maroon landing page promised that it would be “posting, but better.” Just over two years later, in September 2024, the site announced its shutdown, its creators citing burnout and funding problems. Today, its servers are gone for good. Any li

Chris’ Corner: Rounded Triangle Boxes and Our Shapely Future

by: Chris Coyier Mon, 21 Apr 2025 17:10:35 +0000 I enjoyed Trys Mudford’s explanation of making rounded triangular boxes. It was a very real-world client need, and I do tend to prefer reading about technical solutions to real problems over theoretical ones. This one was tricky because this particular shape doesn’t have a terribly obvious way to draw it on the web. CSS’ clip-path is useful, but the final rounding was done with an unintuitive feGaussianBlur SVG filter. You could draw it a

OTP Authentication in Laravel & Vue.js for Secure Transactions

by: Ojekudo Oghenemaro Emmanuel Sun, 20 Apr 2025 08:04:07 GMT Introduction In today’s digital world, security is paramount, especially when dealing with sensitive data like user authentication and financial transactions. One of the most effective ways to enhance security is by implementing One-Time Password (OTP) authentication. This article explores how to implement OTP authentication in a Laravel backend with a Vue.js frontend, ensuring secure transactions. Why Use OTP Authentication? OTP

“Pretty” is in the eye of the beholder

by: Geoff Graham Fri, 18 Apr 2025 12:12:35 +0000 Hey, did you see the post Jen Simmons published about WebKit’s text-wrap: pretty implementation? It was added to Safari Technology Preview and can be tested now, as in, like, today. Slap this in a stylesheet and your paragraphs get a nice little makeover that improves the ragging, reduces hyphenation, eliminates typographic orphans at the end of the last line, and generally avoids large typographic rivers as a result. The first visual in the post

So, You Want to Give Up CSS Pre- and Post-Processors…

by: Zell Liew Thu, 17 Apr 2025 12:38:05 +0000 There was once upon a time when native CSS lacked many essential features, leaving developers to come up with all sorts of ways to make CSS easier to write over the years. These ways can mostly be categorized into two groups: Pre-processors Post-processors Pre-processors include tools like Sass, Less, and Stylus. Like what the category’s name suggests, these tools let you write CSS in their syntax before compiling your code into va

Using CSS backdrop-filter for UI Effects

by: Preethi Wed, 16 Apr 2025 12:34:50 +0000 This article covers tips and tricks on effectively utilizing the CSS backdrop-filter property to style contemporary user interfaces. You’ll learn how to layer backdrop filters among multiple elements, and integrate them with other CSS graphical effects to create elaborate designs. Below is a hodgepodge sample of what you can build based on everything we’ll cover in this article. More examples are coming up. CodePen Embed Fallback The bl

Chris’ Corner: Fairly Fresh CSS

by: Chris Coyier Mon, 14 Apr 2025 16:36:55 +0000 I joked while talking with Adam Argyle on ShopTalk the other day that there is more CSS in one of the demos we were looking at that I have in my whole CSS brain. We were looking at his Carousel Gallery which is one of the more impressive sets of CSS demos I’ve ever seen. Don’t let your mind get too stuck on that word “carousel”. I think it’s smart to use that word here, but the CSS technologies being developed here have an incredible number of us

Next Level CSS Styling for Cursors

by: Declan Chidlow Mon, 14 Apr 2025 12:40:46 +0000 The cursor is a staple of the desktop interface but is scarcely touched by websites. This is for good reason. People expect their cursors to stay fairly consistent, and meddling with them can unnecessarily confuse users. Custom cursors also aren’t visible for people using touch interfaces — which excludes the majority of people. Geoff has already covered styling cursors with CSS pretty comprehensively in “Changing the Cursor with CSS for Be

CSS-Tricks Chronicles XLIII

by: Geoff Graham Fri, 11 Apr 2025 12:39:26 +0000 Normally, I like to publish one of these updates every few months. But seeing as the last one dates back to September of last year, I’m well off that mark and figured it’s high time to put pen to paper. The fact is that a lot is happening around here at CSS-Tricks — and it’s all good stuff. The Almanac is rolling In the last post of 2024, I said that filling the Almanac was a top priority heading into this year. We had recently refreshe

Tailwind’s @apply Feature is Better Than it Sounds

by: Zell Liew Thu, 10 Apr 2025 12:39:43 +0000 By this point, it’s not a secret to most people that I like Tailwind. But, unknown to many people (who often jump to conclusions when you mention Tailwind), I don’t like vanilla Tailwind. In fact, I find most of it horrible and I shall refrain from saying further unkind words about it. But I recognize and see that Tailwind’s methodology has merits — lots of them, in fact — and they go a long way to making your styles more maintainable and pe

Cascading Layouts: A Workshop on Resilient CSS Layouts

by: Geoff Graham Thu, 10 Apr 2025 11:26:00 +0000 If I were starting with CSS today for the very first time, I would first want to spend time understanding writing modes because that’s a great place to wrap your head around direction and document flow. But right after that, and even more excitedly so, I would jump right into display and get a firm grasp on layout strategies. And where would I learn that? There are lots of great resources out there. I mean, I have a full course called The Bas

CSS Carousels

by: Geoff Graham Wed, 09 Apr 2025 13:00:24 +0000 The CSS Overflow Module Level 5 specification defines a couple of new features that are designed for creating carousel UI patterns: Scroll Buttons: Buttons that the browser provides, as in literal <button> elements, that scroll the carousel content 85% of the area when clicked. Scroll Markers: The little dots that act as anchored links, as in literal <a> elements that scroll to a specific carousel item when clicked. Chro

Chris’ Corner: 10 HTML Hits

by: Chris Coyier Mon, 07 Apr 2025 17:01:01 +0000 Love HTML? Good. It’s very lovable. One of my favorite parts is how you can screw it all up and it still it’s absolute best to render how it thinks you meant. Not a lot of other languages like that. Are there any? English, I suppose lolz. Anyway — I figured I’d just share 10 links about HTML that I’ve save because, well, I personally thought there were interesting and enjoyed learning what they had to teach. The selected date must be within

Feeling Like I Have No Release: A Journey Towards Sane Deployments

by: Lee Meyer Mon, 07 Apr 2025 14:41:53 +0000 When I was young and dinosaurs walked the earth, I worked on a software team that developed a web-based product for two years before ever releasing it. I don’t just mean we didn’t make it publicly available; we didn’t deploy it anywhere except for a test machine in the office, accessed by two internal testers, and this required a change to each tester’s hosts file. You don’t have to be an agile evangelist to spot the red flag. There’s “release early

A New “Web” Readiness Report

by: Juan Diego Rodríguez Fri, 04 Apr 2025 13:05:22 +0000 The beauty of research is finding yourself on a completely unrelated topic mere minutes from opening your browser. It happened to me while writing an Almanac entry on @namespace, an at-rule that we probably won’t ever use and is often regarded as a legacy piece of CSS. Maybe that’s why there wasn’t a lot of info about it until I found a 2010s post on @namespace by Divya Manian. The post was incredibly enlightening, but that’s beside the p

SMIL on?

by: Geoff Graham Wed, 02 Apr 2025 12:37:19 +0000 I was chatting with Andy Clarke the other day about a new article he wants to write about SVG animations. “I’ve read some things that said that SMIL might be a dead end.” He said. “Whaddya think?” That was my impression, too. Sarah Drasner summed up the situation nicely way back in 2017: Chrome was also in on the party and published an intent to deprecate SMIL, citing work in other browsers to support SVG animations in CSS. MDN li

Crafting Strong DX With Astro Components and TypeScript

by: Bryan Robinson Tue, 01 Apr 2025 13:50:58 +0000 I’m a big fan of Astro’s focus on developer experience (DX) and the onboarding of new developers. While the basic DX is strong, I can easily make a convoluted system that is hard to onboard my own developers to. I don’t want that to happen. If I have multiple developers working on a project, I want them to know exactly what to expect from every component that they have at their disposal. This goes double for myself in the future when I’ve f

Chris’ Corner: CSS Powered Componentry

by: Chris Coyier Mon, 31 Mar 2025 15:25:36 +0000 New CSS features help us in all sorts of different ways, but here we’re going to look at them when they power a specific type of component, or make a type of component newly possible with less or no JavaScript. A single element CSS donut timer/countdown timer by Ben Frain — The surely least-used gradient type, conic-gradient() is used here to make donut (I’d call them charts) which when animated behave like a timer. This kind of thing change

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.