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

7 Nov
¡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
Utilizamos la tipografía «Heroes Legend» para el logo, y la tipografía Bebas Neue para el resto de textos. Nuestra versión se llama «Punko FOP!» (gracias a pbl78 por la idea).
Read 11 tweets
3 Oct
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).
Vamos al "Audio del escritorio" (o a la entrada de audio donde capturas la música) y accedemos a los «Filtros».

En esta sección podremos añadir filtros para modificar el comportamiento de esta entrada de audio, así que añadiremos un filtro de tipo «Compresor».
Read 12 tweets
25 Jul
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.
✅¿Funciona? Sí
❌¿Es correcto? No

En HTML, TODAS las etiquetas `<img>` deben tener el atributo `alt`, donde se debe especificar un «texto alternativo» de reemplazo por si, por alguna razón, las imágenes no están disponibles, se muestre dicho texto.
Read 21 tweets
23 Jul
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
Por último, en OBS creamos una transición de tipo `Stinger` y seleccionamos el video que acabamos de crear.

En mi caso la animación es de 3 segundos, por lo que en "Tiempo de tipo de punto de transición" ponemos: `1500` (1,5 segundos). Image
Read 5 tweets
18 Jun
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)
Con los porcentajes (o tamaños) tras los colores, puedes indicar un punto de control donde comienza a cambiar el color (hacia el siguiente).
Read 13 tweets
14 Jun
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
Desde selectores #CSS, se pueden seleccionar etiquetas dependiendo de sus atributos HTML.

Por ejemplo, `a[href$=".pdf"]` selecciona todos los enlaces a archivos con extensión `.pdf`, pero `a[href$=".pdf" i]` hace lo mismo sin tener en cuenta mayúsculas/minúsculas. Image
Read 18 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

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

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(