
# Construyendo una Red de Seguridad alrededor de la Automatización DeFi

En los últimos meses he estado construyendo una capa de seguridad alrededor de la automatización en DeFi.

No farmea, no persigue yields, no intenta ser “smart money”. Su trabajo es mucho más aburrido: **vigilar cosas, conectar algunos puntos y decir “es lo bastante seguro para actuar” o “mejor párate”**.

Este post es una pequeña introducción a lo que estoy construyendo y, sobre todo, a cómo lo estoy pensando. No voy a enseñarlo todo; eso es intencional.

## Qué problema intento resolver

Si llevas un tiempo cerca de la automatización en DeFi, probablemente has visto al menos uno de estos patrones:

- Scripts que siguen corriendo felices mucho después de que las suposiciones originales hayan muerto.
- “Health checks” que solo verifican que el proceso está arriba, no que sea seguro.
- Bots que intentan hacer rebalance o harvest en entornos claramente hostiles: sin gas, con precios malos, con RPC rotos.

Lo que quiero de esta capa de seguridad es sencillo:

> Antes de tocar fondos on-chain, responde una pregunta:  
> **«¿Es realmente responsable actuar ahora mismo?»**

A veces la respuesta debería ser “sí, adelante”.  
A veces la respuesta debería ser “no, y aquí está el motivo”.  
Y a veces la respuesta debería ser “no tengo ni idea, así que te voy a bloquear”.

Ese último caso es el que más me preocupa.

## Un poco de cómo funciona (sin contarlo todo)

Muy a alto nivel:

- Vigila distintos tipos de señales:  
  balances, disponibilidad de gas, salud de estrategias, condiciones de salida…
- Las combina en **decisiones explícitas**:
  - “actúa ahora”,
  - “espera y vuelve a mirar luego”,
  - “me niego a actuar en estas condiciones”.
- Intenta que los **motivos** sean visibles:
  - no solo “failed”, sino “skipped porque no hay suficiente gas runway”,
  - no solo “error”, sino “el RPC está ciego, trato esto como inseguro”.

Por debajo no es más que TypeScript, unos cuantos servicios y más tests de los que me gustaría admitir. Lo interesante no es el framework, son las preguntas que obligo al código a contestar.

Hay partes que no voy a describir en detalle:

- umbrales concretos y combinaciones de señales,
- internals operativos,
- parte del cableado de producción.

Piensa en esta serie como **notas de campo**, no como una especificación completa.

## En qué se va a centrar esta serie

No quiero convertir esto en un changelog de features. Prefiero escribir sobre las decisiones que hay detrás, por ejemplo:

- Cuándo debería un sistema automatizado **negarse** a actuar, incluso si técnicamente puede.
- Cómo decides qué significa “suficiente runway” antes de que empiece a ser irresponsable.
- Dónde cambias conscientemente comodidad del desarrollador por seguridad del usuario.
- Cómo codificas esas ideas para que tu yo del futuro no pueda ignorarlas en silencio.

Cada post probablemente se centrará en una pieza pequeña del sistema:

- un servicio,
- un patrón,
- un check o umbral concreto,

y lo usará como excusa para hablar de **buen vs mal código, y buenas vs malas decisiones**.

Verás fragmentos reales del código, pero siempre con un pequeño desenfoque donde no quiero entrar en detalles operativos.

## Qué estoy dispuesto a enseñar (y qué no)

Estoy dispuesto a enseñar:

- cómo diseño health checks que hacen algo más que “¿el proceso está arriba?”,
- cómo pienso en fallar *cerrado* vs fallar *abierto*,
- cómo me obligo a ser honesto con tests y contratos explícitos.

No voy a enseñar:

- todo lo que se puede configurar ni cómo,
- todas y cada una de las señales y umbrales,
- nada que realmente filtre postura operativa.

Si alguna vez algo de código parece un poco redactado o simplificado, asume que es a propósito.

## Qué viene después

En el siguiente post voy a entrar en una pieza que suena trivial y no lo es:

> cómo decido si hay “suficiente gas” como para dejar que el sistema actúe.

Sobre el papel parece “solo mira el balance”.  
En la práctica se convierte en una conversación sobre **runway, fallos de RPC y cuándo ir a ciegas debería significar un stop duro**.


Construyendo una Red de Seguridad alrededor de la Automatización DeFi


# Comenzando con TypeScript en 2024

TypeScript se ha convertido en el estándar de facto para el desarrollo JavaScript en 2024. Aquí tienes todo lo que necesitas saber para empezar.

## ¿Por qué TypeScript?

TypeScript ofrece varias ventajas sobre JavaScript puro:

- **Seguridad de tipos**: Detecta errores en tiempo de compilación
- **Mejor soporte IDE**: Autocompletado mejorado y refactorización
- **Código autodocumentado**: Los tipos sirven como documentación
- **Refactorización más fácil**: Cambios de código con confianza

## Configurando TypeScript

Primero, instala TypeScript globalmente:

```bash
npm install -g typescript
```

Crea un nuevo proyecto:

```bash
mkdir my-typescript-project
cd my-typescript-project
npm init -y
tsc --init
```

## Tipos Básicos

Aquí están los tipos fundamentales de TypeScript:

```typescript
// Tipos primitivos
let nombre: string = 'Angel'
let edad: number = 30
let activo: boolean = true

// Arrays
let numeros: number[] = [1, 2, 3]
let nombres: Array<string> = ['Angel', 'Maria']

// Objetos
interface Usuario {
  id: number
  nombre: string
  email?: string // Propiedad opcional
}

const usuario: Usuario = {
  id: 1,
  nombre: 'Angel Batlles'
}
```

## Funciones

TypeScript hace las funciones mucho más predecibles:

```typescript
function saludar(nombre: string): string {
  return `¡Hola, ${nombre}!`
}

// Funciones flecha
const sumar = (a: number, b: number): number => a + b

// Parámetros opcionales
function construirMensaje(nombre: string, edad?: number): string {
  if (edad) {
    return `${nombre} tiene ${edad} años`
  }
  return `Hola, ${nombre}`
}
```

## Interfaces vs Types

Ambos sirven propósitos similares pero tienen diferencias sutiles:

```typescript
// Interface
interface RespuestaApi {
  datos: any[]
  estado: number
  mensaje: string
}

// Type alias
type Estado = 'cargando' | 'éxito' | 'error'

type UsuarioConEstado = Usuario & {
  estado: Estado
}
```

## Tipos Genéricos

Los genéricos te permiten escribir código reutilizable:

```typescript
function identidad<T>(arg: T): T {
  return arg
}

// Uso
const resultadoString = identidad<string>('hola')
const resultadoNumero = identidad<number>(42)

// Interfaces genéricas
interface Repositorio<T> {
  crear(item: T): Promise<T>
  buscarPorId(id: string): Promise<T | null>
  actualizar(id: string, actualizaciones: Partial<T>): Promise<T>
  eliminar(id: string): Promise<void>
}
```

## Mejores Prácticas

1. **Usa modo estricto**: Habilita verificaciones estrictas en `tsconfig.json`
2. **Evita `any`**: Usa tipos específicos o `unknown` en su lugar
3. **Aprovecha la inferencia de tipos**: No sobre-anotes
4. **Usa tipos utilitarios**: `Partial<T>`, `Required<T>`, `Pick<T, K>`

## Conclusión

TypeScript es una inversión en calidad de código y experiencia del desarrollador. Empieza pequeño, añade tipos gradualmente y disfruta de los beneficios de código más seguro y mantenible.

¡Feliz programación! 🚀


Comenzando con TypeScript en 2024


# Construyendo Apps Web Responsivas con Next.js 15

Next.js 15 ha llegado con mejoras significativas en rendimiento, experiencia del desarrollador y nuevas características que hacen que construir aplicaciones web modernas sea aún mejor.

## Qué hay de nuevo en Next.js 15

### Turbopack (Estable)

