16 replies
1d22h
To provide some context for this, Atlassian originally created a drag and drop library called react-beautiful-dnd. A few years ago they stopped maintaining the library, and some community forks took over (I think @hello-pangea/dnd is the most popular).
In the interim I've found https://dndkit.com a _really_ nice solution, but it's only available in React-land.
Looks like this new library was written at least in part by the same guy who wrote react-beautiful-dnd, so my hopes are high (as long as this one stays maintained...)
Both the dndkit and pragmatic-drag-and-drop are great for simple use cases. If you're building something complex though, neither will cut it, nor will any other dnd library I've seen. I built a card game interface last year that involved 3 forms of droppable:
- a hand, where cards were display in a row and could be reordered
- a pile, where cards stacked and only showed the topmost card, which could be dragged off the pile
- a play area, where cards were freely arranged and overlapped each other based on which was moved most recently (and thus "on top"), and in which groups of cards could be moved as a unit via drag-select
For cases like this, these libraries prove woefully inadequate. I had to hand-write the whole thing and it was by far the most challenging front-end work I've ever done, especially since it's multiplayer.
Do you do any consulting? Would love some help on something similar? @pieperz on twitter.
I've got my hands pretty full with another project and unfortunately I don't use Twitter anymore since it became X. If you'd like, though, I can send an email to your quilt store's contact email (team@) and you can reply to that to tell me a bit more about what you're trying to do, and if I can give any genuinely useful suggestions as to how I would go about it, I will do so. But I realize technical advice != actual developer hours and if that's not so helpful, no worries.
Can I inquire why you decided to jump ship on X?
If something(s) changed there would you have stayed or would you return?
By measurable account he's made the platform better overall, contrary to certain propaganda narrative talking points.
He did of course make Twitter-X less of a bubble machine, which arguably is bad for society because then ideological mobs with certain unchallenged ideas or beliefs go unchallenged (doesn't matter what "side" you're on, there are extreme and bad-wrong ideas on both/all) - so you'd begin to get exposed to content that may make you uncomfortable. If you're not able to quickly scan through it and not react so you just move on, it would become a tiresome and a challenge.
You could go "full bubble" like Instagram recently did though and create a setting default on to not show you "political" content from people you don't follow - arguably adding to the detriment of society, and of a seeming concerted effort by bad actors towards division and conquering us by helping reinforce the bubble walls.
I find your perspective fascinating but I never ‘got’ Twitter. My current perspective is that a bunch of idiots are loudly shouting the shortest/most successful piece of mimetic garbage has currently evolved and the day I see something useful arise out of that morass of RNA-analogue I’ll be amazed but until then I wish it would stop taking attention away from larger more nuanced conversations which are more than a couple hundred base pairs (or tokens) long that we need to be having in order to navigate our current waters
To be fair, this is like saying Legos aren't appropriate for building a house or a pocket calculator isn't appropriate for analyzing a particles accelerator -- simple tools are great for their intended use case but you need much more advanced tools for complex scenarios.
With that said, I agree that emulating playing cards is tricky, I'm curious what you used. I built https://play.cheatatbj.com using ZimJS (whose web site looks kind of like a joke but is actually a very impressive animation framework).
I didn't use anything for DND, I wrote that all by hand. I used React, Pullstate for a state store, and PubSubJS. All of them are great to work with, although this was really, really pushing the limits of what React is made to accomodate. If you play Magic: The Gathering you can check it out by starting a mirror-match by yourself at "ca rd tav ern dot com" with the spaces removed (don't want this comment showing up in search results), but it would require you to make a deck since I haven't gotten around to adding default starter decks to new accounts yet. (The site was largely finished but never launched or shared.)
What's the point of this? To get better at blackjack?
I ask because I did a blackjack trainer to train me via repetition on perfect play (circa 2008). Still one or two things left unimplemented to this day, though, but over the course of playing a few games a day over months, I definitely did get better (losing less over time than I used to :-))
Did you write it in react? This is really one of the use cases where React can become a hindrance.
Yes. My UI's functionality was what I would personally describe as "unbelievably complicated," but I don't know how I would have done it without the modularity of React. It's a full-blown sandbox for playing Magic: The Gathering. I'm sure it could be done otherwise, but React is what I know and it didn't make sense to me to work in something I didn't know rather than something I knew well.
Could you share a link to your game? I'd love to check it out.
See my other comment on this thread! Don't want to copy paste it, feels spammy.
I’m just wrapping up a project at work with similar constraints and share the same experiences. Good library, best used for simpler use cases. Drag and drop across browsers and devices is still not a smooth dev experience. Dnd did improve it a lot and performance issues are not noticeable to the end user in our use case. Hopefully the new version that comes out continues to be as good.
I also found dndkit and built a very complex/robust drag and drop form builder with it. It gave me nice abstractions for custom collision detection without worrying about the browser implementation. Highly recommended.
Can you link to the form builder? I'm interested to see.
dndkit seemed very promising, until I realized the state of development [0], and critical performance issues if you want to use it for larger lists (individual issues linked within [0]). So it's fine if you need to use it for simple scenarios and a smaller number of items, but otherwise, it's inadequate in current state, unfortunately...The fact that the post was in Aug 2023, perf. issues still remain and there's low activity on issues in general, doesn't bode well...
[0] - https://github.com/clauderic/dnd-kit/issues/1194