Raphael: Amazing vector graphics Javascript Libraty

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.



Raphael Supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+ which is pretty awesome and allows you to do almost any graphic task you have in mind, just check the demos.
Raphael weighs about 110kb uncompressed, which is kind of an issue i think.

Get it here at the Raphael Homepage

Debugging Javascript in Web Applications: Major browser roundup

Most web applications that i know, are based on interpreted script languages (PHP, Ruby, Python) and some are compiled (.Net, Java). The complied languages often (if not always) come with a full environment, IDE and a debugger for the server side code, the interpreted languages aren't and the developer is more than ofter required to load the application and page in order to check for syntax error and use debug prints as the most basic tool of debugging.
Javascript is an exception, it's a de-facto web development script language, but it's rendering engine and debugging options vary from browser to browser.
I gathered up a list of common web debugging tools for Javascript. i will be happy to get some more ideas from everyone.
here we go:

The ultimate solution - Firebug addon
ok, i know what you might say: "it's a FIREFOX addon!, how can it be THE ultimate solution?".
Well, good news.
Along side the plain firefox addon, there's also a lite version that runs as a seperate javascript on Safari, Opera and yes, IE.
The Lite version is not as comprehensive as the addon, but it's more than a blessing when dealing with IE javascript bugs ("line:33, char:33 crap").

General

JSLINT.COM - Javascript verifier
Just paste your JS code and let this cute little tool and watch the Javascript errors flow back at you. important to add that it does not recognize frameworks conventions (the jQuery $ selector is considered as a Global definition, use JQuery instead) and will not identify browser specific issues, it's marely a javascript syntax checker.

BlackBird.js - Cross browser javascript logger
Blackbird offers a dead-simple way to log messages in JavaScript and an attractive console to view and filter them.

Internet Explorer - Evil, annoying, can't we just drop it?

DebugBar - Firebug's little brother
debugbar is a nice Firebug mockup for IE, simple but not as strong as Firebug. problems are that it's not free, and you'll have to install a whole lot of crap on your computer. too bad.
you can also checkout the Compainion.js free version of a javascript console for IE.

IE Developer Toolbar - HTML, CSS, no Javascript
Let's face it, the IE's so-called javascript engine just sucks, any attempt they'll do to fix it must start by simply re-fuckin-write it.
The IE Developer Toolbar is a poor attempt to find a solution for some of the problems facing a web developer when dealing with IE, but at least it's something.

Safari - When i am not working, that's the one.
*by saying Safari, i mean the MacOS one, not that fucked up Windows version, yak.

Safari came from Apple, so it's probably padded with thought, intention and considiration to any kind of end-user, as well as a developer.
The Safari developer tools are nice, from a very descriptive, good looking Console and Network stats, to a rendering engine that can mimic other browsers (although i am not sure how good it is.).
This "How to Debug Javascript in Safari" article contains all you'll need to know.

FireFox - by the developers, for the developers

I have to say it, but if you made it this far and you still havn't figured out how to debug Javascript in Firefox, you have a problem.
Debugging Javascript is all about the Addons engine. This huge gallery contains a lot of web development related addons and tools, just go there and pick what you want.
Two addons you'll have to pay attention to are the Web Developer toolbar addon, and Firebug we've mentioned before.

Beautiful Javascript Date Pickers

Source: Woork! - Beautiful Javascript Date Pickers
Great list of Date Picker plugins and scripts, for several Javascript frameworks.

Woork: 10 Javascript UI Libraries

Source: Woork!

Are you looking for any interesting and beautiful Web User Interface libraries for your next web site or Rich Internet Application ? Take a look at this list with ten WUI I suggest you to try in order to simplify your work and develope faster beautiful and usable user interfaces.

1. IT Mill Toolkit
IT Mill Toolkit is an open-source framework, providing widgets and tools for the development of Rich Internet Applications (RIAs). Deliver web applications without worrying about incompatibilities of web browsers, DOM or JavaScript by using standard Java tools.

2. LivePipe UI
LivePipe UI is a suite of high quality widgets and controls for web 2.0 applications built using the Prototype JavaScript Framework. Each control is well tested, highly extensible, fully documented and degrades gracefully for non JavaScript enabled browsers where possible

3. Iwebkit iPhone/iPod touch framework
Iwebkit is the revolutionnairy kit used to create high quality iPhone and iPod touch websites in a few minutes. In the first 4 months of it's existance the pack has greatly evolved from a basic idea to a project that has reached worldwide fame!

4. Jitsu
Jitsu contains an integrated set of tools to enable developers to build and deploy sophisticated user interfaces for web applications. These include an Xml markup language, page compiler, data binding engine, JavaScript runtime, control library, runtime inspector, animation engine, cross-platform library, Ajax, and back button support.

