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

31–40 of 115 posts

Re: Review my weekend HTML5 project: DropMocks

#34

Post by bd »

patrickaljord wrote: post #14
TamDenholm wrote: post #7

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.

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

Re: Review my weekend HTML5 project: DropMocks

#35

Post by Groxx »

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?

Re: Review my weekend HTML5 project: DropMocks

#36

Post by gmurphy »

arfrank wrote: post #28
arfrank wrote: post #26

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

Re: Review my weekend HTML5 project: DropMocks

#37

Post by arfrank »

gmurphy wrote: post #36
arfrank wrote: post #28

Earlier quoted context omitted.

Looking at the code you just posted it looks like this is what you did: // 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.

Re: Review my weekend HTML5 project: DropMocks

#38

Post by gmurphy »

Groxx wrote: post #35

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

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

Re: Review my weekend HTML5 project: DropMocks

#39

Post by spicyj »

gmurphy wrote: post #12
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.)

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.

On the Mac, it works fine.
Post reply on HN