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 stories and videos.
Whether it's a new Web standard about to be introduced in a specific browser version, or I've had a spontaneous idea while on the tram, I always create a quick demo for myself. This helps me understand better the available possibilities.
I tested if a perspective trick with stacked rings of different circ. could create the impression of a sphere with volume.
It counts the frequency of word appearances in 20 popular books. Then calculates the probability of word corrections.
I implemented browser modules and Web Components, and applied some concepts of func. prog. in vanilla JS.
Experiment using WebMIDI and WebAudio standards to let MIDI controllers (hardware) play music on a synthesizer or sampler.
A simple serverless cloud function aggregates RSS feeds, normalizing the output to be displayed by the frontend.
Each 3D voxel is a single HTML element with 3 faces (using its pseudo-elements). Voxels are then stacked in layers.
The HTML element and its pseudo-elements serve as the 3 faces. When rotating, the transform origin changes to be on view.
A fully functional Casio calculator built with Create React App, using reducers for centralized state management.
A conceptual UX experiment to minimize the user learning curve on filtering lists. Uses Redux as a state manager.
An emoji flattened using the text-shadow technique, rotating in a 3D space with CSS.
Displays a fully vectorized progress bar by managing an SVG path with a single variable to show a wheel indicator.
Modifying the new CSS property transform-origin to distribute letters around a circle.
Experimenting with artificial gravity on canvas to recreate some of the physics of the game MoonLander.
An interactive infographic about the landing of the Curiosity rover. It weights 13kB in total, including assets.
My first experiment using the HTML canvas. It plays with forces like acceleration, inertia, momentum, etc.
A matrix of divs with an isometric perspective (using CSS). Clicking on them calc. the shortest path for movement.
A recreation of the game using HTML elements controlled via JS. Elements are created and destroy out of the visible area.
My first experiment involving the movement of DOM elements based on user input. It's very resource-intensive.
These contraptions are a fusion of open-source hardware and software. I film my construction process to inspire others. When it comes to publishing videos, I don't follow a schedule. I believe the schedule pressure compromises quality, and I prefer to create things I genuinely enjoy.
I modeled this case inspired by the Xbox controller using T-splines and added a Raspberry Pi with a 5" display inside.
I crafted this from scratch using MDF boards and an old Raspberry Pi. It helped me practice woodworking skills.
I designed this as simple and minimalistic as possible. It lacks knobs, sliders, or faders and runs with minimal code.
A fully-printed, 4WD, high-performance, 1:8 scale RC car. Even the gears are made entirely of PLA, and they run 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 post-processing them.
This simple box can create cyanotypes, a photographic process that produces blueprints using artificial sunlight.
I dismantled all the diffusion layers of a computer monitor and added a high-CRI daylight LED strip.
This medium challenges me to work within a set of strict constraints, such as using a significantly reduced amount of space and colors. So, I use Pixel Art not only to evoke nostalgia but also to practice the art of abstraction.
I typically use fewer colors and less space, so details are minimal and more interpretation is needed. In this case, I wanted to include every detail.
I incorporated the brick texture directly into the lights and shadows. The green, spiky crown was the hardest detail to represent in pixels.
I defined the minimum size for a single window and built from there. I kept all dimensions as true to the original as possible.
I kept the dimensions as accurate as possible. However, elements like the roof and pantograph are out of proportion in color and shape.
The most challenging part was drawing all the curves accurately in isometric view, especially representing the stripes in the paint job.
Another week, another challenge on #spriteweekly. I practiced handling lighting and shadows on an Italian Vespa-like helmet in 32x32.
I grappled with a 16x16 grid due to limited space and color options. But, this challenge let me enjoy working within constraints for #spriteweekly.
A beautiful German twin-lens reflex camera. I chose to create a frontal drawing instead of my usual isometric style to keep it simple.
Fully-automated, electric, customizable, multi-purpose vehicle. The most challenging part was drawing the logos in its isometric form.
I selected the K6 (kiosk number six) from 1936 for the second challenge of #spriteweekly #red.
My first pixel art drawing in over a decade. It feels good to give it another try.
My list of notes and drafts is scattered. I write whatever crosses my mind, and sometimes I dedicate time to refine these ideas and thoughts into something substantial.
A quick, and hopefully final, update on what changed with the DIY handheld game console.
What's new, what I'm working on, and what comes next.
All the information that I gathered building this handheld game console compiled in one place so anyone can build it.
I glued, smoothed, and painted this 3D printed Tesla Roadster 1/8 scale model.
My highlights from the 2020 analysis on what makes software engineers happy.
The trick to make interactions feel lightning fast.
Introduction to the basic concepts of Microdata: the structured data on the Internet.
Frameworks are tools for developers, not for users. Good UX is the end, the frameworks we use are the means to that end.
Introduction to the basic concepts of Web Accessibility (a11y).
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 supported by browsers. SVG can render text and emojis are text as they are part of the unicode standard.
No CSS was harmed in the making of this blog post.
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.