Manz 🇮🇨⚡👾 Profile picture
May 29, 2022 10 tweets 5 min read Read on X
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

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!

:(