Down to the final 10%

I've been working hard all week on my aunt's business' website, and have come a long way. At the beginning of the week, I decided to trash what I had written in Gatsby and start over by creating a good old React app. By this point, I know my way around React pretty well, and found myself looking up documentation more than writing code with Gatsby. While Gatsby is pretty simple overall, there are some nuances that can really stop the show, such as the plugin system. I'm confident I could have come up with something very similar to what I have with Gatsby, if not the exact same, but I saved myself a lot of time and really didn't lose anything over it. Gatsby may be a bit faster than a regular React app and have some SEO advantages, but given the size of this app and what they will be using it for, these things were not essential. I also switched from using Material UI to using Semantic UI for pretty much the same reasons. Material UI is great, and I plan on mastering it in the future. I've written a few apps on my own using Material UI, including this blog. It is, however, a much more complicated system than Semantic UI, and I figured I could create content a lot more efficiently with Semantic UI without really sacrificing anything.

In the last couple of days, I've moved from building everything out to fixing it up. Everything I wrote initially was basically hard coded, without breaking up the components into smaller components. This was fine at first, but it made for some really long code. Being that I will be the one maintaining the site once it's up and running, I did my future self a huge favor by simplifying it into reusable components that are much more succinct. Also, say, for example, I wanted to change the formatting of the title for each of the news articles. I would have to go in and change the code in 6 different places. Now, I can do that in one single place. I've also spent quite a bit of time in the last couple of days working on some of the styling issues I have in the site. In one section, I had some buttons that I couldn't figure out how to get centered in the segments, but I figured it out by creating a grid within a grid. I had an issue with the responsive view stacking grid items too closely together, so I was able to go back in and add a little margin to the bottom of the items, and now it looks better. I had a small gap on the home page between the hero image and the navigation bar, so I shrunk the margin on the bottom of the navigation bar. Little things like that are really making the app look better and it doesn't take too much. I've been saying this for the last few days, but I still have a big issue that's unresolved with the hero image. I'm supposed to have a slideshow in there, but haven't found a way to implement that. I figure once I sit down and try to tackle this, I'll find something pretty quickly.

I've been breaking up my time with Stephen Grider's Modern React with Redux course, and it's coming along nicely. This course is a total of 47 hours, but a lot of it is actually deprecated material, marked as being legacy from before he did a major update. The actual course without this legacy material is only about 30 hours, and I think I've gotten through about 7 hours so far. We've covered a lot of the basics of React, including the introduction of functional components, class components, props, state, and lifecycle methods, all of which is review for me. While we've been going through projects to test out what we've learned, I've been refactoring the code to challenge myself a bit. I will say that, since I've been in the land of Hooks lately, I haven't gotten into lifecycle methods much at all in the last few months, and when I did, I was just a novice. I actually learned quite a bit in this section. It's also really interesting to hear someone else's take on state, since this can be a difficult topic, and one I'm still not 100% on. Overall, I really like the structure of the course and the way Stephen teaches it. I'm hoping I can really master Redux, Context, and some of the other advanced features of React after completing this course, but my assumption is that my learning journey will not end here. He has a follow-up course that covers advanced topics in React, and I definitely plan on taking that next.

Until tomorrow!