This is a dev diary of implementing Filerion, a web-based file manager for online storage (Dropbox, OneDrive, Google Drive, s3 and more).
Today:
implemented getting files from dropbox. Thankfully it’s possible to implement this fully in the client (which is not the case for s3)
small: implemented showing which pane is focused. Learned about tabindex="0" to make a div focusable with mouse and keyboard and :focus-within pseudo-class. Yes, I’m not an CSS wizard, merely a dabbler
small: changed how selection of files in the list is tracked; from setting a property on file object to keeping track of indexes of selected items in an array
small: change how mouse click changes selection. Previously it would always add. Now is more like desktop file manager: click makes a new single selection, ctrl + click toggles selection of the file for multi-file selection. Still to add: with shift should extend the selection for the whole range: from last selected file to clicked file
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.
