Sign in

ManzDev

@manz.dev
440 followers 91 following 211 posts

@Twitch Partner | Web developer & Engineer | manz.dev Content creator at lenguajeJS.com | I❤️HTML/CSS/JS FullStack teacher at @eoi | «Odio quedarme a med

PostsRepliesMedia
ManzDev @manz.dev · 16/03/2026
🔥 ¡Nuevo video en Youtube! 🔥 OPENCODE + OLLAMA INTELIGENCIA ARTIFICIAL 100% LOCAL ✅ Uso de modelos locales con ollama ✅ Modelos cuantizados ✅ Usar Opencode con modelos locales ✅ Customizar modelos con Modelfile (estilo docker) 👇 Links
Inteligencia Artificial 100% local usando Opencode con Ollama
151
ManzDev @manz.dev · 11/03/2026
🔥 ¡Nuevo video! Tutorial de ComfyUI 🔥 ✅ ComfyUI: Herramienta para crear imágenes ✅ En local: GRATIS y sin suscripciones ✅ Conceptos y modelos para utilizar ✅ Explicaciones con workflows de ejemplo 👇 Link
121
ManzDev @manz.dev · 24/02/2026
¡Este domingo 1/MAR empieza la FASE 2 del BOOTCAMP GRATUITO de Desarrollo web moderno. ✅ Bases de HTML ✅ Etiquetas (desde `<div>` hasta `<template>`) ✅ Semántica, accesibilidad y rendimiento ✅ HTML-first y mejora progresiva ✅ Novedades (diálogos, popovers, invokers...) 👇
120
ManzDev @manz.dev · 20/02/2026
La clase del Bootcamp de ayer, creo que ha sido la mejor con diferencia. El feedback ha sido buenísimo. ¿Qué te pareció? ✅ Inteligencia Artificial y LLM ✅ Agentes: OpenCode ✅ Usamos Ollama como LLM local ✅ Usamos ComfyUI en local para generar imágenes 👇 ¡Tienes ya la clase en Youtube!
132
ManzDev @manz.dev · 12/02/2026
El próximo JUEVES 19, tendremos la cuarta clase del Bootcamp gratuito: Inteligencia Artificial. ✅ Inteligencia Artificial y LLM ✅ IA: Modalidad cloud vs local ✅ Instalación y uso de Ollama (LLM locales) ✅ Modelos LLM y agentes (OpenCode) ✅ IA Generativa: Workflows con ComfyUI 👇 Enlaces abajo
Día 4 del Bootcamp (Fase 1): Clase de Inteligencia Artificial.
4122
ManzDev @manz.dev · 11/02/2026
¡Este domingo 15, nueva clase del Bootcamp gratuito! ✅ Día 1: WSL y Terminal de Linux ✅ Día 2: Fundamentos de Javascript 📆 Día 3: Control de proyectos JS Vamos a aprender a crear y gestionar un proyecto Javascript usando herramientas como pnpm, node, oxc y usando git y GitHub. 👇 Enlaces abajo
Día 3: Control de proyectos (Fase 1)
Tercera clase del Bootcamp gratuito ManzDev 2026 donde aprenderemos, entre otras cosas, a crear y gestionar un proyecto Javascript utilizando pnpm, node, usando un linter moderno (oxc), git, y usando GitHub, desplegando en GitHub Pages.
160
ManzDev @manz.dev · 10/02/2026
¡Ya está disponible la segunda clase del Bootcamp! FUNDAMENTOS DE JAVASCRIPT ✨ Variables (const, let e using) ✨ Tipos de datos (String, Map... y hasta Symbol) ✨ Condicionales y bucles ✨ Funciones (Arrow functions incluidas) ✨ Clases 👇 Enlace al video abajo
Fundamentos de programación en Javascript, protagonizado por nuestro gato robot de Javascript.
120
ManzDev @manz.dev · 09/02/2026
¡Ya está publicada la clase del domingo 8 en Youtube! ✅ Clase 1: Instalación WSL + Terminal de Linux ✅ Clase 2: Fundamentos + Bases de Javascript 📆 Clase 3 (15/FEB): Bases de Git + PNPM + OXC 📆 Clase 4 (19/FEB): Inteligencia Artificial + IA local 👇 Enlaces abajo
Progreso (timeline) del Bootcamp ManzDev 2026 que estamos emitiendo en Twitch/Youtube los fines de semana:

Clase 1: Instalación WSL + Terminal de Linux
Clase 2: Fundamentos + Bases de Javascript
Clase 3 (próximamente): Bases de Git + PNPM + OXC
Clase 4 (desbloqueable): Inteligencia Artificial + IA local

Ya están disponibles las dos primeras clases (Terminal y Fundamentos) en Youtube.
110
ManzDev @manz.dev · 07/02/2026
¡Mañana, 8/FEB, seguimos con el Bootcamp gratuito! ✨ Recuerda: Bootcamp enfocado en ENTENDER. ✨ Todos los domingos, en Twitch y Youtube. ✨ En la web tienes más información. ✨ Si te perdiste la primera sesión, ¡video en la web! ✨ Mañana: Fundamentos de programación / Javascript. 👇 Links abajo
111
ManzDev @manz.dev · 02/02/2026
¡Ayer comenzamos el Bootcamp gratuito de Desarrollo web en Twitch/Youtube! ¡Más de 300 usuarios simultáneos entre ambas plataformas! ¡Un domingo! ¡Gracias a todos! 💖 👇 Tienes el contenido en la web del Bootcamp
111
ManzDev @manz.dev · 25/01/2026
⌛ ¡Sólo falta una semana y arrancamos! ✅ Bootcamp de fundamentos web ✅ Inicio: 1 de FEBRERO ✅ Twitch / Youtube ✅ Todos los domingos ✅ Gratuito 🚀 ¿Vienes a aprender conmigo?
111
ManzDev @manz.dev · 11/01/2026
💜 ¡Acabo de lanzar la nueva HTML Cheatsheet 2026! ✅ Separados por temática y subcategorías ✅ Etiquetas HTML/SVG y atributos modernos ✅ Modos de Scripting (módulos, maps, rules...) ✅ Capacidades multimedia de HTML ✅ Formato PDF lista para imprimir 👇
Etiquetas HTML: Sintaxis, etiquetas de documento, metadatos, relaciones, modalidades de carga, SEO y redes sociales, formularios, validaciones, agrupación, texto, enlaces, tablas, multimedia (audio/video), iframes, scripting y SVG.
15212
ManzDev @manz.dev · 03/01/2026
💜 ¡Comandos de terminal! ¡Nueva Cheatsheet 2026! ✅ Separados por temática y subcategorías ✅ Alternativas modernas a comandos clásicos ✅ Colores para indicar si son Rust/Go/Python ... ✅ Recetas para instalar ciertas herramientas ✅ Formato PDF lista para imprimir 👇
Comandos de terminal: Ayuda, usuarios, ficheros y carpetas, herramientas de red, descarga, editores y exploradores de archivos, manipulación de texto, shell y comandos de instalación, multimedia, inteligencia artificial, etc...
120
ManzDev @manz.dev · 22/12/2025
¡Tengo algo que anunciar! ¡El próximo 1/FEB comenzamos Bootcamp gratuito de Desarrollo web en Twitch/Youtube! ✅ Prioridad: entender los fundamentos ✅ Enfoque moderno ✅ Tienes el temario en la web ✅ Si tienes alguna duda, visita la FAQ 👇 ¡Comparte y sígueme en redes para no perdértelo!
Bootcamp Manz.dev: ¡A partir de Febrero, una clase semanal explicando las bases del desarrollo web para todo aquel que le interese!
132
ManzDev @manz.dev · 09/12/2025
🎨 ¡Modern CSS Cheatsheets 2026! ¡Acabo de lanzar las nuevas Cheatsheets CSS! Incluye: ✅ Descargable en PDF ✅ Color + Box Model + Corner Shape ✅ Fonts + Efectos + Masks + Shapes ✅ Animaciones + Flex + Grid + Anchor Position ✅ Matemáticas + Lógica CSS + Condicionales ⬇ ¡Y mucho más!
Modern CSS Cheatsheets: CSS Syntax, Color models, CSS Box model, Fonts and text, MultiColumns, Background, Images, CSS Rules, Effects, Masks, CSS Shapes, Animations, Transforms, Flex, Grid, Position, Anchor Position, CSS Logic and Conditionals.
1522
ManzDev @manz.dev · 18/09/2025
Una de las limitaciones de Flex y Grid era no poder colocar líneas divisorias a las celdas. Con la nueva propiedad CSS `rule` de Decoration Gaps podemos crear esas decoraciones a los gaps de nuestro diseño: ✅ Propiedades `column-rule-*` ✅ Atajos `rule` 👇 Te la explico abajo
<div class="grid">
  ...
