Open Web Tools Directory

pfinette

41 responses

There are an immense number of tools that have been created to help web developers. Unfortunately, you might never know this; there’s no central index of these tools. It turns out that keeping up with all the development in this space is really difficult–even for folks like us who have been tracking it every day for years.

As we’ve explored different tools we could create here as part of the Developer Tools Lab, we’ve come to the opinion that in addition to creating new tools, one of the best things we could do is help developers understand the broad universe of tools that already exist and expose some of the fantastic and amazing work that’s being done.

We’re launching today a first step in this direction: an Open Web Tools Directory.

(Note: a modern browser with canvas is required to view this, like Firefox 3.5, Safari 4, Chrome 2, or Opera 9).

Open Web Tools Directory

We went with a “space” theme to emphasize the sheer size of the tool ecosystem (though at the moment we only have a small fraction of the tools available listed). And, frankly, we just couldn’t do another table-based master/detail database application; we wanted a directory that would be fun to use (and perhaps a bit of fun to create as well).

So where do we go from here?

First, we’re putting out a call for folks to tell us about their tools. We’ve prepared a data entry form for you to use to submit a tool; please, help us fill up the directory with the hundreds or thousands of items we’ve missed! Your entries won’t go live immediately, but we’ll review them on a regular basis and get them added.

Second, let us know what features you’d most like in the directory. We’re exploring a few different concepts for how to display the entries in the directory. Here’s one of our ideas to add more detail to what we display about each entry:

More Information Concept

We’re also exploring concepts for adding social participation features, like ranking the tools and commenting on them (though we’d like to have a good solution to astroturfing in place before rolling them out).

We also want to make searching the tools better. Right now, the search box at the bottom of the screen searches over all text fields and you can limit the directory to broad categories of tools, like “Debug”-related tools:

Search Buttons

Finally, we have an accessible version of the directory, both for browsers without canvas support and for screen reader support.

We also have a post discussing some of the technical details over at Ajaxian.com.

We’re looking forward to evolving the directory and working with the web community to make it a vibrant resource for discovering and tracking the web’s amazing tools universe.

What do you think?

— Ben Galbraith, on behalf of the Developer Tools team

41 responses

  1. Vadim wrote on :

    Very interesting…

    I have a question: will Mozilla provide source code of this Open Web Tools Directory, for example, via SVN or nightly tarballs. Or it will closed source site about open source technologies?

  2. Chris Webster wrote on :

    I have added zembly (http://zembly.com) to the list of tools

  3. Zack wrote on :

    FYI your link to the Adobe Browser Labs is broken.

  4. j wrote on :

    Browser isn’t old, only follows current standards not draft ones.

  5. Carl – Web Courses Bangkok Instructor wrote on :

    Amazing, and something we will be referencing in our course content.

    This will be a first port of call for our Programming students.

    THanks Mozila!

  6. Eugenia wrote on :

    I don´t feel comfortable with the UI design, it just doesn´t feels good, it seems very raw and slow. About the bottom menu for tools, what if there were more categories?? The search box should do some subfiltering in real time (if people are looking for something that doesn´t know yet, they won´t know the complete name of a tool). “The universe of icons” with its titles in the bottom of each icon just seems messy. This was design by the Mozilla people or contributors?
    Regards.-

  7. Derek Cooper wrote on :

    The Canvas version is a nice demonstration graphics capability, but detracts from rather than enhances functionality. The text version is a valuable resource. It would be helpful if it were categorized and search-able. Also, it’s important to differentiate between free and open-source tools.

    In any case, thank you for this valuable resource. I found several tools I didn’t know about.

  8. alienfactory wrote on :

    1. how about putting a planet up in one of the corners where i can drag my favorites to.

    2. in safari 4.02 when resizing the icons disappear

    3. icons look horrible should have some kind of consistency. set some kind of standard

  9. Onore wrote on :

    http://labs.adobe.com/techlogies/browserlab/ — Page not Found Please Fix it!

  10. memento wrote on :

    Sorry guys, but it doesn’t work for me.
    I have FF 3.5, the page loads, but firebug throws this exception:

    uncaught exception: [Exception… “Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]” nsresult: “0x80040111 (NS_ERROR_NOT_AVAILABLE)” location: “JS frame :: http://tools.mozilla.com/ :: anonymous :: line 798″ data: no]

  11. Jim Bob wrote on :

    I notice on the “plain html” version of the list, there are no tags for DabbldDB.com – so it would never pop up in a search for a tool.

    One likely tag is “database”, and perhaps “utility” and maybe “collaborative”

  12. James Bacon wrote on :

    Thanks . . . This will be very, very useful.

  13. Sander Aarts wrote on :

    Great initiative (thanks!) although I have to agree with the remarks made here earlier about the usability/accessibility aspects.

    I also had it crash within a few clicks (Opera 9.64 on WinXP). Even after refreshing the page it doesn’t work anymore. Glad there’s the HTML version!

  14. Alister Scott wrote on :

    I have added Watir as a suggested web testing tool as it is very popular and easy to use.

  15. Isaribi Anjali wrote on :

    The data assembled is useful and should be published.

    However, the flashy UI is awful, inefficient, unusable, and innaccessible.

    I’m glad to see the “Plain HTML Version” added this morning, but it lacks important pieces of information, such as the descriptions.

  16. otatop wrote on :

    More tools for you…

    Jingo – a way to make javascript dependancy management more sane (dynamic loading works but a tool to auto concat javascript files is in progress)
    http://code.google.com/p/jingo/

    fiddler – (windows only) http debugging proxy (great for debugging ajax)
    http://www.fiddler2.com/fiddler2/

    url decoder – (simple yet somehow I find myself using it frequently)
    http://www.simplelogic.com/Developer/URLDecode.asp

    see a page rendered in a ton of different browsers
    http://browsershots.org/

  17. Michael Baygeldin wrote on :

    Very nice!

  18. Ben Galbraith wrote on :

    Hey folks,

    Thanks for the comments!

    Some notes:

    1. As a labs experiment, we aim to roll things out as early as possible to get feedback from folks. You’re not seeing a “finished product.”

    2. I’ve seen a few notes about the directory locking out non-canvas browsers. A plain HTML version is now available at http://tools.mozilla.com/simple.html and we’ve updated the blog post to reflect this.

    3. RE: high CPU usage. It seems that Linux desktops are having issues with unusually high CPU usage and poor performance; we’ve seen this behavior fixed in some situations by updating video drivers.

    Keep the feedback coming!

    Best,

    Ben

  19. Michael K. wrote on :

    As good as the intentions are, this shows how the open web is about to become everything people hate about Flash, and I do not even brush universal accessibility:
    – no incremental search
    – no mouse-select/copy/paste
    – dont even think about useful printing
    – no link or anchor to refer to one specific category/sub-page/item
    – right click / view image source is really not what anyone expects
    – half of the debugging tools that are presented will not help very much with this kind of site (“inspect element” anyone?)
    – No text zoom support. Full page zoom could work in theory, but messes up the site in practice.
    – Annoyingly slow on mobile devices.

    independent of the technology used:
    – tabs are not a good metaphor for checkboxes
    – it’s buggy (screen goes black unexpected, FF3.5)

    What does work nicely is the UI-Idea of collecting matching items on a glance using big icons. But couldn’t this also be done using a CSS-float layout?

    All in all This looks like an example of “technology for its own sake”, which is OK for a lab experiment I guess … as long as you accept that it doesn’t necessarily *work*.

  20. Mike Rundle wrote on :

    Nice little cameo of my Beak icon up there!

  21. Ian wrote on :

    What a thoroughly truly awful page design!

  22. Justin Fletcher wrote on :

    So… essentially it’s a directory of projects. Why make it so restrictive that you HAVE to have the latest browsers with a not-yet standardised technology ? Why present it with applications in random positioning on the screen ?

    The article states that there are an immense number of tools and then presents you with just 50 or so – I’m not counting them, but I’d suggest that maybe given the vastness of space and the intensely sparse areas of matter within it you may have hit upon a reasonable theme for the wrong reasons.

    As a developer, when I’m looking for tools I don’t really give a fig about whizzy interfaces – particularly when they detract from what’s actually being presented. Everything that you’re presenting here would be better off presented without the silly flaying graphics, without the silly background and without the requirements to upgrade to the latest browser.

    What you’re trying to present here is information. Information that should be accessible to people. The purpose of the Web, as I understand it, was to try to make different systems accessible. What you’re doing is presenting information that /could/ be made accessible to everyone but requiring the absolute latest of technologies – before they’re even standardised – in order to use it…

    Centralised directory, handy, maybe. Stupid presentation… give me a break…

    Frankly, it looks like style over substance to me.

  23. anonymous wrote on :

    This is a bad design. Sorry. Its CPU intensive making it inaccessible and non-functioning.

  24. Fabio Corread wrote on :

    Wow, people, you have been working hard and now we all have a rich set of tools to deploy great web applications. Please make sure the documentation of the tools is just as rich. Thanks!

  25. usr wrote on :

    I like the idea. But I don’t find it very usable.

  26. Jim wrote on :

    Hovering over the Icon the ‘tooltip’ in some cases is unreadable using the latest trunk build, have not checked with the 3.5 release version yet.

  27. Alan wrote on :

    I broke it. I didn’t even try. I assumed the buttons on the bottom would toggle on/of on their own. When I realized I had multiple categories selected, I quickly unchecked them and now nothing works.

  28. Anthony Mckale wrote on :

    Link for browserlab broken

    -> http://labs.adobe.com/technologies/browserlab/

    Ps list very nice, just needs the bbc’s opensource glow js library http://www.bbc.co.uk/glow/ then it’d be complete 😉

  29. blurkness wrote on :

    amazing… thx so much!

    love it!!!

  30. Bill Gates wrote on :

    Very nice techno-demo.

    Thanks to the iE Users who do know have any warning about the lacks of their browser.
    A simple message like “Sorry, your browser is getting old. Please change it” would be great

    Bill

  31. Test wrote on :

    Clicking 2+ of the filter options at the bottom causes the site to not funktion anymore.
    Oh and try changing the window size.
    Using Firefox3 with latest updates.

    You should add some sign saying “Beta”

  32. Ombre wrote on :

    Certainly a good tool but what about accessiblity? After full flash site, full canvas site? Where is the alternate content in html?

    🙁

    P.S. : sorry for my bad english

  33. Jeremie wrote on :

    Awesome and useful initiative, with a pretty amazing interface.

    But, I guess it’s a first release and the interface need to be a little polish. For example, it will be pleasant to make all the items dragable and sortable.

  34. Fredrik W wrote on :

    I miss Sproutcore and prototype 🙂

  35. Jon Brett wrote on :

    Thank you – this is a great tool

    I have been trying to learn the ropes of web development for the past year or so. One of the biggest problems at the start was finding out about tools and technologies and determining which is suitable for what project.

    For extensions I would love to see user ranking. Also some summary info on the strengths and weaknesses of different tools.

    Man, I wish this directory was around a year ago!

  36. thinktom wrote on :

    I don’t like it. It isn’t THAT useful. I wish there would be some tips for effective use added…

  37. Srikanth AD wrote on :

    I love the space theme! seems to be a promising concept.

    Kudos to the team

  38. Ferdinand wrote on :

    Why is it so cpu intensive?

  39. Schalk Neethling wrote on :

    Awesome work folks! Makes finding tools fun.

  40. Maricel Quesada wrote on :

    This is awesome and very useful since it is really hard to keep up with all the different tools out there. Also, the way you guys created the directory is amazing, great job!

  41. Pat wrote on :

    Love the directory – great job guys! Time to drudge though my bookmarks. 🙂