Archive for June, 2009
Achieving Robust Clustered Storage with Linux and GFS

EnterpriseStorageForum: “Using GFS, the free clustered file system in Linux, you can create a truly robust cluster that does not depend on other servers. In this article, we’ll show you how to properly configure GFS.”

Go to Source

10 Common Mistakes In Logo Design

 

With the power of the Web, and more eyes watching than ever, it’s important for a business to communicate its unique message clearly. The easiest way to recognize a company and distinguish it from others is by its logo. Below, we go through 10 common logo design mistakes that you should avoid if you want to create a successful and professional logo.

1. Designed By An Amateur

Avoid websites that promote ridiculously cheap logo packages. You get what you pay for.

A professional business should look professional. New business owners often invest a lot of time and money in property and equipment, but do not often match it by investing suitably in their logo.

Here are the most common reasons why many logos look amateurish:

  • The business owner wanted to save money by designing the logo quickly themselves.
  • A friend or relative who claims to know a little about graphic design does it as a favor.
  • The wrong people are commissioned. (Local printers are not likely proficient in logo design.)
  • The business outsourced the job via one of several design competition websites, which are mostly populated by amateur designers.
  • The job was given to an online company that offers really cheap logos.

All of the above can result in disastrous outcomes. If your logo looks amateurish, then so will your business. A business should know where to look when it wants a new logo. David Airey offers great insight on how to choose the right logo designer for your requirements.

Here are the advantages of hiring an established and professional logo designer:

  • Your logo will be unique and memorable.
  • You won’t run into any problems down the line with reproducing it.
  • Your logo will have a longer lifespan and won’t need to be redesigned in a couple of years.
  • Your logo will look professional.

2. Relies On Trends

Focusing on current logo trends is like putting a sell-by date on a logo.

Trends (whether swooshes, glows or bevels) come and go and ultimately turn into cliches. A well-designed logo should be timeless, and this can be achieved by ignoring the latest design tricks and gimmicks. The biggest cliche in logo design is the dreaded “corporate swoosh,” which is the ultimate way to play it safe. As a logo designer, your job is to create a unique identity for your client, so completely ignoring logo design trends is best.

Logolounge has a great section on its website in which it updates current logo design trends every year. Being aware as a designer of the latest crazes is important, mainly so that you can avoid them at all costs.

3. Uses Raster Images


An example of how raster graphics can limit reproduction.

Standard practice when designing a logo is to use vector graphics software, such as Adobe Illustrator or Corel Draw. A vector graphic is made up of mathematically precise points, which ensures visual consistency across multiple sizes. The alternative, of course, is use to raster graphics software, such as Adobe Photoshop. A raster graphic — or bitmap, as it’s commonly called — consists of pixels.

Using raster images for logos is not advisable because it can cause problems with reproduction. While Photoshop is capable of creating very large logos, you never know for sure how large you will have to reproduce your logo at some point. If you zoom in enough on a raster graphic, it will appear pixelated, making it unusable. Maintaining visual consistency by making sure the logo looks the same in all sizes is essential.

The main advantages of vector graphics for logo design are:

  • The logo can be scaled to any size without losing quality.
  • Editing the logo later on is much easier.
  • It can be adapted to other media more easily than a raster image.

4. Contains Stock Art

Using stock vector graphics in a logo puts your client at risk.

This mistake is often made by business owners who design their own logo or by amateur designers who are not clued in to the laws on copyright. Downloading stock vector imagery from websites such as VectorStock is not a crime, but it could possibly get you in trouble if you incorporate it in a logo.

A logo should be unique and original, and the licensing agreement should be exclusive to the client: using stock art breaks both of these rules. Chances are, if you are using a stock vector image, it is also being used by someone somewhere else in the world, so yours is no longer unique. You can pretty easily spot stock vectors in logos because they are usually familiar shapes, such as globes and silhouettes.

5. Designing For Yourself Rather Than The Client

Never impose your own personality onto a client’s work.

You can often spot this logo design sin a mile away; the cause is usually a designer’s enormous ego. If you have found a cool new font that you can’t wait to use in a design, well… don’t. Ask yourself if that font is truly appropriate for the business you’re designing for? For example, a great modern typographic font that you just love is not likely suited to a serious business such as a lawyer’s office.

Some designers also make the mistake of including a “trademark” in their work. While you should be proud of your work, imposing your personality onto a logo is wrong. Stay focused on the client’s requirements by sticking to the brief.

