I use code to create human-friendly interfaces, and tools to build nerdy things. I document my coding journey in tweets and blog posts, and my building process in cinematic videos.
Collection of quick experiments and unfinished projects.
The perception of volume is created by stacking 21 different elements separated by equal distances. ()
After counting words from 20 popular books, it suggests the nearest ones to replace spelling mistakes. ()
Pixel Art editor in vanilla JS and functional progr. A canvas is used *only* to process i/o. The user interacts with a base64 image. ()
WebMIDI and WebAudio let users play a MIDI controller on a synthesizer or sampler directly in the browser. ()
Reads RSS feeds using a serverless function and normalizes the output to be displayed in a list. ()
One HTML element per voxel in a matrix. Voxels are arranged on the x/y coordinates and stacked in different layers on the Z-axis. ()
The element and pseudo-elements are the faces. When it rotates, it changes the transform-origin to always display 3 faces. ()
Playing with shapes as borders, backgrounds, and characters as part of the content of the pseudo-elements. ()
A fully working Casio calculator built with Create React App and reducers to update the state. The visuals are all CSS. ()
Conceptual experiment to minimize the humans' learning curve for filtering lists. ()
An emoji flattened with the text-shadow technique, overrotating in a couple of axes. ()
Collection of mobile games design patterns for the inspiration of developers, designers, and artists. ()
Handling an SVG path from one single variable to show a wheel indicator. ()
Modifying the new CSS property transform-origin to distribute letters around a circle. ()
Playing with artificial gravity on canvas. I used to play Moon Lander and wanted to recreate some of the physics in JavaScript. ()
Interactive infographic about the landing of Curiosity Mars Rover, in 13 kB including vector graphics. ()
My first experiment using canvas. It plays with forces like acceleration, inertia, momentum, etc. ()
DOM-based matrix of tiles rotated in CSS. When clicking on a tile, an algorithm calculates the shortest path (max. 2 directions). ()
DOM-based recreation of the game for Windows. The DOM elements are destroyed every time they left the viewport. ()
My first fully working experiment. It required so much processing to walk that the pace depended on the browser. ()
Objects that combine hardware and software using everyday materials and tools.
Fully-printed, 4WD, high-performance, 1:8 scale RC car. Even the gears are fully printed in PLA, and they work smoothly. ()
I found a vintage clock on the street and upcycled it into a word clock using an individually addressable LED strip and Arduino. ()
3D printed parts are rough, and I found the perfect project to learn as much as possible about how to post-process them. ()
I built this as a minimum viable product for beginners. It has no knobs, sliders, or faders, and it runs with minimal code. ()
This simple box can make cyanotypes, a photographic printing process that produces blueprints using artificial sunlight. ()
I put together an old Raspberry Pi, monitor, and speakers with MDF boards, Sanwa-like joysticks, and HAPP push buttons. ()
Drawings made out of squares and other self-imposed constraints.
Polished thoughts from my endless list of drafts.
I glued, smoothed, and painted this 3D printed Tesla Roadster 1/9 scale model.
I'm a beginner in all things Arduino and I've been working on an easy, fast, and cheap project to learn more about it.
SVG favicons are being supported by browsers, SVG can render text and emojis are text as they are part of the unicode standard.
I mixed old hardware with new materials to make a full-sized retro cabinet that fits in a small apartment.
Step-by-step tutorial on how to setup your Raspberry Pi to make the most of it as retro games console.
Definición totalmente básica sobre las dependencias de Node JS.
Las consultas sobre microdata que recibo más a menudo.
Diferencias entre Virtual DOM de Facebook e Incremental DOM de Google.
Qué tamaños de imágenes tener en cuenta para distintas resoluciones y cómo implementarlas.
Características de este patrón de diseño, más alla de su aspecto visual.
Introducción y punto de partida para saber más sobre este patrón de diseño.
Cómo mejorar la experiencia de espera de los usuarios de una interfaz.
Cómo podemos aprovechar los beneficios que nos dan las SPA.
De qué se trata el nuevo protocolo de intercambio de datos.
Cambios que proponen las SPA y cómo podemos aprovechar los beneficios.
Notas acerca del video de Facebook donde introducen el concepto de Flux.
Introducción a los tipos de layouts más conocidos.
Análisis sobre dos casos similares de roles.
Cómo mejorar el posicionamiento de un background, usando el feature de offset.