Forem: Alfredo Bonilla

How to Deploy an Eliza AI Agent on Railway

Alfredo Bonilla — Fri, 24 Jan 2025 04:51:27 +0000

If you’re looking to quickly deploy Eliza Starter on Railway, this guide will walk you through the process step by step. Let’s get started!

What is Eliza Starter?

Eliza Starter is a lightweight open-source framework designed to help developers build conversational AI agents quickly and efficiently. It provides all the necessary tools and structure to kickstart projects that integrate AI-driven dialogue systems, making it a great choice for AI enthusiasts and developers.

What is Railway?

Railway is a modern cloud platform that simplifies deploying and managing applications. It offers a seamless developer experience by automating much of the infrastructure setup, allowing you to focus on writing and deploying code with minimal hassle. With Railway, you can deploy projects directly from GitHub and manage environment variables effortlessly.

What You Need

A GitHub account with access to the Eliza Starter repository.
A Railway account (sign up for free at Railway).

Steps to Deploy

1. Clone the Eliza Starter Repository

Start by cloning the Eliza Starter repository. You’ll use this as the base for your project.

2. Create a New Railway Instance

Go to Railway and create a new instance:

Log in to your Railway account.
Click New Project.

3. Connect Your GitHub Repository

Once you’ve created a new project:

Select Deploy from GitHub.
Choose your GitHub account and connect the Eliza Starter repository.

4. Configure Environment Variables

Open your project in Railway.
Navigate to the Variables tab.
Click on Raw Editor to open the editor for environment variables.
Copy the .env file from the Eliza Starter repository into the Raw Editor.
Add or modify the following key-value pair:

   DAEMON_PROCESS=true

This disables the chat functionality in the terminal to prevent build errors.

5. Deploy

Once the variables are set:

Click Deploy to build and deploy your project.

Why Set `DAEMON_PROCESS=true`?

Cloud platforms like Railway do not support interactive terminals. This means that any processes requiring user input or terminal interaction during runtime can cause the deployment to fail. Setting DAEMON_PROCESS=true disables the interactive chat functionality in the terminal, ensuring a smooth and error-free build process.

That’s It!

Your Eliza Starter project should now be live on Railway. If you encounter any issues, refer to the Eliza Starter GitHub repository for troubleshooting tips.

Happy coding! 🚀

TailwindCSS: A Game-Changer for AI-Driven Code Generation and Design Systems

Alfredo Bonilla — Sun, 29 Sep 2024 01:34:00 +0000

In today's fast-paced world of software development, AI is making waves by revolutionizing how we write and optimize code. Among the various tools at our disposal, TailwindCSS has emerged as a standout framework, particularly when it comes to AI-assisted coding and creating comprehensive design systems. Let's dive into why TailwindCSS is such a perfect fit for AI-driven development, how it's boosting product innovation and efficiency, and how AI agents can leverage it to create entire design systems from scratch.

Why TailwindCSS and AI are a Match Made in Heaven

1. Utility-First Approach: Keeping It Simple

TailwindCSS's utility-first philosophy is like a playground for AI. Instead of crafting intricate CSS rules from scratch, AI can tap into Tailwind's vast library of pre-defined classes. This means AI can focus on the big picture of design logic rather than getting bogged down in styling minutiae. It's like giving AI a set of Lego blocks to build with, rather than asking it to mold each brick from clay.

2. Predictable Class Names: Speaking the Same Language

The consistent and intuitive class naming in TailwindCSS is music to AI's ears. With predictable class names, AI models can quickly learn and apply styles accurately. It's like teaching AI a new language where every word makes logical sense – no more fumbling around with cryptic class names or extensive trial-and-error.

3. Readability and Maintainability: Keeping It Clean

By embedding styles directly in HTML through class names, TailwindCSS creates code that's a breeze for AI to parse and understand. It's like having a clear, organized workspace – AI can see the layout and styling at a glance, leading to more coherent and maintainable code structures. The result? Code that's not just functional, but also easy on the eyes for human developers.

Supercharging Product Development with TailwindCSS and AI

Rapid Prototyping: From Idea to Interface in No Time

Imagine being able to whip up responsive, good-looking interfaces in the blink of an eye. That's what you get when you combine TailwindCSS with AI. This dynamic duo allows for lightning-fast prototyping and iteration, helping products evolve quickly to meet changing market demands.

