The List.js Blog

Version 0.1.4 of List.js is now released and it contains one major update and one minor.

The major one is that filters, search and sort now depend on each other. If you searches in a filtered list, the items hidden by the filter will stay hidden. The same goes if you have searched in a list and then filters the result.

The minor update is that .filter() is now used to reset filters instead of .filter(false).

Today a new version of List.js was released. There are one major change that you have to be aware of!

The sort buttons now sorts values based on data-sort=”valueName” instead of rel=”valueName”. The resone for this is basically that rel=”” is not valid at most elements according to W3C.

Other changes in the 0.1.3 release (from the documentation):

• Added function .clear() that removes all items from the list
• Changed the sort function to be based on data-sort instead of rel
• When sorting one category, all sort-related classes will be removed from the other sort buttons
• Updated .sort(valueName, sortFunction) to .sort(valueName, options), see more info in the documentation

Go to github.com/javve/list to download the latest version (and remember to change your sort button)!

There have been some questions about List.js performance. How many items can it handle? How fast is the indexing, sorting and searching in larger lists?

Today I have an answer: Try it yourself at http://listjs.com/examples/performance-test.html

But for you who just want some quick stats have I done some benchmarking myself.
Important: All these stats are based on first runs (read more about first runs in the last paragraph of this blog post). And I have a new Macbook Pro and Chrome, so these stats are first run-best cases):

Indexing

• Index 100 items á 3 value names ~ 5 ms
• Index 1000 items á 3 value names ~ 50 ms
• Index 10 000 items á 3 value names ~ 360 ms

Searching

• Search for a 4 char string in all values in 100 items á 3 value names ~ 7 ms
• Search for a 4 char string in all values in 1000 items á 3 value names ~ 90 ms
• Search for a 4 char string in all values in 10 000 items á 3 value names ~ 800 ms

Sorting

• Sort 100 items ~ 9 ms
• Sort 1000 items ~ 90 ms
• Sort 10 000 items ~ 1 600 ms

Adding

• Add 100 items to list with 1 item ~ 8 ms
• Add 1000 items to list with 1 item ~ 14 ms
• Add 10 00 items to list with 1 item ~ 30 ms

One thing worth mentioning when it comes to List.js and performance is that the default settings (changeable) only allows 200 items to be visible at the same time. This is to boost performance and helps A LOT for larger list.

(Hint: In future releases the handling of larger lists will be much smoother, promis)

One other thing worth mentioning is that modern browsers (like Chrome, Safari, Firefox) optimizes complex JavaScript at runtime which means that all scripts get MUCH faster the second time they are called. The data above are all based on first runs. Searching in 10 000 takes e.g 18 ms the second time compared to 800 the first.

It has been a amazing week. For a couple of hours today List.js was:

• The most watched JavaScript this week
• The most watched JavaScript this day
• The second most watched this month
• The second most forked this week

It shares the same top 5 fork-list as Twitter-Bootstrap, jQuery-Mobile and Noje.js. 

No pressure, no pressure. ..

It has also been published in some blogs etc. Really appreciate it! <3

• http://www.webresourcesdepot.com/list-js-a-javascript-library-for-flexible-lists/
• http://codevisually.com/list-js-a-cross-browser-native-javascript…
• http://www.webappers.com/2011/10/24/make-your-lists-seach…
• http://dailyjs.com/2011/10/21/x-wing-testrunner-list/
• http://javascriptshow.com/episodes/20 (11:00, very funny)
• http://technoyouth.com/web-2-resources/17123-make-your-lists…
• http://davidseah.com/code/archives/305/
• http://guiabreve.com/list-js-mejorando-las-listas-html.html
• http://www.greepit.com/2011/10/search-sort-and-filter-html-li…
• http://brettterpstra.com/web-excursions-october-22-2011-october-24-2011/
• http://lubik.info/skrypty/list-js-kapitalna-biblioteka-do…

Anyway, coming up next in List.js:

• Examples showing of the performance of List.js
• *secret* but people with large lists will like it

That its! Back to coding…

Tonight I added the Listjs.com website to List.js Github repository. The reason for this is simply that its a more convenient structure for myself and there will also be easier to download the List.js examples and try them out locally.

My original plan for tonight was to release some examples showing of performance and benchmarking, but other work got in the way. But I promis you, its worth waiting for.

Woah! List.js first 45 hours out in the wild have been pretty crazy.

I “released” the script around 22:00 CEST this Wednesday (when the swedish podcast Webbradion 55 aired).

Yesterday around 17:00 the link was posted to Hacker News and within a hour it reached #1. It held that position for around five hours.

Today, 24 hours after it was posted to Hacker News, Listjs.com have had  27 500 visitors, been tweeted 269 times, liked 57 times and +1’d 68 times.

In addition to that github.com/javve/list got 439 watchers, 21 forks and one code contribution!

Craaazy.

Probably the best thing is the amazing response at Twitter, Im so freakin’ happy right now.