Forem: Alfredo Salzillo

Stop Fighting Your Build Config: Building Modular Libraries the Easy Way

Alfredo Salzillo — Sat, 11 Apr 2026 14:30:31 +0000

If you've ever tried to build a library that exports individual components—think @acme/ui/button or @acme/utils/date—you know the pain. Keeping your package.json exports in sync, managing complex input globs, and maintaining a predictable output structure is a tedious, error-prone manual process.

Enter modular-library: a zero-config utility designed specifically to generate modular outputs for modern bundlers like Vite, Rollup, and Rolldown.

What is a "Modular Library"?

Unlike a monolithic library where you import everything from a single entry point, a modular library is split into small, focused modules.

The standard way:
import { Button } from "my-ui-lib";
Problem: Often requires evaluating the full package entry, even if you only need one component.

The modular way:
import Button from "my-ui-lib/button";
Solution: Loads only the code for the button. It’s faster, cleaner, and ensures perfect tree-shaking for the consumer.

Why use modular-library?

Building this manually usually means fighting your build tool's configuration as your source tree grows. modular-library automates the heavy lifting:

Zero-Config: It handles the mapping from src/ to dist/ automatically.
Predictable Structure: Your output mirrors your input without manual path mapping.
Modern Stack Support: Works out of the box with Vite, Rollup, and Rolldown.
CLI Validation: Includes a CLI tool to verify that your package.json exports actually match your build output.

Quick Start

modular-library requires Node.js 22 or newer.

npm install modular-library

Using it with Vite

Instead of manually defining every entry point in your vite.config.ts, you can use the plugin to handle the glob-based inputs.

// vite.config.ts
import { defineConfig } from "vite";
import modularLibrary from "modular-library/vite";

export default defineConfig({
  plugins: [modularLibrary()],
  build: {
    lib: {
      entry: ["src/**/*.ts"],
      formats: ["es"],
    },
  },
});

Making it Consumable

To let users import your modules easily, add an exports map to your package.json:

{
  "exports": {
    "./*": "./dist/*.js"
  }
}

The "Check" Command

One of the coolest features is the built-in CLI. After you run your build, you can validate that your exports are correct and that no files are missing:

npx modular-library check

This prevents the "broken package" scenario where you ship a library but a subpath import fails because the file wasn't generated correctly.

Customizing your Output

If you need to change how the paths are generated (for example, putting everything in a modules/\ folder), the plugin provides a simple transformOutputPath\ hook:

