DEV Community: Andres Ramirez

The End of "Vibe Coding": Why Spec-Driven Development is the Future

Andres Ramirez — Wed, 03 Dec 2025 16:34:27 +0000

Spec Driven Development

In the rapidly evolving world of software development, a new term has emerged to describe the current state of AI-assisted programming: "Vibe Coding." It refers to the unstructured, chaotic process of chatting with an LLM (like Claude or ChatGPT), pasting code back and forth, and hoping the AI "gets the vibe" of what you're trying to build.

While fun for prototypes, vibe coding is a nightmare for complex or long-term projects. Context gets lost, requirements drift, and you end up with a "spaghetti chat" history that no one can audit.

Enter OpenSpec

In a recent deep-dive, I explored OpenSpec, a new open-source tool that brings engineering discipline back to AI coding through Spec-Driven Development (SDD).

Unlike context-driven frameworks (like BMAT) which can be overly complex, OpenSpec is lightweight and focuses on one core principle: Agree on the plan before writing the code.

How It Works

OpenSpec flips the script. Instead of asking an AI to "write a function," you ask it to "create a proposal."

The Proposal: The AI generates a structured plan (proposal.md) and a task list (tasks.md).
The Review: You (the human) review these files. This is your chance to catch logic errors before a single line of code is written.
The Implementation: Once approved, the AI agent (works with Cloud Code, Windsurf, Cursor, etc.) executes the plan step-by-step.
The Archive: The change is merged and archived, keeping your active context clean.

Why OpenSpec Wins for Beginners

Many AI tools require you to start a project from scratch ("Greenfield"). OpenSpec, however, can be initialized in a repository with thousands of lines of code (Similar to GitHub SpecKit but simpler). It respects your existing structure; it only adds a .openspec folder to manage future changes and all the definitions.

Conclusion

If you are tired of repeating yourself to your AI assistant, it's time to adopt a spec-driven workflow. OpenSpec offers a professional, scalable, and free way to harness the power of AI without losing control of your codebase.

Ready to try it? Check out the Fission-AI/OpenSpec repository on GitHub.

Amazon Q - Kiro-dev

Andres Ramirez — Tue, 25 Nov 2025 03:15:10 +0000

Of all the IDEs, CLIs, and systems in general that allow process automation through agents that I’ve tested, Kirodev has definitely been a great surprise. I decided to create a very simple test application: I obtained a dashboard-style template and replicated the components and look and feel as closely as possible.

When installing the IDE, I found a new tab showing the enhanced tools: Specs, Hooks, Agent Steering, and MCP (I’ll explain this in more detail later). On the right side, the chat window, very similar to any other chat, like Kilocode, Continue, Windsurf, etc.

But what makes it innovative? In my opinion, the simplified implementation of SDD (Spec Driven Development) is very well executed. Unlike GitHub’s version (GitHub Spec Kit), which is more complex and requires more definitions, Kiro integrates a simplified version that allows maximum control over the project’s development. You could say it’s vibe coding with steroids and a police officer watching every step. To me, this is truly the next step in the evolution of programming, where the machine handles the routine work and developers focus on the logic and architecture of the project.

SDD (Spec Driven Development)

Programming through specs basically means you first define the specifications (specs)—a clear document describing what a functionality must do and how it should behave—and then you write code based on those specifications.

To program using SDD in Kiro, we need to define 3 base files:

requirements.md

Here, we define user stories and acceptance criteria, just as we do in Jira or any other ticketing tool, but using the EARS (Easy Approach to Requirements Syntax) notation. This notation looks like this:

WHEN [condition/event]
THE SYSTEM SHALL [expected behavior]

This way of defining requirements allows greater clarity and traceability.

design.md

In this file, we define the entire architecture—everything we need for implementation, diagrams, etc.
Here, we define how our system will work in terms of components and their interactions.

tasks.md

This is our implementation plan. Here we define the list of tasks to follow, step by step. Each task must be well defined and must specify what will be received. We must also specify whether we have dependencies (external libraries or other resources).
One advantage is that this file runs task by task, allowing more granular control over the changes made.

PBT (Property Based Tests)

Another interesting feature of KIRO is PBTs, which in short are a more complete way of testing our development.

Usually unit tests focus on testing specific functionalities without considering the broader context; this is exactly what PBT aims to fix.
Properties are defined as the functionalities that must be fulfilled in our system. (For example, if we define a login, the user should be able to log in.)

Example of a PBT:

Traditional test: The user adds car #5 to favorites, car #5 appears in their favorites list.

Property-based test: For any user and any car, WHEN the user adds the car to favorites, THE system MUST display it in their favorites list.

KIRO extracts the properties automatically from our requirements.md file and generates the test cases, trying to cover as many scenarios as possible.

Agent Steering

If the specs define what needs to be created, agent steering defines how it must be created. This allows controlling the agents and telling them how to generate the implementation following specific rules.

For example, if I have a project using React + Vite + Tailwind + TypeScript, I could define an agent steering file like the following:

components:
  style: tailwind
  layout: responsive
  propsValidation: TypeScript interfaces
  interaction: hooks only

files:
  structure:
    - src/components
    - src/features
  namingConvention: PascalCase for components

pages:
  mustInclude:
    - Header
    - Sidebar
    - MainContentLayout

In short, specs are the map and steering is the driver.

Hooks

Another interesting addition is hooks, which are functions that trigger through events—events tied to creating, editing, or deleting a file, or even triggered manually.

Hooks receive a prompt as a parameter and, depending on their trigger, can be very useful for code review, documentation, security review, automated commit message generation, and much more.
An example of a manual hook would be:

Review the current file for:
1. Code quality issues
2. Potential bugs
3. Performance optimizations
4. Security vulnerabilities
5. Accessibility concerns

This hook would be executed manually on whichever file we choose.

While there is an ocean of tools like this right now (Cursor, TRAE, Windsurf, Antigravity, etc.), KIRO has something in its favor: integration with AWS and its simplified definition of Spec Driven Development.
Despite being a good tool, it is not exempt from errors—like all tools. Sometimes agent execution gets stuck, and lately, due to high demand, it takes a long time to execute some processes.

We’ll see in a few months whether it manages to position itself as a leading tool in the market.

Agentic Context Engineering (ACE): una nueva forma de mejorar los LLMs sin tocar sus pesos

Andres Ramirez — Fri, 10 Oct 2025 15:59:39 +0000

Los modelos de lenguaje grandes (LLMs) han demostrado un potencial enorme, pero también sus límites. Una de las preguntas más importantes hoy es: ¿cómo podemos hacer que un modelo mejore sin tener que volver a entrenarlo desde cero?

Este artículo presenta una respuesta interesante: Agentic Context Engineering (ACE), un nuevo marco de trabajo diseñado para potenciar el rendimiento de los LLMs a través de una idea simple pero poderosa: no cambiar el modelo, sino cambiar su contexto.

El problema con los enfoques actuales