</div>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(5, 40px);
  grid-template-rows: repeat(5, 40px);
  place-items: center;
  width: max-content;
  border: 2px solid black;

  rule: 1px dotted black;
  gap: 2px;
}
</style>
141
ManzDev @manz.dev · 04/09/2025
🎭 Polimorfismo En prog: Un elemento puede usar comportamientos diferentes en distintos contextos En CSS: Elemento flexible y adaptable para tener un comportamiento visual diferente según su contexto ¡Los media/container queries y los condicionales if() o :has() permiten aplicar lógica en CSS!
Polimorfismo

- Antiguamente: Uso de la cascada o selectores complejos, cosa que podía aumentar especificidad y hacer poco intuitivo la aplicación de estilos.

- Actualmente: Uso de condicionales if() o pseudoclase como :has(), así como media/container queries (incluso anidados con nesting) para cambiar comportamientos dependiendo de la situaciones.
100
ManzDev @manz.dev · 04/09/2025
🧬 Herencia En programación: Reutilizar y extender comportamientos desde jerarquías superiores En CSS: Podemos dar estilo a elementos superiores y los inferiores obtienen esos comportamientos visuales. La regla @layer (fusionar estilos) y CSS Shadow Parts (dar estilo a zonas encapsuladas).
Herencia

- Antiguamente: Usando herencia tradicional, o keywords como inherit, initial o unset. Usar metodologías CSS para organizar y simular mecanismos superiores de herencia.

- Actualmente: La regla @layer para evitar solapamientos de especificidades y Shadow Parts para dar estilo a secciones encapsuladas.
100
ManzDev @manz.dev · 04/09/2025
🧠 Abstracción En programación: Oculta detalles complejos y simplifica llevándolo a otro nivel. En CSS: Dar estilo a un elemento puede ser muy verboso. Abstraer y simplificar permite verlo más sencillo. ¡Nesting CSS + variables + funciones CSS (y pronto mixins)! OpenProps también es excelente.
Abstracción

- Tradicionalmente: Uso de procesadores para hacer más "programáticamente" cosas que CSS no podía hacer antes. Uso de TailwindCSS (u otros frameworks) para simplificar su uso y aumentar velocidad de desarrollo.

- Actualmente: El nesting, las variables de CSS, las funciones de CSS (pronto los mixins) y OpenProps nos dan herramientas muy interesantes de abstracción.
120
ManzDev @manz.dev · 04/09/2025
📦 Encapsulación En programación: Guardar información aislada para controlar y proteger acceso externo En CSS: Los devs suelen tener problemas al cambiar estilos por accidente debido a la naturaleza global de CSS. ¡HTML/CSS ya tiene encapsulación nativa! Shadow DOM + @scope
Encapsulación:

- Antiguamente: Simulada con BEM, o conseguida con terceros con CSS Modules.
- Actualmente: Se puede conseguir con Shadow DOM (JS), Shadow DOM declarativo (HTML) y con la regla @scope para limitar ámbitos.
100
ManzDev @manz.dev · 04/09/2025
📘 Principios de OOP 📘 ¿Existen también para CSS? Uno de los principales problemas de CSS es que los DESARROLLADORES ❌no se preocupan en aprender CSS correctamente. CSS no es OOP, sin embargo, sus principios se pueden aplicar de forma muy similar en CSS... 👇 ¡Observa!
Encapsulación
Abstracción
Herencia
Polimorfismo

¡¿...en CSS?!

