Manz 🇮🇨⚡👾 Profile picture
👨‍💻 Dev/Engineer https://t.co/oZxUdJAcAG 🎙 Streamer https://t.co/Xi7HqEbqh3 🎥 Vids https://t.co/BjWXuZhmiR 🎓 Teacher FullStack at @eoi ✨I❤️Web Development 💬 «Odio quedarme a med
Saul figueroa 🇻🇪 Profile picture 1 added to My Authors
May 19 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 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 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
May 4 8 tweets 4 min read
💛¡Las bases del DOM en un hilo!💛

📜Se conoce como DOM a la forma de referirnos a la estructura del documento HTML.

Mediante el DOM podemos cambiar el HTML/CSS dinámicamente desde Javascript y hacer cosas mágicas🧙‍♂️

¡Te explico en un par de tweets como dominarlo!

🧵⬇ 1️⃣ Mediante `.querySelector()` y `.querySelectorAll()` podemos aprovechar la potencia de CSS para realizar búsquedas de elementos en el DOM.

👤El primero, devuelve un sólo elemento
👥El segundo, devuelve varios elementos

¡Olvídate de `.getElementById()` o similares!
May 2 7 tweets 4 min read
🌱¿Conocías la etiqueta <template> de HTML?

✨Se trata de una etiqueta de HTML con la que puedes crear tus propias plantillas que luego puedes reutilizar con Javascript.

¡Te lo explico!

🧵👇 Image ⚰️ La característica especial de <template> es que el código de su interior, está desconectado del DOM de la página.

💀El navegador lo trata como contenido inerte, por lo que no consume recursos, peticiones ni renderiza gráficamente en el navegador. Image
Apr 24 6 tweets 4 min read
🐧¿Quieres tener una terminal de GNU/Linux nativa en tu Windows? ¡Es posible con WSL2!

✨Ejecutar apps de Linux en Windows
✨Entornos de trabajo compatibles con Linux
✅Compatible con Docker, VSCode, Node/NPM...

¡Te lo explico en 4 pasos!

🧵⬇ 🐧Microsoft provee un sistema llamado WSL2 que permite ejecutar apps de Linux bajo Windows.

1️⃣ El primero paso es instalar WSL. Para ello, la forma recomendada es abrir como administrador un Símbolo del sistema y ejecutar el comando `wsl --install -d Debian`.
Apr 23 8 tweets 5 min read
🌌¡Crea tus propias etiquetas HTML!

🧲¿Alguna vez te has preguntado si sería posible crearte tus propias etiquetas HTML a las que darle funcionalidad?

Reutilizar y simplificar tu código HTML desde Javascript, sin librerías ni frameworks.

Hay una forma. Te explico como:
🧵⬇ 🧰Esta característica se llama Custom Element (elemento personalizado) y forma parte del estándar de WebComponents.

Usando una clase Javascript basada en HTMLElement (un elemento HTML genérico) puedes crear una etiqueta HTML y añadirle funcionalidad mediante Javascript.
Apr 22 8 tweets 5 min read
💻Extensiones interesantes para VSCode (II)

✨Better Comments: ¿Comentarios aburridos en tu código Javascript? Con esta extensión puedes destacar algunos comentarios, de forma que sea fácil de ver a simple vista cierto tipo de información.

marketplace.visualstudio.com/items?itemName…

🧵⬇ Image ✨Remote Development es un pack de 3 extensiones (Remote-WSL + Remote-SSH + Remote-Containers), las cuales te permiten conexión directa con VSCode a entornos WSL (Subsistema Linux en Windows), equipos remotos (vía SSH) o contenedores (Docker, por ejemplo)

marketplace.visualstudio.com/items?itemName… Image
Apr 17 9 tweets 6 min read
⚡¿Estás aprendiendo frontend y necesitas una estructura sencilla y cómoda para crear pequeños proyectos Javascript? ¡Usa mkweb!

✨Usa Vite (cambios en vivo de forma ultra rápida)
✨Linters de Javascript y CSS preconfigurados
✨PostCSS con Nesting CSS

¿Quieres saber más?
🧵⬇ 📁El comando `mkweb` nació en nuestros directos de Twitch como una forma rápida de crear una estructura de carpetas, para no perder el tiempo en ello.

⚡Simplemente con un `mkweb nombre-carpeta` creamos el proyecto y en menos de 5-10 segundos lo tenemos listo para trabajar.
Apr 16 7 tweets 5 min read
🆎¡Tipografías para programar!

Elegir una buena tipografía es algo sumamente importante para programar cómodamente, por lo que quizás deberíamos dedicar unos minutos a buscar buenas tipografías.

Victor Mono es de mis preferidas para Javascript:
rubjo.github.io/victor-mono/

🧵⬇ Muchas de las tipografías que cito como ejemplo tienen ligaduras, que no es más que la unión de varios glifos (carácteres) en uno solo, para que sea más agradable y visual.

JetBrains Mono es la tipografía de la compañía del editor IntelliJ IDEA:
jetbrains.com/lp/mono/
Apr 15 8 tweets 5 min read
🚀Alternativas modernas de comandos de terminal

¿Cansado del tradicional `ls`? Puedes utilizar `exa`. Es visualmente mucho más atractivo, diferencia los permisos con colores, destaca las cabeceras, muestra iconos, lista en forma de árbol, etc...

the.exa.website

🧵⬇ Image `batcat` (bat) es una alternativa del tradicional `cat`. Permite ver el contenido de ficheros de una forma mucho más agradable. Tiene numerado de líneas, resaltado de sintaxis, paginador automático, soporte de cambios en git, etc...

