Isotope - An exquisite jQuery plugin for magical layouts | Hacker News Reader

Isotope - An exquisite jQuery plugin for magical layouts

isotope.metafizzy.co

459 pointsbkudria58 comments

Isotope is fairly nice, but it is still missing fluid width on the layout elements. In other words, although it does respond fairly well to horizontal resizing of the browser, it still doesn't do a good job of dynamically adjusting the width of elements horizontally while at the same time stacking them vertically.

I made some custom modifications on the original jQuery masonry plugin to get the effect I needed for my upcoming web app. You can preview it at http://test.bookflavor.com (This is an in-development sneak preview so don't expect everything to work perfectly, but you will be able to preview my personal modification of the jQuery masonry plugin.)

This site looks great. Seriously, well done.

Thanks. I'm glad you like it. I have been feeling quite depressed of late, and a little demotivated about the site, so your positive feedback means a lot to me, and boosts me to get back to work and finish those last few features that are needed.

>a little demotivated about the site

Don't be! It is both bloody lovely and likely very useful. The magic combo :)

I just reviewed the site as well - REALLY nicely done (both .test and www). I've passed it on to a few friends of mine who are literary fanatics, i'm sure they'll find it useful as well. Hope you launch the new site soon!

This is truly excellent. You have a lot to be proud of here. Please don't get discouraged, I'm looking forward to seeing the finished product.

Wow I'm really impressed with the layout and how clean it all is.

Thanks allenp. I hope to finish a few last features and get it released soon, but I'm at a bit of a low point right now, and finding it hard to finish a few final details with my attention diverted towards other paying jobs and issues in my life.

Hope you do, and that you release the mods. Really sweet job!

I hate to make such a banal comment, but when I see things like this I cannot wait to redesign my website and use this ultra-cool technologies. After programming for 25 years I am grateful to this plugin and the developer(s) for the excitement that playing with the demo just gave me. Buried under all those years of coding standards this rekindled some of the feelings from the kid in me that would eagerly look forward to the next issue of E.T.I. http://en.wikipedia.org/wiki/Electronics_Today_International....

This seems like a neat plugin, but I don't understand all the mega excitement.

What am I missing, why is this so earth shattering (read the other comments in this thread)? What is justifying people saying $37 is a "frictionless" price?

What are you planning to do that makes you so excited by this?

I think its a combination of the obvious usefulness of this code, combined with the impeccable execution and presentation, combined with its effective employment of bleeding edge technologies. It's basically a "perfect storm" of frontend library awesomeness.

I honestly can't tell if you are being serious or not. If you are: expand on "obvious usefulness."

If you aren't, congrats on telling a joke on HN and still getting upvoted.

Erm... for sorting and filtering data in a way that implicitly describes the transformations in the presented dataset caused by said sorting/filtering through the animation effects. Information density++

I honestly see this as obvious. I'm not trying to be funny. And I can't work out if you don't think this is obvious, or you don't agree that this would be useful.

Just imagine it on an ecommerce page: http://www.google.co.uk/products?q=shoes&hl=en&show=...

Also imagine using it to fine tune an optimisation problem: you adjust a series of sliders that define the relative priorities you place on certain properties of the items in the dataset, it then does a weighted sort. You can see directly how the changes on the sliders affect the ranking of the items.

If you didn't have the animation it would not be easy to see which items had risen and which fallen. You would have to compare your memory of the order before the change with what you're looking at. This is cognitively very difficult, and it would lead to you toggling the value back and forth endlessly and comparing the order.

Basically any stat or inventory interface in a game would benefit from this. Or any interface where the task is solving an optimisation problem really.

Not all whizzy effects are gimmicks to be sneered at from the terminal. Don't throw the UX baby out with the eye candy bathwater.

EDIT: Another example - when toggling between different properties to sort the dataset by, the amount and speed of the animation describes the correlation of the two properties, without requiring you to parse any text. Animation is just another way to impart information that doesn't require reading, alongside color, size, and other spatial/physical properties.

