Review my weekend HTML5 project: DropMocks (dropmocks.com)

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").

Looks great

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.

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.

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.)

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.

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 haven't said wow since Etherpad , I believe. Wow.

Love it! Nice work.

What did you write it in?

What happens if this becomes wildly popular among casual computer users who want to share pics with their friends? Any plans on how to monetize it?

I didn't realize submission text would be eaten for external links, so here it is:

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 a simple Python App Engine backend, and the uploader relies on the PushState, File, and FileReader APIs (I realize that some of these aren't strictly HTML5), so uploads currently only work in Chrome 6+ and Firefox 3.6+; supporting other browsers would be the first post-hack step if I were to take it further.

An example gallery can be found here, it should be viewable in all modern browsers: http://www.dropmocks.com/mSER

didnt pass my browser sniffer, firefox 3.6 on ubuntu, but I know that supports drag and drop uploads, I wrote an image uploader the other week http://dropup.net/

Love the concept.

Your shadows look very odd with the very horizontal screenshots I dragged in to test it.

The images left and right of the current one distract from what should be the focus. Doesn't work well for sharing small image files.

Amazing idea and execution. Great work.

I'd pay you $24 a year (what i currently give to flikr) if you can compress my large jpg images into something smaller (currently it seems to be maxed at 900k) another one of my favorite features of Flikr is the ability to view exif data.

Love the project!

Very great! Love the easy way to use it without having to log in to try. Simple approach. Keep working on the idea.

How are you determining which browsers are compatible with it? It seems like the best way might be to use modernizr: http://www.modernizr.com/. Or are you using more than just the html5 drag and drop API?

  var browser = BrowserDetect.browser;
  var version = BrowserDetect.version;

  return (
    (browser == 'Chrome' && version >= 6) ||
    (browser == 'Firefox' && version >= 3.6)
  );
}

My pictures were too big. > 900k.

I loved it. My only suggestion is making the non-focused images slightly opaque. I was left wondering if the severely blurred images were loading.

Amazing, great user experience. One detail though, wouldn't it be nice to have less blur on the thumbnails?

Never have I been so forehead-smacking jealous that I didn't think of something first. kudos.

Very nice visually, and incredibly slick workflow, though it renders pretty slowly at full size. Poking in the code... are you blurring the images in JS at every level? Since you're using webkit + mozilla + IE specific CSS, why not use CSS transforms to do the same thing, but with hardware acceleration? I haven't done it myself, but I'd assume blur is one of the filters possible, and I know you can do those transitions.

edit: oh, and you might want to make sure the images in the "back" are (proportionally?) smaller than the ones in front - if you shrink your window a lot they're actually bigger.

edit 2:

Gets stuck occasionally, though so far only while loading, and doesn't seem to respond to any interaction. The drop-down still works though, so it appears it's not just spinning.

Anyone else, and/or any info I can provide to get you info on why?

I'm on mac chrome... uploading a hundred or so random pics i saved from reddit/digg... you are going to end up with the most bizarre collection of pics from everyone uploading their own strange test pictures. http://www.dropmocks.com/m1e4 :)

pretty slick :)

I created a client-side image shrinker - demo at http://kimsal.com/shrinker - github at http://github.com/mgkimsal/jsclientshrinker Perhaps integrating this functionality for images that are 'too big' (whatever file size you decide) would be a nice enhancement? :)