5 ms·

Show HN: Mothereffinanimatedgif

113 points by twakefield 15y ago

paulirish 15y ago
Conceived of, developed, designed, and launched in 24 hours: https://github.com/paulirish/lazyweb-requests/issues/53 https://github.com/paulirish/lazyweb-requests/issues/53 Tech: HTML5 drag n drop, FileReader, a[download], GIF encoding on the client, BlobBuilder, postMessage, <input type=range> (with Firefox polyfill), appcache, transforms, etc. Oh! and the aforementioned * { box-sizing : border-box; }
- pacomerh 15y ago
  This is inspiring, a client side tool like this to compose press-kits would be nice for media O.o
- runaway 15y ago
  Incredible, I literally started making a client-side gif animator like this on Wednesday. I'm kinda glad I didn't try to finish the whole thing yet, as this is very well done. I didn't know about that cool GifEncoder.
stefankendall 15y ago
The 24-hour conception to launch is more impressive than the end-result, which is still pretty damned impressive.
zsherman 15y ago
Seriously, that's awesome.
jmah 15y ago
Why is Safari not supported?
- paulirish 15y ago
  no FileReader support in Safari 5.1, which is used to enable the drag 'n drop image reading. A "Nightly WebKit" build (which is basically Nightly Safari) works though. Behind the scenes, I'm alpha-testing a new API for mapping feature detects to browsers, so you can say what features you need and get an automated response for what browsers they'll work in. (Another lazyweb project actually): https://github.com/paulirish/lazyweb-requests/issues/39 https://github.com/paulirish/lazyweb-requests/issues/39
  - literalusername 15y ago
    How about Firefox 9.0.1? It works for me in Chromium, but in Firefox the dropped image doesn't even appear on the deck.
VMG 15y ago
Whenever I have to drop images on a webpage see something happen, I close the tab. I don't have a bunch of images lying around that have the right size and that I'd feel comfortable sharing.
- paulirish 15y ago
  It's all clientside, so there's no risk here of sharing. But it's cool, hombre. Here's what someone else just made with it http://twitpic.com/8kyup2 http://twitpic.com/8kyup2
  - VMG 15y ago
    I can't know that the files aren't transferred somewhere without thoroughly inspecting the source and it isn't obvious from the page that this is an offline app. Thanks for the example. It would be great if the page itself linked to some demonstrations.
    - NanoWar 15y ago
      It has (now) the following in the top bar: "Drag + Drop, Client-side, Animated GIF Creator"
      - brk 15y ago
        Ah, yeah, so now it's totally safe because it says so right there on the page. The points raised in higher-up comments are still relevant... It's impossible to know for sure exactly what will happen with my images that I Drag n Drop. Of course, for a 24 hour effort, it's great. But this is the 80/20 rule at play. The first 80% was the "easy" bit. Now you have to create some demoes, tutorials, earn user trust, etc. I don't have a lot of need for animated GIFs personally, but this seems like a neat little tool.
- chimeracoder 15y ago
  I find it annoying as well, because I use a tiling window manager, which makes opening a file manager just to drag & drop annoying - not a whole lot more, but just enough that it's not really worth it. I don't mind having that as the default, but at least give people an option to select files the old-fashioned way, and make it easy to find within ~5 or ~10 seconds of looking at the page... Imgur does this well, if you ask me - support for drag & drop, menu, and copy/pasting URL.
XLcommerce 15y ago
Just fyi: uses filereader. There is a bad (crashing) memory leak in Chrome. Bug report here: http://code.google.com/p/chromium/issues/detail?id=114548&thanks=114548&ts=1329369049 http://code.google.com/p/chromium/issues/detail?id=114548&#3... Beware if you intend to use filreader to read many large files. Allocated mem never gets released. Spent 2 days getting a html5 client side image resizer/uploader only to hit this killer bug. Had to use Flash in the end, which by the way performs like a demon on binary data.
- paulirish 15y ago
  Just threw your bug report over to our FileReader engineer. Thx for filing!
  - XLcommerce 15y ago
    No worries. I was v. disappointed when I had to fall back on flash for resizing. Felt great having client side image resize and upload (with progress) without using flash.
