DEV Community

Aida El Kouri
Aida El Kouri

Posted on

Drag n Drop / Rock n Roll - (2/100)

I should mention that I did a little bit more work after my post yesterday to empty out my creative gas tank, so I

  • added the delete functionality
  • added the edit functionality
  • did a little bit of styling to the box

And ta-da....
Image description

Okay, I'll admit UX should not be this terrifying for me. In the past, all my personal projects all eventually develop the same style though (b/c of what I'm comfortable with and what I like). I'm not a big fan of wireframing for fun projects, but I did want to at least gather some inspiration.

I love the retro OS pastel look of boxy panels, and would love for the whole app to be configurable so you can have multiple "friends" open at one time, use context menus with right click, and have folders or groups for friends. It even reminds me of the God prayer program from Bruce Almighty.

Image description

In order to do this, it seems necessary to have a drag-drop layout aspect. After weighing building my own with Svelte (which I think would be a really fun project for learning) or using a pre-built library, I chose to go with the latter. One of my goals with these 100 days is to finish a project, which I'd like to start with this site.

I did get nervous very quickly finding a library as most of them were for a more drag grid layout, which isn't exactly what I need. Also reading code in svelte is unfamiliar to me right now, and building a whole drag drop action was obviously intimidating. Luckily I found @neodrag which ended up being a great option. I did a little test run with some fake objects:
Image description

So end of day 2 and it's looking a lot better!
Image description

Accomplished 🎉

  • Create drag/drop windows
  • Use svelte:component to dynamically create windows for editing, list, creating friends
  • Use eventDispatcher to allow nested elements to create and edit windows at the top level
  • Add ids to friends (this needs polishing but will be helpful for future)

Next steps are:

  • Styling (which I thought I'd have more time for)
  • Common close window functionality
  • Context menu
  • Redesign friends list

Top comments (3)

Collapse
 
zoppatorsk profile image
Zoppatorsk

Good call on not implementing all drag and drop stuff yourself, hope the lib will work out... stuff like that is just tiring and takes a lot of time away from actually building the project (at least that is my experience after have implemented it some times in the past).. Soo far I have not figured out what your project actually will do, seems like some kind of "contact list" .. but I might be missing something.

Collapse
 
booleanings profile image
Aida El Kouri

100% agree. I would love to have the time and energy to create a library like that, but if I can't do it well, I don't want to bother lol.

Also lol that's a great question - thanks for asking :) The idea is just to have some kind of offline and fun looking way of keeping track of people I know. There's a lot of friendships I've let fall off, b/c I don't remember to check in. There's a lot of times acquaintances delete social media and I forget they exist (shamefully). Sometimes I genuinely start to feel lonely without realizing all of the people I love and have in my life. Idk if that makes sense but yeah just a silly lil app 🤖

I could probs do it all with iOS contacts or some other app, but I like the idea of owning the data more and hopefully building up features to make it a cute and fun to use experience.

Collapse
 
zoppatorsk profile image
Zoppatorsk

Yeah, really no point in "re-inventing" the wheel every time ;)

Ahh.. ok.. I understand now. It's like a "memory book" for friendships.. cool.
Don't know why but when reading that the old Bob Marley song No woman no cry popped up in my head.. especially the line "Good friends we have, oh, good friends we've lost along the way."

I understand your reasons, most things I make is just cuz I felt like making them, there does not really need to be any other reason.. and yeah, many times u learn a lot of things along the way, so it is in now way a waste.