¡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

⌛ ¡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?

💜 ¡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 👇

💜 ¡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 👇

¡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!

🎨 ¡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!

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

📘 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!

📒 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

🚀 ¡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

🥊 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 👇

¡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

¡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 👇

📚 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

📒 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 👇

🚀 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.

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...

🚀 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. 👇

💜 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 👇

📚 ¿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? 👇

🚀 ¡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!

🧡 ¿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 👇

✅ ¿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 👇

🚀 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. 👇

📘 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? 👇

💜 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 👇

🧪 ¿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 👇

💛 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

💜 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

🧡 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

💜 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`

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)`:

💜 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!)

💜¡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

🆕 ¡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

🆕 ¡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

📒💯 ¡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

📒 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. ⬇

📒 ¡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.

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 👇

¿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 ⬇

📒 ¿Ya le has echado un ojo a Temporal API? ✨ Si estás cansado del `new Date()` (y sus peculiaridades), será su reemplazo. ✨ Zonas horarias, miliseg, microseg... ¡y nanoseg! ✨ Bisiestos, días del mes... ¡hasta desfase horario! ✨ Sumar o restar tiempo, comparar fechas... 🟥 De momento, sólo en Firefox

🚀 ¡Tenemos nuevo curso! ¡Astro! ✅ Instalación ✅ Rutas y componentes ✅ Compartiendo información ✅ CSS y Javascript en Astro ✅ WebComponents en Astro En español, y gratuito.

📒 Mucho framework, pero... ¿Realmente sabes usar Javascript? Curso completo de JS: Español, gratis y en profundidad: 1️⃣ Primeros pasos 2️⃣ Tipos de datos 3️⃣ Estructuras 4️⃣ Módulos / OOP 5️⃣ Vite + Linters 6️⃣ Date + Intl + Temporal API 7️⃣ Regexp 8️⃣ Multimedia + Canvas 9️⃣ Fetch + Reactividad 🔟 Web API ⬇

¡Llegan los condicionales if a CSS en Chrome 137+! ✅ Son una especie de condicionales ternarios ✅ Mediante la función `style()` comprobamos estilos ✅ Con `supports()` podemos comprobar soporte ✅ Con `media()` similar a las media queries 💜 ¡CSS cada vez más potente! 💜

📒 El DOM... Ese gran desconocido... ✨ Diferencias: DOM / Virtual DOM / Shadow DOM ✨ querySelector: ¿Sigues usando getElementById? ✨ textContent vs innerText (¡no uses innerText!) ✨ Alternativas a .style: .classList + variables CSS ✨ ¡No uses más el viejo appendChild! Usa append

HTML es la base de la web. Y siempre se infravalora. ✨ Info de sus etiquetas y funcionalidades ✨ Cheatsheet descargable ✨ Tabla periódica de elementos HTML ✨ Baseline: Compatibilidad en navegadores ✨ Y alguna que otra sorpresa... 🔊 📙 LenguajeHTML. Gratis. Y en español.

¿Te cuesta mucho CSS? ¿No puedes ni centrar un div? Esto siempre pasa cuando no le dedicas tiempo en aprender sus bases de verdad. Tengo la solución: ¡Temario organizado y bien estructurado, listo para aprender! 📘 LenguajeCSS: Gratis y en español.

Lanzado también nuestro propio «CanIUse» de HTML, que se une al de CSS: ✅ Etiquetas HTML y su soporte en navegadores ✅ Atributos de dichas etiquetas HTML ✅ Categorizado por soporte Baseline ✅ Click para explicación de la etiqueta o atributo 👇 Link!

¡Acabo de lanzar CanIUse LenguajeCSS! Listado ordenado alfabéticamente de propiedades, funciones, reglas y selectores CSS con su compatibilidad. ✅ Muestra estado (baseline) ✅ Visible de un sólo vistazo ✅ Permite filtrar resultados ✅ Click, y te lleva a la documentación en español 👇 Link!