Turbopack ahora es estable y proporciona hasta 53% más rápido en iteración local y 94% más rápido en builds iniciales comparado con Webpack.

### Soporte para React 19

Soporte completo para características de React 19 incluyendo:

- Server Components
- Características concurrentes
- Nuevos hooks como `use()`

### Caché Mejorado

Mejores estrategias de cache con control más granular sobre la invalidación de cache.

## Configurando Next.js 15

Crea un nuevo proyecto de Next.js 15:

```bash
npx create-next-app@latest mi-app
cd mi-app
npm run dev
```

### Opciones de Configuración Clave

Actualiza tu `next.config.js`:

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js'
        }
      }
    }
  },
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com'
      }
    ]
  }
}

module.exports = nextConfig
```

## Construyendo Componentes Responsivos

### Usando CSS Grid y Flexbox

```jsx
// components/Layout.jsx
import styles from './Layout.module.css'

export default function Layout({ children }) {
  return (
    <div className={styles.container}>
      <header className={styles.header}>
        <nav className={styles.nav}>{/* Elementos de navegación */}</nav>
      </header>
      <main className={styles.main}>{children}</main>
      <footer className={styles.footer}>{/* Contenido del footer */}</footer>
    </div>
  )
}
```

```css
/* Layout.module.css */
.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.header {
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main {
  padding: 2rem 0;
}

.footer {
  padding: 1rem 0;
  border-top: 1px solid #eee;
  text-align: center;
}

@media (max-width: 768px) {
  .container {
    padding: 0 0.5rem;
  }

  .nav {
    flex-direction: column;
    gap: 1rem;
  }
}
```

### Server Components para Mejor Rendimiento

```jsx
// app/blog/page.jsx (App Router)
import { getPosts } from '@/lib/posts'
import PostCard from '@/components/PostCard'

export default async function BlogPage() {
  const posts = await getPosts()

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {posts.map(post => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  )
}
```

## Imágenes Optimizadas y Rendimiento

```jsx
import Image from 'next/image'

export default function Hero() {
  return (
    <section className="relative h-screen">
      <Image
        src="/hero-bg.jpg"
        alt="Fondo del hero"
        fill
        style={{ objectFit: 'cover' }}
        priority
        sizes="100vw"
      />
      <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
        <h1 className="text-4xl md:text-6xl text-white font-bold text-center">
          Bienvenido a Nuestro Sitio
        </h1>
      </div>
    </section>
  )
}
```

## Rutas Dinámicas y API Routes

```jsx
// app/blog/[slug]/page.jsx
import { getPost } from '@/lib/posts'
import { notFound } from 'next/navigation'

export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map(post => ({
    slug: post.slug
  }))
}

export default async function PostPage({ params }) {
  const post = await getPost(params.slug)

  if (!post) {
    notFound()
  }

  return (
    <article className="max-w-4xl mx-auto">
      <h1 className="text-3xl font-bold mb-4">{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  )
}
```

## Mejores Prácticas para Next.js 15

1. **Usa Server Components por defecto**: Solo usa Client Components cuando sea necesario
2. **Implementa Incremental Static Regeneration**: Para contenido dinámico que no cambia frecuentemente
3. **Optimiza imágenes**: Siempre usa el componente Image de Next.js
4. **Implementa error boundaries apropiados**: Maneja errores con gracia
5. **Usa TypeScript**: Mejor experiencia de desarrollo y seguridad de tipos

## Consideraciones de Despliegue

### Despliegue en Vercel

```bash
npm install -g vercel
vercel
```

### Despliegue con Docker

```dockerfile
FROM node:18-alpine

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build

EXPOSE 3000
CMD ["npm", "start"]
```

## Conclusión

Next.js 15 proporciona una excelente base para construir aplicaciones web modernas y responsivas. Con el rendimiento mejorado de Turbopack y el soporte para React 19, el desarrollo nunca ha sido más fluido.

La combinación de Server Components, imágenes optimizadas y cache inteligente hace de Next.js 15 una opción poderosa para cualquier proyecto web.

¡Empieza a construir hoy! 🚀