plugins: [
  modularLibrary({
    relative: "src/", // The base path to strip
    transformOutputPath: (path) => \`modules/\${path}\`,
  }),
],

Conclusion

The goal of modular-library is to let you focus on writing code instead of managing build artifacts. By automating the sync between your source files and your distribution targets, it makes maintaining a high-performance, tree-shakeable library accessible to everyone.

Check out the source on GitHub and start modularizing your workflow!

Found this helpful? Follow me for more insights on modern JavaScript tooling and library development!

Building a Generative Art Game with React: Blobs - Dead or Alive

Alfredo Salzillo — Sat, 07 Feb 2026 12:03:56 +0000

🎨 Blobs: Dead or Alive?

Have you ever looked at a random SVG shape and thought, "That looks like it has a personality"?

That’s exactly how Blobs - Dead or Alive was born. What started as a generative art experiment turned into a fully functional skill game where you hunt for specific, procedurally generated "blobs" before the timer runs out.

In this post, we’ll look at the technical "DNA" of these blobs and how React powers the game engine.

🧬 The Secret Sauce: Generative Anatomy

The most impressive part of Alfredo Salzillo's project is the Generative Blob Engine. Every blob is rendered on the fly using SVGs.

1. The Geometry

A blob isn't just a circle; it’s a set of random points connected via splines. By calculating points around a center and adding a "randomness factor" to their distance from the origin, we get that organic, wobbly shape.

2. The Traits

The generator assigns specific traits to each instance:

Eyes: Varies between single (cyclops) and double.
Color Palette: Randomized "cute" pastels.
Animations: Blobs use CSS transitions to "look around" or shake when clicked.

🛠️ The Tech Stack

The project leverages a modern web stack to ensure performance:

React & TypeScript: For predictable UI state and type safety.
SCSS: To handle the complex animations and transitions.
Capacitor: The repository includes configurations for Android, allowing the game to live on the Google Play Store.

Technical Insight: Managing dozens of unique, animated SVGs in React can be taxing. This project handles it efficiently by isolating the "Blob" component and using optimized state updates to prevent unnecessary re-renders of the entire grid.

🎮 Play it Yourself!

The project is fully open-source. Whether you want to learn how to handle SVG manipulation in React or just want to challenge your eyes, check it out:

GitHub Repository: alfredosalzillo/blobs-dead-or-alive
Live Demo: Play on the Web

alfredosalzillo / blobs-dead-or-alive

A Blobs game.

Blobs Dead or Alive

A fast-paced "Find the Blob" game built with React, Next.js, and generative art.

🎮 How to Play

Try it on the Web.

The goal is simple: find the "Wanted" blob among a crowd of similar-looking blobs before time runs out!

✨ Features

Generative Art: Every blob is uniquely generated with different shapes, colors, and features.
Rush Mode: Test your speed in an endless survival mode.
Campaign Mode: Progress through increasingly difficult stages (Coming Soon).
Progressive Web App (PWA): Install it on your device for an app-like experience.
Cross-Platform: Available on Web and Android (via TWA).

🛠️ Tech Stack

Framework: Next.js 15+ (App Router)
Library: React 19
Styling: SASS
Linter/Formatter: Biome
PWA: @ducanh2912/next-pwa
Backend/Analytics: Firebase

🚀 Getting Started

Prerequisites

Node.js 18+
npm or yarn

Installation

Clone the repository:

git clone https://github.com/alfredosalzillo/blobs-dead-or-alive.git
cd blobs-dead-or-alive

Install dependencies:

…

View on GitHub

What's Next?

Building characters out of math is a great way to learn SVG paths and React animation. What would you add to these blobs? Hats? Mustaches?

Let me know in the comments!

[Boost]

Alfredo Salzillo — Mon, 19 Jan 2026 14:36:12 +0000

Embedding Dynamic Content with remark-react-liquid-tag

Alfredo Salzillo ・ Mar 18 '25

#react #markdown #typescript #webdev

[Boost]

Alfredo Salzillo — Sat, 16 Aug 2025 10:55:11 +0000

Redis AI Challenge: Beyond the Cache

Alfredo Salzillo

Aug 10 '25

Redis Pixel War

#redischallenge #devchallenge #database #ai

Comments

2 min read

[Boost]

Alfredo Salzillo — Wed, 13 Aug 2025 07:06:12 +0000

Redis AI Challenge: Beyond the Cache

Alfredo Salzillo

Aug 10 '25

Redis Pixel War

#redischallenge #devchallenge #database #ai

Comments

2 min read

[Boost]

Alfredo Salzillo — Sun, 10 Aug 2025 14:53:24 +0000

Redis AI Challenge: Beyond the Cache

Alfredo Salzillo

Aug 10 '25

Redis Pixel War

#redischallenge #devchallenge #database #ai

Comments

2 min read

Redis Pixel War

Alfredo Salzillo — Sun, 10 Aug 2025 13:28:55 +0000

This is a submission for the Redis AI Challenge: Beyond the Cache.

What I Built

Redis Pixel War is a live, collaborative “pixel war” built on Next.js where anyone can paint single pixels on a 100×100 canvas. It showcases Redis 8 as a multi‑model, real‑time platform rather than just a cache. Every pixel change is persisted, broadcast to all connected clients, and recorded for history and stats.

Highlights:

Real‑time updates to all clients via Server‑Sent Events (SSE) powered by Redis Pub/Sub.
Durable primary storage of the canvas in Redis Hashes.
Presence tracking (who’s online) with Redis Sorted Sets and a Users Hash.
Audit/history of changes with a Redis Stream to enable time‑travel/replay or analytics.
Leaderboards and per‑user stats computed from Redis data.

Stack: Next.js (App Router), TypeScript, MUI, Redis 8 (node-redis).

Demo

Remote app: https://redis-challenge.vercel.app/
Screenshots:

Code

alfredosalzillo / redis-challenge

Redis Pixel War

A live, collaborative pixel war showcasing Redis as a multi‑model platform:

Primary storage: Redis Hash stores pixel colors.
Real‑time: Redis Pub/Sub broadcasts pixel updates consumed by Server‑Sent Events (SSE).
History/Audit: Each update is appended to a Redis Stream.
Presence: Redis ZSET + HASH track who is online and their display names.

Built with Next.js (App Router) and MUI.

Getting Started

Prerequisites:
- Node.js 18+
- A Redis instance (local or hosted). Set REDIS_URL env var like redis://localhost:6379.
Install dependencies:
- npm install
Run the dev server:
- REDIS_URL=redis://localhost:6379 npm run dev
Open the app:
- http://localhost:3000 (the game runs on the home page)

How it works

Storage
- Key canvas:colors (Hash): maps pixel index to hex color. The pixel index is computed as idx = y * WIDTH + x.
- Key canvas:owners (Hash): optional mapping from pixel index to the userId who last painted it.
Real‑time updates
- Pub/Sub channel canvas:updates…

View on GitHub

How I Used Redis 8 (Beyond Caching)

Redis is the system of record for the app and is used across multiple data models:

1) Primary storage (Hash)

Key canvas:colors stores pixel color by index: HSET canvas:colors <idx> <#hex>.
Key canvas:owners optionally stores the user who last painted each pixel.
Bootstrap endpoint GET /api/bootstrap uses HSCAN to stream initial colors to the client.

2) Real‑time messaging (Pub/Sub + SSE)

Channel canvas:updates publishes every pixel change as JSON { x, y, idx, color, userId, at }.
Server subscribes and relays messages to browsers via SSE at GET /api/stream with event type pixel.
A lightweight presence SSE event nudges clients to refresh presence periodically.

3) Presence (ZSET + HASH)

ZSET presence:online stores last‑seen timestamps (score = ms since epoch, member = userId).
HASH presence:users maps userId -> display name.
POST /api/presence/heartbeat updates ZSET and (optionally) the name in HASH.
GET /api/users/online prunes stale users (older than 30s) and returns the current online list.

4) History/Audit (Stream)

Stream stream:canvas receives an entry per pixel change (x, y, idx, color, userId, at).
This enables later analysis, replay, or moderation if needed.

5) Stats/Leaderboards

GET /api/users/top calculates top painters by scanning canvas:owners and enriching names from presence:users.
GET /api/users/me?id=... returns per‑user counts and board percentage.

Why Redis 8?

Combines multiple capabilities (Hashes, Pub/Sub, Streams, Sorted Sets) in one low‑latency system.
Simplifies architecture: no separate DB, broker, and metrics store — Redis handles them all.
Fast HSCAN and pub/sub deliver a snappy UX even as the board grows.

Architecture

Frontend: Next.js (App Router) + MUI; HTML5 Canvas for pixel rendering.
Backend: Next.js API routes.
Realtime: SSE endpoint subscribes to Redis Pub/Sub.
Data: Redis 8 as primary data store and event bus.

Credits

Solo project for the Redis AI Challenge.

Last updated: 2025-08-10.

[Boost]

Alfredo Salzillo — Wed, 19 Mar 2025 06:03:49 +0000

Level Up Your Markdown: Embedding Dynamic Content with remark-react-liquid-tag

Alfredo Salzillo ・ Mar 18

#react #markdown #typescript #webdev

Embedding Dynamic Content with remark-react-liquid-tag

Alfredo Salzillo — Tue, 18 Mar 2025 14:48:59 +0000

In the world of web development, Markdown has become a ubiquitous language for creating content. Its simplicity and readability make it a favorite for everything from documentation to blog posts. However, sometimes static Markdown isn't enough. You might want to embed dynamic content like videos, social media posts, or interactive elements directly within your Markdown.

Enter remark-react-liquid-tag, a clever little plugin that bridges the gap between static Markdown and dynamic React components. Inspired by the popular dev.to platform, this plugin allows you to leverage the power of "liquid tags" within your Markdown, bringing a new level of interactivity to your content.

The Inspiration: Liquid Tags on `dev.to`

If you've ever written or read an article on dev.to, you might have noticed the neat way they embed content from various platforms. They achieve this using liquid tags – special elements enclosed in {% %} syntax. These tags act as placeholders that are later replaced with dynamic content.

remark-react-liquid-tag brings this same concept to your React-based Markdown rendering pipeline. It allows you to define custom tags that, when processed, will render specific React components, effectively embedding dynamic functionality within your static Markdown.

How it Works: Bridging Markdown and React

This plugin is built as an extension for remark, a powerful Markdown processor. When used in conjunction with react-remark (a library for rendering Markdown as React components), remark-react-liquid-tag parses your Markdown for these special liquid tags.

Upon encountering a tag, the plugin extracts the tag's type, any associated URL, options, and configuration. This information is then passed as props to a designated React component, which is responsible for rendering the dynamic content.

Getting Started: Installation and Basic Usage

Integrating remark-react-liquid-tag into your project is straightforward. If you're already using react-remark, the setup is particularly smooth.

First, install the plugin using npm:

npm install remark-react-liquid-tag

Next, in your React component where you're using react-remark, you'll need to include the plugin in your remarkPlugins array. You'll also need to provide a React component that will handle the rendering of your liquid tags.

Here's a basic example based on the README:

import React, { Fragment } from 'react';
import { useRemark } from 'react-remark';
import remarkGemoji from 'remark-gemoji';
import rehypeSlug from 'rehype-slug';
import rehypeAutoLinkHeadings from 'rehype-autolink-headings';
import reactLiquidTag, { RemarkReactLiquidTagProps } from 'remark-react-liquid-tag';

const LiquidTag: React.FC<RemarkReactLiquidTagProps> = (props) => {
  switch (props.type) {
    case 'youtube':
      return (
        <iframe
          width="560"
          height="315"
          src={`https://www.youtube.com/embed/${props.url}`}
          frameBorder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
        />
      );
    default:
      return <Fragment />;
  }
}

