Introduction
The second customization is to update the mobile view. Here some creativity kicks in and a new page is created. Along the way there are some points and follow up that I want to discuss and mark down.
Responsive Design
It is not rare to see responsive deisgn in current days. Yet it is still hard for me to handle them, as my speciality is not in front end field. It could be hard to decide whether we should create a custom mobile component or try to use CSS to modify it.
In my opinion, we should create a mobile view if the design is different in mobile view, e.g. the layout/component/content are different. Using this website as an example, I created a mobileHomePage component specifically as it has different layout. Whereas the other pages like blogposts and description, it is sufficient to use the @media CSS filter to handle different cases.
React Hydration
One special problem I encountered is about react hydration. I find an online article stating the logic for hydration. Basically when react loads the virtual DOM it enables users "something to see first" when it is still doing other rendering client side. Whether user can "see something first" or "see a blank page" is the magic of hydration.
In theory, as we can "see something first", the best practice (especially for static page like mine) is to make this "something" as similar as the final instance. What I have done originally is to use a useWindowSize() hook to determine rendering of the 2 homepage components homePage and mobileHomePage. It is find that the hydrated instance is using desketop view yet mobile view is used to test. Thus the problem of hydration has occurred as the unsync of the two views.
Finally I use routing to route mobile view instead of rendering by a flag. This solves the issue.
The Leftovers
Though the website is working, it still have some minor bugs that I need to follow up, yet I don't know how to solve it after spending several hours. I shall put it aside first and see if it can be fixed later:
- Mobie + Desketop View sharp landing (updating section in url bar)
- Glitching in mobile view when trying to switch page (CSS transition problem)