Forem: Gonçalo Alves

How I Developed My First Neovim Plugin: A Step-by-Step Guide

Gonçalo Alves — Thu, 19 Sep 2024 14:08:05 +0000

Are you a Neovim enthusiast looking to extend its functionality? Ever wondered how to create your own plugin and publish it up on Github? Look no further! In this post, I'll walk you through my journey of developing a simple "Hello World" plugin for Neovim.

For those who want to see the finished product or follow along with the complete source code, you can check out the full repository here:

neovim-plugin-hello-world GitHub Repository

Feel free to star the repository if you find it helpful!

Btw, I'm building a real useful Neovim plugin and I will share how I built this plugin here, so make sure you follow me if you don't wanna miss that.

Introduction

Neovim, a hyper-extensible Vim-based text editor, allows users to create custom plugins to enhance their editing experience. In this tutorial, we'll create a simple plugin that adds a :HelloWorld command and a keymapping to Neovim, which prints "Hello from Neovim!" when executed.

Setting Up the Development Environment

Before we dive into coding, let's set up our development environment:

Ensure you have Neovim installed (version 0.5 or later recommended).
Choose a directory for your plugin development. I used ~/development/neovim/neovim-plugins/.

Creating the Plugin Structure

Before we dive into coding our specific plugin, it's important to understand the typical structure of a Neovim plugin. This structure follows conventions that determine how and when different parts of the plugin are loaded.

The Anatomy of a Neovim Plugin

A generic Neovim plugin usually has the following structure:

.
├── LICENSE
├── README.md
├── plugin/
│   └── plugin-file.lua
└── lua/
    └── plugin-name.lua

Let's break down each component:

Root Directory:
- LICENSE: The license file for your plugin.
- README.md: Documentation and usage instructions for your plugin.
plugin/ Directory:
- Files in this directory are automatically executed when Neovim starts.
- This is useful for setting up global commands, autocommands, or keymaps that should be available immediately.
- Example: plugin/plugin-file.lua
lua/ Directory:
- This is where the main plugin code resides.
- Code here is only executed when explicitly required by the user or other parts of the plugin.
- There are two common ways to structure the main file: a. Single file: lua/plugin-name.lua b. Directory with init file: lua/plugin-name/init.lua

Key Points About Plugin Structure

The plugin/ directory is for code that needs to run immediately when Neovim starts, regardless of whether the user explicitly requires the plugin.
The lua/ directory contains the main plugin code, which is only executed when required. This is where most of your plugin's functionality should be implemented.
Naming is important. The main file in the lua/ directory should typically match your plugin's name (e.g., hello-world.lua for a plugin named "hello-world").
For simple plugins, a single file in the lua/ directory is often sufficient. For more complex plugins, you might use a directory with an init.lua file.
The main entry point of your plugin (in the lua/ directory) is what users will require to use your plugin. For example, users would use require('hello-world') to load a plugin with the file lua/hello-world.lua.

This structure allows for efficient loading of plugin code, with immediate execution of necessary setup code (in plugin/) and on-demand loading of the main functionality (in lua/).

Structure for Our Hello World Plugin

For our simple "Hello World" plugin, we'll use the following structure:

neovim-plugin-hello-world/
├── LICENSE
├── README.md
└── lua/
    └── neovim-plugin-hello-world.lua

Since our plugin doesn't need any immediate setup, we'll omit the plugin/ directory and focus on the main functionality in the lua/ directory.

Let's create this structure in your chosen development directory:

Create a new directory for your plugin:

   mkdir -p neovim-plugin-hello-world/lua

Navigate to the plugin directory:

   cd neovim-plugin-hello-world

Create the main Lua file:

   touch lua/neovim-plugin-hello-world.lua

Create a README.md file:

   touch README.md

Add a LICENSE file (choose an appropriate license for your project).

Now that we have our plugin structure set up, we're ready to start writing the actual plugin code.

Writing the Plugin Code

Let's create the main plugin file. Open lua/neovim-plugin-hello-world.lua in your favorite text editor and add the following code:

-- Main module for the Hello World plugin
local M = {}

-- Function to print the hello message
function M.say_hello()
  print("Hello from Neovim!")
end

-- Function to set up the plugin (Most package managers expect the plugin to have a setup function)
function M.setup(opts)
  -- Merge user options with defaults
  opts = opts or {}

  -- Create the user command
  vim.api.nvim_create_user_command("HelloWorld", M.say_hello, {})

  -- Set up a key mapping
  -- Use opts.keymap if provided, otherwise default to '<leader>hw'
  local keymap = opts.keymap or '<leader>hw'

  -- Create the keymap
  vim.keymap.set('n', keymap, M.say_hello, { 
    desc = "Say hello from our plugin",
    silent = true  -- Prevents the command from being echoed in the command line
  })
end

-- Return the module
return M

Let's break down this code:

We define a module M that will contain all our plugin's functionality.
The say_hello() function is the core of our plugin. It simply prints a greeting message.
The setup() function is used to initialize our plugin with user-provided options:
- It creates a user command :HelloWorld that calls our say_hello() function.
- It sets up a keymapping (default <leader>hw) that also calls say_hello().
We return the module at the end, making its functions available to users of our plugin.

Debugging Your Plugin

To debug your plugin locally using lazy.nvim with the dir option:

Ensure you have lazy.nvim installed in your Neovim configuration.
Modify your Neovim configuration to load your plugin locally. Add the following to your init.lua or wherever you configure your plugins:

require("lazy").setup({
  {
    "neovim-plugin-hello-world",
    dir = "~/development/neovim/neovim-plugins/neovim-plugin-hello-world",
    config = function()
      require("neovim-plugin-hello-world").setup({
        keymap = "<leader>hello"  -- optional: override the default keymap
      })
    end,
  },
  -- ... your other plugins ...
})

Restart Neovim or run :Lazy sync to load your plugin.
Test your plugin:
- Try running the command :HelloWorld
- Use the keymapping (default <leader>hw or your custom mapping) in normal mode

You should see "Hello from Neovim!" printed in the command line for both methods.

Iterative Development

With this setup, you can easily iterate on your plugin:

Make changes to your plugin code.
Save the files.
In Neovim, run :Lazy reload neovim-plugin-hello-world to reload your plugin.
Test the changes by running :HelloWorld or using the keymapping.

This workflow allows for rapid development and testing without constantly restarting Neovim or manually sourcing files.

Installing the Plugin Remotely

When you're ready to share your plugin with the world, you'll need to push it to a GitHub repository. Here's how to make it installable via lazy.nvim:

Create a GitHub repository for your plugin.
Push your plugin code to the repository.
Update your README.md file with installation and usage instructions.

Here's a sample README.md:

# neovim-plugin-hello-world

A simple Neovim plugin that adds a `:HelloWorld` command and keymapping.

&nbsp;
## Installation

Using [lazy.nvim](https://github.com/folke/lazy.nvim):

{
  "yourusername/neovim-plugin-hello-world",
  opts = {
      keymap = "<leader>hello"  -- optional: override the default keymap
    }
}

&nbsp;
## Usage

After installation:
1. Run `:HelloWorld` command in Neovim
2. Or use the keymapping (default `<leader>hw` or your custom mapping) in normal mode

Both will print "Hello from Neovim!" in the command line.

(Don't forget to replace yourusername with your actual GitHub username.)

Conclusion

Congratulations! You've just created your first Neovim plugin. This simple example demonstrates the basics of plugin development, including structuring your code, creating user commands, setting up keymappings, and making your plugin installable.

As you become more comfortable with plugin development, you can explore more advanced features like autocommands, integrating with Neovim's API, and creating more complex functionality. The possibilities are endless!

Remember, the key to successful plugin development is iterative improvement and testing. With the setup we've created, you can quickly make changes, reload your plugin, and see the results in real-time.

Happy coding, and may your Neovim experience be ever more customized and efficient!

Connect with me

If you reached this far and liked this article be sure to leave a comment. That will make my day!

If you want to connect with me you can send me a message on Twitter/X.

If you want to read other stuff by me you can check out my personal blog.

You can also check other stuff that I have going on here

Tailwind CSS vs. Vanilla CSS: When to Use Each for Your Web Development Projects

Gonçalo Alves — Mon, 09 Sep 2024 21:35:44 +0000

When building a website or web application, the decision between using Tailwind CSS and vanilla CSS can significantly impact your workflow, design consistency, and project scalability. Both options offer unique benefits, but the right choice depends on your specific project requirements and goals.

In this article, we'll dive into the strengths of Tailwind CSS and vanilla CSS, helping you decide which is the best fit for your next web development project.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a vast array of utility classes directly in your HTML. This approach allows for rapid development and design consistency across your project. Instead of writing custom CSS for each component, you apply pre-defined classes like flex, text-center, and mt-4 to style elements on the fly.

What is Vanilla CSS?

Vanilla CSS refers to writing custom CSS without the use of frameworks. This traditional approach gives developers complete control over styling, allowing for highly customized designs. While it requires more effort to maintain consistency, it offers unparalleled flexibility.

Advantages of Tailwind CSS

Faster Development

Tailwind CSS shines when you need to speed up development. By using utility classes, you can style components quickly without writing additional CSS. This can be particularly beneficial in agile environments where quick iterations are key.
Design Consistency

With Tailwind, every developer on your team uses the same set of utility classes, ensuring consistent design across your project. This is especially useful in large-scale projects where maintaining uniformity is challenging.
Component-Based Design

Tailwind CSS is ideal for component-based architectures, commonly used in frameworks like React, Vue.js, and Angular. It allows you to encapsulate styles within components, reducing the need for global CSS and preventing style conflicts.
Highly Customizable

Despite its utility-first nature, Tailwind is highly customizable. You can extend the default theme, create custom utility classes, and modify existing ones to fit your specific design system. This flexibility makes it easy to align Tailwind with your brand's visual identity.
Minimized Naming Conflicts

By using utility classes directly in your HTML, Tailwind helps you avoid the common pitfalls of CSS class name conflicts and specificity issues, which can be a major headache in vanilla CSS.

Advantages of Vanilla CSS

Complete Control Over Styling

Vanilla CSS gives you full control over your styles, allowing you to write any CSS rule needed to achieve the exact look and feel you want. This level of control is crucial when working on projects with unique or complex design requirements.
Ideal for Small Projects

For smaller projects or simple websites, vanilla CSS might be the better option. It eliminates the need to learn and configure a framework, allowing you to focus on writing custom styles tailored to your project's specific needs.
Simplicity and Learning

If you or your team are new to web development, vanilla CSS is universally understood and has a lower learning curve. It’s a great starting point for beginners or teams that prefer a straightforward approach.
Specific Design Requirements

When your project has very specific design needs that aren’t easily met with utility classes, vanilla CSS offers the flexibility to create custom styles without limitations.
No Build Process Required

Vanilla CSS can be written directly in your HTML or linked in a separate stylesheet without requiring a build process, which is necessary when using Tailwind CSS. This can be a simpler approach for smaller projects or static websites.

Tailwind CSS vs. Vanilla CSS: Making the Right Choice

Tailwind CSS is ideal for developers who prefer an integrated workflow, where code and styles coexist within the same component. It offers speed, consistency, and ease of use, particularly in large or team-based projects. The framework’s ability to automatically purge unused classes, along with its high customizability and standardized configuration, makes it a powerful tool for maintaining scalable and maintainable codebases.
Vanilla CSS is best when you need full control over your styling, are working on smaller projects, or have specific design requirements that Tailwind’s utility classes can’t easily accommodate. It’s a great option for those who prefer simplicity and don’t want to deal with the overhead of learning a new framework.

Conclusion

Ultimately, the choice between Tailwind CSS and vanilla CSS comes down to what works best for you and your team. If you value having your code and styles in one place, prefer standardized configurations, and want to minimize the cognitive load of managing class names, Tailwind CSS is likely the better choice. However, if you need full control over your styles or are working on a smaller project where simplicity is key, vanilla CSS might be the way to go.

Both approaches have their merits, and by understanding the strengths and limitations of each, you can make an informed decision that aligns with your development workflow and project goals.

P.S. Why I like Tailwind

For developers who prefer to keep their code and styles tightly integrated within components, Tailwind CSS is a clear winner. Tailwind's utility-first approach allows you to write styles directly in your HTML, eliminating the need to switch back and forth between HTML and CSS files. This alone can streamline your workflow, making it easier to focus on building components without the distraction of managing separate stylesheets.

Here are some key reasons why I like Tailwind CSS so much:

Automatic Documentation

Tailwind’s utility classes serve as self-documenting code. The class names describe what they do, making your code more readable and easier to understand. This reduces the need for extensive documentation since the purpose of each class is clear from the start.
Automatic Purging of Unused Classes

One of the standout features of Tailwind is its ability to automatically purge unused classes from your final CSS bundle. This ensures that your CSS file remains lean and optimized, improving load times and performance without any extra effort on your part.
Works Great Out of the Box and Highly Customizable

Tailwind CSS is designed to work out of the box, offering a comprehensive set of utility classes that cover most design needs. However, it’s also highly customizable—whether you need to extend the default theme, add new utilities, or modify existing ones, Tailwind makes it easy to tailor the framework to your specific project.
Standardized Configuration for Easier Maintainability

Tailwind provides a standardized configuration that helps ensure consistency across your project. This is especially beneficial in teams where multiple developers are working on the same codebase. By adhering to a shared configuration, you can maintain uniformity in styles and reduce the overhead of managing class names and styles.
Solving Cross-Browser Compatibility

Tailwind helps mitigate cross-browser inconsistencies, ensuring that your designs behave the same across different browsers. This can save significant time and frustration in debugging and maintaining your styles.
Reducing Cognitive Load

Tailwind removes the burden of coming up with and maintaining unique class names, which can often become a cumbersome task in larger projects. With Tailwind, you use utility classes that are both descriptive and reusable, reducing the cognitive load associated with managing styles.

Connect with me

If you reached this far and liked this article be sure to leave a comment. That will make my day!

If you want to read other stuff by me you can check out my personal blog.

If you want to connect with me you can send me a message on Twitter/X.

You can also check other stuff that I have going on here

Animating with TailwindCSS

Gonçalo Alves — Sun, 28 Jul 2024 16:10:23 +0000

When it comes to enhancing user experience in web applications, animations play a pivotal role. TailwindCSS simplifies the process of adding animations, but what if you want more than the basic options? In this article, I will guide you through extending TailwindCSS animations, allowing you to create custom, dynamic animations without relying solely on custom CSS.

Understanding TailwindCSS Animations

TailwindCSS provides four primary animations: spin, ping, bounce, and pulse. These animations are straightforward to implement but often lack the granularity and control that developers desire. While these default options are convenient, you may find yourself needing more sophisticated animations tailored to your application’s unique requirements.

The Need for Customization

In many cases, developers want to tweak animations, such as changing speed or applying unique effects like “wiggle.” The great news is that TailwindCSS allows for customization through the configuration file, enabling you to add new animations and define their characteristics.

Setting Up Extended Animations

To get started, you’ll want to locate your TailwindCSS configuration file (typically tailwind.config.js). Here’s a step-by-step process to extend the basic animations.

Step 1: Adding a New Animation

Let’s say you want to create a slower version of the spin animation, which we’ll call spin-slow. You’ll begin by accessing your Tailwind config file:

module.exports = {
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 1s linear infinite',
      }
    }
  }
}

