13 ms·
List.js
6.899kb cross-browser native JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable
- deleted 15y ago[deleted]
- deleted 15y ago[deleted]
- latch 15y agokinda neat...but...you need to read: http://contrastrebellion.com/ http://contrastrebellion.com/ and redesign your site...easily the biggest violation of my eyes ever.
- vinhboy 15y agolol.. hn is on the list.
- jqueryin 15y agoThe screenshot is of an older version of HN. pg, Did the change occur as a result of showing up on Contrast Rebellion? There's a fair amount of merit to downvoted comments having their contrast lowered.
- tripzilch 15y agoI hate that, personally. I don't always have to agree with whoever downvoted, or sometimes I'm just curious about what it said. Especially the lowest contrast, after several downvotes, that's just stupid, because it's pretty much unreadable unless you select the text. So you know there's text, but you can't really read it, then why show it at all?
- iaskwhy 15y agoI'd say is so you can quickly highlight it to read it.
- morsch 15y agoExcept that's not a downvoted comment or an old version as far as I can tell; it's the text of a Ask HN/Show HN thing. I never really understood why those are colored gray, either. Edit: Ok, apparently it's supposed to discourage using HN as a blog (http://news.ycombinator.com/item?id=2807183 http://news.ycombinator.com/item?id=2807183). I still think it's odd.
- dhugiaskmak 15y agoThat's an awful website too. White text on dark background is a complete readability failure, no matter how much contrast it provides.
- Xurinos 15y agoIn 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 http://news.ycombinator.com/item?id=2807047)
- bilban 15y agoTwaddle! I find dark text on a white background unbearable. I'm much happier with off white on a dark background. Anyway - each to their own. It looked okay to me, apart from some tiny script in places. (Safari, OSX 10.4, 1280x854)
- pavel_lishin 15y ago> White text on dark background is a complete readability failure, no matter how much contrast it provides. I prefer white-on-black. To me, reading black-on-white feels somewhat akin to staring into a projector.
- deleted 15y ago[deleted]
- farlington 15y agoFor many people, high intensity/high contrast also causes eyestrain. There's nothing wrong or unreadable about medium contrast text, despite what the somewhat triumphalist contrastrebellion would have you believe.
- baddox 15y agoThe list.js is completely and easily readable.
- watty 15y agoI didn't have any problem reading the site - perhaps it's your eyes? In fact, I'd say the Contrast Rebellion logo is the biggest violation of my eyes. Scrolling up and down doesn't seem right...
- pavel_lishin 15y agoI spent a good 30 seconds doing that and giggling.
- sceaj 15y agoMy favorite part about the Contrast Rebellion is that Media Temple is listed as one of the bad examples... and then at the bottom: hosted by (mt) Media Temple
- foresterh 15y agoThis 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 15y agoThe 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 15y agoi 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()
- ckhoo 15y agoFantastic script. Nice work!
- rdg 15y agoAlso... 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.
- jpdoctor 15y agoRegarding the examples: Does anyone have a quick readout whether the "edit" button could cause edit-in-place behavior?
- andreasklinger 15y agoWe 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 15y agoThere 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.
- Javve 15y agoI have optimized the script so that only 200 items are visible by default (change with options = { maxVisibleItemsCount: int }) this makes it possible to add large amounts (100 000+) items into the list without problems (except for sorting, thats sloooow if you have large amout of items). But I am working on a solution for auto-loading data from callbacks or showing more items in list on the fly. But the problem is that most solutions are dependent on how the HTML/CSS around the list is implemented, which is something I want to avoid. Im thinking a lot about it, though.
- ak217 15y agoThanks, 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 15y agoI really changed it ;)
- josscrowcroft 15y agoWhat 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 15y agoIt'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
- deleted 15y ago[deleted]
- atomical 15y agoIs 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.
- thousande 15y agoThe Contact List example is a table http://listjs.com/examples.html http://listjs.com/examples.html
- Javve 15y agoList.js works on most stuff. Tables, ul, divs, ol, spans, etc. Example 2 at http://listjs.com/examples.html http://listjs.com/examples.html uses tables e.g
- username4 15y agoHow does it compare to http://tablesorter.com/ http://tablesorter.com/?
- guac 15y agohttp://www.datatables.net/ http://www.datatables.net/ is nice.
- cubicle67 15y agoHere's a demo of a very old version of our list http://quietcode.com/smartlist/ http://quietcode.com/smartlist/ It's also on github but the code is so outdated it's not worth linking to. This demo has 4000 items to show its speed with medium datasets Everything is created dynamically. The js that creates the demo is userList = new QCSmartList({ dataUrl: 'users.json', columns: [ {field:'email'}, {field:'surname'}, {field:'firstname', header:'Name'}, {field:'points'} ], containerId: 'user-list', name: 'users', varName: 'userList' }); If anyone's interested I can try and get some updated code/demo up later on today (it's only morning here)
- DanielRibeiro 15y agoLooks a lot like quicksand[1] without any of the fancy effects. Or am I missing something? [1] http://razorjack.net/quicksand/ http://razorjack.net/quicksand/
- rgarcia 15y agoIt looks like quicksand doesn't have text search, and is also about twice the size (14KB).
- DanielRibeiro 15y agoThe filter by type is actually a text search. But filter by function is always more general and powerful.
- Javve 15y ago...and Quicksand is dependent on jQuery :)
- orblivion 15y agoMaybe 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 15y agoThink I have to put a headline describing the list! Wait 5min :)
- aboodman 15y agoPut 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 15y agoThe list above the code is a working example of the code.
- aboodman 15y agoThe 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 :).
- Javve 15y agoIt is a working example on the first page? :)
- deleted 15y ago[deleted]
- strager 15y agoI 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 15y agoGood 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!
- jroseattle 15y agoThis 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 15y agoI 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.
- s00pcan 15y agoSeems this has regex support, but I don't see any mention of it anywhere. Try it out.
- Smudge 15y agoAn 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).
- shyamster 15y agoVery 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 http://list.ly/list/9E-tools-and-services-for-a-lean-startup </plug>
- rgarcia 15y agoI'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 15y agoVoila. 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.
- crescentfresh 15y agoI've tweaked the proposal at http://stackoverflow.com/questions/6865174/backbone-js-correct-way-of-filter-collection-data-and-display-in-view/6865316#6865316 http://stackoverflow.com/questions/6865174/backbone-js-corre... to do just what you describe.
- rudasn 15y agodon't want to hijack the thread, but perhaps something like this http://rudasn.github.com/meelo-store http://rudasn.github.com/meelo-store ?
- yoda_sl 15y agoWhat is the license behind the script ? Apache ? MIT ? Other?
- jimmar 15y agoMIT 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...
- ecommando 15y agoNice work :)
- thegorgon 15y agoSo, 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 15y agoI'm sure you would, but not everybody is using or likes jQuery. A standalone script such as this one is far more valuable.
- thegorgon 15y agoNot 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://trends.builtwith.com/javascript/jQuery http://w3techs.com/technologies/overview/javascript_library/all http://w3techs.com/technologies/overview/javascript_library/...
- FuzzyDunlop 15y agoI 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.
- cletus 15y agoOne 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 15y agoI totally agree with examples being online but they have an example page listed at the top http://listjs.com/examples.html http://listjs.com/examples.html
- johns 15y agoI would say that a working example on the home page should be required.
- ra 15y agoThere is an example on the home page.
- repos 15y agoIs 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 15y agohttp://microjs.com/ http://microjs.com/ has a nice collection of js libs.
- tomelders 15y agoperfect, 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 15y agoSweet! I would love to get some feedback when you tried it out.
- Groxx 15y agoWhy 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 15y agoGood 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.
- peterhajas 15y agoThank 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!
- ayu 15y agoGood complement to Chosen, which gives you improved <select> elements. http://harvesthq.github.com/chosen/ http://harvesthq.github.com/chosen/
- sundar22in 15y agoIts neat and useful.