لرن سرا

بلاگ

  • Book Review: C# 11 and .NET 7

    Book Review: C# 11 and .NET 7


    It’s time to review this book!

    • Book title: C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals
    • Author(s): Mark J. Price (LinkedIn, Twitter)
    • Published year: 2022
    • Publisher: Packt
    • Links: Amazon, Packt

    What can we say?

    “C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals” is a HUGE book – ~750 pages – that guides readers from the very basics of C# and dotnet to advanced topics and approaches.

    This book starts from the very beginning, explaining the history of C# and .NET, then moving to C# syntax and exploring OOP topics.

    If you already have some experience with C#, you might be tempted to skip those chapters. Don’t skip them! Yes, they’re oriented to newbies, but you’ll find some gems that you might find interesting or that you might have ignored before.

    Then, things get really interesting: some of my favourite topics were:

    • how to build and distribute packages;
    • how to publish Console Apps;
    • Entity Framework (which I used in the past, before ASP.NET Core, so it was an excellent way to see how things evolved);
    • Blazor

    What I liked

    • the content is well explained;
    • you have access to the code example to follow along (also, the author explains how to install and configure stuff necessary to follow along, such as SQL Lite when talking about Entity Framework)
    • it also teaches you how to use Visual Studio

    What I did not like

    • in the printed version, some images are not that readable
    • experienced developers might find some chapters boring (well, they’re not the target audience of the book, so it makes sense 🤷‍♂️ )

    This article first appeared on Code4IT 🐧

    Wrapping up

    Have you read it? What do you think of this book?

    I hope you enjoyed this article! Let’s keep in touch on LinkedIn or Twitter! 🤜🤛

    Happy coding!

    🐧





    Source link

  • PriorityQueues on .NET 7 and C# 11 | Code4IT

    PriorityQueues on .NET 7 and C# 11 | Code4IT


    A PriorityQueue represents a collection of items that have a value and a priority. Now this data structure is built-in in dotNET!

    Table of Contents

    Just a second! 🫷
    If you are here, it means that you are a software developer.
    So, you know that storage, networking, and domain management have a cost .

    If you want to support this blog, please ensure that you have disabled the adblocker for this site.
    I configured Google AdSense to show as few ADS as possible – I don’t want to bother you with lots of ads, but I still need to add some to pay for the resources for my site.

    Thank you for your understanding.
    – Davide

    Starting from .NET 6 and C# 10, we finally have built-in support for PriorityQueues 🥳

    A PriorityQueue is a collection of items that have a value and a priority; as you can imagine, they act as a queue: the main operations are “add an item to the queue”, called Enqueue, and “remove an item from the queue”, named Dequeue. The main difference from a simple Queue is that on dequeue, the item with lowest priority is removed.

    In this article, we’re gonna use a PriorityQueue and wrap it into a custom class to solve one of its design issues (that I hope they’ll be addressed in a future release of dotNET).

    Welcoming Priority Queues in .NET

    Defining a priority queue is straightforward: you just have to declare it specifying the type of items and the type of priority.

    So, if you need a collection of Child items, and you want to use int as a priority type, you can define it as

    PriorityQueue<Child, int> pq = new PriorityQueue<Child, int>();

    Now you can add items using the Enqueue method:

    Child child = //something;
int priority = 3;
queue.Enqueue(child, priority);

    And you can retrieve the one on the top of the queue by calling Peek(), if you want to just look at the first item without removing it from the queue:

    Child child3 = BuildChild3();
Child child2 = BuildChild2();
Child child1 = BuildChild1();

queue.Enqueue(child3, 3);
queue.Enqueue(child1, 1);
queue.Enqueue(child2, 2);

//queue.Count = 3

Child first = queue.Peek();
//first will be child1, because its priority is 1
//queue.Count = 3, because we did not remove the item on top

    or Dequeue if you want to retrieve it while removing it from the queue:

    Child child3 = BuildChild3();
Child child2 = BuildChild2();
Child child1 = BuildChild1();

queue.Enqueue(child3, 3);
queue.Enqueue(child1, 1);
queue.Enqueue(child2, 2);

//queue.Count = 3

Child first = queue.Dequeue();
//first will be child1, because its priority is 1
//queue.Count = 2, because we removed the item with the lower priority

    This is the essence of a Priority Queue: insert items, give them a priority, then remove them starting from the one with lower priority.

    Creating a Wrapper to automatically handle priority in Priority Queues

    There’s a problem with this definition: you have to manually specify the priority of each item.

    I don’t like it that much: I’d like to automatically assign each item a priority. So we have to wrap it in another class.

    Since we’re near Christmas, and this article is part of the C# Advent 2022, let’s use an XMAS-themed example: a Christmas list used by Santa to handle gifts for children.

    Let’s assume that the Child class has this shape:

    public class Child
{
    public bool HasSiblings { get; set; }
    public int Age { get; set; }
    public List<Deed> Deeds { get; set; }
}

public abstract class Deed
{
    public string What { get; set; }
}

public class GoodDeed : Deed
{ }

public class BadDeed : Deed
{ }

    Now we can create a Priority Queue of type <Child, int>:

    PriorityQueue<Child, int> pq = new PriorityQueue<Child, int>();

    And wrap it all within a ChristmasList class:

    public class ChristmasList
{
    private readonly PriorityQueue<Child, int> queue;

    public ChristmasList()
    {
        queue = new PriorityQueue<Child, int>();
    }

    public void Add(Child child)
    {
        int priority =// ??;
        queue.Enqueue(child, priority);
    }

     public Child Get()
    {
        return queue.Dequeue();
    }
}

    A question for you: what happens when we call the Get method on an empty queue? What should we do instead? Drop a message below! 📩

    We need to define a way to assign each child a priority.

    Define priority as private behavior

    The easiest way is to calculate the priority within the Add method: define a function that accepts a Child and returns an int, and then pass that int value to the Enqueue method.

    public void Add(Child child)
{
    int priority = GetPriority(child);
    queue.Enqueue(child, priority);
}

    This approach is useful because you’re encapsulating the behavior in the ChristmasList class, but has the downside that it’s not extensible, and you cannot use different priority algorithms in different places of your application. On the other side, GetPriority is a private operation within the ChristmasList class, so it can be fine for our example.

    Pass priority calculation from outside

    We can then pass a Func<Child, int> in the ChristmasList constructor, centralizing the priority definition and giving the caller the responsibility to define it:

    public class ChristmasList
{
    private readonly PriorityQueue<Child, int> queue;
    private readonly Func<Child, int> _priorityCalculation;

    public ChristmasList(Func<Child, int> priorityCalculation)
    {
        queue = new PriorityQueue<Child, int>();
        _priorityCalculation = priorityCalculation;
    }


    public void Add(Child child)
    {
        int priority = _priorityCalculation(child);
        queue.Enqueue(child, priority);
    }

     public Child Get()
    {
        return queue.Dequeue();
    }
}

    This implementation presents the opposite problems and solutions we saw in the previous example.

    What I’d like to see in the future

    This is a personal thought: it’d be great if we had a slightly different definition of PriorityQueue to automate the priority definition.

    One idea could be to add in the constructor a parameter that we can use to calculate the priority, just to avoid specifying it explicitly. So, I’d expect that the current definition of the constructor and of the Enqueue method change from this:

    PriorityQueue<Child, int> pq = new PriorityQueue<Child, int>();

int priority = _priorityCalculation(child);
queue.Enqueue(child, priority);

    to this:

    PriorityQueue<Child, int> pq = new PriorityQueue<Child, int>(_priorityCalculation);

queue.Enqueue(child);

    It’s not perfect, and it raises some new problems.

    Another way could be to force the item type to implement an interface that exposes a way to retrieve its priority, such as

    public interface IHavePriority<T>{
    public T GetPriority();
}

public class Child : IHavePriority<int>{}

    Again, this approach is not perfect but can be helpful.

    Talking about its design, which approach would you suggest, and why?

    Further readings

    As usual, the best way to learn about something is by reading its official documentation:

    🔗 PriorityQueue documentation | Microsoft Learn

    This article is part of the 2022 C# Advent (that’s why I chose a Christmas-ish topic for this article),

    🔗 C# Advent Calendar 2022

    This article first appeared on Code4IT 🐧

    Conclusion

    PriorityQueue is a good-to-know functionality that is now out-of-the-box in dotNET. Do you like its design? Have you used another library to achieve the same result? In what do they differ?

    Let me know in the comments section! 📩

    For now, happy coding!

    🐧



    Source link

  • Introduction to Graphs in Python – Useful code

    Introduction to Graphs in Python – Useful code


    Lately, I am reading the book Optimization Algorithms by Alaa Khamis and the chapter 3 – Blind Search Algorithms, has caught my attention. The chapter starts with explaining what graphs are how these are displayed in python and I have decided to make a YT video, presenting the code of the book with Jupyter Notebook.

    Trees are different, when we talk about graphs in python

    Why graphs? Because they are everywhere:

    • A road map is a graph
    • Your social-media friends form a graph
    • Tasks in a to-do list, with dependables on each other, can be a graph

    With Python we can build and draw these structures in just a few lines of code.

    Setup

    Undirected graph

    • Edges have no arrows
    • Use it for two‑way streets or mutual friendships.

    Undirected graph

    Directed graph

    • Arrowheads show direction.
    • Good for “A follows B” but not the other way around.

    Directed graph

    Multigraph

    • Allows two or more edges between the same nodes.
    • Think of two train lines that join the same pair of cities.

    Multigraph

    Directed Acyclic Graph (Tree)

    • No cycles = no way to loop back.
    • Used in task schedulers and Git histories.

    Directed Acyclic Graph (Tree)

    Hypergraph

    • One “edge” can touch many nodes.
    • We simulate it with a bipartite graph: red squares = hyper‑edges.

    Hypergraph

    Weighted Graph

    • Graph with weights on the edges
    • Idea for mapping distances between cities on a map

    Weighted Graph

    https://www.youtube.com/watch?v=8vnu_5QRC74

    🙂



    Source link

  • Quality Over Speed: A Case for Perfectionism

    Quality Over Speed: A Case for Perfectionism

    The digital world is obsessed with speed.

    “Move fast and break things” has graduated from a startup mantra to an industry-wide gospel. We’re told to ship now and ask questions later, to launch minimum viable products and iterate indefinitely. But in the race to be first, we risk forgetting what it means to be good. What if the relentless pursuit of ‘now’ comes with higher reputational consequences than we realise?

    I’m Jack, the founder of NaughtyDuk©, a design studio and digital consultancy based in Manchester, UK. We’re the creative and technical engine for some of the biggest brands in entertainment, an industry where performance is non-negotiable. Our approach is contrarian to prevailing wisdom. We believe in quality and precision, not as luxuries, but as fundamental principles for achieving better results.

    This isn’t slow or pedantic. It’s deliberate.

    A Tale As Old As Time

    I have worked for a lot of other businesses before. Contract, Industry, Agency, you name it… over the last 17 years I’ve seen the decisions that get made, many of them mistakes, from junior level through to senior leadership. Often I would find myself wondering, ‘is this how it has to be?’.

    Businesses I worked for would cut corners everywhere, and I don’t mean slightly under-deliver to preserve margin, I mean a perpetual ethos of poor performance was not just accepted, but cultivated through indifference and a lack of accountability.

    Motivated by this behaviour, I wanted to start something with integrity, something a bit more human, something where value is determined by quality-delivered, not just cash-extracted.

    Enter NaughtyDuk©

    I founded NaughtyDuk© in early 2024 with a simple mission: to create digital experiences that are not just functional, but also beautiful and performant, with proper architecture and cohesion across all touch points.

    Although I am introverted by nature, and generally more interested in craft than networking – I’ve been fortunate enough to build partnerships with some of the largest companies and brands in the world.

    The projects we work on are usually for brands with a substantial audience, which require a holistic approach to design and development. We are particularly proud of our work in the entertainment sector, which we recently decided was a logical niche for us.

    Our Ethos

    Our guiding philosophy is simple:

    Designed with purpose, built to perform.

    In the entertainment space, a digital touchpoint is more than just a website or an app, it’s a gateway to an experience. It has to handle crushing traffic spikes for ticket or merchandise drops, convey the energy of an event (usually using highly visual, large content formats like video/audio), be just as performant on mobile as it is on desktop, and function flawlessly under pressure.

    In this context, creativity without a clear purpose is just noise. A beautiful design that collapses under load isn’t just a failure; it’s a broken promise to thousands of fans. This is why we are laser-focused on creativity and performance being complimentary forces, rather than adversaries.

    Data showing a decrease in outages and an increase in revenue due to changes made by NaughtyDuk

    To design with purpose is to understand that every choice must be anchored in strategy. It means we don’t just ask “what does it look like?” but “what is it for?”. A critical part of our ethos involves avoiding common industry pitfalls.

    I don’t know how loud this needs to be for people to hear me, but you should never build platform first.

    If you’re advising clients that they need a WordPress website because that’s the only tool you know, you’re doing something wrong. The same is true of any solution that you deliver.

    There is a right way and 17 wrong ways to do everything.

    This is why we build for performance by treating speed, stability, and scalability as core features, not afterthoughts. It’s about architecting systems that are as resilient as they are beautiful. Working with the correct tech stack on every project is important. The user experience is only as good as the infrastructure that supports it.

    That said, experiential design is an incredibly important craft, and at the front edge of this are libraries like GSAP, Lenis, and of course WebGL/Three.js. Over the last few years, we’ve been increasing the amount of these features across our work, thankfully to much delight.

    liquidGL

    Recently we launched a library you might like to try called liquidGL, an attempt to bring Apple’s new Liquid Glass aesthetic to the web. It’s a lot trickier in the browser, and there are still some things to work out in BETA, but it’s available now on GitHub and of course, it’s open source.

    particlesGL

    In addition to liquidGL, we recently launched particlesGL, a library for creating truly unique particle effects in the browser, complete with 6 core demos and support for all media formats including 3D models, video, audio, images and text. Available on GitHub and free for personal use.

    glitchGL

    Following on from particlesGL is glitchGL, a library for creating pixelation, CRT and glitch effects in the browser. With more than 30 custom properties and a configurable global interaction system, which can be applied to multiple elements. Also available on GitHub and free for personal use.

    We post mainly on LinkedIn, so if you’re interested in libraries like these, give us a follow so you don’t miss new releases and updates.

    Selected Work

    Teletech

    At NaughtyDuk©, we don’t chase quick wins. With the team at Teletech – one of the largest Techno brands in the world – rather than rebranding white label solutions, we invested years into building a mutual understanding of what success looks like. This wasn’t efficient by traditional metrics, but it built a symbiotic partnership that was more fruitful later on.

    The result is a suite of market-specific solutions that consistently deliver: web, game development, mobile app, and e-commerce; all made possible because we know the culture and the owners, not just the brief. This is why I would encourage other creatives to niche down into an industry they understand, and to see their clients as partners rather than targets – you might think this cynicism is rare but I can assure you it is not.

    Quality relationships take time, but they’re the foundation of quality work.

    OFFLIMITS

    Sometimes the best choices you make on a project are the ones that no one sees.

    For OFFLIMITS Festival, the UAE’s first open format music festival featuring Ed Sheeran, Kaiser Chiefs, OneRepublic, and more, one of the most critical aspects was the ability to serve large content formats performantly, at scale.

    Whilst Webflow was the right platform for the core requirements, we decided to forgo several of Webflow’s own features, including their forms setup and asset handling. We opted to use Cloudflare R2 to serve videos and audio, giving us granular control over caching policies and delivery. One of many hidden changes which were invisible to users, but critical to performance. Taking time for proper decisions, even boring ones, is what separates experiences that deliver from those that merely look nice.

    PRIMAL™

    PRIMAL™ started as a sample pack library focused on raw high quality sounds. When they wanted to expand into audio plugins, we spent eighteen months developing custom audio plugins and architecting a comprehensive ecosystem from scratch, because comprehensive solutions create lasting value.

    The result is something we’re particularly proud of, with automatic account creation, login, subscription creation, and license generation happening from a single click. This may sound simple on the surface, but it required months of careful planning and development across JUCE/C++, Stripe, Clerk, React, Cloudflare, and Mailchimp.

    More information on this repositioning will be available late 2025.

    The Integrated Pipeline

    Our philosophy of Quality Over Speed only works if your team is structured to support it. Common approaches separate concerns like design and development. In large teams this is seen as somewhat essential, a project moves along a conveyor belt, handed off from one silo to the next.

    This is understandable, but wrong. Bloat and bureaucracy are where vision gets diluted and potential goes to die. For this reason, at NaughtyDuk© we insist on handling the entire creative pipeline.

    Having a holistic approach allows you to create deeply connected digital ecosystems.

    When the same team that designs the brand identity also builds the mobile app and architects the backend, you get a level of coherence that simply isn’t possible otherwise. This leads to better outcomes: lower operational costs for our clients, less patchwork for us, higher conversion rates, and a superior customer experience that feels seamless and intentional.

    Final Thoughts

    Choosing craft over haste is not an indulgence, it’s a strategic decision we make every day.

    It’s not that we are perfect, we’re not. It’s that we’d rather aim for perfection and miss, than fail to even try and settle for ‘good enough’. In a digital landscape saturated with forgettable experiences, perfectionism is what cuts through the noise.

    It’s what turns a user into a fan and a brand into a legacy.

    Our work has been fortunate enough to win awards, but the real validation comes from seeing our clients thrive on the back of the extra care and attention to detail that goes into a Quality Over Speed mindset. By building platforms that are purposeful, performant, and deeply integrated, we deliver lasting value.

    The goal isn’t just to launch something, it’s to launch something right.



    Source link

  • How to customize Swagger UI with custom CSS in .NET 7 &vert; Code4IT

    How to customize Swagger UI with custom CSS in .NET 7 | Code4IT


    Exposing Swagger UI is a good way to help developers consume your APIs. But don’t be boring: customize your UI with some fancy CSS

    Table of Contents

    Just a second! 🫷
    If you are here, it means that you are a software developer.
    So, you know that storage, networking, and domain management have a cost .

    If you want to support this blog, please ensure that you have disabled the adblocker for this site.
    I configured Google AdSense to show as few ADS as possible – I don’t want to bother you with lots of ads, but I still need to add some to pay for the resources for my site.

    Thank you for your understanding.
    – Davide

    Brace yourself, Christmas is coming! 🎅

    If you want to add a more festive look to your Swagger UI, it’s just a matter of creating a CSS file and injecting it.

    You should create a custom CSS for your Swagger endpoints, especially if you are exposing them outside your company: if your company has a recognizable color palette, using it in your Swagger pages can make your brand stand out.

    In this article, we will learn how to inject a CSS file in the Swagger UI generated using .NET Minimal APIs.

    How to add Swagger in your .NET Minimal APIs

    There are plenty of tutorials about how to add Swagger to your APIs. I wrote some too, where I explained how every configuration impacts what you see in the UI.

    That article was targeting older dotNET versions without Minimal APIs. Now everything’s easier.

    When you create your API project, Visual Studio asks you if you want to add OpenAPI support (aka Swagger). By adding it, you will have everything in place to get started with Swagger.

    You Minimal APIs will look like this:

    public static void Main(string[] args)
{
    var builder = WebApplication.CreateBuilder(args);

    builder.Services.AddEndpointsApiExplorer();
    builder.Services.AddSwaggerGen();

    var app = builder.Build();

    app.UseSwagger();
    app.UseSwaggerUI();


    app.MapGet("/weatherforecast", (HttpContext httpContext) =>
    {
        // return something
    })
    .WithName("GetWeatherForecast")
    .WithOpenApi();

    app.Run();
}

    The key parts are builder.Services.AddEndpointsApiExplorer(), builder.Services.AddSwaggerGen(), app.UseSwagger(), app.UseSwaggerUI() and WithOpenApi(). Do you know that those methods do? If so, drop a comment below! 📩

    Now, if we run our application, we will see a UI similar to the one below.

    Basic Swagger UI

    That’s a basic UI. Quite boring, uh? Let’s add some style

    Create the CSS file for Swagger theming

    All the static assets must be stored within the wwwroot folder. It does not exist by default, so you have to create it manually. Click on the API project, add a new folder, and name it “wwwroot”. Since it’s a special folder, by default Visual Studio will show it with a special icon (it’s a sort of blue world, similar to 🌐).

    Now you can add all the folders and static resources needed.

    I’ve created a single CSS file under /wwwroot/assets/css/xmas-style.css. Of course, name it as you wish – as long as it is within the wwwroot folder, it’s fine.

    My CSS file is quite minimal:

    body {
  background-image: url("../images/snowflakes.webp");
}