6. Overly Complex

Highly detailed designs don’t scale well when printed or viewed in smaller sizes.

What better analogy for thumbnail images than fingerprints? You’ll notice the intricacies of your fingerprints only when looking at them really close up. As soon as you move away, those details are lost. The same holds true for highly detailed logo designs.

When printed in small sizes, a complex design will lose detail and in some cases will look like a smudge or, worse, a mistake. The more detail a logo has, the more information the viewer has to process. A logo should be memorable, and one of the best ways to make it memorable is to keep things simple. Look at the corporate identities of Nike, McDonald’s and Apple. Each company has a very simple icon that can easily be reproduced at any size.

7. Relies On Color For Its Effect

Without color, your great design may lose its identity.

This is a very common mistake. Some designers cannot wait to add color to a design, and some rely on it completely. Choosing color should be your last decision, so starting your work in black and white is best.

Every business owner will need to display their logo in only one color at one time or another, so the designer should test to see whether this would affect the logo’s identity. If you use color to help distinguish certain elements in the design, then the logo will look completely different in one tone.

8. Poor Choice Of Font

Font choice can make or break a logo.

When it comes to executing a logo, choosing the right font is the most important decision a designer can make. More often than not, a logo fails because of a poor font choice (our example shows the infamous Comic Sans).

Finding the perfect font for your design is all about matching the font to the style of the icon. But this can be tricky. If the match is too close, the icon and font will compete with each other for attention; if the complete opposite, then the viewer won’t know where to focus. The key is finding the right balance, somewhere in the middle. Every typeface has a personality. If the font you have chosen does not reflect the icon’s characteristics, then the whole message of the brand will misfire.

Bad fonts are often chosen simply because the decision isn’t taken seriously enough. Some designers simply throw in type as an afterthought. Professional font foundries, such as MyFonts and FontFont, offer much better typeface options than those over-used websites that offer free downloads.

9. Has Too Many Fonts

A logo works best with a maximum of two fonts.

Using too many fonts is like trying to show someone a whole photo album at once. Each typeface is different, and the viewer needs time to recognize it. Seeing too many at once causes confusion.

Using a maximum of two fonts of different weights is standard practice. Restricting the number of fonts to this number greatly improves the legibility of a logo design and improves brand recognition.

10. Copies Others

This is the biggest logo design mistake of all and, unfortunately, is becoming more and more common. As mentioned, the purpose of a logo is to represent a business. If it looks the same as someone else’s, it has failed in that regard. Copying others does no one any favors, neither the client nor the designer.

About the Author

Gareth Hardy is a professional graphic designer and illustrator based in the United Kingdom. You can find Gareth at Down With Design or on a snowy mountain near you.


© Gareth Hardy for Smashing Magazine, 2009. |
Permalink |
100 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: ,

Go to Source

10 things you should know about Windows XP’s System Restore tool

If a crash makes your Windows XP system flaky or unbootable, you can use System Restore to return it to a previous working state. These pointers will show you how to effectively use this safety net.


Windows XP’s System Restore lets you restore your computer to a previous time if a problem occurs. To accomplish this feat, System Restore continuously monitors your system looking for significant changes to the operating system, such as an application or driver installation procedure, automatically creating a restore point when it detects an impending change.

System Restore will also create restore points every 24 hours. Restore points are essentially snapshots of your system state, which comprises crucial system files, including certain parts of the registry. System Restore maintains multiple restore points, which gives you the choice of restoring your computer to any number of previously saved states. Here are 10 things you should know about getting the most from Windows XP’s System Restore tool.

Note: This article is also available as a PDF download.

1: Data files and System Restore

Because System Restore is described as a tool that allows you to restore your computer to a previous time, many people mistakenly assume that they will lose any data files they’ve created since the restore point was created. However, System Restore doesn’t monitor or save the contents of the My Documents folder, any files that use common data filename extensions, such as .doc or .xls, e-mail message stores, browsing history, or even password files. Those files will remain intact when you restore your system.

Keep in mind that the Desktop is not a protected folder, and any files that exist there could be lost during a restore operation. So before you perform a restore operation, you should move any crucial files you have saved on the Desktop to the My Documents folder.

2: Undoing a restore operation

If you perform a restore operation and then determine that the problem still exists, you can undo the operation. To do so, you must immediately run System Restore. When you see the Welcome To System Restore screen, select the Undo My Last Restoration option and click Next. On the Confirm Restoration Undo screen, click Next. System Restore will restore the previous system state and restart the computer. When the system restarts and you log on, you’ll see System Restore’s Undo Complete screen, which lets you know the operation was successful.