Tools like Cursor are taking this to the next level. Cursor is an AI-powered code editor that integrates seamlessly with frameworks like TailwindCSS, allowing developers to generate code snippets, refactor existing code, and even get explanations about complex codebases. When used in conjunction with TailwindCSS, Cursor can significantly speed up the development process, suggesting appropriate utility classes and even entire component structures.

Consistency is Key

With TailwindCSS, you're essentially giving AI a unified design language to work with. The result? Products that look polished and cohesive across all components and pages. This consistency not only makes for a better user experience but also makes life easier for development teams working on different parts of a project.

Less Overhead, More Innovation

By cutting down on the need for custom CSS, TailwindCSS frees up AI (and human developers) to focus on the bigger picture. Instead of getting tangled up in repetitive styling tasks, teams can channel their energy into the strategic aspects of product innovation. It's about working smarter, not harder.

Scaling Up with Ease

Whether you're working on a small side project or a massive enterprise application, TailwindCSS has got you covered. Its scalability means AI can adapt to projects of all sizes, customizing utility classes as needed. It's like having a Swiss Army knife that can handle any job you throw at it.

Creating Complete Design Systems with AI and TailwindCSS

One of the most exciting developments in the intersection of AI and TailwindCSS is the ability to generate entire design systems directly in code. Here's how AI agents can leverage TailwindCSS to create comprehensive design systems:

1. Defining Design Tokens

AI agents can start by defining design tokens - the fundamental building blocks of a design system. Using TailwindCSS's configuration file, AI can set up custom colors, typography, spacing, and other design variables. For example:

module.exports = {
  theme: {
    colors: {
      primary: '#0047AB',
      secondary: '#6CB4EE',
      // ... more colors
    },
    fontFamily: {
      sans: ['Roboto', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    spacing: {
      sm: '0.5rem',
      md: '1rem',
      lg: '1.5rem',
      // ... more spacing values
    },
  },
}

2. Generating Component Libraries

With design tokens in place, AI can then generate a library of reusable components. These could range from simple buttons and form elements to more complex components like navigation bars or card layouts. Each component would be created using TailwindCSS utility classes, ensuring consistency with the overall design system. For instance:

<!-- AI-generated button component -->
<button class="bg-primary text-white font-sans py-sm px-md rounded hover:bg-secondary transition duration-300">
  Click me
</button>

This is where tools like v0.dev shine. v0.dev is an AI-powered design tool that can generate entire web components and pages using natural language prompts. It leverages the power of TailwindCSS to create visually appealing and responsive designs quickly. By integrating v0.dev into your workflow, you can rapidly prototype and iterate on your design system components, all while maintaining the consistency and efficiency that TailwindCSS provides.

3. Creating Layout Systems

AI agents can develop flexible layout systems using TailwindCSS's grid and flexbox utilities. This could include creating responsive layouts that adapt to different screen sizes, as well as defining standard page templates and sections.

4. Documenting the Design System

As the AI generates components and layouts, it can simultaneously create documentation. This could be in the form of markdown files or even a simple website built with TailwindCSS, showcasing each component, its usage, and any variants.

5. Generating Theme Variations

AI can create multiple theme variations based on the initial design system. By adjusting the TailwindCSS configuration, it can quickly generate light/dark modes or even entirely different color schemes for different brand identities.

6. Ensuring Accessibility

AI agents can be programmed to prioritize accessibility, using TailwindCSS classes that ensure proper color contrast, font sizes, and interactive element states that meet WCAG guidelines.

7. Optimizing for Performance

Using TailwindCSS's built-in purge feature, AI can ensure that only the used utility classes are included in the final CSS, resulting in a lean and performant design system.

The Power of AI-Generated Design Systems

By leveraging AI to create design systems with TailwindCSS, development teams can:

Save Time: What might take weeks for a human team can be accomplished in hours by AI.
Maintain Consistency: AI-generated systems ensure perfect consistency across all components and pages.
Iterate Quickly: Need to update the entire system? AI can regenerate it with new parameters in minutes.
Scale Effortlessly: As project requirements grow, AI can expand the design system accordingly.

Wrapping Up

TailwindCSS is proving to be a powerhouse when it comes to AI-driven code generation and design system creation. Its utility-first approach, consistent naming conventions, and focus on readability play right into AI's strengths, leading to more efficient and accurate code production. As AI continues to reshape how we develop software, frameworks like TailwindCSS will be key players in driving innovation and delivering top-notch products.

The ability to generate entire design systems using AI and TailwindCSS opens up exciting possibilities for rapid prototyping, consistent brand implementation, and scalable design across large projects. It's a glimpse into a future where the line between design and development becomes increasingly blurred, with AI acting as the bridge between creative vision and technical implementation.

Tools like Cursor and v0.dev are at the forefront of this revolution, showcasing how AI can work hand-in-hand with frameworks like TailwindCSS to supercharge the development process. As these technologies continue to evolve, we can expect even more seamless integration between AI-driven coding assistants, design tools, and utility-first CSS frameworks.

So, whether you're an AI enthusiast, a developer looking to streamline your workflow, or a product manager aiming for faster time-to-market, it might be time to give TailwindCSS and AI-driven design systems a closer look. Who knows? It could be the secret weapon your team needs to take your development process to the next level and stay ahead in the fast-paced world of digital product creation.

7 things I learned from DevRel Engineers 🥑 at DevCon

Alfredo Bonilla — Sat, 15 Oct 2022 18:10:17 +0000

Web3 business model requires adoption which means it needs a constant flow of builders, new features, users and feedback.

Builders is the key word and the best way to get builders aware of a project is through well designed resources such as exciting hackathons, tools, practical education materials, live events and community support. Here is where Developer Relationships comes into play.

One of the most insightful moments for me during Dev Con VI at Bogotá was the full-of-alphas DevRel Workshop hosted by Sunny Jaycer (DevRel at SuperFluid) and a panel formed by:

Sam Flamini @ Superfluid
Albert Hu @ Alchemy
Emily Lin @ Truffle
Yaz Khouri @ Celestia
Steph Orpilla @ Polygon
Francesco Andreoli @ Metamask

Here is what I learned.

1. What DevRel is not

DevRel is not sales.
DevRel is not marketing.
DevRel is not Engineering.

Where you put a DevRel will determine their success so it’s important to understand the role.

2. DevRel main goal

Your main goal as DevRel is the product success and you will achieve it having a lot of empathy with other developers and creating resources that are very accesible.

The developer is the main character of the story and there are plenty of ways to support their journey.

3. DevRel is actually an umbrella term

There are different focus areas for DevRel Engineers including but not limited to:

Evangelism
- Talk in public about the project, company or protocol.
- Create educational resources for users and builders.
- Engage the communities on-line and off-line.
Advocacy
- Support the community and get feedback from it.
- Serve as a bridge between the outside community and the internal team of the project.
- Encourage contributors and build tools and processes to effectively support them.
Documentation
- Create written documentation for the project.
- Maintain current documentation.
- Keep tack of new features or updates delivered by the internal team.
Community
- Moderate online community channels.
- Provide support at events such as hackathons.
- Keep track of high value members of the community and help the to succeed.

Content will play a key part of the role indistinctly of your focus area so you will need to develop a strategy effectively impact your community.

4. The DevRel Playbook

Creating content for developers is tricky. Here are some useful ideas to figure out how to do it right.

Create great content for your community and your product will thrive.
Your personal brand is important but you are advocating for your platform and the brand. Your goal is help everyone to succeed.
Think about developer first, product second. Make others feel they are not alone when using your product.
Educate people about how to look for relevant material.
Some content is more volatile than other. Things change fast in Web3.
Written content is updatable but video is not. You’ll probably want to create videos about more ever-green general ideas and text for updates or release notes.
Be creative! you can mix art with technical content. You could do a web3 rap for example.
Make useful stuff. Think about something you would love to have in the past but you didn’t.
When creating content think about use cases. Don’t repeat the documentation but add value to it by exploring new use cases.
Show how to integrate your product with other products. Web3 is about composability. Most of the time developers will need to use several tools or platforms. “Wagmi-fy” your content.
Be transparent about your own developer journey. Build in public (your community will love it).
Consistency is the key.

5. Developer Personas and The Orbit Model

As DevRel you should be clear about who you are talking to and when. The Orbit model (presented by Yaz Khoury) is an awesome tool for defining Developer Personas.

According to Khoury there are 4 community orbits around a project. Each of these orbits will require a different strategy. The closer the orbit is, the more mature the person is in their journey with your product.

The Casually Interested: haven’t explored the project in depth but is curious about it. Requires help and motivation getting onboard and understanding the project better.
The Builder: knows the documentation and can build or integrate with your product with other products. Needs technical help around specific use cases when building. Hackathons are a common place for builders with this profile.
The Community Member: is involved in the community. Participates in communication channels even volunteers for activities. Needs support to get more visibility and remove blockers from their journey.
The Biggest Fan: is invested long term. Participates in grants. Bring value to the project and other members trough contributions, support and feedback. This is the most valuable member of the community and will need the best incentives from the internal team such as direct technical guidance, priority and why not? limited edition swags.

Depending on the project there will be more or less specific activities across the orbits. One particular case is being a DevRel for a Layer 1 project.

6. DevRel for Layer 1

Being a DevRel for a Layer 1 instead of a project higher in the stack has its own particular activities and responsibilities like:

Improve developer experience.
Hardfork coordination
Validator relations
Governance relations
Improve the proposals
Host Core Dev calls
Advocate smart contracts languages
Technical writing
Community calls and coordination
Engineering activities

This skills will help a lot in your journey as a Level 1 DevRel

Basic practical knowledge about cloud computing
Building Dapps for workshops or demos
Being confortable with the command line (don’t be afraid of it, it’s really useful)
Being confortable with Linux

Making sure you understand your responsibilities and execute accordingly is important however you will also need to quantify your progress in order to communicate your achievements to the core team.

7. How to measure DevRel success

Measuring success in DevRel is quite challenging because not everything is quantifiable. However there are some strategies you can use to get a better understanding of the impact.

Here are some tips to define success metrics:

Create interactive tutorials and measure the progress of your users
Quantify how many hackathon projects get funded
Track engagement on Discord and Github
Look for repeated pieces of feedback
Track attendance at workshops
Use social media analytics

You can get better metrics doing these:

Ask what is interesting for people and document it
Go to every hackathon and get feedback
Look for trends and move fast
- Develop integrations with new products
- Provide feedback and ideas to the core team
- Develop documentation and examples for new use cases
Hack with your community!

Conclusion

DevRel is a complex role extremely important for web3 projects and difficult to find by recruiters. In my opinion it will become hotter and hotter in the next few years.

If you want to become a DevRel start by paying attention to what other DevRels do and learn from them. Finally here is a hack from the legendary Nader Dabit: target smaller projects instead of big famous protocols. There is more room for you to shine and a bigger probability of getting noticed.

Enjoy the ride!

Cómo crear una aplicación Full-Stack con React, NestJS y Nx

Alfredo Bonilla — Thu, 15 Oct 2020 23:38:20 +0000

🏁 TL;DR

Nx es un conjunto de herramientas que nos permiten construir aplicaciones full-stack de una manera más sencilla por medio de mono repositorios reforzando además las buenas prácticas de programación. Podemos generar aplicaciones full-stack con NestJS y React por medio de la ejecución de algunos sencillos comandos.

Pre requisitos:

⚛️ Conceptos básicos de React.
🐈 Conocimiento básico de NestJS.

😮 ¿Por qué utilizar mono repos?

Las organizaciones por lo general trabajan y dan mantenimiento a múltiples proyectos y no siempre es sencillo mantener estándares o reutilizar código entre ellas.

Implementar una estrategia de mono repositorio nos va a permitir centralizar el código de nuestras diferentes aplicaciones un único repositorio permitiendo así compartir código entre nuestras aplicaciones.

Entre las ventajas que nos ofrece esa estrategia podemos recalcar:

Facilidad para compartir código entre aplicaciones.
Un mejor manejo de dependencias a lo largo de distintos proyectos así como la compatibilidad de sus versiones.
Permite mayor fluidez en el trabajo entre distintos equipos.

Existen herramientas que nos permiten abstraer nuestro código en librerías e implementar mono repos como los paquetes privados de npm, Lerna o Yarn Workspaces, sin embargo existen varios aspectos dónde podríamos vernos beneficiados con mejores herramientas.

Con Nx tenemos a nuestro alcance una colección de herramientas que nos permitirán administrar nuestro mono repo de una mejor manera gracias Nx CLI: una herramienta de línea de comandos basada en Angular Schematics con la cuál podremos generar código de manera consistente con solo ejecutar una serie de comandos. Nx además provee herramientas para optimizar nuestro proceso de pruebas automatizadas y despligue.

🙌🏽 Aplicaciones full-stack utilizando Nx

Otro uso que podemos dar a los mono repositorios son las aplicaciones full-stack. Nx resulta poderosamente conveniente cuando hablamos específicamente de aplicaciones full-stack con TypeScript ya que nos permite mantener el código del front end y el back end en un mismo repositorio junto con librerías que facilitan la reutilización de código cómo interfaces y funciones utilitarias.

Para este ejemplo vamos a utilizar NestJS, un framework dogmático de NodeJS que busca ser robusto y escalable por medio de la implementación de buenas prácticas y patrones de diseño. Esta fuertemente inspirado en la arquitectura de Angular. NestJS ha ganado bastante popularidad gracias a sus características.

Es muy común ver implementaciones full-stack con Angular y NestJS debido a que comparten muchas características e implementan patrones similares, sin embargo es completamente posible utilizar React con TypeScript.

Nx ofrece una serie de comandos para generar estructuras de aplicaciones full-stack, entre ellas podemos generar Angular + NestJS, o React + NodeJS con Express. De momento no existe una opción directa para combinar estas opciones sin embargo podemos hacerlo manualmente y así poder aprovechar el potencial tanto de NestJS en el backend como la flexibilidad y rapidez de desarrollo de React en el front end.

⚙️ Configurando una aplicación React + NestJS

Aplicación front end con React y TypeScript

El primer paso que vamos a seguir es la creación de un espacio de trabajo junto con la aplicación de React. Para esto vamos a ejecutar el siguiente comando:

npx create-nx-workspace@latest

Una vez hecho esto vamos a elegir un nombre para nuestra organización. La organización va a contener los distintos proyectos entre los cuales queramos compartir código.

Después de esto vamos a seleccionar la opción "a workspace with a single React application"

Nx va a generar por nosotros toda la estructura del espacio de trabajo junto con una aplicación React funcional.

Podemos ejecutar la aplicación con el siguiente comando

npx nx serve <nombre_de_la_aplicacion>

API con NestJS

Seguidamente vamos a generar nuestro api NestJS.

Si ejecutamos el comando nx list podremos observar las distintas opciones que nos ofrece Nx para generar código.

Vamos a ejecutar yarn add --dev @nrwl/nest para añadir la capacidad de generar aplicaciones NestJS.

Después de esto vamos a ejecutar el comando:

npx nx g @nrwl/nest:app api --frontendProject=<nombre_de_la_aplicacion_front_end>

Con este comando ya podremos ver nuestro espacio de trabajo conteniendo el código de un api NestJS.

Además de esto tenemos una configuración de proxy creada automáticamente.

{
  "/api": {
    "target": "http://localhost:3333",
    "secure": false
  }
}

En este punto ya tenemos el front end y el back end. En el siguiente paso vamos a compartir código entre ambas aplicaciones.

🤝 Compartir código entre distintas aplicaciones

Una de las ventajas de utilizar librerías de Nx para compartir código es que no necesitaremos procesos extra de despliegue como es el caso de los paquetes privados de NPM donde primero necesitamos desplegar el paquete y luego actualizar la versión en nuestra aplicación. Con Nx es tan sencillo como crear un nuevo pull request.

Para generar una librería que podamos acceder desde los distintos proyectos vamos a ejecutar el siguiente comando.

npx nx g @nrwl/workspace:lib data

Nx va a generar el código de nuestra librería, en la ruta libs/data/src/lib podremos encontrar un archivo de TypeScript que eventualmente podremos importar en nuestras aplicaciones. Para probar podemos escribir un tipo de dato que vayamos a utilizar tanto en el front end como en el back end, esto nos permitirá evitar duplicar el código de nuestras interfaces de TypeScript.

export interface Book {
  title: string;
  author: string;
  isbn: string;
  cover: string;
}

Seguidamente vamos a actualizar un poco el código para poder probar la aplicación:

En el API, vamos a actualizar el app.service.ts importando el nuevo tipo de dato por medio de la línea: import { Book } from '@public-library/data';

import { Injectable } from "@nestjs/common"
import { Book } from "@public-library/data"

@Injectable()
export class AppService {
  books: Book[] = [
    {
      title: "Clean Code",
      author: "Robert C. Martin",
      isbn: "9780132350884",
    },
    {
      title: "The Pragmatic Programmer",
      author: "Andy Hunt & Dave Thomas",
      isbn: "9780132119177",
    },
    {
      title: "Working Effectively with Legacy Code",
      author: "Michael C. Feathers",
      isbn: "9780131177055",
    },
  ]

  getData(): Book[] {
    return this.books
  }
}

Si estamos utilizando VS Code, es importante tomar en cuenta que cada vez que agregamos una nueva librería debemos reiniciar el servidor de TypeScript ya sea reiniciando el editor o ejecutando Cmd + Shift + P y ejecutando el comando TypeScript: Restart TS Server.

Vamos a crear una ruta personalizada en el controlador para poder manipular la petición al del front end al API

import { Controller, Get } from '@nestjs/common';

import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get('books')
  getData() {
    return this.appService.getData();
  }
}

En la aplicación de React vamos a modificar el archivo app.tsx para poder obtener los datos del API y listarlos de la siguiente manera. Al igual que en el API vamos a importar nuestra librería con exactamente la misma interfaz.

import React, { useEffect, useState } from 'react';
import { Book } from '@public-library/data';

export const App = () => {

  const [books, setBooks] = useState<Book[]>([]);

  useEffect(() => {
    fetch('/api/books')
      .then((_) => _.json())
      .then(setBooks);
  }, []);

  return (
    <>
     <h1>Books</h1>
      <ul>
        {books.map((t) => (
          <li key={t.isbn} className={'book'}>{t.title}</li>
        ))}
      </ul>
    </>
  );
};

export default App;

¡Y listo! una vez finalizado este paso tendremos una estructura escalable lista para empezar a desarrollar nuestra aplicación full-stack TypeScript con React y NestJS.

🎯 Conclusion

El uso de mono repos nos permite administrar nuestro código de una mejor manera tanto para agrupar y compartir código entre distintas aplicaciones de una organización así como para nuestras aplicaciones full-stack.

Nx ofrece una serie de herramientas y buenas prácticas que facilitarán mucho la implementación de una estrategia de mono repos y de aplicaciones full-stack escritas en TypeScript.

A pesar de que Nx no ofrece por defecto la opción de generar una aplicación full-stack combinando NestJs y React, es posible hacerlo manualmente mediante una serie de comandos.

Fuentes y Documentación adicional

¿Utilizarías React con NestJS, tienes experiencia utilizando estas tecnologías juntas?

Espero sus comentarios.

¡Hasta la próxima! 😁

WeakRefs y Finalizers en JavaScript

Alfredo Bonilla — Thu, 08 Oct 2020 23:21:08 +0000

WeakRefs y Finalizers es una nueva característica de JavaScript añadida como parte de ES2021, su funcionamiento es bastante interesante pero puede ser complejo y no debe utilizarse si no es estrictamente necesario, a continuación veremos un poco más sobre esto.

🏁 TL;DR

En JavaScript las referencias a objetos son respetadas por el recolector de basura (o garbage collector), es decir, si el algoritmo de recolección encuentra que un objeto es alcanzable desde un objeto raíz este no será recolectado, pero si el objeto es inalcanzable, este será recolectado.

Se puede decir que este proceso es una aproximación ya que el algoritmo no puede saber a ciencia cierta si un objeto es necesario o no.

Un objeto weakRef permite mantener una referencia débil a otro objeto sin prevenir que este objeto sea eliminado de la memoria por el recolector de basura y FinalizationRegistry nos permite hacer un callback cuando este objeto ha sido debidamente recolectado.

📦 Gestión de la memoria en JavaScript

El ciclo de vida de la memoria es muy parecido en todos los lenguajes de programación primero se reserva la memoria necesaria, se utiliza y luego se libera cuando ya no es necesaria.

JavaScript asigna memoria de manera automática cada vez que se declara un valor al igual que la liberación de memoria no utilizada se realiza automáticamente por medio del Recolector de Basura o Garbage Collector.

🔗 WeakRefs

Una weakRef es un objeto que tiene una referencia débil a un objeto llamado referente u objetivo, esta referencia permite que el objeto sea recolectado por el garbage collector.

Cabe mencionar que se debe tener cuidado al utilizar las referencias débiles, de hecho es bueno evitarlas de ser posible. También debemos saber que el comportamiento del garbage collector puede cambiar de motor a motor y podría ser diferente para diferentes versiones del motor de JavaScript.

En otras palabras, el momento y la manera en que la recolección sucede puede variar y eso puede afectar el resultado que esperamos, incluso podría suceder que el método deref nunca retorne undefined debido a que el recolector decidió nunca recolectar esa referencia.

📣 FinalizationRegistry

FinalizationRegistry es un objeto que permite ejecutar un callback cuando un objeto es recolectado. Si el objetivo de un FinalizationRegistry es también un elemento con una WeakRef entonces la referencia se eliminará al mismo tiempo que la ejecución del callback por lo que no será posible obtener la referencia del objeto dentro del callback.

⚙️ Ejemplo

Este es un ejemplo simple donde vamos a definir una referencia débil para un objeto que va a contener una animación generada a partir de otros elementos del DOM que se adjuntan segundo a segundo durante 5 segundos.

Una vez que el tiempo haya pasado, la referencia será recolectada y se disparará un callback indicando que el objeto fue recolectado.

class CircleAnimation {
  constructor(element) {
    // Define una referencia débil a un elemento del DOM.
    this.ref = new WeakRef(element)

    // Define un callback que se ejecutara
    // cuando el elemento de referencia débil sea recolectado.
    this.registry = new FinalizationRegistry((hadValue) =>
      console.log("Referencia recolectada: ", hadValue)
    )
    this.registry.register(element, "Elemento de animación")

    this.start()
  }

  start() {
    if (this.timer) {
      return
    }

    const addCircle = () => {
      // Obtiene el elemento de la referencia.
      const referencedElement = this.ref.deref()
      if (referencedElement) {
        const circle = document.createElement("div")
        circle.className = "circle"
        referencedElement.append(circle)
      } else {
        // El elemento ya no existe.
        console.log("El elemento ya no existe.")
        this.stop()
        this.ref = null
      }
    }

    addCircle()
    this.timer = setInterval(addCircle, 1000)
  }

  stop() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = 0
    }
  }
}