div.topbar {
  background-color: #34a65f !important;
}

h2,
h3 {
  color: #f5624d !important;
}

.opblock-summary-get > button > span.opblock-summary-method {
  background-color: #235e6f !important;
}

.opblock-summary-post > button > span.opblock-summary-method {
  background-color: #0f8a5f !important;
}

.opblock-summary-delete > button > span.opblock-summary-method {
  background-color: #cc231e !important;
}

    There are 3 main things to notice:

    1. the element selectors are taken directly from the Swagger UI – you’ll need a bit of reverse-engineering skills: just open the Browser Console and find the elements you want to update;
    2. unless the element does not already have the rule you want to apply, you have to add the !important CSS operator. Otherwise, your code won’t affect the UI;
    3. you can add assets from other folders: I’ve added background-image: url("../images/snowflakes.webp"); to the body style. That image is, as you can imagine, under the wwwroot folder we created before.

    Just as a recap, here’s my project structure:

    Static assets files

    Of course, it’s not enough: we have to tell Swagger to take into consideration that file

    How to inject a CSS file in Swagger UI

    This part is quite simple: you have to update the UseSwaggerUI command within the Main method:

    app.UseSwaggerUI(c =>
+   c.InjectStylesheet("/assets/css/xmas-style.css")
);

    Notice how that path begins: no wwwroot, no ~, no .. It starts with /assets.

    One last step: we have to tell dotNET to consider static files when building and running the application.

    You just have to add UseStaticFiles()

    After builder.Build():

    var app = builder.Build();