Cuando hablamos de adaptar un modelo a nuevas tareas, la mayoría de los métodos actuales se centran en ajustar los pesos del modelo o en reescribir los prompts. Pero eso tiene sus límites. ACE identifica dos grandes problemas en estas estrategias:

Sesgo de brevedad (Brevity Bias): Los modelos tienden a preferir instrucciones cortas y concisas, lo que a menudo elimina detalles valiosos o heurísticas específicas del dominio. Resultado: un modelo más rápido, sí, pero menos preciso en tareas complejas.

Colapso del contexto (Context Collapse): Cada vez que un modelo reescribe o resume su propio contexto, tiende a simplificarlo demasiado. Con el tiempo, la información importante se degrada, y el rendimiento cae.

La propuesta de ACE: contextos que aprenden

ACE parte de una idea inspirada en cómo aprendemos los humanos: experimentar, reflexionar y consolidar.
En lugar de tratar el contexto como un texto estático o un simple resumen, ACE lo concibe como un “playbook” vivo, que evoluciona con cada interacción.

Este proceso se organiza en tres componentes:

Generador (Generator): Produce trayectorias de razonamiento frente a nuevas consultas, revelando patrones útiles y errores comunes.

Reflector (Reflector): Analiza esas trayectorias y extrae lecciones, refinándolas con iteraciones sucesivas.

Curador (Curator): Sintetiza esas lecciones en actualizaciones incrementales del contexto, que se integran sin perder coherencia.

De esta forma, el modelo no solo responde mejor, sino que aprende de su propio desempeño sin requerir supervisión constante.

Ojo a estos resultados:

En las evaluaciones realizadas, ACE mostró mejoras notables frente a los enfoques tradicionales:

Rendimiento superior: obtuvo una ganancia promedio del 10.6% en tareas de agentes y del 8.6% en benchmarks especializados como análisis financiero.

Auto-mejora sin supervisión: fue capaz de construir contextos útiles basándose únicamente en retroalimentación de ejecución, sin etiquetas humanas.

Mayor eficiencia: redujo los costos y la latencia de adaptación, permitiendo una mejora continua con mínima sobrecarga.

ACE representa un cambio de enfoque: pasamos de diseñar prompts a diseñar contextos dinámicos que evolucionan junto al modelo.
Esto abre la puerta a sistemas de IA más adaptativos, escalables y, sobre todo, capaces de mejorar por sí mismos con el tiempo.

En un mundo donde los LLMs ya son parte central de la innovación, frameworks como ACE nos recuerdan que el futuro de la inteligencia artificial no siempre pasa por modelos más grandes, sino por modelos que aprenden a aprender mejor.

Modelos de Lenguaje Grandes (LLMs) y su Potencial Malicioso

Andres Ramirez — Wed, 24 Sep 2025 16:51:15 +0000

La proliferación y el avance de los Modelos de Lenguaje Grandes (LLMs) han transformado significativamente el panorama tecnológico, ofreciendo capacidades sin precedentes en procesamiento de lenguaje natural y generación de contenido. Sin embargo, este progreso no está exento de desafíos, particularmente en lo que respecta al uso indebido de estas tecnologías. Un estudio exhaustivo realizado por Maximilian Mozes y su equipo profundiza en las implicaciones de seguridad de los LLMs, categorizando sus riesgos en amenazas, medidas de prevención y vulnerabilidades. Este análisis busca proporcionar una comprensión estructurada de cómo los LLMs pueden ser explotados y qué estrategias se están implementando para mitigar dichos riesgos.

Las Amenazas Intrínsecas de los LLMs: Un Análisis de su Potencial Malicioso

Las capacidades generativas de los LLMs, si bien son la base de su utilidad, también constituyen la fuente principal de las amenazas que el estudio identifica. Estas amenazas se manifiestan a través de diversas modalidades de explotación, detalladas a continuación:

1. Fraude, Suplantación de Identidad e Ingeniería Social

La sofisticación en la generación de texto por parte de los LLMs ha elevado el riesgo de fraude, suplantación de identidad y ataques de ingeniería social. Estos modelos permiten la creación de correos electrónicos de phishing y mensajes engañosos altamente personalizados y contextualmente relevantes, lo que dificulta su detección por parte de los usuarios. La eficiencia y el bajo costo asociados a la generación masiva de este tipo de contenido, facilitados por herramientas especializadas como WormGPT y FraudGPT, democratizan el acceso a tácticas ciberdelictivas, permitiendo su ejecución incluso por individuos con conocimientos técnicos limitados.

2. Generación de Malware

Los LLMs poseen la capacidad de generar código informático, lo que incluye la creación de software malicioso. Esta funcionalidad reduce significativamente la barrera de entrada para el desarrollo de malware, posibilitando que actores sin experiencia en programación elaboren herramientas para ciberataques. Esta democratización del desarrollo de código malicioso representa un desafío considerable para la ciberseguridad global.

3. Mala Conducta Científica

En el ámbito académico y de investigación, la capacidad de los LLMs para producir contenido original que puede eludir los sistemas de detección de plagio plantea serias preocupaciones sobre la integridad y la autoría. El uso de LLMs para la generación de ensayos, artículos o resúmenes sin la debida atribución o supervisión puede socavar la credibilidad de la producción científica y educativa, afectando la confianza en los procesos de evaluación y publicación.

4. Desinformación

Los LLMs son herramientas extremadamente potentes para la generación de desinformación a gran escala. Su habilidad para producir narrativas coherentes y persuasivas, indistinguibles en muchos casos del contenido generado por humanos, facilita la propagación de noticias falsas, propaganda y contenido engañoso. Este fenómeno contribuye a la polarización social, erosiona la confianza en las fuentes de información y dificulta la distinción entre hechos y ficción, con profundas implicaciones para la cohesión social y el discurso público.

5. Memorización de Datos

Durante su proceso de entrenamiento, los LLMs pueden memorizar fragmentos específicos de los vastos conjuntos de datos que procesan. Si estos datos contienen información personal identificable (PII) o datos sensibles, existe el riesgo de que el modelo los revele involuntariamente durante la generación de respuestas. La probabilidad de esta fuga de información aumenta en modelos de mayor tamaño y en aquellos entrenados con datos duplicados, lo que subraya la necesidad de una gestión rigurosa de la privacidad en los conjuntos de entrenamiento.

6. Envenenamiento de Datos

El envenenamiento de datos implica la introducción deliberada de ejemplos maliciosos o sesgados en los conjuntos de entrenamiento de los LLMs. El objetivo es manipular el comportamiento del modelo, induciéndolo a generar resultados no deseados o a facilitar ataques de puerta trasera (backdoor attacks). En estos ataques, el modelo es condicionado para ejecutar una acción maliciosa específica cuando se le presenta un "disparador" particular. Esta forma de sabotaje compromete la fiabilidad y la seguridad del modelo desde su fase de entrenamiento, afectando su rendimiento y su comportamiento ético.

Estrategias de Defensa: Medidas de Prevención Contra el Mal Uso de los LLMs