deleted 15y ago
[deleted]
manveru 15y ago
No Opera support :(
ChrisArchitect 15y ago
pretty neat -- way to step up 'team behind lazyweb-request#53' tested it out with whatever I had handy: Mother Effing Mountain Lion http://i.imgur.com/oRFRA.gif http://i.imgur.com/oRFRA.gif
rbrcurtis 15y ago
Very cool. But you need to fix it for transparent gifs; they just stack on top of each other and need to clear the previous.

113 points by twakefield 15y ago

Conceived of, developed, designed, and launched in 24 hours: https://github.com/paulirish/lazyweb-requests/issues/53 https://github.com/paulirish/lazyweb-requests/issues/53 Tech: HTML5 drag n drop, FileReader, a[download], GIF encoding on the client, BlobBuilder, postMessage, <input type=range> (with Firefox polyfill), appcache, transforms, etc. Oh! and the aforementioned * { box-sizing : border-box; }

pacomerh 15y ago
This is inspiring, a client side tool like this to compose press-kits would be nice for media O.o
runaway 15y ago
Incredible, I literally started making a client-side gif animator like this on Wednesday. I'm kinda glad I didn't try to finish the whole thing yet, as this is very well done. I didn't know about that cool GifEncoder.

stefankendall 15y ago

The 24-hour conception to launch is more impressive than the end-result, which is still pretty damned impressive.

zsherman 15y ago

Seriously, that's awesome.

jmah 15y ago

Why is Safari not supported?

paulirish 15y ago
no FileReader support in Safari 5.1, which is used to enable the drag 'n drop image reading. A "Nightly WebKit" build (which is basically Nightly Safari) works though. Behind the scenes, I'm alpha-testing a new API for mapping feature detects to browsers, so you can say what features you need and get an automated response for what browsers they'll work in. (Another lazyweb project actually): https://github.com/paulirish/lazyweb-requests/issues/39 https://github.com/paulirish/lazyweb-requests/issues/39
- literalusername 15y ago
  How about Firefox 9.0.1? It works for me in Chromium, but in Firefox the dropped image doesn't even appear on the deck.

VMG 15y ago

Whenever I have to drop images on a webpage see something happen, I close the tab. I don't have a bunch of images lying around that have the right size and that I'd feel comfortable sharing.

paulirish 15y ago
It's all clientside, so there's no risk here of sharing. But it's cool, hombre. Here's what someone else just made with it http://twitpic.com/8kyup2 http://twitpic.com/8kyup2
- VMG 15y ago
  I can't know that the files aren't transferred somewhere without thoroughly inspecting the source and it isn't obvious from the page that this is an offline app. Thanks for the example. It would be great if the page itself linked to some demonstrations.
  - NanoWar 15y ago
    It has (now) the following in the top bar: "Drag + Drop, Client-side, Animated GIF Creator"
    - brk 15y ago
      Ah, yeah, so now it's totally safe because it says so right there on the page. The points raised in higher-up comments are still relevant... It's impossible to know for sure exactly what will happen with my images that I Drag n Drop. Of course, for a 24 hour effort, it's great. But this is the 80/20 rule at play. The first 80% was the "easy" bit. Now you have to create some demoes, tutorials, earn user trust, etc. I don't have a lot of need for animated GIFs personally, but this seems like a neat little tool.
chimeracoder 15y ago
I find it annoying as well, because I use a tiling window manager, which makes opening a file manager just to drag & drop annoying - not a whole lot more, but just enough that it's not really worth it. I don't mind having that as the default, but at least give people an option to select files the old-fashioned way, and make it easy to find within ~5 or ~10 seconds of looking at the page... Imgur does this well, if you ask me - support for drag & drop, menu, and copy/pasting URL.

XLcommerce 15y ago

Just fyi: uses filereader. There is a bad (crashing) memory leak in Chrome. Bug report here: http://code.google.com/p/chromium/issues/detail?id=114548&thanks=114548&ts=1329369049 http://code.google.com/p/chromium/issues/detail?id=114548&#3... Beware if you intend to use filreader to read many large files. Allocated mem never gets released. Spent 2 days getting a html5 client side image resizer/uploader only to hit this killer bug. Had to use Flash in the end, which by the way performs like a demon on binary data.

paulirish 15y ago
Just threw your bug report over to our FileReader engineer. Thx for filing!
- XLcommerce 15y ago
  No worries. I was v. disappointed when I had to fall back on flash for resizing. Felt great having client side image resize and upload (with progress) without using flash.

deleted 15y ago

[deleted]

manveru 15y ago

No Opera support :(

ChrisArchitect 15y ago

pretty neat -- way to step up 'team behind lazyweb-request#53' tested it out with whatever I had handy: Mother Effing Mountain Lion http://i.imgur.com/oRFRA.gif http://i.imgur.com/oRFRA.gif

rbrcurtis 15y ago

Very cool. But you need to fix it for transparent gifs; they just stack on top of each other and need to clear the previous.