(Mucha gente se va a poner nerviosa en este hilo)
111
ManzDev @manz.dev · 03/09/2025
📒 Curso gratuito de programación Frontend ¡Inscripciones recién abiertas! Buscamos alumnos interesados en entrar de forma profesional al mundo de la programación, aprendiendo fundamentos, usando la inteligencia artificial y herramientas modernas de forma adecuada. 👇 Link
✅ Bases: Preparación de entorno, terminal y WSL
✅ Diseño: HTML, CSS, Tailwind y DaisyUI
✅ Ecosistema Javascript: NPM, Node, Vite
✅ Frameworks: Vue, Pinia, Vitest, Astro
✅ Herramientas: Firebase/Supabase, Netlify...
✅ Soft skills: Empleabilidad, proyecto, etc...
110
ManzDev @manz.dev · 25/08/2025
✅ La función se usa sin el `var()` ✅ Sin parámetros, usa los valores por defecto ✅ Indicando un parámetro, procesa la función 🤩 Si tipas los parámetros e indicas un valor incorrecto, ¡usará los valores por defecto! 👇 Sigue
.logo {
  --size: 200px;
  
  width: var(--size);
  height: var(--size);
  background: --gradient(green);
  border-radius: 1rem;
  color: white;
  font-family: Outfit;
  font-size: 5rem;
  font-weight: 800;
  display: grid;
  place-items: end;
  padding: 1rem;
}
100
ManzDev @manz.dev · 25/08/2025
🚀 ¡Las funciones CSS han llegado a CSS! 🚀 ✅ La regla `@function` permite crear funciones ✅ El nombre de la función se prefija con `--` ✅ Opcionalmente, puedes tipar los parámetros, dar un valor por defecto y tipar la devolución ✅ La propiedad `result` devuelve el valor 👇 Sigue
@function --gradient(--color <color>: rebeccapurple) returns type(<image>) {
  --color1: color-mix(in srgb, var(--color), black 60%);
  --color2: color-mix(in srgb, var(--color), black 5%);
  result: linear-gradient(75deg, var(--color1), var(--color2));
}
121
ManzDev @manz.dev · 22/08/2025
🥊 DESTRUYENDO MITOS 🥊 Una pregunta que me hacen mucho: ¿Qué es mejor, `getElementById()` o `querySelector()`? Analizamos: 1️⃣ Búsqueda de elementos 2️⃣ Ámbito de búsqueda 3️⃣ ¿Qué devuelve? 4️⃣ Rendimiento 5️⃣ Gestión de errores 6️⃣ Legibilidad de la API 👇
getElementById vs querySelector

getElementById
- Sólo puedes buscar elementos que tengan un ID (menos flexible)
- Es global. Sólo puedes buscar en todo el documento
- Devuelve exactamente el elemento (o null)
- Ligeramente más rápido, irrelevante en la mayoría de los casos (micro-optimización)
- Si se indica un ID inválido, nunca lanza error.
- Expresa intención clara: Obtener elemento por su ID.

querySelector
- Soporta cualquier selector CSS. Muy potente.
- Puedes buscar de forma global o acotada.
- Con querySelector devuelve el primero, con querySelectorAll devuelve una lista con todos los que coinciden.
- Algo más lento, debido al parseo de selectores CSS.
- Si se indica un selector inválido, lanza un error SyntaxError.
- Separación por objetivos: Buscar el primero o todos los elementos.
111
ManzDev @manz.dev · 22/08/2025
¡Subido video a Youtube! Debatimos muchas ideas sobre el tema «¿Puede una IA pensar y razonar?» - ¿Qué es realmente pensar y razonar? - La historia de ELIZA - ¿Cómo piensa realmente una IA (LLM)? - Los loros estocásticos - Vibe coding vs Vibe learning - Debate y opiniones del chat 👇 Link
100
ManzDev @manz.dev · 21/08/2025
👇 Por aquí tienes los enlaces al Baseline: ➡ lenguajecss.com/baseline/ ➡ lenguajehtml.com/baseline/ ➡ lenguajejs.com/baseline/
000
ManzDev @manz.dev · 21/08/2025
¡Recuerda que en LenguajeCSS tienes una plataforma para ver de un solo vistazo el soporte en navegadores! ✅ Propiedades, funciones, reglas o selectores CSS ✅ Etiquetas y atributos HTML o SVG ✅ Tipos, APIs y métodos de Javascript ✅ Con posibilidad de filtrar ✅ Haciendo clic te da más información 👇
100
ManzDev @manz.dev · 21/08/2025
Si tienes curiosidad y quieres aprender más sobre el Shadow DOM, echa un vistazo a este post de mis cursos gratuitos de DOM, Javascript y WebComponents: lenguajejs.com/dom/shadow/a...
011
ManzDev @manz.dev · 21/08/2025
Además, el Shadow DOM permite decirle al CSS «No puedes pasar!!» y obliga al CSS a volver a la sombra, impidiendo que se apliquen estilos fuera de su scope.
- Balrog CSS... Vuelve a la sombra!!
- NO... PUEDES... PASAR!!