In this example, we've referenced the existing spin animation and adjusted its duration to one second while maintaining a linear easing.

Step 2: Creating Unique Animations

Beyond modifying existing animations, you can create entirely new ones, such as a "wiggle" effect. To do this, you'll define keyframes in your Tailwind config:

module.exports = {
  theme: {
    extend: {
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
      },
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-9deg)' },
          '50%': { transform: 'rotate(9deg)' },
        },
      },
    },
  }
}

This configuration introduces a wiggling animation that rotates an element back and forth.

Enhancing Animations with Plugins

While the default TailwindCSS animations are helpful, they may not cover all your needs, such as adjusting animation timing, delays, or even controlling play states. Here’s where plugins come into play.

Installing the TailwindCSS Animate Plugin

To gain more control over animations, you can use the TailwindCSS Animate plugin. To install this plugin, follow these steps:

Install the plugin via npm:

   npm install tailwindcss-animate

Add the plugin to your Tailwind configuration:

   module.exports = {
     plugins: [
       require('tailwindcss-animate'),
     ],
   }

This plugin extends the functionality of TailwindCSS, allowing you to define animation durations, delays, and play states easily.

Implementing Advanced Animation Features

Once the plugin is installed, you can use it to define attributes like duration and delay directly within your HTML:

<div class="animate-wiggle duration-75 delay-1000"></div>

This example applies the wiggle animation with a duration of 75 milliseconds and a delay of one second.

Managing Animation States

One of the most powerful features of the animate plugin is the ability to control whether an animation is running or paused. By toggling classes, you can pause animations based on user interactions, enhancing the interactive experience.

Example: Toggling Animation States

let isRunning = true;

const toggleAnimation = () => {
  isRunning = !isRunning;
  document.querySelector('.animate-wiggle').classList.toggle('paused', !isRunning);
  document.querySelector('.animate-wiggle').classList.toggle('running', isRunning);
};

This code snippet allows an animation to be paused or resumed with a click, providing a dynamic user interface element.

Connect with me

If you like this article be sure to leave a comment. That will make my day!

If you want to read other stuff by me you can check out my personal blog.

If you want to connect with me you can send me a message on Twitter/X.

You can also check other stuff that I have going on here