// ...

<Remark
  remarkPlugins={[remarkGemoji, [reactLiquidTag, { component: LiquidTag }]]}
  remarkToRehypeOptions={{ allowDangerousHtml: true }}
  rehypePlugins={[rehypeSlug, rehypeAutoLinkHeadings]}
>
  {`
    This is youtube video:
    {% youtube dQw4w9WgXcQ %}

    This is a unsupported tag:
    {% unsupported_tag %}
  `}
</Remark>;

// ...

Customizing Your Liquid Tags

The beauty of remark-react-liquid-tag lies in its flexibility. You can define your own custom liquid tags and the corresponding React components that will render them.

The plugin offers an options object where you can configure its behavior:

component: This option lets you specify the React component that will handle the rendering of all your liquid tags. This component receives props like type, url, options (for additional parameters within the tag), and config (for type-specific configurations).
config: This option allows you to provide specific configurations for different types of liquid tags. This can be useful for passing in API keys or other settings.

For instance, you could define a liquid tag for embedding tweets:

Check out this tweet: {% tweet 1234567890 %}

And then, within your custom component, you would handle the tweet type by fetching and rendering the tweet using a Twitter embedding library.

Benefits and Use Cases

remark-react-liquid-tag offers several advantages:

Enhanced Markdown Functionality: It extends the capabilities of Markdown, allowing you to embed dynamic content without resorting to raw HTML.
Clean Separation of Concerns: Your Markdown content remains focused on the text, while the rendering logic for dynamic elements resides in your React components.
Reusability: The React components you create for rendering liquid tags can be reused across your application.
Inspired by a Proven Solution: The concept is based on the successful implementation of liquid tags on dev.to, suggesting its effectiveness and user-friendliness.

