Forem: Dorian Morones

The 'Code' was Never the Core: Reimagining the DLC with AI

Dorian Morones — Fri, 01 May 2026 17:05:35 +0000

Based on my recent experience trying to integrate AI into my team’s Development Life Cycle (DLC), I’ve hit some unexpected roadblocks. It wasn't just about technical hurdles; it was a mix of outdated processes, skeptical colleagues, and the pressure to meet customer expectations for security and quality.

In searching for a "frictionless" way to introduce AI, I realized that the real hurdle isn't the tool or the output quality—it’s the human resistance to change.

The Engineering Identity Shift

This friction usually stems from a deep-seated identity crisis. As software engineers, we’ve spent decades tying our value to "the code." But whether we’re building a mobile app for an apartment complex, an HR system for payroll, or a new video game, our primary goal has always been to design systems that solve problems.

Code has always been the tool, not the core. Great systems aren't built by typing; they are built through engineering knowledge, architectural foresight, and a deep understanding of the customer. So why the friction? Is it a lack of AI prompts? A struggle with environment setup? Or is it just a primal human reaction to a shifting landscape?

From "Mechanical Typing" to "System Design"

When we stop viewing "coding" as the heart of our job, we see it for what it truly is: a mechanical action. Its automation is a natural step in the evolution of our craft.

Far from making us obsolete, this shift actually makes the software engineer more relevant than ever. When you aren’t stuck writing code line-by-line, you finally have the bandwidth to focus on what actually matters:

System Architecture: Designing for high performance and global scalability.
Strategic Selection: Choosing the right libraries, dependencies, and database schemas.
Cloud Infrastructure: Optimizing configurations for cost and reliability.

The Evolution of the Interface

We’ve been here before. We moved from punch cards to assembly, then to high-level languages like C++ and Python. Each time, we moved further away from the "metal" and closer to the "intent."

Today, we’re moving from "writing" to "interacting" with AI agents. It’s like managing a digital assembly line where specialized agents handle the grunt work—drafting specs, scaffolding APIs, or hunting for edge cases.

The Reality Check: Legacy Code

Of course, this isn't a magic wand. Integrating AI into a legacy codebase remains a massive challenge, especially when there are no defined patterns or documentation. If the app is "spaghetti" code, the AI will struggle to understand the original requirements.

But is this a new problem? No. It’s the exact same headache an engineer faces when they have to manually onboard or modernize a legacy tool. AI doesn't create the mess; it just shines a light on it. If a human can't understand the logic, an agent won't either. The work remains the same: we have to bridge the gap between where the system is and where it needs to be.

The Takeaway

The goal remains the same: solve the problem. Only the interface has changed—evolving to make our process faster, more reliable, and ultimately, more impactful.

The Augmented Builder: How AI Reimagined the Product-to-Code Pipeline

Dorian Morones — Fri, 01 May 2026 17:05:23 +0000

I've spent the last few weeks building Brainwake, a mental agility app. While the goal was to create a tool for cognitive focus, the real discovery was the "new normal" of the build process.

In 2026, the productivity boost from AI isn't just about "writing code faster"—it's about elevating the quality of the product from the first concept to the final commit. Here is how AI acted as a force multiplier across the entire lifecycle:

🧠 1. AI as a Strategic Product Partner

Before opening an IDE, I used AI to stress-test the core concept. We mapped out gamification mechanics for math and memory challenges, identifying user friction points before they became technical debt.

It acted as a product researcher, helping me define the "why" before I ever touched the "how."

Key wins:

Validated game mechanics through AI simulation
Identified user pain points early
Reduced design debt before development

🎨 2. Closing the Gap: Design Intent → Implementation

With a background in multimedia design, I'm obsessed with fidelity. AI has dissolved the wall between a visual idea and a working prototype.

I could describe complex UI interactions and "Square" aesthetic principles, and have the AI help translate those visual concepts into clean, high-performance React Native components in real-time.

The impact:

Faster prototyping from design vision to working code
Higher UI/UX fidelity without design-to-dev communication gaps
Fewer design iterations due to AI understanding aesthetic intent

🛠️ 3. Elevating the Engineering Craft

For the software engineer, AI has shifted the focus from "syntax" to "systems." For Brainwake, I used AI to:

Architect Local-First Data: Validating SQLite schemas and ensuring data persistence patterns were robust for offline-first usage.
Optimize Logic Engines: Refining the algorithms behind the rapid-fire mental challenges to ensure zero-latency execution.
Advanced Debugging: Using AI to simulate edge cases in state management that would typically take hours of manual testing to find.

📈 Measuring the Impact: The Velocity Shift

Moving from concept to a production-ready state happened at a pace that would have been impossible a few years ago. By offloading the "mechanical" tasks to AI, the metrics tell a clear story:

Metric	Traditional Workflow	Augmented Workflow (2026)
Code Velocity	2-3 weeks (MVP)	4 days (Full Prototype)
Test Coverage	60% (Manual Scripting)	95% (AI-Generated Edge Cases)
Iteration Loop	Hours (Fix/Re-compile)	Minutes (Real-time Refactoring)
Documentation	Post-launch afterthought	Simultaneous with Architecture