Frente a las amenazas identificadas, la comunidad científica y tecnológica ha desarrollado y está implementando diversas estrategias para salvaguardar la integridad y la seguridad de los LLMs. Estas medidas buscan mitigar los riesgos asociados a su uso malicioso y fortalecer su robustez.

1. Detección de Contenido

Una línea fundamental de defensa es la capacidad de discernir entre contenido generado por humanos y por IA. Esto es crucial para combatir la desinformación y el plagio. Técnicas como el watermarking (marca de agua digital) permiten incrustar una huella digital imperceptible en el texto generado por LLMs, facilitando su identificación algorítmica. Asimismo, se emplean enfoques discriminatorios, que utilizan modelos de clasificación binaria para diferenciar el texto humano del artificial. No obstante, la efectividad de estas medidas puede verse comprometida por técnicas de parafraseo o la reescritura del contenido por otros LLMs, lo que exige una evolución constante de los métodos de detección.

2. Red Teaming

El red teaming es una metodología proactiva que implica la formación de equipos (compuestos por humanos o incluso otros LLMs) con la misión de identificar y explotar deliberadamente las debilidades de seguridad de un LLM. Al simular ataques y explorar vulnerabilidades, los desarrolladores pueden fortalecer las defensas del modelo contra la generación de contenido dañino o comportamientos indeseados. Esta práctica es esencial para descubrir fallos antes de que sean explotados por actores maliciosos.

3. Filtrado de Contenido de LLM

Más allá de la detección post-generación, el filtrado de contenido busca prevenir que los LLMs produzcan lenguaje inapropiado o dañino. Esto se logra mediante la implementación de filtros y reglas que guían el comportamiento del modelo, a menudo a través de un ajuste fino (fine-tuning) que inculca principios de seguridad y ética. El objetivo es que el LLM internalice estas restricciones y evite la generación de contenido perjudicial.

4. Salvaguarda Mediante Aprendizaje por Refuerzo a partir de la Retroalimentación Humana (RLHF)

El RLHF es una técnica avanzada que adapta directamente el comportamiento de los LLMs. A través de la retroalimentación humana, el modelo aprende a preferir respuestas que son consideradas útiles y seguras, y a rechazar aquellas que son dañinas. Sin embargo, el estudio advierte sobre el riesgo de un "comportamiento de seguridad exagerado", donde el modelo puede volverse excesivamente cauteloso y negarse a responder a consultas legítimas, comprometiendo su utilidad en aras de una seguridad extrema. El desafío reside en encontrar un equilibrio óptimo entre la utilidad y la seguridad.

5. Seguridad Mediante el Seguimiento de Instrucciones

Esta línea de investigación explora la capacidad de los LLMs para autocorregirse moralmente a través de instrucciones explícitas proporcionadas en el prompt. Se ha observado que los modelos de mayor escala demuestran una mayor aptitud para seguir estas directrices y ajustar su comportamiento en consecuencia, lo que sugiere un potencial para la implementación de códigos de conducta directamente en la interacción con el usuario.

6. Métodos para Evitar la Memorización

Para contrarrestar la fuga de información sensible, se están desarrollando métodos que reducen la propensión de los LLMs a memorizar datos de entrenamiento. Esto incluye técnicas de aprendizaje por refuerzo que promueven la parafraseo en lugar de la repetición literal, y el prompt-tuning con preservación de la privacidad, diseñado para ajustar el modelo sin comprometer la confidencialidad de los datos. El objetivo es garantizar la inteligencia del modelo sin sacrificar la privacidad.

7. Métodos para Evitar el Envenenamiento de Datos

La protección contra el envenenamiento de datos y los ataques de puerta trasera es crucial. Las defensas incluyen el uso de puntuaciones de perplejidad para identificar patrones anómalos, la aplicación de perturbaciones robustas para reducir la sensibilidad del modelo a modificaciones maliciosas, y el análisis detallado de las representaciones internas y características del modelo. También se exploran defensas basadas en gradientes y atribución, que buscan rastrear el origen de las influencias en el comportamiento del modelo, con el fin de construir LLMs resilientes al sabotaje y capaces de identificar y rechazar información maliciosa en sus datos de entrenamiento.

Puntos de Explotación: Vulnerabilidades en la Arquitectura de los LLMs

A pesar de la implementación de medidas preventivas, los LLMs presentan vulnerabilidades inherentes que pueden ser explotadas por actores maliciosos para eludir las salvaguardas establecidas. El estudio destaca dos categorías principales de estas vulnerabilidades:

1. Inyección de Prompts

La inyección de prompts es una técnica mediante la cual un usuario malintencionado manipula o extrae las instrucciones internas (el "prompt del sistema") que guían el comportamiento de un LLM. Esta vulnerabilidad se manifiesta de dos formas principales:

Secuestro de Objetivo (Goal Hijacking): Consiste en la introducción de un prompt que anula o sobrescribe las directrices originales del sistema, forzando al modelo a generar contenido que, bajo sus reglas preestablecidas, debería rechazar.
Fuga de Prompt (Prompt Leaking): Implica inducir al LLM a revelar su propio prompt del sistema. El conocimiento de estas instrucciones internas puede facilitar a los atacantes la identificación de métodos más efectivos para eludir las defensas del modelo. Es importante señalar que estos ataques pueden ser indirectos, ocultando prompts maliciosos en fuentes de datos externas (como el código HTML de sitios web) que el LLM procesa. Incluso se ha demostrado la inyección de prompts en modelos multimodales, donde elementos como imágenes o sonidos pueden contener la "inyección" maliciosa.

2. Jailbreaking

El jailbreaking se refiere a la creación de prompts diseñados para eludir los filtros de seguridad de los LLMs, induciéndolos a generar contenido no deseado o inapropiado. A diferencia de la inyección de prompts, el jailbreaking no siempre requiere acceso al prompt del sistema, sino que se basa en la manipulación de la interacción para sortear las restricciones del modelo. Ejemplos notables incluyen el uso de técnicas como "DAN" (Do Anything Now) o la simulación de personalidades que carecen de restricciones éticas.

Un aspecto preocupante del jailbreaking es su potencial para ser "universal" (efectivo en múltiples modelos) y "transferible" (si funciona en un modelo, es probable que funcione en otros). Además, se ha descubierto que el jailbreaking no solo puede utilizarse para generar lenguaje dañino, sino también para extraer información personal identificable (PII) que el modelo haya memorizado. El estudio atribuye estas vulnerabilidades a la existencia de "objetivos en conflicto" dentro del modelo (la tensión entre ser útil y ser seguro) y a una "generalización desajustada" (la incapacidad del modelo para manejar ciertos tipos de prompts maliciosos para los que no fue específicamente entrenado).

Consideraciones Finales: El Futuro de la Seguridad en la Inteligencia Artificial

La rápida adopción y la visibilidad pública de los LLMs, ejemplificadas por el crecimiento exponencial de plataformas como ChatGPT, han puesto de manifiesto tanto su extraordinario potencial como los profundos desafíos éticos y de seguridad que conllevan. El estudio de Mozes et al. subraya la imperativa necesidad de una investigación rigurosa y continua para abordar estas complejidades.