If you perform a restore operation and then determine that you selected the wrong restore point date, simply run System Restore again and select the restore point date you wanted.

If you perform a successful restore operation and discover that your computer won’t boot Windows normally, you can still undo the restore operation. First, boot the system into Safe Mode. After you log on, a Warning dialog box will appear, allowing you to launch System Restore and select the Undo My Last Restoration option.

If the restore operation fails, the Restoration Was Unsuccessful screen will appear, and your computer will automatically return to the same state it was in when you activated the restore operation. In other words, no changes will be made to your computer.

3: Running System Restore from a command prompt

If your computer won’t boot Windows normally and won’t boot into the Safe Mode GUI, you can still access System Restore. Start by booting the system using the Safe Mode With Command Prompt option. After you log on, type the following at the command prompt:

%systemroot%\system32\restore\rstrui.exe

Press [Enter], and System Restore will run as it normally does. You can follow the steps in the wizard to perform a restore operation.

4: Purging restore points

System Restore by default claims a maximum of 12 percent of the available hard disk space to save the restore points. (The amount of storage space will depend on the size of your hard disk.) Once the 12 percent mark is reached, System Restore will purge the oldest restore points in its database to make room for new ones. However, there may be situations where you need or want to purge restore points to free up disk space. Fortunately, the Disk Cleanup utility will allow you to delete all but the most recent restore point.

You can launch Disk Cleanup from the Start | All Programs | Accessories | System Tools menu. Once Disk Cleanup is running, select the More Options tab and click the Cleanup button in the System Restore panel. You’ll then be prompted to confirm the delete operation.

5: Reining in System Restore’s disk space usage

To perform its operations, System Restore requires at least 200 MB of available hard disk space. However, if more disk space is available, System Restore will claim up to 12 percent of it to save the restore points. Although System Restore can use that full 12 percent if it’s available, this chunk of disk space is not reserved. System Restore will yield disk space back to the system if it’s needed. Furthermore, restore points more than 90 days old are automatically purged by default.

If you want to see how much hard disk space System Restore has potentially set aside on your system, press [Windows][Break] to bring up the System Properties dialog box and then choose the System Restore tab. Next, select your hard disk from the Available Drive list and click the Settings button. When the Drive Settings dialog box appears, you’ll see a number in the Disk Space Usage panel that represents the amount of space in MB that System Restore is using to amass restore points.

For example, on a system with an 80GB hard disk, System Restore’s 12 percent amounts to nearly 9 GB. If you feel that System Restore has the potential to take up too much disk space, move the slider to the left to specify a more reasonable amount of hard disk space for System Restore to store its multiple restore points.

6: Manually creating a restore point

System Restore will automatically create restore points, but you can manually create one anytime you want. To do so, launch System Restore and then follow along with the wizard. If want to save yourself a few steps, you can simplify the launching process by copying the System Restore shortcut from the Start | All Programs | Accessories | System Tools menu to the desktop

7: Bypassing the System Restore Wizard

If you want to be able to manually create a restore point without having to go through the wizard, you can create a simple two-line VBScript file that uses WMI (Windows Management Instrumentation) to instantly create a restore point. Just launch Notepad and type these two lines:

Set IRP = getobject("winmgmts:\\.\root\default:Systemrestore")
MYRP = IRP.createrestorepoint ("My Restore Point", 0, 100)

Then, save the file as MyRestorePoint.vbs. Now, you can easily create a restore point by double-clicking the script’s icon. When you do, System Restore will run in the background without displaying its interface and will create a restore point called My Restore Point.

8: Steps to avoid restoring viruses

If you know that your system is infected by a virus, you should temporarily turn off System Restore. Otherwise, the virus could be saved along with other system files in a restore point and reintroduced to your system during a restore operation at a later date.

To turn off System Restore, press [Windows][Break] to bring up the System Properties dialog box. Then, choose the System Restore tab, select the Turn Off System Restore check box, and click OK. As soon as you do, you’ll see a confirmation dialog box warning you that turning off System Restore will delete all existing restore points. Click Yes to continue.

You can now use your antivirus software to clean up your system. When the virus has been eradicated, access the System Restore tab again and clear the Turn Off System Restore check box. Click OK to re-enable System Restore.

9: Disabling System Restore for data drives