const animation = new CircleAnimation(document.getElementById("app"))
animation.start()

setTimeout(() => {
  document.getElementById("app").remove()
}, 5000)

💻 El ejemplo completo se encuentra aquí.

‼️ Para poder observar su funcionamiento correctamente es necesario recargar la página cada vez que se ejecuta la animación.

¿Se les ocurre algún uso para esta característica? Dejen sus comentarios y opiniones sobre el tema.

Puedes encontrar el artículo original en mi blog.

¡Hasta la próxima! 😉

Forem: Alfredo Bonilla

How to Deploy an Eliza AI Agent on Railway

What is Eliza Starter?

What is Railway?

What You Need

Steps to Deploy

1. Clone the Eliza Starter Repository

2. Create a New Railway Instance

3. Connect Your GitHub Repository

4. Configure Environment Variables

5. Deploy

Why Set DAEMON_PROCESS=true?

That’s It!

TailwindCSS: A Game-Changer for AI-Driven Code Generation and Design Systems

Why TailwindCSS and AI are a Match Made in Heaven

1. Utility-First Approach: Keeping It Simple

2. Predictable Class Names: Speaking the Same Language

3. Readability and Maintainability: Keeping It Clean

Supercharging Product Development with TailwindCSS and AI

Rapid Prototyping: From Idea to Interface in No Time

