The archive · Product Ideas · Product decision · 2010
DropMocks: a Chrome designer weekend hack that shares image sets via HTML5 drag and drop
Chrome UI designer Glen Murphy built DropMocks in a weekend: drop images on the page and get a shareable gallery — 241 HN points at launch.
DropMocks
What it had to solve
In 2010, sharing sets of images with other designers meant exporting files, uploading them, building a gallery and sending links. Chrome UI designer Glen Murphy wanted one gesture, powered by the browser's new drag-and-drop file support.
How it works
In 2010 designers shared mockups by exporting files, uploading them somewhere, building little galleries and emailing links — enough steps that studios created workarounds. Glen Murphy, a UI designer on Google Chrome, wanted to share sets of images with other designers in one gesture, using the browser's new drag-and-drop file support.
Over a weekend he built DropMocks on a Python App Engine backend: visit the page, drop images onto it, and the File and FileReader APIs turn them into a keyboard-navigable gallery with a shareable link. No account, no upload button, no Flash.
He posted it to Hacker News as 'Review my weekend HTML5 project'. Designers tested it with their own pictures, studios described it as close to the perfect tool for showing client comps, and several said they would pay for extras.
The thread drew 241 points and 106 comments; the author open-sourced the code on GitHub and shipped the feature-detection fix reviewers suggested.
Why it lands
- The idea removed every step between 'I have images' and 'here is a link': no account, no upload button, no Flash.
- Scoping it to one magic gesture for a weekend made the demo achievable and the concept instantly understandable.
- Launching on Hacker News put the prototype in front of the designers who were the intended users, and their feedback set the roadmap.
- Open-sourcing the code let other developers reuse the drag-and-drop pattern instead of waiting for the product to grow.
What it did
Posted to Hacker News as a weekend project, it drew 241 points and 106 comments; design studios called it close to the perfect tool for showing client comps, several users offered to pay, and the code was open-sourced during the thread.
What you can take
A tiny, well-scoped demo of a new platform capability can beat a feature-full product: prove one magical gesture, launch it, and let the crowd say what to add.
Since then
Within the launch thread, Glen Murphy open-sourced DropMocks on GitHub, replaced the browser sniffing with the feature detection reviewers suggested, and collected a wishlist from design studios: password protection, revisions, comments and larger uploads. The project stayed a weekend-sized demonstration of what HTML5 drag-and-drop could do — a one-gesture alternative to the Flash uploaders of its day — and its launch thread and source code remain public.
Sources
spotted an error? The archive wants to know.
Your turn
You just read one. Describe the brief you are staring at, and see who has been given the same problem.
Free account · 3 free questions · no card