
Isotope - An exquisite jQuery plugin for magical layouts - bkudria
http://isotope.metafizzy.co/
======
NathanKP
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.)

~~~
jeisenberg
This site looks great. Seriously, well done.

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

~~~
JonnieCache
_> a little demotivated about the site_

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

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

------
sfphotoarts
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...](http://en.wikipedia.org/wiki/Electronics_Today_International\]E.T.I).

~~~
wdewind
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?

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

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

~~~
JonnieCache
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=...](http://www.google.co.uk/products?q=shoes&hl=en&show=li&lnk=showgrid)

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.

~~~
gfodor
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!

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

~~~
moe
$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.

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

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

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

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

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

------
bkudria
From the creator of jQuery Masonry.

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

Register your click events BEFORE page load, kiddies.

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

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

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

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

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

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

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

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

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

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

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

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

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

------
cemregr
Dave DeSandro is a web development genius.

------
asdfadjoin
This is Sridhar

------
moe
Brilliant.

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

------
crizCraig
I love how it works with the page zoom.