5. MochaUI
MochaUI is a web applications user interface library built on the Mootools JavaScript framework.Uses: web applications, web desktops, web sites, widgets, standalone windows and modal dialogs.

6. Echo Web Framework
Echo is an open-source framework for developing rich web applications. From the developer's perspective, Echo behaves as a user interface toolkit--like Swing or Eclipse SWT. AJAX technology is employed to deliver a user experience to web clients that approaches that of desktop-based applications.

7. The Yahoo! User Interface Library (YUI)
The YUI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. YUI is available under a BSD license and is free for all uses.

8. Sigma Ajax UI builder
Written in javascript and PHP, SigmaVisual is web based visual AJAX UI builder for professional developers. Developers save their time in building up prototype as well as real web applications. TreeBar, TreeGrid, Layout, Menu are supported.

9. WUI Web UI Framework
WUI (Web User Interface) is an MVC framework for writing web UIs in a single language: Java. Write web apps with components, widgets & events, not JSPs. Runs in any servlet 2.3 container. Similar to Model 2 / Struts, only better. Apache-style license.

10. Butterfly Web UI
Butterfly Web UI is a component oriented web framework for Java, like Wicket or Tapestry. The main advantage compared to these frameworks is that Butterfly Web UI integrates naturally with Butterfly DI Container, giving you a state-of-the-art dependency injection container to help you structure and decouple the internal components of your web applications.

ActiveRecord.js: a Relational js ActiveRecord implementation

 

ActiveRecord.js is the first released component of ActiveJS a JavaScript framework initiative sponsored by Aptana. This project is still in it's early stages and we welcome your thoughts and ideas on the future of JavaScript application development. Since this is a GitHub hosted project, if you would like to directly contribute we recommend you fork the project and initiate a pull request to merge your changes

The ActiveRecordjs Homepage

Noura Yehia: 45+ JQuery user interface plugins you must use

The web is different these days, i remember the days when anchoring (<a name="jumphere">) were considered as magic.
These days, following the overwhelming outburst of javascript frameworks, it's getting easier and simpler to generate extended, usable, fun and sexy interface.
This 45+ JQuery user interface plugins you must use list, is packed with some slick design and usability supplements that should be strongly condered when choosing a javascript framework and user interface guidelines for your application.

WireIt: Javascript wiring library

one thing i was always trying to figure out, is how to make lines in HTML/JS, after recently finding out about the Yahoo Pipes interface i came across this lightweight library that does the same thing, show objects are wired to each other.
There is an open source JavaScript library, which enables you to create this "wired interface", named WireIt.


WireIt is very well-documented & has some attractive examples.

David Walsh: The most preferred Javascript Framework

David Walsh, one of my favorite RSS destinations, posted a poll a while ago in order to get a quick look over the preferred javascript framework in use these days.
Well the winner is JQuery, but not in a too wide margin from MooTools at the back, at least not as i thought it would be.
I personally voted for JQuery at that time, but since i switch frameworks depanding on the project nesecities, i think my vote is divided equally by MooTools and JQuery. Dojo was well at the back with only 2 (!!) votes and a close to 0% of vote share, kind of a surprise to me, i was really impressed by Dojo and was considering using it, or at least benchin' it out a little bit.

An alternative to MochaUI: a JQuery based virtual desktop

I am personally using mochaUI is my current projects, and it was one of the main reasons a started working with MooTools at all, but this alternative to a web based desktop implementation is also something to pay attention too.
Although MochaUI is far more feature-packed, i think that this basic JQuery implementaion can be a good start for starting off a new web based desktop application (Add some plugins, and ding! ready).

NETTUTS: JQuery for beginners

http://nettuts.com/articles/web-roundups/jquery-for-absolute-beginners-video-series/
great great tutorial, although i am (currently) a MooTools fan, i think this is a very good guide collection for JQuery.

Moo.rd: lightweight Mootools extestion

Mootools is awesome, but it still lacks some of the features that JQuery has when dealing with effects and some other not-so-important stuff.
Moo.rd is an excellent extension which implements some more features back to mootools. features such as some extra effects (finally, a mootools shake effect!), windows, sliders and more.
recommended, get it here.

Javascript Frameworks: i am changing my mind

well, originally i chose JQuery, which seems too-awesome-to-ignore at the time, but a recent project made me decide to try Mootools once again, well, it's amazing.
MochaUI is an excellent UI library in Mootools, the simplicity is overwhelming and on top of it all the dynamic pseudo selectors as lately mentioned in David Walsh's blog... amazing.

  /* grab "checked" elements */
Selectors.Pseudo.checked = function() {
 return ('input' == this.get('tag') && ('radio' == this.get('type') || 'checkbox' == this.get('type')) && this.checked);
};

