

List.js - bloodberet
http://listjs.com/
6.899kb cross-browser native JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable
======
cletus
One note--and this applies to _every_ Javascript plugin or library:

Your examples need to be online. Without exception.

As soon as I have to download and run local examples, honestly I just
completely lose interest. That may seem impatient, a snap judgment, arbitrary
and irrational. It is in fact all of these but it doesn't matter.

There's no reason you can't have your demos online. It makes it super easy for
anyone to check out.

~~~
MichaelApproved
I totally agree with examples being online but they have an example page
listed at the top <http://listjs.com/examples.html>

~~~
rjb
The problem is that the focus is on the Download and social sharing buttons. I
would just remove all that completely.

~~~
Javve
Agreed, I removed all of it!

------
thegorgon
So, one thing I don't quite understand: If I have jQuery on my page (which I
imagine now at least 50% of websites do, though that's just a guess) why would
I want to add another script that redefines a bunch of jQuery functions? If
you had a jQuery compliant version, wouldn't it be smaller, faster, better?

~~~
oinksoft
I'm sure you would, but not everybody is using or likes jQuery. A standalone
script such as this one is far more valuable.

~~~
thegorgon
Not everyone does, but it is used by over 49% of the 10,000 most visited
websites making it the most popular JavaScript library in use today.

I'm not saying a standalone is invaluable, but if you're bragging about how
it's only 7k, shouldn't there also be a 5k version for people already using
the most popular JavaScript library in use today?

<http://trends.builtwith.com/javascript/jQuery>
[http://w3techs.com/technologies/overview/javascript_library/...](http://w3techs.com/technologies/overview/javascript_library/all)

~~~
FuzzyDunlop
I might be wrong but I believe some parts of the JS community resent jQuery's
ubiquity (which has arguably reached the point where people think jQuery _is_
javascript).

That people are now taking the time to create pure JS solutions is nothing but
a good thing, and there's certainly no reason why people should have to depend
on a third party library if they don't want to.

Finally, your latter point about filesize is a false economy, because a 5k
version still requires a 30kb DOM abstraction as a dependency. And since the
thing has no external dependencies, why on earth would you want to hobble it
with one it doesn't even need?

All these pure JS scripts and utilities get a nice new home in my bookmarks
bar, because they're a lot more valuable to me than a shoddy jQuery plugin.

~~~
thegorgon
If you use 1 JS script on your site, i'll agree. What happens when you include
3 of these though? 10? 15? Suddenly you have tons of duplicate code, trying to
implement getAttribute across browsers...wouldn't it be better if they all
used the same DOM abstraction library...if only something like that existed...

~~~
FuzzyDunlop
Helping jQuery monopolise the JS space even further doesn't strike me as a
good idea or beneficial to the community at large.

The main drawback is that it doesn't help people learn Javascript at all. And
then it's hard to get information and help with JS because practically every
result returns a jQuery plugin or something that uses jQuery. And as a result
of that people think, "oh, I need jQuery installed to do some javascript on my
site." And then other people complain, "this script isn't jQuery I can't-" ...
oh.

Wouldn't it actually be better if JS implementations were actually
standardised so its behaviour across browsers was totally predictable and
reliable?

> redefines a bunch of jQuery functions

Just clocked this. jQuery redefines more than just a bunch of javascript
functions as well as then redefining its own. It's a bit of a mess.

~~~
thegorgon
I totally agree. It would be way better if JavaScript implementations were
standardized.

It would also be way better for developers if all computers had infinite
memory.

It's just not in the cards though.

jQuery standardizes the mess that is JavaScript implementations so that
developers can worry about their application instead of the browser. I don't
think you should lament jQuery for being so popular, you should lament browser
manufacturers (ahem, Microsoft) and the W3C for not creating and following
good JavaScript specifications.

That's like blaming Dennis Ritchie for killing the Assembly community.

------
Groxx
Why do so many JS mini-libraries expect an ID or a CSS selector? Why not
accept an element too, which lets you augment _anything_? Seriously, you're
just crippling your library, and _adding_ complexity by not accepting
elements.

~~~
Javve
Good idea! The id-parameter could absolutely be a element instead, will add
that to next release.

But one point with only allowing id i.e is consistency.

------
rgarcia
I'd like to see something like this for Backbone collections, e.g. it would
take a query on model attributes and generate a subset of the original
collection. Then any views (not just lists) tied to this subset would update
automatically.

In fact I think with _.fiter() you could probably do this in a few lines.

~~~
jashkenas
Voila.

    
    
        collection.each(function(model) { 
          model.set({visible: matchesSearch(model)});
        });
    

And then, in your view:

    
    
        model.bind("change:visible", function() {
          $(this.el).toggle(model.get("visible"));
        });
    

... assuming that you have a "matchesSearch" function that can tell you if a
given model matches the current search term.

------
latch
kinda neat...but...you need to read: <http://contrastrebellion.com/>

and redesign your site...easily the biggest violation of my eyes ever.

~~~
dhugiaskmak
That's an awful website too. White text on dark background is a complete
readability failure, no matter how much contrast it provides.

~~~
Xurinos
In some agreement... According to an article on "color for developers" that
was posted at some point on HN, one gets a better "pop" contrast if there is a
smidgeon of color. As I read it, using white or black, regardless of the other
color involved in the combo, is less effective. One should strive instead to
add at least a little bit of color and contrast that color with the other. For
example, if you toss a tiny bit of blue into your black, then you should toss
a tiny bit of yellow/orange into your white. The contrast is not in symmetric
values either; R, G, and B have different contributions to the brightness.

If I have the time to dig up the article I am thinking about, I will add it to
this post.

(Here is the HN thread on the contrastrebellion site:
<http://news.ycombinator.com/item?id=2807047>)

------
josscrowcroft
What search algorithm are you using for the list searching?

I tried [monkey game] and would have expected Monkey Island to show up.

Also, clicking 'edit' I would expect the table row being edited to be edited
inline (it's confusing that the focus jumps down to the input boxes)

Potentially really useful but needs a bit of polishing I think - great work
though.

~~~
Javve
It's using a really simple algorithm, but I will definitely update it in later
releases!

I may update the examples but, I want to keep them as simple as possible, just
enough to show some of the possibilities with List.js

------
ak217
Thanks, but you _really_ need to change that to 7 KB. I thought to myself "7
MB? What a weird JS library" and was about to close the page.

~~~
Javve
I really changed it ;)

------
ayu
Good complement to Chosen, which gives you improved <select> elements.
<http://harvesthq.github.com/chosen/>

------
orblivion
Maybe it's just me, but it took me a second to figure out what I was looking
at. "HTML Lists" didn't pop out at me right away as specifically meaning <ul>
and <ol> for some reason. You should put the source code by your examples so
people see what little they put in for the output they see, and it'll clarify
(at least to someone like me) exactly what is going on here.

EDIT: I see now that your front page is an example, with source code. That
wasn't obvious to me.

~~~
Javve
Think I have to put a headline describing the list! Wait 5min :)

------
DanielRibeiro
Looks a lot like quicksand[1] without any of the fancy effects. Or am I
missing something?

[1] <http://razorjack.net/quicksand/>

~~~
rgarcia
It looks like quicksand doesn't have text search, and is also about twice the
size (14KB).

~~~
Javve
...and Quicksand is dependent on jQuery :)

------
yoda_sl
What is the license behind the script ? Apache ? MIT ? Other?

~~~
jimmar
MIT according to the project page on Github. It's a little strange that they
didn't include the license in the .js file. I guess they wanted to save a few
bytes...

------
rdg
Also... 6.899kb is confusing. In many countries/locales(?) that would mean
almost 7MB. Maybe 6.9kb should be used instead, or 6899bytes or something like
that.

~~~
mofle
Or just 7KB

------
strager
I only realized there were examples on the front page after visiting HN.
They're completely below the fold for me (1440x900).

The examples page had a similar problem. The examples (pretty close to the
fold) looked like comments. I went to read the comments, seeing if anyone had
suggested live examples be put on the site.

The contact list example won't let me add contacts if I click "edit" on one
row, then delete that row. The table also seems to degrade if you remove all
elements.

"Documentation" and "Source" link to the same (Github) page. At least link to
README.md for the documentation. Why is the "Download" link bold?

The front page has _no_ indication of the name of this library above the fold.

~~~
Javve
Good point about the fold and the name. I added the name to the menu and maybe
I will make the logo smaller.

I also added a note about that the contacts-example could contain bugs. My
purpose with the example is the show the possibilities with add(), values()
and remove(). There fore I have tried to minimize the amount of code (and
there by some functionalities). But I will of course fix real bugs if there
are any.

The Documentation-link now leads to the readme!

Thanks for your input!