Key Performance Drivers

Rapid Product Iteration:
I was able to pivot the "Memory Match" logic three times in a single afternoon based on AI-simulated user feedback—a process that usually takes a full sprint of manual tweaking.

Zero-Debt Scaffolding:
By using AI to generate the boilerplate for state management and navigation, I saved roughly 40+ hours of foundational labor, allowing me to focus 100% on the core gameplay logic.

Instant Context Switching:
AI acted as a "live documentation" layer, meaning I spent 0% of my time hunting through Stack Overflow and 100% of my time inside the logic.

The Takeaway

The real power of AI isn't that it "works for you"—it's that it allows you to operate at a higher level of abstraction.

It handles the repetitive syntax and boilerplate so you can focus on architecture, UX, and the mission.

What's Next?

The future of engineering isn't just about being a "coder"; it's about being a Product-Minded Architect who knows how to leverage AI to move from idea to impact at record speed.

I'd love for you to try the app and let me know how it sharpens your focus.

→ Try Brainwake here

React Custom Tooltip

Dorian Morones — Sun, 14 Mar 2021 16:52:53 +0000

En ocasiones necesitamos dar información al usuario de la acción que ejecutara algún elemento del nuestro sitio web, una de las mejores formas de hacerlo es con un Tooltip.

Primero debemos escribir el markup de nuestro nuevo tooltip:

Necesitaremos 4 elementos como props:

content = sera el contenido a mostrar dentro del tooltip.
direction = definirá la posición del contenido.
delay = definirá el tiempo antes de mostrar el contenido.
children = sera el elemento que accionara el tooltip.

import React, { FunctionComponent, useState } from 'react';

//Styled Components
import {
    TooltipContainer,
    TooltipContent
} from './styles/Tooltip_Styles';

const Tooltip: FunctionComponent<TooltipProps> = ({ 
content, 
direction = 'bottom', 
delay = 300,  
children 
}) => {

  let timeout;
  const [show, setShow] = useState<boolean>(true);

  const showTip = () => {
    timeout = setTimeout(() => {
      setShow(true);
    }, delay);
  };

  const hideTip = () => {
    clearInterval(timeout);
    setShow(true);
  };

  return (
   <TooltipContainer
   onMouseEnter={showTip}
   onMouseLeave={hideTip}
   >
    {children}
    { show && (
     <TooltipContent direction={direction}>
      {content}
     </TooltipContent>
     )
    }
   </TooltipContainer>
  )
}

export default Tooltip;

Dentro de nuestro tooltip tenemos dos funciones:

showTip: esta función se activara cuando el cursor este sobre el contenedor del tooltip y encargara de mostrar el contenido del tooltip que recibimos en los props, cambiando el estado show a true.

const showTip = () => {
    timeout = setTimeout(() => {
      setShow(true);
    }, delay);
  };

hideTip: esta función se activara cuando el cursor salga del contenedor del tooltip y encargara de ocultar el contenido del tooltip, cambiando el estado show a false.

const hideTip = () => {
    clearInterval(timeout);
    setShow(true);
  };

En este punto ya tenemos la lógica para mostrar y ocultar el contenido del Tooltip, pero aún tenemos que definir la posición del contenido, y eso lo haremos con styled-components.

Pueden agregar los styled-components en el mismo archivo, pero sugiero sea en uno nuevo para tener más ordene en nuestro código.

En este nuevo archivo definiremos dos componentes:

TooltipContainer: sera el contenedor de todo el tooltip.
TooltipContent: sera el contenedor de la información que mostrara nuestro tooltip y la posición en la que esta información sé mostrar: top, bottom, left, right.

import styled, { css } from 'styled-components';

export const TooltipContainer = styled.div`
  display: inline-block;
  position: relative;
`

export const TooltipContent = styled.div`
  position: absolute;
  border-radius: 4px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px;
  color: #fff;
  background: #000;
  font-size: 14px;
  font-family: sans-serif;
  line-height: 1;
  z-index: 100;
  white-space: nowrap;
  &:before{
    content: '';
    left: 50%;
    border: solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-width: 6px;
    margin-left: calc(6px * -1);
  }
  ${props => {
    if(props.direction === 'top'){
      return css`
        top: calc(20px * -1);
        &:before {
          top: 100%;
          border-top-color: #000;
        }
      `
    }
    if(props.direction === 'bottom'){
      return css`
        bottom: calc(20px * -1);
        &:before {
          bottom: 100%;
          border-bottom-color: #000;
        }
      `
    }
    if(props.direction === 'left'){
      return css`
        left: auto;
        right: calc(100% + 20px);
        top: 50%;
        transform: translateX(0) translateY(-50%);
        &:before {
          left: auto;
          right: calc(6px * -2);
          top: 50%;
          transform: translateX(0) translateY(-50%);
          border-left-color: #000;
        }
      `
    }
    if(props.direction === 'right'){
      return css`
        left: calc(100% + 20px);
        top: 50%;
        transform: translateX(0) translateY(-50%);
        &:before {
          left: calc(6px * -1);
          top: 50%;
          transform: translateX(0) translateY(-50%);
          border-right-color: #000;
        }
      `
    }
  }}
`

