Pixelated me

Leandro Linares

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.

Code

Collection of quick experiments and unfinished projects.

  1. CSS-Only 3D Sphere

    The perception of volume is created by stacking 21 different elements separated by equal distances. ()

  2. Spell checker

    After counting words from 20 popular books, it suggests the nearest ones to replace spelling mistakes. ()

  3. Wunderpaint

    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. ()

  4. Punchy

    WebMIDI and WebAudio lets users play a MIDI controller on a synthesizer or sampler directly in the browser. ()

  5. Feeds Aggregator

    Reads RSS feeds using a serverless function and normalizes the output to be displayed in a list. ()

  6. CSS Voxels

    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. ()

  7. Single Element Cube

    The element and pseudo-elements are the faces. When it rotates, it changes the transform-origin to always display 3 faces. ()

  8. Single Element Logo

    Playing with shapes as borders, backgrounds, and characters as part of the content of the pseudo-elements. ()

  9. CSS Retro Calculator

    A fully working Casio calculator built with Create React App and reducers to update the state. The visuals are all CSS. ()

  10. Human-readable Filters

    Conceptual experiment to minimize the humans' learning curve for filtering lists. ()

  11. Autumn Leaf

    An emoji flattened with the text-shadow technique, overrotating in a couple of axes. ()

  12. Mobile Game Patterns

    Collection of mobile games design patterns for the inspiration of developers, designers, and artists. ()

  13. Circle Progress Bar

    Handling an SVG path from one single variable to show a wheel indicator. ()

  14. Time is Ticking

    Modifying the new CSS property transform-origin to distribute letters around a circle. ()

  15. Doodle Lander

    Playing with artificial gravity on canvas. I used to play Moon Lander and wanted to recreate some of the physics in JavaScript. ()

  16. 70 Seconds of Terror

    Interactive infographic about the landing of Curiosity Mars Rover, in 13 kB including vector graphics. ()

  17. Doodle Car

    My first experiment using canvas. It plays with forces like acceleration, inertia, momentum, etc. ()

  18. Isometric Walker

    DOM-based matrix of tiles rotated in CSS. When clicking on a tile, an algorithm calculates the shortest path (max. 2 directions). ()

  19. SkiFree

    DOM-based recreation of the game for Windows. The DOM elements are destroyed every time they left the viewport. ()

  20. Just Fruits

    My first fully working experiment. It required so much processing to walk that the pace depended on the browser. ()

Things

Objects built with everyday materials and tools.

  1. Word Clock

    I found a vintage clock on the street and upcycled it into a word clock using an individually addressable LED strip and Arduino. ()

  2. Tesla Roadster At Scale

    3D printed parts are rough, and I found the perfect project to learn as much as possible about how to post-process them. ()

  3. MIDI Controller

    I built this as a minimum viable product for beginners. It has no knobs, sliders, or faders, and it runs with minimal code. ()

  4. UV Light Box

    This simple box can make cyanotypes, a photographic printing process that produces blueprints using artificial sunlight. ()

  5. Arcade Machine

    I put together an old Raspberry Pi, monitor, and speakers with MDF boards, Sanwa-like joysticks, and HAPP push buttons. ()

Pixel Art

Drawings made out of squares and other self-imposed constraints.

  1. Welt Balloon

    Weltballon

  2. Wasserturm am Ostkreuz

    Wasserturm am Ostkreuz

  3. Haus Der Statistik

    Haus Der Statistik

  4. Tram of Berlin

    Berliner Strassenbahn

  5. Bell Nexus air taxi

    Bell's Air Taxi

  6. Vespa Helmet

    Vespa Helmet

  7. Guy Hawkes Mask

    Guy Hawkes Mask

  8. Rolleiflex

    Rolleiflex

  9. Toyota e-palette on-road commerce

    Toyota e-Palette

  10. Telephone Kiosk

    Telephone Kiosk

  11. Raspberry Pi

    Raspberry Pi Model 1

Blog

Polished thoughts from my endless list of drafts.

Diferencias entre Virtual DOM de Facebook e Incremental DOM de Google.

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.

De qué se trata el nuevo protocolo de intercambio de datos.