Why TailwindCSS Should Be Your Go-To CSS Framework

Gonçalo Alves — Fri, 19 Jul 2024 22:26:11 +0000

As a developer who's spent countless hours battling with CSS, I want to share a tool that's made my life so much easier: TailwindCSS.

This isn't just another trendy framework - it's a game-changer that's transformed how I approach web design.

What's TailwindCSS all about?

At its core, TailwindCSS is about simplicity. Instead of writing custom CSS for every element, you use pre-defined utility classes right in your HTML. Need some padding? Just add 'p-4'. Want a margin? Throw in 'm-2'. It might look messy at first, but trust me, once you get used to it, you'll wonder how you ever lived without it.

Why I switched to TailwindCSS (and why you should too)

It's fast. Really fast. No more jumping between HTML and CSS files - everything's right there in your markup.
It's flexible. Every project is different, and TailwindCSS gets that. You can customize it to fit your needs without fighting against pre-existing styles.
It's efficient. TailwindCSS only includes the styles you actually use, which means smaller file sizes and faster loading times.
It makes responsive design a breeze. Creating mobile-friendly layouts is as simple as adding a few extra classes.

Some tips from the trenches

After using TailwindCSS for a while, I've picked up a few tricks:

Get yourself a good code editor extension. It'll make finding the right classes so much easier.
Don't rush to change everything. TailwindCSS comes with some smart defaults - use them as a starting point.
Check out the plugin ecosystem. There's a whole world of extra functionality out there waiting to be tapped.

Final thoughts

I won't lie - TailwindCSS takes some getting used to. But once you've got the hang of it, you'll wonder how you ever managed without it. It's made my development process faster, my code cleaner, and my designs more consistent.

If you're on the fence, I'd say give it a shot on your next project. Start small, play around with it, and see how it fits into your workflow. You might just find it's the tool you've been looking for all along.

Remember, every new tool has a learning curve. But in my experience, the time you invest in learning TailwindCSS pays off tenfold in the long run. Happy coding, and let me know how you get on with TailwindCSS!

Connect with me

If you like this article be sure to leave a comment. That will make my day!

If you want to read other stuff by me you can check out my personal blog.

If you want to connect with me you can send me a message on Twitter/X.

You can also check other stuff that I have going on here

What's coming in Next.js 15

Gonçalo Alves — Fri, 24 May 2024 13:40:33 +0000

Today, I'm excited to dive into some of the latest technological advancements that have caught my eye, particularly around Next.js 15. Although these updates might seem nuanced, they are pivotal for developers looking to enhance web application performance and experience.

While it's still in the RC phase mainly due to dependencies on the upcoming React 19, the anticipation is palpable. This update promises to streamline development processes significantly and improve application performance across the board.

Enhanced React Support

One of the standout features in this release is the integration with React 19, enhancing both client and server-side capabilities. Developers can now experiment with new features like the React compiler, which optimizes the application even further. If you're keen to try it out, running a simple npm install next@rc could get you started on this exciting journey.

With React 19 on the horizon, Next.js 15 is poised to integrate seamlessly, promising improvements in both client and server-side operations. This means faster, more efficient builds, and a smoother developer experience.

Compiler Upgrades

The integration of the React 19 compiler is a game-changer. It simplifies the setup process, potentially improving performance without the need for extensive code modifications. This upgrade is particularly promising for those looking to enhance application speed and responsiveness.

Improved Error Handling for Hydration

Next.js 15 aims to solve the hydration errors more transparently by providing clearer debugging messages. This means developers can quickly pinpoint discrepancies between server and client renders, significantly easing the debugging process. This is a huge relief for developers who have struggled with these issues in the past.

Enhancements in Caching and Routing

Vercel has also overhauled its caching strategies. In previous versions, certain default caching behaviors led to confusion and inefficiencies. The new approach requires explicit actions to enable caching, thereby reducing unintended consequences and giving developers more control.

Routing has received attention too, with improvements ensuring that navigation fetches the most current page data, enhancing the user experience by maintaining the speed and responsiveness that Next.js applications are known for.

Incremental Adoption of Partial Pre-rendering

This feature allows developers to implement pre-rendering gradually, making it easier to optimize performance without overhauling the entire application. It’s especially useful for enhancing user experiences on static pages like homepages or blog entries.

Next After: Post-Request Operations

An exciting addition is the unstable_after feature, empowering developers to execute background tasks after a response is sent to the user. This is ideal for non-critical operations like logging or analytics, ensuring they don’t delay the initial response.

Streamlined Developer Experience

Lastly, the improvements extend to the developer experience. The revised create-next-app template is cleaner and more intuitive, helping new users start projects more efficiently. Moreover, the introduction of Turbo pack invites developers to opt-in during setup, promoting a faster and more responsive development environment.

Looking Forward

As we look towards the general availability of Next.js 15, it's clear that Vercel is committed to pushing the boundaries of what's possible in web development. These updates not only address pain points but also introduce forward-thinking capabilities that promise to set new standards in the industry.

I'm particularly excited about the potential these updates have to simplify the development process while simultaneously boosting performance and security. Whether you're a seasoned developer or just starting out, these changes are worth exploring.

Connect with me

If you like this article be sure to leave a comment. That will make my day!

If you want to read other stuff by me you can check out my personal blog.

If you want to connect with me you can send me a message on Twitter/X.

You can also check other stuff that I have going on here

Understanding React Server Components

Gonçalo Alves — Fri, 17 May 2024 16:05:17 +0000

In the ever-evolving world of web development, React continues to be at the forefront, introducing innovative solutions to enhance performance and user experience. One of the most exciting advancements in recent times is React Server Components, a feature that promises to change how developers build and optimize applications.

Let’s dive deep into what React Server Components are, how they work, and why they're a game-changer for developers and businesses alike.

What are React Server Components?

React Server Components are a new addition to React's capabilities, allowing developers to render components on the server instead of the client. This approach not only reduces the amount of code shipped to the client but also significantly improves performance by offloading processing to the server.