(Gandalf, the developer)
100
ManzDev @manz.dev · 21/08/2025
❌ Gran cantidad de HTML, vuelve el código confuso y es fácil cometer errores ✅ Crear una clase, y meter el HTML en un Shadow DOM simplifica el HTML y reorganiza, igual que con las clases OOP en programación ✅ Además, la API adoptedStyleSheets reduce los molestos FOUC (flash of unstyled content)
EVITAR:

<div class="family">
  <div class="person">
    <h1>Grandfather</h1>
    <fieldset>
      <legend>Children</legend>
      <div class="person">
        <h1>Uncle</h1>
        <fieldset>
          <legend>Children</legend>
        </fieldset>
      </div>
      <div class="person">
        <h1>Parent</h1>
        <fieldset>
          <legend>Children</legend>
          <div class="person">
            <h1>Child</h1>
            <fieldset>
              <legend>Children</legend>
            </fieldset>
          </div>
        </fieldset>
      </div>
    </fieldset>
  </div>  
</div>

MEJOR:

<family-member name="GrandFather">
  <family-member name="Uncle"></family-member>
  <family-member name="Parent">
    <family-member name="Child"></family-member>
  </family-member>
</family-member>
110
ManzDev @manz.dev · 21/08/2025
📚 Entendiendo el SHADOW DOM ❌ En programación es fácil escribir datos desorganizados y perder el foco ✅ La "encapsulación" consiste en organizar datos y métodos para simplificar y reutilizar ❌ Muchos datos sin organizar: desordenado y confuso ✅ Una clase OOP organiza, simplifica y reutiliza
EVITAR:

const family = {
  name: "Grandfather",
  children: [
    { 
      name: "Uncle", 
      children: []
    },
    { 
      name: "Parent", 
      children: [
        { 
          name: "Child", 
          children: [] 
        }
      ] 
    }
  ]
};

MEJOR:

export default class Person {
  constructor(name) {
    this.name = name;
    this.children = [];
  }

  addChild(child) {
    this.children.push(child);
  }
}

import Person from "./Person.js";

const child = new Person("Child");
const uncle = new Person("Uncle");
const parent = new Person("Parent");
parent.addChild(child);

const family = {
  name: "Grandfather",
  children: [
    uncle,
    parent,
  ]
}
111
ManzDev @manz.dev · 20/08/2025
Si te interesa, en mi web tengo un curso completo y gratuito para aprender a utilizar el DOM, paso a paso: ➡ lenguajejs.com/dom/
000
ManzDev @manz.dev · 20/08/2025
📒 Técnicas y consejos del DOM (2025) 📒 ✨ Busca hijos (descendientes) con .querySelector/All ✨ Busca padres (ancestros) con .closest() ⛔ Evita getElementById() u otros, menos flexibles ✨ Usa .classList y sus métodos para manipular clases ⛔ Evita el uso de .className Sigue 👇
131
ManzDev @manz.dev · 19/08/2025
En mi curso gratuito «Aprender a programar» tienes más información sobre Inteligencia Artificial orientada al desarrollo: 👉 lenguajejs.com/aprender-a-p... ¡Y también hago directos en Twitch! twitch.tv/ManzDev
011
ManzDev @manz.dev · 19/08/2025
Una vez con ollama y al menos un modelo LLM, podemos utilizar su API: 1️⃣ Usa la URL `http://localhost:11434/api/generate` ✨ El puerto 11434 viene de «LLAMA» 2️⃣ Usa el método POST y tipo JSON 3️⃣ Indica el modelo, prompt y desactiva stream de datos. Nos devolverá un JSON con la respuesta del modelo.
const URL = "http://localhost:11434/api/generate";

