Stack técnico

Local-first, a propósito

El objetivo de RobinPad es proporcionar una herramienta que se ejecute completamente en local. El servidor no procesa ninguna de tus actividades dentro de la herramienta de dibujo; todo permanece en tu ordenador y en tu navegador. Sin necesidad de registro, retienes la propiedad total de tu contenido y el control absoluto sobre cómo gestionarlo.

Estas son las razones principales por las que elegí este stack tecnológico específico, me permite construir, entender y refinar la herramienta usando las tecnologías que mejor conozco.

Qué hay bajo el capó

El workspace (la app de dibujo):

• HTML, CSS, JavaScript vanilla: sin build step, sin bundler, sin framework.
• HTML Canvas: el motor de dibujo. Donde aterrizan los trazos de pincel.
• IndexedDB + Dexie.js: almacenamiento local. Proyectos, capas, pinceles, ajustes.
• Alpine.js: pequeña capa de reactividad para los paneles laterales.

Este sitio (el que estás leyendo):

• Grav CMS: CMS PHP flat-file. Impulsa el sitio público, el admin y el routing.
• Forum Pro: plugin de comunidad. Ejecuta la sección /forum.
• Patreon OAuth: single sign-on para el foro. Sin base de datos de contraseñas.
• Tabler Icons: el set de iconos que ves en toda la UI.
• Source Code Pro + Cherry Swash: las dos tipografías de Google Fonts.
• Texturas open-source de Unsplash, Pexels, Textureboy. Papel, madera, panel.

Analítica: dos contadores, ni Google Analytics

RobinPad tiene dos sistemas de analítica respetuosos con la privacidad en todo el sitio: GoatCounter y Umami. Esta página, todas las demás de robinpad.com y la app de dibujo reportan a los dos. No hay Google Analytics ni ningún rastreador publicitario por ningún lado.

Ahora mismo funcionan en paralelo a propósito: queremos ver cuál de los dos nos da una imagen más clara y quedarnos solo con ese. En cualquier caso, los dos no guardan nada en tu navegador: no ponen cookies, no hacen fingerprinting y no te siguen a ninguna parte. Un pageview envía la ruta de la página, el referrer, el nombre de tu navegador y una parte de tu IP, que va hasheada (GoatCounter, se descarta en 24 horas) o recortada (Umami, solo sirve para saber el país).

La consecuencia práctica es la parte que me importa: en este sitio no hay banner de cookies, y nunca te pide que aceptes que te rastreen. Una analítica convencional habría puesto un diálogo de consentimiento delante de cada página antes de poder leerla, incluida esta. Elegir las herramientas que hacen ese diálogo innecesario ha compensado con creces los cuadros de mando más conocidos.

Todo esto está detallado en la Política de Privacidad (§4 y §5).

La experiencia de dibujo

• Carga solo lo que necesitas: En lugar de cargar toda la app de una vez, RobinPad solo trae los menús y herramientas cuando realmente los abres. Esto significa que la app arranca casi instantáneamente.

• Una página a la vez: Incluso si tu cuaderno tiene múltiples páginas, RobinPad solo se enfoca en la página que tienes delante. Las otras páginas descansan silenciosamente en segundo plano sin consumir memoria de tu dispositivo.

• Trazos de pincel inteligentes: En lugar de dibujar líneas básicas de ordenador, RobinPad usa un sistema de "estampado". Presiona texturas de pincel sobre el canvas miles de veces por segundo basándose en la presión de tu stylus. Como los comportamientos de pincel se guardan como ajustes simples y editables, modificar o crear tus propios pinceles personalizados es muy fácil.

• Feedback instantáneo con almacenamiento inteligente: Cuando levantas el lápiz, tu trazo aparece inmediatamente en pantalla. Justo después, un proceso silencioso en segundo plano comprime el dibujo en un formato ligero, ahorrando espacio de almacenamiento sin ralentizar tu pintura.

• Zoom y rotación sin esfuerzo: Cuando mueves, rotas o haces zoom en tu canvas, RobinPad usa el chip gráfico de tu dispositivo para deslizar toda la vista suavemente, asegurando que tus trazos permanezcan perfectamente en su lugar sin entrecortarse.

Otras herramientas que he usado

• Obsidian: Toma de notas, contenido de texto y gestión general.
• DeepL: Me ayuda con las correcciones en inglés.
• Figma: Diseño de UI y objetos vectoriales.
• Affinity: Para ajustes de texturas y creación de pinceles.
• Helium Browser: El navegador principal para probar la herramienta.