DEV Community: Aida El Kouri

Redesigning Layout / Git setup - Day 5(ish) of coding

Aida El Kouri — Mon, 29 Aug 2022 02:17:43 +0000

Back after a minute hiatus, I had some time today to really sit down and work on the friend manager app.

I decided last time I want to try something new with the layout resembling a computer desktop, with icons that can be moved around and a status bar of some sort.

Accomplished:

Set the project up on git
Created new branch for the desktop view changes
Moved around the friends list to be the full width
- Still trying to figure out how I can use z-index to layer the windows on top of the desktop.
Created new status/toolbar component fixed at the bottom with save button and search bar
- Want to animate these more in the future and make them more compact.

Getting a little bit closer to what I want.

For next time, I want to:

Figure out layering of the windows on top of the desktop
Create bounds for the draggable windows - so they can't be dragged onto the status bar
Style the status bar better - possibly with a clock & icon
Get context menus working

One good feat is worth a 1000 bug fixes - day 4 of coding

Aida El Kouri — Tue, 23 Aug 2022 04:55:59 +0000

Last I posted, I was struggling with making a working context menu. The requirements sound basic but I've been debating whether to use svelte actions or listeners to make it happen.

Essentially:

When users right click on a friend in the friend list window, they will be able to edit or delete.
When they right click on a blank space, they will be able to create a new friend.
When they right click on an area without context menu ability, nothing should happen
Only one context menu should be open at a time.

I'm still considering how to do this. One solution could be to treat the whole window like a desktop instead. So when they right click on a "friend" icon, it does the right actions. When you right click on any other space, it would have the new friend select.

This might be way easier and funner of a design. Especially if you could drag drop the friends around in groups in the way macOS desktop works.

Sadly this requires a pivot, and before I can do that, I need to make sure my code is squeaky clean. However, for today I just wanted to focus on some other low hanging fruit.

Accomplished

Created close window functionality
Added sorting (sort by location and friends) by storing a sort method in the store and having a derived store variable for sortedFriends
Added filtering for people by search keyword so you can search by name or location
Added more properties for gift ideas, friendiversary, notes

Note on missed days

Obviously the goal when you start any 100 day consecutive challenge is to not miss a day. The idea with this challenge being that I transform into a Lebron James of svelte at the end of the 100 days. But truthfully, I haven't coded for fun in a long time. Doing it on weekends still feels like something I should report to HR, so I'm trying to take it as lightly as possible. Still keeping up with it, but no resetting if I miss a day (or two but no more!! 😡) /excuses

Lazy Day, Blockers, Bleh - Day (3&4) of Coding

Aida El Kouri — Fri, 19 Aug 2022 23:09:00 +0000

Yesterday

I'm feeling pretty under the weather today (right only on day 3 lol), so thought I'd relax and take things a little easy today.

Done!

played around with the styling more
went through more svelte tutorials

Today

I felt reinvigorated (if not a bit guilty) starting fresh, with lots of new features to work on.

One of my main goals today was to implement context menus to make certain actions more available. The plan is to put "edit", "delete", and "create" button into these. Sadly, the solution was not as easy as a prepackaged library, and I'm still facing some blockers.

I wanted to do this as simply as possible, so I'm just doing:

<div on:contextmenu={setPosition}
 Aida
</div>

<div class="context-menu" style="top: pos.x; left: pos.y">
  <button>Edit</button>
</div

This succeeds in making the context menu come up, but has an issue. The context menu needs to close whenever another one opens so the logic can't be contained in just one Friend component. This means I'll need to lift up the context menu state to track which one is open. It will also be a challenge if they select a place from the page outside or regular click somewhere else.

Also because I was planning on having clicking on a empty space be the "Create" context menu, I'll need to have two different context menu trackers going.

For now, I'm happy with my basic buggy lil context menu, but will work on it this next week.

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

Aida El Kouri — Wed, 17 Aug 2022 22:28:00 +0000

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

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.

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:

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

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

Svelte (Superstar ⭐️) - Day 1/100 of Coding

Aida El Kouri — Tue, 16 Aug 2022 21:40:38 +0000

Gone are my baby dev days of hackathons and excitement over what I believed would be the next Facebook/Microsoft breakthrough. Working a 9-5 job as a developer is about as amazing any mostly indoor existence could be, but I miss coding for fun more than anything. I want to end the next 100 days (+/- 5 depending on procrastination) as a better, more involved developer.

Enter....100 Days of Code.

I've had this idea in my head recently of a friend manager. So many of my friends have quit social media (including me), and it'd be nice to have a way of remembering different connections I've made over the years.

Dev Log:

Setup new svelte project
Completed most of the tutorials
Created a feature list
Used local storage to save friends locally + with Svelte Stores
Created new friend form
Created friends list component
Created ToggleContainer (higher order) to hide components when not needed

Stopping place: I am struggling with whether to create 2 separate creation/editing components. Using an id in the store to track who I'm editing makes sense, but I have two options:

Pass in the "friend" properties as props to the CreateEdit component
Use the "editFriendID" from the store to get the properties and pre-load the form with the right options.