Hace unos días después de lanzar One Million Checkboxes (OMCB), pensé que había sido hackeado. ¿Qué estaba haciendo eso en mi base de datos?
Unas horas después, estaba emocionado, orgulloso de unos adolescentes brillantes.
Pero retrocedamos.
Nota – Estoy probando algo nuevo; también he hecho un video de YouTube que cuenta esta historia. Estoy tratando de decidir si estoy interesado en hacer videos; ¡échale un vistazo si quieres!
¿Qué era One Million Checkboxes?
El 26 de junio de 2024, lancé un sitio web llamado One Million Checkboxes (OMCB). Tenía un millón de casillas de verificación globales: marcar o desmarcar una casilla la cambiaba para todos en el sitio, al instante.
El sitio, 30 minutos después del lanzamiento
Mis expectativas para el sitio eran muy bajas y muy equivocadas. Pensé que cientos de jugadores marcarían miles de casillas; en cambio, 500,000 jugadores marcaron más de 650,000,000 de casillas en las dos semanas que mantuve el sitio en línea. El sitio llegó al New York Times y al Washington Post; está en Know Your Meme y Wikipedia. ¡Todo fue una montaña rusa salvaje!
En otro blog mío se detallan los aspectos técnicos detrás de OMCB. Este blog cubre mi historia favorita al ejecutar el sitio.
Pero para contarte esa historia, necesito darte dos datos de contexto.
Dato de contexto 1: OMCB dificultaba el dibujo
Me gusta hacer juegos que ayuden a las personas a interactuar en Internet. Algunas personas son desagradables cuando interactúan en Internet. Así que cuando hago juegos como este, trato de añadir limitaciones para que la interacción promedio sea un poco más agradable.
He estado en esto el tiempo suficiente como para saber qué dibujarán las personas si les das un lienzo sin restricciones en Internet, así que para OMCB quería limitar el dibujo.
Para hacer esto, escalé el número de casillas de verificación en una fila al tamaño de la ventana del navegador. Así es como se ve en la práctica:
perdona el kerning
He escrito “EJEMPLO” aquí, ¡pero solo puedes verlo si el navegador tiene el ancho exacto! Tan pronto como cambia el número de casillas de verificación en una fila, el mensaje desaparece.
Esto significaba que si dibujabas algo grosero en tu teléfono, no se mostraría en mi laptop y viceversa: tu graffiti solo era visible para las personas con la misma pantalla que la tuya. Esta limitación era particularmente agradable porque era sutil; ¡nunca te darías cuenta de que tu escritura no era visible para nadie más en el sitio!
Recibí muchos comentarios pidiéndome que “arreglara” esto para que la gente pudiera dibujar. Pero esta elección fue muy intencional.
He descubierto que las mejores historias de mis juegos de interacción extraña provienen de cómo las personas trabajan alrededor de las limitaciones que añado.
¡Eso fue prefiguración!
Dato de contexto 2: cómo almacené el estado
OMCB tenía un millón de casillas de verificación. ¡Un millón es un número grande! Así que quería almacenar y transmitir mi estado eficientemente.
Para hacer esto dije – una casilla de verificación tiene dos estados válidos. Está marcada o desmarcada. Eso es como un bit – un bit es 0 o 1. Así que solo almacené el estado de cada casilla de verificación como un bit. El bit 3 era “1” si la casilla 3 estaba marcada y “0” en caso contrario.
Eso es un millón de bits. Hay 8 bits en un byte, así que son 125,000 bytes, ¡que son 125KB – ¡ni siquiera el tamaño de un MP3! Totalmente manejable.
las casillas marcadas son 1, las desmarcadas son 0
Almacené estos datos en Redis (una base de datos fácil de usar) y los codifiqué en base64 al transmitirlos a los clientes.
Te prometo que esto importa. Volvamos a la historia.
¿Me han hackeado?
Unos días después de lanzar OMCB, reescribí el backend en go (con la ayuda de mi amigo Eliot) para mantenerme al día con la carga. Y luego, por alguna razón, volqué una codificación ascii de los bytes crudos en mi base de datos. No sé por qué, simplemente lo hice.
Los datos que vi se veían así:
¿qué demonios?
Y mi reacción a los datos fue algo así:
terror puro
Entré en pánico. ¡Había URLs en mi base de datos! ¡Había URLs que apuntaban a catgirls.win en mi base de datos! ¡Algo estaba muy, muy mal!
Supuse que me habían hackeado. Repasé mis registros, buscando evidencia de una intrusión. Leí y releí mi código, buscando cómo alguien podría estar introduciendo cadenas en una base de datos que solo debería contener 0s y 1s.
No pude encontrar nada. Mis registros de acceso se veían bien. Mi código (muy simple) estaba bien. Mi frecuencia cardíaca aumentó. Mi novia esperaba pacientemente que me uniera a cenar. Y luego – espera.
¡Espera!
Lo vi.
El mensaje oculto
Miré las casillas de verificación que correspondían a las URL sospechosas en mi base de datos.
la “h” es un byte – 8 bits. Esas 8 casillas de verificación
Esa H – representaba un byte. Un byte representaba 8 bits. 8 bits representaban 8 casillas de verificación.
Esos bloques de 8 casillas de verificación formaban un patrón repetido que se alineaba con las URLs. Y si cambiaba algo – si desmarcaba una casilla – el patrón reaparecía inmediatamente.
espeluznante
No me habían hackeado.
Alguien me estaba escribiendo un mensaje en binario.
¿Qué significa eso?
Cuando volqué mi base de datos, Redis convirtió los datos en ascii.
Para hacerlo, leyó los datos de a un byte – 8 bits – por vez. Convirtió ese byte en un número entre 0 y 255 (2^8 – 1). Y luego verificó si ese número estaba en el rango de caracteres ascii imprimibles (32 – 127). Si lo estaba, mostraba el carácter ascii correspondiente; de lo contrario, mostraba la representación hexadecimal del byte (por ejemplo, \x00 para 0).
104 representa una ‘h’ y ‘116’ representa una ‘t’
Así que alguien estaba:
Marcando casillas
Para cambiar bits
Para formar números
Que formaban letras
Que deletreaban la URL
Y lo estaban haciendo con miles de otras personas en el sitio.
Quedé impresionado.
Bajando por la madriguera
Entonces.
https://catgirls.win/omcb
catgirls punto win
Vacilé. Investigué en Internet. Y luego hice clic en el enlace.
interesante
¡El enlace llevaba a un discord! ¡Y el discord se llamaba “Checking Boxes”! Me uní al discord.
saludando
¡Y alguien estaba realmente emocionado de verme! Hablamos un poco. Y luego me preguntaron algo que me dejó impresionado:
“¿Ya has visto tus casillas de verificación como una imagen de 1000×1000?”
Dije que no. Me mostraron en qué estaban trabajando:
qué bueno
Estaban descargando los datos de todas las casillas de verificación y mostrándolas como una cuadrícula de 1000×1000 (las casillas desmarcadas son blancas; las marcadas, negras).
¡Hay mucho que ver aquí! Tenemos “ser gay hacer travesuras” – ¡me encanta eso – pero también hay algunas cosas técnicas interesantes aquí!
doble bondad
El ruido repetido en la parte inferior es el mensaje binario que encontré. Encima de eso está una versión en base64 del mismo mensaje – recuerda que base64 es lo que usé para la transmisión. Y en el lado izquierdo hay un código QR (¡con corrección completa de errores! Todos esos mensajes enlazaban al discord.
El discord estaba lleno de adolescentes muy perspicaces, y estaban escribiendo estos mensajes secretos para reunir a otros adolescentes muy perspicaces para hablar sobre cómo automatizar el sitio. Cualquiera que estuviera escribiendo un bot probablemente estaría mirando o la versión en base64 de los datos, la versión binaria o la imagen de 1000×1000; estaban cubriendo todas las bases.
¡Y funcionó! El discord creció de menos de 20 personas cuando me uní a más de 60 para cuando cerré el sitio.
Entonces, ¿qué hicieron?
Bueno, ¡dibujaron mucho! A medida que construían sistemas mejores para dibujar (y descubrían mejor mis límites de velocidad), sus dibujos se volvieron más complejos.
Una pantalla azul de la muerte de Windows – ¡antes del incidente de CrowdStrike!
Con el tiempo experimentaron con animaciones e incluso probaron algunos protocolos para agregar color – como tratar las celdas adyacentes como los canales rojo, verde y azul de un color y dibujar en una cuadrícula más pequeña.
La cuadrícula en su máximo caos – alguien era fan de Jake Gyllenhaal.
Les di una advertencia en el discord antes de cerrar el sitio. La noche antes de hacerlo, eliminé todos mis límites de velocidad para ver cuánto tráfico podía manejar el sitio y qué podían hacer. Terminamos con algunas animaciones realmente geniales – mi favorita fue un Rickroll (este clip no está acelerado).
Mira a Rick ir
¿Es bueno el uso de bots?
¡Mucha gente estaba molesta por los bots en OMCB! No voy a enlazar nada aquí, no quiero dirigir atención negativa a nadie, pero recibí cientos de mensajes sobre bots. El tuit más popular sobre OMCB se quejaba de los bots. A la gente… no le gustaban los bots.
¡Y lo entiendo! Las formas típicas en que las personas – especialmente las que no programan – se encuentran con bots son cosas como la reventa de entradas y los bots de reservaciones en restaurantes. Bots que se sienten egoístas, injustos y antisociales.
Y ciertamente hubo botting que podrías llamar antisocial. Las personas escribieron pequeños bots de JavaScript para desmarcar todas las casillas que pudieran – ¡sé esto porque emocionadamente me lo contaron!
¡ok!
¡Lo esperaba – soy programador! – pero la gente me dijo que arruinó el sitio para ellos y supongo que lo entiendo.
Entonces, sí. Este dibujo probablemente degradó la experiencia para los usuarios “regulares” – aunque los que usaban bots tenían algunas reglas sobre dónde usarlos, y de vez en cuando yo intervenía para pedirles que lo redujeran.
discutible qué tan bien funcionó esto
Así que hay algunas advertencias. Entiendo por qué a la gente no le gustan los bots; tal vez esto no fue un bien incuestionable. Pero hombre…
¡Esto me pareció tan conmovedor!
En la secundaria, escribí una regla de correo recursiva que le enviaba a un amigo mío millones de mensajes como una broma. (¡Accidentalmente!) colapsé repetidamente el servidor de correo de la escuela.
Los adultos en mi vida en su mayoría no estaban enojados conmigo. Me pidieron que parara, pero también me hicieron una camiseta. No creo que estaría haciendo lo que hago ahora sin el estímulo que recibí en ese momento.
Lo que hizo este discord fue tan genial – tan sorprendente – tan creativo. Me recordó a mí – excepto que eran 10 veces el desarrollador que yo era en ese entonces (y francamente, mejores desarrolladores de lo que soy ahora). Poder verlo en vivo – poder brindar algo de estímulo, ver lo que estaban haciendo y responder con elogios y orgullo en lugar de ira – fue muy significativo para mí. Todavía me emociono cuando lo pienso.
Estoy orgulloso de haber hecho algo que este discord decidió que valía la pena jugar, y estoy aún más orgulloso de lo que hicieron con ello.
No puedo esperar para ver qué van a crear a continuación.
Nuevamente – he hecho mi primer video de YouTube para contar esta historia. Dado lo emocional que me resultó todo, pensé que ser capaz de usar mi voz sería agradable. ¡Échale un vistazo si estás interesado!