React Server Components are designed to render ahead of time, during the build process or dynamically per request, without involving the client-side environment.

Key Benefits of React Server Components

Reduced Bundle Size: By rendering components on the server, the client downloads less JavaScript. This is particularly beneficial for improving load times and enhancing the user experience on mobile devices with slower connections.
Efficient Data Fetching: Server Components fetch data directly from the backend without going through client-side APIs, reducing latency and eliminating unnecessary client-server communication.
Streamlined Rendering: Components are processed on the server and only the final HTML and minimal JavaScript are sent to the client, ensuring that the page loads quickly and users can interact with content sooner.

How Do React Server Components Work?

React Server Components can operate in environments without a traditional server (at build time) or with a server (during requests). This flexibility allows them to be used in a variety of scenarios, from static site generation to dynamic server-side rendering.

Example Without a Server:

// Server Component
async function Page({page}) {  
    const content = await file.readFile(`${page}.md`);  
    return <div dangerouslySetInnerHTML={{__html: marked(content)}} />;
}

In this example, the Page component reads a Markdown file during the build process, converts it to HTML, and renders it directly. This method ensures that the client only receives fully prepared HTML, with no need for additional libraries or data fetching after the initial load.

Example With a Server:

// Server Component

async function Note({id}) {
    const note = await db.notes.get(id);  
    return (    
        <div>      
            <Author id={note.authorId} />      
            <p>{note.text}</p>
        </div>  
    );
}

// Client Component
function Author({id}) {  
    const [author, setAuthor] = useState('');  
    useEffect(() => {    
            fetch(`/api/authors/${id}`).then(data => setAuthor(data.author));  
            }, [id]);  
    return <span>By: {author.name}</span>;
}

In the Note component, data is fetched and rendered on the server. The Author component, however, is a client component that fetches additional data after the page has loaded. This separation allows critical content to be visible immediately while less critical data loads asynchronously.

Future Outlook and Stability

React Server Components are still evolving. As of React 19, the feature is stable, meaning it won't undergo breaking changes between major versions. However, the underlying APIs may experience minor adjustments. Developers are encouraged to pin specific React versions or use Canary releases to experiment with the latest features.

Conclusion

React Server Components represent a significant leap forward in optimizing web applications. By leveraging the server's capabilities, developers can deliver faster, more efficient web applications. As this technology matures, it is set to become an essential tool in the arsenal of modern web developers, pushing the boundaries of what's possible on the web.

Building a Simple React Custom Hook

Gonçalo Alves — Fri, 10 May 2024 15:39:47 +0000

Have you ever had the need to persist certain bits of your app’s state, even after a dreaded page refresh? Have you ever wished for an alternative to backend storage for small amounts of data? Don't worry, we've all been there.

Let's use React Custom Hooks to do that exactly.

As a React developer, one constant feature I've always wanted is to be able to store and retrieve user data right from my application, without making an extra round trip to the server or managing a database. I've explored different solutions, but found myself frequently circling back to the underrated localStorage API. However, directly using this API comes with figuring out where, when and how to handle its operations.

Then one day, some kind of magic happened. I stumbled upon React hooks and, boy oh boy, did that make a difference. Suddenly I was able to extract my localStorage handling code into its dedicated area, creating a custom hook that simplified my codebase to unprecedented levels.

Let me walk you through it.

import { useState, useEffect } from "react";

const useLocalStorage = (key, initialValue) => {
    const [storedValue, setStoredValue] = useState(() => {
        try {
            const item = window.localStorage.getItem(key);
            return item ? JSON.parse(item) : initialValue;
        } catch (error) {
            console.log(error);
            return initialValue;
        }
    });

    const setValue = (value) => {
        try {
            const valueToStore =
                value instanceof Function ? value(storedValue) : value;
            setStoredValue(valueToStore);
            window.localStorage.setItem(key, JSON.stringify(valueToStore));
        } catch (error) {
            console.log(error);
        }
    };

    return [storedValue, setValue];
};

export default useLocalStorage;

Just like that, you have created your custom hook to handle localStorage. What you are seeing here is a beautifully layered piece of code. It takes a key and initial value as parameters. In return, it gets a state variable and setter function to update that value.

Excited about how to use this freshly baked hook? Let me show you:

import useLocalStorage from './useLocalStorage';

function App() {
    const [name, setName] = useLocalStorage('name', '');

    return (
        <div>
            <input
                type='text'
                value={name}
                onChange={e => setName(e.target.value)}
            />
        </div>
    );
}

export default App;

There you go! Now, each time you type in the input box in your App component, it will automatically store your changes to localStorage under the key "name". Not only that, but it won't forget even if you refresh, restart, or come back to it after an hour-long coffee break.

Life as a React developer just got easier! With hooks, especially custom hooks like this, we now have delightful, reusable pieces of code that preserve the beautiful, declarative nature of React we all cherish.

So why not dish out your favourite text editor, roll up your sleeves, and start experimenting with this brand new custom hook right now? Just like me, I'm sure you'll discover joy and practical efficiency in this exciting React feature. Happy coding!

Connect with me

If you like this article be sure to leave a comment. That will make my day!

If you want to read other stuff by me you can check out my personal blog.

If you want to connect with me you can send me a message on Twitter/X.

You can also check other stuff that I have going on here

Docker Containers vs. Virtual Machines

Gonçalo Alves — Fri, 03 May 2024 15:59:20 +0000

In a previous article I talked about how to install a NextJS app on a docker container. Now, I feel the need to write an article about the differences between docker containers and virtual machines.

As a declaration of interests, I only run containers in my production apps. I believe that having a dedicated virtual machine for just running an app is overkill. Also, I don't like to have all the apps installed in a virtual machine where I can make a mistake and mess up the environments of the different apps.

For that reason my current setup for production apps is two vms, each of them running docker with a few containers. When I need to update a container I just do a git pull followed by a docker stop <container name> and docker build and docker start <container name>. So far it has worked without any hiccups.

