Graffititools:Designing tips n tools, tutorials, tricks

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.

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.

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.

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.

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.

There are many scripts that makes it possible to add polls, reviews and ratings to your web site relatively easily. Many of them do require a lot of configuration, uploading various files to the server and maybe even some programming to get them to work. Lately I wanted to add polls and reviews to my blog, but I did not have much time to spend on it, so complicated scripts where not an option. Thanks to js-kit I managed to add both a poll and hosting provider reviews in a matter of minutes. It didn’t require any programming and most of the configuration was done directly in the browser. It took me more time to style the poll and the reviews than it took to get them included in my site and working, and I suspect that most Six Revision readers are much better with CSS than I ever will be.

Poll

With JS-Kit you can add comments, ratings, reviews and polls to your website, you can even use their navigator service to highlight the most popular content on your site. All this is added simply by including a few lines of HTML to your site. The configuration is done directly in the browser, or for some components also partly in the HTML you include on your site. This code is used to add a poll for example:

Once you have included the code in on one of your web pages you simply go to your the page and configure the poll from there. You do not even have to register at JS-Kit first, instead JS-Kit identifies you by cookies they set on your computer. That way they know that you are the administrator of this poll and only shows it to you until you have finished configuring it. During the configuration you can define the options of the poll, decide the color of the result bar and much more. The nice thing is that JS-Kit takes care of all backend things, so there is no programming involved and no database scripts to worry about.

If you later want to edit the poll you do that in the same place as you first configured it, that is directly in your browser. Since the poll is styled by CSS you can override the classes it uses to style the poll perfectly to your own site.

Reviews

Reviews are a little more complex than Polls, so let’s take a look how you can add reviews like the one below to your site in minutes without writing any code. A JS-Kit review is actually a mix of two other JS-Kit components - ratings and comments. For a review you want users to both rate something and motivate the rating. If you just want comments or ratings you can of course add those individually as well.

1. Copy the HTML code you find at js-kit’s review page and paste it into your own HTML pages at the place you want the review to be shown.

2. Once the page is uploaded to your web sever you just go to your web page and you can start reviewing! Note that if you run your web site locally during development you will not see the review (or any other JS-Kit component), it needs to be on a publicly available domain. This is an example from WebHostNinja of how such a review looks:

There are a lot of options to configure the review. It is easy to change the color of the stars used, or to use a thumbs up/down image instead of stars. To do this you need to add attributes to the JS-Kit div tag that you have included in your HTML page.

This code shows a thumbs up/down rating (note the view=”score”):

Check out the JS-Kit site for all the available customization options.

Administration

Getting the polls, ratings and reviews into your site is only half the project. You also need to be able to administrate them and get some statistics how popular they are, fortunately JS-Kit makes this very straight forward as well.

Got to js-kit.com/settings to handle the administration of your sites and your js-kit components. Here you can approve new comments and invite others to moderate new comments with you. You can also configure and personalize the components you are using.

To track how popular your newly added polls and reviews are you can go to the JS-Kit dashboard. Here the popularity of all your JS-Kit components for the last year are shown in helpful graphs.

JS-Kit identifies you as the administrator of the JS-Kit components you have added by using cookies. So if you use a different browser or computer, or if you have cleaned out your cookies JS-Kit will not know who you are. If that is the case you need to identify yourself to JS-Kit by either upload a file with a specific name to your site or add some data to the header of your web pages. Go to js-kit.com/settings, enter the URL of your site and then follow the instructions.

Summary

JS-Kit have done a great implementation of easy to use components that are very useful for most kind of sites. It is just a matter of some copying and pasting to get a poll into any site. The only negatives are that you do not have full control over the data since it is hosted on the JS-Kit servers and that JS-Kit will start showing advertising sometimes in the future. Still there are no available details how this advertising will work, but it is worth keeping an eye on the JS-Kit blog if you are starting to use their components.

If you enjoyed this article, consider subscribing to the RSS feed!

Email Newsletters.

As a new hire at opt-in email marketing service AWeber, my first assignment was to create a couple dozen new HTML email newsletter templates for our customers. For the clean code-loving web designer, HTML email is a reminder of a dismal past. After weeks of work and countless headaches, I delivered the goods. I also learned a lot about designing for email.

To help you avoid a lot of the headaches I encountered during testing, here are 15 things you can do to create great-looking HTML emails.

Set Up Multiple Email Accounts For Testing!

If you only take away one tip from this article, please let it be this. As designers, we spend a lot of time creating the perfect user experience on the web and testing that experience across multiple platforms. Yet when it comes to email, too many of us fail to deliver the same attention to detail.

Much like testing for the web, creating an email layout that displays the same in every email client can be an absolute nightmare.

In order to be sure your subscribers will receive your message as intended - test in everything you can!

This includes but is not limited to:

• Yahoo
• Gmail
• AOL
• Windows Live Hotmail
• Outlook 2007
• Outlook 2003
• Lotus Notes
• Thunderbird
• Entourage
• Mac Mail

But wait - there’s more!

Some of these email clients have multiple versions, each of which will render CSS and HTML differently.

Subtle differences, I’ll admit. But enough of these subtle differences and it adds up to a sloppy design. And if that’s not enough… the user’s internet browser can also play a part in how your design renders.

Now before you throw your computer out the window in frustration… these next few steps can help you rule out a majority of testing problems.

Design Your Emails To Degrade Gracefully

I’m amazed to see some of the largest advertisers breaking basic usability rules regarding HTML email.

Here are some guidelines to live by:

• Never rely on images to communicate important information… especially one big one. A huge majority of email clients have images turned off by default. Unless the user takes some initiative… you just sent them a nice blank message.
• Never rely on background images to make text readable. Make sure your text has enough contrast with or without images enabled. Outlook 2007, for example, will not display background images in table cells even if images are turned on.
• Provide a link for people who are having trouble viewing your message Ok, this isn’t absolutely necessary - but its thoughtful to give your subscribers the option to view your message in their web browser (especially if it’s a particularly HTML heavy design).
• Use ALT tags on important images I can’t stress this enough! With images disabled by default, descriptive ALT tags are your last, best chance to convince a user to enable images.
• When using ALT tags, cut the clutter. Fill in the ALT tags that matter and leave the others blank
  (Note: I didn’t say exclude them!)

This is a header of an email I received from Discovery Health:

I took this screenshot from my Gmail account - before enabling images. See how the ALT text “bullet” and “spacer” get in the way?

Adding ALT tags to elements that only serve for design purposes clutters the design and distracts from your message.

Use Tables to Structure Your Layout

Huh? I spent all this time learning CSS and now I have to go back to tables? When it comes to email design, tables are hot like its 2003 - they’re the closest thing to standards we have.

A few things to take note of:

• Make sure to set all available table attributes where possible. This includes cellpadding, cellspacing, border, valign, width and height.
• Nested tables are your friend. Make sure to use proper indentation for clean easy to read code.
• Use the background attribute on a table cell to set background images. This is the easiest way to get passed backgrounds not displaying in Gmail.Note: Your background images will behave as if they were tiled… so plan accordingly.
• Be aware that background images applied to tables or divs are not supported by Outlook 2007 In fact, the only way to use a background image in Outlook 2007 is to apply it to the body of an email, which of course isn’t supported by other email clients such as Gmail, Yahoo, or Windows Live Hotmail. Awesome, right?I didn’t think so either.

Use Inline Styles When Coding Your CSS

Some popular email clients ignore the code inside your head tags. Gmail and Hotmail are particular culprits that come to mind.

With your layout set up in table format, it’s time to apply styles to your text and images. Here are some tips and tricks to ensure your message looks nearly identical in every browser:

• Use break tags as a replacement for vertical padding To alter the amount of space they consume try wrapping them in span tags and set a smaller/larger font size.
• Use inline styles repetitively and often. Applying a font tag to a parent table doesn’t necessarily mean it will carry that attribute down to all of its children. Make sure to set inline styles on all of your HTML elements.
• Apply detailed inline styles to links Especially for Gmail users - you must set specific styles to every link. Otherwise, they will inherit the default font-family, size and color set by each user’s browser.
• Wrap your images in span tags and set font attributes to style your ALT text accordingly. This allows you to style your ALT text, making it more readable when images are disabled.

Use Gmail’s Inbox Formatting To Your Advantage

Did you know that the subject line of every email sent to a Gmail account is followed by the first snippets of text within that particular email?

Why not use this to your advantage!

Above is a picture from my Gmail inbox.

Both newsletters have the same header content.

Only one difference - Newsletter 1 takes advantage of Gmail’s inbox formatting.

Here’s how I did it:

It’s as easy as that! This subtle difference will set your message apart from other emails in the reader’s inbox.

So, Now What?

I’ve done my best to share some things I do when creating HTML emails. It’s your turn! How do you go about designing, coding and testing your email campaigns?

Any recommendations, tips or tricks you would like to add will be greatly appreciated by your fellow design community.

If you like this tutorial, please give comments in that

Did you know that when you generate your StatCounter code, you can choose a “Counter Image” or a “Text Counter”?

Counter Image

With a “Counter Image”, you can choose the digit and background color of your StatCounter within your StatCounter account. You can also set the minimum number of digits to be displayed and choose a font style. Here are a few examples of the Counter Images available with StatCounter:

Sometimes though, members want to be able to further customize their StatCounters…

Text Counter

If you would like to format your StatCounter to your own specific requirements, you can choose a “Text Counter” when you generate your StatCounter code. With a Text Counter, you can format your counter using HTML. This way you can change the font, use borders, add background colors and images and create your very own unique StatCounter. Take a look at some of the examples that we created here…

• StatCounter Code

  StatCounter Code

  StatCounter Code
  StatCounter Code

  StatCounter Code

  Example - Center

  StatCounter Code

  Example - Left-Align

  StatCounter Code

  Example - Right-Align

  StatCounter Code

Change the Counter Font Color

Add the following code to the source code of your website, on either side of your StatCounter code:#0C4908 is the hexadecimal code for a dark green color - use any of the following hexadecimal codes to format your StatCounter:

#0C4908 #f3b044

#e3007b #acacac

#648dc7 #412700

Check out this link or this link for more hexadecimal color codes.

Change the Counter Font Size

Add the following code to the source code of your website, on either side of your StatCounter code:

25px indicates the size that you want for your counter in pixels. Here are some examples of pixel sizes:

10px 15px 20px 25px

You can experiment with different text sizes to find the most appropriate one for your site.

Bold the Counter Font

Add the following code to the source code of your website, on either side of your StatCounter code:

Italicize the Counter Font

Add the following code to the source code of your website, on either side of your StatCounter code:

Center/Left-Align/Right-Align your StatCounter

Add the following code to the source code of your website, on either side of your StatCounter code:

Change the Font of your StatCounter

Add the following code to the source code of your website, on either side of your StatCounter code:

You can experiment with various fonts to find which suits your site. Here are some examples:

arial verdana

helvetica arial black

courier courier new

georgia impact

palatino times new roman

trebuchet ms garamond

You can experiment with the following sample codes to create your very own unique StatCounter!

Thanks go to this post. If you have any suggestions or comments (or if you spot any errors in our codes!) please post below…

var sc_project=4296912; …
…







var sc_project=4296912; … …