Manz 🇮🇨⚡👾 Profile picture
Nov 8, 2021 11 tweets 4 min read Read on X
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:
«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í:

0.30000000000000004.com
Ya no veras la cara de Brendan de la misma forma...
¡Aprovecho para decir que estoy haciendo cositas chulas en Twitch! ¡Sígueme!

• • •

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

Jun 30, 2023
📚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
Por aquí tienes una tabla periódica de HTML para profundizar en las etiquetas HTML que existen.

Pulsando sobre cada uno de los elementos HTML, tienes más información sobre ellos, ejemplos, etc:

🧪Tabla periódica de HTML:
https://t.co/saFDMH9KjTlenguajehtml.com/html/introducc…
Read 12 tweets
Jun 25, 2023
📘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()`!
Read 9 tweets
Jun 13, 2023
📘¡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...
3️⃣ Si queremos que VSCode corrija sólo, instalamos esta extensión:
marketplace.visualstudio.com/items?itemName…

Y añadimos esta configuración en `.vscode/settings.json` o en `F1` / `Settings JSON`:

✨Desactiva linters básicos
✨Activa Stylelint como linter por defecto al guardar {   "css.validate"...
Read 4 tweets
Jun 11, 2023
🆕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
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...)

✨Desde ficheros SVG ya creados
✨Desde trayectos SVG indicados desde CSS
✨Crea el path en yqnn.github.io/svg-path-edito…
Read 4 tweets
Jun 11, 2023
📙¿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"...
✨ 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. <input type="color&quo...
Read 5 tweets
Jun 11, 2023
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 ...
1️⃣ El primer paso es actualizar nuestro `/etc/apt/sources.list` (repositorio de paquetes). Donde pone bullseye (debian 11) debemos cambiarlo por bookworm:

`sed s/bullseye/bookworm/g /etc/apt/sources.list > /tmp/sources.list && sudo mv /tmp/sources.list /etc/apt/sources.list`
Read 9 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!

:(