GUÍA DE PROGRAMACIÓN

HTML5 es la última versión del lenguaje de marcado estándar para crear páginas web. Introduce nuevos elementos semánticos como header, nav, article, section y footer que mejoran la estructura y accesibilidad del contenido.

La semántica correcta permite que los motores de búsqueda y tecnologías de asistencia comprendan mejor la estructura de tu página, mejorando el SEO y la experiencia de usuarios con discapacidades.

Aprende a usar correctamente las etiquetas semánticas, atributos ARIA y mejores prácticas de accesibilidad WCAG para crear sitios web inclusivos y bien estructurados.

<!-- Estructura semántica HTML5 -->
<header>
  <nav>
    <ul>
      <li><a href="/">Inicio</a></li>
      <li><a href="/about">Acerca</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <header>
      <h1>Título del artículo</h1>
    </header>
    <p>Contenido del artículo...</p>
  </article>
</main>

<footer>
  <p>© 2026 Mi Sitio</p>
</footer>

✓ Marcar como completado

CSS3 es la tercera versión de las Hojas de Estilo en Cascada. Introduce módulos completos como Flexbox para layouts unidimensionales y CSS Grid para layouts bidimensionales complejos.

Flexbox permite crear sistemas de diseño flexibles y responsivos con propiedades como justify-content, align-items y flex-direction, resolviendo problemas comunes de centrado y distribución.

CSS Grid ofrece un sistema de rejilla bidimensional que facilita crear diseños complejos con filas y columnas. Las animaciones CSS permiten transiciones y keyframes nativos sin JavaScript.

/* Flexbox centering */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* CSS Grid layout */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

/* Animación CSS */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.animated {
  animation: pulse 2s infinite;
}

✓ Marcar como completado

El DOM (Document Object Model) es una representación estructurada de tu documento HTML que permite a JavaScript modificar el contenido, estructura y estilo de una página web de forma dinámica.

Aprende a seleccionar elementos con querySelector y getElementById, manipular contenido con textContent e innerHTML, y modificar estilos y clases CSS programáticamente.

El manejo de eventos te permite responder a acciones del usuario como clics, teclas, mouse y formularios, creando interactividad en tus aplicaciones web.

// Seleccionar elementos
const header = document.querySelector('header');
const buttons = document.querySelectorAll('.btn');

// Manipular contenido
header.textContent = 'Nuevo título';
header.innerHTML = '<h1>Título</h1>';

// Manipular estilos
element.style.color = '#fff';
element.style.display = 'none';

// Manipular clases
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('expanded');

// Event listeners
button.addEventListener('click', (e) => {
  console.log('Clic en:', e.target);
});

// Crear elementos
const newDiv = document.createElement('div');
newDiv.textContent = 'Nuevo elemento';
document.body.appendChild(newDiv);

✓ Marcar como completado

ES6 (ECMAScript 2015) y versiones posteriores introdujeron características modernas que revolucionaron cómo escribimos JavaScript. Arrow functions, destructuring, templates literals y más.

Las arrow functions proporcionan una sintaxis más concisa y lexical this. El destructuring permite extraer valores de arrays y objetos de forma elegante. Los módulos permiten organizar el código.

Aprende async/await para manejo de operaciones asíncronas, spread operator, optional chaining, nullish coalescing y otras características modernas del lenguaje.

// Arrow functions
const sum = (a, b) => a + b;
const greet = name => `Hola, ${name}!`;

// Destructuring
const { name, age } = user;
const [first, ...rest] = array;

// Template literals
const message = `Usuario: ${user.name}, Edad: ${user.age}`;

// Async/Await
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

// Spread operator
const newArray = [...oldArray];
const newObject = { ...oldObject };

// Optional chaining
const value = user?.profile?.settings?.theme;

✓ Marcar como completado

React es una biblioteca JavaScript para construir interfaces de usuario. Usa un modelo de componentes reutilizables que managean su propio estado y renderizan UI basada en datos.

Los componentes son funciones o clases que reciben props (propiedades) y retornan elementos React. Las props son datos pasados de componentes padres a hijos, permitiendo la composición.

