ManzDev
banner
manz.dev
ManzDev
@manz.dev
@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
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
September 18, 2025 at 2:30 PM
🎭 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!
September 4, 2025 at 11:54 AM
🧬 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).
September 4, 2025 at 11:54 AM
🧠 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.
September 4, 2025 at 11:54 AM
📦 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
September 4, 2025 at 11:54 AM
📘 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!
September 4, 2025 at 11:54 AM
📒 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
September 3, 2025 at 11:28 AM
✅ 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
August 25, 2025 at 4:36 PM
🚀 ¡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
August 25, 2025 at 4:36 PM
🥊 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

👇
August 22, 2025 at 11:24 AM
¡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
👇 Por aquí tienes los enlaces al Baseline:

lenguajecss.com/baseline/
lenguajehtml.com/baseline/
lenguajejs.com/baseline/
August 21, 2025 at 4:36 PM
¡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
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...
August 21, 2025 at 10:09 AM
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.
August 21, 2025 at 10:09 AM
❌ 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)
August 21, 2025 at 10:09 AM
📚 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
August 21, 2025 at 10:09 AM
Si te interesa, en mi web tengo un curso completo y gratuito para aprender a utilizar el DOM, paso a paso:

lenguajejs.com/dom/
August 20, 2025 at 10:40 AM
📒 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
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
August 19, 2025 at 10:16 AM
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.
August 19, 2025 at 10:16 AM
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
August 19, 2025 at 10:16 AM
🦙 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).
August 19, 2025 at 10:16 AM
🚀 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.
August 19, 2025 at 10:16 AM
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...
August 18, 2025 at 3:00 PM