I see the argument but honestly, I'm not buying it. It's a valiant attempt to portray this information (a differential) through animation, but it's too noisy and chaotic, particularly when more than a few of the items need to reposition themselves. It looks nice but at least from the demos on that page I don't feel like it's really helping increase the information density of the data being presented.

At the end of the day, I think it's polish that for almost all cases the user will be better served if the animation were to be turned off since it is a waste of time. It is very cool though!

As someone who made the purchase (proof: the license is a pdf/txt) I couldn't have said it better.

Isotope promises to be a goldmine for experimentation and exploration.

My thought was that if you need this type of behavior on your site $37 dollars is much less expensive than the amount of time it would take for you to pull all the elements of this together yourself.

Right - my question is who needs this kind of behavior? And why?

Don't things ever strike you as potentially very useful before you think of a specific use case?

In this case, it's bound to be useful when you're building interfaces for webapps, to let you do new things.

For instance, an onlline clone of Football Manager where gamers want to examine the stats of the players in the other team, but from a whole lot of different perspectives: graphically in formation, or in a list sorted in differrent ways. The animations may not be essential there but they certainly don't hurt. Games compete for their visual fidelity.

I run an online Football (american) sim, and I am sitting here dreaming up how to use it.

I hadn't considered the stats, that's interesting. Same could be said for the draft, and free agency.

Both are really hard to order, and see useful data that way. I'll have a lot of variations though, and a lot of items. Just the draft is 384 rows(players)

Not sure how appropriate this is to American Football, but it'd be a neat way to transform between different team formations that the user wants to try.

That's true, I hadn't considered that. You could also group them in some interesting ways like that.

The thing is, I wouldn't want to move pictures like that though. They'd actually be tables to move like that, so the user could move the tables around, and then make selections within those tables.

You're always making some choice with an American Football game. A lot of ordered data is what it comes down to.

I've been meaning to update my photography portfolio, which would be a great use for this. The "relayout" demo is quite engaging--I played with it for a good 15+ seconds, which is a long time to interact with anything lacking content (http://isotope.metafizzy.co/demos/relayout.html).

After playing with it a bit, I'm guessing it would be most useful for image galleries that contain a lot of irregularly sized images and you want to fit a lot of them on the screen. Or something like Google Image Search.

Curious, first time I see something non-free on GitHub

4:28 video of desandro showing it off about a month ago http://screenr.com/vIt

Glad to see it finally out!

Direct links to demos:

http://isotope.metafizzy.co/demos/basic.html

http://isotope.metafizzy.co/demos/sorting.html

http://isotope.metafizzy.co/demos/images.html

http://isotope.metafizzy.co/demos/filtering.html

http://isotope.metafizzy.co/demos/relayout.html

http://isotope.metafizzy.co/demos/infinite-scroll.html

http://isotope.metafizzy.co/demos/adding-items.html

http://isotope.metafizzy.co/demos/layout-modes.html

http://isotope.metafizzy.co/demos/elements-partial.html

http://isotope.metafizzy.co/demos/elements-complete.html

If you go back to the homepage, he's offering the plugin for commercial use for $37. I like this idea of monetizing the use of plugins, especially ones so well-built. (He's also offering direct support for $17, another interesting idea.)

$37 is a joke. I just purchased it b̶e̶f̶o̶r̶e̶ ̶h̶e̶ ̶r̶e̶a̶l̶i̶z̶e̶s̶ ̶h̶e̶ ̶c̶o̶u̶l̶d̶ ̶c̶h̶a̶r̶g̶e̶ ̶a̶n̶ ̶o̶r̶d̶e̶r̶ ̶o̶f̶ ̶m̶a̶g̶n̶i̶t̶u̶d̶e̶ ̶m̶o̶r̶e̶ ̶f̶o̶r̶ ̶t̶h̶i̶s̶ to support further development of this gem.

That's a lot of hard work to substitute for the 'strikethru' tag :)