JSX es una extensión de sintaxis que permite escribir código similar a HTML dentro de JavaScript. Se compila a llamadas a React.createElement.

// Componente funcional
function Welcome({ name }) {
  return <h1>Hola, {name}!</h1>;
}

// Componente con estado
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Incrementar
      </button>
    </div>
  );
}

// Composición de componentes
function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

✓ Marcar como completado

Los Hooks son funciones que permiten usar estado y otras características de React en componentes funcionales. useState managea el estado local, useEffect maneja efectos secundarios.

useEffect te permite ejecutar código cuando el componente se monta, actualiza o desmonta. Es perfecto para fetching de datos, suscripciones y manipulación del DOM.

Otros hooks importantes: useContext para contexto global, useReducer para estado complejo, useMemo y useCallback para optimización de rendimiento.

// useState - Estado local
const [count, setCount] = useState(0);

// useEffect - Efectos secundarios
useEffect(() => {
  document.title = `Contador: ${count}`;
  return () => cleanup(); // cleanup function
}, [count]); // dependencia

// useContext - Contexto global
const theme = useContext(ThemeContext);

// useReducer - Estado complejo
const [state, dispatch] = useReducer(
  reducer, 
  initialState
);

// useMemo - Memorización
const expensive = useMemo(() => 
  computeExpensiveValue(a, b), 
  [a, b]
);

✓ Marcar como completado

TypeScript es un superset de JavaScript que añade tipado estático opcional. Permite detectar errores en tiempo de desarrollo antes de ejecutar el código.

Los tipos básicos incluyen string, number, boolean, array, tuple, enum, y objetos. TypeScript infiere tipos automáticamente pero puedes declararlos explícitamente.

Aprende interfaces, types, generics y utilidad de tipos para crear código más robusto, mantenible y autodocumentado.

// Tipos básicos
let name: string = 'Adrian';
let age: number = 25;
let active: boolean = true;

// Arrays y objetos
let numbers: number[] = [1, 2, 3];
let user: { name: string; age: number } = {
  name: 'Adrian',
  age: 25
};

// Interfaces
interface User {
  id: number;
  name: string;
  email?: string; // opcional
}

// Generics
function identity<T>(arg: T): T {
  return arg;
}

// Tipos union
type Status = 'pending' | 'active' | 'completed';
let taskStatus: Status = 'pending';

✓ Marcar como completado

Node.js es un entorno de ejecución de JavaScript basado en el motor V8 de Chrome. Permite ejecutar JavaScript en el servidor, abriendo la posibilidad de usar el mismo lenguaje en frontend y backend.

Su arquitectura orientada a eventos y no bloqueante lo hace ideal para aplicaciones en tiempo real y que manejan muchas conexiones simultáneas como APIs y chat apps.

Aprende el sistema de módulos CommonJS, npm como gestor de paquetes, y conceptos fundamentales como el event loop y el manejo de asincronía.

// Crear servidor HTTP básico
const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 
    'Content-Type': 'text/plain' 
  });
  res.end('¡Hola desde Node.js!');
});

server.listen(3000, () => {
  console.log('Servidor en puerto 3000');
});

// Módulos y require
const fs = require('fs');
const path = require('path');

// NPM - instalar paquete
// npm install express

// Package.json
{
 "mi-app  "name":",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  }
}

✓ Marcar como completado

Express.js es el framework web más popular para Node.js. Proporciona una capa delgada de funcionalidades sobre Node.js para crear APIs y aplicaciones web de forma rápida y minimale.

Maneja rutas con métodos HTTP (GET, POST, PUT, DELETE), middleware para procesamiento de requests, y templating engines para renderizar vistas.

Aprende a crear rutas, usar middleware, manejar errores, validar datos y estructurar aplicaciones Express de forma modular.

const express = require('express');
const app = express();

app.use(express.json());

// Rutas GET
app.get('/api/users', (req, res) => {
  res.json([
    { id: 1, name: 'Adrian' },
    { id: 2, name: 'Maria' }
  ]);
});