const options = {
  method: "POST",
  headers: { "content-type": "application/json" },
  body: JSON.stringify({
    model: "gemma3:270m",
    prompt: "¡Hola amigo! ¿Quién eres?",
    stream: false
  })
};

const data = await fetch(URL, options).then(res => res.json());
console.log(data);
110
ManzDev @manz.dev · 19/08/2025
Para usar modelos de IA* (LLM) en local, necesitas una máquina potente. Cuanto mayor sea el modelo, más ocupará y más recursos necesitará. 🟩 Ventajas: no requiere Internet, privacidad, gratuito 🟥 Desventaja: requiere hardware potente
Un modelo mini apenas requiere recursos, pero es un modelo «más tonto» que los modelos más pesados.

Aproximadamente, un modelo 1.5B ~ 1GB de tamaño

- Modelo mini:
CPU: 4-8 cores ~i5
GPU: 2-6GB
RAM: 8-16GB

- Modelo pequeño:
CPU: 8-12 cores ~i7
GPU: 6-16GB
RAM: 16-32GB

- Modelo mediano:
CPU: 12-32 cores ~i9
GPU: 24-80GB
RAM: 64-128GB

- Modelo grande
CPU: 32-64 cores ~Xeon
GPU: > 80GB
RAM: > 128GB
110
ManzDev @manz.dev · 19/08/2025
🦙 Para usar Ollama, necesitas cargar un modelo LLM. Los más populares son: Gemma3 (Google), Llama (Meta), GPT-OSS (OpenAI), DeepSeek (HF) o Qwen3 (Alibaba), entre otros. 1B = mil millones de parámetros. Cuantos más parámetros, más potente es el modelo (y más recursos necesita).
Los modelos LLM son archivos grandes que se diferencian por el número de parámetros que tienen. 1B = mil millones de parámetros. Cuantos más parámetros, más potente es el modelo (y más recursos necesita).

Algunos modelos como Gemma3 o Qwen3 tienen modelos mini, ideales para móviles.

🟩 Modelos mini: De 270M a 4B
🟨 Modelos pequeños: De 4B a 14B
🟧 Modelos medianos: De 14B a 70B
🟥 Modelos grandes: Mayores a 70B
110
ManzDev @manz.dev · 19/08/2025
🚀 Usa tu propio ChatGPT local con Ollama 🚀 🦙 Ollama es el programa (cliente). Puedes descargarlo desde su página oficial (Win/Mac/Linux). 🦙 Su última versión incorpora una interfaz similar a ChatGPT (Win/Mac), donde puedes elegir el modelo a usar y tener historiales con las conversaciones.
Usa tu propio ChatGPT local (Modelos locales de IA, LLM)

1) Ollama es un programa (cliente) que permite cargar modelos de IA* (LLM) con tu propio sistema, sin hacer uso de Internet.

2) Elige y descarga un modelo de IA* (LLM). Tienes muchos modelos para elegir.
141
ManzDev @manz.dev · 18/08/2025
A raíz de un tweet de Maximiliano Firtman ( x.com/maxifirtman/... ) decidí crear un breve artículo sobre el tema con mi opinión: 👇 «¿Pueden las inteligencias artificiales (LLM) pensar y razonar?» lenguajejs.com/aprender-a-p...
Loro estocástico y LLM (ChatGPT, DeepSeek, Claude, Gemini y Grok)
000
ManzDev @manz.dev · 12/08/2025
🚀 ROADMAP FRONT-END 2025 🚀 ✅ Orden para aprender conceptos y tecnologías ✅ Empieza por pilares: Diseño, desarrollo o terminal ❌ No empieces por frameworks. Aprende la base. ✅ Cuanto más a la derecha, más específico. ✅ Ojo con la IA: Pide explicaciones, no soluciones. 👇
ROADMAP Front-end Development 2025

FUNDAMENTOS/BASES DISEÑO WEB
- Marcado HTML
- Estilos CSS
- TailwindCSS
- CSS Moderno
- Open Props
- Lightning CSS
- SVG

