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

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!

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.

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!

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?

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

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

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.

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.

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.

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:

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!