Es fundamental que la comunidad científica y tecnológica priorice la investigación revisada por pares para validar y contextualizar las amenazas reales que los LLMs presentan en la actualidad. La velocidad con la que emergen nuevas investigaciones, a menudo sin el escrutinio de la revisión por pares, puede generar una percepción distorsionada de los riesgos, desviando la atención de problemas tangibles como la desinformación masiva o el fraude automatizado. La validación científica es crucial para asegurar que los esfuerzos de mitigación se dirijan a los desafíos más pertinentes y urgentes.

Las limitaciones inherentes a la seguridad de los LLMs reflejan un dilema fundamental: la tensión entre la maximización de la utilidad y la garantía de la seguridad. No existe una solución única que elimine completamente los comportamientos no deseados sin introducir nuevas vulnerabilidades o comprometer la funcionalidad del modelo. El futuro de la seguridad habilitada por LLMs plantea interrogantes complejos sobre la adicción tecnológica, la privacidad de los datos, la equidad en el acceso a estas tecnologías y la posibilidad de que los propios LLMs desarrollen comportamientos engañosos o sean susceptibles a la persuasión.

Implicaciones y Responsabilidades

Para los usuarios, es esencial desarrollar un pensamiento crítico y una alfabetización digital avanzada para evaluar la información generada por IA. Para los desarrolladores y las organizaciones, la responsabilidad de diseñar, implementar y desplegar LLMs de manera segura y ética es primordial. Para la sociedad en su conjunto, se requiere un compromiso sostenido con la investigación, el diálogo interdisciplinario y la formulación de políticas públicas informadas que permitan navegar este complejo paisaje tecnológico de manera responsable.

Los LLMs son herramientas transformadoras que están redefiniendo nuestra interacción con el conocimiento y la tecnología. Comprender sus riesgos y trabajar proactivamente para mitigarlos es un paso indispensable para asegurar que su impacto sea, en última instancia, beneficioso y constructivo para la humanidad.

Fuentes
Use of LLMs for Illicit Purposes: Threats, Prevention Measures, and
Vulnerabilities, Maximilian Mozes, Xuanli He, Bennett Kleinberg, Lewis D. Griffin, Aug 2023.

Fractals and Amazon Q Developer

Andres Ramirez — Tue, 06 May 2025 04:14:39 +0000

This is a submission for the Amazon Q Developer "Quack The Code" Challenge: That's Entertainment!

What I Built

I did an interactive application using ThreeJS, Audio API, and Shaders, 9 scenes show different interactive fractals and effects applied.
You can access it from a cellphone or a computer. I recommend using headphones to enjoy the experience.

URL Parameters

You can switch between different initial visual modes using URL parameters, this will apply only to the first scene:

?effect=basic - Basic 3D scene with objects
?effect=psychedelic - Psychedelic shader effect
?effect=crt - CRT distortion effect (default)

Demo

Code Repository

Code

How I Used Amazon Q Developer

I created a super big prompt following some rules like:

Assigning a personality to the IA (You are a WebGL Expert)
Detailed instructions in each scene to create the screens and the shaders
Added a basic structure and mapped the audio files, I get the files from pixabay (royalty free files).

Prompt

You are an expert in Shaders, webGL and ThreeJS. Create a minimal HTML file for a WebGL-based demo using Three.js. The canvas must fill the entire browser window with no scrollbars and load a JavaScript module named main.js. In main.js, do the following:

Scene 1: Psychedelic Intro

Create a full-screen plane using a custom ShaderMaterial.
Pass u_time and u_resolution as uniforms to both vertex and fragment shaders.
Animate the scene using requestAnimationFrame.
Write a basic vertex shader that directly passes the vertex position to gl_Position.
Write a fragment shader that displays a colorful, animated, psychedelic effect using sine and cosine waves. Colors should change over time to evoke a retro 90s visual style.
Overlay a CRT-style distortion effect: simulate scanlines, screen curvature, and RGB channel offsets to mimic an old monitor.
Add a scrolling text banner like the Star Wars intro (from bottom to top), using either HTML/CSS or a Three.js text mesh.
Load and autoplay a looping background track (assets/music1.mp3).
Handle browser autoplay restrictions and add a button to mute/unmute the music.

Scenes 2 to 6: Interactive Fractal Visuals
For each of the following five full-screen WebGL scenes, use a new fragment shader and its own background music:

In Scene 2 (Sierpinski): X-axis controls scale, Y-axis controls variation
- In Scene 3 (Julia): Mouse position changes the constants in the Julia set equation
- In Scene 4 (Mandelbrot): Mouse position changes the view offset
- In Scene 5 (Newton-Raphson): X-axis controls polynomial degree, Y-axis controls relaxation factor
- In Scene 6 (Menger Sponge): X-axis controls scale, Y-axis controls variation
- In Scene 7 (Koch Curve): X-axis controls scale, Y-axis controls iterations
- In Scene 8 (Blood Vessels): X-axis controls scale, Y-axis controls detail
- In Scene 9 (Atoms): X-axis controls atom size, Y-axis controls number of electrons

For all fractal scenes:

Use ShaderMaterial with full-screen fragment shaders.
Use u_time, u_resolution, and u_mouse as uniforms.
Update fractal constants dynamically based on mouse movement.
Each scene should render and update in real time.

Navigation

Create a menu on the main page to switch between all the scenes.
When a scene loads, the corresponding music file should also load and autoplay.
For each scene containing a fractal, implement real-time dynamic interaction based on mouse movement. The mouse position should modify the constants used in the fractal’s equation. Each shader must include u_time and u_resolution uniforms, and the fractal should be rendered in real time. Create a navigation button on the main page that links to each individual fractal scene. Additionally, load and play the corresponding .mp3 audio file for each scene when it loads.
In all scenes that display fractals, add a fixed text element centered on the screen. This text should show the mathematical formula of the corresponding fractal. Ensure the text has a legible color with sufficient contrast against the background. Additionally, implement a subtle flowing animation (e.g., shimmer or gentle wave) triggered when the user hovers the mouse over the text.
Add this text in the center of the screen in the scene 9: "In the sacred dance of the universe, fractals mirror the infinite within the finite, each pattern echoing the breath of creation. Quantum physics whispers that reality is not solid, but woven from probabilities—just as fractals emerge from simple laws into endless complexity. In this harmony, spirit and science converge, revealing that the cosmos may be a divine self-reflecting dream." This quote won't overlap the formula text,

Notes

Check the README in github to see all the documentation, which algorithms used, etc.

Permit Io in game development? why not!

Andres Ramirez — Fri, 02 May 2025 05:11:03 +0000

This is a submission for the Permit.io Authorization Challenge: API-First Authorization Reimagined

What I Built

My intention with this project is to have a different approach to create Role Games in Javascript (or any other language in the front side, like Python, Lua, even Unity), I made a set or roles and resources based on a simple definition of elements, in this case a super basic role game with 4 different characters (Elf, Wizard, Warrior, Dwarf), each character has its abilities, weapons, curses, etc.

