Content creator at http://lenguajeJS.com | I❤️HTML/CSS/JS
FullStack teacher at @eoi | «Odio quedarme a med
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
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
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!
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!
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).
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).
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.
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.
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
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
¿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!
¿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!
¡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
¡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
✅ 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
✅ 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
✅ 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
✅ 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
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
👇
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
👇
- ¿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
- ¿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
➡ lenguajecss.com/baseline/
➡ lenguajehtml.com/baseline/
➡ lenguajejs.com/baseline/
➡ lenguajecss.com/baseline/
➡ lenguajehtml.com/baseline/
➡ lenguajejs.com/baseline/
✅ 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
👇
✅ 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
👇
lenguajejs.com/dom/shadow/a...
lenguajejs.com/dom/shadow/a...
✅ 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)
✅ 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)
❌ 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
❌ 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
➡ lenguajejs.com/dom/
➡ lenguajejs.com/dom/
✨ 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 👇
✨ 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 👇
👉 lenguajejs.com/aprender-a-p...
¡Y también hago directos en Twitch!
twitch.tv/ManzDev
👉 lenguajejs.com/aprender-a-p...
¡Y también hago directos en Twitch!
twitch.tv/ManzDev
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.
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.
🟩 Ventajas: no requiere Internet, privacidad, gratuito
🟥 Desventaja: requiere hardware potente
🟩 Ventajas: no requiere Internet, privacidad, gratuito
🟥 Desventaja: requiere hardware potente
1B = mil millones de parámetros. Cuantos más parámetros, más potente es el modelo (y más recursos necesita).
1B = mil millones de parámetros. Cuantos más parámetros, más potente es el modelo (y más recursos necesita).
🦙 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.
🦙 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.
👇 «¿Pueden las inteligencias artificiales (LLM) pensar y razonar?»
lenguajejs.com/aprender-a-p...
👇 «¿Pueden las inteligencias artificiales (LLM) pensar y razonar?»
lenguajejs.com/aprender-a-p...