// Ruta con parámetro
app.get('/api/users/:id', (req, res) => {
  const user = findUser(req.params.id);
  res.json(user);
});

// Ruta POST
app.post('/api/users', (req, res) => {
  const newUser = createUser(req.body);
  res.status(201).json(newUser);
});

// Middleware
app.use((req, res, next) => {
  console.log(`${req.method} ${req.url}`);
  next();
});

// Manejo de errores
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('Error interno');
});

app.listen(3000);

✓ Marcar como completado

Las bases de datos relacionales como PostgreSQL y MySQL almacenan datos en tablas con filas y columnas. Usan SQL (Structured Query Language) para manipular y consultar datos.

PostgreSQL es una base de datos objeto-relacional avanzada que soporta JSON, indices complejos, transacciones ACID yescalabilidad empresarial.

Aprende diseño de esquemas, normalización, consultas SQL básicas y avanzadas, joins, subconsultas y optimización básica de queries.

-- Crear tabla
CREATE TABLE users (
  id SERIAL PRIMARY KEY,
  name VARCHAR(100) NOT NULL,
  email VARCHAR(255) UNIQUE NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Insertar datos
INSERT INTO users (name, email) 
VALUES ('Adrian', 'adrian@example.com');

-- Consultas con JOIN
SELECT u.name, o.total
FROM users u
INNER JOIN orders o ON u.id = o.user_id
WHERE o.total > 100;

-- Actualizar
UPDATE users 
SET email = 'new@example.com' 
WHERE id = 1;

-- Eliminar
DELETE FROM users WHERE id = 1;

-- Consulta avanzada con agregados
SELECT 
  category,
  COUNT(*) as total,
  AVG(price) as avg_price
FROM products
GROUP BY category
HAVING COUNT(*) > 5;

✓ Marcar como completado

MongoDB es una base de datos NoSQL orientada a documentos. Almacena datos en documentos BSON (similar a JSON) con estructura flexible, ideal para prototipos y aplicaciones ágiles.

No requiere un esquema fijo, permitiendo guardar documentos con estructuras diferentes en la misma colección. Es escalable horizontalmente mediante sharding.

Aprende el modelo de documentos, operaciones CRUD, agregaciones, índices y cómo integrar MongoDB con Node.js usando Mongoose.

// Documento MongoDB (BSON)
{
  "_id": ObjectId("..."),
  "name": "Adrian",
  "email": "adrian@example.com",
  "age": 25,
  "address": {
    "city": "San Jose",
    "country": "Costa Rica"
  },
  "tags": ["developer", "frontend"],
  "createdAt": ISODate("2026-01-01")
}

// Consultas con Mongoose
const user = await User.find({ age: { $gte: 18 } })
  .sort({ name: 1 })
  .limit(10);

await User.create({ name: 'Adrian', email: '...' });

await User.findByIdAndUpdate(id, 
  { $set: { name: 'Nuevo nombre' } },
  { new: true }
);

// Agregación
const stats = await User.aggregate([
  { $group: { 
    _id: '$country', 
    total: { $sum: 1 } 
  }}
]);

✓ Marcar como completado

REST (Representational State Transfer) es un estilo de arquitectura para diseñar APIs web. Usa los métodos HTTP estándar para realizar operaciones CRUD sobre recursos.

Los principios REST incluyen: recursos como URLs, uso correcto de métodos HTTP, stateless (sin estado), respuestas con códigos de estado apropiados y formato JSON.

Aprende a diseñar APIs RESTful con endpoints claros, versionado, paginación, filtros, ordenamiento y documentación con OpenAPI/Swagger.

// Diseño RESTful de endpoints

// Recursos
GET    /api/users          // Listar usuarios
POST   /api/users          // Crear usuario
GET    /api/users/:id      // Obtener usuario
PUT    /api/users/:id      // Actualizar usuario
DELETE /api/users/:id      // Eliminar usuario

// Códigos de estado
200 OK - Solicitud exitosa
201 Created - Recurso creado
204 No Content - Eliminado exitosamente
400 Bad Request - Error en datos
401 Unauthorized - No autenticado
403 Forbidden - No autorizado
404 Not Found - Recurso no existe
500 Internal Server Error - Error del servidor

// Respuesta exitosa
{
  "success": true,
  "data": { "id": 1, "name": "Adrian" },
  "meta": { "page": 1, "total": 100 }
}

// Respuesta de error
{
  "success": false,
  "error": {
    "code": "VALIDATION_ERROR",
    "message": "Email inválido"
  }
}

✓ Marcar como completado

JWT (JSON Web Tokens) es un estándar para crear tokens de acceso que se usan en autenticación stateless. El token contiene información del usuario codificada en base64.

Un JWT tiene tres partes: header (algoritmo), payload (datos del usuario) y signature (verificación). Se firma digitalmente para prevenir manipulación.

Aprende a implementar autenticación con JWT, hashing de contraseñas con bcrypt, protección de rutas, refresh tokens y mejores prácticas de seguridad.

const jwt = require('jsonwebtoken');
const bcrypt = require('bcrypt');

// Generar token JWT
function generateToken(user) {
  return jwt.sign(
    { id: user.id, email: user.email },
    process.env.JWT_SECRET,
    { expiresIn: '24h' }
  );
}

// Middleware de autenticación
function authenticate(req, res, next) {
  const token = req.headers.authorization?.split(' ')[1];
  
  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded;
    next();
  } catch (error) {
    res.status(401).json({ error: 'Token inválido' });
  }
}

// Hash de contraseña
async function hashPassword(password) {
  return await bcrypt.hash(password, 10);
}

// Verificar contraseña
async function verifyPassword(password, hash) {
  return await bcrypt.compare(password, hash);
}

// Uso en ruta protegida
app.get('/profile', authenticate, (req, res) => {
  res.json(req.user);
});

✓ Marcar como completado

Docker permite empaquetar aplicaciones con todas sus dependencias en contenedores ligeros y portables. Esto garantiza que tu app funcione igual en cualquier entorno.

Un Dockerfile define cómo construir la imagen del contenedor. Docker Compose orchestration múltiples servicios (app, db, redis) para desarrollo local.

Aprende a containerizar aplicaciones Node.js, usar Docker Compose para desarrollo, y desplegar en servicios cloud como Vercel, Railway o Render.

// Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
EXPOSE 3000
CMD ["node", "index.js"]

// docker-compose.yml
version: '3.8'
services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - DATABASE_URL=postgres://db:5432/app
    depends_on:
      - db
  db:
    image: postgres:15
    environment:
      POSTGRES_PASSWORD: secret
    volumes:
      - pgdata:/var/lib/postgresql/data
volumes:
  pgdata:

✓ Marcar como completado

El pixel art es una forma de arte digital donde las imágenes se construyen a nivel de píxel individual. Cada píxel representa un punto de color en una cuadrícula, creando esa estética característica de los videojuegos retro.

Los conceptos fundamentales incluyen la escala de sprites, la diferencia entre pixel art indexed y RGBA, y la importancia de trabajar en canvas pequeños (32x32, 64x64) para luego escalar.

Aprende a configurar tu software para pixel art, usar herramientas como pencil tool, line tool, y bucket fill, y entender la diferencia entre pixel art estático y animado.

/* Configuración básica para pixel art */

/* Tamaños comunes de sprites */
- Iconos: 16x16, 24x24
- Personajes: 32x32, 48x48, 64x64
- Boss: 128x128, 256x256
- Tilemap: 16x16 por tile

/* Escalado */
/* Siempre usar Nearest Neighbor para mantener pixels sharp */
image-rendering: pixelated;
image-rendering: crisp-edges;

/* Paleta básica - GameBoy */
#0f380f (oscuro)
#306230 (medio)
#8bac0f (claro)
#9bbc0f (más claro)

