Here are a few other posts that you might find interesting:
JSON Formatter and Validator11
The JSON Formatter was created to help with debugging. As data expressed as JSON is often written without line breaks to save space, it became extremely difficult to actually read it. This tool hopes to solve the problem by formatting the JSON into data that is easily readable by human beings.
Faux Console: Simulating a Firebug, Safari or Opera debugging in IE12
Page Speed, released by Google, is a Firefox/Firebug extension very similar to YSlow18 that evaluates your web pages for performance. Read more about Page Speed best practices to see what aspects of a web page are being evaluated. YSlow and Page Speed are based off Steve Souder’s work19 (who worked for Yahoo! and now works for Google).
Highlight.js highlights syntax in code examples on blogs, forums and other web pages. The tool works automatically: it finds blocks of code, detects a language and highlights it accordingly.
Firediff is a Firefox/Firebug extension that allows you to track changes in the DOM and CSS. By logging these changes, you can gain information about how web applications work, and what elements (and what properties) are being altered by way of DOM manipulation.
RockStar Web Profiler36
RockStar Web Profiler (aka Razor) logs and profiles information about client-side performance. It provides developers with a console for analyzing the data gathered by the tool. Check out the RockStar Web Profiler presentation to get an overview of its many awesome features.
CodeRun Code Search
CodeRun’s Code Search tool lets you search and view user-submitted Ajax, PHP, and .NET source code. Once you’ve found a script or project that you’re interested in, you can edit it via their web-based IDE without having to download the project locally.
uploadify is a useful jQuery plugin for dealing with file uploads. It’s powered by a simple PHP script for handling the server-side stuff. Be sure to check out the uploadify demos48 to see the plugin in action.
Booklaylet is a JS library for letting you easily deploy your bookmarklet52 applications. The implementation is dead simple: take the Booklaylet source and modify it to point to your app’s URL.
JavaScipTools is a collection of useful JS components, functions, and classes with the aim of addressing some of the more common web developer tasks such as parsing and formatting of data types (i.e. date and time). It also comes with a dynamic table function for creating sortable HTML tables.
HTML 5’s Canvas element gives developers a way to draw stuff on web pages programmatically. Doodle.js is a utility library/framework for working with more complex and robust Canvas drawing processes. Check out Spiral Pattern54 demo and the Marbles in Space55 (3D simulation) demo in a browser that already supports Canvas to get a feel for how Doodle.js works.
Burst is a vector animation engine for HTML 5’s Canvas element. With it, you can create smooth, Flash-like animation effects for browsers that support Canvas.
JSTestDriver is a Java-based framework for creating unit test following Test-Driven Development58 philosophies and best practices. Be sure to check out this video demonstration of JSTestDriver in action59.
GlassBox is a beautiful and refreshing take on modal windows that creates an interesting feeling of transparency as if you were looking through a glass. Check out the example page63 to see different types of GlassBox implementations.
jQuery TOOLS is a toolbox that gives developers some of the most popular UI design patterns at their disposal in an easy-to-use manner. View some of the things you can do with jQuery TOOLS in the project’s demo page.
Unobtrusive Table Actions Script
This simple and lightweight library brings together a set of common and useful functions for dealing with HTML tables, such as zebra-striping rows, highlighting rows on mouse over, and column highlighting.
Ajax Frameworks Decision Center
Ajax Framework Analysis Results77
Create a Slick and Accessible Slideshow Using jQuery83
This is a step-by-step jQuery tutorial that I wrote for creating a simple and slick slideshow that can be adapted to display different content types. Check out the demo page84 to see the slideshow in action.
- 3 /2008/09/16/jquery-examples-and-best-practices/
- 4 http://ejohn.org/blog/fireunit/
- 5 http://www.softwareishard.com/blog/firebug/fireunit-testing-in-the-firebug-world/
- 6 http://ejohn.org/blog/fireunit/
- 7 http://sugartest.scriptia.net/
- 8 http://sugartest.scriptia.net/
- 9 http://jsclass.jcoglan.com/
- 10 http://jsclass.jcoglan.com/
- 11 http://jsonformatter.curiousconcept.com/
- 12 http://icant.co.uk/sandbox/fauxconsole/
- 13 http://jsbin.com/
- 14 http://jsbin.com/about#video
- 15 http://jsbin.com/
- 16 http://phpjs.org/
- 17 http://code.google.com/speed/page-speed/
- 18 http://developer.yahoo.com/yslow/
- 19 http://stevesouders.com/
- 20 http://code.google.com/speed/page-speed/
- 22 http://www.petefreitag.com/images/blog/jsdump.gif
- 24 http://www.spket.com/
- 26 http://www.spket.com/
- 28 https://addons.mozilla.org/en-US/firefox/addon/9505
- 30 http://softwaremaniacs.org/soft/highlight/en/
- 31 http://softwaremaniacs.org/soft/highlight/en/
- 34 http://www.incaseofstairs.com/firediff/
- 35 http://www.incaseofstairs.com/firediff/
- 36 http://rockstarapps.com/joomla-1.5.8/products/razor-web-profiler/overview.html
- 37 http://userjs.up.seesaa.net/js/bookmarklet.html
- 38 http://userjs.up.seesaa.net/js/bookmarklet.html
- 39 http://www.jscharts.com/home
- 40 http://code.google.com/p/jsspec/downloads/list
- 42 http://mochaui.com/
- 43 http://mochaui.com/demo/
- 44 http://mochaui.com/
- 45 https://wiki.mozilla.org/ServerJS
- 46 http://pear.php.net/
- 47 http://www.uploadify.com/
- 48 http://www.uploadify.com/demo/
- 49 http://www.gscottolson.com/blackbirdjs/
- 50 http://www.gscottolson.com/blackbirdjs/
- 51 http://www.digitalhymn.com/argilla/booklaylet/
- 52 http://en.wikipedia.org/wiki/Bookmarklet
- 54 #
- 55 #
- 56 http://digitalhymn.com/argilla/liteajax/
- 57 http://code.google.com/p/js-test-driver/
- 58 http://en.wikipedia.org/wiki/Test-driven_development
- 59 http://www.youtube.com/watch?v=V4wYrR6t5gE&eurl=http%3A%2F%2Fwww%2Egmodules%2Ecom%2Fgadgets%2Fifr%3Furl%3Dhttp%253A%252F%252Fgoogle%2Dcode%2Dproject%2Dhosting%2Dgadgets%2Egooglecode%2Ecom%252Fsvn%252Fbuild%252Fprod%252Fv&feature=player_embedded
- 60 http://code.google.com/p/jspdf/
- 61 http://jspdf.googlecode.com/svn/trunk/examples/basic.htm
- 62 http://www.glassbox-js.com/
- 63 http://www.glassbox-js.com/#examples
- 64 http://www.glassbox-js.com/
- 67 http://neofreeman.freepgs.com/Moousture/
- 68 http://cssglobe.com/lab/tablecloth/
- 69 http://cssglobe.com/lab/tablecloth/
- 70 http://livepipe.net/
- 71 http://livepipe.net/
- 72 http://digitalhymn.com/argilla/tipmage/
- 73 http://digitalhymn.com/argilla/tipmage/
- 74 http://qgallery.quadrifolia.de/
- 75 http://qgallery.quadrifolia.de/
- 76 http://jqueryvsmootools.com/
- 77 http://raibledesigns.com/rd/entry/ajax_framework_analysis_results
- 78 http://raibledesigns.com/rd/entry/ajax_framework_analysis_results
- 79 http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html
- 80 http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html
- 81 http://designm.ag/tutorials/jquery-display-switch/
- 82 http://designm.ag/tutorials/jquery-display-switch/
- 84 http://sixrevisions.com/demo/slideshow/final.html
- 86 http://ejohn.org/apps/learn/
- 87 http://ejohn.org/apps/learn/
Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.