This plugin is particularly useful for:

Blog platforms: Embedding videos, social media posts, code sandboxes, and other interactive elements.
Documentation sites: Integrating live demos, interactive tutorials, and API explorers.
Content management systems: Providing content creators with an easy way to embed rich media without needing to write complex code.

Conclusion

remark-react-liquid-tag is a powerful and elegant solution for bringing dynamic content to your Markdown-driven React applications. By embracing the concept of liquid tags, it offers a clean, intuitive, and extensible way to embed interactive elements and enhance the richness of your content. If you're looking to level up your Markdown and provide a more engaging experience for your users, this plugin is definitely worth exploring.

alfredosalzillo / remark-react-liquid-tag

A remark plugin that allows the usage of liquid tags.

remark-react-liquid-tag

This is a remark plugin that allows the usage of liquid tags.

This idea came from the usage of liquid tags in dev.to (DEV COMMUNITY) platform for embedding services in markdowns This documented page shows their idea behind liquid tags and the tags available.

Liquid tags

Liquid tags are special elements to use in markdown. They are custom embeds that are added via a {% %} syntax. Liquid is a templating language developed by Shopify.

Installation

npm install remark-react-liquid-tag

Usage

Usage with react-remark

import React, { Fragment } from 'react';
import { useRemark } from 'react-remark';
import remarkGemoji from 'remark-gemoji';
import rehypeSlug from 'rehype-slug';
import rehypeAutoLinkHeadings from 'rehype-autolink-headings';
import reactLiquidTag, { RemarkReactLiquidTagProps } from 'remark-react-liquid-tag';
const LiquidTag: React.FC<RemarkReactLiquidTagProps> = (props) => {
  switch (props.type) {
    case 'youtube':
      return

…

View on GitHub

The React `useInsertionEffect` Hook

Alfredo Salzillo — Sun, 06 Oct 2024 09:10:19 +0000

Understanding and Using React's `useInsertionEffect` Hook

Introduction

React's useInsertionEffect hook is a specialized version of useEffect that guarantees its side effects will run before any other effect in the same component. This is particularly useful for DOM operations or third-party library integrations that rely on the DOM being fully rendered before execution.

When to Use `useInsertionEffect`

DOM Operations

When you need to manipulate the DOM directly after the component is rendered, such as setting focus, scrolling to a specific element, or attaching event listeners.

Third-Party Libraries

If a library requires the DOM to be ready before its functions can be called, useInsertionEffect ensures it's executed at the right time.

Layout Effects

For effects that depend on the layout of the component, like measuring element dimensions or calculating positions.

Example: Setting Focus on a Field

import { useRef, useInsertionEffect } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  useInsertionEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    <div>
      <input ref={inputRef} type="text" />
    </div>
  );
}

