Manz 🇮🇨⚡👾 Profile picture
May 28 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
4️⃣ Usa variables CSS. Se colocan al inicio, separados por una línea en blanco del resto de props. ¡Y tienen ámbitos locales!
5️⃣ Se pueden guardar todo tipo de datos: medidas, gradientes, colores, funciones css, keywords, etc...
6️⃣ Con `var()` puedes usarlas y añadir un fallback. Image
7️⃣ Cuidado al usar @Imports (son peticiones adicionales desde el cliente). Considera:

- Usar <link>
- Añadir resource hints para precargar
- Usar `@font-face` para tipografías

8️⃣ ¡Ojo, que ya tenemos capas en CSS! Image
9️⃣ Existen múltiples criterios de ordenación de propiedades: alfabéticos, por longitud, etc...

Mi preferida: Separar por tipo/categoría. Es fácil de mantener e intuitivo para predecir si existe algo. Image
1️⃣0️⃣ Aprende a dominar la especificidad CSS. Cuando usas `!important` frecuentemente es porque no conoces la especificidad.

Tómate un tiempo en aprender como funciona. Si no es suficiente para ti, investiga BEM, CSS Modules o Shadow DOM (WebComponents) y metodologías CSS. Image
1️⃣1️⃣ El nesting (anidar CSS) es una característica genial para mantener código CSS y tenerlo mucho más organizado.

Se basa en colocar selectores dentro de otros. Aún no está disponible en CSS vanilla (lo estará) pero se puede usar con:

- Sass
- PostCSS
- ParcelCSS Image
1️⃣2️⃣ Quizás el más importante de todos: Usa Stylelint (linter CSS). Al igual que utilizas ESLint para Javascript, Stylelint te revisa el código CSS y te aconseja como solucionar problemas, formas de corregir errores y mejorar tu estilo de código CSS. Image
Si te ha gustado, ¡Sígueme en Twitch!
twitch.tv/ManzDev

También puedes seguirme en Instagram (puedes ver todos los hilos y storys):
instagram.com/manz.dev

O ver directos anteriores de Twitch en Youtube:
youtube.com/c/ManzDev

¡Gracias a @Maxi83c_ por los stickers! Image
Mastering CSS Image
Si te interesa aprender más sobre las variables css (css custom properties), tienes:

1️⃣ Un hilo sobre ellas:

2️⃣ Un post sobre ellas:
lenguajecss.com/css/introducci…
Por aquí hablo de la regla @import de CSS:
lenguajecss.com/css/reglas-css…

Si quieres información del nuevo sistema de capas de CSS, echa un ojo a:

1️⃣ Artículo sobre la regla @layer de CSS lenguajecss.com/css/reglas-css…

2️⃣ Video sobre la regla @layer en CSS
Si no tienes ni idea de este tema y quieres saber más sobre las bases de la especificidad CSS:
Yo estoy usando Parcel CSS en LenguajeCSS.com y la verdad funciona super bien y me resulta muy cómodo.

Hablamos y probamos Parcel CSS en Twitch, aquí tienen el video:

Si prefieres PostCSS, aquí:

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Manz 🇮🇨⚡👾

Manz 🇮🇨⚡👾 Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Manz

May 30
💛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!
🧵🔽 Image
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` Image
2️⃣ Una vez hecho, tendremos que crear un repo local de Git. Para ello seguimos el siguiente mantra:

- `git init` crea un repo local vacío
- `git add .` vigilamos cambios en la carpeta actual
- `git commit -m "First commit 🚀"` guardamos cambios Image
Read 9 tweets
May 29
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).

🧵🔽 Image
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. ImageImage
Aparece una pantalla con código (oh-oh), veamos de que se trata. A simple vista, parece Java (1995), C# (2000) o similar, con referencias a un cliente de SQL (1974) o a ¿LINQ de C#? (2007)

Más abajo, referencias entre otras cosas, a TeX ¿LaTeX? (1984) y Turbo C++ (1990). Image
Read 10 tweets
May 27
💛¿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.
📚Las "array functions" son métodos que se ejecutan sobre un array, y a los que les pasamos una función que se ejecuta por cada uno de sus elementos.

Si aún no sabes usar las arrow functions, echa un ojo:
Read 12 tweets
May 26
🧡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
2️⃣ Al igual que podemos mostrar la ventana de diálogo con `dialog.show()`, podemos cerrarla con `dialog.close()`, por lo que podemos establecer un evento en el botón del interior de la ventana. Image
Read 8 tweets
May 22
💥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.
2️⃣ El siguiente paso sería aprender fundamentos de programación (es una carrera de fondo) para luego empezar con Javascript ( lenguajejs.com ) y la terminal ( terminaldelinux.com ). Es muy importante.

VSCode es el editor más usado. Aprende git (control de versiones)
Read 12 tweets
May 20
💛¿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
Esto ocurre porque al navegador no le ha dado tiempo de descargar y aplicar los estilos en el navegador, y lo que estás viendo es el contenido de la página sin CSS (o sin parte de ellos).

En algunos casos puede ocurra sólo en el primer acceso, porque el navegador cachea el CSS. Image
Read 12 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(