+ app.UseStaticFiles();

app.UseSwagger();
app.UseSwaggerUI(c =>
    c.InjectStylesheet("/assets/css/xmas-style.css")
);

    Now we can run our APIs as admire our wonderful Xmas-style UI 🎅

    XMAS-style Swagger UI

    Further readings

    This article is part of 2022 .NET Advent, created by Dustin Moris 🐤:

    🔗 dotNET Advent Calendar 2022

    CSS is not the only part you can customize, there’s way more. Here’s an article I wrote about Swagger integration in .NET Core 3 APIs, but it’s still relevant (I hope! 😁)

    🔗 Understanding Swagger integration in .NET Core | Code4IT

    This article first appeared on Code4IT

    Wrapping up

    Theming is often not considered an important part of API development. That’s generally correct: why should I bother adding some fancy colors to APIs that are not expected to have a UI?

    This makes sense if you’re working on private APIs. In fact, theming is often useful to improve brand recognition for public-facing APIs.

    You should also consider using theming when deploying APIs to different environments: maybe Blue for Development, Yellow for Staging, and Green for Production. That way your developers can understand which environment they’re exploring right easily.

    Happy coding!
    🐧





    Source link

  • Interactive WebGL Backgrounds: A Quick Guide to Bayer Dithering

    Interactive WebGL Backgrounds: A Quick Guide to Bayer Dithering

    User experience relies on small, thoughtful details that fit well into the overall design without overpowering the user. This balance can be tricky, especially with technologies like WebGL. While they can create amazing visuals, they can also become too complicated and distracting if not handled carefully.

    One subtle but effective technique is the Bayer Dithering Pattern. For example, JetBrains’ recent Junie campaign page uses this approach to craft an immersive and engaging atmosphere that remains visually balanced and accessible.

    In this tutorial, I’ll introduce you to the Bayer Dithering Pattern. I’ll explain what it is, how it works, and how you can apply it to your own web projects to enhance visual depth without overpowering the user experience.

    Bayer Dithering

    The Bayer pattern is a type of ordered dithering, which lets you simulate gradients and depth using a fixed matrix.

    If we scale this matrix appropriately, we can target specific values and create basic patterns.

    Here’s a simple example:

    // 2×2 Bayer matrix pattern: returns a value in [0, 1)
float Bayer2(vec2 a)
{
    a = floor(a);                // Use integer cell coordinates
    return fract(a.x / 2.0 + a.y * a.y * 0.75);
    // Equivalent lookup table:
    // (0,0) → 0.0,  (1,0) → 0.5
    // (0,1) → 0.75, (1,1) → 0.25
}

    Let’s walk through an example of how this can be used:

    // 1. Base mask: left half is a black-to-white gradient 
float mask = uv.y;

// 2. Right half: apply ordered dithering
if (uv.x > 0.5) {
    float dither = Bayer2(fragCoord);
    mask += dither - 0.5;
    mask  = step(0.5, mask); // binary threshold
}

// 3. Output the result
fragColor = vec4(vec3(mask), 1.0);

    So with just a small matrix, we get four distinct dithering values—essentially for free.

    See the Pen
    Bayer2x2 by zavalit (@zavalit)
    on CodePen.

    Creating a Background Effect

    This is still pretty basic—nothing too exciting UX-wise yet. Let’s take it further by creating a grid on our UV map. We’ll define the size of a “pixel” and the size of the matrix that determines whether each “pixel” is on or off using Bayer ordering.

    const float PIXEL_SIZE = 10.0; // Size of each pixel in the Bayer matrix
const float CELL_PIXEL_SIZE = 5.0 * PIXEL_SIZE; // 5x5 matrix

 
float aspectRatio = uResolution.x / uResolution.y;
   
vec2 pixelId = floor(fragCoord / PIXEL_SIZE); 
vec2 cellId = floor(fragCoord / CELL_PIXEL_SIZE); 
vec2 cellCoord = cellId * CELL_PIXEL_SIZE;

vec2 uv = cellCoord/uResolution * vec2(aspectRatio, 1.0);

vec3 baseColor = vec3(uv, 0.0);

    You’ll see a rendered UV grid with blue dots for pixels and white (and subsequent blocks of the same size) for the Bayer matrix.

    See the Pen
    Pixel & Cell UV by zavalit (@zavalit)
    on CodePen.

    Recursive Bayer Matrices

    Bayer’s genius was a recursively generated mask that keeps noise high-frequency and code low-complexity. So now let’s try it out, and apply also larger dithering matrix:

    float Bayer2(vec2 a) { a = floor(a); return fract(a.x / 2. + a.y * a.y * .75); }
#define Bayer4(a)   (Bayer2(0.5 * (a)) * 0.25 + Bayer2(a))
#define Bayer8(a)   (Bayer4(0.5 * (a)) * 0.25 + Bayer2(a))
#define Bayer16(a)   (Bayer8(0.5 * (a)) * 0.25 + Bayer2(a))

...
  if(uv.x > .2) dither = Bayer2 (pixelId);   
  if(uv.x > .4) dither = Bayer4 (pixelId);
  if(uv.x > .6) dither = Bayer8 (pixelId);
  if(uv.x > .8) dither = Bayer16(pixelId);