FUNDAMENTOS/BASES DEL DESARROLLO WEB
- Programación (lógica)
- Javascript
- Javascript ESM (Cliente)
- DOM
- NodeJS (o alternativas: Bun, Deno...)
- Typescript
- WebComponents
- Usa un linter/formateador (Eslint, Oxlint, Prettier)
- Usa la IA (con cabeza): ChatGPT, DeepSeek, Claude, Gemini, Grok, o utiliza de forma local Ollama.

USO TERMINAL/AUTOMATIZACIÓN
- Terminal
- Git / GitHub Actions
- PNPM
- Vite / Vitest
- Despliegue: GitHub Pages / Vercel o Netlify si estás empezando
- Despliegue: VPS Digital Ocean / Azure / Google Cloud / AWS

FRAMEWORKS Y ABSTRACCIONES
- React, Zustand, Shadcn
- Vue, Pinia
- Angular, NGRX

CSS EN FRAMEWORKS
- CSS Modules
- PANDACSS
- DAISYUI

METAFRAMEWORKS
- NextJS (si usas React)
- Nuxt (si usas Vue)
- Astro (multiframework)
- Eleventy (si buscas accesibilidad o vanilla JS)
130
ManzDev @manz.dev · 11/08/2025
💜 Container Media Queries 💜 ¡Cómo las @media queries, pero mejores! ✅ Media Queries ▶ Tamaño total del navegador ✅ Container Queries ▶ Tamaño del contenedor padre ✅ Se adapta al contenedor donde está ubicado ✅ Ideal para componentes 👇
.container {
  container: card / inline-size;
  max-width: 1024px;
  min-width: 250px;
  overflow: hidden;
  resize: horizontal;
  
  & .item {
    display: flex;
    justify-content: center;
    align-items: center;
    
    @container card (width <= 550px) {
      flex-direction: column;
    }
  }
}
120
ManzDev @manz.dev · 07/08/2025
📚 ¿Sabes usar los nuevos Media Queries? 💥 No más `screen` o los molestos mínimos y máximos ✅ Expresiones de rangos flexibles y potentes ✅ ¡Puedes incluso anidar `@media` en el CSS! ✅ Los `media features` detectan otras características, no sólo la pantalla del dispositivo ¿A que son más cómodos? 👇
ANTES:

.container {
  width: 400px;
  height: 400px;
  background: grey;
}

@media screen and (min-width: 800px) and (max-width: 1200px) {
  .container {
    background: indigo;
  }
}

AHORA:

.container {
  width: 400px;
  height: 400px;
  background: grey;
  
  @media (800px <= width <= 1200px) {
    background: indigo;
  }
}

@media (orientation: landscape) {
  background: red;
}

@media (scripting: none) {
  /* No soporta Javascript */
}

@media (pointer: coarse) {
  /* Dispositivo limitado (touch) */
}

@media (display-mode: fullscreen) {
  /* Pulsó F11 (pantalla completa) */
}
100
ManzDev @manz.dev · 06/08/2025
Tienes más información en el apartado de Semántica de mi curso gratuito de HTML: lenguajehtml.com/html/#sem%C3...
000
ManzDev @manz.dev · 06/08/2025
🚀 ¡Deja de usar <div> para todo! ¡HTML semántico! ✅ Usa `<picture>` sobre `<img>` (soporte moderno) ✅ Usa bien los encabezados: <h1>, <h2>... ✅ Usa `<hgroup>` en titulares con info adicional ✅ Usa `rel` en los enlaces para dotar semántica Y sobre todo, recuerda... ❌ ¡No uses `<div>` siempre!
Sin semántica:

<div class="card">
  <div class="header">
    <img src="logo.jpg" />
    <div class="title">
      <h1>Título del post</h1>
      <h2>Subtítulo adicional</h2>
    </div>
  </div>
  <p>
    Este es el contenido de texto 
    principal de la tarjeta.
  </p>
  <div class="footer">
    Autor del artículo: 
    <a href="https://manz.dev/">Manz</a>
  </div>
</div>

Con semántica:

<article class="card">
  <header>
    <picture>
      <source srcset="logo.avif">
      <source srcset="logo.webp">
      <img src="logo.png" alt="Logo">
    </picture>
    <hgroup>
      <h1>Título del post</h1>
      <p>Subtítulo adicional</p>
    </hgroup>
  </header>
  <p>
    Este es el contenido de texto 
    principal de la tarjeta.
  </p>
  <footer>
    <p>
      Autor del artículo: 
      <a rel="author" 
        href="https://manz.dev/">Manz</a>
    </p>
  </footer>