b̶c̶d̶e̶f̶g̶h̶i̶j̶k̶l̶m̶n̶o̶p̶q̶r̶s̶t̶u̶v̶w̶x̶y̶z̶A̶B̶C̶D̶E̶F̶G̶H̶I̶J̶K̶L̶M̶N̶O̶P̶Q̶R̶S̶T̶U̶V̶W̶X̶Y̶Z̶-̶_̶!̶?̶

I'm not really commenting on the price chosen, but the choice to charge for it. I've also created a jQuery plugin or two. I released it for free and now spend a reasonable amount of time answering questions about support, implementation, etc.

For some reason in my mind I had always assumed that open source type things have to be done for free: the building, the support, etc. Seeing someone doing something others helps put that in perspective.

Or, in short: I wish I was smarter about it and more business-savvy.

> Or, in short: I wish I was smarter about it and more business-savvy.

Here is a non-solicited biz-savy tip: Tell us the names of your plugins.

I'm just one data point but I actually push those "donate"-buttons when I see them on plugins that make my life easier.

Just keep the amount reasonable in relation to the product and don't make me jump through hoops. I.e. just link directly to paypal and if you want to ask me any questions then put that form after the checkout-process where I'm free to ignore it.

$37 is a joke

Indeed. It's such a frictionless purchase that he'll be laughing all the way to the bank.

I agree. I was happy to see such a reasonable price for this great plugin. Thanks for sharing!

very cool. for those interested, a similar plugin is jquery quicksand http://razorjack.net/quicksand

Very nice! It's a more up to date version of http://razorjack.net/quicksand/

Also very helpful. This one seems to have some different features regarding hiding/showing elements. Great stuff!

From the creator of jQuery Masonry.

The buttons on the site are broken. The click events are all waiting for page load which is taking 20 seconds due to an unrelated request timeout for a javascript resource from a different domain. Probably some sort of analytics.

Same thing has been caused by ads on pastie.org lately http://pastie.org/1538368

Especially if you have blocking embedded links to resources that are not in your control.

Beautiful. The individual demos are also very impressive. The only thing I didn't really get was the variable sizes option, where the sizes seemed kind of arbitrary (for example on the elements demo, I expected it to be proportional to something, such as the abundance of the element).

Small note, on Chrome (d10) the option highlights on the Elements Complete demo are broken. Buttons still work but the highlight doesn't update correctly.

Very interesting library, I'd like to suggest another similar alternative : Rhizosphere, http://site.rhizospherejs.com (demos at http://www.rhizospherejs.com ).

Compared with Isotope, I think it has some extra features, but also is still missing something.

Fantastic. With stuff like this I can see web-app interfaces surpassing (Mac) desktop applications. You might argue they already have, visually, but here the responsiveness is particularly impressive while the complexity is ramped up a bit.

Very interesting library. I see some interesting use cases for photos and media browsing. It would be interesting to hear some other suggested use cases where this plugin can be applied over existing solutions.

This looks interesting. I've been using his masonry plugin for quite a while now and its worked out very well. Excited to see that masonry appears to hook into isotope as well.

How does it run on lower spec computers or devices like iPad? I'm just wondering where the line should be drawn when considering the website performance/user experience.

Works fine on iPad. In fact the graphics in the demos make me think this would be perfect for recreating the Star Trek 'tablets'.

My laptop is 6-7 years old and it isn't overly slick for me, but not so bad that it'd be a huge concern. Definitely worth testing depending on how many items you're looking to incorporate though.

Nice. I did something very similar, as an experiment, even before jQuery Masonry, but never released it. I should've known better.

I love the ring of "An exquisite..."

Pretty nice plugin. The transitions look a bit choppy on Firefox 3.6. Very smooth on Chrome.

Looks awesome, trying to find something where i can use that.

Very very cool and I even have something to use it on!

Dave DeSandro is a web development genius.

This is Sridhar

Brilliant.

really cool. Developing web apps is becoming like a no-brainer. Who builds for desktop when you can create the same responsiveness in a web app.

I love how it works with the page zoom.

Reply on news.ycombinator.com