Hack Reactor Weeks 7 and 8 Review

I'm attending the Hack Reactor 12 Week immersive coding bootcamp from 11APR to 8JUL in an effort to develop my programming skills to offer a wider range of services to my clients. The schedule is jam packed with 11 hours of coding content 6 days a week Mon-Sat. I'll be keeping a journal of my experiences with the program here.

Week 6 was solo week, which was a nice transition into the senior phase. I spent a bit of time setting up the scaffolding for our project using create-react-app and react router. The team and I did some initial design and planning with Figma, before launching into the code. Since it's solo week, I enjoyed getting some time to explore different aspects of react. One of my teammates really wanted to use functional components with hooks over the class-based components we've been taught, so it felt like re-learning React all over again. It's probably for the best though. From what I've read, the functional hook style is the general direction the developer community is headed in. Probably still good to know class-based style as well with legacy codebases.

For FEC (Front End Capstone) we were tasked with designing a product detail page for a clothing company. It has four sections: product overview, related products, questions & answers, and ratings & reviews. I got the product overview page which means I would have to build a carousel component that switches out images based on style selections and has a full-width with zoom mode as well. The Hack Reactor Staff put together a multi-page Statement of Work in Google Docs that specifies the requirements for each section. It's much more detailed that I would have expected - we even got some wireframes!

I was excited to start working more with React and to see how my frontend chops carry over from the Webflow world with my last 6 months of freelancing. I spent my first deep sprint really focused on nailing the layout which took about 2 days and the second sprint focused on smooth animations and the expand + zoom feature.

Overall, my biggest struggle was getting smooth animation on the expand feature.

My initial build was all using CSS Grid. It's very convenient and effective, but lacks a lot of (browser) support from CSS transitions. I was dismayed to find out that grid-template-columns is "animatable" according to MDN documentation but lacks support for any browser other than Firefox! My initial idea was that I could just transition the grid from two columns to one but I had to throw this idea out the window. I was able to get some animation happening by targeting the width, but still had issues with grid gap, smoothness (it was janky), and animating to/from a width of auto.

Some more research reveals that MDN does not recommending animating to or from a value of auto. 🤦‍♂️ This really surprised me. It seems like that would be so useful. There's an open ticket for it (and lengthy discussion) here. CSS-Tricks has some workarounds, along with a good summary:

The browser process that re-calculates the sizes and positions of all elements based on their content and the way they interact with each other (known as “reflow”) is expensive. If you were to transition an element into a height of auto, the browser would have to perform a reflow for every stage of that animation, to determine how all the other elements should move. This couldn’t be cached or calculated in a simple way, since it doesn’t know the starting and/or ending values until the moment the transition happens. This would significantly complicate the math that has to be done under the hood and probably degrade performance in a way that might not be obvious to the developer.

Here's my summary: It's because math.

After reading the article from CSS-Tricks, I decided to refactor the layout from grid to flexbox. This allowed me to determine size from flexbox rather than width and write one line of CSS to get the buttery smooth animation that I wanted! If there's a way to do it with grid only in CSS I'd love to know, as Grid is getting so much hype right now, but at the end of the day flexbox wins this one hands down for me!

Since I finished the task a bit early, I decided to dive in to state management with redux and have been enjoying their documentation a lot. Learning tons of new features to React along the way in their essentials and fundamentals guides.