iiinova — where your digital self keeps evolving

David Luhr @luhr.co · 15/09/2026

Pleased with how this Calendar component is coming together for Kit's design system. It includes month, year, and single/range day pickers with full keyboard navigation/assistive technology support and lots of interesting styling challenges.

100

David Luhr @luhr.co · 03/09/2026

Stoked with how this combobox for Kit's design system came together. Lots of design engineering in a single component. It offers both single and multiple selection variants, with fuzzy match, search highlighting, and convenient clearing options, all with full keyboard support.

000

David Luhr @luhr.co · 10/03/2026

Stoked how these data visualizations came together last week at Buffer. Lots of data science, content, design, and design engineering went into these social media engagement insights. Check out the full page: buffer.com/insights/sta...

010

David Luhr @luhr.co · 09/12/2025

Today I needed to scale an element I couldn't directly style. `transform: scale(0.5)` doesn't affect layout, which leaves empty space around the element. Then, I learned about `zoom: 0.5`, which is a newly supported CSS property that does exactly what I needed: scale an element and affect layout.

010

David Luhr @luhr.co · 20/11/2025

My team at Buffer is hiring a Senior Engineer – Growth Marketing. We'll work closely together on projects like referral programs, internationalization, and tracking/experimentation systems. - Fully remote - 4-day work week - $156.5K–$202.3K Apply: buffer.com/journey/a661...

000

David Luhr @luhr.co · 29/10/2025

Dark mode isn't just to look cool. It's an important accessibility feature that makes the experience better for everyone. Light mode causes eye strain and discomfort for me across a day. Dark mode solves this and makes content more legible for me. Stoked dark mode is now available in Buffer!

020

David Luhr @luhr.co · 29/09/2025

Playing around with animation and content ideas for an upcoming Buffer feature. If people have animation enabled (accessibility-first design), comments spawn in random positions. Might include a button to clear the comments and a scroll-driven animation that ties into the page.

020

David Luhr @luhr.co · 12/08/2025

Sneak peak of my work this week: rich, interactive charts with follower growth, posting frequency, engagement, and reach benchmarks we gather at Buffer. This project got me deep into charting/dataviz libraries and SQL queries. Excited to launch it soon!

040

David Luhr @luhr.co · 07/08/2025

I recently built a new homepage hero section on Buffer.com with this fun interactive animation. I'm writing a post to break down the build since there are lots of cool tricks I learned along the way. What do you want me to cover? What questions do you have?

000

David Luhr @luhr.co · 17/07/2025

We're hiring for 3 engineering roles at Buffer! - Senior Product Engineer (Frontend) - Senior Product Engineer (Backend) - Senior Backend Engineer (Platform and API) These roles offer $156.5K - $202.3K + equity. We're a fully remote, global team with a 4-day workweek. Apply: buffer.com/journey

010

David Luhr @luhr.co · 10/09/2024

We're redesigning the @buffer.com website in the open. 🗓️ Tomorrow (Wednesday) I'll be livestreaming at 9 AM PST (UTC -8) to show my design engineering process for this large-scale redesign. I'll be redesigning our Open Salaries page and answering your questions. www.youtube.com/@buildux

Comparison of the existing Buffer.com/salaries page with visually redesigned page featuring a more playful aesthetic with a less saturated color palette.

063

David Luhr @luhr.co · 30/07/2024

This is best achieved with negative margins using the % unit, which is relative to the parent. We fine tune the overlap amount that scales proportionally to the viewport and parent container. We also set `pointer-events: none;` to prevent the image from blocking clicks.

Buffer Bluesky landing page feature sections annotated with negative margin inline start and negative margin inline end using the % unit, as well as point-events none on the image.

010

David Luhr @luhr.co · 30/07/2024

Further down, we have feature sections with a grid layout and images that we want to overlap surrounding content. These images need to proportionally overlap their containers as the screen (viewport) scales in size.

Buffer Bluesky landing page feature sections with content on the left and images on color backgrounds on the right that overlap adjacent content.

110

David Luhr @luhr.co · 30/07/2024

To achieve these, we use (negative) margins with `rem` for a fixed overlap amount. We set a negative `margin-block-start` on the image, and match this amount with `margin-block-end` on the hero section. This allows us to control the overlap independent of the screen size.

Buffer Bluesky landing page hero section with box model overlay and annotations for negative margin block start for the image and positive margin block end on the parent container.

120

David Luhr @luhr.co · 30/07/2024

We just launched Bluesky support with @buffer.com and the landing page was a great demo of how to use various units for overlapping images. Let's start with the hero image. We want it to extend past the bottom of the hero section, without impacting the layout of the next section:

Buffer Bluesky landing page hero section with headline, supporting text, button, and hero image that extends beneath the blue background.

150

David Luhr @luhr.co · 24/08/2023

Lately I've been building an accessible tree navigation with full keyboard support. Support for the ARIA Treeview pattern is lacking so I've created a simpler and better supported approach. There's subtle complexity in the arrow key logic based on the current item and tree state. More info soon!

List of HTML elements in an indented tree structure with dedicated expand and collapse controls for each item. The current item has an accessible focus indicator and contextual options menu.

000