In this example, useInsertionEffect is used to ensure that the input element is focused as soon as it's rendered. This guarantees that the user can start typing immediately.

Example: Adding Dynamic Style Rules

import { useInsertionEffect } from 'react';

function MyComponent() {
  useInsertionEffect(() => {
    const style = document.createElement('style');
    style.textContent = `
      .my-custom-class {
        color: red;
        font-weight: bold;
      }
    `;
    document.head.appendChild(style);

    return () => {
      style.remove();
    };
  }, []);

  return (
    <div className="my-custom-class">
      This text will have red and bold styles.
    </div>
  );
}

In this example, useInsertionEffect is used to dynamically add custom style rules to the document head, ensuring that they are applied before any other effects in the component.

Key Points to Remember

useInsertionEffect is similar to useEffect but with a specific timing guarantee.
It's often used for DOM operations or third-party library integrations that require the DOM to be ready.
It's important to use useInsertionEffect judiciously, as excessive use can potentially impact performance.
Consider using useLayoutEffect if you need effects to run synchronously after the layout is complete.

Conclusion

React's useInsertionEffect hook is a powerful tool for ensuring that side effects are executed at the right time, particularly when dealing with DOM operations or third-party libraries. By understanding its purpose and usage, you can create more reliable and performant React components.

Introduction to Sustainable Web Development

Alfredo Salzillo — Mon, 09 Jan 2023 03:18:00 +0000

Sustainable Web Development

Sustainable web development is the practice of building and maintaining websites in a way that is environmentally and socially responsible. This includes using resources efficiently, reducing waste, and minimizing negative impacts on the environment and society.

Ways to Promote Sustainability in Web Development

Use green hosting:

Choose a hosting provider that uses renewable energy sources and has a commitment to sustainability.
Optimize website performance: Improve the speed and efficiency of a website to reduce energy consumption and carbon emissions.
Recycle and reuse code: Save time and resources by reusing and repurposing code instead of starting from scratch for each project.
Use open source software: Open source software is freely available and can be modified and distributed by anyone.
Promote sustainability on client websites: Educate clients about the importance of sustainability and encourage them to adopt eco-friendly practices on their own websites.

Benefits of Sustainable Web Development

Sustainable web development is not only good for the environment, but it can also benefit businesses and organizations by reducing costs, improving efficiency, and enhancing their reputation. By adopting sustainable practices, web developers can play a key role in building a more sustainable future for the internet.

Organizations and tools that focus on promoting sustainability

There are several organizations and tools that focus on promoting sustainability in the tech industry and provide resources and guidelines for web developers and website owners looking to make their work more environmentally friendly.

