26 entradas etiquetadas con #apuntes.
Un tutorial paso a paso para construir el clásico puzle de las quince fichas y el hueco en HTML, CSS y JavaScript. La parte interesante no es moverlas: es barajarlas sin que el tablero resultante sea, la mitad de las veces, matemáticamente imposible de resolver.
Leer Cómo programar el Puzle Deslizante desde cero →Una noche de Aste Nagusia mirando hacia arriba con el cuello torcido y la duda de siempre: qué hay dentro de una carcasa, de dónde salen los colores y por qué las sonrisas se ven torcidas desde media ciudad.
Leer Cómo funciona un fuego artificial y cómo se dibujan corazones en el cielo →Un tutorial paso a paso para construir el clásico Buscaminas de Windows en HTML, CSS y JavaScript. Sin canvas: una rejilla de divs, una función recursiva para vaciar zonas seguras y un truco de bordes de los 90 para el bisel gris de toda la vida.
Leer Cómo programar el juego Buscaminas desde cero →Escalas que aparecen de la nada, llegadas que se retrasan cuatro horas y noches en Frankfurt que nadie había pedido. Vueling, British Airways, Lufthansa: los cambios unilaterales de vuelo son legales y son de todos, pero el destrozo en la planificación lo pagas siempre tú.
Leer Cuando la aerolínea te cambia el vuelo y tú te aguantas →Una amiga lleva tres días exprimiendo un tubo que ya estaba vacío. De ahí sale una pregunta que me hacía de niño y que sigo sin poder responder del todo: si tienes dinero de sobra, ¿te molestas en rascar el fondo del dentífrico?
Leer ¿Los ricos también enrollan el tubo de la pasta de dientes? →Contar palabras parece trivial hasta que aparecen los casos límite: espacios múltiples, saltos de línea, párrafos vacíos. Aquí está la implementación mínima que los maneja todos.
Leer Cómo construir un contador de palabras con estadísticas en JavaScript →En Vilna los troles siguen deslizándose bajo una telaraña de cables eléctricos. En Bilbao, que fue la primera ciudad española en tenerlos, desaparecieron hace más de cuarenta años. La historia de un transporte que quizá enterramos demasiado pronto.
Leer Trolebuses: por qué Vilna los conserva y Bilbao los enterró →Un apartamento en Vilna, una ducha del tamaño de una cabina telefónica y una cortina de plástico decidida a abrazarme entera. La ciencia tiene una explicación bastante elegante. Yo sigo queriendo una mampara.
Leer Por qué la cortina de ducha se te pega (y por qué la prefiero lejos) →Generar un QR en el navegador es sorprendentemente accesible gracias a qrcode-generator: una librería de 4,5 KB que expone una API mínima y produce SVG vectorial listo para imprimir.
Leer Cómo generar códigos QR en el navegador con JavaScript puro →JSON.parse y JSON.stringify hacen el trabajo pesado. Lo interesante está en los detalles: extraer la posición del error, calcular línea y columna, y sincronizar dos áreas de texto.
Leer Cómo construir un formateador de JSON en JavaScript puro →La accesibilidad web exige que el texto sea legible sobre su fondo. WCAG define umbrales de contraste calculados con una fórmula que tiene en cuenta cómo el ojo humano percibe la luz.
Leer Cómo calcular el contraste de color según WCAG en JavaScript →Restar dos fechas da los días totales en una línea. Descomponerlos en años, meses y días es otra conversación: los meses tienen distinta longitud, el 31 de enero lleva a territorio pantanoso y los años bisiestos añaden un día que cambia el resultado.
Leer Cómo calcular el tiempo entre dos fechas en JavaScript →Los primeros recuerdos de la infancia son esquivos y están desordenados. Pero yo tengo uno anclado a una fecha concreta gracias a un funicular averiado y a un gnomo que me pidió que no le tirara piedras.
Leer El día que vi un gnomo →Un tutorial paso a paso para construir el clásico juego de descifrar números en HTML, CSS y JavaScript. La parte interesante está en una función de evaluación que parece simple pero se complica en cuanto las cifras se repiten.
Leer Cómo programar el juego Picas y Fijas desde cero →Markdown es el formato de escritura más útil que existe, pero convertirlo a HTML sin depender de un servidor ni de servicios externos tiene su miga. Aquí va cómo funciona la herramienta y por qué la hice.
Leer Cómo construir un conversor de Markdown a HTML que funcione en el navegador →Un tutorial paso a paso para construir el clásico Tetris en una sola página web. Es la pieza más completa de la serie hasta ahora: rotación de matrices, gravedad por turnos, y la lógica de eliminación de líneas, que es el corazón del juego y sigue siendo, cuarenta años después, una de las invenciones más limpias de la historia de los videojuegos.
Leer Cómo programar el juego de Tetris desde cero →El NIF no es solo el DNI con otro nombre. Cuando tu formulario tiene que aceptar tanto personas físicas como empresas, el algoritmo del CIF añade una capa de complejidad que merece su propio artículo.
Leer Cómo validar un NIF español en un formulario web (con CIF incluido) →LQIP llena el hueco que deja una imagen mientras descarga: una versión diminuta y borrosa que se sustituye con un cross-fade cuando la real entra. Aquí cuento cómo lo implementé en Idenautas con un script Deno de cien líneas que genera los placeholders en build y los incrusta inline en el HTML, sin un solo byte de JavaScript de cliente más allá del onload del propio img.
Leer LQIP en Lume: placeholders inline generados en build →Un tutorial paso a paso para construir un clásico juego de ladrillos —de la familia de Breakout y Arkanoid— en una sola página web. Es el juego más completo de la serie hasta ahora: combina la física de Pong con la gestión de muchos objetos a la vez y una lógica de niveles que da mucho juego.
Leer Cómo programar el juego de ladrillos desde cero →El IBAN tiene un algoritmo de validación elegante, una longitud que varía según el país y un problema con números enormes que tiene solución. Aquí va todo lo que necesitas para no rechazar cuentas bancarias válidas.
Leer Cómo validar un código IBAN en un formulario web →Un tutorial paso a paso para construir el clásico Snake en una sola página web, sin frameworks, sin dependencias y sin más de doscientas líneas de código. Al final del artículo te dejo el prototipo funcional para que juegues.
Leer Cómo programar el juego de la serpiente desde cero →Antes de rechazar a un usuario con un mensaje de error críptico, al menos asegúrate de que el rechazo está justificado. Aquí te explico cómo validar documentos de identidad españoles con JavaScript.
Leer Cómo validar un DNI, NIE o Pasaporte en un formulario web →Un tutorial paso a paso para construir el clásico juego de parejas de cartas en una sola página web. Sin canvas, sin frameworks, solo HTML, CSS y un poco de JavaScript bien organizado. Probablemente el proyecto más sencillo de toda la serie.
Leer Cómo programar el juego de parejas desde cero →Un tutorial paso a paso para construir el clásico Pong en una sola página web. Es probablemente el videojuego más sencillo jamás concebido y, precisamente por eso, una de las mejores formas de entender cómo funciona la física de los juegos.
Leer Cómo programar Pong desde cero →Un tutorial paso a paso para construir el clásico 2048 en una sola página web, sin frameworks ni dependencias. La gracia del proyecto está en una operación matemáticamente elegante que se aplica cuatro veces y resuelve todo el juego.
Leer Cómo programar el juego 2048 desde cero →Poner tres mil imágenes en una página web con una etiqueta img por foto es una idea que parece razonable hasta que el navegador intenta ejecutarla. Aquí cuento qué pasa exactamente, cómo lo resuelve pig.js con un truco de renderizado virtual, y qué añadí yo encima para tener un visor con animación y navegación.
Leer Tres mil fotos en una página: el problema del DOM y cómo lo resuelve pig.js →