/* Herramientas esenciales */
- Pencil: dibujar píxeles individuales
- Line: líneas rectas
- Rectangle/Ellipse: formas
- Bucket: relleno de color
- Eraser: borrar
- Select: selección

✓ Marcar como completado

Una paleta de colores es un conjunto limitado de colores usados en una pieza de pixel art. Las paletas bien diseñadas crean cohesión visual y facilitan la creación de obras coherentes.

Los principios incluyen limitar los colores (típicamente 4-16 por sprite), crear gradaciones suaves entre tonos, usar colores complementarios para contraste, y mantener consistencia de iluminación.

Aprende a crear paletas desde cero, usar generadores como Lospec o Picol, adaptar paletas existentes, y técnicas de shading con limited palette.

/* Estructura de una paleta */

/* Paleta de piel humana */
#ffccaa (highlight)
#eebb99 (midtone)
#cc8866 (shadow)
#995533 (deep shadow)

/* Técnicas de shading */

/* Gradiente horizontal */
color1 → color2 → color3 → color4

/* Shading direccional - luz desde arriba */
[■□□□]
[■▣□□]  ← highlight en píxeles superiores
[■□■□]  ← shadow en inferiores
[□□□□]

/* Paletas populares */
- Pico-8: 16 colores
- GameBoy: 4 colores
- NES: 54 colores
- ZX Spectrum: 15 colores

/* Herramientas online */
- Lospec.com/palettes
- Picol
- Palette from photo tools

✓ Marcar como completado

Un sprite es una imagen 2D que se integra en una escena más grande. Los sprites de personajes incluyen protagonistas, enemigos, NPCs y elementos interactivos del juego.

El proceso de diseño incluye: silueta distintiva, definición de proporciones (chibi, realista,etc), detalles en puntos clave, y animación básica en mente desde el inicio.

Aprende a diseñar personajes memorables, usar referencia sin copiar, crear variaciones de color (palette swap), y organizar sprites en sheets.

/* Proporciones de personajes */

/* Chibi - cabeza grande */
Cuerpo: 2-3 heads de alto
Cabeza: 1 head
Muy cute, popular en JRPGs

/* Clásico */
Cuerpo: 5-6 heads de alto
Más realista, estándar 16-bit

/* Proceso de diseño */

/* 1. Silueta - sin detalles */
[silueta negra del personaje]

/* 2. Añadir volumen básico */
[sombreado simple 2 colores]

/* 3. Detalles */
[agregar ojos, ropa, accesorios]

/* 4. Colores finales */
[aplicar paleta definitiva]

/* Spritesheet típico */
[Idle1][Idle2][Idle3][Idle4]
[Walk1][Walk2][Walk3][Walk4]
[Attack1][Attack2][Attack3]

✓ Marcar como completado

Un tileset es un conjunto de tiles (baldosas) que se combinan para crear niveles y escenarios. Son la base para crear mundos de juegos 2D con eficiencia y consistencia.

Los tiles pueden ser: suelo (grass, dirt, stone), paredes, objetos (trees, rocks), y decoraciones. Cada tile debe poder conectarse sin problemas con sus vecinos.

Aprende a crear tiles autotileables, diseñar transiciones entre biomas, organizar tilesets, y usar técnicas de autotiling para automatización.

/* Estructura de un tileset */

/* Tiles básicos - 16x16 o 32x32 */
[grass_00][grass_01][grass_02]  // superior, medio, inferior
[dirt_00]  // fill
[wall_00]   // pared

/* Tipos de tiles */
- Base: grass, dirt, water
- Wall: left, right, top, bottom, corner
- Decor: flowers, rocks
- Transition: grass-dirt, grass-water

/* Autotile - conexiones automáticas */
Cada tile tiene variantes:
- corner_top_left
- edge_top
- corner_top_right
- edge_left
- center
- edge_right
- corner_bottom_left
- edge_bottom
- corner_bottom_right

/* Tamaño de tileset común */
16x16 (retro)
32x32 (16-bit)
64x64 (HD pixel art)

✓ Marcar como completado

La animación en pixel art da vida a los personajes y elementos del juego. Los principios incluyen frames clave, timing, y ciclos de movimiento naturales.

Los ciclos básicos incluyen: idle (parado), walk (caminar), run (correr), attack (atacar), y hurt (dañado). Cada ciclo típicamente tiene 2-8 frames dependiendo de la complejidad.

Aprende el principio de anticipation y follow-through, cómo crear transiciones suaves entre animaciones, y técnicas como onioneskinning para mantener consistencia.

/* Ciclos de animación comunes */

/* Idle - personaje parado */
[frame1][frame2][frame3][frame4]  // respiración

/* Walk - ciclo de caminata */
[frame1] - pie izquierdo adelante
[frame2] - transición
[frame3] - pie derecho adelante
[frame4] - transición
(4-8 frames a 8-12 FPS)

/* Timing - principios */
- Anticipation: preparación antes de acción
- Action: el movimiento principal
- Follow-through: efecto residual
- Squash & stretch: deformación

/* Ejemplo: salto */
[1] agacharse (anticipation)
[2] salir del suelo (action)
[3] punto más alto
[4] caer
[5] contacto con suelo
[6] recuperación

/* FPS típico */
- UI: 8-12 FPS
- Personajes: 12-24 FPS
- Efectos: 24-60 FPS

✓ Marcar como completado

Aseprite es la herramienta profesional por excelencia para pixel art. Permite crear y editar sprites animados con funciones específicas como onion skinning, tilemap editing, y export avanzado.

Alternativas incluyen Piskel (gratuito y online), LibreSprite (open source), GraphicsGale, y Photoshop. Cada una tiene sus ventajas y curva de aprendizaje.

Aprende las funciones esenciales de Aseprite: layers, celdas, herramientas de selección, color cycling, y automatización con scripts.

/* Aseprite - atajos esenciales */

/* Herramientas */
B - Pencil (lápiz)
E - Eraser
G - Paint Bucket
L - Line
U - Rectangle/Ellipse
M - Move/Select
Shift+Click - Línea 45°

/* Capas (Layers) */
Ctrl+Shift+N - Nueva capa
Ctrl+J - Unir capas
Ctrl+Shift+E - Ocultar otras capas

/* Animación */
Ctrl+Click en frame - Nuevo frame
Ctrl+Shift+Click - Duplicar frame
F5-F8 - Ir a frame
Ctrl+Shift+C - Onion skin settings

/* Paletas */
Ctrl+P - Editar paleta
Ctrl+Shift+L - Importar paleta
Ctrl+E - Ajustar colores

/* Exportar */
Ctrl+Shift+S - Guardar copia
Ctrl+Alt+Shift+S - Exportar sprite sheet

/* Scripts */
https://github.com/aseprite/scripts

✓ Marcar como completado

La exportación adecuada es crucial para que tus sprites funcionen correctamente en juegos y aplicaciones. Cada formato tiene ventajas y casos de uso específicos.

Los formatos comunes incluyen PNG (sin pérdida, con transparencia), GIF (animado, 256 colores), y spritesheets (múltiples frames en una imagen). Para web, consideres optimized WebP.

Aprende a optimizar sprites para diferentes plataformas, crear spritesheets organizados, configurar exportación automática, y mejores prácticas para desarrollo de juegos.

/* Formatos de exportación */

/* PNG - recomendado para sprites */
- Sin pérdida de calidad
- Soporta transparencia completa
- Ideal para: todos los sprites

/* GIF - para animación simple */
- 256 colores máximo
- Transparencia binaria
- Ideal para: web, icons

/* WebP - optimización web */
- Mejor compresión que PNG
- Animación soportada
- Ideal para: web game assets

/* Spritesheet */
[player_idle_01][player_idle_02]
[player_walk_01][player_walk_02]
[player_attack][player_jump]

/* Configuración de exportación */

/* PNG */
- Depth: 32 bits (RGBA)
- Compression: default
- Interlaced: NO

/* Para Unity/Godot */
- Exportar como PNG
- Power of 2: opcional
- Strip empty edges

✓ Marcar como completado