Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Review my weekend HTML5 project: DropMocks

dropmocks.com

Post reply on HN
Print view View original

61–70 of 115 posts

Re: Review my weekend HTML5 project: DropMocks

#61

Post by leif »

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

Re: Review my weekend HTML5 project: DropMocks

#63

Post by Sephr »

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

Re: Review my weekend HTML5 project: DropMocks

#66

Post by gmurphy »

Sephr wrote: post #63

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

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.

Re: Review my weekend HTML5 project: DropMocks

#68

Post by rubypay »

gmurphy wrote: post #66
Sephr wrote: post #63

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

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 t…

I just read that you're the lead designer for Google Chrome, awesome work on that by the way!

Re: Review my weekend HTML5 project: DropMocks

#69

Post by JarekS2 »

jellisnyc wrote: post #45

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…

Dude - you could really check http://disqourse.com - this app is to help you get customer ping-pong with mockups etc. easy.

Re: Review my weekend HTML5 project: DropMocks

#70

Post by joneath »

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.
Post reply on HN