...

    This gives us a nice visual transition from a basic UV grid to Bayer matrices of increasing complexity (2×2, 4×4, 8×8, 16×16).

    See the Pen
    Bayer Ranges Animation by zavalit (@zavalit)
    on CodePen.

    As you see, the 8×8 and 16×16 patterns are quite similar—beyond 8×8, the perceptual gain becomes minimal. So we’ll stick with Bayer8 for the next step.

    Now, we’ll apply Bayer8 to a UV map modulated by fbm noise to make the result feel more organic—just as we promised.

    See the Pen
    Bayer fbm noise by zavalit (@zavalit)
    on CodePen.

    Adding Interactivity

    Here’s where things get exciting: real-time interactivity that background videos can’t replicate. Let’s run a ripple effect around clicked points using the dithering pattern. We’ll iterate over all active clicks and compute a wave:

     for (int i = 0; i < MAX_CLICKS; ++i) {

    // convert this click to square‑unit UV
    vec2 pos = uClickPos[i];
    if(pos.x < 0.0 && pos.y < 0.0) continue; // skip empty clicks
        
    vec2 cuv = (((pos - uResolution * .5 - cellPixelSize * .5) / (uResolution) )) * vec2(aspectRatio, 1.0);

    float t = max(uTime - uClickTimes[i], 0.0);
    float r = distance(uv, cuv);

    float waveR = speed * t;
    float ring  = exp(-pow((r - waveR) / thickness, 2.0));
    float atten = exp(-dampT * t) * exp(-dampR * r);

    feed = max(feed, ring * atten);           // brightest wins
}

    Try to click on the CodePen bellow:

    See the Pen
    Untitled by zavalit (@zavalit)
    on CodePen.

    Final Thoughts

    Because the entire Bayer-dither background is generated in a single GPU pass, it renders in under 0.2 ms even at 4K, ships in ~3 KB (+ Three.js in this case), and consumes zero network bandwidth after load. SVG can’t touch that once you have thousands of nodes, and autoplay video is two orders of magnitude heavier on bandwidth, CPU and battery. In short: this is the probably one of the lightest fully-interactive background effect you can build on the open web today.



    Source link

  • What is a Zero-Day Attack? Zero Day Attacks 2025


    What is a Zero-Day Attack?

    A zero-day attack is defined as a cyber attack that happens when the vendor is unaware of any flaw or security vulnerability in the software, hardware, or firmware. The unknown or unaddressed vulnerability used in a zero-day attack is called a zero-day vulnerability.

    What makes a Zero Day Attack lethal for organizations is

    -They are often targeted attacks before the vendor can release the fix for the security vulnerability

    – The malicious actor uses a zero-day exploit to plant malware, steal data, or exploit the users, organizations, or systems as part of cyber espionage or warfare.

    – They take days to contain, as the fix is yet to be released by the vendors

    Examples of Zero-Day Attacks in 2025

    As per the India Cyber Threat Report 2025, these are the top zero day attacks identified in 2024, detailing their nature, potential impacts, and associated CVE identifiers.

    Ivanti Connect Secure Command Injection (CVE-2024-21887)

    A severe remote command execution vulnerability that allows attackers to execute unauthorized shell commands due to improper input validation. While authentication is typically required, an associated authentication flaw enables attackers to bypass this requirement, facilitating full system compromise.

    Microsoft Windows Shortcut Handler (CVE-2024-21412)

    A critical security bypass vulnerability in Windows’ shortcut file processing. It enables remote code execution through specially crafted shortcut (.lnk) files, circumventing established security controls when users interact with these malicious shortcuts.

    Ivanti Connect Secure Server-Side Request Forgery (SSRF) (CVE-2024-21893)

    This Server-Side request forgery vulnerability in the SAML component allows attackers to initiate unauthorized requests through the application. Successful exploitation grants access to internal network resources and enables the forwarding of malicious requests, leading to broader network compromise.

    Mozilla Firefox Animation Timeline Use-After-Free (CVE-2024-9680)

    A use-after-free vulnerability in Firefox’s animation timeline component permits remote code execution when users visit specially crafted websites. This vulnerability can lead to full system compromise, posing significant security risks to users.

    How a Zero-day Attack Works?

    Step 1: A software code creates a vulnerability without the developer realizing it.

    Step 2:  A malicious actor discovers this vulnerability and launches a targeted attack to exploit the code.

    Step 3: The developer reliazes a security vulnerability in the software yet does not have a patch ready to fix it.

    Step 4: The developers release a security patch to close the security vulnerability.

    Step 5: The developers deploy the security patch.

    The gap between the zero-day attack and the developers deploying a security patch is enough for a successful attack and may lead to a ransomware demand, system infiltration, and sensitive data leak. So how do we protect against

    How to Protect Against Zero-Day Attacks?

    1. Use behavior-based detection tools such as Endpoint Detection and Response (EDR) or Extended Detection and Response ( XDR)
    2. Keep software updated regularly
    3. Employ threat intelligence and zero-trust security models
    4. Partner with cybersecurity vendors that offer zero-day protection, such as Seqrite.

     

     

     

     

     

     

     

     

     

     

     



    Source link

  • pick the right methods! &vert; Code4IT

    pick the right methods! | Code4IT


    LINQ is a set of methods that help developers perform operations on sets of items. There are tons of methods – do you know which is the one for you?

    Table of Contents

    Just a second! 🫷
    If you are here, it means that you are a software developer.
    So, you know that storage, networking, and domain management have a cost .

    If you want to support this blog, please ensure that you have disabled the adblocker for this site.
    I configured Google AdSense to show as few ADS as possible – I don’t want to bother you with lots of ads, but I still need to add some to pay for the resources for my site.

    Thank you for your understanding.
    – Davide

    LINQ is one of the most loved functionalities by C# developers. It allows you to perform calculations and projections over a collection of items, making your code easy to build and, even more, easy to understand.

    As of C# 11, there are tens of methods and overloads you can choose from. Some of them seem similar, but there are some differences that might not be obvious to C# beginners.

    In this article, we’re gonna learn the differences between couples of methods, so that you can choose the best one that fits your needs.

    First vs FirstOrDefault

    Both First and FirstOrDefault allow you to get the first item of a collection that matches some requisites passed as a parameter, usually with a Lambda expression:

    int[] numbers = new int[] { -2, 1, 6, 12 };

var mod3OrDefault = numbers.FirstOrDefault(n => n % 3 == 0);
var mod3 = numbers.First(n => n % 3 == 0);

    Using FirstOrDefault you get the first item that matches the condition. If no items are found you’ll get the default value for that type. The default value depends on the data type:

    Data type Default value
    int 0
    string null
    bool false
    object null

    To know the default value for a specific type, just run default(string).

    So, coming back to FirstOrDefault, we have these two possible outcomes:

    int[] numbers = new int[] { -2,  1, 6, 12 };
numbers.FirstOrDefault(n => n % 3 == 0); // 6
numbers.FirstOrDefault(n => n % 7 == 0); // 0

    On the other hand, First throws an InvalidOperationException with the message “Sequence contains no matching element” if no items in the collection match the filter criterion:

    int[] numbers = new int[] { -2,  1, 6, 12 };
numbers.First(n => n % 3 == 0); // 6
numbers.First(n => n % 7 == 0); // throws InvalidOperationException

    First vs Single

    While First returns the first item that satisfies the condition, even if there are more than two or more, Single ensures that no more than one item matches that condition.

    If there are two or more items that passing the filter, an InvalidOperationException is thrown with the message “Sequence contains more than one matching element”.

    int[] numbers = new int[] { -2, 1, 6, 12 };
numbers.First(n => n % 3 == 0); // 6
numbers.Single(n => n % 3 == 0); // throws exception because both 6 and 12 are accepted values

    Both methods have their corresponding -OrDefault counterpart: SingleOrDefault returns the default value if no items are valid.

    int[] numbers = new int[] { -2, 1, 6, 12 };

numbers.SingleOrDefault(n => n % 4 == 0); // 12
numbers.SingleOrDefault(n => n % 7 == 0); // 0, because no items are %7
numbers.SingleOrDefault(n => n % 3 == 0); // throws exception

    Any vs Count

    Both Any and Count give you indications about the presence or absence of items for which the specified predicate returns True.

    int[] numbers = new int[] { -2, 1, 6, 12 };

numbers.Any(n => n % 3 == 0); // true
numbers.Count(n => n % 3 == 0); // 2

    the difference is that Any returns a boolean, while Count returns an integer.

    Where vs First

    As you remember, First returns only one item.

    If you need all the items that meet the specified criteria, you can use Where:

    int[] numbers = new int[] { -2, 1, 6, 12 };
numbers.Where(n => n % 3 == 0); // [6, 12]

    Sort vs Order

    Both Sort and Order deal with the sorting of collections.

    The main difference is that Sort sorts the items in place, modifying the original collection.

    On the contrary, Order and OrderBy create a new collection of items with the same items of the original sequence but sorted.

    List<int> originalNumbers = new List<int> { -7, 1, 5, -6};
originalNumbers.Sort(); // originalNumbers now is [-7, -6, 1, 5]

    Also, notice that Sort is valid only on List<T>, and not Arrays or generic Enumerables.

    OrderBy and Order create a brand-new collection of items.

    List<int> originalNumbers = new List<int> { -7, 1, 5, -6};