This approach isolates the logic of abilities, weapons, and other stuff for each character from the game logic. If I want to change a character's abilities, I only need to go to Permit IO Interface and change the policies, which will be reflected directly in the game without touching the game code.

The API returns the list of Resources (abilities, weapons, armor, etc) and players (roles in Permit IO).

The free version of Permit IO doesn't allow me to create resourceTypes using the SDK (nodejs). I tried this approach that could be implemented in the full version, allowing the application to be more dynamic, avoiding using Permit IO UI.

Finally, I made a backend using Express and NodeJS, frontend using React/Tailwind/DaisyUI to show the data.

Demo

Project Repo

Repo: Permit Hackaton

My Journey

I like to organize logic into layers, and my approach to this project was based on that principle. I began by researching different ways to integrate Permit.io and decided to try something unique by applying its authorization logic to a role-playing game (RPG) configurator, since I enjoy creating video games.

Initially, I encountered problems when attempting to use ES Modules in Node.js. Each time I enabled "type": "module" and utilized import statements, the Permit.io library would fail. After investing almost six hours trying to fix it, I ultimately reverted to the require method—a more conventional CommonJS approach, which functioned reliably.

Second, when finally my backend worked, I built a Node.js API and tested a few basic calls following Permit.io’s documentation. Once I had a working prototype, I explored more advanced ideas, such as dynamically creating resources and policies. Unfortunately, that part didn’t work as expected, so I reviewed the latest version of the Permit.io API to troubleshoot and adapt.

Third, I created a screen that displays players along with their roles and access permissions. These settings will later be reflected directly in the gameplay, forming the foundation for role-based interactions in the RPG.

Fourth, I created the frontend using React/Typescript/Tailwind/Vite to provide a good option for showing the resources, players, and configurations. Only the admins can change elements in this interface. Permit IO and Clerk (to manage User Login and JWT) also manage this logic, which works well with Permit IO.

API-First Authorization

Based on the number of characters in my game, I added four Roles, each Role represents a character in my game.
These roles have different rules, the rules are related to the items (an item can be an ability, a weapon, a magic, a curse, etc). These items are saved in Permit IO as a Resources.
All this configuration is possible using the SDK via my Backend. With my UI connected to those services, I'm calling different functions to create roles and assign permissions to them.
You can find this functionality in two sections: create character and create actions.

This approach gives me much flexibility if I need to change each character's abilities, weapons, etc. without touching my frontend/backend code, which is perfect when I need to manage separation of concerns.

I created a middleware in my backend to verify the access via Permit IO, using permit.check.
I get the Resources using permit.api.resources.list()
I get the Players using permit.api.roles.list()
I create new Players from the UI using permit.api.roles.create()
I create new items and actions for a player using permit.api.updateRole

Recursos para crear Juegos

Andres Ramirez — Wed, 24 Jul 2024 15:18:45 +0000

De las cosas mas complejas al iniciar a crear juegos es saber como abordar la gran cantidad de perfiles que se necesitan, desde el sonido hasta el script sin olvidar la parte gráfica.

Esta es una lista de algunos recursos que he usado para crear juegos en 2D, cabe resaltar que puede servir también para juegos en 3D, pero mi experiencia es mas orientada hacia lo primero.

Para empezar debemos tener en cuenta, que hay que cubrir una cantidad considerable de aristas, también dependiendo de la técnica que pensemos usar (Rotoscopia, Pixelart, etc):

Esta lista es solo una propuesta, en la mayoría con software open source o con costos muy bajos.

Graficos

Si vamos a usar pixelart, tenemos opciones como:

Aseprite (Mi preferida)
Piskel (Buena opcion gratis)
Pixilart (Online)
Photoshop

Para edición de assets, tenemos:

Gimp (Open source)
Photoshop (De pago)

Sonidos

Reaper
Audacity
Sfxr (Para crear sonidos de 8 bits, genial para juegos retro)

Motor de desarrollo

Storyboard

Microsoft Word o cualquier otro editor de texto, acá lo mas importante es aprender a ensamblar una historia coherente, aprender a crear personajes, este post puede servir como guia

Assets

Muchas veces no tenemos tiempo o el conocimiento para crear toda la parte artistica desde 0, estos son algunos recursos de assets para juegos:

Project Management

Para llevar las tareas y tiempos de nuestro proyecto tenemos:

Monday (Tiene version gratis)
Notion
Trello
Airtable (Tiene version gratis)

Documentación

Es importante siempre documentar el proceso, desde nuestro GDD hasta el postmortem. En esta lista hay varios GDD de juegos AAA que sirven de ejemplo.

Dundoc
ChatGPT
Milanote (Esta es una plataforma completa)

Seguramente muchas buenas herramientas se me quedan por fuera de este listado, sientase libre de aportar mas que usted conozca.

Happy Coding!

Motivation, the neglected superpower.

Andres Ramirez — Fri, 19 Apr 2024 17:05:20 +0000

I have many years working in the tech world, as a programmer, analyst, hardware, etc, and my last 20 years as a software developer. So many hours in front of a screen that I lost track of how many weekends I spent reading documentation or just writing code for fun, is my decision, and I don't have regrets about it. But sometimes is hard to keep the energy up, and maintain the mindset, sometimes we just need a break from everything and organize my mind mess, I started to study when we didn't have social networks, using tech books and meeting with other people interested in the same things.

I was full of expectations about the future, young, and energized, but maintaining that mindset through the years is not an easy job, I felt burned a couple of times due to some projects, 35 hours days, and no weekends for months, I thought I could manage this level forever, I was wrong, my body started to feel bad, to many hours seated destroyed my back, I use glasses now too and yes, overweight and bad habits (yeyyy pizza nights overtime) was killing me.

All these variables were affecting me in so many ways, I started to lose motivation to learn, to do my job, spend too much time using social networks, sleep badly, consume innutritious food, and another important factor, I'm not in my 20s.

This lack of motivation and energy forced me to make a change, I started to learn a little bit about neuroscience, habits, and how the brain works.
This is the core of everything, how your mind is affected by your behavior, how a simple action day after day starts to build how you react and think, and this affects every single aspect of your life, not only in your job, this affects all your life layers.

But let's talk about motivation, currently is too diminished by gurus who say: "Motivation is not important, is temporary, what you need is discipline".

Motivation by definition: Motivation refers to the psychological forces that drive and direct our behavior toward achieving a particular goal or outcome. This force can be intrinsic or extrinsic, intrinsic is how you feel about the goal, and extrinsic is what you will win with the goal (recognition, fame, etc). Is a fundamental skill to interact with the world, all animals share the motivation to obtain their basic needs, including food, water, sex, and social interaction.

Motivation is directly related to brain functionality and can be affected by two different frames, pathologies like schizophrenia and affective disorders and pathologic behavior problems like addictions or affective disorders.

Now you have a better idea about my point. To be motivated you need to accomplish a couple of points, and these points are based on how motivation works in the brain.
How the brain interprets motivation could be defined as:

Costs: How much effort will you need to finish the task? This includes time, pain, discomfort, lost opportunities, etc.
Benefits: What will do I win with this?

In between of these you will find:

Physiological state: Deprivation, stress, health.
Environment: availability of goal, response opportunity.
Past history: Experience of goals, responses, and stimuli.

In terms of have a good state to be motivated, we need to have in mind these points:

Respect your body, yes, go to the gym, park, or in your home, but you need to spend at least 1 hour a day doing some exercise (strength exercise is highly recommended). Check these free workouts
Eat better; food is your brain's fuel, and if you want a healthy brain, you need to eat healthy food. You can have a couple of ideas here
Sleep well, this is one of the most important points to having a healthy brain. How to improve your sleep Habits
Define your goals, and be concise, I know sometimes it is super boring to be structured, but this will give you a path to track your improvements. SMART methodology is great for this
Define your reasons for doing the things you want to do. Could be for fun or something to improve your career, but you need to be clear about why are you doing that task, this is directly related to intrinsic/extrinsic motivation and is a key point to maintaining energy.
Don't punish yourself. You are a human, embrace the failure, learn, and start again with more knowledge. The problem is not to fail, is to punish yourself so badly, that it destroys your self-confidence. Check this article about imposter syndrome
Develop critical thinking. Critical thinking is the ability to evaluate facts and information, remain objective, and make a sound decision about how to move forward. This is a way to develop good emotional intelligence, this gives you the capacity to identify if your goal makes sense.
Regulate time using social networks, porn, video games, and all the sources of dopamine, excessive dopamine segregation affects directly and hardly how motivation works in your brain. Check how dopamine works in the brain

Motivation is not only the result of an internal voice that says: "go, you can do it", or consuming a lot of self-help books or videos, is how your brain works based on your beliefs, your habits, your knowledge, and your ideas, you can build a strong mind but you need to care your body too, everything is interconnected.

Creando una máquina de Estados Finito en Godot

Andres Ramirez — Sun, 12 Nov 2023 04:16:34 +0000

Dentro de las multiples técnicas para desarrollar la lógica de un personaje y la interacción entre las diferentes acciones que realiza en nuestro juego, encontramos un patrón muy interesante y es el de las maquinas de estado finito. Pero primero definamos que es una maquina de estádo finito.

Máquinas de estádo Finito

Las máquinas de estádo finito también llamado Automata finito, es una abstracción computacional que describe el comportamiento de un sistema reactivo mediante un número determinado de Estados y un número determinado de Transiciones entre dicho Estados.

Las Transiciones de un estado a otro se generan en respuesta a eventos de entrada externos e internos; a su vez estas transiciones y/o subsecuentes estados pueden generar otros eventos de salida. Esta dependencia de las acciones (respuesta) del sistema a los eventos de entrada hace que las Máquinas de Estádo Finito (MEF) sean una herramienta adecuada para el diseño de Sistemas Reactivos y la Programación Conducida por Eventos (Event Driven Programming), cual es el caso de la mayoría de los sistemas embebidos basados en microcontroladores o microprocesadores.

En nuestro caso especifico, aplicamos este patrón en el desarrollo de videojuegos, para definir las diferentes acciones (y animaciones) de un personaje.

Pero para entender mejor este concepto, definamos un personaje en Godot y definamos también 3 acciones básicas:

Idle: Es la acción estática de nuestro personaje, va a tener una animación de "respirar".
Move: Es la acción de mover nuestro personaje, y la animación va a corresponder a una serie de frames que simulan el efecto de correr.
Jump: Acción de saltar, nuestra animación va a constar de 2 o mas frames que simulan la acción de salto.

Definiendo el Proyecto

Primero, vamos a descargar una serie de assets gratuitos para poder hacer nuestra práctica, los pueden encontrar acá.

Luego vamos a crear un nuevo proyecto, y en la ventana de nodo, vamos a agregar un nodo de tipo character body 2D.

Despues adicionamos tres subnodos mas:
- Sprite2D, el cual va a contener nuestros sprites.
- AnimationPlayer: El cual va a contener nuestras animaciones.
- CollisionShape2D: El que va a definir nuestro marco de colisión.

Luego creamos una carpeta Assets en la raíz del proyecto y arrastramos todos los archivos que hemos descargado.

El siguiente paso es renombrar nuestro nodo principal por "Player" y vamos a adicionar un nuevo script.

Ahora, creamos un nuevo nodo (no el 2D, el que viene solito) para definir nuestra máquina de estados y lo renombramos como "state machine"

Adicionamos los estádos como nodos hijo.

Procedemos a crear un script genéral, es decir, este script no va a depender de un nodo, lo cual nos va a permitir rehusarlo si así lo requerimos.

En este archivo lo que haremos será crear una clase padre de la cual los estados independientes van a heredar su funcionalidad, en las funciones que vamos a definir, vamos a recibir los llamados a las funciones nativas del ciclo de vida de Godot

Ahora vamos a crear una nueva clase llamada StateMachine, hay que recordar que al usar la definición class_name podremos referenciar nuestras clases desde otras clases. En esta clase vamos a tener un poco mas de complejidad, lo primero es definir un Signal que se llama changeState, aca puedes ver que es un Signal en Godot Este Signal nos va a permitir escuchar el cambio de estádo. Luego definimos una variable initialState de tipo NodePath(), esto lo definimos usando @export lo que en Godot significa que podemos anclar archivos o elementos desde el editor, es lo mismo que hacemos en Unity al exponer una variable en el editor, esta variable va a estar ligada a los estados que ya definimos en nuestros nodos. Luego, creamos una variable state de tipo State (recuerden la clase que habiamos creado previamente) y va a recibir nuestra variable initialState, la cual contiene el nodo (donde estan definidos los estádos en el editor).

Hasta acá vamos con la primera parte del tutorial, se que es un tema un poco denso especialmente si somos novatos, pero es cuestión de analizar y replicar hasta poder interiorizar.

En el siguiente post vamos a sobreescribir las funciones que necesitamos en el StateMachine, y también, las funciones de cada estádo.

Godot Juorney

Andres Ramirez — Fri, 10 Nov 2023 03:44:35 +0000

En el mundo del game development hay bastantes herramientas hoy en día, y si hablamos de herramientas, tenemos que diferenciar entre 2 grandes grupos: las librerias y los game engines.

Librerias
Son una serie de funciones que nos permiten acelerar el proceso de desarrollo, dentro de este contexto podría hablar de PhaserJS que es una libreria de JavaScript para desarrollar juegos, o incluso React y React Fiber, que es una abstracción de ThreeJS para React, en python tendríamos pygame, cocos2d, y así podría nombrar infinidad de librerias en diferentes lenguajes.

Game Engines
Es el software especializado para crear juegos, podría decirse que es un todo en uno, donde encontramos un editor y multiples funcionalidades para llevar a cabo nuestro cometido, dentro de este marco tenemos a Unity, Unreal Engine, Construct, Defold, Godot, y otros cuantos más.