With that out of the way let's get into the article.

What is a Virtual Machine?

A virtual machine is an emulation of a computer system that provides the functionality of a physical computer. It operates based on a hypervisor, which acts as a platform for running multiple VMs.

Each VM runs its own operating system, completely isolated from the host and other VMs, thereby ensuring thorough compartmentalization of applications.

There are two types of hypervisors:

Type 1 (Bare Metal): This hypervisor runs directly on the hardware of the host machine, offering high performance and efficiency because it interacts directly with the physical hardware.
Type 2 (Hosted): This version runs as an application within the host operating system, relying on the host OS to manage hardware resources.

I have a Proxmox server, running for 6+ years, that is a type-2 hypervisor and it works beautifully. It is a lot of fun and cannot recommend enough. You will learn so much and go through many rabbit holes :) .

What is Docker Containers

Docker containers, on the other hand, offer a more lightweight approach to application deployment. Unlike VMs that virtualize the entire operating system, containers virtualize at the application level, sharing the host system's kernel but running isolated processes.

This architecture allows Docker containers to be extremely efficient and fast, making them ideal for environments where rapid scaling is required.

Key Differences Between VMs and Docker Containers

Isolation: VMs provide complete OS isolation, which enhances security and allows different operating systems to coexist on the same physical machine. Containers, while isolated, share the host's kernel, making them less isolated compared to VMs but more resource-efficient.
Performance: VMs involve additional overhead due to the need to emulate a full hardware environment and an entire OS for each instance. Containers, being lighter, start faster and use fewer resources, as they only need to run the application and its dependencies.
Resource Management: VMs require a predefined allocation of resources, which can lead to underutilization or resource scarcity if not managed properly. Containers are more flexible, allowing for dynamic resource allocation that maximizes efficiency.
Portability: Containers excel in portability since they encapsulate the application configuration and dependencies in a single package, making it easy to move across different environments that support Docker.
Use Cases: VMs are better suited for applications requiring full isolation and security, complete control over the operating environment, or where hardware emulation is necessary. Containers are ideal for microservices architecture, application scaling, and rapid development cycles where quick deployment and efficient resource use are priorities.

Practical Applications and Considerations

In practice, the choice between a Docker container and a VM depends on the specific needs of the application and the environment.

For instance, if you need a fully isolated environment for secure data processing, a VM might be the appropriate choice.

However, if you are developing microservices that need to scale dynamically, Docker containers can provide the necessary speed and flexibility.

Conclusion

Both Docker containers and virtual machines offer significant advantages but serve different purposes based on application requirements and environmental context.

I recommend that you start playing with docker because it really is a great tool to use and doesn't consume that many resources.

Connect with me

If you like this article be sure to leave a comment. That will make my day!

If you want to read other stuff by me you can check out my personal blog.

If you want to connect with me you can send me a message on Twitter/X.

You can also check other stuff that I have going on here

How to install React 19 Beta

Gonçalo Alves — Fri, 26 Apr 2024 16:15:58 +0000

I wrote this quick article to help those that are like me and want to test the latest version of React, which is React 19 Beta.

In that way, we get to play around with the new cool stuff like Server Components.

Step 1 - Installation

In a terminal go to the folder with all your repos and execute the following command:

npm create vite@latest react-beta-test

In the prompts be sure to select React and Javascript or Typescript. I'm going to select Typescript as I prefer it. This command will create a new folder called react-beta-test (you can change this if you want in the command above).

CD into that folder: cd react-beta-test

and run the following command: npm install react@beta react-dom@beta

after the command finishes, run npm install

Step 1.a - React Typescript

If you selected the typescript version of React follow these commands. If not, and you have selected Javascript, you can move on to the next step.

Edit the package.json file and delete the dependencies and remove "@types/react" and "@types/react-dom" from the devDependencies. After that include the following lines in the file:

"dependencies": {  
"@types/react": "npm:types-react@alpha",  
"@types/react-dom": "npm:types-react-dom@alpha"  

},  
"overrides": {  
"@types/react": "npm:types-react@alpha",  
"@types/react-dom": "npm:types-react-dom@alpha"  
}

Below is an example of what it looks like before and after the edit.

Before (Example package.json File:)

{
  "name": "react-beta-test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }
}

After (Example package.json File):

{
  "name": "react-beta-test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --host",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@types/react": "npm:types-react@alpha",
    "@types/react-dom": "npm:types-react-dom@alpha",
    "react": "^19.0.0-beta-94eed63c49-20240425",
    "react-dom": "^19.0.0-beta-94eed63c49-20240425"
  },
  "overrides": {
    "@types/react": "npm:types-react@alpha",
    "@types/react-dom": "npm:types-react-dom@alpha"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }
}

Step 2 - Check the React version installed

To check that we have the right version we can edit the src/App.tsx file and change the first line:

From:
import { useState } from "react";

To:
import { useState, version } from "react";

and edit the line 19, from:
<h1>Vite + React </h1>

to:
<h1>Vite + React {version}</h1>

after in a terminal run: npm run dev

Hopefully, you should see something similar to the image on the top of this post. If not, leave me a comment below.

Connect with me

If you like this article be sure to leave a comment. That will make my day!

If you want to read other stuff by me you can check out my personal blog.

If you want to connect with me you can send me a message on Twitter/X.

You can also check other stuff that I have going on here

How to serve a Next.js app in docker

Gonçalo Alves — Fri, 19 Apr 2024 13:56:30 +0000

Intro

I have created a few Next.js containers, but for some reason, when I do it I always go back in forth between my code and few webpages. I haven't found a page with everything that I need to know in order to containerize an app.

So I'm writing this for my reference and hope that you will also get value from it. If you do, please leave me a comment as way to encourage me to do this more often.

Setting up the next.js project

Ideally you would use a current Next.js project that you already created.

If you currently you don't have a Next.js project and want to tryout this tutorial you can run npx create-next-app@latest to create a new Next.js project and follow the instruction provided in the terminal by the installer.

Next make sure to edit the next.config.js file in order to create the "production" build. Your next.config.js file should look something like this:

/** @type {import('next').NextConfig} */
const nextConfig = { output: 'standalone', }

module.exports = nextConfig

Creating the Dockerfile for x86 and ARM

In order to containerize your app, you must create a file called Dockerfile in the root directory of your project. You should copy the code below to your Dockerfile, depending on the Docker host architecture.

There a few important points to note in the Dockerfile :
1. The first line of the Dockerfile referes to the base image of the container and, in this case, the node version in which your containerized app is going to run. You should always match the version of node you are running in your dev environment with the version running in the container.
2. Some Next.js have different file structures. For instance, some apps need environment variables to be set in order to run properly. In that case you need to copy your .env file to the container. You can do that by adding the following code: COPY --from=builder --chown=nextjs:nodejs /app/.env ./ . This code should be added before the USER nextjs line to ensure that it's copied at the correct moment.
3. You should adapt the code from the previous line to suit your needs. For instance if you have an ORM with a sqlite database, you are going to have to build the database from scratch when you build the container. The same steps that you followed to build the database in your DEV environment, should be followed for the containerized environment. I have left an example in a few comments of how you can achieve that. In my example I'm using sqlite with prisma.

For x86 architecture

FROM node:20-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi


# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Example: Create a new database
# RUN rm -rf /app/prisma
# RUN npx prisma init --datasource-provider sqlite
# COPY prisma/schema.prisma ./prisma/
# COPY prisma/migrations ./prisma/
# RUN npx prisma migrate dev --name init
# RUN npx prisma generate

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Comment the following line in case you want to enable telemetry during runtime.
ENV NEXT_TELEMETRY_DISABLED 1

# RUN yarn build

# If using npm comment out above and use below instead
RUN npm run build

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production
# Comment the following line in case you want to enable telemetry during runtime.
ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
# Environment Variable Example: COPY --from=builder --chown=nextjs:nodejs /app/.env ./
# App with Database Example: COPY --from=builder --chown=nextjs:nodejs /app/prisma ./prisma/
COPY --from=builder --chown=nextjs:nodejs /app/.next/ ./.next/
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static


USER nextjs

EXPOSE 3000

ENV PORT 3000
# set hostname to localhost
ENV HOSTNAME "0.0.0.0"

CMD ["node", "server.js"]

For the ARM architecture

FROM node:20-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk update && apk add --no-cache libc6-compat python3 make build-base 
WORKDIR /app
# ENV PYTHON /usr/bin/python3
# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi


# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Example: Create a new database
# RUN rm -rf /app/prisma
# RUN npx prisma init --datasource-provider sqlite
# COPY prisma/schema.prisma ./prisma/
# COPY prisma/migrations ./prisma/
# RUN npx prisma migrate dev --name init
# RUN npx prisma generate

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Comment the following line in case you want to enable telemetry during runtime.
ENV NEXT_TELEMETRY_DISABLED 1

# RUN yarn build

# If using npm comment out above and use below instead
RUN npm run build

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production
# Comment the following line in case you want to enable telemetry during runtime.
ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
# Environment Variable Example: COPY --from=builder --chown=nextjs:nodejs /app/.env ./
# App with Database Example: COPY --from=builder --chown=nextjs:nodejs /app/prisma ./prisma/
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static


USER nextjs

EXPOSE 3000

ENV PORT 3000
# set hostname to localhost
ENV HOSTNAME "0.0.0.0"

CMD ["node", "server.js"]

Build the Docker Container

To build the Docker Container all you have to do is go into the Next.js root directory and issue the following command: `sudo docker build --no-cache -t <IMAGE_NAME>

Be sure to replace <IMAGE_NAME> with a name that you can remember. That name is going to be used in the next step.

Also note that the command assumes that you have a file called Dockerfilein the root of your project. If, for some reason, you want to use a file with a different name you can use the -f <FILENAME> flag (e.g.: sudo docker build --no-cache -t <IMAGE_NAME> -f <FILENAME>

Running the Docker Container

After the container is built, you can deploy the container. For that we are going to use the following command: sudo docker run -p 5000:3000 --name <CONTAINER_NAME> <IMAGE_NAME>

-p 5000:3000 - Maps the port 5000 of the host to the port 3000 of the container which is the default Next.js port.
<CONTAINER_NAME> - The name of the container. This is useful for easy reference of the container when issuing commands or when listing containers (e.g.: docker stop <CONTAINER_NAME>; docker ps)` - The name of the image (given in the previous step). This is useful for easy reference of the image.

Next steps

One of the ideas behind docker is to maximize efficiency. In this regard, you could use a Caddy instance in another container and use it as reverse proxy for your docker apps. For instance, you could have 3 different domains, point to the same machine in DNS and configure Caddy to serve the apps on the different ports to the different URLS.

If you would me to write about this leave me a comment :).

Connect with me

If you like this article be sure to leave a comment. That will make my day!

If you want to read other stuff by me you can check out my personal blog.

If you want to connect with me you can send me a message on Twitter/X.

You can also check other stuff that I have going on here

An Introduction to LLM Agents

Gonçalo Alves — Fri, 12 Apr 2024 13:46:05 +0000

Photo by Possessed Photography on Unsplash

Large language models (LLMs) have taken the AI world by storm. But what if these powerful language processors could not just talk, but also think and reason? Enter LLM agents, a new wave of AI assistants poised to transform how we interact with computers.

LLM agents, short for Large Language Model agents, are essentially AI systems built around a large language model (LLM) as their core. This LLM acts like a super-powered understanding and generation engine for human language.

Reasoning Beyond Chatbots

Traditional chatbots are great for answering simple questions. However, LLM agents go a step further. They can process information, analyze situations, and even learn from past interactions. This allows them to engage in more meaningful conversations and tackle complex tasks.

