Dropping Lines

I made some great progress on my personal project last night, and it's really coming together. The day before yesterday, I had created a way to navigate to different category screens from a navigation dropdown menu. If the user clicks on Marvel Comics, for example, it will take them to a screen with all of the Marvel superheroes. It's a really cool feature, but I wasn't very satisfied with how I wrote the code. I was handling the change of the screen inside of a reducer, which is great, but I was creating a different case for every single category, which is not great. That means, whenever I wanted to add another category, I had to create another case, which meant I had to create a lot of typing with TypeScript to manage that action. After thinking about it for a minute, I realized this was completely unnecessary. All I needed was one case that took in the information dynamically and rendered the list accordingly. I did this and dropped about 50 to 100 lines of code. That's not all, though. Now, when I add another category, all I have to do is add it to the array and it automatically just works. The array is mapped over into the dropdown menu, as well as being mapped over on the App.tsx to render the correct screen. It was really easy to set this up, and now it makes it incredibly easy to add new categories.

I want to make this site as cool as I can, and I'm not sure I'm in love with the design. I don't have any problems with the individual hero screen; I think that looks fine. I really don't have any problem with the list, either. My real issue is with the navigation bar. Right now, it has a background that is a linear gradient and the dropdown menu blends in with this on the right side of the screen. It doesn't look that bad; I just don't love it. I'm thinking about making it the same color as the background of the screen itself; I've seen a lot of designs that look really good that use this style. I'm at least going to try it and see how it looks. If it's a bust, then it's a bust. After that, I have 2 more things I want to fix up in the application. First of all, I still have to make the site responsive, which isn't going to be fun, but the result will be really beneficial. The other is to figure out a way to lazy load the images from the API. The rest of the information comes in pretty quickly from the API, but I need a way to show a placeholder image until the image comes in. I'll have to do some research to find out the best way to do this, but I'm pretty sure I can figure it out.

I left off yesterday at work with the leads search page almost done, style-wise. There's still an absolute ton of functionality that we have to implement, but without the APIs connecting the backend, it's kind of pointless to even mess with, yet. I started off the week with building out the mobile version of this screen, and it looks pretty good. Then I needed to build out the tablet and desktop style, which is totally different. I didn't want to have to completely re-write this screen for the desktop version, but I really don't have to; that's the beauty of React. All of my components can be reused and conditionally rendered where I need them to be, depending on the screen size. I had it all pretty much built out for the desktop version yesterday, but the tablet version was all messed up. The hard part, though, was positioning the components in the correct way, and that part was all done. Now, it was down to just writing the styles to get the components to be the right size and have the right margins and padding. This took the better half of the day to complete, but in the end, it looks really nice. The last thing we have to do for the UI of this screen is to rewrite the actual card for each lead. This will be about the 4th version of the lead card we've created, but the mock-up my cohort made today looks really good, and I think this will be the final version.

Until tomorrow!