Compdrop

Compdrop is a simple way to view website designs in a desktop browser. Just drag and drop your images into the browser.

Improving the workflow

For design reviews, designers at Odopod would export their Photoshop files to jpgs (called ”comps”) on our internal server. They then gathered in a meeting room and pulled up the images in Preview.app to critique the work. In 2013, one of the developers built cmpdrp.com as a drag-n-drop preview of the designs that automatically scaled them to actual size, showed the designs within a browser’s chrome, and allowed clicking through them.

PWA all the things!

Late in 2017 I had some idle time and really wanted to do something with Vue and TypeScript. I decided to rebuild the comp drop app, make it a PWA, and add some new features to it.

I started off the project with a Vue PWA scaffold and added TypeScript to it. The PWA template handled all the service worker caching and offline needs and I started building the new Compdrop.

New features

After soliciting feedback from the designers and watching how they used the old compdrop, I began to add new features to the app.

• Dropping a directory of images on the page instead of selecting all within a directory.
• Retina image scaling for designs done at 2x size.
• Added a mode which allowed images to be scrolled.
• New keyboard shortcuts.
• Added support for “collections”. Designers used to open multiple tabs of cmpdrp, one for each person to show their work. Now when they drop multiple directories in, Compdrop creates a collection for each one.

Thoughts on Vue

Vue was nice to use, but it feels a little too “automagic” for my liking. Using the vue-class-component decorator was also enjoyable because I was accustomed to components in React. Vuex, the state management library for Vue, was very nice to use and easier for me to grok than Redux.