If you have additional hard disks connected to your computer, System Restore will automatically add them to its list of monitored drives. If these additional drives just store data or data backups, there’s no reason to have System Restore monitor them.

To disable System Restore for data drives, press [Windows][Break] to bring up the System Properties dialog box. Then, choose the System Restore tab. Next, select your hard disk from the Available Drive list and click the Settings button. When the Drive Settings dialog box appears, select the Turn Off System Restore On This Drive check box and click OK. You’ll see a confirmation dialog box warning that by turning off System Restore on this drive, you won’t be able to track or undo harmful changes on it. Click Yes to continue. Then, click OK to close the System Properties dialog box.

10: Determining the actual amount of space System Restore is using

You can easily determine how much disk space System Restore can potentially use, but you may also want to determine how much disk space System Restore is actually using. If you’re running Windows XP Professional and the hard disk is using NTFS, you can find out.

You’ll begin by making a few configuration changes from an Administrator account that will allow you to investigate the hidden and protected folder called System Volume Information, located in the root directory of your hard disk. Keep in mind that this information is meant only for investigative purposes. Making any changes to the files in the System Volume Information folder will disrupt or otherwise damage System Restore’s ability to do its job.

From within Windows Explorer, access the View tab of the Folder Options dialog box. Then, select the Show Hidden Files And Folders option, deselect the Hide Protected Operating System Files check box, and click Yes in the Warning dialog box. (If the system is in a workgroup, you’ll need to deselect the Use Simple File Sharing check box as well.) Click OK to close the Folder Options dialog box.

Now, access the root directory of the hard disk, right-click on the System Volume Information folder, select Properties, and access the Security tab. Then, click the Add button, enter your user account name in the Select Users Or Groups dialog box, and click OK twice to close both dialog boxes.

At this point, you can open the System Volume Information folder, right-click on the _restore folder, and select Properties. Once Windows XP finishes tallying, check the Size On Disk value to see the exact amount of space System Restore is using for restore points. To ensure the security of the restore point files, you should remove your user account from the System Volume Information folder once you finish your investigation.


Finally: 10 Things… the newsletter!

Get the key facts on a wide range of technologies, techniques, strategies, and skills with the help of the concise need-to-know lists featured in TechRepublic’s 10 Things newsletter, delivered every Friday. Automatically sign up today.


Go to Source

10+ ways to improve your writing by self-editing

If you want your writing to be polished, professional, and effective, you’ll need to develop a system for reviewing your work with a critical eye. Here are some concrete steps you can take to vastly improve the results.


Despite our best efforts, most of us make mistakes while writing. After all, we occasionally mispronounce words, use the wrong tense, or stop to reclaim a thought while talking. Writing is no different.

Unfortunately, catching mistakes in your own writing is difficult. Your mind knows what you meant to write so it glosses over the mistake and reads what you meant to write, not what you actually wrote. It’s a difficult phenomenon to beat. Fortunately, you can improve your self-editing skills to cut down on mistakes and improve the quality of what you write.

Note: This article is also available as a PDF download.

1: Put some distance between you and your work

The most important rule to successful self-editing is often the hardest to apply: Put it aside for a few hours or even a few days. Don’t try to edit your own writing as soon as you’re done. It’s just too fresh in your mind and you will read what you think you wrote and not what you really wrote. Your mind will glance right over even the most obvious errors. The more time your work sits, the easier and more productive your editing effort will be. Be sure to add this downtime to your schedule.

2: Read like a reader, not like an editor

The first time you read through a piece, read it as a reader. Ignore mistakes and read for comprehension. Knowing that you made your point is the most important step to editing your own work. The editor in you will still spot errors, just don’t belabor them — keep reading.

3: Limit your first edit

During the first edit, resist the urge to change everything. Only correct glaring errors. If you feel strongly about a change, make a note in the margin. Later, you can always make the change, but more than likely, you won’t. Your first instincts are usually correct. You’ll save time and a bit of wear and tear on yourself by limiting those first changes to the most important ones — the true errors.

4: Now, you can edit

At this point, you’re ready to correct errors and improve the language and organization:

  • Correct typos, spelling, grammar, and punctuation.
  • Make sure you’ve used the most appropriate words — the biggest or most technical word is seldom the best word.
  • Check for redundancy. Delete words, sentences, and even whole paragraphs, if necessary.

5: Perform a line edit

