We do expose which keyboard keys are being used in our pdnd events. Is that not working for you?
15.02.2026 22:36
👍 2
🔁 0
💬 1
📌 0
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 🤔
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
Episode 2! podcasts.apple.com/us/podcast/u...
I plan on releasing weekly at this stage and see how I go
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 🙌
🪴 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!
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!
