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
📘 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
🚀 ¡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
¡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
📚 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
📒 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
🚀 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
🚀 ¡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
ManzDev @manz.dev · 28/07/2025
🧪 ¿Conoces todas las etiquetas HTML que existen? ¡Seguro que te faltan algunas! ✅ Tabla periódica de los elementos de HTML5 ✅ Dividido por grupos o categorías ✅ Incluye novedades como `<search>` o `<hgroup>` ✅ Al pulsar en uno, te explica en español sus detalles 👇
120
ManzDev @manz.dev · 23/07/2025
💛 Cosas que no sabías de la etiqueta `<script>` 1️⃣ ¿Cómo cargas Javascript? (normal, defer y async) 2️⃣ Módulos ESM (carga Javascript, JSON o CSS) 3️⃣ Import Maps (Alias de nombres para importar) 4️⃣ Data Blocks (Datos sin formato personalizados) 5️⃣ NoJS (Alternativa para usuarios con JS desactivado) 👇Más
1) Modos de carga:
- Tradicional
- Diferido (defer)
- Asíncrono (async)

2) Módulos ESM
- Con type="module"
- Puedes usar imports
- Importar elementos de Javascript
- Importar objetos de ficheros JSON (import attributes)
- Importar estilos de ficheros CSS (import attributes)

3) Import Maps
- Crear un índice de nombres que referencian a una URL
- Luego, usar esos nombres en los import (como en NPM, pero sin NPM)

4) Data Blocks
- Bloques de datos personalizados para manipular

5) Versión sin Javascript
- Provee una versión alternativa para usuarios sin Javascript o con Javascript desactivado
121
ManzDev @manz.dev · 22/07/2025
💜 4 cosas que NO sabías sobre Nesting CSS ✅ Es la capacidad de anidar más CSS dentro de CSS. ❌ Ya no hace falta Sass/PostCSS. ✅ Hay dos sintaxis: 1) Usando & 2) Sin & (relaxed). ✅ Usa & cuando quieras añadir al contenedor. 👇 Más
/* CSS tradicional (sin nesting) */
.container { background: indigo }
.container .item { background: darkred }

/* CSS con nesting */
.container {
  background: indigo;
  .item {
    background: darkred;
  }
}

/* Equivale a .container:hover { ... } */
.container {
  background: indigo;
  &:hover { background: deeppink }
}

/* @media nesting (afecta sólo al container) */
.container {
  background: indigo;
  @media (width <= 800px) { background: blue }
}

/* Equivale a .item .container { ... } (Sobre el padre) */
.container {
  background: indigo;
  .item & { background: green }
}
100
ManzDev @manz.dev · 21/07/2025
🧡 Cosas que no sabías de la etiqueta HTML `<img>` 1️⃣ El `alt` es obligatorio 2️⃣ No hace falta `/` de autocierre 3️⃣ No confundir `alt` con `title` 4️⃣ Mejora SEO evitando nombres genéricos 5️⃣ AVIF o WebP los mejores formatos de imagen ⬇ Sigue
<!-- ❌ El atributo alt es obligatorio -->
<img src="imagen.jpg" />

<!-- ❌ La etiqueta <img> no requiere slash ( / ) -->
<img src="imagen.jpg" alt="Un gatito">

<!-- ❌ No confundir atributo title con alt -->
<img src="imagen.jpg" alt="Un gatito" title="Pasar el ratón por encima">

<!-- ✅ Para SEO, evita nombres genéricos -->
<img src="gato.jpg" alt="Un gatito">

<!-- ✅ Usa mejor formatos como AVIF o WebP -->
<img src="gato.avif" alt="Un gatito">

<!-- ✅ Con "lazy" pospones la carga de la imagen. Mejora rendimiento. -->
<img src="gato.avif" alt="Un gatito" loading="lazy">

<!-- ✅ Prioridad de descarga alta, útil para mejorar carga selectiva. -->
<img src="gato.avif" alt="Un gatito" fetchpriority="high">

<!-- ✅ El proceso de decodificación puede tardar. En imágenes grandes
        al final de la página indicamos que no le de prioridad y se
        centre en otras. -->
<img src="gato.avif" alt="Un gatito" decoding="async">

<!-- ✅ Algo similar a CSS Media queries en HTML. -->
131
ManzDev @manz.dev · 19/07/2025
💜 La propiedad `perspective` en CSS Consigue ilusión 3D muy vistosa con CSS añadiendo perspectiva (distancia observada, punto de fuga) ✨ Contenedor: borde gris, elemento: rojo interior ✨ La perspectiva se añade en el padre ✨ La variable `--perspective` tiene valor con `px`
121
ManzDev @manz.dev · 18/07/2025
Diferencia entre `filter` y `backdrop-filter` en CSS: Observa el `<div>` que indica «El pato anti-tailwind»: ✨ Con `filter` aplicas a un elemento del DOM e hijos ✨ Con `backdrop-filter` sólo a la parte visible detrás Ejemplo aplicando `blur(2px)`:
Dos imágenes del pato anti-tailwind, donde la primera, la caja de texto aplica un `filter: blur(2px)`, desenfocándolo todo. En el segundo, con `backdrop-filter: blur(2px)`, se desenfoca sólo la parte visible detrás del elemento (sin afectar al texto interior en primer plano).
120
ManzDev @manz.dev · 17/07/2025
💜 La nueva función `image-set()` de CSS Define un conjunto de imágenes para usar de fallback: Si no se carga la primera, lo intentará con la segunda, y así. Puedes elegir dependiendo de: ✅ Formato: AVIF > WebP > JPEG ✅ Resolución: 1x > 2x (HD) ✅ Ancho de banda (gradientes!)
.container {
  background-image: image-set(
    url("/assets/manzdev.avif") type("image/avif"),
    url("/assets/manzdev.webp") type("image/webp"),
    url("/assets/manzdev.jpg") type("image/jpeg")
  );
}
211
ManzDev @manz.dev · 16/07/2025
💜¡La nueva función `shape()` de CSS! Podemos utilizar `shape()` en CSS para hacer trayectos SVG en pocas lineas de código. ¡Muy potente! ✅ Usable con `clip-path` para recortar ✅ Usable con % para hacerlo responsive ✅ Usable con variables CSS ✅ Misma lógica de SVG en atributos path `d` ⬇ Más info
<div class="grass">
  <div class="player">
    <div class="shirt"></div>
    <div class="short"></div>
  </div>
