Level Up and Launch: Week 25 Review
“ In times of great stress or adversity, it’s always best to keep busy, to plow your anger and your energy into something positive. ” — Lee Iacocca
We’re fast approaching the end of August. I don’t think I’ve ever been looking forward to fall so much. Approaching fall means I’m one step closer to getting through this strange and uncomfortable (to say the least) year.
In lieu of two appointments on Thursday and Friday’s forecast for scorching weather, I hustled upfront to get as much done before Thursday afternoon.
By Wednesday I finished the Dashboard page. On Thursday I shifted my attention to find a solution for my CSS Module config problems. With a fresh set of eyes, it took me 30 minutes to figure out how to use global styles from within CSS Modules. Unfortunately, one problem remains.
Since the CSS config problem only affects DX, I decided to file a bug ticket and move forward with a PR for branch RID-002-dashboard-page. It’s currently under review. My project advisor, Sebastian, will have a look at the PR and get back to me.
Now that I have a few components in review, I feel the itch to start testing. I aim to keep my testing 80/20 by only testing the key components that users interact with. Thus, I haven’t written any tests yet because none of my components, except for the navigation, are no-brainer candidates for testing. Since the nav’s content, for now, is three static icon links pointing to the current page, I passed on testing them for now.
As forecast, on Friday the temperature rose to 35C. In such extreme heat, working was not working. It was so hot my daughter’s school closed early. I only put in 2 pomodoros before she came home. Instead of dragging myself through the rest of the day, I called it quits and went to eat ice cream with my daughter. Then we had a water fight, dinner, and a nice evening.
Instead of making up Friday on Saturday, I took the day off. After completing two out of three tasks for the week giving, and giving a solid effort to complete the third task, I opted for some extra time off. As usual, it was the right move.
Week 25 Goals Recap
- Finish dashboard container component — ACHIEVED
- Finish navigation component — ACHIEVED
- Fix CSS Module configuration — NOT ACHIEVED
Week 25 Deliverables
Project Board
Level Up and Launch Public Project Board
Continuous Improvement: Last Week’s Action Items
No action items this week.
What Went Well?
Getting Back into CSS
It’s been a while since I’ve done any CSS layout. Thanks to the foundation I have from working at Aperto an IBM Company, I got back into it quickly.
Here’s a pic of what I have so far. It’s responsive and shifts to column drop on mobile devices.
The fact that I’m posting a pick tells me it might be time to put the project on a Netlify server.
Quick and Easy Icon Solution
My design required an icon nav. Of course, getting an icon workflow wasn’t straightforward. The path of least resistance led me to a popular React icon package (in Github stars), named SVGR. It wasn’t playing nice with TypeScript. I burned two hours trying to debug SVGR’s config before giving up.
My second attempt via a package name React Icons fared better. In 30 minutes, I had icons. For the record, React Icons has a dead-simple API, which includes a Context provider that makes styling groups of icons easier. For projects that don’t need custom icons, I will use React Icons again.
What Can Improve?
CSS Modules IDE Config
My problem is VSCode’s version of TypeScript doesn’t have type information for CSS Module style object keys. But, Webpack is compiling the style objects and rendering the app, so the VSCode errors are false positives.
Googling the VSCode issue led me to a solution that involved installing a TypeScript plugin and telling VS Code to use the `node_modules` version of TypeScript. Sadly, it didn’t work. Then I tried adding a `custom.d.ts` file, still didn’t work. At that point, I chalked up the issue by filing it into a bug ticket, which I will come back to this week.
Concrete Action Item: Address bug ticket for this issue during down time.
Looking Ahead: Week 26 Plan
Since I have a route for the app Home page, it makes sense to redirect the navigation icon button there. That means getting into React Router nested routes.
After I have the route in place, I will start building the dashboard widgets. First up is the Indicator Widget, which will display a KPI value. Second comes the List Widget, which will probably be a variation of the Indicator widget. Not surprisingly, the List Wigdet renders ordered list of information.
The widgets will take a while as I need to flesh out their designs, write tests, mark them up, style them, and wire them to JSON Server. Getting the JSON Server logic request should be fun.
If I get everything done with time to spare, I will continue debugging my CSS Module TypeScript IDE bug.
Week 26 Goals:
- Nav route to app home page
- Indicator widget including tests
- List widget including tests
- (Optional) Fix CSS Module
