Review my weekend HTML5 project: DropMocks

#1

Post by gmurphy » Fri, Sep 17, 2010, 11:33 PM UTC

I had an itch to scratch around making it easy to share sets of images with other designers and thought that I could use the new drag and drop file support to solve it. DropMocks was the result after a quick weekend of hacking.

It's built on an App Engine backend, and the uploader relies on the PushState and the File API from HTML5, so it only currently works in Chrome 6 and Firefox 4*; supporting other browsers would be the first post-hack step if I were to take it further.

An example gallery can be found here: http://www.dropmocks.com/mSER

Review my weekend HTML5 project: DropMocks
dropmocks.com

Re: Review my weekend HTML5 project: DropMocks

#2

Post by bobf » Fri, Sep 17, 2010, 11:45 PM UTC

I would love to see this integrated via an API into other sites, as it is definitely the fastest/cleanest image uploading & gallery I've seen to date. Some probably obvious suggestions: different views, display filesize/type info when mousing over an image, zoom in/zoom out, paid-users could have subdomains and gallery names instead of dropmocks.com/XXXX, etc. I envy your sweet design skills and attention to detail in the implementation (left/right/up/down keys work to go through the gallery, nice!). I would imagine you're aware, but be warned that trying to profitably monetize an image hosting site will be hard. Take a look into the guy who started imgur (mrgrim -- http://www.reddit.com/user/MrGrim) for useful insights on image hosting (assuming that's the route you're looking to take, and not a "YouTube Instant job offer").

Re: Review my weekend HTML5 project: DropMocks

#3

Post by eccp » Sat, Sep 18, 2010, 12:05 AM UTC

Looks great

Re: Review my weekend HTML5 project: DropMocks

#4

Post by wccrawford » Sat, Sep 18, 2010, 12:05 AM UTC

Wow, I have to say, that's pretty nice. It doesn't like me trying to drag images around that are already there. I expected it to let me re-order them.

But for a 'weekend' project, that's pretty impressive.

Re: Review my weekend HTML5 project: DropMocks

#5

Post by templaedhel » Sat, Sep 18, 2010, 12:39 AM UTC

I like this a lot. Works perfect in FF 3.6.3 (as it should) I too expected to be able to drag them around, It would be nice if I could just arrange them on the page like some of the css3 polaroid galleries you see. I will defiantly be using this.

Re: Review my weekend HTML5 project: DropMocks

#6

Post by spicyj » Sat, Sep 18, 2010, 12:40 AM UTC

Please add Safari 5 to the browser sniffer. (It works fine if I change the User-Agent to "Chrome 6", so presumably it should be included in the list of browsers that you support.)

Re: Review my weekend HTML5 project: DropMocks

#7

Post by TamDenholm » Sat, Sep 18, 2010, 12:41 AM UTC

I love this, the drag especially, i've never seen the "just drag" file upload thing before without flash/java. It'd be really nice to see a drag file upload replace the typical file form input.

Excellent job.

Re: Review my weekend HTML5 project: DropMocks

#8

Post by andreyf » Sat, Sep 18, 2010, 12:44 AM UTC

Fucking brilliant! I'd love to hack on this... are you using app engine? Is it open source?

In particular, you know what would make this rock*10^6? facebook/dropbox integration.

Re: Review my weekend HTML5 project: DropMocks

#9

Post by gmurphy » Sat, Sep 18, 2010, 12:47 AM UTC

andreyf wrote: post #8

Fucking brilliant! I'd love to hack on this... are you using app engine? Is it open source? In particular, you know what would make this rock*10^6? facebook/dropbox integration.

I would very much like to have this auto-pull from Dropbox folders; it is something for another weekend.

I just posted the source: http://github.com/glenmurphy/dropmocks

Re: Review my weekend HTML5 project: DropMocks

#10

Post by mayank » Sat, Sep 18, 2010, 12:52 AM UTC

spicyj wrote: post #6

Please add Safari 5 to the browser sniffer. (It works fine if I change the User-Agent to "Chrome 6", so presumably it should be included in the list of browsers that you support.)

Ditto for Chromium