Manz 🇮🇨⚡👾 Profile picture
May 29 10 tweets 5 min read
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).
Un poco más abajo, hay una referencia a Modula-2 (1978), quizás es solo casualidad, pero ksh ¿será Korn Shell? (1983) y a... ¡CoffeeScript! (2009)

A partir de aquí, empieza a mostrar código HTML (1993), como podemos ver con un iframe a un script de donación en PHP (1995).
El `iframe` (tiene un referer) que parece que procede de una URL del dominio crawl.org, con una estructura de una web de archive.org ( archive.org/web/XXXXXX/URL ), donde veremos más adelante que parece que se han basado para modificarlo ligeramente.
Un poco más adelante, vemos que aparece código HTML (1993) y CSS (1996) donde parece que ya estaban usando Flexbox (y nosotros esperando en 2009 a que los navegadores empezaran a soportarlo).

Hay código comentado en estilos CSS en linea y referencias a ficheros BMP (1986).
En algunas partes veremos que hacen referencia a una web weylanbaccess.yutani1980.nu/mahtnez, mientras que en otras pone "webaccess" (¿typo?).

También tenemos un poco de código Javascript (1995) para manejar el foco y seleccionar texto en los campos de un formulario.
Un poco más adelante se pueden leer textos como "See a list of every capture for this URL" o "Timespan for captures of this URL", así como clases como

1️⃣ wm-nav-captures
2️⃣ wm-graph-anc
3️⃣ wm-ipp-inside
4️⃣ wm-toolbar
5️⃣ wm-logo

El prefijo "wm-" es de "WayBack Machine".
Al final (clásico estereotipo) se termina localizando una IP, y para ello se ejecuta un fichero .bat.

No estoy seguro de este, pero diría que los ficheros BATCH son de 1988 (aprox), ya que MSDOS 4.0 es el primero que empieza a incorporarlos.
En el impreso:

1️⃣ Fichero ejecutable MirkETW.exe
2️⃣ Accede a https://some.mirk:3200/falcor/_doc/
3️⃣ ID de un proceso. Siempre queda bien
4️⃣ El usuario no especificado. Otro clásico
5️⃣ Referencia a DotNET (2016?)

Seguro que se me escaparon cosas... ¿Alguna que hayas visto?

• • •

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 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
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!

:(