Imagine a customer service agent that understands your frustration and suggests solutions tailored to your specific problem. Or, picture a financial advisor that analyzes your financial goals and market trends to recommend personalized investment strategies. These are just a few examples of the potential applications of LLM agents with their reasoning capabilities.

Limitations of Reasoning

LLM agents are not without their limitations and vary deeply depending on the model that they are based on. Here are some of the limitations that LLM Agents suffer from currently:

Common Sense Reliance: LLMs often rely on the common sense embedded in their training data. This can lead to nonsensical responses in situations requiring real-world understanding.
Limited Causal Reasoning: While they can make basic causal inferences, LLMs struggle with complex cause-and-effect relationships. They might struggle to understand the nuances of human actions and motivations.
Black Box Reasoning: Unlike traditional logic systems, LLM reasoning can be opaque. It's often difficult to understand exactly how an LLM agent arrives at its conclusions, making it challenging to debug errors or ensure reliable decision-making.
Data Biases: LLM agents inherit biases from the data they're trained on. Developers need to be mindful of this and implement measures to mitigate bias in their apps.
Explainability & Trust: As with any AI system, ensuring transparency in the reasoning process of LLM agents is crucial for building trust with users.

Usage of LLM Agents in our apps

However, even in their current state, LLM Agents can revolutionize app development. For instance, we can transform in-app search by understanding the user's intent behind their queries. The agents can not only find the relevant information but also explain it in a clear and concise way.

LLM Agents can enhance the user experience by analyzing user data and preferences and recommending features, content or actions tailored to each user's specific needs. The can also streamline the development process by analyzing code and user interactions to identify potential bugs and suggest improvements, saving time and effort during testing and debugging phases.

Conclusion: A New Era of Intelligent Interaction

LLM agents represent a significant leap forward in human-computer interaction. Their ability to reason and learn paves the way for a future where AI assistants can not just respond to our queries, but also understand them, anticipate our needs, and offer intelligent solutions. With continued research and development, LLM agents have the potential to transform various sectors, from customer service and education to finance and healthcare. The future of intelligent interaction is here, and LLM agents are at the forefront.

Overall, LLM agents hold immense potential to transform the way we develop and interact with apps. By leveraging their reasoning capabilities and natural language processing prowess, developers can create more intuitive, user-friendly, and intelligent applications across various domains.

Connect with me

If you like this article be sure to leave a comment. That will make my day!

If you want to read other stuff by me you can check out my personal blog.

If you want to connect with me you can send me a message on Twitter/X.

You can also check other stuff that I have going on here

The Shocking Discovery of a Backdoor in XZ Utils: A Threat to Internet Systems

Gonçalo Alves — Fri, 05 Apr 2024 17:19:43 +0000

Introduction

A recent alarming discovery has shaken the cybersecurity community. A backdoor was found in XZ Utils, a widely-used compression tool known for its exceptional compression ratios. This backdoor, if left undetected, could have had catastrophic consequences for numerous Linux distributions, potentially compromising the security of countless systems that rely on XZ compression. In this article, we will delve into the details of this shocking revelation, its implications, and the steps to protect yourself from this threat.

Understanding the Backdoor

The backdoor in XZ Utils was first noticed by a developer at Microsoft who was troubleshooting SSH issues on a Debian Linux system. He observed that SSH logins were taking longer than usual, consuming excessive CPU cycles, and generating errors with a memory debugging tool. Through careful analysis, he traced the problem to recent updates made to XZ Utils, which turned out to be a malicious backdoor.

The Extent of the Backdoor

Initially, it was believed that the backdoor was limited to Debian's XZ package. However, further investigation revealed that the backdoor was present in the Upstream XZ repository. This meant that if left undetected, it could have made its way downstream into various Linux distributions, potentially impacting a significant portion of the internet. Due to XZ Utils being open-source software, the backdoor had to be meticulously concealed to avoid detection.

Uncovering the Backdoor

The backdoor was cleverly hidden within binary files in the test folder, rather than in the Upstream code or build tools used by XZ in G. Interestingly, the initial part of the backdoor was encrypted using the XZ Library itself, adding an extra layer of complexity to its analysis. The backdoor employed a chunk-based loading mechanism, where chunks of data were loaded and discarded repeatedly until the final stage was reached.

The Functionality of the Backdoor

Once the backdoor was fully loaded, it injected a binary object into the build process. This binary object, when reverse engineered, revealed that it installed an audit hook into the dynamic linker to resolve symbols and libraries not yet loaded. It then waited for RSA public decrypt PLT to be resolved, modifying its value to point to its own code. This allowed the backdoor to execute system-level remote code, potentially granting unauthorized access to compromised systems.

The Intricate Operation

The discovery of this backdoor shed light on an elaborate hacking operation that had been in progress for years. Multiple individuals seemed to have collaborated to infiltrate the XZ repository. Suspicious accounts made their presence known during this time, constantly criticizing the slow release schedule of XZ Utils. This operation involved subtle manipulation of the repository and the introduction of compromised versions of XZ into Debian's repositories.

Mitigating the Threat

To protect against this backdoor, it is essential to update your system to XZ version 5.6.0 or 5.6.1, if available. If a patched version is not yet accessible, consider downgrading to a version prior to these releases. Even if you are not using a red hat or Debian-based system, it is crucial to remain vigilant, as the full scope of this threat is still being investigated. Additional vulnerabilities may exist, given the extensive manipulation that occurred within the XZ repository.

Conclusion

The discovery of a backdoor in XZ Utils has sent shockwaves through the cybersecurity community. This incident serves as a reminder of the constant vigilance required to maintain the security of open-source software. By promptly updating systems and staying informed about potential threats, we can mitigate the risks posed by such advanced persistent threats. Let us remain proactive in safeguarding our systems and ensuring the integrity of the software we rely on.

Connect with me

If you like this article be sure to leave a comment. That will make my day!

If you want to read other stuff by me you can check out my personal blog.

If you want to connect with me you can send me a message on Twitter/X.

You can also check other stuff that I have going on here