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 stories and videos.

I write code

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.

  1. CSS 3D Sphere

    I stacked rings of different circumpherences, using only their element border, to create the impression of a sphere with volume.

  2. Spell checker

    It counts the frequency of word appearances in 20 popular books. Then calculates the probability of word corrections.

  3. Wunderpaint

    I implemented browser modules and Web Components, and applied some concepts of FP in vanilla JS.

  4. Punchy

    Experiment using WebMIDI and WebAudio standards to let MIDI controllers (hardware) play music on a synthesizer or sampler.

  5. Feeds Aggregator

    A simple serverless cloud function aggregates RSS feeds, normalizing the output to be displayed by the frontend.

  6. CSS Voxels Chicken

    Each 3D voxel is a single HTML element with 3 faces (using its pseudo-elements). Voxels are then stacked in layers.

  7. Single-Element Cube

    The HTML element and its pseudo-elements serve as the 3 faces. When rotating, the transform origin changes to be on view.

  8. CSS Calculator

    A fully functional Casio calculator built with Create React App, using reducers for centralized state management.

  9. Filters for Humans

    A conceptual UX experiment to minimize the user learning curve on filtering lists. Uses Redux as a state manager.

  10. Autumn Leaf

    An emoji flattened using the text-shadow technique, rotating in a 3D space with CSS.

  11. Rounded Bar

    Displays a fully vectorized progress bar by managing an SVG path with a single variable to show a wheel indicator.

  12. Time is Ticking

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

  13. Doodle Lander

    Experimenting with artificial gravity on canvas to recreate some of the physics of the game MoonLander.

  14. 70 Sec. of Terror

    An interactive infographic about the landing of the Curiosity rover. It weights 13kB in total, including assets.

  15. Doodle Car

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

  16. Isometric World

    A matrix of divs with an isometric perspective (using CSS). Clicking on them calc. the shortest path for movement.

  17. SkiFree DOM

    A recreation of the game using HTML elements controlled via JS. Elements are created and destroy out of the visible area.

  18. Pick a fruit!

    My first experiment involving the movement of DOM elements based on user input. It's very resource-intensive.

I make things

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 draw Pixel Art

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.

  1. Welt Balloon

    Weltballon

    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.

  2. Wasserturm am Ostkreuz

    Wasserturm Ostkreuz

    I incorporated the brick texture directly into the lights and shadows. The green, spiky crown was the hardest detail to represent in pixels.

  3. Haus Der Statistik

    Haus Der Statistik

    I defined the minimum size for a single window and built from there. I kept all dimensions as true to the original as possible.

  4. Tram of Berlin

    Berliner Strassenbahn

    I kept the dimensions as accurate as possible. However, elements like the roof and pantograph are out of proportion in color and shape.

  5. Bell Nexus air taxi

    Bell's Air Taxi

    The most challenging part was drawing all the curves accurately in isometric view, especially representing the stripes in the paint job.

  6. Vespa Helmet

    Vespa Helmet

    Another week, another challenge on #spriteweekly. I practiced handling lighting and shadows on an Italian Vespa-like helmet in 32x32.

  7. Guy Hawkes Mask

    Guy Hawkes Mask

    I grappled with a 16x16 grid due to limited space and color options. But, this challenge let me enjoy working within constraints for #spriteweekly.

  8. Rolleiflex

    Rolleiflex

    A beautiful German twin-lens reflex camera. I chose to create a frontal drawing instead of my usual isometric style to keep it simple.

  9. Toyota e-palette on-road commerce

    Toyota e-Palette

    Fully-automated, electric, customizable, multi-purpose vehicle. The most challenging part was drawing the logos in its isometric form.

  10. Telephone Kiosk

    Telephone Kiosk

    I selected the K6 (kiosk number six) from 1936 for the second challenge of #spriteweekly #red.

  11. Raspberry Pi

    Raspberry Pi Model 1

    My first pixel art drawing in over a decade. It feels good to give it another try.

I keep a blog

My notes and drafts are scattered. I often write to myself when exploring concepts I want to understand better. Sometimes I spend time refining these ideas and thoughts into something I believe could help others.

Filter by:

My highlights from the 2020 analysis on what makes software engineers happy.

Frameworks are tools for developers, not for users. Good UX is the end, the frameworks we use are the means to that end.

SVG favicons are supported by browsers. SVG can render text and emojis are text as they are part of the unicode standard.

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.

Cómo mejorar el posicionamiento de un background, usando el feature de offset.