ManzDev
LightNews LightNews
banner
manz.dev
ManzDev
@manz.dev
370 followers 91 following 180 posts
@Twitch Partner | Web developer & Engineer | http://manz.dev
Content creator at http://lenguajeJS.com | I❤️HTML/CSS/JS
FullStack teacher at @eoi | «Odio quedarme a med
Posts Replies Media Videos
manz.dev
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>
September 18, 2025 at 2:30 PM
manz.dev
📘 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)
September 4, 2025 at 11:54 AM
manz.dev
📒 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...
September 3, 2025 at 11:28 AM
manz.dev
🚀 ¡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)); }
August 25, 2025 at 4:36 PM
manz.dev
🥊 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.
August 22, 2025 at 11:24 AM
manz.dev
¡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
August 22, 2025 at 10:34 AM
manz.dev
¡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

👇
August 21, 2025 at 4:36 PM
manz.dev
📚 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, ] }
August 21, 2025 at 10:09 AM
manz.dev
📒 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 👇
August 20, 2025 at 10:40 AM
manz.dev
🚀 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.
August 19, 2025 at 10:16 AM
manz.dev
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)
August 18, 2025 at 3:00 PM
manz.dev
🚀 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)
August 12, 2025 at 9:57 AM
manz.dev
💜 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; } } }
August 11, 2025 at 10:05 AM
manz.dev
📚 ¿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) */ }
August 7, 2025 at 12:02 PM
manz.dev
🚀 ¡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>
August 6, 2025 at 2:23 PM
manz.dev
🧡 ¿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); }
August 5, 2025 at 4:19 PM
manz.dev
✅ ¿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)
August 4, 2025 at 12:27 PM
manz.dev
🚀 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.
July 31, 2025 at 11:29 AM
manz.dev
📘 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
July 30, 2025 at 11:02 AM
manz.dev
💜 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

👇
July 29, 2025 at 12:45 PM
manz.dev
🧪 ¿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

👇
July 28, 2025 at 12:02 PM
manz.dev
💛 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
July 23, 2025 at 1:32 PM
manz.dev
💜 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 } }
July 22, 2025 at 12:21 PM
manz.dev
🧡 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. -->
July 21, 2025 at 12:12 PM
manz.dev
💜 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`
July 19, 2025 at 12:34 PM