Resources list: some UX improvements

[Claus Reinke]

I finally got round to implement some UX improvements I've had
on my todo list, to make our resources list more useful:

- added beginnings of toolchain information (who uses what);
useful if you want to select a matching set of parser, editor, etc
(for examples, see
http://clausreinke.github.com/js-tools/resources.html#group:ides )

- added direct entry links; mostly needed for crossreferences,
e.g., the hash #entry:esprima links to the entry for esprima
and ensures that it is visible

- added direct group links; helpful when referring to sublists
in discussion threads; e.g., the hash #group:static-analysis
links to the "Static analysis" group and ensures that it is visible

[entry&group hashes are all-lowercase, with spaces replaced by '-';
there is no guarantee that these hashes will remain stable, but
if they change, references will still land on the resources list]

- dropped filtering by resource type;
as the list organization has evolved, this has become less and
less useful, not to mention the awkward selection panel

- added simple search; useful for navigating the list from the
address field; e.g., the hash #search:uglify highlights all entries
(toolchains) that mention uglify and ensures they are visible

- added table of contents (if window is wide enough); useful
for quick navigation to topic groups, to see where you are
when many or big groups are open; also used to highlight
groups that contain search hits

Of course, none of that would be useful without up-to-date
contents. I hope these UX improvements will not only make it
easier to use the information available but also encourage
people to contribute tool information and updates. You don't
have to do pull requests - just open a github issue with the info.

Some further UX tweaking might be necessary - please let me
know if I've broken anything (tested on the major browsers,
but only on one machine).

Claus
http://clausreinke.github.com/

[Peter van der Zee]

It might be a good idea to give some kind of indication of clickable
stuff. You can currently not see what text is clickable, it's all
regular black with no mouse hover interaction...

- peter

[Claus Reinke]

> It might be a good idea to give some kind of indication of clickable
> stuff. You can currently not see what text is clickable, it's all
> regular black with no mouse hover interaction...

ah, I knew I'd forgotten something (I had been meaning to
look for some not-too-ugly, scalable icons for this purpose).

todo list not empty, after all.. :-)

meanwhile: all group headings are clickable

- in toc (left): scroll contents to group, open it, and make it visible
- in contents (right): open/close group

Thanks for the reminder,
Claus

[Claus Reinke]

> It might be a good idea to give some kind of indication of clickable
> stuff. You can currently not see what text is clickable, it's all
> regular black with no mouse hover interaction...

Clickable text is now highlighted and explained on hover.

Thanks,
Claus