Review my weekend HTML5 project: DropMocks(dropmocks.com)
dropmocks.com
Review my weekend HTML5 project: DropMocks
http://www.dropmocks.com/
114 comments
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
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
Zod approves: http://www.dropmocks.com/mpUa
Seriously, what a great project. If this is just a weekend project and a start for HTML5, I can't wait to see (and build) what's next.
Seriously, what a great project. If this is just a weekend project and a start for HTML5, I can't wait to see (and build) what's next.
Nice project. Sharing some great images here:
http://www.dropmocks.com/mtfA
http://www.dropmocks.com/mtfA
This is awesome. I've been looking for something similar. Quickly add a bit more functionality (photo resize, link it to twitter, add comments, etc...) before other sites copy your idea.
nice work!
Why are you browser sniffing when you can easily do feature detection for the HTML5 File API (`"FileReader" in self`) and Drag and Drop API (`"ondrag" in document`)?
The only time browser sniffing is ever appropriate is when you excluding a specific browser due to a bug, and there is no unobtrusive way to do so (e.g. a console.log bug that can't be tested without calling console.log() at least once).
The only time browser sniffing is ever appropriate is when you excluding a specific browser due to a bug, and there is no unobtrusive way to do so (e.g. a console.log bug that can't be tested without calling console.log() at least once).
You're right - it would've been very easy to replace the browser detect with a feature detect once I knew what features I'd have settled on, at the time though compatibility was a distant second to proving the concept, so I lazily didn't bother.
I have spent many years of my life working on a browser that is frequently hurt by agent detection, so I'm well aware of the issues with the approach I took; and while I do think that there are a broad range of circumstances where it is appropriate, this is probably not one of them, so I accept your criticism and and pout into my bowl of ice-cream :)
Edit: I added your suggested code and am running through the tests now, thanks.
I have spent many years of my life working on a browser that is frequently hurt by agent detection, so I'm well aware of the issues with the approach I took; and while I do think that there are a broad range of circumstances where it is appropriate, this is probably not one of them, so I accept your criticism and and pout into my bowl of ice-cream :)
Edit: I added your suggested code and am running through the tests now, thanks.
Also you may want to check out Modernizr if you are going to be bleeding edge:
http://www.modernizr.com/
http://www.modernizr.com/
I just read that you're the lead designer for Google Chrome, awesome work on that by the way!
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.
But for a 'weekend' project, that's pretty impressive.
I was able to re-order mine. The UX isn't obvious that you can, but it works just the way I thought it would by drag-and-drop.
When I try to drag existing images, I get an error that (long string of characters) is not a valid image.
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/
That's strange - my Firefox 3.6.6 on Ubuntu works with it OK. I wonder if the browser detect script I'm using is having issues, as another poster said that Chromium was failing, where it doesn't on my machines :\
Cool domain name; wish I'd thought of something that short.
Cool domain name; wish I'd thought of something that short.
FYI, WebKit-based browsers aren't passing your browser sniffer (drag-drop works in them, too).
this is pretty cool too, i'm gonna try it.
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.
Excellent job.
Gmail had it for almost a year.
Gmail uses Flash (Adblock shows block Flash thingie).
----
Edit: upon further inspection, it seems Gmail indeed does use Flash [1], just for a different part of the upload process (progress bar?).
Drag and drop is only supported in Chrome and Firefox [2], so I suppose this is HTML5.
[1] https://mail.google.com/mail/uploader/uploaderapi2.swf
[2] http://gmailblog.blogspot.com/2010/04/drag-and-drop-attachme...
----
Edit: upon further inspection, it seems Gmail indeed does use Flash [1], just for a different part of the upload process (progress bar?).
Drag and drop is only supported in Chrome and Firefox [2], so I suppose this is HTML5.
[1] https://mail.google.com/mail/uploader/uploaderapi2.swf
[2] http://gmailblog.blogspot.com/2010/04/drag-and-drop-attachme...
I don't think so. Maybe it falls back to flash on some browsers, but it works just fine on Chrome with flashblock enabled.
[deleted]
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? :)
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? :)
definitely i'm gonna try your lib.
Cool. Fork on github and send any pull requests. The issues right now are that it only works with ff3 and chrome. I'd have thought safari would work, but it doesn't (didn't for me). Some integrated browser detection to offer transparent reduction for images on compatible browsers would great.
Let me know how it works out for you :)
Let me know how it works out for you :)
I like how it changes the dimension. But converting to PNG is massively increasing the file size?
"Original file was: 137724 bytes Transmitted size was: 844176 bytes (due to base64) New file is: 633131 bytes"
"Original file was: 137724 bytes Transmitted size was: 844176 bytes (due to base64) New file is: 633131 bytes"
It might be - not sure it's just a PNG issue, or if it's a canvas flaw, or what. The system could ideally check the before/after sizes, and only send the smaller one. Good catch (I think I'd seen that once in testing too).
This is really wonderful. Our design studio is constantly posting PS comps for clients. We spend a significant amount of time outputting JPGs, building little galleries, loading the files to our servers, then sharing links to the designs via Basecamp.
Over the years we've come up with a few clever hacks to speed things up. For example, we keep our designs in svn and can quickly push updates live to our servers using a commit hook. But this is all sort of complicated, and I'd much rather use a web-app like this.
Dropmocks is very close to being the perfect tool for our workflow, and I suspect many other design/photo studios would feel the same way. A few features that folks like us would want/need: ability to pw protect galleries, ability to maintain revisions of designs, commenting (by both designer and client), and a way to export images to PDF.
Not sure if you'd target Dropmocks for businesses (such as ours), or if you'd like to have it open to the world and ad-supported. If the former, we're the kind of people that would sign up.
Over the years we've come up with a few clever hacks to speed things up. For example, we keep our designs in svn and can quickly push updates live to our servers using a commit hook. But this is all sort of complicated, and I'd much rather use a web-app like this.
Dropmocks is very close to being the perfect tool for our workflow, and I suspect many other design/photo studios would feel the same way. A few features that folks like us would want/need: ability to pw protect galleries, ability to maintain revisions of designs, commenting (by both designer and client), and a way to export images to PDF.
Not sure if you'd target Dropmocks for businesses (such as ours), or if you'd like to have it open to the world and ad-supported. If the former, we're the kind of people that would sign up.
Dude - you could really check http://disqourse.com - this app is to help you get customer ping-pong with mockups etc. easy.
Excellent work!
Suggestions:
- tif not recognized as image, probably other formats as well (someone below said an image without an extension was rejected, maybe you need a smarter file rejection algorithm)
- 900k is kinda small, maybe you should compress on-the-fly
- UI needs work: I want to leave my mouse in one place and just keep clicking for more images (I know arrow keys work, and that's great, but consistency is key), no matter the size or where in the list I am (the ends of the list seem to break this pretty badly), image sizes shouldn't affect placement, jumping around the list is hard, maybe instead of or in addition to the "inline" list representation, you could have a scrolling or static list of thumbnails on top or bottom
- the blur is too heavy. I already can't see much of the previous or next images because the one in front is too big, so why are they so occluded? Tone it down, maybe desaturate them a little too if you feel like less blur wouldn't take them enough out of the foreground
Suggestions:
- tif not recognized as image, probably other formats as well (someone below said an image without an extension was rejected, maybe you need a smarter file rejection algorithm)
- 900k is kinda small, maybe you should compress on-the-fly
- UI needs work: I want to leave my mouse in one place and just keep clicking for more images (I know arrow keys work, and that's great, but consistency is key), no matter the size or where in the list I am (the ends of the list seem to break this pretty badly), image sizes shouldn't affect placement, jumping around the list is hard, maybe instead of or in addition to the "inline" list representation, you could have a scrolling or static list of thumbnails on top or bottom
- the blur is too heavy. I already can't see much of the previous or next images because the one in front is too big, so why are they so occluded? Tone it down, maybe desaturate them a little too if you feel like less blur wouldn't take them enough out of the foreground
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").
My favorite part is how well you scoped it for a w/e project and still came out w/ something useful. Very well done.
I haven't said wow since Etherpad , I believe. Wow.
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 :)
Simple, works with all the pics even if the upload takes a while. How long until you run out of s3 storage or have to increase the size of your rackspace cloud server?
No kidding, and nice collection :D My first round was pretty weird too: http://www.dropmocks.com/mvIz
For those of you who are interested in a future-proof file drop plugin based on FileReader(), here you go:
http://github.com/weixiyen/jquery-filedrop
http://github.com/weixiyen/jquery-filedrop
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.
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
I just posted the source: http://github.com/glenmurphy/dropmocks
Auto-pull, auto-push, etc.
Also, to my phone. When I take a picture on my phone, I want it to sync to a dropbox folder.
Also, with facebook. I want each of my picture galleries to sync with a mock (and, optionally, to a dropbox).
Let's say a mock is synced with both dropbox and facebook. Then adding a file to the folder locally on a machine, it should push to mock, then from mock to facebook.
Also, to my phone. When I take a picture on my phone, I want it to sync to a dropbox folder.
Also, with facebook. I want each of my picture galleries to sync with a mock (and, optionally, to a dropbox).
Let's say a mock is synced with both dropbox and facebook. Then adding a file to the folder locally on a machine, it should push to mock, then from mock to facebook.
Bah, instead of running my own app instance, do you mind if I make a Chrome extension on top of it, and you can push the code you like back into the running version?
Meta-question: if a Chrome extension uses significant server-side resources, should one ask the site host first? (legally, I think the answer is "no")
Meta-question: if a Chrome extension uses significant server-side resources, should one ask the site host first? (legally, I think the answer is "no")
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?
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?
Blur is only possible in IE with filter:blur (and I use it if available) - I've been bugging people to add CSS blur to WebKit :)
Yeah, if it's not in there, it seems like a rather large oversight. Blur is ridiculously frequently used, and it's so simple to implement.
In any case, gorgeous work :)
In any case, gorgeous work :)
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?
Looking at the code you just posted it looks like this is what you did:
// HAMLET HAMLET HAMLET
function isValidBrowser() {
// HAMLET HAMLET HAMLET
function isValidBrowser() {
var browser = BrowserDetect.browser;
var version = BrowserDetect.version;
return (
(browser == 'Chrome' && version >= 6) ||
(browser == 'Firefox' && version >= 3.6)
);
}Yep; I realize this is usually taken to be poor form, though I'm no idealist - I did it while the APIs I was using were in flux (I flipped through a few upload techniques), and focused on getting it working right in a few before expanding to the many.
Makes total sense. It looks great by the way.
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.
First off good job (love that people are using HTML5/CSS3). I checked out an album on my iPad since drag and drop is not supported :(. The transitions were very jerky. If you want to speed this up, switch from regular css3 transforms to transform3d. This is a less know fact that regular transforms are not hardware accelerated (iOS, as well as safari 5, tries to render a box that is hardware accelerated that the transform runs in which creates the jerk/flashing content), whereas translate3d is hardware accelerated for the full page. Mileage may very though since translate3d is very memory heavy.
A thought, before this potentially spreads far and wide:
Should we be spreading this? Or might doing so tank your server / storage / bank account? Do you have any limits in place to protect you?
Should we be spreading this? Or might doing so tank your server / storage / bank account? Do you have any limits in place to protect you?
It is running on App Engine so to an extent it will be free. http://dropmocks.appspot.com/
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.)
Safari 5, at least on Windows, doesn't support the File and FileReader APIs which are necessary for the drag and drop uploader. If you've seen otherwise, please let me know (I love the Safari team, and don't want to be unfair to them).
Nightly WebKit builds may work.
Nightly WebKit builds may work.
On the Mac, it works fine.
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 loved it. My only suggestion is making the non-focused images slightly opaque. I was left wondering if the severely blurred images were loading.
Transitions are pretty jerky for me, but really great idea. Thanks for open sourcing the code, I'm excited to see where this goes!
Did you consider using the new GAE API for image serving? I think it requires objects to be actual blobstore objects rather than in the datastore as a blob property, but it does dynamic image thumbnails. It does do dynamic resizing of picture to a bunch of different sizes, but requires a slightly different workflow to get pictures into the db.
[deleted]
Never have I been so forehead-smacking jealous that I didn't think of something first. kudos.
This is awesome stuff, great job.
However, I dragged an image ( but did not have any extension) - and it mentioned that the file is not an image.
I know this is a rare case ( heck what are the odds of me selecting me 1 pic which does not have an extension!) Anyways, good stuff.
However, I dragged an image ( but did not have any extension) - and it mentioned that the file is not an image.
I know this is a rare case ( heck what are the odds of me selecting me 1 pic which does not have an extension!) Anyways, good stuff.
[deleted]
Doesn't work for me. I'm running Chrome 6.0 (beta). I also tried Firefox 3.6. In both cases I get a "browser not supported" message.
EDIT: Seems the issue has been resolved. It's working for me on both browsers now.
EDIT: Seems the issue has been resolved. It's working for me on both browsers now.
Feature Request: Enable me to upload larger images that you could compress-on-the-go.
It beats the entire simplicity of the system if I have to manually compress the images to upload them.
I'm on Chrome 6 on Ubuntu. It's telling me that my browser isn't supported.
(Reason #101 why I hate browser sniffing, no one ever gets it right).
Beyond that, I wish you the best of luck, it sounds like something I can use.
(Reason #101 why I hate browser sniffing, no one ever gets it right).
Beyond that, I wish you the best of luck, it sounds like something I can use.
Simplicity wins. Very nice indeed.
Privacy can be an issue if the secret url leaks. Maybe a visit count/log (to detect leaks) and a (change) option (to get a new url and close the previous one).
Privacy can be an issue if the secret url leaks. Maybe a visit count/log (to detect leaks) and a (change) option (to get a new url and close the previous one).
It has a client side memory/resource leak. After viewing some pictures, the browser takes several hundred megs.
Its listed under GPU Process in Chromium. I guess it is a Chromium problem.
Its listed under GPU Process in Chromium. I guess it is a Chromium problem.
Well, this sucks. I'm not able to try it out, even with the latest version of Chrome. Any idea?
http://i.imgur.com/ZYYUi.png
http://i.imgur.com/ZYYUi.png
Please try again.
Cause: In order to make the open source distribution cleaner, I moved the app.yaml into the same directory as the other files. It was previously in the directory above, so my static_dir declaration went from source/files to ./files; the local App Engine development server handled the ./ notation fine, but the deployed one did not.
Cause: In order to make the open source distribution cleaner, I moved the app.yaml into the same directory as the other files. It was previously in the directory above, so my static_dir declaration went from source/files to ./files; the local App Engine development server handled the ./ notation fine, but the deployed one did not.
This is really cool, I dropped 66 images in there and it went very quickly...I'm always jealous of the Weekend project that some people pull off. Nicely done.
You can forget about IE most of the time, but Safari and other version of FireFox makes it kinda hard. Good start and hope to see improvements...
I am really impressed. Clean and simple to use. I can't believe that this is a weekend project.
I am currently studying your code. Thanks for making it available.
I am currently studying your code. Thanks for making it available.
These kind of weekend projects make me feel insignificant.
But then I see that author is on Chrome UI team so he is familiar with technology required (App Engine, Chrome HTML5).
Without that context it is just magic(and even then idea and implementation is great). But I think there must be something many of us can do in a weekend that will look like magic. But it was possible because of months/years of experience.
Without that context it is just magic(and even then idea and implementation is great). But I think there must be something many of us can do in a weekend that will look like magic. But it was possible because of months/years of experience.
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.
Awesome. Only comment I have is that some way to tell how many images there are and where you are in the sequence would be useful.
Great idea and execution, definitely needs better security. I was able to find several other galleries just by poking urls
Firefox 4b7pre is still loading up the image file after I dropped in on the page, so in fact it doesn't work at all.
Very great! Love the easy way to use it without having to log in to try. Simple approach. Keep working on the idea.
Amazing, great user experience. One detail though, wouldn't it be nice to have less blur on the thumbnails?
Amazing idea and execution. Great work.
Great Job.
Where to go from now, launching image service (flickr) or making this open source (e.g. light box) - up to you
Where to go from now, launching image service (flickr) or making this open source (e.g. light box) - up to you
My pictures were too big. > 900k.
Love the concept.
Your shadows look very odd with the very horizontal screenshots I dragged in to test it.
Your shadows look very odd with the very horizontal screenshots I dragged in to test it.
Like it because of simplicity, I like this more than flickr slideshow.
Error: image exceeds 900KB
Having to resize images before the upload is a deal breaker.
Having to resize images before the upload is a deal breaker.
you should use the blobstore api to break the 1MB limit. Also check out the new high performance image serving service @ http://j.mp/9UvNyZ
cool project
cool project
I'd like to see read only access on older browsers and the iPad.
Great application!
Small feature request: link to particular image with #
Small feature request: link to particular image with #
the biggest ideas are the smallest stuffs like that. This is deadly useful!
Wish you good luck with this idea!
Looks great
This is really awesome!
drag+drop not working on firefox 4. It does work with gmail.
This is beautiful.
Dude, that is sick
hi i find it kind of slow...
Weekend?
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!
Love the project!
I'd also pay, with one pony request: the ability to brand the experience so that I had my company's logo in the bottom right (for example) and URL mapping (perhaps just to a subdomain).
Would you be OK with resizing? App Engine has a 1MB limit, and I could get around that by splitting the file on the client, but I could also just do a resize in JS with canvas/ImageData.
You should probably be using the Blobstore API if you are not already.
http://code.google.com/appengine/docs/python/blobstore/overv...
It takes a bit more work but you could store the original file since it has a 2GB limit. You can only fetch 1MB at a time but it should still be doable.
http://code.google.com/appengine/docs/python/blobstore/overv...
It takes a bit more work but you could store the original file since it has a 2GB limit. You can only fetch 1MB at a time but it should still be doable.
Another option is to use boto to pass the upload along to S3 and just store the link path in app engine.
A jpeg image is already compressed. Unfortunately, you won't be able to go much smaller without choosing to lose data.
here, you will have to accept the java plugin but this you can drag a whole bunch of 3.3Mg images, it will compress all on the fly and serve them back to you.
http://www.documentary-art.net/uploads/compress-pics.php
it requires Java applet
I hope there is a NaCl version :)
I hope there is a NaCl version :)
[deleted]
does't work on 6.0.472.53 chrome.
using linux flavor - ubuntu 10.04
Also doesn't work for 6.0.472.59 beta on Ubuntu 10.04. I get the browsers detection error message.
Edit: Works now! Thanks.
Edit: Works now! Thanks.
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