5 extensiones de VS Code para frontend

Dorian Morones — Thu, 07 Jan 2021 20:02:18 +0000

Durante los últimos 3 años, estuve probando extensiones de VS code para poder facilitar el día a día, y estas son mi top 5 para desarrollo frontend:

Turbo Console Log

Esta extensión te permite generar solo con un shortcut "ctrl + alt + L" un console.log con información importante para ser identificados rápidamente en el explorador.

Ejemplo:

console.log("🚀 ~ file: example.tsx ~ line 97 ~ handleExample ~ valueExample", valueExample)

La estructura es bastante simple, primero el archivo donde está el console.log, la linea del archivo, la función en donde está el archivo y la variable que se asigna al console.log.

Descargar

Auto Close Tag

Muchas veces cuando inicias en el desarrollo de frontend (y aun después de varios años) puedes cometer el error de omitir la etiqueta de cierre de un div o algún párrafo, o escribir mal el nombre de la etiqueta de cierre, estos errores al ser tan pequeños son difíciles de encontrar entre tantas lineas de código, Auto Close tag es la solución.

Ejemplo:

// Sin Auto Close Tag
<div>
  <p>Auto Close Tag</o>
</dib>

// Con Auto Close Tag
<div>
  <p>Auto Close Tag</p>
</div>

Descargar

Auto Rename Tag

Algunas veces necesitamos cambiar etiquetas, por alguna otra, como párrafos por span, o por un, Auto Rename Tag nos ayuda a hacer esto bastante rápido y con muy poco margen de error.

Ejemplo:

// Sin Auto Rename Tag
<div>
  <p>Auto Close Tag</p>
</dib>

// Con Auto Rename Tag
<div>
  <h2>Auto Close Tag</h2>
</div>

Descargar

Import Cost

Cuando trabajas con algún framework de Javascript, siempre es bueno saber cuando pesa alguna dependencia que estas usando para saber si es la mejor opción, Import Cost te muestra el peso de cada import que tienes en tus archivos.

Descargar

GitLens — Git supercharged

La ultima y muy útil al trabajar en un equipo de desarrollo es GitLens, te da información sobre la línea de código en que estes situado, como quien la modifico, cuando, el commit en el que se modifico, y link directo a ese commit.

Descargar

CSS Background color en Textos

Dorian Morones — Wed, 06 Jan 2021 20:22:45 +0000

Los degradados de color en un sitio web son detalles muy llamativos que dan peso a cierta sección, pero no solo podemos utilizarlos como fondo de un contenedor o banner, también podemos agregar un degradado de color a títulos.

Primero tenemos que definir el texto al que aplicaremos el degradado:

<h1 class="gradient">Mi super titulo</h1>

Una ves tenemos listo nuestro titulo, solo tenemos que aplicar estilos generales:

h1{
    font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
    font-size: 70px;
    font-weight: bold;
    text-transform: uppercase;
}

Para agregar el degradado necesitamos una propiedad de css llamada 'linear-gradient', que se utiliza de la siguiente manera:

background-image: linear-gradient(direction, color-1, color-stop2, ...);

direction: es la dirección en la que el degradado trabajara.
color-1: en color principal o de inicio del degradado.
color-2: en color secundario o de cierre del degradado.

El código con linear-gradient aplicado se vería así:

.gradient {
  background: linear-gradient(to right, #30CFD0 30%, #520AAB 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Resultado:

Spinner facil y rapido

Dorian Morones — Tue, 05 Jan 2021 01:28:51 +0000

Un spinner es un componente muy importante para un sitio web, ya que nos ayudar a dar información al usuario sobre el estatus de nuestra página al realizar la primera carga, o después de una acción del usuario como cambiar de opción en el menú, abrir una galería de imágenes, o enviar un formulario.

Una forma muy fácil de hacer un spinner o loading es con puro css, de esta manera nos aseguramos que se visualizara y funcionara correctamente en cualquier navegador.

Primero necesitamos crear un contenedor HTML:

<div class="spinner"></div>

Ahora solo necesitamos aplicar los estilos sobre este contenedor, y al ser solo CSS, puedes elegir la manera que más te guste de implementar como CSS, SCSS, styled-components, o cualquier otro:

Primero definiremos el tamano de nuestro spinner y agregaremos bordes para que sea un poco más estético:

.spinner {
  width: 36px;
  height: 36px;
  border: 5px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  border-left-color: #7d47ff;
}

Una ves tenemos la estructura base de nuestro spinner agregaremos las animaciones, de esta manera haremos saber al usuario que nuestro sitio web sigue funcionando:

.spinner {
  width: 36px;
  height: 36px;
  border: 5px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  border-left-color: #7d47ff;

  animation: spin 1s ease infinite;
}

Una ves agregada la animación spin solo nos queda agregar los pasos de esa animación con keyframes

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}