You might find the following three Linux / Unix shell scripts helpful.

• Display processes based on either %CPU or Memory Usage.
• Display which user is utilizing the CPU the most.
• Display system’s memory information – total, used and free.

1. List Processes based on %CPU and Memory Usage

This script list the processes based on %CPU and Memory usage, with out argument (by default), If you specify the argument (cpu or mem), it lists the processes based on CPU usage or memory usage.

$ cat processes.sh
#! /bin/bash
#List processes based on %cpu and memory usage

echo "Start Time" `date`
# By default, it display the list of processes based on the cpu and memory usage #
if [ $# -eq 0 ]
then

	echo "List of processes based on the %cpu Usage"
	ps -e -o pcpu,cpu,nice,state,cputime,args --sort pcpu  # sorted based on %cpu
	echo "List of processes based on the memory Usage"
	ps -e -orss=,args= | sort -b -k1,1n # sorted bases rss value

# If arguements are given (mem/cpu)
else
	case "$1" in
	mem)
	 echo "List of processes based on the memory Usage"
 	 ps -e -orss=,args= | sort -b -k1,1n
	 ;;
 	cpu)
	 echo "List of processes based on the %cpu Usage"
	 ps -e -o pcpu,cpu,nice,state,cputime,args --sort pcpu
	 ;;
 	*)
		echo "Invalid Argument Given n"
		echo "Usage : $0 mem/cpu"
		exit 1
 	esac	

fi
echo "End Time" `date`
exit 0

You can execute the above script as shown below.

$ processes.sh

$ processes.sh mem

$ processes.sh cpu

2. Display Logged in users and who is using high CPU percentage

This script displays few information about the currently logged in users and what they are doing.

$ cat loggedin.sh
#! /bin/bash

w > /tmp/a

echo "Total number of unique users logged in currently"
cat /tmp/a|  sed '1,2d' | awk '{print $1}' | uniq | wc -l
echo ""

echo "List of unique users logged in currently"
cat /tmp/a | sed '1,2d'|  awk '{print $1}' | uniq
echo ""

echo "The user who is using high %cpu"
cat /tmp/a | sed '1,2d' | awk   '$7 > maxuid { maxuid=$7; maxline=$0 }; END { print maxuid, maxline }' 

echo ""
echo "List of users logged in and what they are doing"
cat /tmp/a

$ ./loggedin.sh
Total number of unique users logged in currently
4

List of unique users logged in currently
john
david
raj
reshma

The user who is using high %cpu
0.99s reshma   pts/5    192.168.2.1  15:26    3:01   1.02s  0.99s custom-download.sh

List of users logged in and what they are doing
 15:53:55 up 230 days,  2:38,  7 users,  load average: 0.19, 0.26, 0.24
USER     TTY      FROM              LOGIN@   IDLE   JCPU   PCPU WHAT
john     pts/1    192.168.2.9   14:25    1:28m  0.03s  0.03s -bash
john     pts/2    192.168.2.9   14:41    1:11m  0.03s  0.03s -bash
raj      pts/0    192.168.2.6   15:07    9:08   0.11s  0.02s -bash
raj      pts/3    192.168.2.6   15:19    29:29  0.02s  0.02s -bash
john     pts/4    192.168.2.91  15:25    13:47  0.22s  0.20s vim error_log
reshma   pts/5    192.168.2.1   15:26    3:01   1.02s  0.99s custom-download.sh

3. Display Total, Used and Free Memory

The following script displays the total, used and free memory space.

$ cat mem.sh
#! /bin/bash

# Total memory space details

echo "Memory Space Details"
free -t -m | grep "Total" | awk '{ print "Total Memory space : "$2 " MB";
print "Used Memory Space : "$3" MB";
print "Free Memory : "$4" MB";
}'

echo "Swap memory Details"
free -t -m | grep "Swap" | awk '{ print "Total Swap space : "$2 " MB";
print "Used Swap Space : "$3" MB";
print "Free Swap : "$4" MB";
}'

$ ./mem.sh
Memory Space Details
Total Memory space : 4364 MB
Used Memory Space : 451 MB
Free Memory : 3912 MB
Swap memory Details
Total Swap space : 2421 MB
Used Swap Space : 0 MB
Free Swap : 2421 MB

If you enjoyed this article, you might also like..

Go here to see the original:
3 Unix Shell Scripts – User Activity, View Processes, Display Memory

$ cat thegeekstuff.txt
        * virtualization technologies
        * sed and awk tips/tricks
        * emacs tutorials
        * bash scripting tutorial series

$ emacs -nw thegeekstuff.txt
        * virtualization technologies
        * sed and awk tips/tricks
        * emacs tutorials
        * bash scripting tutorial series

        * Virtualization technologies
        * Sed and awk tips/tricks
        * Emacs tutorials
        * Bash scripting tutorial series

Read this article:
Emacs Macro Tutorial: How to Record and Play

function GetCpuLoad($Check=false, $NoComment=false)
{
    if (!PHP_OS) return ($Check)?-1:0;
    if (strtoupper(substr(PHP_OS, 0, 3)) === 'WIN') {
        global $Settings;
        if (!$Settings || !trim(ValidVar($Settings['All']->CPU_AVG_PATH))) return ($Check)?-1:0;
        $Data=@exec("\"".$Settings['All']->CPU_AVG_PATH."\"");
    }
    else $Data = @exec("uptime");
    if (!$Data) return ($Check)?-1:0;
    if (!$NoComment&&!$Check) echo $Data."\n";
    $Arr=array();
    @preg_match_all("/\d+[,\.]\d+/",$Data,$Arr);
    if (!isset($Arr[0][0])) return ($Check)?-1:0;
    $Data=$Arr[0][0];
    $Data=str_replace(",",".",$Data);
    return trim($Data);
}

How to work:

echo "CPU:",GetCpuLoad(true),"\n";
echo "CPU:",GetCpuLoad(true,true),"\n";
echo "CPU:",GetCpuLoad(),"\n";

Result:

CPU:0.08
CPU:0.08
CPU: 16:02:42 up 13 days,  6:35,  2 users,  load average: 0.08, 0.15, 0.11

In this article, we’ll discuss how to seduce your visitors with
a little JavaScript action. In our examples, we’ll be using jQuery,
a fast and concise JavaScript library that simplifies HTML document
traversing, event handling, animation and Ajax interactions for
rapid Web development. Ready? Let’s get things rolling!

[Offtopic: by the way, did you know that there is a Smashing
eBook Series? Book #1 is
Professional Web Design, 242 pages for just $9,90.]

Ajax Image Uploader

Image uploads will be much better after your read this.
Guaranteed. By using a bit of jQuery, we can upload images with
previews.

How do you upload images now? You select a file and click
upload. Simple, right? Except that once you select your image, you
can no longer see what was selected. The name of the file is at the
end of the input field, and if the input field is short or the file
path is deep, you won’t see anything useful. You’ll forget what you
selected and have no idea what you’re about to upload.

Now try this variation on uploading an image. We ditch the
“Upload” button in favor of a “Save” button and fire the Ajax
upload event as soon as a file is selected. The image is processed
server-side, and a thumbnail is loaded onto the existing page.
Doesn’t that feel so much better? We now have a visual
representation (imagine that!) of the image we selected.

This is particularly useful in larger forms where many fields
will be submitted in a single action. It allows the user to review
the form before pressing “Save” and see what image (or images) they
selected.

How does it work? Here’s the code. You’l need
jQuery and the Ajax Upload
jQuery plug-in. Link them up, and make sure jQuery is loaded
first.

 <script src="/js/jquery.min.js" type="text/javascript"></script> <script src="/js/ajaxupload.js" type="text/javascript"></script>

Here is the JavaScript we will use in its entirety.

 $(document).ready(function(){      var thumb = $('img#thumb');             new AjaxUpload('imageUpload', {                 action: $('form#newHotnessForm').attr('action'),                name: 'image',          onSubmit: function(file, extension) {                   $('div.preview').addClass('loading');           },              onComplete: function(file, response) {                  thumb.load(function(){                          $('div.preview').removeClass('loading');                                thumb.unbind();                         });                     thumb.attr('src', response);            }       }); });

