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
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
✨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: