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

Show HN: flipgrid.js, an experimental minimalist photo gallery(t3hprogrammer.github.com)

55 points by t3hprogrammer 13 years ago | 20 comments

nkoren 13 years 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?

MasterScrat 13 years ago | |

I use Sloppy for this: http://www.dallaway.com/sloppy/

SO topic on this subject: http://stackoverflow.com/questions/1094760/network-tools-tha...

jskopek 13 years ago | |

Charles (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 13 years 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-simula...

wesley 13 years ago | |

OS X has the Network Link Conditioner (installed by Xcode).

doesnt_know 13 years 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

[2] http://i.imgur.com/hqD9J.png

t3hprogrammer 13 years 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.

chapel 13 years 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 13 years 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 13 years ago | | |

It's worth playing around with - I would definitely like to have the image fill as much of the space as possible.

mistagrrr 13 years 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 13 years ago | |

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

olympus 13 years 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.

kkwok 13 years 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.

citricsquid 13 years ago |

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

t3hprogrammer 13 years ago | |

Sorry about that, just added a link!

Axsuul 13 years ago |

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

Ian999 13 years ago |

Really awesome stuff!

tylerlh 13 years ago |

pretty cool! nice work on this.

cool_guy 13 years ago |

Awesome