and redesign your site...easily the biggest violation of my eyes ever.
In fact, I'd say the Contrast Rebellion logo is the biggest violation of my eyes. Scrolling up and down doesn't seem right...
hosted by (mt) Media Temple
There's a fair amount of merit to downvoted comments having their contrast lowered.
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)
Anyway - each to their own. It looked okay to me, apart from some tiny script in places. (Safari, OSX 10.4, 1280x854)
I prefer white-on-black. To me, reading black-on-white feels somewhat akin to staring into a projector.
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'
});
Example 2 at http://listjs.com/examples.html uses tables e.g
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.
In fact I think with _.fiter() you could probably do this in a few lines.
collection.each(function(model) {
model.set({visible: matchesSearch(model)});
});
model.bind("change:visible", function() {
$(this.el).toggle(model.get("visible"));
});
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 :).
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/...
Overall a great script though.
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()
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.
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.
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.
But one point with only allowing id i.e is consistency.
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.
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
EDIT: I see now that your front page is an example, with source code. That wasn't obvious to me.
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.
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!
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?
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.
So nice work, and thanks.
I'm sure there are tons of awesome libraries I don't know about.
Nice stuff!
-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).