Let’s break the code down now and look at what’s really going
on. First, we attach the AjaxUpload behavior to our
file form element.

        new AjaxUpload('imageUpload', {

Next, we specify where to post the Ajax upload. We want to keep
all of our URLs in our HTML document, so we pass this URL using the
action attribute of our form element.

         action: $('form#newHotnessForm').attr('action'),

Set the name of the file form element that will be
posted to your server.

     name: 'image',

Add a class to your preview div to
indicate that the image is uploading. In our case, we are applying
a background image to the preview div. We also need to
set the image tag to display: none; in the preview
div, so that the loading background image is visible,
as well as for a more subtle reason explained below.

 onSubmit: function(file, extension) {      $('div.preview').addClass('loading'); },

When the image has been uploaded, we have to do two things:

• First, we have to set the src attribute of our
  preview img tag to the new thumb.
• Secondly, we have to remove the loading class. If we simply
  execute these things in that order, then we would see an annoying
  flicker of the old image when the loading class has been removed
  but the new image has not yet loaded.

We avoid the annoying flicker of the old image by waiting to
remove the loading class until after the preview image’s
load event fires. We also unbind our
listener after it has fired because we want to capture this event
only once.

 onComplete: function(file, response) {        thumb.load(function(){          $('div.preview').removeClass('loading');                thumb.unbind();         });

Lastly, we set the source of the preview image to the thumbnail
that our server has just created. In this example, the response
from the Ajax call is just the thumbnail’s URL as text. You could
return it in whatever fancy format you like.

    thumb.attr('src', response); }

If JavaScript-support is disabled in user’s browsers, they will
get the good old submit form without the interactive preview. Clean
and functional solution, with rich interactions for users with more
capable browsers.

Better Image
Uploads

Want to try out and implement the image uploader yourself? Check
out a live demo, the example code and more for this improved way to
support image uploads on your website.

Check out
the live demo »

Validation With jQuery Text-Change Event

Here’s a pretty common problem: you have a text
form to validate client-side. Doing this is easy enough when the
form is submitted, but in some cases doing it as the user is typing
is best. For example, imagine how annoying Twitter would be if you had to submit your
tweet before you were told how many characters it was.

Keep in mind, though, that this kind of immediate validation can
be overused or abused. Don’t insult the user by congratulating them
for every piece of text they enter in a field.

Implementing this requires that you bind events to the
keyup event — and a couple other events if you want to
detect text changes on cut-and-paste events. Even if you’re a
JavaScript god, having to keep writing this logic over and over
again is tedious. We created a text-change event plug-in to help
you handle all text-change events.

Detecting the Text (Better Than Twitter)

We begin by detecting text in the standard
textarea. Look at the shot below: looks like a
standard textarea with a disabled “Save” button.

If you add text to the field, then the “Save” button enables and
then disables when no text is in the field. Moderately impressive,
right?

Now, what if you try copying, pasting or cutting text with the
shortcut keys? That works as well. What about right-clicking or
using the “Edit” menu? Works, too. (By the way, Twitter doesn’t
support the click or menu interactions.)

The code behind this is pretty simple. You’ll need to download
and link up the textchange
plug-in.

 <script src="/javascripts/plugins/jquery.textchange.js"></script>

The plug-in adds the hastext and
notext events, to which you can bind
input and textarea elements.

 $('#exhibita').bind('hastext', function () {   $('#exhibitaButton').removeClass('disabled').attr('disabled', false); }); $('#exhibita').bind('notext', function () {   $('#exhibitaButton').addClass('disabled').attr('disabled', true); });

The hastext event fires when the element goes from
having no text to having text, and the notext event
fires when the element goes from having text to being blank.
Looking for more advanced validation? Keep reading.

Detecting Text Change

What about detecting text change in the field?

This is very easy, too. A third textchange event
fires whenever the text changes, and it provides you with the
previous value.

 $('#exhibitb').bind('textchange', function (event, previousText) {   $('#output').append(' Text changed from <strong>' +     previousText + '</strong> to <strong>' + $(this).val() +     '</strong> </p>'); });

Twitter-Style Validation

We can implement some simple Twitter-like validation with just a
single line and our textchange event.

 $('#twitter').bind('textchange', function (event, previousText) {   $('#charactersLeft').html( 140 - parseInt($(this).val().length) ); });

Ajax Save

With a little more code and setTimeout, we can hook
up an Ajax call to save a few seconds once the user stops editing.
The Ajax call is just stubbed out here, but you get the idea.

 var timeout; $('#ajaxSave').bind('textchange', function () {   clearTimeout(timeout);   $('#ajaxFired').html('Typing...');     var self = this;     timeout = setTimeout(function () {     $('#ajaxFired').html('Saved: ' + $(self).val());   }, 1000); });

Validate Text

This may sound contrived, but say you would like to ensure that
the two words “companion
cube” are in the emergency intelligence incinerator (i.e. the
text field) before allowing the user to continue. No problem:

 $('#emergencyIntelligenceIncinerator').bind('textchange', function () {   if ($(this).val().indexOf('companion cube') !== -1) {     $('#continue').removeClass('disabled').attr('disabled', false);   } });

jQuery Text-Change event can be very useful for web applications
that are aiming for a high level of interactivity and visual
feedback. You may even want to analyze some of the input and
provide helpful clues. For instance, if the user is opening a new
ticket in your support area, you may want to present links to
possibly related answers in the support forum. Be sure not to
analyze every keystroke, though, as it could result in a
significant overhead for the back-end. And it is also important to
keep in mind that the immediacy of the application should be subtle
and should not interrupt user’s interaction.

Text
Change Events

Don’t fret about complicated validation, text events and edge
cases. Check out the live demo and download the plug-in, which
makes it a snap to perform a number of functions on text boxes to
look for values, changes and more.

Check
out the live demo »

JavaScript Annotation Plug-In

An application that we recently developed (Notable) allows users to collect
user feedback through interactive tools. Most of these tools
require the user to annotate an image. We figured that many folks
are trying to solve the same problem, so why not create a plug-in
that they can use? This is the result. Our plug-in uses jQuery and
makes it very simple to add and save image annotations.

To start off, download the JS
Annotation Plug-In. To use the plug-in, just link up jQuery
(1.2.3 or higher) and our plug-in.

 <script src="/javascripts/plugins/jquery.js"></script> <script src="/javascripts/plugins/jquery.annotate.js"></script>

Meet Nutmeg the Dog. After clicking on a random spot on Nutmeg,
you’ll see the black circle appear.

 function blackNote() {   return $(document.createElement('span')).addClass('black circle note') } $('#nutmeg').annotatableImage(blackNote);

Here’s how it works: The first parameter to
annotatableImage is a function that is implemented by
you and that defines the element to be added when you click. In the
example above, that function is called blackNote.
Simple, right?

How to Save the Annotations?

Glad you asked. Use the jQuery selector to grab all the elements
that you want to serialize, and call the
serializeAnnotations function.

 $('#nutmeg span.note').serializeAnnotations();

These values are returned in an array of objects, so you can
easily save them with an Ajax call. The response_time
variable is the time in milliseconds that the user took to add the
annotation after you made the call to
annotatableImage.

Let’s Get Relative

In our website feedback tool we needed to show our annotations
in different-sized versions of our original image. The full size is
just won’t always cut it in the world of good design. To make this
easier, we store the x and y positions of our annotations relative
to the width and height of the image.

If you didn’t pass fifth-grade math, don’t worry: our plug-in
does all the basic arithmetic for you. Warning: if you change the
aspect ratio or crop the image, this will not work properly. Also,
be sure to always store x and y as floating-point data types.

 $('#smallNutmeg').addAnnotations(blackNote, annotations);

The annotations variable is an array of objects with x and y
attributes. It looks exactly like the array returned by the
serializeAnnotations function without the
response_time attribute. What other attributes might
you put in the annotation object? Read on…

Passing Attributes

We may want to pass some data to each of our annotations when
adding existing annotations. Maybe we have numbered our
annotations, or have added special classes or behaviors,
whatever.

The function we pass to annotatableImage accepts a
single parameter, which is the annotation object from the array
that you passed to addAnnotations. In this example, we
added a position attribute, which we will display.

 $('#numberedNutmeg').addAnnotations(function(annotation){   return $(document.createElement('span')).     addClass('black circle note').html(annotation.position); },[     {x: 0.3875, y: 0.3246, position: 4},     {x: 0.57, y: 0.329, position: 2}   ] );

Hitting All the Positions

When we were annotating Nutmeg, you may have noticed that the
annotation was centered at your click position. This may be great
for circles and sparkly unicorns, but sometimes we may want to
position our annotations differently.

The xPosition and yPosition options
allow you to indicate where the annotation is positioned relative
to the click. Options are middle (default), left, right and middle
(default), top, bottom, respectively.

 $('#labeledNutmeg').annotatableImage(function(annotation){   return $(document.createElement('span')).addClass('set-label'); }, {xPosition: 'left'});

Give Nutmeg some clicks on our demo page to see what we’re
talking about. In this example, we are positioning the click on the
left side of the annotation.

Warning: make sure to pass the xPosition and
yPosition to the serializeAnnotations
function if you set these options in annotatableImage.
The default behavior is to calculate the x and y values from the
middle of the annotation.

JavaScript
Annotations Plug-In

Start supporting powerful, easily implemented annotations on
your website or app with this plug-in. Adding notes, descriptions
and more to these annotations is simple.

Check
out the live demo »

Bonus: CSS Grid Builder

In our design process, we have been using a flexible grid
framework that lets us rapidly prototype and implement websites.
Recently, we’ve created some variant grids for different widths and
gutter sizes, so we thought, why not just create grids on the fly
with a simple tool?

Please feel free to use the ZURB CSS Grid
Builder to build and generate source code for a simple,
flexible grid framework for variable grid sizes and column numbers.
Play around with it — we prefer it to a more full-featured solution
such as YUI because it’s lighter and a little more flexible.

CSS Grid
Builder

Check out the CSS Grid Builder in the playground. You can
preview the grid in different-sized browser windows and output a
complete CSS framework.

Check
out the grid builder »

(al)

Looping statements are used to force a program to repeatedly execute a statement. The executed statement is called the loop body.

Loops execute until the value of a controlling expression is 0. The controlling expression may be any scalar data type.

The shell language also provide several iteration or looping statements. In this article let us review the looping statements which bash provides using some examples.

Bash supports following three types of looping statement

1. For loop
2. While loop
3. Until loop

This article is part of the on-going Bash Tutorial series.

Loops can be nested. Like any other programming language, bash also supports break statement to exit the current loop, and continue statement to resume the next iteration of the loop statement.

Bash For Loop – First Method

For loops are typically used when the number of iterations is known before entering the bash loop. Bash supports two kinds of for loop. The first form of bash for loop is:

for varname in list
	do
		commands ##Body of the loop
	done

In the above syntax:

• for, in, do and done are keywords
• List is any list which has list of items
• varname is any Bash variable name.

In this form, the for statement executes the command enclosed in a body, once for each item in the list. The current item from the list will be stored in a variable “varname” each time through the loop. This varname can be processed in the body of the loop. This list can be a variable that contains several words separated by spaces. If list is missing in the for statement, then it takes the positional parameter that were passed into the shell.

Bash For Loop Example 1. Unzip all the Zip file

The following example finds the list of files which matches with “*.zip*” in the root directory, and creates a new directory in the same location where the zip file exists, and unzip the zip file content.

# cat zip_unzip.sh
#! /bin/bash
# Find files which has .zip
for file in `find /root -name "*.zip*" -type f`
do

# Skip the extension .zip
dirname=`echo ${file} | awk -F'.' '{print $1}'`

# Create the directory
mkdir $dirname

# Copy the zip file
cp ${file} ${dirname}
cd $dirname

# Unzip the zip file from newly created directory
unzip ${dirname}/$(echo ${file##/*/})
done

• In this example find command returns the list of files, from which each file will be processed through a loop.
• For each item, it creates the directory with the name of the zip file, and copies the zip file to the newly created directory and unzip the zip file from there.
• The echo statement, echo ${file##/*/} gives you only the file name not the path.

# ./zip_unzip.sh
Archive:  /root/test2/test2.zip
 extracting: t1/p
 extracting: t1/q
 extracting: t1/r
 extracting: t1/s
 extracting: t1/t
 extracting: t1/u
 extracting: t1/v
Archive:  /root/test1/test1.zip
 extracting: t/a
 extracting: t/b
 extracting: t/c
 extracting: t/d
 extracting: t/e

Similar to the Bash loop, Awk also provides for loop and while loop as we discussed in our Awk While and For Loop article.

Bash For Loop – Second Method

The second form of for loop is similar to the for loop in ‘C’ programming language, which has three expression (initialization, condition and updation).

for (( expr1; expr2; expr3 ))
         do
		commands
         done

• In the above bash for command syntax, before the first iteration, expr1 is evaluated. This is usually used to initialize variables for the loop.
• All the statements between do and done is executed repeatedly until the value of expr2 is TRUE.
• After each iteration of the loop, expr3 is evaluated. This is usually use to increment a loop counter.

The following example generates the n number of random numbers.

Bash For Example 2. Generate n random numbers

$ cat random.sh
#! /bin/bash

echo -e "How many random numbers you want to generate"
read max

for (( start = 1; start <= $max; start++ ))
do
        echo -e $RANDOM
done

$ ./random.sh
How many random numbers you want to generate
5
6119
27200
1998
12097
9181

In the above code snippet, the for loop generates the random number at max number of times. RANDOM is an internal bash function that returns a random integer at each invocation.

Bash While Loop

Another iteration statement offered by the shell programming language is the while statement.

Syntax:
while expression
do
	commands
done

In the above while loop syntax:

• while, do, done are keywords
• Expression is any expression which returns a scalar value
• While statement causes a block of code to be executed while a provided conditional expression is true.

Bash While Example 3. Write contents into a file

The following example reads the data from the stdout and writes into a file.

$ cat writefile.sh
#! /bin/bash

echo -e "Enter absolute path of the file name you want to create"
read file
while read line
do
echo $line >> $file
done

$ sh writefile.sh
Enter absolute path of the file name you want to create
/tmp/a
while
for
until

$ cat /tmp/a
while
for
until

The above example, reads the filename from the user, and reads the lines of data from stdin and appends each line to a given filename. When EOF enters, read will fail, so the loop ends there.

If you are writing lot of bash scripts, you can use Vim editor as a Bash IDE using the Vim bash-support plugin as we discussed earlier.

Bash While Example 4. Read the contents of a file

In the previous example, it reads the data from stdout and write it into a file. In this example, it reads the file
content and write it into a stdout.

$ cat read.sh
#! /bin/bash
echo -e "Enter absolute path of the file name you want to read"
read file
exec <$file # redirects stdin to a file
while read line
do
echo $line
done

$ ./read.sh

Enter absolute path of the file name you want to read
/tmp/a
while
for
until

In this example, it gets the filename to read, and using exec it redirects stdin to a file. From that point on, all stdin comes from that file, rather than from keyboard. read command reads the line from stdin, so while loop reads the stdin, till EOF occurs.

Bash Until Loop

The until statement is very similar in syntax and function to the while statement. The only real difference between the two is that the until statement executes its code block while its conditional expression is false, and the while statement executes its code block while its conditional expression is true.

syntax:

until expression
	do
	   commands #body of the loop
	done

In the above bash until syntax:
where until, do, done are keywords
expression any conditional expression

Bash Until Example 5. Monitor the logfile

This example monitors the size of the logfile, once the logfile size reaches 2000bytes, it takes the copy of that logfile.

$ cat monitor.sh

file=/tmp/logfile
until [ $(ls -l $file | awk '{print $5}') -gt 2000 ]
        do
            echo "Sleeping for next 5 seconds"
            sleep 5
        done
date=`date +%s`
cp $file "$file-"$date.bak

$ ./monitor.sh
Sleeping for next 5 seconds
Sleeping for next 5 seconds

$ ls -l /tmp/logfile*
-rw-r--r-- 1 sss sss      2010 Jun 24 12:29 logfile
-rw-r--r-- 1 sss sss      2005 Jun 24 16:09 logfile-1277474574.bak

The until statement continues to execute the body of the loop, till the condition becomes true. In this example condition is size of the file greater than 2000 bytes, so it copies the file once it reaches the 2000 bytes.

Also, make sure to refer to our earlier Bash Array examples.

Bash Until Example 6. Waiting for the Machine to come up

This example is used to wait till the machine comes up before doing a ssh to that machine. The until loop statement ends only when the ping gives the responses.

$ cat mac_wait.sh
#! /bin/bash

read -p "Enter IP Address:" ipadd
echo $ipadd
until ping -c 1 $ipadd
do
        sleep 60;
done
ssh $ipadd

$./mac_wait.sh
Enter IP Address:192.143.2.10
PING 192.143.2.10 (192.143.2.10) 56(84) bytes of data.

--- 192.143.2.10 ping statistics ---
1 packets transmitted, 0 received, 100% packet loss, time 0ms

PING 192.143.2.10 (192.143.2.10) 56(84) bytes of data.
64 bytes from 192.143.2.10: icmp_seq=1 ttl=64 time=0.059 ms

--- 192.143.2.10 ping statistics ---
1 packets transmitted, 1 received, 0% packet loss, time 0ms
rtt min/avg/max/mdev = 0.059/0.059/0.059/0.000 ms
The authenticity of host '192.143.2.10 (192.143.2.10)' can't be established.
Are you sure you want to continue connecting (yes/no)? yes

Until loop is quite useful at the command line, as a way of waiting for certain events to occur.

If you enjoyed this article, you might also like..

Read more here:
Keeping You in the Loop – Bash For, While, Until Loop Examples

為了讓大家不用再連到MSDN上，我直接全文轉過來，會轉這篇的主要原因是這些詞很常被用到，但 跟別人討論時往往需解釋一段時間，有空的時候再針對每個用語加些圖示說明吧。

另外再提供.net framework字彙：http://msdn.microsoft.com/zh-tw/library/6c701b8w(VS.80).aspx

The last section also covers a number of useful educational
resources such as a compilation of useful JavaScript coding
practices, a detailed comparison of JavaScript frameworks and
general JavaScript programming conventions. We are looking forward
to your feedback.

You may be interested in the following related posts:

• 
  50 Fresh JavaScript Tools That Will Improve Your Workflow
• 
  45 Powerful CSS/JavaScript-Techniques
• 
  70 Useful AJAX And JavaScript Techniques

[Offtopic: by the way, did you know that Smashing Magazine has
one of the most influential and popular Twitter accounts? Join our
discussions and get updates about useful tools and resources —

follow us on Twitter!]

Calendars and Timelines

jDigiClock – Digital Clock (HTC Hero inspired)
jDigiClock is a jQuery plugin inspired from HTC Hero Clock
Widget.

jQuery
Sliding Clock v1.1
jQuery transpearant Slider clock with CSS sprites.

Date /
Time Picker
Note that this control is not designed to work in IE6; although it
will function correctly in most cases, the positioning of the
calendar may be way off depending on how your page is styled.

JavaScript Debugging and Validation Tools

Venkman
JavaScript Debugger project page
Venkman is the code name for Mozilla’s JavaScript Debugger. Venkman
aims to provide a powerful JavaScript debugging environment for
Gecko-based browsers namely Firefox 3.x, the Netscape 7.x series of
browsers, Netscape 9.x series, Mozilla Seamonkey 1.x and Mozilla
Seamonkey 2.x. It does not include Gecko-based browsers such as
K-Meleon 1.x, Galeon 2.x and Netscape 8.x. The debugger is
available as an add-on package in XPI format. Venkman JavaScript
Debugger has been provided as part of the Mozilla install
distribution since October 3rd 2001.

CompanionJS

Companion.JS (pronounced Companion dot JS or CJS) is a Javascript
debugger for IE.

How to Test your JavaScript Code with QUnit
QUnit is a powerful JavaScript unit testing framework that helps
you to debug code. It’s written by members of the jQuery team, and
is the official test suite for jQuery. But QUnit is general enough
to test any regular JavaScript code, and it’s even able to test
server-side JavaScript via some JavaScript engine like Rhino or
V8.

JS Bin – Collaborative JavaScript
Debugging
JS Bin is an open source collaborative JavaScript debugging
tool.

Forms, Buttons & Navigation

Making a Google Wave History Slider
Here is shown how to create a Google Wave-like history slider.
Using it will enable visitors to go back and forth in time to view
the changes that take place on a comment thread.

Fancy
Radio Buttons With jQuery
Creation of 2 mandatory option sets that a user could choose, while
hiding off the radio button inputs and using an anchor links to
make it a bit more usable.

Creative Button Animations with Sprites and JQuery
Fading hover effect for which the transition is smoothed with
JavaScript, using jQuery library.

Password
(un)Masking
JavaScript jQuery that toggles the masking and unmasking of the
password field.

jQuery
MagicLine Navigation
These “sliding” style navigation bars have been around a while, and
turns out it’s really pretty darn easy. Here are put two examples
together.

Fixed Fade Out Menu: A CSS and jQuery Tutorial
The aim is to have a fixed navigation that follows the user when he
scrolls, and only subtly showing itself by fading out and becoming
almost transparent. When the user hovers over it, the menu then
becomes opaque again. Inside of the navigation we will have some
links, a search input and a top and bottom button that let the user
navigate to the top or the bottom of the page.

jQuery plugin: Simplest Twitter-like dynamic character count for
textareas and input fields
The best way to explain what this plugin does is to mention
Twitter. Twitter posts are limited to 140 characters. While typing
the Twitter post there is this always present information about how
many characters the users have before reaching the limit. The
information is not only provided merely by displaying a number,
there are different colors applied to certain stages to notify the
user about the status.

Sliding Labels
v2
Form label keeping the label inline, but sliding it off to the left
rather than going away on click.

Ketchup
Plugin
Ketchup is a slim jQuery Plugin that validates your forms. It aims
to be very flexible and extendable for its appearance and
functionality.

Layout tools

jQuery
{css}designerGrid Plugin
{css} designerGrid is A jQuery Plugin developed for website
interface developers who use the grid system of layout. {css}
designerGrid is intended to assist these developers with CSS
prototyping.

css-template-layout

JavaScript (jQuery) implementation of the CSS Template Layout
Module

How to
create a fluid grid with jQuery
Grid-based layout is probably the more preferred way to style up a
webpage to give it more magazine-like look and feel. This tutorial
is about how to use CSS and Javascript to create a fluid grid-based
layout (See demo here). The algorithm/procedure used in this
tutorial is very simple and straightforward. There are more
advanced algorithms out there which can handle multiple scenarios.
But the purpose is to understand the basic logic on how to create
such layout. So here it goes…

closure-templates

Closure Templates are a client- and server-side templating system
that helps you dynamically build reusable HTML and UI elements.
They are easy to learn and customizable to fit your application’s
needs. Closure Templates support JavaScript and Java and use a data
model and expression syntax that works for either language. You can
also use the built-in message support to easily localize your
applications.

Useful jQuery Plugins

TipTip
jQuery Plugin
TipTip detects the edges of the browser window and will make sure
the tooltip stays within the current window size. As a result the
tooltip will adjust itself to be displayed above, below, to the
left or to the right of the element with TipTip applied to it,
depending on what is necessary to stay within the browser window.
TipTip is a very lightweight and intelligent custom tooltip jQuery
plugin. It uses ZERO images and is completely customizable via CSS.
It’s also only 3.5kb minified!

jQuery
Roundabout
Roundabout is a jQuery plugin that converts a structure of static
HTML elements into a highly customizable turntable-like interactive
area. (And now, not just turntables, but many shapes!)

jParse – jQuery XML Parse
Plugin
jParse is a jQuery plugin that allows you to parse XML that was
fetched with the jQuery .ajax method (making it fully
customizable).

jQuery Quicksand
plugin
Reorder and filter items with a nice shuffling animation.

typeQuery, change website typography with jquery
typeQuery gives the flexibility to change the font-family for
everything you define with class, id, or tag, this example is
referring to the selected item on a select object with id=”tag” and
the font-family value at select object with id=”family”:
$($("#tag").val()).css("font-family",
$("#family").val());

Flip! A jQuery plugin
v0.9.9
Flip is a jQuery plugin that will flip easily your elements in four
directions.

Data Encryption With JavaScript: jCryption
jCryption is a jQuery plugin for encrypting POST/GET data submitted
by forms. It uses public-key algorithm of RSA for the encryption
& has a PHP file for handling the decryption of data.

Minimalist
jQuery: 11 useful plugins under 4K
jQuery makes our lives easier. So much so that it’s tempting to use
it all the time, inadvertently slowing our page load times (cue
YSlow and Hammerhead). Combining,
compressing, and delivering scripts at the end of your page helps
in the HTTP request department. On the file size front, below are
jQuery plugins that give solid bang for your performance buck.

Undo/Redo in
jQuery
An easy-to-use plugin for adding undo/redo capabilities to a jQuery
application. It is based loosely on the Objective-C/Cocoa way of
doing things.

editease
editEase – jQuery CMS | no fuss, no database, no worries

jsHub

jsHub is a single piece of JavaScript (a “tag”) that can handle
reading different sorts of page information and then send them to
many different vendors’ products. One piece of code to send to
Google Analytics, Omniture SiteCatalyst, WebTrends and Mixpanel.
Instead of one piece of JavaScript per vendor, jsHub has a single
piece of code (the “hub”) and plugins that know how to translate
into the required wire protocol for each vendor. Vendors only
maintain the plugin for their product.

Educational JavaScript Resources and Tutorials

Caffeinated Simpleton
JavaScript is an amazing little language, but it’s got some quirks
that turn a lot of people off. One of those quirks is
this, and how it’s not necessarily what you expect it
to be. this isn’t that complicated, but there are very
few explanations of how it works on the internet. This article is
an attempt to explain how this works and how to use it
properly.

What You Need To Know About JavaScript Scope
This article discusses how JavaScript handles scope and how various
JavaScript libraries provide methods for dealing with it and how
they smooth out a few bumps. We’ll also look at how you can get
back to basics and do some interesting scope wrangling without a
library, a useful approach if you’re writing code that needs to
stand alone.

Learning Advanced
JavaScript
A very nice tutorial to learn JavaScript, containing code and
discussion from the upcoming book Secrets of the JavaScript Ninja
by John Resig.

Highlight search terms automagically with JavaScript and
mark
Script surrounding the search term(s) with the mark
element rather than a span, although the class
searchword is retained in case you want to style these
marks differently from others. In the CSS, the rule
article mark is just added to turn it a gentle shade
of pink.

10 Really Helpful Traversing Functions in jQuery
With jQuery, selecting HTML elements is laughably easy. But at
times, we may wish to further refine the selection, which can be a
hassle when the HTML structure is complicated. In this tutorial,
we’ll explore ten ways that we can refine and extend a set of
wrapped elements that we wish to operate upon.

Using keyboard shortcuts in Javascript
If you want to enhance your web app, Javascript keyboards shortcuts
is definitely something to consider. In this article, you’ll learn
to use JS keyboard shortcuts, with and without the JQuery
framework.

Code
Conventions for the JavaScript Programming Language
This is a set of coding conventions and rules for use in JavaScript
programming.

jQuery – Select element cheat sheet
This cheat sheet helps you to find the index of a selected option,
set the selected option by value, set the selected option by text,
insert a new option before or after another and get the text or
value of the selected option.

Compare JavaScript frameworks
Modern Web sites and Web applications tend to rely quite heavily on
client-side JavaScript to provide rich interactivity, particularly
through the advent of asynchronous HTTP requests that do not
require page refreshes to return data or responses from a
server-side script or database system. In this article, you will
discover how JavaScript frameworks make it easier and faster to
create highly interactive and responsive Web sites and Web
applications.

Park
your Horse, Code Cowboy: Professional JavaScript Workflows, Part
1
In this series, we’ll talk about tools & techniques you can use
to cover those No’s, and cut a lot of strife & embarrassment
from your JavaScript experience.

JavaScript Reference examples (example source code)
JavaScript Reference examples, organized by Objects, Properties,
Methods & Collections. Some Event Handlers Reference are also
available.

JavaScript
best practices
A compilation of best practices and good advice I’ve amassed over
the years, much of it learnt the hard way (experimentation and
suchlike). Take the advice below to heart and keep it in a part of
your brain that has a quick access route so you can apply it
without thinking about it. I am sure you will find things to
disagree with, and that is a good thing – you should question what
you read, and strive to find better solutions. However, I have
found that following these principles has made me a more effective
developer and allowed other developers to build upon my work more
easily.

wtfjs
JavaScript is a language we love despite it giving us so much to
hate. This is a collection of those very special irregularities,
inconstancies and just plain painfully unintuitive moments for the
language of the web.

Related Posts

You may be interested in the following related posts:

• 
  50 Fresh JavaScript Tools That Will Improve Your Workflow
• 
  45 Powerful CSS/JavaScript-Techniques
• 
  70 Useful AJAX And JavaScript Techniques

Poll

What
programming language should we cover in next
round-up?surveys

This is why this post releases the Twittbacks WordPress Plugin that was developed and released especially for Smashing Magazine — this plugin imports tweets about your posts as comments. You can display them in between the other comments on your blog, or display them separately.

Advantages of our implementation

This implementation is inspired by Dan Zarrella’s great work on TweetBacks. Although his implementation does what it promises, we felt that it could be done in another way and offer users an alternative to display tweets in a more convenient way.

Dan’s solution uses JavaScript, which will work on more platforms, but we felt that it would be useful to actually store the tweets in the database instead of using JavaScript to display them. Because our implementation stores Tweets in the database, you can create new plugins that use this data on the top of our plugin.

Besides, our implemenation does not does not require JavaScript and requires significantly less time to load (server-side, not client-side). (Because we know you want to test this, and be able to ditch the plugin if you don’t like it, we’ve added an uninstall function, which will delete all the stored tweets from your WordPress database.)

Installation

The installation couldn’t be simpler:

1. download the plugin from Joost de Valk’s release post,
2. copy the “tweetbacks” folder to your plugin folder (wp_root/wp-content/plugins);
3. login inside your WordPress administrator panel and activate this plugin (Click “Plugins” and then “Activate” near to the plugin title);
4. if you are using WordPress 2.7, just add the code presented in the next section of this post (Styling and Adding Tweetbacks in WordPress 2.7) and you are done.
5. otherwise if you are using older versions of WordPress, you can add Twitterbacks similarly to the way it is presented in this tutorial:
   1. Access your comments.php file and locate the following code:

       <?php foreach ($comments as $comment) : ?>

      Immediately after the above code, place this code:

       <?php 	$comment_type = get_comment_type(); 	if($comment_type == 'comment') { ?> 

   2. Next, scroll down a little bit and locate the following code:

       <?php endforeach; /* end for each comment */ ?&gt 

      Put the following code right before the above code:

       <?php } /* End of is_comment statement */ ?> 

      This will filter out all of the tweetbacks, trackbacks and pingbacks from your main comments loop. Now we need to create a second comments loop to display tweetbacks, and a third loop to display the trackbacks and pingbacks.

   3. Right under the code from step 2 you should find this code:

       <?php else : // this is displayed if there are no comments so far ?> 

      Put the following code right before the above code:

       <h3>Tweetbacks</h3> <ol> <?php foreach ($comments as $comment) : ?> 	<?php $comment_type = get_comment_type(); ?> 	<?php if($comment_type == 'tweetback') { ?> 		<li><?php comment_author_link() ?>: <?php comment_text() ?></li> 	<?php } ?> <?php endforeach; ?> 

      Followed by this:

       <h3>Trackbacks</h3> <ol> <?php foreach ($comments as $comment) : ?> 	<?php $comment_type = get_comment_type(); ?> 	<?php if($comment_type != 'comment' && $comment_type != 'tweetback') { ?> 		<li><?php comment_author_link() ?></li> 	<?php } ?> <?php endforeach; ?> </ol>

   4. And you are done.

Styling and Adding Tweetbacks in WordPress 2.7

As the plugin will import these tweets into your comments, they will by default be shown as normal comments on your blog. They will get the class tweetback. If you’re using WordPress 2.7 and the default theme, or any other theme that has taken the styling from the comments from the default theme (which is a sensible thing to do), you could style these tweetbacks by adding something like this to your stylesheet:

 .commentlist li.tweetback { 	background-color: #94E4E8; }

If you want to display them separately, you’ll have to separate your comments, pingbacks and tweetbacks from each other. A great tutorial on how to do that is Separating Pings from Comments in WordPress 2.7.

After you’ve done that, you can add the following code to display the tweetbacks:

 if ( !empty($comments_by_type['tweetback']) )  > 	<h2 id="tweetbacks"><?php echo count($comments_by_type['tweetback']);?> Tweetbacks to “<?php the_title(); ?>”</h2> 	<ul class="commentslist tweets"> 		<?php wp_list_comments('type=tweetback'); ?> 	</ul> <?php endif; 

If you want to give that list of tweetbacks a different look and feel, you can add a callback to the wp_list_comments call above. The callback could make them look like this, for instance:

The code for the callback used above looks like this:

 function yoast_list_tweetbacks($comment, $args, $depth) { 	$GLOBALS['comment'] = $comment; 	$avatarurl = str_replace("twitter:","http://s3.amazonaws.com/twitter_production/profile_images/",$comment->comment_author_email); ?> 	<li class="tweetback" id="comment-<?php comment_ID(); ?>"> 		<div id="div-comment-<?php comment_ID(); ?>"> 			<div class="comment-author vcard"> 				<img alt='' src='<?php echo $avatarurl ?>' class='avatar avatar-40 photo avatar-default' height='40' width='40' /> 				<cite class="fn"><a href="<?php echo $comment->comment_author_url; ?>" rel='external nofollow' class='url'><?php comment_author(); ?></a></cite> <span class="says">says:</span> 			</div> 			<div class="comment-meta commentmetadata"><a href="#comment-<?php comment_ID(); ?>"><?php comment_date('F jS, Y'); ?> at <?php comment_date('H:i:s'); ?></a></div> 			<p><?php comment_text(); ?></p> 		</div> 	</li> <?php } 

Because these tweetbacks are stored as comments in your database, you can all sorts of cool things with them. Improving the Web has written a Widget pack that will work with this plugin, called Tweet Stats. It allows you to add widgets with “Recently tweeted posts” and “Most tweeted posts” (see examples below).

If you have any installation problems, questions or suggestions for this plugin, please either comment on this post or add your suggestions in the support forum on WordPress.org.

About the author

The plugin was developed by Joost de Valk, a Dutch geek and WordPress developer. You can follow him on Twitter.

Many designers take advantage of this opportunity; in fact, we are receiving more and more emails regarding freebie releases. Please note that we can’t answer all emails, but we read each of them. However, to get featured on Smashing Magazine, you really need to show us something that makes you different than the “usual” crowd.

Today, we are glad to release Color Paper: a free professional WordPress theme, created by the DreamTemplate team. This theme aims to combine visual appeal with clean typography and vivid design elements. It was created especially for Smashing Magazine and its readers.

Download the theme for free!

The theme is released under the Creative Commons Attribution-Share Alike 3.0 License (details of the license). You can use the theme freely for all of your projects, without any restrictions. However, it’s forbidden to sell or redistribute the theme without both the designer’s and Smashing Magazine’s permission. Please link to this article if you would like to spread the word. You may modify the theme as you wish, but if you are planning to release your modification, please ask our permission first.

• live demo
• download the theme (.zip, 1.8 Mb)
• download the PSD (.zip, 24 Mb)

Showcase of the theme

Here are some detailed screenshots of the theme:

Feature block at the top of the layout, with a style switcher on the left-hand side

List of articles on the front page

Comments styling

Sidebar styling (upper part)

Sidebar styling (bottom part)

Thank you, guys. We appreciate your work and your good intentions.

Last but not least…

We are regularly looking for creative designers and artists. You might not know it yet, but we may feature you in one of our upcoming posts.

If you would like to release a free high-quality font, a WordPress theme, some wallpapers or an icon set, please contact us. We would like to support you (both financially and with the broad coverage of Smashing Magazine).

You may be interested in the following free WordPress themes as well:

• Agregado: A Free WordPress Theme
• Infinity: A Free WordPress Theme
• WordPress.Fun: A Free WordPress Theme
• Fervens: A Free WordPress Theme
• Dilectio: A Free WordPress Theme
• Simply Ornate: A Free WordPress Theme
• Smashing: A Free WordPress Theme

(al)

Many things that were once accomplished using Flash objects can now be built using JavaScript – with the added benefit that it is free, typically more web and mobile accessible under most circumstances using best practices for development techniques, and without the need to use proprietary software for development.

Though JavaScript has been around for a while, new tools, techniques, and information are constantly being pumped out to continually push the technology into greater heights. In this article, we wish to share with you a huge list of fresh and new tools and resources that JavaScript developers will find useful and informative.

Here are a few other posts that you might find interesting:

• 50 Useful JavaScript Tools
• 40 Useful JavaScript Libraries
• jQuery and JavaScript Coding

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Useful JavaScript Tools

FireUnit
Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post detailing the usage of FireUnit.

Sugar Test
SugarTest makes it easy to write elegant and understandable JavaScript tests. Its API is inspired by both RSpec, Shoulda and jQuery. It works as a DSL running on top of JsUnitTest.

JS.Class: Ruby-style JavaScript
JS.Class is a library designed to facilitate object-oriented development in JavaScript. It implements Ruby’s core object, module and class system and some of its metaprogramming facilities, giving you a powerful base to build well-structured OO programs.

JSON Formatter and Validator
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 IE
Browsers like Safari, Opera and Firefox use the Firebug extension that offers a developer a comfortable way to output debugging information using the console.log() command. Microsoft Internet Explorer does not support this though – Faux Console is a small JavaScript that you can embed in the document to have a basic debugging console in IE.

JS Bin
JS Bin is a web application for testing and debugging JavaScript and CSS collaboratively. You input your source code and save it to a publicly-accessible URL which you can then share to your fellow developers or in social networking outlets like Twitter or Facebook groups. Be sure to check out the video introduction to see JS Bin in action.

PHP.JS
PHP.JS is an open source project in which we try to port PHP functions to JavaScript. By including the PHP.JS library in your own projects, you can use your favorite PHP functions client-side.

Page Speed
Page Speed, released by Google, is a Firefox/Firebug extension very similar to YSlow 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 work (who worked for Yahoo! and now works for Google).

prettyPrint
prettyPrint is an in-browser JavaScript utility for dumping variable information, inspired by ColdFusion’s built-in cfdump utility function. Using prettyPrint on JS objects, variables, and arrays will give you a large array of information about them, which you can then use for debugging purposes or simply for gathering data about them for documentation.

Spket IDE
Spket is an excellent toolkit for JavaScript and XML development. It has a robust and intuitive GUI, and integrates with popular and powerful JavaScript/Ajax libraries such as Y!UI and jQuery. Its JavaScript Formatter feature gives you unparalleled control and standardization for you or your team’s JavaScript code formatting standards.

Obtrusive JavaScript Checker
Obtrusive JavaScript Checker, created by Robert Nyman, is a tool for finding inline JavaScript on web pages. It highlights elements that have inline JavaScript properties and provides a summary report when you mouse over them. The tool is available as a Firefox extension or a Greasemonkey script.

Highlight.js
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.

Javascript Compressor
Javascript Compressor is a web-based tool for compressing your JavaScript to reduce their file sizes. It works by removing unnecessary characters (such as extra tabs and spaces). Developers who use the tool to compress their code can also use the decoding feature to uncompress their source code. It also obfuscates your code, making it harder to read – which can be desirable if you want to delay prying eyes from analyzing your publicly-available code base.

Firediff
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 Profiler
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.

bookmarklet maker
This plain and simple web tool allows you to create JavaScript-based bookmarklets. Usage is simple: simply copy and paste your source code into it and it will output the processed code in the lower pane.

Tiny JS
Tiny JS is an online directory of small but powerful plugins for popular JavaScript/Ajax libraries (MooTools, jQuery, and YUI at the moment). Its aim is to hunt down and feature lightweight plugins that give you a lot of bang for the buck.

JSCharts
JS Charts is a free JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting (i.e. performed by your web browser). No additional plugins or server modules are required. It’s enough to include the scripts, prepare your chart data in XML or JavaScript Array and your chart is ready.

Glimmer
Glimmer is an interactive design tool for incorporating slick JavaScript-based animation effects using the jQuery library. Glimmer comes with a wizard-style user interface which can reduce the amount of coding that you have to write manually.

JSSPec
A testing environment for JavaScript that runs on IE 6+, Firefox 2+ and Safari 3+. The tool shows differences between expected value and actual value, displays the failed line exactly and supports conditional execution. Released under GNU and available for free download.

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.

BaseJS: A Mobile (Safari) Javascript Framework
a simple, lightweight framework created specifically for Mobile Safari (perfect for iPhone development).

MochaUI
MochaUI is a web-based tool for building web application interfaces built on top of the MooTools JavaScript framework. Jump right in by taking MochaUI for a spin in their demo page.

Utility Libraries and Components for JavaScript

narwhal
narwhal is a server-side JavaScript library following the ServerJS standard. Developers can create and share “packages” for website widgets, site features, programming patterns, in a similar fashion as PEAR for PHP.

uploadify
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 demos to see the plugin in action.

Blackbird
Blackbird lets you log messages in JavaScript using a simple and intuitive JS-based API. The library also provides you with an attractive console GUI for viewing and analyzing messages. No more annoying alert() functions to see your objects’ contents (which can be frustrating for printing out array values) and for setting breakpoints.

Booklaylet
Booklaylet is a JS library for letting you easily deploy your bookmarklet applications. The implementation is dead simple: take the Booklaylet source and modify it to point to your app’s URL.

JavaScripTools
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.

Doodle.js
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 Pattern demo and the Marbles in Space (3D simulation) demo in a browser that already supports Canvas to get a feel for how Doodle.js works.

liteAJaX
liteAJaX is a lightweight JavaScript class for working with AJAX. This library is perfect for projects that don’t use a JavaScript/Ajax framework or projects that don’t need a more robust and fully-featured framework.

Burst
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
JSTestDriver is a Java-based framework for creating unit test following Test-Driven Development philosophies and best practices. Be sure to check out this video demonstration of JSTestDriver in action.

jsPDF
This library allows you to create PDF’s using nothing else but JavaScript. See the jsPDF demo page to see the library in action.

Useful JavaScript Libraries

GlassBox
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 page to see different types of GlassBox implementations.

jQuery TOOLS
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.

Moousture
Moosture is a JavaScript library for dealing with mouse gestures, written on top of the MooTools framework.

Tablecloth
Tablecloth is a lightweight and unobtrusive JavaScript library for styling and adding dynamic user interaction to HTML tables.

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.

LivePipe
LivePipe is a set of widgets and controls for adding common user interaction components to web applications using the Prototype JavaScript framework.

JavaScript Graphical / Virtual Keyboard Interface
This JavaScript package adds a virtual keyboard interface into web pages.

Tipmage
Tipmage is a JavaScript class for handling tooltips and annotations on images, similar to annotated images on Flickr.

qGallery
qGallery is a simple but beautiful JavaScript for creating image galleries with smooth and slick animation effects.

Educational JavaScript Resources and Tutorials

Ajax Frameworks Decision Center
For large companies, committing to a JavaScript/Ajax framework such as Prototype, MooTools, or jQuery is a big decision because it affects a large amount of employees and will dictate the direction of the company’s client-side interaction and RIA development philosophies. Using the Ajax Frameworks Decision Center gives you an organized, quantitative, and thorough method for making a solid decision.

jQuery vs MooTools
This single-page site by MooTools Dev Team member Aaron Newton is a comparative look into jQuery versus MooTools.

Ajax Framework Analysis Results
This analysis of popular JavaScript/Ajax frameworks (Dojo, Ext JS, GWT, YUI) is a great resource for gathering research data for your own frameworks: the analysis matrix factors in criteria such as scalability, extensibility, quality and quantity of documentation, and much more. You can adapt this matrix, tweak their weights, and modify criterions to help you decide which JS framework to go with.

Sexy Drop Down Menu w/ jQuery & CSS
In this tutorial, you’ll learn how to create a multi-tiered drop down menu with the use of the jQuery library.

Easy Display Switch with CSS and jQuery
This tutorial outlines a method for using jQuery to smoothly-transition into different viewing modes, which can be helpful in image galleries.

Create a Slick and Accessible Slideshow Using jQuery
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 page to see the slideshow in action.

Learning Advanced JavaScript
John Resig has a slideshow-style, web-based tutorial on advanced JavaScript development. It is a wonderful stepping-stone for JavaScript developers ready to make the leap into RIA development using JavaScript.

JavaScript tests & Compatibility tables
This resource is a well-organized cheatsheet for JavaScript methods cross-browser compatibility backed by sample tests that you can run to see how they work (or don’t work) in your browser.

Code Conventions for the JavaScript
On this page, you can find suggested coding conventions for JavaScript. It is important to note that there is no one correct convention, but this is a great place to start developing your own.