Ignore the piece as a whole and review each sentence individually:

  • Rewrite run-on sentences by deleting extraneous words and phrases.
  • See if your subjects and verb agrees.
  • Make sure the sentence conveys your intended point.
  • Depending on the piece, you’ll probably want to replace passive verbs with active ones. Only rarely are passive verbs the best use, but it does happen.
  • Vary sentence structure if necessary. The same noun/verb construct is boring if used repeatedly.

6: Take it apart

After your first major edit, edit each paragraph or section separately. How you approach this step is up to you, but the trick is to read the paragraphs or sections out of order. Each paragraph or section should stand on its own. Then, review them as a whole again for the following:

  • Vary paragraph length. Long paragraphs are acceptable, but avoid one-sentence paragraphs.
  • Move paragraphs and even individual sentences to support the flow of logic, if necessary.

7: Return to the outline

If you’re an outliner, compare the edited version to your original outline. They don’t have to match. In fact, they often won’t. Not everything in your outline has to be in the finished piece, and the finished piece might have items you didn’t include in the outline. However, this is a good time to make sure you didn’t accidentally omit an important item. What matters is that everything that needs to be in the finished piece, is.

8: Read it aloud

Read the piece aloud. This tip sounds like overkill, but it works. Reading the article aloud puts energy behind the organization and the words. There’s a cadence to every piece, and reading it aloud is the only way to make sure the words flow soundly through the entire piece. When you stumble over a word or phrase, simply rewrite it. Repeat this step as many times as necessary.

9: Remove emphasis, unless you really mean it

While writing, it’s easy to add emphasis to your words. For instance, you might add italics to words or phrases and use exclamation points to end sentences. A little emphasis is often necessary, but don’t overuse it. If you have more than a few italicized words in the same piece, you probably have too many. Exclamation points are appropriate, but only if you really mean them.

10: Run a spell check

Make use of technology and run a spelling and grammar check. You can use these features more than once. In fact, you might start out with one and end with one. That way, you can check your changes. But don’t depend on these features because they don’t catch everything.

11: Know yourself

Pay attention to the mistakes you make repeatedly. For instance, you might overuse certain phrases or words or you might have trouble with verb tense or punctuation. Knowing your weaknesses will make it easier to correct your work thoroughly.

12: Know your goal

Every piece has a goal or point. Write a sentence or short synopsis of the piece before you begin. After editing your work, make sure it truly honors your point. Every sentence and every paragraph should support the overall thesis. If they don’t, delete or rewrite them.

13: Edit other people’s work

If possible, volunteer to help others edit their writing. The practice will pay off: By helping others, you’ll improve your skills as a writer and an editor.


Finally: 10 Things… the newsletter!

Get the key facts on a wide range of technologies, techniques, strategies, and skills with the help of the concise need-to-know lists featured in TechRepublic’s 10 Things newsletter, delivered every Friday. Automatically sign up today.


Go to Source

50 Fresh JavaScript Tools That Will Improve Your Workflow

Advertisements

JavaScript is an integral part of the RIA revolution. JavaScript allows developers to create rich and interactive web interfaces and establish asynchronous communication with servers for constantly up-to-date data without a page refresh.

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:

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.

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.

Screenshot

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.

Screenshot

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.

JS Bin

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

Page Speed

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.

prettyPrint

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.

Spket IDE

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.

Screenshot

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.

Javascript Compressor

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.

Firediff

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.

bookmarklet maker

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.

Tiny JS

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.

Glimmer

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

CodeRun Code Search

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.

MochaUI

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.

Blackbird

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.

Doodle.js

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.

Burst

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.

GlassBox

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.

jQuery TOOLS

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.

Tablecloth

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.

LivePipe

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

JavaScript Graphical / Virtual Keyboard Interface

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

Tipmage

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

qGallery

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.

Ajax Frameworks Decision Center

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.

Ajax Framework Analysis Results

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.

Sexy Drop Down Menu w/ jQuery & CSS

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.

Easy Display Switch with CSS and jQuery

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.

Create a Slick and Accessible Slideshow Using jQuery

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.

Learning Advanced 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.

JavaScript tests & Compatibility tables

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.

About the Author

Jacob Gube is a bilingual web developer (JavaScript and PHP), web designer, author, and the Founder/Chief Editor of Six Revisions: an online publication that shares useful development and design resources and tutorials for web professionals. If you would like to contact him, send him a tweet and follow him on Twitter.


© Smashing Editorial for Smashing Magazine, 2009. |
Permalink |
33 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: , , , ,

Go to Source