Manila - (in progress)
One thing that really bugs me is the clutter that builds up in weird backwaters of my computer. The scrapyards of the filesystem.
Now, I know this is partially my fault, I just have to remember to clean those places out.
But what to keep? and what to save? and where to put it?
In an interview with Appian corporation for an APM role, I discussed this with my interviewer and found that we shared this problem. After talking through the design of the app, what an MVP might look like, and a potential product roadmap, I felt it was time to reinvent the way we manage our files, from a UI/UX perspective. What's the MVP?
A quick sorter-of-files, in a desktop app! This would be fun thing to get people engaged and following the product's growth as it eventually would help manage the way we store files, paving the way for an app to manage project files and make your work process and end products easier to show.
Well, here's one way we could go about it. Just have a stack of your files, use the arrow keys to quickly sort the files in your desktop. Like Tinder, but for your local filesystem 😉. What happens to the things you keep though?
Well, here's another mode...
Each key would be mappable, so you could change the folder and key by clicking on them, or dragging from the right. There could even be saved arrangements to make the workflow faster.
The UX of this is still in the works, as I'm demoing and surveying and presenting the idea to friends, designers, computer people. Still testing options on the keys get re-mapped, how you manage locations on the left...
update on 12/10/18
I created a basic version of the app this weekend using Electron that works pretty well functionally. I am working to improve it - early feedback from friends highlighted the need for a file preview.
I don't remember what files are by just their name, especially if they're junk in a messy folder. I need a preview and I need to know when I last was working on it. Like, is it ancient, or was it something I did yesterday?
- Jake, Web Designer/Developer
update on: 2/2/18
So, previews were more challenging than expected. There are few easy ways to generate quick, light file previews that are open source. I didn't want to spend my time building a file previewer technology, either. There must be a pre-existing solution.
Alas, that method only works for some file types, and even then, it's locked away so that the user must provide the file location through an input form. You wouldn't want a website digging through your directories, and reading your files, right? That's the problem with building a native app with web technologies, I suppose.
Another possible solution: I'm on a Mac, which has it's own built in file previewer called Quick-Look, and Electron has a built-in compatibility with Quick-Look! Unfortunately, that access to quick look is pretty limited - it just allows you to send a file path to Quick-Look, and it opens in it's own separate native window, stealing the focus.
Both methods screw up the quick-swiping ideal workflow we're trying to create.
The workaround? Run a separate child process in a technology/language that was meant to build native apps, and has a lot of pre-built packages that could generate previews. That's Python.
So yep, we're spinning up a mini python server, sending it file path names through TCP, and a nice package 'pyglass' for python accesses Quick-Look natively. Pyglass finds/generates a preview for the file, and sends back the file path for the preview image. Now, this limits previews to the mac app, but hopefully, we can get it running for Windows later. (I don't use Windows, I just hope Microsoft's a bit more open-source with their APIs than Apple.)
...And Tah-Dah! we have a pretty preview. Up next: adding metadata, configuring places, and the other mode of sorting!
Update: Learning and Using Reactjs
update on: 3/25/18
Intro: I've been thinking about the longevity and scalability of this project, and here's the vision for the future: This current app is launched and briefly maintained to build some hype, community, and as a conversation-starter. While it's live and I'm having those conversations, I'll begin development of the real meat of this project: A new file manager front-end program! A replacement for using Finder or File-Explorer.
Foreseen Problem: This new program will need many of the same functions as this app, in terms of file display and control, but I don't want to start over from scratch. Plus, this codebase will itself need some better organization as it grows.
Possible solution: Begin using a front-end framework! While this usually is not the best for longevity as frameworks will rise and fall, Reactjs is a great framework supported by Facebook (not going anywhere anytime soon). It involves breaking up front-end elements into components that can be nested and re-used, creating a great organizational structure for user interface elements, and allows them to dynamically React to data changes.
Outcome so far: I've learned react and begun to implement it in the project, and I'm excited about the possibilities. Hopefully, tackling technical debt now will mean things will go much more smoothly as this scales in the future!