Javascript Guru

xBug is a JavaScript debugger that enables you to trace or step through your JavaScript code in real-time
It works with Chrome, Firefox 2/3, IE 6/7 & Safari 3.

Using xBug, you can:

• set breakpoints, and watchpoints in a separate code window
• see a trace log while your code is executing
• inspect variables
• get an indexed list of the functions/methods, and more…

P.S. It currently runs on the Windows platform.

Requirements: Windows platform
Compatibility: Chrome, Firefox 2/3, IE 6/7 & Safari 3
Website: http://www.xbug.co.uk/
Download: http://www.xbug.co.uk/download.htm

JavaScript, with the rise of Ajax, is definitely a must-know-well for every web designer/developer.
Besides form controls, alerts & similar simple JavaScript usage, you can almost do anything with the help of JavaScript (& Canvas). Some samples are:

• Drag’n drops
• Animations
• CSS manipulations, Ajax & more.

And there are JavaScript libraries which make them easier like jQuery, MooTools, Prototype, etc.
For any developer looking for advanced JS techniques, games are a real treasure.

You can easily see examples of animations, interactivity, smart solutions for browser related math functions & so.. And they are definitely a source of inspiration as you sometimes face with a feature that you never thought could be existed.
Also, this is the last month of a busy year & every web designer/developer deserves some fun : ).
So, here are 25 amazing (sometimes not the game itself but how beautifully it’s done) JavaScript games that you’ll love.

Bunny Hunt

A classic hunting game with an easy to play interface.
Make sure you check the source of the website to see how simply it is built with the power of XHTML, CSS & JavaScript.
JavaScript Library: none.

Travians

A character game (like Sims) where you’re a villager.
It is a multiplayer game & totally Ajaxed. You can move your character, communicate with other user & more.
JavaScript Library: xajax.

Digg Attack

This is certainly a Web 2.0 game. It is a JavaScript / Canvas 2D Shooter using live data via the Digg API to spawn enemies.
All the images are rendered with Canvas in real-time.
JavaScript Library: none.
Read the rest of this entry »

Pixastic is an open source JavaScript image processing library.
It uses HTML5 Canvas element that enables accessing to raw pixel data.

Supported effects are:

• desaturation/greyscale
• invert
• flipping
• brightness/contrast adjustment
• hue/saturation
• emboss
• blur & more

There is an image editor built with it & the library is well-documented.

Requirements: No Requirements
Compatibility: All Major Browsers (IE requires ExCanvas)
Website: http://www.pixastic.com/
Download: http://www.pixastic.com/lib/download/

Niceforms, a script to beautify web forms, was very popular for creating beautiful forms. And now the 2nd version is out.
Niceforms 2.0 is a totally re-written version which is very easy to apply, handles more elements & has more customization options.

How to use it?

The script simply replaces the most commonly used form elements with custom designed ones.
Inserting the niceforms.js & the CSS file is enough to use it.
Besides the default theme, new themes can be developed with CSS editing.
Niceforms works in all modern browsers except IE6 (it gracefully degrades).

Requirements: No Requirements
Compatibility: All Major Browsers (except IE 6)
Website: http://www.emblematiq.com/projects/niceforms/
Demo: http://www.emblematiq.com/niceforms/v20/niceforms.html

This is an easy to implement multi-level drop-down menu.
It is lightweight (1.2kb) & supports multiple instances on one page.


Rather than complicated JavaScript backends, this script converts an unordered list into a menu.
Sub-menus are displayed with an easing animation & it supports all major browsers.

Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://www.leigeber.com/2008/11/drop-down-menu/
Demo: http://sandbox.leigeber.com/dropdown-menu/index.html