Manz 🇮🇨⚡👾 Profile picture
@Twitch Partner | Web developer & Engineer | https://t.co/oZxUdJAcAG Content creator at https://t.co/29SSwBNOt5 | I❤️HTML/CSS/JS FullStack teacher at @eoi | «Odio quedarme a med
Jun 30, 2023 12 tweets 7 min read
📚ROADMAP FRONTEND 2023
🧠¿En qué debo enfocarme?

✨Ruta de aprendizaje recomendada
✨No tienes que profundizar, pero si conocer bases
✨Especialízate cuando encuentres lo que te interesa
✨Es subjetiva (es mi opinión)

La explico en siguientes tweets👇 Si estás empezando, enfócate en aprender las bases:

✨ HTML/CSS
✨ Frameworks CSS: Bootstrap / Tailwind CSS
✨ Puedes usar para practicar

Aquí te enfocas en ver detalles visuales, apariencia para construir una página. https://t.co/UwA38SOg12Codepen.io
Jun 25, 2023 9 tweets 4 min read
📘En 2023... ¡La forma de escribir CSS está CAMBIANDO! ¡Y mucho!

✨Se avecinan muchos cambios (y muy potentes)
✨Mejor soporte en navegadores
✨Escribimos menos código para hacer más cosas
✨¡Nativo! Sin preprocesadores, librerías o similar

🧵¡Te las voy explicando!👇 ➡ Combinador `:is()`

La clásica agrupación de selectores, ahora puedes hacerla con el combinador lógico `:is()`, que permite incluso hacer combinaciones de múltiples selectores

✨Más expresivo
✨Más fácil de leer
🧨Puedes usar `:where()` para ser menos específico
Jun 13, 2023 4 tweets 2 min read
📘¡Corrige tu código CSS automágicamente!

✨Corrige al guardar en VSCode con CTRL+S
✨Reorganiza propiedades por género o categoría
✨Revisa y corrige erratas o valores incorrectos
✨Adapta a formato adecuado en líneas largas
✨Fusiona en propiedades de atajo si es posible

🔽 Para activarlo en un proyecto, simplemente escribimos en una terminal:

1️⃣ `npm install -D stylelint stylelint-config-manzdev`

2️⃣ Luego, creamos un fichero `.stylelintrc.json` y añadimos lo siguiente:

PS: Dentro de `rules` podemos añadir nuestras propias reglas personalizadas. {   extends: "stylelin...
Jun 11, 2023 4 tweets 2 min read
🆕Animaciones CSS con «Motion Paths»

Mediante CSS podemos crear trayectos y animarlos de forma muy rápida y sencilla.

✨Trayectos con la función `ray()`
✨Trayectos SVG con la función `path()`
✨Trayectos desde un .svg con la función `url()`

¡Te explico como funcionan!
🔽 <div class="container&... Con este sencillo código (no te olvides del tamaño de alto del contenedor), obtenemos este resultado. ¿Qué es lo que ha ocurrido?

✨Hemos creado 3 trayectos
✨Los hemos animado para ir de inicio a fin
✨La magia está en la función `ray()` aunque se pueden usar otras
Jun 11, 2023 5 tweets 2 min read
📙¿La etiqueta HTML más infravalorada?

La etiqueta `<datalist>` nos permite ampliar y potenciar con datos otras etiquetas de formulario.

✨Por ejemplo, podemos convertir un <input> de texto en un híbrido con <select>, abierto a nuevas opciones, con filtro de autocompletado:

🧵 <input type="text"... ✨Utilizada junto a un <input> de fechas, podemos predefinir varias fechas como si fuera un <select>, y dar la opción de escoger "Otras..." para mostrar el selector de fechas tradicional. <input type="date"...
Jun 11, 2023 9 tweets 3 min read
10 de Junio de 2023. Acaba de lanzarse Debian 12.

🧵Toca actualizar, así que se viene hilo... Logo de Debian. La mejor di... Antes de nada: Suelo trabajar con Windows, utilizando WSL2 (Linux para Windows) y hasta ahora tenía un Debian 11 (Bullseye) instalado.

Si tienes Windows 10/11, te aconsejo usar WSL2. Es como tener un Linux nativo dentro de Windows:

terminaldelinux.com/terminal/wsl/i… WSL: Windows Subsystem for ...
Nov 15, 2022 15 tweets 9 min read
Esto de Stable Diffusion es un disparate. Ayer entrené un modelo con sólo 24 fotos (y eso que algunas no son apropiadas para el entrenamiento) con 1600 pasos (~30 minutos de entrenamiento), y estoy alucinando con los resultados...

🧵⬇ ImageImageImage Uno de mis estilos preferidos es los colores «Synthwave» y ambientación digital... Con tags en el prompt como cyberpunk, cyberscape, electronic, hackerman, futuristic quedan muy bien ImageImageImage
Oct 22, 2022 8 tweets 4 min read
¿Cuántas cosas de este código CSS no reconoces?

Lo que ves aquí es CSS nativo y *casi* todo está soportado en la última versión de Chrome Canary con características experimentales activadas.

Se acercan grandes cambios en el mundo de #CSS... Por si les interesa, les añado link a las cosas del ejemplo que he ido documentando:

➡ La regla @layer (capas «de Photoshop» en CSS)
lenguajecss.com/css/reglas-css…

Capas independientes de código CSS, reordenables que pueden "fusionarse" para evitar conflictos con la especificidad CSS
Oct 20, 2022 13 tweets 6 min read
Llevo ya algunos días probando #StableDiffusion (modelo de aprendizaje automático open source, de Inteligencia Artificial) para generar hipotéticos escenarios, y cada vez me despierta más curiosidad.

Aprovecho y comparto algunos resultados por aquí...

🧵⬇ Image Empecé generando galaxias, con nebulosas, que es algo que no resulta muy complicado de crear. Reescribiendo el prompt (frase para generar la imagen) a prueba y error, vas aprendiendo conceptos que funcionan, y los que no funcionan. Image
Oct 13, 2022 6 tweets 4 min read
¿Grid CSS es un misterio para ti? He creado 5 posts donde explico como funciona el sistema nativo de cuadrículas de CSS:

✨¿Qué es Grid?
✨Cómo definir grids fijos
✨Unidad `fr`
✨Función `repeat()` y `minmax()`
✨Huecos (gaps)

1️⃣ lenguajecss.com/css/maquetacio… ¿Siempre te lías con `justify-content`, `justify-items`, `align-items` y `align-content`? Te explico como funcionan las alineaciones de Grid

✨Alineación de elementos
✨Alineación de contenido
✨Alineación específica
✨Orden de elementos

2️⃣ lenguajecss.com/css/maquetacio…
Jun 1, 2022 10 tweets 4 min read
💛Entendiendo la inmutabilidad (y relacionados)💛

En Javascript es muy habitual confundir conceptos como inmutabilidad, constantes, paso por referencia, etc.

¡Te lo explico!

1️⃣ Definir algo como constante impide la reasignación, pero no impide mutar sus elementos.

🧵🔽 2️⃣ Ciertos métodos de Javascript mutan la estructura original, cuando lo esperable es que no.

Hay una propuesta para reemplazar métodos como `reverse()`, `splice()` o `sort()` (que mutan) por `toReverse()`, `toSpliced()` o `toSorted()`, que no mutan.
May 30, 2022 9 tweets 5 min read
💛Subiendo y desplegando código en GitHub💙

GitHub es una plataforma que permite, principalmente, dos cosas:

1️⃣ Subir código en un repositorio
2️⃣ Alojar web (HTML, CSS y Javascript) usando GitHub Pages

¡Te explico como hacer ambas!
🧵🔽 1️⃣ El primer paso es crear un repositorio en GitHub

Puedes hacerlo de dos formas:

- De forma manual desde GitHub.com
- Utilizando GitHub CLI ( cli.github.com ) desde una terminal:

`gh repo create --public repo-name`
May 29, 2022 10 tweets 5 min read
Curiosidades técnicas en una escena de #StrangerThings

Si no la has visto, ALTO. No considero spoiler lo que pongo aquí (sólo detalles de la pantalla), pero quizás prefieras no saber nada de nada hasta que hayas visto la serie (temporada 4, capítulo 6).

🧵🔽 La serie está ambientada en 1986. En una pantalla de una Amiga (1985) nos encontramos la siguiente interfaz. Parece una interfaz del estilo Workbench, pero en un monitor de fósforo verde.

Arriba aparece versión 1.0, aunque a la derecha podemos ver Workbench 1.3.
May 28, 2022 14 tweets 8 min read
💥Strangers Things (Cosas extrañas en CSS)💥

Todos encontramos cosas extrañas en código CSS continuamente. Pero veamos algunas de ellas, y la forma recomendada de abordarlas hoy en día...

¡Te lo explico en un par de tweets!

#StrangerThings4 #css #javascript

🧵🔽 Image 1️⃣ No agrupes selectores en la misma línea, separa.
2️⃣ Aunque tengas canal alfa, usa RGB() y no RGBA(). Incluso ya puedes usar hexadecimal con canal alfa.
3️⃣ Si tienes propiedades con valores múltiples, separa en múltiples líneas. Image
May 27, 2022 12 tweets 6 min read
💛¿Sabes usar las array functions?💛

En Javascript, cualquier array tiene una serie de métodos que hace muy fácil trabajar con ellos. Además, forma parte de las bases de la programación funcional.

¡Te explico cuales son y como funcionan!
🧵🔽 📒Antes de empezar, imaginemos que tenemos una estructura de datos basada en un array. Cada elemento es un objeto con sus propiedades.

Para simplificar, en los siguientes ejemplos cada objeto (ítem) se representa con un Sticker de ManzDev, Batmanz y San @goncy incluidos.
May 26, 2022 8 tweets 4 min read
🧡Ventanas modales con la etiqueta <dialog>🧡

Una ventana modal es aquella que al aparecer, impide al usuario hacer otra cosa hasta que la atiendas.

Te explico (en un par de tweets) como hacer una ventana modal de forma nativa con HTML (y un poquito de Javascript).

🧵🔽 Image 1️⃣ En HTML existe la etiqueta <dialog>, no muy conocida, que nos permite crear ventanas de diálogo con el contenido que queramos (texto, imágenes, video, botones, etc...).

La etiqueta por defecto está cerrada, pero con el atributo `open`, o llamando a `.show()`, se muestra. Image
May 22, 2022 12 tweets 7 min read
💥ROADMAP FRONTEND JAVASCRIPT 2022💥

A continuación, una ruta cronológica de tecnologías Javascript para aprender Frontend, saber en que lugar estás y en que podrías seguir enfocándote en aprender.

⚠ Disclaimer:
Cuida tus soft skills. Es una ruta subjetiva.

¡Vamos allá!
🧵🔽 1️⃣ En primer lugar, aprende bases y fundamentos de diseño web.

Usa codepen.io para practicar, aprende HTML ( lenguajehtml.com ) y CSS ( lenguajecss.com ) y adquiere las bases.

Para ser más productivo, se usan frameworks CSS como Bootstrap o Tailwind.
May 20, 2022 12 tweets 6 min read
💛¿Qué es «FUOC»?💙

Hay ciertos conceptos denominados «FUOC», «FUOT» o «FOIT» relacionados con los estilos CSS de una página y la forma de cargarlos.

¡Te explico en un par de tweets de que se trata!
🧵🔽 Image 1️⃣ El concepto «FUOC» son las siglas de «Flash of unstyled content», o lo que es lo mismo, ese momento al cargar la página que, durante unos instantes, muestra contenido de una forma extraña y particular, y de repente se "coloca" todo correctamente. Image
May 19, 2022 9 tweets 4 min read
💛¿Aún no entiendes las «Arrow function» de Javascript?

Desde hace tiempo, Javascript incorpora una forma compacta y cómoda de escribir funciones en Javascript, denominada arrow function, fat arrow o "funciones flecha".

¡Te las explico (y sus curiosidades)!
🧵🔽 1️⃣ Tradicionalmente, en Javascript, las funciones se escriben de la siguiente forma (y se puede seguir usando esta sintaxis).

Sin embargo, es habitual ver código donde creas functiones anónimas (sin nombre) y las guardas en una variable/constante.
May 18, 2022 8 tweets 4 min read
🧡Validaciones de formularios SIN JAVASCRIPT🧡

En un formulario web, sin las validaciones oportunas, el usuario puede insertar información de cualquier manera... Y muchas veces, así no nos sirve.

¡Te explico como validar datos sólo con HTML!
(y algunas cosas más)
🧵🔽 1️⃣ Para permitir que el usuario pueda introducir datos se suele utilizar la etiqueta `<input>`. Por defecto, es un campo de texto, por lo que nos permite introducir casi cualquier cosa.

Los <input> se pueden refinar: textos, números, fechas, colores, ficheros, texto extenso...
May 17, 2022 9 tweets 4 min read
💙La pseudoclase `:has()` llega a CSS💙

Una de las grandes limitaciones que siempre ha tenido CSS es la imposibilidad de dar estilo a "elementos padres" dependiendo de características de los hijos y sin Javascript.

Pero... ¡llega la pseudoclase `:has()`!
¡Te la explico!
🧵🔽 Image 📘En CSS, una pseudoclase es una parte del selector (con prefijo `:`) con la que puedes dar estilo a un elemento con un estado especial.

Por ejemplo, uno de los más conocidos, `:hover`, selecciona el elemento si el usuario está colocando su ratón encima (estado). Image