open in a mobile browser: http://[your-ip-address]:5005
The Task
It needs to be fast
It needs to be able to scale to a larger amount of images in terms of memory and performance
It needs to work on mobile
It needs to be responsive: the image height is fixed to all the images but cannot be a hardcoded value.
The scroll bars need to represent the expected height of the page and move together with the user's scrolling
Tips on how to make it fast:
Layered Viewport Management
Only have a limited amount of DOM components at any given time, equivalent to the viewport + buffer
Have three layers behind each other: front layer with the full image, mid layer with thumbnail, and back with the prominent color. The back layers should be larger, as they'd be visible when scrolling
Direct Compositing
Use will-change: transform on "atomic" elements (rectangles and images)
Background Image Caching
Download images in a worker as a blob
Save them to indexeddb as base64
In the main page, try to access indexeddb and get the base64 image if it's there. if not, tell the worker to download it to cache
Fix the height of the body
Use translateY() to have at least one element that goes all the way down to the expected height of the body so that scrolling works as expected.