/  Words written by me / Diary of a solo dev building a web app / Day 7: context menu, file delete  edit

This is a dev diary of implementing Filerion, a web-based file manager for online storage (Dropbox, OneDrive, Google Drive, s3 and more).
  • implemented Refresh, Copy File Names and Copy File Paths context menu items. Relatively simple affair. Here’s the context menu:
  • make context menu and selection work more like windows
    • lesson: I’m writing a tool for power users that is meant to behave like desktop file manager. It’s important to sweat small details like this so that the app works like the apps they’re already using. The smaller the difference between filerion and other desktop file managers, the better
  • implement UI for file delete (but not yet the actual deletion). Here’s a dialog confirmation dialog:
  • Filerion is a dual-pane file manager but if the width of the window if small it doesn’t make sense to show 2 narrow panes so I’ve implemented an auto-switch to single pane when window width is below 768 pixels
    • lesson: it’s implemented as a store which gets updated on debounced resize event. The lesson is in code simplicity and minimization. I found an existing package https://github.dev/cdellacqua/svelte-window-store which implements this functionality. Instead of importing this code blindly I just looked how it’s implemented and wrote my own, minimalistic version, which is only 10 lines of code:
      export const viewportSize = writable(); // {dx, dy}
      export const viewportWidth = writable();
      function updateAfterResize() {
        const dx = window.innerWidth;
        const dy = window.innerHeight;
        viewportSize.set({ dx: dx, dy: dy });
      window.addEventListener("resize", debounceEvent(updateAfterResize, 250));
      This is a little bit more work (not much more) but the only way to get the fastest possible application is to write the smallest amount of code. My code is smaller not because I’m a better programmer but because I only took the part of svelte-window-store that I need in my app.

Feedback about page:

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