One such organization is the Green Web Foundation (https://greenwebfoundation.org/). The Green Web Foundation is a nonprofit organization that works to identify and promote the use of green web hosting providers, as well as provide resources and tools for web developers and website owners to make their websites more energy efficient and environmentally friendly.

Another organization is the Sustainable Websites Initiative (https://sustainablewebsites.org/), a project of the Center for Sustainable Communication. The initiative aims to promote sustainable practices in web development and design, and provides resources and guidelines for creating eco-friendly websites. They also offer a certification program for websites that meet their sustainability standards.

In addition to these organizations, the website https://www.websitecarbon.com/ offers a tool for measuring and reducing the carbon footprint of websites. By using this tool, web developers and website owners can calculate the carbon emissions associated with their website and take steps to reduce them.

The useTransition hook - React 17.0 beta features

Alfredo Salzillo — Sun, 08 Jan 2023 22:50:00 +0000

Introduction to the useTransition Hook

The useTransition hook is a new addition to the React family of hooks that allows developers to perform animations while waiting for an update to be committed. It is currently in beta and is subject to change, but it is a useful tool for adding polish to your React applications.

To use the useTransition hook, you will first need to make sure that you are using a version of React that includes it. As of the time of writing, the current version of React is 17.0.0-beta.3, which includes the useTransition hook.

Once you have a compatible version of React, you can use the useTransition hook by importing it from the react package.

import { useTransition } from 'react';

The useTransition hook takes two arguments: an item that you want to transition, and a configuration object that specifies the details of the transition.

Here is an example of using the useTransition hook to transition the color of a div element:

function MyComponent() {
  const [color, setColor] = useState('red');
  const [startTransition, isPending] = useTransition({
    timeoutMs: 3000,
  });

  function handleClick() {
    startTransition(() => {
      setColor('blue');
    });
  }

  return (
    <div style={{ color }}>
      <button onClick={handleClick}>Change Color</button>
    </div>
  );
}

In this example, when the button is clicked, the handleClick function is called, which triggers the startTransition function. The startTransition function takes a function as an argument, which is the update that you want to perform. In this case, the update is to change the color of the div element to blue.

The useTransition hook returns a tuple with two values: a startTransition function, and a boolean value isPending that indicates whether a transition is currently in progress. You can use the isPending value to apply styles or behaviors to your component while the transition is happening.

For example, you could use the isPending value to apply a spinner or loading indicator while the transition is in progress:

function MyComponent() {
  const [color, setColor] = useState('red');
  const [startTransition, isPending] = useTransition({
    timeoutMs: 3000,
  });

  function handleClick() {
    startTransition(() => {
      setColor('blue');
    });
  }

  return (
    <div style={{ color }}>
      {isPending ? (
        <div>Loading...</div>
      ) : (
        <button onClick={handleClick}>Change Color</button>
      )}
    </div>
  );
}

The useTransition hook also supports a number of configuration options that allow you to customize the behavior of the transition. These options can be passed in the second argument to the useTransition hook.

For example, you can use the timeoutMs option to specify the length of time that the transition should take. You can also use the maxDurationMs option to specify the maximum duration of the transition, in case it takes longer than expected.

Here is an example of using the maxDurationMs option to ensure that the transition does not take longer than 500 milliseconds:

const [startTransition, isPending] = useTransition({
  timeoutMs: 3000,
  maxDurationMs: 500,
});

Another option that you can use is the suspense option, which allows you to specify a React Suspense component as the parent of your component. When the useTransition hook is in a Suspense component, it will cause the component to suspend rendering until the transition is complete. This can be useful for optimizing the performance of your application by avoiding rendering expensive components until they are needed.

Here is an example of using the suspense option to wrap a component in a Suspense component:

const [startTransition, isPending] = useTransition({
  timeoutMs: 3000,
  suspense: <MySuspenseComponent />,
});

There are many other options and features available with the useTransition hook, such as the ability to cancel or skip transitions, or to specify different styles for different stages of the transition. Be sure to check out the React documentation for more information on how to use these features.

Conclusion

In summary, the useTransition hook is a powerful tool for adding transitions and animations to your React components. It is easy to use and provides a lot of flexibility and customization options. If you are looking to add some polish to your React application, consider giving the useTransition hook a try.

Forem: Alfredo Salzillo

Stop Fighting Your Build Config: Building Modular Libraries the Easy Way

What is a "Modular Library"?

Why use modular-library?

Quick Start

Using it with Vite

Making it Consumable

The "Check" Command

Customizing your Output

Conclusion

Building a Generative Art Game with React: Blobs - Dead or Alive

🎨 Blobs: Dead or Alive?

🧬 The Secret Sauce: Generative Anatomy

1. The Geometry

2. The Traits

🛠️ The Tech Stack

🎮 Play it Yourself!

alfredosalzillo / blobs-dead-or-alive

A Blobs game.

Blobs Dead or Alive

🎮 How to Play

✨ Features

🛠️ Tech Stack

🚀 Getting Started

Prerequisites

Installation

What's Next?

[Boost]

Embedding Dynamic Content with remark-react-liquid-tag

Alfredo Salzillo ・ Mar 18 '25

[Boost]

Redis Pixel War

[Boost]

Redis Pixel War

[Boost]

Redis Pixel War

Redis Pixel War

What I Built

Demo

Code

alfredosalzillo / redis-challenge

Redis Pixel War

Getting Started

How it works

How I Used Redis 8 (Beyond Caching)

Architecture

Credits

[Boost]

Level Up Your Markdown: Embedding Dynamic Content with remark-react-liquid-tag

Alfredo Salzillo ・ Mar 18

Embedding Dynamic Content with remark-react-liquid-tag

The Inspiration: Liquid Tags on dev.to

How it Works: Bridging Markdown and React

Getting Started: Installation and Basic Usage

Customizing Your Liquid Tags

Benefits and Use Cases

Conclusion

alfredosalzillo / remark-react-liquid-tag

A remark plugin that allows the usage of liquid tags.

remark-react-liquid-tag

Liquid tags

Installation

Usage

The React `useInsertionEffect` Hook

Understanding and Using React's useInsertionEffect Hook

Introduction

When to Use useInsertionEffect

DOM Operations

Third-Party Libraries

Layout Effects

Example: Setting Focus on a Field

Example: Adding Dynamic Style Rules

Key Points to Remember

Conclusion

Introduction to Sustainable Web Development

Sustainable Web Development

Ways to Promote Sustainability in Web Development

Benefits of Sustainable Web Development

Organizations and tools that focus on promoting sustainability

The useTransition hook - React 17.0 beta features

The Inspiration: Liquid Tags on `dev.to`

Understanding and Using React's `useInsertionEffect` Hook

When to Use `useInsertionEffect`