Share this page!

Manz 🇮🇨⚡👾 Profile picture
Twitter logo
Oct 22 • 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
➡ Custom Props `--custom-props` (Variables CSS)
lenguajecss.com/css/cascada-cs…

«Variables CSS» nativas que permiten declarar valores reutilizables en determinados ámbitos del DOM, con fallbacks.
➡ Propiedades lógicas de CSS
lenguajecss.com/css/modelo-de-…

Propiedades alternativas más lógicas para reemplazar conceptos como `width` o `height` por `inline` o `block` y no confundir en idiomas que no tienen nuestra misma direccionalidad.
➡ Alinear elementos con Grid CSS
lenguajecss.com/css/maquetacio…

Propiedades de alineación, justificación y colocación de elementos en Grid. Incluye propiedades de atajo como `place-items` o `place-content`
➡ Recortes con `clip-path`
lenguajecss.com/css/mascaras-y…

Por medio de la potente propiedad `clip-path` puedes realizar recortes específicos y muy concretos de elementos web.
➡ CSS Nesting (Código CSS anidado)
lenguajecss.com/postcss/plugin…

Característica que permite anidar selectores unos dentro de otros en CSS.
Si a alguien le interesa la propiedad `object-view-box` de CSS, acabo de publicar un video en Youtube donde la explico:

• • •

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

Manz 🇮🇨⚡👾 Profile picture
Oct 20
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
Me animo y comienzo también a describir naves o cuerpos flotantes, intentando que haya solo un color predominante que le de ambientación.

Curiosamente, el texto `uniform and coherent shapes` ayuda bastante a que los elementos no sean demasiado aleatorios. Image
Read 13 tweets
Manz 🇮🇨⚡👾 Profile picture
Oct 13
¿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…
¿Quieres crear un grid basándote en una plantilla de forma un poco más visual? ¡`grid-template-areas` al rescate!

✨La propiedad `grid-template-areas`
✨La propiedad `grid-area`

3️⃣ lenguajecss.com/css/maquetacio…
Read 6 tweets
Manz 🇮🇨⚡👾 Profile picture
Jun 1
💛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.
3️⃣ Otro error común: hacer una copia de una estructura compleja.

💔`copyData = data` ➡ es una referencia o "acceso directo", son el mismo elemento
💔`copyData = [...data]` ➡ sólo copia el primer nivel (shallow), el resto son ref
❤ `copyData = structuredClone(data)` ✅
Read 10 tweets
Manz 🇮🇨⚡👾 Profile picture
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!
🧵🔽
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`
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
Read 9 tweets
Manz 🇮🇨⚡👾 Profile picture
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).

🧵🔽
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.
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).
Read 10 tweets
Manz 🇮🇨⚡👾 Profile picture
May 28
💥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
Read 14 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!

Send Email!

Email the whole thread instead of just a link!

Separate emails with commas

:(