var sortedNumbers = originalNumbers.OrderBy(n => n);
// sortedNumbers is [-7, -6, 1, 5];
// originalNumbers is [-7, 1, 5, -6];

    💡 Starting from C# 11 we can simplify OrderBy(n => n) and use Order()!

    Further readings

    C# collections do not natively expose such methods. They are ALL Extension methods (well, except for Sort, which is a native of List<T> ).

    If you want to learn what are Extension Methods and how you can write your own methods, have a look at this article:

    🔗 How you can create extension methods in C# | Code4IT

    Then, in the C# TIPS section of my blog, there are several articles that you might find interesting.

    One of these is about a LINQ method that you might want to know: SelectMany.

    🔗 C# Tip: SelectMany in LINQ

    This article first appeared on Code4IT 🐧

    If you want to learn more about Sort, the best place is the documentation:

    🔗 List.Sort Method | Microsoft Docs

    Wrapping up

    In this article, we learned the differences between couples of LINQ methods.

    Each of them has a purpose, and you should use the right one for each case.

    ❓ A question for you: talking about performance, which is more efficient: First or Single? And what about Count() == 0 vs Any()? Drop a message below if you know the answer! 📩

    I hope you enjoyed this article! Let’s keep in touch on Twitter or on LinkedIn, if you want! 🤜🤛

    Happy coding!

    🐧





    Source link

  • Can Python or Ruby Feel First-Class in the Browser?



    Can Python or Ruby Feel First-Class in the Browser?



    Source link

  • Built to Move: A Closer Look at the Animations Behind Eduard Bodak’s Portfolio

    Built to Move: A Closer Look at the Animations Behind Eduard Bodak’s Portfolio

    For months, Eduard Bodak has been sharing glimpses of his visually rich new website. Now, he’s pulling back the curtain to walk us through how three of its most striking animations were built. In this behind-the-scenes look, he shares the reasoning, technical decisions, and lessons learned—from performance trade-offs to working with CSS variables and a custom JavaScript architecture.

    Overview

    In this breakdown, I’ll walk you through three of the core GSAP animations on my site: flipping 3D cards that animate on scroll, an interactive card that reacts to mouse movement on the pricing page, and a circular layout of cards that subtly rotates as you scroll. I’ll share how I built each one, why I made certain decisions, and what I learned along the way.

    I’m using Locomotive Scroll V5 in this project to handle scroll progress and viewport detection. Since it already offers built-in progress tracking via data attributes and CSS variables, I chose to use that directly for triggering animations. ScrollTrigger offers a lot of similar functionality in a more integrated way, but for this build, I wanted to keep everything centered around Locomotive’s scroll system to avoid overlap between two scroll-handling libraries.

    Personally, I love the simplicity of Locomotive Scroll. You can just add data attributes to specify the trigger offset of the element within the viewport. You can also get a CSS variable --progress on the element through data attributes. This variable represents the current progress of the element and ranges between 0 and 1. This alone can animate a lot with just CSS.

    I used this project to shift my focus toward more animations and visual details. It taught me a lot about GSAP, CSS, and how to adjust animations based on what feels right. I’ve always wanted to build sites that spark a little emotion when people visit them.

    Note that this setup was tailored to the specific needs of the project, but in cases where scroll behavior, animations, and state management need to be tightly integrated, GSAP’s ScrollTrigger and ScrollSmoother can offer a more unified foundation.

    Now, let’s take a closer look at the three animations in action!

    Flipping 3D cards on scroll

    I split the animation into two parts. The first is about the cards escaping on scroll. The second is about them coming back and flipping back.

    Part 01

    We got the three cards inside the hero section.

    <section 
 data-scroll 
 data-scroll-offset="0%, 25%" 
 data-scroll-event-progress="progressHero"
 data-hero-animation>
 <div>
  <div class="card" data-hero-animation-card>
   <div class="card_front">...</div>
   <div class="card_back">...</div>
  </div>
  <div class="card" data-hero-animation-card>
   <div class="card_front">...</div>
   <div class="card_back">...</div>
  </div>
  <div class="card" data-hero-animation-card>
   <div class="card_front">...</div>
   <div class="card_back">...</div>
  </div>
 </div>
</section>

    While I’m using Locomotive Scroll, I need data-scroll to enable viewport detection on an element. data-scroll-offset specifies the trigger offset of the element within the viewport. It takes two values: one for the offset when the element enters the viewport, and a second for the offset when the element leaves the viewport. The same can be built with GSAP’s ScrollTrigger, just inside the JS.

    data-scroll-event-progress="progressHero" will trigger the custom event I defined here. This event allows you to retrieve the current progress of the element, which ranges between 0 and 1.

    Inside the JS we can add an EventListener based on the custom event we defined. Getting the progress from it and transfer it to the GSAP timeline.

    this.handleProgress = (e) => {
 const { progress } = e.detail;
 this.timeline?.progress(progress);
};