/* grab "selected" option elements */
Selectors.Pseudo.selected = function() {
 return ('option' == this.get('tag') && this.selected);
};

/* grab random elements */
/* credit:  http://blog.kassens.net/custom-pseudo-selectors */
Selectors.Pseudo.random = function(probability, local) {
 return Math.random() < (probability || .5).toFloat();
};

/* grab elements with no value */
Selectors.Pseudo.noValue = function() {
 return '' === this.value;
}

/* grab elements with a specific empty attribute */
Selectors.Pseudo.emptyAttribute = function(att) {
 return this.get(att) == '';
}

i think i might have some second thoughts about JQuery..

MochaUI: Javascript User interface library

MochaUI is a web applications user interface library built on the Mootools JavaScript framework.

Uses:

Web Applications
Web Desktops
Web Sites
Widgets
Standalone Windows and Modal Dialogs

Get it and watch demos here

Common RJS mistake/error on Ruby on Rails

When you use some of your ajax helpers, such as link_to_remote, with the :update parameter in order to update a specific DOM element AND you specify page.replace_html or any other RJS syntax that handles other DOM ID, it will return the result expected, nothing will be updated on the :update pointer DOM ID.

Simply choose one, if you use :update, return an html or render a partial in your action instead of rendering RJS.
If you require multiple changes, use RJS and no :update parameter.

Javascript logging, all hail to BlackBird

Everybody likes birds recently, Yahoo with their eagle, FireFly (it's not a bird, but close enough for me).
This particular bird offers a dead-simple way to log messages in
JavaScript and an attractive console to view and filter them. You
might never use alert() again as they declared.

BlackBird Home page is right here

IE Testing: Internet Explorer cannot open the Internet site. Operation aborted.

haaah... the joy of working with IE never ceases to amaze me. I was trying to test one of my pages on IE7 when this ruthless message arrived uninvited, needless to say that the immediate action that IE preforms is to redirect you to a 404 default page, discarding from you the option of viewing some Javascript errors and basically take care of the problem.

The Issue:
Internet Explorer 6 and 7 are getting really upset when you don't give them the chance to render the entire HTML, and preform a DOM related actions (appending/removing child elements for an instance).
This is mostly a response to a >script< tag containing a DOM changing javascript.

Solution:
If you are using JQuery like i am, use the document.ready function around your inline

Dynamically adding a text field, with autocomplete

We all love auto complete. It makes our lives a little less complicated and classy. I decided to (as a complimantry to my new JS beloved framework) to use the JQuery autocomplete plugin, problems began when I needed to use dynamically added text fields with autocomplete. Since the plugin assumes that you use a single and unique DOM ID, was unable to setup the autocomplete feature to newly dynamic fields.
One solution was to add the fields by javascript and Dom manipulation, but I prefered to use a partial in order to keep the code simple and Rubish. The other solution was to add a javascript script tag in the end of the partial which traverses the DOM and adds a unique and random id, and of course setting the auto complete feature for each one of them.
Bottom line, it is working and even working well, but I would like to hear new ideas if anyone has.
Over and out.

Rails Tip: Render, Better, JS Later

There are certain standards we got used too when creating rails views and layouts, which may cause a problem or some set backs to our applications.
We are all used to coding the JS includes way up in our document, moving the JS to the bottom of the page will render your page a little bit faster, and this is why.

When a browser reads a page, it goes through from the top to the bottom, So when we put the JS include's up, the browser will attempt to download them and hold the dom parsing until it finishes.

Finally Decided: JQuery, not Prototype

JQuery (for those of you just landed from Mars) is an unobtrusive javascript framework. read more at the JQuery home page.
jQuery supports Behavior driven development and is based on traversing HTML documents by CSS Selectors.
vs.
Prototype,
Prototype is also JavaScript library for Class driven development which makes life easier working with JavaScript. Prototype library has a good support in Ruby on Rails via helper functions and is basically well embedded in.

i decided to try to match both of these libraries (and dojo for the matter of fact, but the project was halted), and here are my conclusions.

• BDD
  
  
  JQuery is very similar to CSS by assigning the HTML element behaviour out-side the HTML, so it is generally more adequate for MVC.
  for ex:
  
$(element).click(function() {
alert("warning");
});

  simple.
  


• Chaining
  Chining methods is as simple as ruby. period
  


• CSS Selectors
  
  Since JQuery is based upon CSS, you can access any element by it's CSS path, and avoid these annoying pesky ID's you have to put using Prototype.
  

for some more comparisons, visit the Ajaxian article

Finally:
Jquery and prototype are both great. For me, i prefer JQuery since it's approach appeals to me more than Prototype's, Although prototype is kinda Rubish and has inbound support from Rails, JQuery is still cleaner to me.
Did someone said JQuery to Rails integration?