Godot
Ahora, especificamente esta serie de posts va a ser orientada al desarrollo con Godot, escogí Godot por su facilidad, versatilidad y por que es open source, y su gran mejora desde la version 4.0 y después de la polemica que se armó con Unity, en general lo que buscaba era un entorno fácil de entender y que fuera agradable de programar, y sin duda fue algo que encontré en Godot y su lenguaje de Scripting GDScript (muy similar a Python).

Afortunadamente el panorama de Godot está creciendo bastante y ya se encuentran tutoriales y cursos realmente buenos sobre este gran engine, en mi caso pienso subir tutoriales sobre temas especificos y trataré de ir referenciando buenos videos sobre las bases del editor.

Los siguientes links son una lista de referencia para iniciar con las bases de este engine.

Eso si, todo está en inglés (sorry not sorry).

En mi siguiente post, vamos a iniciar con algo muy básico, empezando con desarrollo 2D, vamos a crear un personaje principal y una maquina de estados, la idea es aprender desde 0 como desarrollar buen código, organizado y modular.

La práctica hace al programador

Andres Ramirez — Sun, 11 Sep 2022 01:22:56 +0000

Hacer por hacer

Uno de los principales problemas cuando empezamos a programar, es saber aplicar los nuevos conocimientos adquiridos después de leer un libro o hacer un curso, a veces las ideas no fluyen y terminamos encajonados en el marco de lo aprendido.
En twitter y otras redes he visto incontables hilos de recursos para realizar proyectos, debo decir hay unos bastante interesantes (mas adelante pondré varios recursos), pero en ese punto es donde comencé a ver un problema y es el de realizar proyectos por que si, sin un objetivo claro, debo decir que cualquier práctica que hagamos nos va a servir a largo plazo, pero a veces el embarcarnos en proyectos al azar terminaremos perdiendo tiempo, lo veo similar al problema de la "cursitis", es decir, acumular cursos sin hacer proyectos donde se implemente y se extienda el conocimiento adquirido.
Hay que recordar que la forma en la que el cerebro aprende se fundamenta en 3 partes:

Asimilación del tema, es decir, pasar de lo abstracto a lo entendible, para esto usamos comparaciones y similes con acciones o elementos que ya entendamos previamente.
Conocimiento, en este punto ya entendemos la idea principal pero aún no somos capaces de aplicarla en otros contextos (acá es donde se quedan los que sufren de "cursitis").
Entendimiento, en este punto ya estamos en capacidad de aplicar lo aprendido y extenderlo a nuevos conceptos, acá el cerebro ya domina el tema y puede crear nuevas vertientes de conocimiento.

Organización

Para prevenir ese problema, lo que podemos hacer es tener un sistema interno, es decir, ordenar nuestras ideas, para eso me gusta mucho usar checklists, ya que me permiten aterrizar las ideas y darles un "paso a paso" que puedo ir realizando sin que nada se me pase por alto.
Este checklist será el resultado del análisis del proyecto y que quiero realizar, pero antes del checklist, debo definir el objetivo, vamos a ver un ejemplo:

Objetivo: Aprender a estructurar una página estática de forma semántica y agregar la parte visual por medio de CSS definiendo variables para los colores y las estructuras.
Proyecto: Clonación de una Landing Page existente
Herramientas: Visual Studio Code, Live Server, HTML y CSS
Librerias: Ninguna.
Tiempo: 1 día
Fecha de Inicio: 20/09/2022
Referencia: Front End Mentor

Este es un ejemplo de la definición básica del proyecto que queremos realizar, vamos a prácticar una definición semántica del HTML y la implementación del código CSS, el siguiente paso sería la definición del CheckList

Definiendo el CheckList

Crear el proyecto en github
Descargar la carpeta base del proyecto localmente
Crear el archivo index.html y styles.css
Crear el markup base de forma semántica de la pagina HTML
Probar live server
Crear los elementos internos del markup
Adicionar el código reset en el CSS
Adicionar las variables CSS de los colores y otros valores.
Revisar el proyecto localmente
Crear el sitio en github pages

Este sería un ejemplo de checkList, obviamente puede ser mas detallado y mejor aún, incluir los comandos necesarios en cada paso si se necesita (por ejemplo si necesitamos instalar librerias), el tener este "paso a paso" nos va a permitir también tener una especie de memoria para recordar como hicimos el proyecto.

No dispares con escopeta si necesitas un rifle

Sentarnos a definir que queremos practicar o aprender, con tiempos claros y un objetivo especifico, permitirá que aprovechemos mejor nuestro tiempo, adicionalmente tendremos una especie de documentación del proceso y una bitacora, a medida que los temas se hacen mas complejos, se incluyan mas librerias, herramientas, conceptos, etc, se hace mas necesario tener un documento claro donde podamos acudir si algo se nos olvida a futuro, este documento sería la definición y el checkList.

Recursos

Si lo que se quiere es realizar practicas en desarrollo web, les dejo algunos recursos e ideas interesantes, las cuales pueden aplicar para practicar los multiples temas que incluye esta disciplina.

Front End Mentor aunque es de pago, tiene algunos proyectos grátis que se pueden realizar, me gusta por que es guiado y tiene bastantes opciones.
Dribble Sin duda de mis preferidas, hay miles de ejemplos y conceptos de diseños web y aplicaciones moviles que podrían ser muy interesantes de llevar a cabo.
Codepen Challenges Codepen tiene una sección con retos interesantes para llevar a cabo, adicionalmente la ventaja de no tener que instalar nada local.
Daily UI Te suscribes y te llega un reto al correo.
Codier Otra página con retos interesantes.

Ideas para proyectos

Sistema POS para restaurantes
Fitness APP
Food planer APP
Language Learning APP
Criminal Alert (alertar por GPS si se está en una zona donde hayan sido reportados muchos robos)
Personal Finance APP
Supermarket Calculator APP

Como conclusión, la práctica hace al maestro, pero la práctica bien orientada te llevará a la maestría sin tanto sufrimiento.

React desde 0

Andres Ramirez — Tue, 31 May 2022 03:56:27 +0000

Empezando con React, parte 1

Mi intención con esta serie de posts que voy a realizar es establecer un path de estudio desde 0 con React, si bien hay muchos cursos allá afuera bastante completos, estos posts los hago con la intención de interiorizar un poco mas el conocimiento que ya tengo y de paso, que sirva como guía para los que están iniciando con este framework, aclaro que vale mucho la pena revisar la documentación de React (también está en español), es bastante completa, sin más, empecemos.

Indice

Fundamentos
Elementos del DOM
Agregando clases a un elemento
ReactDOM
JSX
- Anidando componentes

Fundamentos

React se basa, al igual que muchos otros frameworks hoy en día, en el concepto de componentes.
Un componente es una pieza de código que puede ser reutilizada cuantas veces sea necesario, incluso entre proyectos (depende de como se escriba), esto permite reducir considerablemente la cantidad de código y sigue el principio DRY (dont repeat yourself). Veamos un ejemplo simple:

function NewButton (props) {
  // Se retorna un nuevo elemento del DOM
  return <button type="button">{props.label}</button>;
}
// Renderiza el componente
ReactDOM.render(<NewButton label="Save" />, document.getElementById("app"))

Vemos dos elementos clave acá, una función en JavaScript plano que retorna un elemento del DOM, en este caso un botón, vemos una propiedad "props.label" que es básicamente un valor que se le pasa a ese componente y vemos también algo llamado ReactDOM.render, que es la forma en como React renderiza nuestro componente en una posición que nosotros establecemos, en este caso esa posición sería en el nodo "app".

Las páginas que hacemos con React se llaman SPA (Single page application), mas adelante ahondaré en este concepto y en las diversas formas en las que podemos usar React para crear diferentes tipos de aplicaciones.
Con React, evitamos interactuar directamente con el api del DOM, React lo hace por nosotros, podría decirse que es como un intermediario, esto se hace para poder tener un buen rendimiento al hacer modificaciones en esos elementos del DOM que queremos cambiar, en otras palabras, no interactuamos directamente con esos elementos del DOM si no con elementos de React (React elements).

Recordemos que es el DOM y que es el Api del DOM.

Elementos del DOM

React usa una función llamada createElement para representar un elemento del DOM, ejemplo:

React.createElement("h2", {id: "subtitle"}, "Subtitulo de la página")

El primer argumento define el tipo de elemento, el segundo las propiedades, en este caso el Id sería "subtitle", y el tercer argumento representa el hijo del elemento, puede ser un nodo cualquiera envuelto entre <>, en este caso es solo el texto "subtitulo de la página".
Al renderizar React mostrará:

<h2 id="subtitle">subtitulo de la página</h2>

Como vemos, las propiedades son adicionadas como atributos, el hijo, es agregado como texto plano dentro del elemento, básicamente, un elemento de React es un literal de JavaScript que le dice a React como construir un elemento del DOM, si hacemos un console.log al elemento, veríamos algo como esto:

{
  $$typeof: Symbol(React.element),
  "type": "h2",
  "key": null,
  "ref": null,
  "props": {id: "subtitle", children: "subtitulo de la página"},
  "_owner": null,
  "_store": {}
}

En este caso, el type le dice a React que tipo de elemento es, HTML o un SVG, props contiene los datos y los nodos hijos que van a ser construidos, la propiedad children se usa para mostrar otros nodos anidados como texto en este caso.

ReactDOM

Una vez el elemento ha sido generado, ReactDOM contiene lo necesario para poder renderizar ese elemento en el navegador, esto lo hacemos usando ReactDOM.render, para poder renderizar el elemento, necesitamos 2 argumentos, el elemento a renderizar como primer argumento y en donde lo vamos a renderizar como segundo argumento.

const subtitle = React.createElement("h2", null, "subtitulo de la página");
ReactDOM.render(subtitle, document.getElementById("app"));

Al renderizar, quedaría algo como lo siguiente:

<body>
  <div id="app">
  <h2>subtitulo de la página</h2>
  </div>
</body>

Para renderizar elementos internamente, React usa los props.children, en este ejemplo, el texto que renderiza subtitulo de la página, que es hijo del elemento h2, sería nuestro children, pero estos children no son solo un elemento, son un arbol de elementos (element tree) que contiene un elemento padre y de ahí en adelante crece. Por ejemplo para renderizar una lista sería algo como esto:

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>

React.createElement("ul", null, 
  React.createElement("li", null, "Elemento 1"),
  React.createElement("li", null, "Elemento 2"),
  React.createElement("li", null, "Elemento 3"),
);

Vemos el nodo principal ul y los hijos, que serían los li.

Agregando clases a un elemento

Class es una palabra reservada de JavaScript, por eso React usa className para recibir los nombres de las clases en un componente, ejemplo:

React.createElement("ul", {className: "elements"}, 
  React.createElement("li", null, "Elemento 1"),
  React.createElement("li", null, "Elemento 2"),
  React.createElement("li", null, "Elemento 3"),
);

Ya renderizado quedaría algo como esto:

<ul class="elements">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>

En este punto al ver el código es posible que esté confundido/a, ya que se ve diferente al código usualmente usado con React, mas complejo y tortuoso, bueno, el código que he puesto en los ejemplos es el que maneja React directamente, pero para facilitarnos la vida vamos a trabajar con JSX, JSX podría decirse que es una combinación de JavaScript y XML, y nos permite definir elementos de React usando una sintaxis basada en etiquetas directamente en nuestro código JavaScript, es decir, ya no necesitamos complicarnos la vida con la sintaxis compleja de createElement.

JSX

JSX también funciona con componentes, silo que de una forma mucho mas simple, nuestro componente tendrá un nombre definido que es el que usaremos en la etiqueta, hasta cierto punto es similar a crear un web component
Por ejemplo, el código moderno de un componente simple sería algo como esto:

const Users = (props) => {
  const {names} = props;
  return (
    <ul>
     {names.map((item, i) => <li key={i}>{item}</li>)}
    </ul>
  )
}

export default Users;

Y para usarlo lo definiríamos en el componente padre así:

 <div className="App">
    <Users names={users} />
 </div>

Anidando componentes

Siguiendo con el ejemplo anterior, si quisiera algo mas granular y definir cada li como un componente independiente al cual le pueda definir mas propiedades, podemos hacerlo de la siguiente manera:

const User = (props) => {
const {name} = props;
  return (
    <li>
       {name}
    </li>
  )
}

export default User;

En el componente padre, que ahora sería Users, tendriamos que importar el subcomponente e integrarlo

import User from './User';

const Users = (props) => {
  const {names} = props;
  return (
    <ul>
     {names.map((item, i) => <User key={i} name={item} />)}
    </ul>
  )
}

export default Users;

 <div className="App">
    <Users names={users} />
 </div>

En este caso vemos como podemos ir anidando componentes hasta el nivel que necesitemos, en los ejemplos anteriores he usado algo como esto {name}, esto se conoce como JavaScript expressions, y es la forma en como podemos mostrar datos dinámicos en los componentes.
Otro punto importante, es que al mapear arrays, necesitamos usar un KEY, este identificador es usado por React para su referencia interna, lo pueden ver en los ejemplos al usar map, le paso al elemento una etiqueta key={i}.

Cual es el inconveniente de usar JSX? que el navegador no lo entiende, por eso toca usar compiladores como https://babeljs.io/ que convertirán el código de React a JavaScript puro. (Mas adelante voy a explicar esto a fondo).

React Fragments

Todo componente de React necesita estar dentro de un solo contenedor, usualmente usamos un div para envolver todo la estructura, pero si no deseamos que se renderice un elemento y queremos que solo se muestre el contenido, React nos ofrece una opción llamada fragmentos.
Para definir un fragmento lo podemos hacer de dos formas:

<React.Fragment></React.Fragment>

o de la forma simplificada

<></>

Ese elemento no será visible en el DOM.