Consistency is Key

Less Overhead, More Innovation

Scaling Up with Ease

Creating Complete Design Systems with AI and TailwindCSS

1. Defining Design Tokens

2. Generating Component Libraries

3. Creating Layout Systems

4. Documenting the Design System

5. Generating Theme Variations

6. Ensuring Accessibility

7. Optimizing for Performance

The Power of AI-Generated Design Systems

Wrapping Up

7 things I learned from DevRel Engineers 🥑 at DevCon

1. What DevRel is not

2. DevRel main goal

3. DevRel is actually an umbrella term

4. The DevRel Playbook

5. Developer Personas and The Orbit Model

6. DevRel for Layer 1

7. How to measure DevRel success

Conclusion

Cómo crear una aplicación Full-Stack con React, NestJS y Nx

🏁 TL;DR

Pre requisitos:

😮 ¿Por qué utilizar mono repos?

🙌🏽 Aplicaciones full-stack utilizando Nx

⚙️ Configurando una aplicación React + NestJS

Aplicación front end con React y TypeScript

API con NestJS

🤝 Compartir código entre distintas aplicaciones

🎯 Conclusion

Fuentes y Documentación adicional

WeakRefs y Finalizers en JavaScript

🏁 TL;DR

📦 Gestión de la memoria en JavaScript

🔗 WeakRefs

📣 FinalizationRegistry

⚙️ Ejemplo

Why Set `DAEMON_PROCESS=true`?