</div>

<style>
  .shirt {
    clip-path: shape(
      from 0 0,
      hline to calc(50% - 75px),
      arc by calc(2 * 75px) 0 of 75px,
      hline to 100%, 
      vline to 50%,
      hline to 85%,
      vline to 100%,
      hline to 15%,
      vline to 50%,
      hline to 0,
      close
    );
  }
</style>
120
ManzDev @manz.dev · 15/07/2025
🆕 ¡La función attr() de CSS se vuelve muy potente! ✅ En el HTML, añades datos con atributos `data-*` ✅ En el CSS, usas la función attr() moderna ✅ Con la función `type()` tipas los datos ✅ Con los datos tipados, puedes reutilizarlos ⬇ Más info
¡La clásica función attr() de CSS se moderniza! ¡Ahora se puede usar datos de atributos HTML, tiparlos y reutilizarlos para múltiples fines!
<h2 data-color="indigo" data-size="150">Hello!</h2>
<h2 data-color="deeppink" data-size="350">Hello!</h2>

<style>
  h2 {
    color: white;
    padding: 0.75rem 1rem;
    background: attr(data-color type(<color>));
    width: attr(data-size px, type(<length>));
  }
</style>
131
ManzDev @manz.dev · 14/07/2025
🆕 ¡Nuevas funciones CSS! Dos nuevas funciones para contar elementos del DOM con CSS. Imagina varios elementos `<li>` que están al mismo nivel. `sibling-count()` Devuelve el total de hermanos `sibling-index()` Devuelve el número del hermano ⬇ Explicación abajo
Las nuevas funciones sibling-* de CSS.

Dado un número de elementos (que son hermanos en el DOM):
`sibling-count()` devuelve el total de elementos hermanos
`sibling-index()` devuelve la posición del elemento concreto<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  <li>Elemento 4</li>
  <li>Elemento 5</li>
</ul>

<style>
li {
  background: indigo;
  width: calc(sibling-count() * 50px);
  color: #fff;
  padding: 5px;
  padding-left: calc(sibling-index() * 25px);
}
</style>
110
ManzDev @manz.dev · 07/07/2025
📒💯 ¡Cómo está cambiando Javascript! ⏸ Funciones generadoras (¡pausables!) 🔁 Iteradores (gestión eficiente al recorrer estructuras) ❎ Método `.drop()` ➡ Descarta items ✅ Método `.take()` ➡ Selecciona y descarta el resto 📦 Método `.toArray()` ➡ Genera array final ✅ Navegadores actuales ⬇ Más info
// Genera un array de números infinitos: 0, 1, 2, 3...
function* generator() {
  let i = 0;
  while (true) {
    yield i;
    i++;
  }
}

// Creamos un nuevo array
const array = generator()                // Devuelve un iterador
  .drop(1)                               // Descartamos el primero (0)
  .take(100)                             // Tomamos los 100 siguientes
  .filter(number => number % 10 === 0)   // Filtramos sólo los múltiplos de 10
  .toArray();                            // Convertimos a array

console.log(array);               // [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
100
ManzDev @manz.dev · 01/07/2025
📒 Conoces `var`, `let` y `const` en Javascript, pero... ¿conocías `using`? 🟥 Con `var` se declaraban antiguamente variables 🟩 Hoy en día, usamos `let` y `const` ✨ Con `using` puedes declarar variables en un ámbito y gestionar tareas de limpieza automática ✅ Soportado por Chrome, Edge y Firefox. ⬇
// Declaración tradicional (legacy)
var element = new URL("https://manz.dev/");

// Declaración moderna
const element = new URL("https://manz.dev/");
let element = new URL("https://manz.dev/");

// Declaración controlada (gestión de recursos)
using element = new URL("https://manz.dev/");
111
ManzDev @manz.dev · 30/06/2025
📒 ¡Cheatsheet del DOM (moderno) de Javascript! ✨ Deja de usar getElementById ¡querySelector al rescate! ✨ Evita usar className. Mejor, classList ✨ Usa .style con .setProperty + .getPropertyValue ✨ Evita innerHTML. Usa getHTML/setHTMLUnsafe ✨ No al appendChild. Mejor append, prepend, before y after.
151
ManzDev @manz.dev · 23/06/2025
Si necesitas crearte un "pack" de iconos SVG en Astro (o cualquier webapp donde uses Vite), he publicado en GitHub `vite-plugin-supersvg` ✅ Pon tus SVG en `src/icons/` ✅ Separa en carpetas: `src/icons/socials/` ✅ Se creará un Sprite SVG con todos los iconos ✅ Usalo desde HTML, no necesitas JS 👇
110
ManzDev @manz.dev · 20/06/2025
¿Buscas un «CanIUse» MÁS directo? ✅ Múltiples características a la vez (y filtrables) ✅ Soporte Baseline en diferentes navegadores ✅ Más información al hacer click (y en español) ✅ Features de HTML, CSS y Javascript ⬇
141