🦇github.com/sharkdp/bat Image
Nov 13, 2021 25 tweets 14 min read
¿Quieres aprender #frontend y no sabes ni por donde empezar?
Ruta (2021) para aprender las bases del Front-end

#HTML #CSS #Javascript

🧵Abro hilo. CUALQUIER web está construida con HTML. Un buen primer paso sería aprender todas las etiquetas HTML que existen (o al menos, la mayoría).

Esta tabla periódica explica las etiquetas que existen en español (ampliando información pulsando en cada una):

lenguajehtml.com/html/introducc…
Nov 8, 2021 11 tweets 4 min read
JAJAJAJA
#Javascript es raro

(Pues no tan raro como crees, lo explico)

🧵Abro hilo. Me encuentro muchos tweets similares. En general, gente que no ha pensado demasiado lo que está ocurriendo (o no profundiza), o simplemente es hater de Javascript (y lo usan como excusa).

Un claro ejemplo es este popular meme, que expliqué en otro hilo:
Nov 7, 2021 11 tweets 6 min read
¡Ojo! ¡Una caja Funko Pop! dibujada en 3D con #CSS!
ManzDev (Twitch Code Streamer) ¡en edición limitada!

Por aquí links:
🐈Repo: github.com/ManzDev/twitch…
👀Demo @CodePen codepen.io/manz/pen/Yzxav…
🎬Video del making-of:

#html #css #javascript #webcomponents Como curiosidades, hemos diseñado todo sin utilizar imágenes, sólo usamos #CSS para diseñar, y #WebComponents (nativos) para encapsular y reutilizar.

- 11 WebComponents
- 515 líneas totales de Javascript
- 449 líneas totales de CSS
Oct 3, 2021 12 tweets 5 min read
En mis directos de Twitch suelo usar una característica muy interesante: un sistema que reduce el volumen de la música (sólo) cuando estoy hablando.

Uso OBS Studio, un software libre muy potente y popular tanto para hacer grabaciones como para streaming en @TwitchES o similares. Lo primero, sería localizar el Mezclador de audio, donde aparecen todas las entradas de sonido que obtiene el OBS Studio.

En mi caso, tengo el "Audio del escritorio" (donde suena la música) y "Mic/Aux" donde tengo mi Blue Yeti (micrófono).
Aug 23, 2021 17 tweets 6 min read
¿Has oído hablar de los «HTML Modules»?

🧵Abro hilo. Se trata de una propuesta estándar para permitir importar y exportar código HTML de forma similar a como lo hacemos en Javascript a través de las palabras clave `import` y `export`.

Si quieres aprender más sobre ellas, puedes ver este otro hilo:
Jul 25, 2021 21 tweets 8 min read
Developah: ¿Poner una imagen en HTML? ¡Claro que sé hacerlo! ¡Eso lo sabe hacer todo el mundo!

🧵Abro hilo. A ver, maticemos un poco antes de que me caigan encima, que puede sonar prepotente.

En HTML suelen pasar dos cosas:

✅Es MUY FÁCIL hacer algo.
✅Es DIFÍCIL hacerlo correctamente.

¿Cómo pondrías una imagen?
— Fácil. Uso etiqueta `<img>` y en el atributo `src` pongo la imagen.
Jul 23, 2021 5 tweets 2 min read
Hace unos días hice una cortinilla para los cambios de escena en Twitch (sin After Effects o programas similares).

Los pasos que seguí:

1. Crear animación con HTML/CSS (JS opcional)
2. Establecer color #00ff00 para fondo a ignorar
3. Grabar en video la animación (ej: con OBS) Una vez hecho esto, desde una terminal con ffmpeg convertimos el fondo verde (color #00ff00) en transparente:

`ffmpeg -i animation.mkv -filter_complex colorkey=0x00ff00:0.7:0.2 -vb 6000K chroma.webm

El `0.7` es un 70% de semejanza
El `0.2` es usar un 20% de transparencia
Jun 18, 2021 13 tweets 5 min read
En #CSS, esencialmente, hay tres formas de hacer gradientes o degradados con múltiples colores (2 o más):

1️⃣ Gradiente lineal (en una dirección)
2️⃣ Gradiente radial (forma circular)
3️⃣ Gradiente cónico (cono visto desde arriba)

🧵Abro hilo. A cada uno de ellos se les puede aplicar ciertas modificaciones...

1️⃣ Dirección (palabra clave o grados)
2️⃣ Forma (círculo por defecto, o elipse)
3️⃣ Desde donde parte (en grados)
Jun 14, 2021 18 tweets 8 min read
Colección rápida de trucos poco conocidos de #CSS.

🧵Abro hilo. Image Si tenemos colores donde los pares son repetidos (ej: #334455) se puede simplificar omitiendo el segundo dígito de cada par (#345).

Además, si hay un par más, es el canal alfa (transparencia, también abreviable).

Más sobre colores CSS: Image
Jul 12, 2020 16 tweets 7 min read
Curioso lo que ocurre si desactivas Javascript en tu navegador y comienzas a ver la reacción de ciertas páginas. Esto nos puede ayudar a entender la importancia que se le da hoy a la accesibilidad y lo preparados que estamos para cubrir enfoques progresivos...

🧵Abro hilo... ✔️Twitter nos hace viajar en el tiempo al pasado, circa 2005. La web es funcional, aunque tengo la sensación de que no sólo hemos pasado a no utilizar Javascript, sino casi también a no usar CSS3.