Home ยป hot to

Tag: hot to

screenshot of the peekable web app in action

How Peekable Got Built

It started with a simple question: where are all my Adobe Dimension files?

https://ryanseslow.github.io/peekable/peekable.html

I have been making work digitally for over three decades, across a lot of different software, a lot of different platforms, a lot of different machines. Files accumulate. Formats change. Applications evolve in directions that do not always serve the work you already made. I knew I had a collection of .dn files (adobe dimension) scattered across both Google Drive and icloud drive, artifacts from a period when I was deep into Adobe Dimension, Adobe’s lesser used and even heard of 3D design and compositing tool. I wanted to find them all, put them in one place, and take stock of what was actually there..

The search turned up 68 files. Not just a few, sixty-eight. They were spread across dozens of folders, buried inside project directories, mixed in with everything else I had uploaded over the years. Google Drive found them quickly enough once you knew the right query to run. The harder part was what came next.

I copied all 68 into a single folder called Adobe Dimension Archive, which took a few minutes to organize. Then I looked at the folder and saw exactly nothing. Every single file showed the same generic icon, the kind of gray box with a zipper that cloud storage uses when it has no idea what to do with a format. No previews, no thumbnails, no way to know at a glance which file was which scene, which project, which year. I had organized 68 indistinguishable rectangles.

screenshot of the peekable web app in action

This is a problem that anyone who has worked with creative software long enough will recognize. Google Drive does not preview many creative archive formats at all, and for larger files it frequently cannot generate thumbnails regardless of format. (For the love of all things holy.. WHY google, WHY?!) The result is that large portions of a creative archive become opaque even to the person who made them. The files are there. The work is there. You just cannot see it.

What I did not know at first is that .dn files are ZIP archives. Adobe Dimension packages everything into a container using the same structure as a standard ZIP file, which means you can open one with any tool that reads ZIP format. More importantly, Dimension stores a thumbnail image inside that container. The thumbnail is there, embedded in the file, waiting to be read. The cloud storage platform just never looks for it.

Once that fact was on the table, the solution was obvious. Build something that opens the archive, finds the thumbnail, and shows it. The question was how..

The first instinct was to do this server-side, or with some kind of batch script. But both of those approaches have friction: you need a server, or you need to run code locally, or you need to download files that might be several gigabytes total. The cleaner answer was a browser-based tool that reads files directly on the client side, without uploading anything anywhere. JSZip, a mature JavaScript library, handles ZIP extraction entirely in the browser. The processing stays on your machine. Nothing leaves.

The first version was simple and specific: a drag-and-drop HTML page that accepted .dn files, used JSZip to unpack them, looked for a thumbnail at a handful of known paths inside the archive, and displayed whatever it found. I tested it against a set of 23 files. All 23 came back with thumbnails, which was better than expected, though the path where Dimension actually stores the thumbnail turned out not to be any of the standard locations I had guessed. The fallback logic, searching the entire archive for any image file regardless of path, is what actually retrieved them. Dimension tucks the thumbnail in a non-obvious location, and the only reliable way to find it is to look everywhere.

That result raised a question.

If this works for .dn files because they are secretly ZIPs with embedded images, what else works for the same reason?

The answer is: A LOT. Sketch files are ZIPs. Procreate files are ZIPs. Apple Keynote, Pages, and Numbers files are ZIPs. Microsoft Office formats including docx, xlsx, and pptx are ZIPs. Epub files are ZIPs. A wide range of creative applications use ZIP as a container and store a preview image inside it. The tool did not need to be specific to Adobe Dimension at all. It needed to be general.

So it became Peekable..

The idea is simple enough to say in one sentence: drop in any ZIP-based creative archive and see its embedded thumbnail in your browser. The supported format list covers Dimension alongside Sketch, Procreate, and a number of others, but really the tool works with anything that follows the same basic pattern. If there is an image file anywhere inside the ZIP, Peekable will find it.

The reason this matters beyond convenience is about access to your own work over time. Creative files from formats your cloud storage does not recognize or cannot preview become harder to navigate as collections grow. You can still open the file in the application that made it, but you lose the ability to browse what you have at a glance. Peekable does not replace the original application. What it does is let you see your work without opening anything, anywhere, on any machine, with no account required.

The tool runs entirely in the browser, processes everything locally, and requires no account, no upload, and no installation. It is a single HTML file. You can save it to your desktop and use it offline after the initial page load. It does not know who you are or what you put into it.

Getting it onto GitHub took more attempts than I am going to describe in detail. Authentication was the obstacle, as it often is. The web-based upload interface eventually did what the terminal refused to do, and the repository went up at github.com/ryanseslow/peekable. GitHub Pages turned the same repository into a live URL at https://ryanseslow.github.io/peekable/peekable.html, which means anyone can use it directly in a browser without downloading anything.

The whole thing took less time than I expected to build and more time than it should have to ship, which is a ratio that will be familiar to anyone who has tried to push something to GitHub after midnight. The tool works. I tested it against my own files. Other people who work in creative software and have accumulated archives of formats their cloud storage cannot render should find it useful.

If you have .dn files, Sketch files, Procreate files, or any archive from software whose previews cloud storage ignores, Peekable is at https://ryanseslow.github.io/peekable/peekable.html. Drop the files in and see what you made.

The repository is open, the license is MIT, and the code is a single HTML file.

Take it, change it, make it yours. Have fun and share!