</article>
130
ManzDev @manz.dev · 05/08/2025
🧡 ¿Sabías que puedes crear ventanas de diálogo sólo con HTML? (Sin Javascript, ni librerías) 🧡 ✅ Con <dialog> creamos ventana ✅ Con open la tenemos abierta o cerrada ✅ Con closedby cerramos con ESC o pulsando fuera ✅ Con command abrimos modales sin JS ✅ Con method=dialog cerramos ventana sin JS 👇
<button commandfor="modal" command="show-modal">
     Mostrar ventana
</button>

<dialog id="modal" open closedby="any">
  <h1>Título de la ventana</h1>
  <p>Esto es un ejemplo de mensaje de diálogo.</p>
  <form method="dialog">
    <button>Aceptar</button>
  </form>
</dialog>

dialog::backdrop {
  background: linear-gradient(#000d, #000a);
  backdrop-filter: blur(2px);
}
140
ManzDev @manz.dev · 04/08/2025
✅ ¿Qué formato de imagen debería usar? ✨ GIF: Antiguo, evitar ✨ JPG/PNG: Antiguos, pero seguros ✨ WebP: Reemplazo actual de JPG/PNG ✨ AVIF/JXL: Modernos, nueva generación ✨ SVG: Ideal para imágenes escalables 👇
Tabla de características de formatos de imágenes

1ª generación:
- JPG (Compresión con pérdidas)
- PNG (Compresión sin pérdidas, transparencia y animaciones)
- GIF (Compresión con pérdidas, soporte limitado de transparencias y animaciones)

2ª generación
- WEBP (Compresión con y sin pérdidas, transparencias, animaciones)

3ª generación
- AVIF (Compresión con y sin pérdidas, transparencias, animaciones)
- JPEG XL (Compresión con y sin pérdidas, transparencias, animaciones)

- SVG (compresión sin pérdidas -es texto-, transparencia, animaciones via CSS y escalado vectorial)
110
ManzDev @manz.dev · 31/07/2025
🚀 La evolución de los Webcomponents (2025) ✅ Puedes crear un fragmento del DOM de un string ✅ Puedes crear un CSS construible desde un string ✅ El `import ... with` importa módulos JSON/CSS ✅ HTML encapsulado: CSS sólo se aplica a ese HTML. ✅ Componente `<user-card>` nativo. Potente y flexible. 👇
La evolución de los WebComponents (2025)

- A partir de un string de HTML se puede crear un fragmento del DOM.
- A partir de un string con estilos CSS, se puede crear un objeto construible de CSS.
- La nueva sintaxis with de import permite cargar módulos en otros formatos. El JSON ya está parseado en data.
- De la misma forma, podremos hacerlo con archivos CSS en objetos nativos. Una "especie de DOM" de CSS.
- El de HTML aún no está disponible.
- Creamos un Shadow DOM HTML encapsulado. CSS "scopeado".
- Aplicamos el CSS al DOM encapsulado. Se aplica sólo a ese HTML.
- Añadimos el HTML ese componente. Es la alternativa moderna a innerHTML En el futuro, setHTML() sanitizará.
- Todo esto es nativo del browser. Sin automatizadores (webpack, vite...). Sin librerías. Sin frameworks.
112
ManzDev @manz.dev · 30/07/2025
📘 Todas las propiedades de animaciones de CSS y su soporte actual en navegadores ✅ Propiedades básicas de control de animación ✅ Control de ritmo de animación ✅ Composición de animaciones 🆕 ✅ Creación de timelines (scroll o vistas)🆕 ¿Las conocías todas? 👇
Propiedades CSS de animaciones:

- animation
- animation-composition
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-range
- animation-range-end
- animation-range-start
- animation-timeline
- animation-timing-function
100
ManzDev @manz.dev · 29/07/2025
💜 Tipando variables CSS con @property 💜 ✅ ¡Sí, CSS tiene variables! ✅ ¡Sí, CSS tiene tipos de datos! ✅ Usamos @property para tipar la variable `--x` ✅ El navegador sabe que es `--x` y puede animarla 👇
120