------
foresterh
This looks pretty useful. I'm curious why you used class to store the
"category". Wouldn't it be cleaner to store it in"data-category" or just
Javascript? Or is that less browser compliant?

Overall a great script though.

~~~
Javve
The reason is simply that I wanted it to be as simple as possible, but if it
seems to be a common request I could add support for data-attributes! (and
yes, it "works" in IE, by using getAttribute())

~~~
catshirt
i used to use class names to store data types (category is a perfect example).
there's a really great reason to do this: you can style your objects based on
that type of data without relying on CSS attribute selectors.

that said, i quickly learned that it's better to use data- attributes and copy
them into the class when necessary. otherwise you end up with utilities like
getCategoryFromClassName()

------
andreasklinger
We would use such a JS file for large lists.

Is there a performant way to use this kind of JS files without loading the
full database table into the frontend? I couldn't find anything in the
documentation.

~~~
asolove
There is: give the list a fixed height and a scrollbar to display more. Load
the first two or so pages immediately and render them, then request more right
away (or as the user scrolls, if they scroll faster than you can load them).
As the user scrolls, remove dom elements that are more than a page above or
below the visible area to keep the number of nodes small. Obviously, cache the
data (and the removed nodes) so that when the user scrolls back to the same
spot you can load them again quickly.

If performance is important and you have a lot of data, this is an enormously
tricky thing to get right, and perhaps impossible in a general case.

Note that fast scrolling of lots of data is a little-noticed but extremely
optimized operation in the OS X and iPhone UI, and has undoubtedly received
multiple man-years of attention.

------
peterhajas
Thank you for licensing this - when I checked earlier, it was "I'll figure it
out", but thank you for putting it under an open source license.

Nice stuff!

------
shyamster
Very cool script. Any support for permalinks? <plug> If you don't need your
list to be on your site, you can always use listly for social lists/polling
like this example of startup tools - <http://list.ly/list/9E-tools-and-
services-for-a-lean-startup> </plug>

------
jpdoctor
Regarding the examples: Does anyone have a quick readout whether the "edit"
button could cause edit-in-place behavior?

------
jroseattle
This is more in the aggregate, but what is considered best practice when
loading JS scripts in a page in terms of sum-total size?

This script (looks cool, btw) comes in at 7k. It seems very easy to me to add
"7k here, another 7k there" and next thing you know your page needs to go on a
diet.

Question is: what's the threshold that everyone follows?

~~~
andrenotgiant
I think more important than script bandwidth is # of requests.

As long as you combine your scripts, and use Google's APIs to load the cached
version of common libraries like JQuery and JQuery UI. You could easily be
using 10 of these libraries and still be wayy ahead of the curve as far as
bandwidth is concerned.

------
Smudge
An idea for extending this:

-Add pagination. I don't mean dynamic/AJAXed pagination -- The entire list can still be loaded in the background (which would still make the list sorting/filtering possible).

------
tomelders
perfect, and just in time. I'll be announcing my own project here on HN in a
week or two, and List.js will most certainly be taking a very central role.

So nice work, and thanks.

~~~
Javve
Sweet! I would love to get some feedback when you tried it out.

------
atomical
Is there a similar library that can be used with tables? I like the function
and this looks easy to use but my site uses tables over lists.

~~~
Javve
List.js works on most stuff. Tables, ul, divs, ol, spans, etc.

Example 2 at <http://listjs.com/examples.html> uses tables e.g

~~~
username4
How does it compare to <http://tablesorter.com/>?

------
repos
Is there a neat collection of all these javascript libraries out there?

I'm sure there are tons of awesome libraries I don't know about.

~~~
joverholt
<http://microjs.com/> has a nice collection of js libs.

------
s00pcan
Seems this has regex support, but I don't see any mention of it anywhere. Try
it out.

------
aboodman
Put a working example or at least a screenshot on that first page. I don't
have time to download a zip file and blah blah blah to see what you made. Make
it easy.

~~~
pbreit
The list above the code is a working example of the code.

~~~
aboodman
The example (and code) are below the fold on a 1440 laptop. I didn't even
realize they were there.

That is absolutely the most important thing for a library. First page, right
after the name. A functional example of what it does.

That huge logo on the homepage is pointless. Replace it with a nice lickable
demo (you can move the logo to the header or something), and the page will be
twice as effective.

Just my .02.

Once I got to look at the actual example, it looks good :).

------
ckhoo
Fantastic script. Nice work!

------
sundar22in
Its neat and useful.

------
ecommando
Nice work :)