window.addEventListener("progressHero", this.handleProgress);

    I’m using JS classes in my project, therefore I’m using this in my context.

    Next, we retrieve all the cards.

    this.heroCards = this.element.querySelectorAll("[data-hero-animation-card]");

    this.element is here our section we defined before, so it’s data-hero-animation.

    Building now the timeline method inside the class. Getting the current timeline progress. Killing the old timeline and clearing any GSAP-applied inline styles (like transforms, opacity, etc.) to avoid residue.

    computeDesktopTimeline() {
 const progress = this.timeline?.progress?.() ?? 0;
 this.timeline?.kill?.();
 this.timeline = null;
 gsap.set(this.heroCards, { clearProps: "all" });
}

    Using requestAnimationFrame() to avoid layout thrashing. Initializes a new, paused GSAP timeline. While we are using Locomotive Scroll it’s important that we pause the timeline, so the progress of Locomotive can handle the animation.

    computeDesktopTimeline() {
 const progress = this.timeline?.progress?.() ?? 0;
 this.timeline?.kill?.();
 this.timeline = null;
 gsap.set(this.heroCards, { clearProps: "all" });

 requestAnimationFrame(() => {
  this.timeline = gsap.timeline({ paused: true });

  this.timeline.progress(progress);
  this.timeline.paused(true);
 });
}

    Figuring out relative positioning per card. targetY moves each card down so it ends near the bottom of the container. yOffsets and rotationZValues give each card a unique vertical offset and rotation.

    computeDesktopTimeline() {
 const progress = this.timeline?.progress?.() ?? 0;
 this.timeline?.kill?.();
 this.timeline = null;
 gsap.set(this.heroCards, { clearProps: "all" });

 requestAnimationFrame(() => {
  this.timeline = gsap.timeline({ paused: true });

  this.heroCards.forEach((card, index) => {
   const position = index - 1;
   const elementRect = this.element.getBoundingClientRect();
   const cardRect = this.heroCards[0]?.getBoundingClientRect();
   const targetY = elementRect.height - cardRect.height;
   const yOffsets = [16, 32, 48];
   const rotationZValues = [-12, 0, 12];
  
   // timeline goes here
  });

  this.timeline.progress(progress);
  this.timeline.paused(true);
 });
}

    The actual GSAP timeline. Cards slide left or right based on their index (x). Rotate on Z slightly to look scattered. Slide downward (y) to target position. Shrink and tilt (scale, rotateX) for a 3D feel. index * 0.012: adds a subtle stagger between cards.

    computeDesktopTimeline() {
 const progress = this.timeline?.progress?.() ?? 0;
 this.timeline?.kill?.();
 this.timeline = null;
 gsap.set(this.heroCards, { clearProps: "all" });

 requestAnimationFrame(() => {
  this.timeline = gsap.timeline({ paused: true });

  this.heroCards.forEach((card, index) => {
   const position = index - 1;
   const elementRect = this.element.getBoundingClientRect();
   const cardRect = this.heroCards[0]?.getBoundingClientRect();
   const targetY = elementRect.height - cardRect.height;
   const yOffsets = [16, 32, 48];
   const rotationZValues = [-12, 0, 12];

   this.timeline.to(
    card,
     {
      force3D: true,
      keyframes: {
       "75%": {
        x: () => -position * (card.offsetWidth * 0.9),
        rotationZ: rotationZValues[index],
       },
       "100%": {
        y: () => targetY - yOffsets[index],
        scale: 0.85,
        rotateX: -16,
       },
      },
     },
    index * 0.012
   );
  });

  this.timeline.progress(progress);
  this.timeline.paused(true);
 });
}

    That’s our timeline for desktop. We can now set up GSAP’s matchMedia() to use it. We can also create different timelines based on the viewport. For example, to adjust the animation on mobile, where such an immersive effect wouldn’t work as well. Even for users who prefer reduced motion, the animation could simply move the cards slightly down and fade them out, as you can see on the live site.

    setupBreakpoints() {
 this.mm.add(
  {
   desktop: "(min-width: 768px)",
   mobile: "(max-width: 767px)",
   reducedMotion: "(prefers-reduced-motion: reduce)",
  },
  (context) => {
   this.timeline?.kill?.();

   if (context.conditions.desktop) this.computeDesktopTimeline();

   return () => {
    this.timeline?.kill?.();
   };
  }
 );
}

    Add this to our init() method to initialize the class when we call it.

    init() {
 this.setupBreakpoints();
}

    We can also add a div with a background color on top of the card and animate its opacity on scroll so it smoothly disappears.

    When you look closely, the cards are floating a bit. To achieve that, we can add a repeating animation to the cards. It’s important to animate yPercent here, because we already animated y earlier, so there won’t be any conflicts.

    gsap.fromTo(
 element,
 {
  yPercent: -3,
 },
 {
  yPercent: 3,
  duration: () => gsap.utils.random(1.5, 2.5),
  ease: "sine.inOut",
  repeat: -1,
  repeatRefresh: true,
  yoyo: true,
 }
);

    gsap.utils.random(1.5, 2.5) comes in handy to make each floating animation a bit different, so it looks more natural. repeatRefresh: true lets the duration refresh on every repeat.

    Part 02

    We basically have the same structure as before. Only now we’re using a sticky container. The service_container has height: 350vh, and the service_sticky has min-height: 100vh. That’s our space to play the animation.

    <section 
 data-scroll 
 data-scroll-offset="5%, 75%" 
 data-scroll-event-progress="progressService"
 data-service-animation>
 <div class="service_container">
  <div class="service_sticky">
   <div class="card" data-service-animation-card>
    <div class="card_front">...</div>
    <div class="card_back">...</div>
   </div>
   <div class="card" data-service-animation-card>
    <div class="card_front">...</div>
    <div class="card_back">...</div>
   </div>
   <div class="card" data-service-animation-card>
    <div class="card_front">...</div>
    <div class="card_back">...</div>
   </div>
  </div>
 </div>
</section>

    In the JS, we can use the progressService event as before to get our Locomotive Scroll progress. We just have another timeline here. I’m using keyframes to really fine-tune the animation.

    this.serviceCards.forEach((card, index) => {
  const position = 2 - index - 1;
  const rotationZValues = [12, 0, -12];
  const rotationZValuesAnimated = [5, 0, -5];

  this.timeline.to(
    card,
    {
      force3D: true,
      keyframes: {
        "0%": {
          y: () => -0.75 * window.innerHeight + 1,
          x: () => -position * (card.offsetWidth * 1.15),
          scale: 0.2,
          rotationZ: rotationZValues[index],
          rotateX: 24,
        },
        "40%": {
          y: "20%",
          scale: 0.8,
          rotationZ: rotationZValuesAnimated[index],
          rotationY: 0,
          rotateX: 0,
        },
        "55%": { rotationY: 0, y: 0, x: () => gsap.getProperty(card, "x") },
        "75%": { x: 0, rotationZ: 0, rotationY: -190, scale: 1 },
        "82%": { rotationY: -180 },
        "100%": { rotationZ: 0 },
      },
    },
    index * 0.012
  );
});

    const position = 2 - index - 1 changes the position, so cards start spread out: right, center, left. With that we can use those arrays [12, 0, -12] in the right order.

    There’s the same setupBreakpoints() method as before, so we actually just need to change the timeline animation and can use the same setup as before, only in a new JS class.

    We can add the same floating animation we used in part 01, and then we have the disappearing/appearing card effect.

    Part 2.1

    Another micro detail in that animation is the small progress preview of the three cards in the top right.

    We add data-scroll-css-progress to the previous section to get a CSS variable --progress ranging from 0 to 1, which can be used for dynamic CSS effects. This data attribute comes from Locomotive Scroll.

    <section 
 data-scroll 
 data-scroll-offset="5%, 75%" 
 data-scroll-event-progress="progressService"
 data-scroll-css-progress
 data-service-animation>
 ...
 <div>
  <div class="tiny-card">...</div>
  <div class="tiny-card">...</div>
  <div class="tiny-card">...</div>
 </div>
 ...
</section>

    Using CSS calc() with min() and max() to trigger animations at specific progress points. In this case, the first animation starts at 0% and finishes at 33%, the second starts at 33% and finishes at 66%, and the last starts at 66% and finishes at 100%.

    .tiny-card {
 &:nth-child(1) {
  mask-image: linear-gradient(to top, black calc(min(var(--progress), 0.33) * 300%), rgba(0, 0, 0, 0.35) calc(min(var(--progress), 0.33) * 300%));
  transform: translate3d(0, calc(rem(4px) * (1 - min(var(--progress) * 3, 1))), 0);
 }

 &:nth-child(2) {
  mask-image: linear-gradient(
   to top,
   black calc(max(min(var(--progress) - 0.33, 0.33), 0) * 300%),
   rgba(0, 0, 0, 0.35) calc(max(min(var(--progress) - 0.33, 0.33), 0) * 300%)
  );
  transform: translate3d(0, calc(rem(4px) * (1 - min(max((var(--progress) - 0.33) * 3, 0), 1))), 0);
 }

 &:nth-child(3) {
  mask-image: linear-gradient(
   to top,
   black calc(max(min(var(--progress) - 0.66, 0.34), 0) * 300%),
   rgba(0, 0, 0, 0.35) calc(max(min(var(--progress) - 0.66, 0.34), 0) * 300%)
  );
  transform: translate3d(0, calc(rem(4px) * (1 - min(max((var(--progress) - 0.66) * 3, 0), 1))), 0);
 }
}

    Card rotating on mouse movement

    The card is built like the previous ones. It has a front and a back.

    <div class="card" data-price-card>
 <div class="card_front">...</div>
 <div class="card_back">...</div>
</div>

    On a closer look, you can see a small slide-in animation of the card before the mouse movement takes effect. This is built in GSAP using the onComplete() callback in the timeline. this.card refers to the element with data-price-card.

    this.introTimeline = gsap.timeline();

