A mi mamá le encanta la lógica porque nació en una época en la que nada tenía sentido. Nació en 1945, el año en que terminó la Segunda Guerra Mundial, así que esquivó la bala porque somos judíos. Pero desde el primer día de su vida, descubre que el hambre, el racismo y la desgracia han estado intentando arrebatarle la vida. En 2011, el cáncer hizo que me dejara para siempre. Pero en una nota más ligera, este Día de la Madre, voy a devolverla a la vida de la única manera que sé: ¡UI Mad Science!
Voy a explicar cómo mi mamá inspiró este experimento de narración rodante del Día de la Madre de 2026, pero también cómo inspiró mi desarrollo y estilo de vida. A lo largo del camino, discutiré algunos de los consejos involucrados en este regalo virtual para el Día de la Madre. normalmente escribo Publicaciones motivacionales o técnicas. – Pero en el Día de la Madre, obtendrás un trato doble.
Pruebe una tarjeta interactiva del Día de la Madre
Aquí está CodePen, que utiliza evento de captura de desplazamiento y Consulta de estado de desplazamientopor lo que actualmente solo está disponible para navegadores basados en Chromium.
Alternativamente, aquí hay una demostración en video con comentarios de mi hijo de ocho años. Fue agridulce darse cuenta de que esta fue la interacción más cercana que tuvo con su abuela, ya que ella murió antes de que él naciera.
por qué hice esto
Mamá nació en un hospital kazajo donde pacientes civiles compartían salas con veteranos que padecían trastorno de estrés postraumático. Entraban y salían de la sala de partos, asustando a las pacientes y dificultando el parto de mi abuela.
Cuando la madre nació, no respiraba. El personal la sumergió en agua fría, luego en agua caliente, luego en agua fría. Los llamados remedios que en ese momento no tenían base científica. Este fue el comienzo de un patrón más amplio en su vida: sobrevivió no porque recibió ayuda, sino a pesar del caos disfrazado de ayuda.
Entonces, de adulta, mamá aprendió a sobrevivir encontrando patrones y significado en lo insondable. Lo logró combinando sus tres pasiones:
- En su fotografía, captura momentos en los que el caos de su entorno armoniza temporalmente en belleza.
- En su enseñanza, utiliza estas imágenes para contar una historia, descomponiendo el caos en pasos lógicos que la gente puede seguir.
- En programación de computadoras, resume esos momentos de enseñanza ilustrados en experiencias interactivas. A diferencia de la vida real, si algo sale mal con una interacción programada, puedes rastrear la causa y solucionar el problema.
En otras palabras, ella me educó utilizando habilidades que ahora considero desarrollo web, incluso antes de que existiera la web.
Gamificando la experiencia de conocer a mi mamá
Me inspiro en el trabajo de Roland Franke. Deconstruyendo transiciones de corte radial usando eventos de captura de desplazamiento. La pluma de Roland demuestra sorprendentes transiciones entre paisajes activadas por pergaminos mientras una figura se sienta y observa en primer plano. Me recuerda la paciencia que tenía mi madre mientras observaba el mundo, pero luego lo reducía todo a historias breves e interactivas que yo podía digerir cuando era niño.
Utilicé activadores de desplazamiento para simbolizar esa experiencia en el juego del Día de la Madre. fotografía de lapso de tiempo Animación del día a la noche, estilizada con formas CSS. Con un solo gesto de desplazamiento, podemos realizar un seguimiento del trabajo de un día completo. La experiencia fue como si mi mamá me explicara un tema importante como si fuera un juego.
Mi mamá me enseñó que los videojuegos no tienen por qué consistir en hacer estallar cosas. ella ha usado BÁSICO Rápido Hace mucho tiempo que se desarrolló un juego de fotografía Pokémon Snap existió. Recuerdo pasar por una tienda en los años 90. carril de armadura Juega en modo demo en la ventana. Obviamente estaba fascinado, pero mi mamá dijo: “No me gusta. El helicóptero lo inició”, y se fue a casa e hizo su juego de fotografía para que yo jugara.
Una vez me contó la historia de sus fotografías de infancia en la Unión Soviética. Recuerda haber tomado una foto de un edificio gubernamental sólo porque parecía atractivo, pero un soldado la vio y confiscó la película de su cámara. Quizás la lección es que revelar la realidad de algo puede ser tan amenazador como disparar en un sentido militarista.
La violencia que se encuentra comúnmente en los juegos es una metáfora de la incertidumbre y el azar que enfrentamos en la vida, pero los juegos de fotografía de mi madre me enseñaron que la violencia, incluso en los juegos, no es la única solución a este problema.
Mi mamá inspiró la aleatoriedad de los ovnis en este experimento porque pudo usar su cámara para capturar momentos sensoriales fugaces en un mundo caótico.
Usando tecnología alienígena puedes combinar animaciones deterministas activadas por desplazamiento con la aleatoriedad y la física textual de los ovnis, algo que no he visto que se use mucho en la naturaleza: evento de captura de desplazamiento. Este mod emergente – disponible Solo disponible en Chrome y Opera en el momento de escribir este artículo — Proporciona una API de JavaScript simple para que cuando diseñemos la página para cambiar entre escenas diurnas y nocturnas, podamos activar comportamientos que no son posibles solo con CSS, como la trayectoria de vuelo aleatoria de un OVNI, y Disculpar– Efecto OVNI que repele las letras cuando una nave espacial las sobrevuela.
PD.: Se acerca la aleatoriedad en CSSpero actualmente sólo funciona en Safari.
Aquí está el CSS para habilitar el ajuste de desplazamiento:
/* The scroll container */
body {
overflow-y: auto;
scroll-snap-type: y mandatory;
}
/* Each snap target */
.snap-panel {
scroll-snap-align: start;
scroll-snap-stop: always;
}…y JavaScript para manejar eventos de captura de desplazamiento:
// scrollsnapchanging fires while the user is scrolling —
// snapTargetBlock is the panel they are heading toward.
snapScroller.addEventListener('scrollsnapchanging', ({ snapTargetBlock }) => {
markPanelStates({ active: selectedPanel, incoming: snapTargetBlock });
if (snapTargetBlock === dayPanel) onScrollingTowardDay();
if (snapTargetBlock === nightPanel) onScrollingTowardNight();
});
// scrollsnapchange fires once a panel has snapped into place —
// snapTargetBlock is the panel now fully in view.
snapScroller.addEventListener('scrollsnapchange', ({ snapTargetBlock }) => {
selectedPanel = snapTargetBlock;
markPanelStates({ active: selectedPanel, incoming: null });
if (snapTargetBlock === dayPanel) onLandedOnDay();
if (snapTargetBlock === nightPanel) onLandedOnNight();
});Puedes ver que el manejo de estos eventos nos permite crear transiciones contextuales entre dos escenas, dependiendo del estado de la lógica del juego a medida que el usuario pasa del día a la noche y viceversa. Mi mamá siempre me daba otra oportunidad de hacer las cosas bien.
Si te encontraste con esto mientras buscabas en Google ideas de regalos tradicionales para el Día de la Madre…
Palabras de despedida: en caso de que a tu mamá no le gusten los obsequios virtuales caseros de vanguardia que muestran las capacidades emergentes del navegador, cómprale un Kindle o algo así. Cuando mi madre aún vivía, le compré un Kindle. Leíamos la misma novela por separado en nuestros Kindles y luego comparábamos notas por teléfono los días en que no podía acceder a ella.
¡Feliz Día de la Madre a todos!
