Alex Reardon

We do expose which keyboard keys are being used in our pdnd events. Is that not working for you?

This is so cool! Well done!

toast component ui and section messages are actually quite similar 🤔

Dynamic styles in Tailwind Podcast Episode · Frontend Engineering Bushwalk · 02/02/2026 · 19m

Ruminating about dynamic styling in Tailwind - concatenation, Tailwind Merge and data selectors

podcasts.apple.com/us/podcast/d...

Migrating the element sorting to @alexreardon.bsky.social's pragmatic drag and drop 😁.

- Grid and Flex layouts with gaps will no longer be an issue
- An overlay will show the blueprint of the current drop target
- Your blueprint components won't anymore need to manually mount drag-and-drop handles

Without hover:

It's a great pattern that clicking on a label for a checkbox will also select the checkbox. However, there is commonly no feedback when hovering over a label that anything will happen when you click.

What if we changed that?

I've gone for a consistent line color (blue) which works on different toast appearances. I still need to tweak the color ramps a bit

- The default flex-direction for display:flex is row (↔ horizontal)
- When using flex-direction:row, then justify (ie justify-content) is the same as "justify" in a text editor (↔ horizontal), so align-items is the cross axis (⇵ vertical)
- When using flex-direction: column it's the reverse

A meme about me finally remembering some CSS details

HeroUI has an option to do a timer on the background

- It looks nice!
- When you mouseleave the timer doesn't reset
- I think having an animation around the close button makes it clearer what will happen (but subjective)

With the toast entrance / exit animations

Bingo

Unwinding the progress line to communicate that the auto close timer has been reset (+ also changing the color of the line when rewinding)

Yeah, that would be nice

🤔 Clearing the outline when hovering over the toast - to communicate the timer is not paused, but is no longer active

I like the idea of animating around the close button as hopefully it communicates what action will be done when the timer finishes.

I am not sure if it draws too much attention though. I might play with making it more subtle

Playing with making auto dismiss timing more visible for a toast

Using cookies for UI state Podcast Episode · Frontend Engineering Bushwalk · 01/19/2026 · 13m

Episode 2! podcasts.apple.com/us/podcast/u...

I plan on releasing weekly at this stage and see how I go

Layering with popovers Podcast Episode · Frontend Engineering Bushwalk · 01/17/2026 · 18m

First episode: my experiences with the new layering apis

podcasts.apple.com/us/podcast/l...

@adamwathan.com had a similar idea end of last year. Busted my hopes of doing something that I thought was novel 🫠. His podcast is great - go listen to it!

open.spotify.com/show/0hO74C6...

I can be a perfectionist when it comes to sharing my thoughts, and so far this form has helped me take the pressure of myself. I have four episodes recorded from the end of last year 🙌

Frontend Engineering Bushwalk Technology Podcast · Come relax and nerd out with me as I go for a bushwalk and talk through my learnings, ideas, and challenges in frontend engineering

🪴 A new podcast: just me, talking about frontend engineering while walking through the bush

podcasts.apple.com/us/podcast/f...

With pragmatic drag and drop, you can do whatever logic you like in the event callbacks, and you can do whatever drop indication you like too (don't feel limited by our preset ones!)

You can use 'closest edge' and then make sure your drop indicator is aware of the direction the document is in. That is what our line drop indicator does

github.com/atlassian/pr...

Closest edge is the most flexible. If you look at the code, it doesn't to a whole lot. You are welcome to make your own hitbox code if you want as well!

YouTube video by Syntax The King of Drag and Drop: Alex Reardon

More nuance if you are interested: www.youtube.com/watch?v=CjGn...

There are some minor limitations, but generally you will get a good experience on all platforms, including mobile, while only needing to include a tiny amount of code.

Use the platform™ 🙌

Depends on what your goals are. Pragmatic drag and drop is optimised around performance and flexibility. You can think of it as roughly jQuery for drag and drop - it gives you a low level toolchain for making working with the browsers built in drag and drop capabilities easy and consistent.

This looks great!