this.introTimeline.fromTo(
 this.card,
 {
  rotationZ: 0,
  rotationY: -90,
  y: "-4em",
 },
 {
  rotationZ: 6,
  rotationY: 0,
  y: "0em",
  duration: 1,
  ease: "elastic.out(1,0.75)",
  onComplete: () => {
   this.initAnimation();
  },
 }
);

    I’m using an elastic easing that I got from GSAPs Ease Visualizer. The timeline plays when the page loads and triggers the mouse movement animation once complete.

    In our initAnimation() method, we can use GSAP’s matchMedia() to enable the mouse movement only when hover and mouse input are available.

    this.mm = gsap.matchMedia();

initAnimation() {
 this.mm.add("(hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)", () => {
  gsap.ticker.add(this.mouseMovement);

  return () => {
   gsap.ticker.remove(this.mouseMovement);
  };
 });

 this.mm.add("(hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference)", () => {
  ...
 });
}

    By using the media queries hover: hover and pointer: fine, we target only devices that support a mouse and hover. With prefers-reduced-motion: no-preference, we add this animation only when reduced motion is not enabled, making it more accessible. For touch devices or smartphones, we can use hover: none and pointer: coarse to apply a different animation.

    I’m using gsap.ticker to run the method this.mouseMovement, which contains the logic for handling the rotation animation.

    I originally started with one of the free resources from Osmo (mouse follower) and built this mouse movement animation on top of it. I simplified it to only use the mouse’s x position, which was all I needed.

    constructor() {
  this.rotationFactor = 200;
  this.zRotationFactor = 15;
  this.centerX = window.innerWidth / 2;
  this.centerY = window.innerHeight / 2;

  this.currentMouseX = 0;

  window.addEventListener("mousemove", e => {
    this.currentMouseX = e.clientX;
  });
}

mouseMovement() {
  const mouseX = this.currentMouseX;
  const normalizedX = (mouseX - this.centerX) / this.centerX;
  const rotationY = normalizedX * this.rotationFactor;
  const absRotation = Math.abs(rotationY);
  const rotationProgress = Math.min(absRotation / 180, 1);
  const rotationZ = 6 - rotationProgress * 12;
  const rotationZMirror = -6 + rotationProgress * 12;

  gsap.to(this.card, {
    rotationY: rotationY,
    rotationZ: rotationZ,
    duration: 0.5,
    ease: "power2.out",
  });
}

    I also added calculations for how much the card can rotate on the y-axis, and it rotates the z-axis accordingly. That’s how we get this mouse movement animation.

    When building these animations, there are always some edge cases I didn’t consider before. For example, what happens when I move my mouse outside the window? Or if I hover over a link or button, should the rotation animation still play?

    I added behavior so that when the mouse moves outside, the card rotates back to its original position. The same behavior applies when the mouse leaves the hero section or hovers over navigation elements.

    I added a state flag this.isHovering. At the start of mouseMovement(), we check if this.isHovering is false, and if so, return early. The onMouseLeave method rotates the card back to its original position.

    mouseMovement() {
  if (!this.card || !this.isHovering) return;

  ...
}

onMouseEnter() {
  this.isHovering = true;
}

onMouseLeave() {
  this.isHovering = false;

  gsap.to(this.card, {
    rotationX: 0,
    rotationY: 0,
    rotationZ: 6,
    duration: 1.5,
    ease: "elastic.out(1,0.75)",
  });
}

    Using our initAnimation() method from before, with these adjustments added.

    initAnimation() {
 this.mm.add("(hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)", () => {
  this.container.addEventListener("mouseenter", this.onMouseEnter);
  this.container.addEventListener("mouseleave", this.onMouseLeave);
  gsap.ticker.add(this.mouseMovement);

  return () => {
   this.container.removeEventListener("mouseenter", this.onMouseEnter);
   this.container.removeEventListener("mouseleave", this.onMouseLeave);
   gsap.ticker.remove(this.mouseMovement);
  };
 });

 this.mm.add("(hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference)", () => {
  ...
 });
}

    And here we have the mouse enter/leave behavior.

    We can adjust it further by adding another animation for mobile, since there’s no mouse movement there. Or a subtle reflection effect on the card like in the video. This is done by duplicating the card, adding an overlay with a gradient and backdrop-filter, and animating it similarly to the original card, but with opposite values.

    Cards in a circular position that slightly rotate on scroll

    First, we build the base of the circularly positioned cards in CSS.

    <div class="wheel" style="--wheel-angle: 15deg">
 <div class="wheel_items">
  <div class="wheel_item-wrap" style="--wheel-index: 0"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 1"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 2"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 3"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 4"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 5"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 6"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 7"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 8"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 9"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 10"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 11"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 12"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 13"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 14"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 15"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 16"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 17"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 18"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 19"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 20"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 21"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 22"><div class="wheel_item">...</div></div>
  <div class="wheel_item-wrap" style="--wheel-index: 23"><div class="wheel_item">...</div></div>
 </div>
</div>

    At first, we add all 24 cards, then remove the ones we don’t want to show later because we don’t see them. In the CSS, the .wheel uses a grid display, so we apply grid-area: 1 / 1 to stack the cards. We later add an overlay before the wheel with the same grid-area. By using em we can use a fluid font-size to adjust the size pretty smooth on resizing the viewport.

    .wheel {
 aspect-ratio: 1;
 pointer-events: none;
 grid-area: 1 / 1;
 place-self: flex-start center;
 width: 70em;
}

    We use the same grid stacking technique for the items. On the item wrapper, we apply the CSS variables defined in the HTML to rotate the cards.

    .wheel_items {
 width: 100%;
 height: 100%;
 display: grid;
}

.wheel_item-wrap {
 transform: rotate(calc(var(--wheel-angle) * var(--wheel-index)));
 grid-area: 1 / 1;
 justify-self: center;
 height: 100%;
}

    Inside the item, there is only an image of the card background. The item uses translateY(-100%) to position the card at the top edge of the item.

    .wheel_item {
 transform: translateY(-100%);
 aspect-ratio: 60 / 83;
 width: 7.5em;
}

    We can remove the card from 8 to 19 as we don’t see them behind the overlay. It should look like this now.

    By adding the data attributes and setup for viewport detection from Locomotive Scroll, which we used in previous modules, we can simply add our GSAP timeline for the rotation animation.

    this.timeline = gsap.timeline({ paused: true });

this.timeline.to(this.wheel, {
 rotate: -65,
 duration: 1,
 ease: "linear",
});

    We can add a gradient overlay on top of the cards.

    .wheel_overlay {
 background-image: linear-gradient(#fff0, #0000003d 9%, #00000080 16%, #000000b8 22%, #000 32%);
 width: 100%;
 height: 100%;
}

    And that’s our final effect.

    Conclusion

    There are probably smarter ways to build these animations than I used. But since this is my first site after changing my direction and GSAP, Locomotive Scroll V5, Swup.js, and CSS animations, I’m pretty happy with the result. This project became a personal playground for learning, it really shows that you learn best by building what you imagine. I don’t know how many times I refactored my code along the way, but it gave me a good understanding of creating accessible animations.

    I also did a lot of other animations on the site, mostly using CSS animations combined with JavaScript for the logic behind them.

    There are also so many great resources out there to learn GSAP and CSS.

    Where I learned the most:

    It’s all about how you use it. You can copy and paste, which is fast but doesn’t help you learn much. Or you can build on it your own way and make it yours, that’s at least what helped me learn the most in the end.



    Source link

2jl loginplus7772jljljl77