Day 3: Dropbox
in: Diary of a solo dev building a web app
Jun 11, 2022
This is a dev diary of implementing Filerion, a web-based file manager for online storage (Dropbox, OneDrive, Google Drive, s3 and more).
Failure of the day
In programming you often get stuck on a problem.
Today I tried to implement a keyboard navigation in list of files, like in desktop file managers.
Abandoned this (for now) because it was too slow.
Even on a not-so-large list there was noticeable lag after pressing up / down keys.
I have a theory why that is. Svelte (and React and Vue) philosophy of working is: re-render UI after changing state.
A list of selected items is state so that’s what I do: when selection changes, I re-render and set the right CSS class (to distinguish selected vs. non-selected item) based on selection state.
However, rendering large lists is expensive.
I think for reflecting selection state I’ll have to go back to non-Svelte way of doing things. Probably will have a data attribute data-selected, different CSS style based on that attribute being true / false. When changing selection state, I’ll toggle that attribute and let the browser re-render the UI, hopefully limited to just the element changed, not the whole list.
But maybe not today. There is always tons of other work to do, so when getting stuck on one problem, a viable strategy is to work on another problem.
Written on Jun 10 2022.
Found a mistake, have a comment? Let me know.

Feedback about page:

Optional: your email if you want me to get back to you: