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.

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 strive to create a quick demo for myself. This helps me gain a better understanding of the available possibilities.

  1. CSS 3D Sphere

    21 stacked, bordered elements separated by equal distances create the perception of volume.

  2. Spell checker

    After counting words from 20 popular books, it suggests the nearest word for spelling mistakes.

  3. Wunderpaint

    A pixel art editor that only uses a canvas for processing i/o. The user interacts with an image.

  4. Punchy

    WebMIDI and WebAudio allow playing a MIDI controller on a synthesizer or sampler.

  5. Feeds Aggregator

    It reads RSS feeds using a serverless function and normalizes the output for display in a list.

  6. CSS Voxels Chicken

    Each voxel is one HTML element with three faces. Voxels are stacked in layers along the z-axis.

  7. Single-Element Cube

    The element and pseudo-elements serve as the 3 faces. When it rotates, it changes the origin.

  8. CSS Calculator

    A fully functional CSS Casio calculator built with Create React App and reducers.

  9. Filters for Humans

    A conceptual experiment aimed at minimizing users' learning curves for filtering lists.

  10. Autumn Leaf

    An emoji flattened using the text-shadow technique, over-rotating in multiple axes.

  11. Rounded Bar

    Handling an SVG path from one single variable to display 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 MoonLander.

  14. 70 Sec. of Terror

    An interactive infographic about the landing of Curiosity. It weights 13kB total.

  15. Doodle Car

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

  16. Isometric World

    A DOM-based matrix of tiles. Clicking on them calculates the shortest path for movement.

  17. SkiFree DOM

    A recreation of the Windows game using HTML elements controlled via JavaScript.

  18. Pick a fruit!

    My first fully functional experiment moving DOM elements, albeit 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 delve into Pixel Art not only to evoke nostalgia but also for the art of abstraction.

  1. Welt Balloon

    Weltballon

    Another unusual sight that never fails to grab my attention. I typically work with fewer colors and a smaller canvas size, but I wanted to include every detail.

  2. Wasserturm am Ostkreuz

    Wasserturm Ostkreuz

    I'm fortunate to see this one-hundred-something-year-old water tower frequently while commuting via Ostkreuz.

  3. Haus Der Statistik

    Haus Der Statistik

    The first time I saw this building it in person, I wasn't even looking for it. It presents a striking view right in the heart of the city.

  4. Tram of Berlin

    Berliner Strassenbahn

    Having never lived in a city with trams, riding one remains a pleasant novelty for me.

  5. Bell Nexus air taxi

    Bell's Air Taxi

    In 2019, Bell unveiled Nexus at CES, an air taxi concept. Here's my isometric representation of the hybrid-electric flying car.

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

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

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.