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:
«Pero a ver, Manz... ¿Qué estás diciendo? Javascript dice ahí que un array vacío no es lo mismo que un array vacío, obviamente está roto...»
Varias cosas:
1️⃣ Asumimos incorrectamente
2️⃣ Tipos primitivos / objetos complejos
3️⃣ Conceptos "valor" y "referencia"
En Javascript, los tipos primitivos (strings, números y booleanos...) se pasan por valor, es decir, cada vez que comparas, son datos "simples" o "ligeros", por lo que se comparan por su valor.
Sin embargo, eso sólo ocurre con tipos primitivos. Tipos de datos no primitivos (más complejos) como arrays, objetos o incluso expresiones regulares, se comparan por su referencia, es decir, por el "lugar de memoria" donde están almacenados y podemos acceder a ellos.
¿A que este ejemplo no parece tan raro como el primero? Sin embargo, es lo mismo:
1️⃣ Guardamos en `a` un array.
2️⃣ Guardamos en `b` OTRO array.
3️⃣ Ambos están vacíos, pero son arrays diferentes.
4️⃣ Insertamos valores para verlo más claramente.
5️⃣ Efectivamente, no son lo mismo.
Para verlo aún más claro, observa:
1️⃣ Guardamos un mismo array en `a` y también en `b`
2️⃣ Comprobamos
3️⃣ Efectivamente, es el mismo.
Porque ahora tanto `a` como `b` apuntan a la misma referencia.
(Comprueba, si quieres, que si alteras `a`, también alteras `b`)
Y el paso por valor o paso por referencia no es algo expresamente de Javascript. También ocurre en otros lenguajes como Java, por ejemplo.
De igual forma, mucha gente asigna el clásico
`0.2 + 0.1 === 0.30000000000000004` a Javascript, cuando no es así:
✨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:
📘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
➡ Colores RGB
La nueva sintaxis de escribir colores RGB en CSS.
✨Valores porcentuales en vez de 0...255
✨Separado por espacios, sin necesidad de comas
✨Canal alfa separado por slash `/`
🧨Transparencia o no... ¡No hace falta `rgba()`!
✨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:
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!
🔽
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
Por ejemplo, podemos crear trayectos con la función `path()` creando paths SVG para animar elementos y moverlos a través del trayecto (rectas, curvas, etc...)
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:
🧵
✨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.
✨ Utilizada junto a un <input> de colores, podemos predefinir colores específicos, de modo que el usuario pueda escoger el color concreto, o mostrar el color picker del sistema.
1️⃣ El primer paso es actualizar nuestro `/etc/apt/sources.list` (repositorio de paquetes). Donde pone bullseye (debian 11) debemos cambiarlo por bookworm: