7 ms·

Show HN: flipgrid.js, an experimental minimalist photo gallery

55 points by t3hprogrammer 14y ago

tylerlh 14y ago
pretty cool! nice work on this.
kkwok 14y ago
Like this a lot, awesome work with this. Some feedback: When you have a photo being viewed and you click a thumbnail from the bottom or top rows, the picture changes, but the thumbnail disappears. Also, when you do this the new picture renders not as smoothly.
chapel 14y ago
I would love it if instead of having the image move to the center if it is on the outside, instead have the image appear around the thumbnail right where it is like the ones in the center. That would make it win completely. Otherwise it is very nice and simple in a good way.
- ashray 14y ago
  Agreed. The eye tracking required to move from thumbnails placed in different regions to the center of the screen is a bit too much work. Enlarging the image right where it is might work better. Just a hunch though.
  - t3hprogrammer 14y ago
    It's worth playing around with - I would definitely like to have the image fill as much of the space as possible.
Ian999 14y ago
Really awesome stuff!
citricsquid 14y ago
I can't find a link to the repository from the demo, so here for anyone else: https://github.com/t3hprogrammer/flipgrid.js https://github.com/t3hprogrammer/flipgrid.js
- t3hprogrammer 14y ago
  Sorry about that, just added a link!
Axsuul 14y ago
Awesome, way to think outside of the "box"!
olympus 14y ago
Very neat, I just had a few minor issues with needing to click some thumbnails twice to get the picture to display correctly. With that one issue aside, I think this is a pretty slick way to display photos and might use it myself to display vacation pics or something similar.
mistagrrr 14y ago
Very creative, nice job! You might want to expire the Flickr API key used since it's part of github's history now.
- t3hprogrammer 14y ago
  Done! I thought you needed it to view photos, but it doesn't seem like that's the case.
cool_guy 14y ago
Awesome
doesnt_know 14y ago
Pretty cool. I think it could use some kind of feedback/indicator when I click on a photo and it's loading. I was clicking thumbnails and nothing was happening, wasn't sure what was suppose to happen. Turns out it was just loading, but there was no indication that was happening. This wouldn't be a big problem, but the entire thing seems to rely on you going very slowly and only click one at a time and wait for it to load. If I click another photo during that loading period, it mashes up the photos [1]. Scrolling down while a photo is in the center also doesn't appear to work well, if I click another photo it tries to bring it up and cuts them up [2]. Looks like it could do with some more testing my friend. [1] http://i.imgur.com/uzUl0.png http://i.imgur.com/uzUl0.png [2] http://i.imgur.com/hqD9J.png http://i.imgur.com/hqD9J.png
- t3hprogrammer 14y ago
  I would like to a "loading" indicator too, but I'm not sure what the best way to integrate it is. I've noticed the other issues you've pointed out - there definitely needs to be some more refinement that needs to be thought about.
deleted 14y ago
[deleted]
nkoren 14y ago
I'm currently testing this on a slow connection from an airport lounge in India. It's a pretty frustrating experience: I click on an image and receive no feedback about whether the click has registered. Sometimes the full image appears after 5-10 seconds, sometimes it never appears. Sometimes I click several times in the interim, and get weird results. But I bet it is quite nice on a higher-speed connection. This raises a question for me: what is the best way to simulate/create a low-speed connection, for UI testing purposes?
- jskopek 14y ago
  Charles (http://www.charlesproxy.com/ http://www.charlesproxy.com/) has been a permanent addition to my toolkit for this exact reason. Cross platform, cross browser HTTP monitoring and proxying with throttling and all sorts of goodies. I believe there are several pure-CLI ways of doing this as well, but Charles is $40 well spent.
- hmottestad 14y ago
  On unix you can set up a pipe on the network with a speed limit. Also, if you are on osx you can use apples own network simulator: http://apple.stackexchange.com/questions/24066/how-to-simulate-slow-internet-connections-on-the-mac http://apple.stackexchange.com/questions/24066/how-to-simula...
- MasterScrat 14y ago
  I use Sloppy for this: http://www.dallaway.com/sloppy/ http://www.dallaway.com/sloppy/ SO topic on this subject: http://stackoverflow.com/questions/1094760/network-tools-that-simulate-slow-network-connection http://stackoverflow.com/questions/1094760/network-tools-tha...
- wesley 14y ago
  OS X has the Network Link Conditioner (installed by Xcode).
D3 14y ago
Oh god, not more infinite scrolling. When will the horror end?! Also, I spotted a bug - click an image to bring up the full size version of it then click another thumbnail. Big image stays, thumbnail disappears.

55 points by t3hprogrammer 14y ago

pretty cool! nice work on this.

kkwok 14y ago

Like this a lot, awesome work with this. Some feedback: When you have a photo being viewed and you click a thumbnail from the bottom or top rows, the picture changes, but the thumbnail disappears. Also, when you do this the new picture renders not as smoothly.

chapel 14y ago

I would love it if instead of having the image move to the center if it is on the outside, instead have the image appear around the thumbnail right where it is like the ones in the center. That would make it win completely. Otherwise it is very nice and simple in a good way.

ashray 14y ago
Agreed. The eye tracking required to move from thumbnails placed in different regions to the center of the screen is a bit too much work. Enlarging the image right where it is might work better. Just a hunch though.
- t3hprogrammer 14y ago
  It's worth playing around with - I would definitely like to have the image fill as much of the space as possible.

Ian999 14y ago

Really awesome stuff!

citricsquid 14y ago

I can't find a link to the repository from the demo, so here for anyone else: https://github.com/t3hprogrammer/flipgrid.js https://github.com/t3hprogrammer/flipgrid.js

t3hprogrammer 14y ago
Sorry about that, just added a link!

Axsuul 14y ago

Awesome, way to think outside of the "box"!

olympus 14y ago

Very neat, I just had a few minor issues with needing to click some thumbnails twice to get the picture to display correctly. With that one issue aside, I think this is a pretty slick way to display photos and might use it myself to display vacation pics or something similar.

mistagrrr 14y ago

Very creative, nice job! You might want to expire the Flickr API key used since it's part of github's history now.

t3hprogrammer 14y ago
Done! I thought you needed it to view photos, but it doesn't seem like that's the case.

cool_guy 14y ago

Awesome

doesnt_know 14y ago

Pretty cool. I think it could use some kind of feedback/indicator when I click on a photo and it's loading. I was clicking thumbnails and nothing was happening, wasn't sure what was suppose to happen. Turns out it was just loading, but there was no indication that was happening. This wouldn't be a big problem, but the entire thing seems to rely on you going very slowly and only click one at a time and wait for it to load. If I click another photo during that loading period, it mashes up the photos [1]. Scrolling down while a photo is in the center also doesn't appear to work well, if I click another photo it tries to bring it up and cuts them up [2]. Looks like it could do with some more testing my friend. [1] http://i.imgur.com/uzUl0.png http://i.imgur.com/uzUl0.png [2] http://i.imgur.com/hqD9J.png http://i.imgur.com/hqD9J.png

t3hprogrammer 14y ago
I would like to a "loading" indicator too, but I'm not sure what the best way to integrate it is. I've noticed the other issues you've pointed out - there definitely needs to be some more refinement that needs to be thought about.

deleted 14y ago

[deleted]

nkoren 14y ago

I'm currently testing this on a slow connection from an airport lounge in India. It's a pretty frustrating experience: I click on an image and receive no feedback about whether the click has registered. Sometimes the full image appears after 5-10 seconds, sometimes it never appears. Sometimes I click several times in the interim, and get weird results. But I bet it is quite nice on a higher-speed connection. This raises a question for me: what is the best way to simulate/create a low-speed connection, for UI testing purposes?

jskopek 14y ago
Charles (http://www.charlesproxy.com/ http://www.charlesproxy.com/) has been a permanent addition to my toolkit for this exact reason. Cross platform, cross browser HTTP monitoring and proxying with throttling and all sorts of goodies. I believe there are several pure-CLI ways of doing this as well, but Charles is $40 well spent.
hmottestad 14y ago
On unix you can set up a pipe on the network with a speed limit. Also, if you are on osx you can use apples own network simulator: http://apple.stackexchange.com/questions/24066/how-to-simulate-slow-internet-connections-on-the-mac http://apple.stackexchange.com/questions/24066/how-to-simula...
MasterScrat 14y ago
I use Sloppy for this: http://www.dallaway.com/sloppy/ http://www.dallaway.com/sloppy/ SO topic on this subject: http://stackoverflow.com/questions/1094760/network-tools-that-simulate-slow-network-connection http://stackoverflow.com/questions/1094760/network-tools-tha...
wesley 14y ago
OS X has the Network Link Conditioner (installed by Xcode).

D3 14y ago

Oh god, not more infinite scrolling. When will the horror end?! Also, I spotted a bug - click an image to bring up the full size version of it then click another thumbnail. Big image stays, thumbnail disappears.