- run npm install
- run npm start
- open in a browser: http://localhost:5005
- open in a mobile browser: http://[your-ip-address]:5005
- 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
- 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
- Use will-change: transform on "atomic" elements (rectangles and images)
- 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
- 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent