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:

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

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. If you would like to contact him, send him a tweet and follow him on Twitter.

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

Post tags: ajax, jquery, js, tools, useful

If you build and develop Wordpress themes often, you will probably be fed up of all the repetitive code writing, the constantly checking of your mark-up and all you really want to do is focus on the design and the project-specific features. The answer is a Wordpress development framework. A framework is designed to speed up the process of designing and coding a Wordpress theme by minimizing your time, and balancing your patience, on Wordpress’ back-end code that is repeated within every theme.

This post is not about finding the best framework, it is about finding the right framework that works for you. If you are an experienced developer then you will probably go for the powerful and feature rich Thematic or Carrington, or if you are a novice, you could try the Whiteboard framework or , even easier, download a stripped out and bare bones blank canvas theme, which you will find at the bottom of the post.

Which would you use?

Thematic – WP Framework

Thematic is a highly polished WordPress Theme Framework that is built upon the 960.gs. At first glance, its backend may look daunting and complex, but you will soon realise just how well organised it is and easy to use. Its power is based upon its flexibility and its simple customisation, you would be very hard pushed to find a project you couldn't use the Thematic WP Framework for.

• Thematic Homepage.
• View Thematic Demo.
• Download Thematic WP Framework.
• Thematic Support Forums.
• Thematic Customisation Guide.

Thematic Features

• Optional 2 or 3 column layouts.
• Up to 13 widget ready areas.
• Modular CSS with pre-packaged resets and basic typography.
• Fully Search-Engine Optimized.
• Can be used as it is, or as a blank WordPress theme.
• Dynamic post and body classes make it a hyper-canvas for CSS artists.
• Options for multi-author blogs.
• Great support available from the customisation guide and forums.
• Child Themes are available for upgrading the theme.

Thematic (child) Themes

Thematic uses Child Themes, these are essentially stripped down versions of a full WP theme, that needs the Thematic Framework for functionality. Upon download, Thematic comes packaged with a basic child theme, but you can download many more from the Thematic homepage. Download Thematic Child Themes.

Below, you will find a small selection of themes available for Thematic.

Acamas Child Theme

Second to None Child Theme

Gallery Child Theme

Boumatic Child Theme

Aether for all Child Theme

To activate a new Child Theme, all you have to do is rename and move the entire folder to the root level of wp-content/themes alongside Thematic and activate the new Thematic Child Theme like any other WordPress theme.

Carrington – The CMS Theme Framework

Being by far the most powerful of all WP frameworks, Carrington was built with both developers and end-users in mind, it truly is the complete Wordpress package. Upon download, the first time user may be put off by its undoubted complexity and its endless features and options, but don't be put off. You must persevere with this framework, and when you learn all the ins and outs (with help from its in-depth documentation and forums) you will receive your just rewards, you will see how beneficial, rewarding and time saving Carrington can be. As the tagline goes, it may just be the best thing since you the wheel and sliced bread.

• Carrington Homepage.
• Carrington Documentation.
• Carrington Official Forum.
• Carrington Downloads.

Carrington Features

• Flexible and powerful templating system.
• Rich, semantic markup.
• Four ready built themes.
• Stylish typography.
• Threaded comments.
• Page and category navigation menus.
• AJAX loading of posts in archive lists.
• AJAX loading of comments.

Carrington Official Themes

Carrington Blog
Carrington Blog is an elegant blog-style theme with advanced features like AJAX loading of content, customizable colors and header images, easy addition of analytics code, widgetized sidebars, stylish gallery features, and more. It is designed for bloggers looking for an “out of the box” experience.

Carrington Text
Carrington Text embraces simplicity with this elegant design. Text and content is the focus here – let your content take center stage.

Carrington Mobile
Carrington Mobile is an elegant mobile theme with that supports advanced touch browsers (iPhone, Android, BlackBerry) and is also backward compatible with older mobile devices.

Carrington Jam
Carrington JAM is a bare-bones theme skeleton. It is intended for developers and designers as a starting point for building a new theme, it is not designed for end-users looking for a blog theme that is ready to go.

Theme Hybrid

Theme Hybrid is Wordpress Framework developed by Justin Tadlock. As with all Justin’s’ Wordpress themes (the excellent Options theme), you know that you are getting a very powerful and versatile backend, but still very easy to use and develop upon. Theme hybrid truly is built with simplicity and power in mind.

The theme club has two types of membership, free and exclusive. Free members can download and use the themes for free and participate in the forums. For $25 you can join the exclusive club, which gives you access to tutorials and you are able to post questions on the support forums.

• Theme Hybrid Homepage.
• Theme Hybrid Blog.
• Theme Hybrid Forums.
• Theme Hybrid Memebership.

Theme Hybrid Features

• Advanced action and filter hooks.
• Child theme support.
• Each individual child theme is in its self choc-full of features.
• Search-Engine Optimized.
• 14 custom page templates.
• 9 widget-ready areas.
• Advanced breadcrumb menu.
• Support for attachment pages.
• Of course, it has valid code.
• Threaded comments.
• Great support, lots of tutorials and forums.

Theme Hybrid Child Themes

For all of these themes to work, you will need Hybrid installed first.

Hybrid
Hybrid is a user-friendly, search-engine optimized theme framework, featuring 14 custom page templates and 9 widget-ready areas.

Life Collage
A purely blogging theme, it has extra widget sections, drop-down menus, with a sleek design.

Hybrid News
This is a free News/Magazine theme, it has extra widget sections, double navigation menus, drop-down menus and a featured post slider.

Leviathan
This theme is clean and spacious, ideal for large images and large posts.

Old School
Old School is versatile enough to be used as either a blog or a magazine/news site, great design as well.

WP Framework

WP Framework is a great starting point when first learning about the Wordpresses structure and first stepping into theme development as well as for the experienced user for quick development. Under the hood its foundation it is very solid, and this framework will cut down on your theme development time and allow you to focus directly and from the off on project-specific features. WP Framework is completely extensible, flexible and the starting point for theme authoring and customization.

• WP Framework Homepage.
• WP Framework Getting Started Guide.
• WP Framework Forums.
• WP Framework Downloads.

WP Framework Features

• Microformats Compatabile.
• Search Engine Optimized.
• Modular CSS includes reset.css, base.css and screen.css.
• Gravatar enabled.
• Favicon & iPhone webclip placeholder images.
• jQuery enabled and screen.js.
• Basic print.css stylesheet ready for direct printing.

Buffet Theme Framework

The Buffet Framework is a WordPress theme framework designed not only for the theme developers who will be using the theme actions and filters to create child themes, but also for the end users who would be able to add and remove what they want. Like most WordPress theme frameworks, the Buffet Framework utilises WordPress actions and filters to allow theme developers to add additional content without editing the templates files using the child theme concept.

• Buffet Theme Homepage.
• Buffet Theme Quick Start Guide.
• Buffet Theme Downloads.

Buffet Theme Features

• Search Engine Optimised.
• Support for Microformats.
• jQuery powered comments form, SuperSleight for IE6, Superfish menus and jBreadcrumbs included.
• Packaged with 960gs and Blueprint CSS.
• Action & Filter Hooks
• Allow end-users to enable/disable features using the extensions feature.
• Localization – fully localized, ready for translation.

Buffet Theme Demo

Buffet Theme

Whiteboard – WP Theme Framework

Whiteboard will never be as powerful as the Carrington framework or the Buffet framework, it has been developed for simpler development requirements. Simply, it has been designed to speed up the process of designing and coding a Wordpress theme by eliminating the time spent on Wordpress’ back-end PHP that is repeatedly used in every theme. It is clean, noted, and very small, weighing in at 76kb, its amazingly compact.

• Whiteboard Theme Homepage.
• Download Whiteboard Theme.

Thesis Theme

The Thesis Theme is a framework that has been built with great typography, a dynamically resizable layout, intelligent code, airtight optimization, and with lots of flexibility that make it versatile enough for most projects. Have a look at this video review of Thesis 1.5.

• Thesis Theme Homepage.
• Thesis Theme Forums.
• Thesis Theme User’s Guide.

The WordPress Starter Theme Project

Similar in idea as the Whiteboard framework, The Wordpress Starter Theme Project was developed for those who hate repeatedly doing the same actions every time you start a new Wordpress project. This is a very easy to use framework, which is ideal for the novice to learn the basics of Wordpress structure.

• The WordPress Starter Theme Project Homepage.
• Download The WordPress Starter Theme Project.

Ashford WP Framework

Ashford has been built to be as simple as possible to use, it is also packed with many useful and powerful features. You can create and edit content with Adminbar, Hints and Admin-In-Place, choose from dozens of page layouts (including a content carousel), content can also be customized using widgets and multiple sidebars and of course all code validates and is fully SEO.

Ashford, like most frameworks, uses child themes, making it even easier to develop with. Unfortunately, child themes for Ashford are as yet limited.

• Ashford Homepage.
• Ashford Support.
• Ashford Blog.

Sandbox

The seemigly ageless Sandbox, is a useful tool for WordPress theme designers and developers, it can be easily developed solely with CSS, so beginners will feel comfortable not having to worry about PHP. Experienced developers and designers can accomplish almost anything with minimal work, thanks to the rich, semantic markup and profusion of classes dynamically generated by the Sandbox.

The main feature of the Sandbox, and the feature that has made it very popular, is its markup. The class-generating functions included with the Sandbox create an extensible and semantic XHTML structure. Please note, the Sandbox has only been tested up to WP 2.6.

• The Sandbox Homepage.
• The Sandbox Demo Page.
• The Sandbox Readme.
• The Sandbox Forums.

OnePress Community

The OnePress framework is an integrated website and forum solution. It is, simply, a WordPress theme to serve as the foundation and framework for your web site and online community. Leveraging both WordPress and phpBB projects, OnePress provides a set of features focused on helping you build and maintain your site from the inside out.

• Onepress Homepage.
• Download Onepress.
• Onepress Docs.
• Onepress Forum.

PSD Framework for Creating WordPress Themes

If you have ever found yourself reusing elements from previous designs when starting up Photoshop to create yet another WordPress theme, then this PSD download is just for you.

Homepage and PSD Downloads

Blank WP Themes

Blank themes are not a development framework, as such, they are a blank canvas for quickly and painlessly starting a Wordpress project. Below you will find the best of them.

Blank WP from Anna Linea
There are six themes within this download package.

Blank Wordpress Themes from Refueled
There are three themes available, two-column left sidebar, two-column right sidebar and blank three column.

Wordpress Naked Theme from Siftware

Starkers – Blank Canvas WP Theme from Elliot Jay Stocks

Related posts

You may be interested in the following related posts:

• CSS Frameworks + CSS Reset: Design From Scratch.

About the author

Paul Andrew is a freelance web designer. He is chief admin for Speckyboy – Design Magazine, a web design, web development and graphic design resource blog. Follow him on Twitter here: twitter.com/speckyboy.

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

Post tags: frameworks, wordpress

If you are an experienced professional, chances are you have a good set of tools and a work process that you repeat on a daily basis to handle your work. That’s good; it’s how you become more productive, and become an expert. But with repetitive processes come repetitive mechanical work. Whether it’s opening a file in Photoshop to change the format or adding an iCal to-do item based on an email you received, these little tasks can be streamlined. That’s the purpose of AppleScripts.

AppleScript is a scripting language developed by Apple to help people automate their work processes on the Mac operating system. It accomplishes this by exposing every element of the system’s applications as an object in an extremely simple, English-like language. AppleScript is to the Mac OS as JavaScript is to browsers.

Quite a few AppleScripts are available on the Web, ready for you to use, so you don’t even need to look at their code. This article presents you with 17 of the most useful ones.

If you’re interested in learning this language, here are some good resources to get started:

• Official AppleScript Website
  Apple’s page on AppleScript.
• AppleScript Language Guide
  Apple’s in-depth guide to AppleScript.
• MacScripter
  The greatest AppleScript forum.
• Learning AppleScript
  Macworld’s article on the fundamentals of writing AppleScripts.
• AppleScript Users
  AppleScript Mailing List.

First, Where To Put Your AppleScripts

After you download a script, you have to know where to put it to start using it. For this purpose, let’s say that there are three different kinds of AppleScripts, each of which is used for a different purpose.

Simple Scripts

You put these scripts in a special folder and call them when you need them. You can invoke them just by double clicking on them, but calling them contextually is a lot more effective. Using the Script Menu is one way to achieve this.

To activate the Script Menu, first open the AppleScript Utility app in the /Applications/AppleScript folder and check “Show Script Menu in menu bar.”

The Script Menu will show a list of AppleScripts that come with Mac OS X, plus your application-specific scripts. To add a script to an application, simply put it in ~/Library/Scripts/Applications/<NAME_OF_THE_APPLICATION>. If that folder doesn’t exist, you can create it.

For example, if you had a Safari AppleScript, you’d put it in ~/Library/Scripts/Applications/Safari. From then on, if you clicked the Script Menu when Safari was active, your script would appear at the top of the list for you to use.

Droplets

Droplets are AppleScripts that live in the Finder’s toolbar. To use it, all you need to do is drop a file or folder into it. This is very useful for when a script affects a file or the contents of a folder, because all you have to do is drop the target of the action onto the script’s icon.

To “install” a Droplet, first save it in a folder of your choosing: ~/Library/Scripts/Droplets is a good place. Then just drag the script to the Finder’s toolbar.

Folder Actions

Folder Actions are AppleScripts that are “attached” to a folder. They are executed every time you perform an action with that folder. Folder Actions can get triggered every time you add a file to a folder, remove a file, modify its items, etc. The behavior depends on how the script works, but you can imagine how useful that would be.

To add a Folder Action to a folder, right-click it to bring up the contextual menu, and click Attach a Folder Action. The default location for Folder Action scripts is /Library/Scripts/Folder Action Scripts, but if you want to keep all your custom-installed scripts in one place, ~/Library/Scripts/Folder Actions is a good place to keep them.

Multimedia Processing

1. ConvertImage

This is a great example of how Droplets are useful. Just drop an image file into ConvertImage, and you will be prompted to choose from a list of file formats. Pick a format, and it saves it in the same folder as your original file.

ConvertImage
Type: Droplet
Requirements: OS X 10.4+, Image Events

2. QuickTime to Photoshop

Exports QuickTime frames directly to Photoshop. All you have to do is pause a video at the frame that you want to export, and then invoke the script. If Photoshop is closed, the script will activate it for you. After it imports the frame, it will ask you if you want another frame from the QuickTime file.

QuickTime to Photoshop
Type: Simple Script
Requirements: Adobe Photoshop CS4

3. iPhoto to Photoshop

This opens the currently selected iPhoto image in Photoshop. It is a simple automation leap that gets you where you want without intervening steps.

iPhoto to Photoshop
Type: Simple Script
Requirements: Adobe Photoshop CS4

4. Rampage

Drop an image file or a folder with image files in Rampage, and you get a text file with a lot of information about the file(s): size, resolution, color mode, ICC Profiles and more. It also reports warnings and errors about the file(s). The script currently supports TIFF, GIF, BMP, PNG and JPG image formats.

Rampage
Type: Droplet
Requirements: None

5. SWF Extractor

This extract SWF files from Flash projectors (Windows or Mac executables) that are dropped into it.

SWF Extractor
Type: Droplet
Requirements: None

Safari Tools

6. Safari Web Site Validator

Safari Web Site Validator gets the HTML or XHTML from the current active Safari tab and sends the code to the W3C Markup Validation Service in a separate window. It then asks if you want to validate the page’s CSS file as well.

Safari Web Site Validator
Type: Simple Scripts
Requirements: OS X 10.4.4+

7. Tiny URL

Despite its name, the Tiny URL script doesn’t use the TinyUrl application. It’s based on another URL shortening service called Metamark. It goes to the currently active Safari tab and puts the shortened URL directly in your clipboard.

Tiny URL
Type: Simple Scripts
Requirements: None

8. Safari Cleannup

This automates the deletion of Safari icons and cache and plist files. Getting rid of these extraneous files can boost Safari’s performance.

Safari Cleannup
Type: Simple Scripts
Requirements: None

9. Scour Web Page

This script scans the current Web page in Safari looking for MP3, AAC and PDF media files. If it finds multiple files, it prompts you to select the ones you want to keep, and then downloads them and adds them to your iTunes media library.

Scour Web Page
Type: Simple Scripts
Requirements: None

Mail And iCal

10. Fuhgeddaboutit

In Sopranos-speak, fuhgeddaboutit means “forget about it.” Indeed, one of the purposes of GTD is to free your brain from having to keep track of everything. Just relax, forget about it now and be confident that you’ll remember when you need to.

This script make that possible by making iCal To-Do items from an Apple Mail email. Just invoke the script with the email you want, and it will create an iCal item with a due time set relative to the email’s arrival.

Fuhgeddaboutit
Type: Simple Scripts
Requirements: None

11. Send Attachment Droplet

Just drop a file into this Droplet, and it will make a new Mail email with the file as an attachment and the subject set to the file’s name. If the Mail app is closed, the script will open it for you.

Send Attatchment Droplet
Type: Droplet
Requirements: None

12. Remove iCal Duplicates

When you sync and share many calendars in iCal, you often end up with a lot of duplicates. This simple script helps you remove those. But once you ask it to delete duplicates, there’s no undoing. So, be sure to back up your calendar first.

Remove iCal Duplicates
Type: Simple Script
Requirements: None

13. iCalculate

Invoke this script, create an iCal calendar item and start date, and it will generate a text file reporting how many hours you have worked on the project. It even calculates the total cost of the project, based on the hourly rate your specify. Especially suited to freelancers.

iCalculate
Type: Simple Script
Requirements: None

Finder Utilities

14. Pack’em

Pack’em takes one or more items from Finder, packs them with tar, compresses them with either bzip2 or gzip and saves the compressed archive in the same folder as the original items. A great companion to the Send Attachment Droplet. With these two AppleScripts, you can compress and email a set of files or folders directly from Finder.

Pack’em
Type: Simple Script
Requirements: None

15. Rename Files

Just drop a folder into this Droplet, and it will give you a lot of options to batch process its contents. You can rename the files according to names specified in a particular text file or change the files individually. Either way accomplishes your task much faster than by changing every file name independently.

Rename Files
Type: Droplet
Requirements: None

16. Websafe Name

If you develop websites, you are probably accustomed to giving your files Web-friendly names. But there are times when you have to upload a whole set of files sent to you by a client, or upload things that you weren’t expecting to use. Websafe Name is very useful for this kind of task. You don’t even need to look through the list of files; just drop them into this script, and it will rename them to something Web-friendly.

Websafe Name
Type: Droplet
Requirements: None

17. Tagger

The “folder” is a computer interface paradigm that is a very powerful way to organize files. But it’s neither the only paradigm nor the best solution for all scenarios. Many sub-folders nested deep is a sign that a folder structure may not be appropriate. Another great paradigm, coming straight from the Web, is “tagging.” You keep all your files flat in a common location, but group them by tags so that you can retrieve or filter them by tags. It so happens that the Mac OS X has very good support for this. You can use Spotlight Comments to tag files and Smart Folders to dynamically retrieve them. All you need now is an easy way to do this, and this Folder Action does exactly that.

To use Tagger, attach it to a folder. Then, every time you add a file to that folder via Finder, the script will prompt you to tag that file. It also automatically creates Smart Folders for all of your defined tags.

Tagger
Type: Folder Action
Requirements: None

Further Resources

If you like the scripts above, you may also be interested in the following articles and related resources:

• ScriptBuilders
  A forum in which script authors post their scripts.
• Doug’s AppleScripts for iTunes
  A huge collection of AppleScripts for iTunes.
• Macs in Chemistry
  AppleScripts aimed at scientists.
• Studio Log
  Scripts and discussion on how to make them.
• AppleScripts on Github
  A search list of AppleScripts hosted on Github

Should Smashing Magazine publish more Mac-related posts?

Please let us know in the poll below and in the comments to this post!

Should Smashing Magazine publish more Mac-related posts?(online surveys)

About the Author

Diogo Terror is a Web developer doing PHP work when the sun is up and Ruby on Rails when it gets dark. In between, he writes about Macs and posts random thoughts on Twitter.

(al)

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

Post tags: apple, applescripts, mac

Today, let’s do it again with 10 new and totally killer WordPress hacks to make your blog stand out from the crowd. As usual, we won’t just list the hacks alone. In each entry, you’ll find an explanation of the code as well as the kinds of problems that the hack solves.

You may be interested in the following related posts:

• 15 Useful Twitter Hacks and Plug-Ins For WordPress
• Mastering WordPress Shortcodes
• 10 Steps To Protect The Admin Area In WordPress
• 8 Useful WordPress SQL Hacks
• 10 Useful RSS-Tricks and Hacks For WordPress

1. Create TinyURLs On The Fly

The problem. Because Twitter has become a social media revolution, many bloggers and Twitter users enjoy sharing blog posts they have found and liked on Twitter. However, manually creating a TinyURL before tweeting can get a little tedious. As you probably know, Twitter can bring a lot of traffic to your blog, so it is in your interest to consistently provide short URLs to your readers.

The solution. To use this recipe, follow the simple steps below:

1. Open your functions.php file.
2. Paste the following code in the file:

   function getTinyUrl($url) {
       $tinyurl = file_get_contents("http://tinyurl.com/api-create.php?url=".$url);
       return $tinyurl;
   }

3. Open your single.php file and paste the following in the loop:

   <?php
   $turl = getTinyUrl(get_permalink($post->ID));
   echo 'Tiny Url for this post: <a href="'.$turl.'">'.$turl.'</a>'
   ?>

4. That’s all you need. Each of your posts now has its own TinyURL, ready for tweeting!

Code explanation. The popular URL shortening service TinyURL provides a quick API that creates TinyURLs on the fly. When you pass a URL to http://tinyurl.com/api-create.php, the API immediately prints the related TinyURL on the screen.

Using the PHP function file_get_contents(), we can get it and assign it to the $tinyurl variable. The last part of the code retrieves the post’s permalink and passes it as a parameter to the getTinyUrl() function previously created.

Source:

• How to: Automatically provide TinyURLs for your WordPress blog posts

2. List Upcoming Posts

The problem. If you often schedule posts to be published, how about displaying them in a list? This will make your readers look forward to what you’re going to publish in a few days and can help you reach new RSS subscribers. Implementing this functionality on your WordPress blog isn’t hard at all.

The solution. Nothing hard here. Just copy this code and paste it anywhere in your theme files.

<div id="zukunft">
	<div id="zukunft_header"><p>Future events</p></div>

	<?php query_posts('showposts=10&post_status=future'); ?>
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<div >
			<p class><b><?php the_title(); ?></b><?php edit_post_link('e',' (',')'); ?><br />

			<span class="datetime"><?php the_time('j. F Y'); ?></span></p>
		</div>
	<?php endwhile; else: ?><p>No future events scheduled.</p><?php endif; ?>

</div>

Once you’ve saved the file, your upcoming posts will be displayed on your blog.

Code explanation. This code use the super-powerful query_posts() WordPress function, which allows you to take control of the WordPress loop.

The parameter used is post_status, which allows you to get posts according to their status (published, draft, pending or future). The showposts parameter is also used to define how many items you’d like to get. You can change the value of this parameter on line 4 to retrieve more or less than ten posts.

Source:

• How to: List future posts

3. Create A “Send To Facebook” Button

The problem. In the first hack, we noted that Twitter can bring a lot traffic to your blog. Another website that can boost your traffic stats easily is Facebook. In this hack, let’s see how we can create a “Send to Facebook” button for your WordPress blog.

The solution.

1. Open the single.php file in your theme.
2. Paste the following code in the loop:

   <a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" target="blank">Share on Facebook</a>

3. Alternatively, you could use the getTinyUrl() function to send a short URL to Facebook:

   <?php $turl = getTinyUrl(get_permalink($post->ID)); ?>
   <a href="http://www.facebook.com/sharer.php?u=<?php echo $turl;?>&t=<?php the_title(); ?>" target="blank">Share on Facebook</a>

4. That’s all. Your readers will now be able to share your blog post on Facebook with their friends!

Code explanation. This useful hack is very easy to understand: the only thing we do here is retrieve the post’s permalink and title and send them as parameters to http://www.facebook.com/sharer.php.

In the alternative method, we used the getTinyUrl() function (created in the previous hack) to send a short URL instead of the post’s permalink.

Source:

• How to: Add a “Share on Facebook” link to your WordPress blog

4. Create A Maintenance Page For Your WordPress Blog

The problem. One thing I really like about Drupal is the option to temporarily redirect visitors to a maintenance page. Sadly, WordPress doesn’t have this feature. When you upgrade your blog, switch themes or make design changes, you may not want your visitors to see your blog as it is being tweaked, especially if it has design or code problems or, even worse, security gaps.

The solution. To solve this problem, we use the power of the .htaccess file. Just follow the steps below to get started.

1. Create your maintenance page. A simple WordPress page is generally sufficient.
2. Find your .htaccess file (located at the root of your WordPress installation) and create a back-up.
3. Open your .htaccess file for editing.
4. Paste the following code:

   RewriteEngine on
   RewriteCond %{REQUEST_URI} !/maintenance.html$
   RewriteCond %{REMOTE_ADDR} !^123\.123\.123\.123
   RewriteRule $ /maintenance.html [R=302,L]

5. Replace 123\.123\.123\.123 on line 3 with your IP address (Don’t know it?). Make sure to use the same syntax.
6. Now, all visitors except you will be redirected to your maintenance page.
7. Once you’re done tweaking, upgrading, theme switching or whatever, re-open your .htaccess file and remove (or comment out) the redirection code.

Code explanation. The .htaccess file, which controls the Apache Web server, is very useful for these kinds of tasks.

In this example, we state that any visitor who has an IP different from 123.123.123.123 (which doesn’t request maintenance.html) should be redirected to maintenance.html.

By replacing 123.123.123.123 with your own IP address, you make sure you’re still allowed to browse your blog normally, while others are redirected to maintenance.html.

Source:

• 10 awesome .htaccess hacks for WordPress

5. Display Related Posts Without A Plug-In

The problem. One well-known way of keeping visitors on your blog longer and helping them discover news posts is to display, usually at the end of the article, a list of related content.

Many plug-ins will do this job, but why not super-charge your theme by integrating this functionality by default?

The solution.

1. Open the single.php file in your theme.
2. Paste the following code in the loop:

   <?php
   $tags = wp_get_post_tags($post->ID);
   if ($tags) {
     echo 'Related Posts';
     $first_tag = $tags[0]->term_id;
     $args=array(
       'tag__in' => array($first_tag),
       'post__not_in' => array($post->ID),
       'showposts'=>5,
       'caller_get_posts'=>1
      );
     $my_query = new WP_Query($args);
     if( $my_query->have_posts() ) { ?>
   <ul>
   
   </ul>
   

3. Save the file, and then have a look at your blog: related posts are automatically displayed!

Code explanation. This hack uses tags to retrieve related posts. The first thing it does is get the post’s tags. If a post has tags, the first one is extracted and used in a query that retrieves posts with the same tag.

By default, this code displays up to five related posts. To change this number, simply edit line 9 of the code.

Source:

• How to: Show related posts without a plug-in

6. Automatically Retrieve The First Image From Posts On Your Home Page

The problem. Many WordPress users use custom fields to display a thumbnail on their blog home page. Of course, this is a nice solution, but how about automatically retrieving the first image from a post and using it as a thumbnail?

The solution. This hack is quite easy to implement:

1. Open the functions.php file in your theme.
2. Paste this code in. Don’t forget to specify a default image on line 10 (in case a post of yours does not have an image).

   function catch_that_image() {
     global $post, $posts;
     $first_img = '';
     ob_start();
     ob_end_clean();
     $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
     $first_img = $matches [1] [0];
   
     if(empty($first_img)){ //Defines a default image
       $first_img = "/images/default.jpg";
     }
     return $first_img;
   }

3. Save the functions.php file.
4. On your blog home page (index.php), call the function this way to get the URL of the first image from the post:

   <?php echo catch_that_image() ?>

Code explanation. The function uses the global variable $post to parse the post’s content with a regular expression. If an image is found, its URL is returned by the function. If not, the default image URL is returned.

Source:

• How to: Get the first image from the post and display it
• Retreive first image from post

7. Resize Images On The Fly

The problem. When you use thumbnails on your blog’s home page or even images in posts, having to manually resize them is boring and wastes a lot of time. So, why not use the power of PHP to do it?

The solution. To achieve this hack, just follow these simple steps:

1. Get this script and save it on your computer (I’ll assume you’ve named it timthumb.php).
2. Use an FTP program to connect to your server and create a new directory called scripts. Upload the timthumb.php file to it.
3. Once done, you can display images like so:

   <img src="/scripts/timthumb.php?src=/images/whatever.jpg&h=150&w=150&zc=1" alt="Screenshot" />

   In other words, you just call the timthumb.php file and pass your image as a parameter. The same goes for your desired width and height.

Code explanation. The timthumb.php script use the PHP GD library, which allows you to manipulate images dynamically with PHP. GD is installed by default on all servers running PHP5. If you’re not running PHP5, you’ll have to check if GD is installed before using this script.

The timthumb.php file gets the parameters you’ve passed to it (image URL, width and height) and uses it to create a new image with your stated dimensions. Once that’s done, the image is returned to you.

Source:

• TimThumb PHP script released
• How to: Resize images on the fly

8. Get Your Most Popular Posts Without A Plug-In

The problem. Displaying your most popular posts is a good way to make visitors stay longer on your blog, as is displaying related posts. Many great plug-ins can list your most popular posts, but again, why use a plug-in when you can simply hack your WordPress theme to do it automatically?

The solution. Just paste the following code anywhere in your theme files (for example, in sidebar.php). To change the number of displayed posts, simply change the “5″ on line 3 to your desired number.

<h2>Popular Posts</h2>
<ul>
<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5");
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
$commentcount = $post->comment_count;
if ($commentcount != 0) { ?>

<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
<?php echo $title ?></a> {<?php echo $commentcount ?>}</li>
<?php } } ?>

</ul>

Code explanation. This code executes an SQL query to the WordPress database, using the $wpdb object, to get a list of the five posts with the most comments. The results are then wrapped in an unordered HTML list and displayed on screen.

Source:

• Create your own popular posts page

9. Highlight Searched Text In Search Results

The problem. The WordPress search engine system is often criticized for not being powerful enough. One of its weakest points in my opinion is that searched text is not easily distinguishable from the rest of the text. Let’s solve that!

The solution.

1. Open your search.php file and find the the_title() function.
2. Replace it with the following:

   echo $title;

3. Now, just before the modified line, add this code:

   <?php
   	$title 	= get_the_title();
   	$keys= explode(" ",$s);
   	$title 	= preg_replace('/('.implode('|', $keys) .')/iu',
   		'<strong class="search-excerpt">\0</strong>',
   		$title);
   ?>

4. Save the search.php file and open style.css. Add the following line to it:

   strong.search-excerpt { background: yellow; }

That’s all. Better, isn’t it?

Code explanation. Once again, regular expressions are a lifesaver. The regexp parses the $s content ($s is the variable containing the searched text) and automatically adds a <strong class=”search-excerpt”> element around any occurrences of $s.

Then, you simply modify your style.css file to give searched text a special style and make it more visible to your readers.

Sources:

• Make WordPress’ search function suck less.
• How to: Highlight searched text in search results

10. Disable Widgetized Areas Without Editing Theme Files

The problem. Widgets are very useful, but sometimes you don’t need them on a particular page or post. Sure, you can create a page template for a particular page or even remove the widgetized zone from the code, but a much better and more elegant solution exists.

The solution. To do this, simply add the following code to your functions.php file:

<?php
add_filter( 'sidebars_widgets', 'disable_all_widgets' );

function disable_all_widgets( $sidebars_widgets ) {
	if ( is_home() )
		$sidebars_widgets = array( false );
	return $sidebars_widgets;
}
?>

Code explanation. This code first adds a filter to the sidebars_widgets WordPress function. Now every time WordPress tries to execute this function, it will execute the disable_all_widgets function we just created.

The disable_all_widgets function uses WordPress conditional tags (in this example, is_home(), but you can use any conditional tag) to disable all widgets if a visitor is on a particular page or post.

Source:

• Disable widget areas (sidebars) without touching theme templates

Related posts

You may be interested in the following related posts:

• 15 Useful Twitter Hacks and Plug-Ins For WordPress
• Mastering WordPress Shortcodes
• 10 Steps To Protect The Admin Area In WordPress
• 8 Useful WordPress SQL Hacks
• 10 Useful RSS-Tricks and Hacks For WordPress

About the author

This post was written by Jean-Baptiste Jung, a 27-year-old blogger from Belgium, who blogs about WordPress at WpRecipes, about Photoshop at PsdRecipes and about everything related to blogging and programming at Cats Who Code. You can stay in touch with Jean by following him on Twitter.

(al)

© Jean-Baptiste Jung for Smashing Magazine, 2009. |
Permalink |
104 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: facebook, hacks, maintenance, related, techniques, tinyurl, upcoming, wordpress

JavaScript is a powerful client-side scripting language used in many modern websites and Web applications. In the hands of a skilled Web developer, JavaScript can enhance the user’s experience of the website and provide rich interactive components and features. But even though syntactically simple in nature, JavaScript is often difficult to author because of the environment it runs in: the Web browser. JavaScript’s popularity is evident in emerging technologies, such as Adobe AIR, which use it as a supported language for creating desktop-based applications.

Below, you’ll find 50 excellent tools to help you achieve various tasks involved in authoring JavaScript code. You’ll find useful tools to speed up your coding processes, including debugging tools to hunt down places where your scripts break, unit testing and validation tools to test your scripts in various situations, security vulnerability scanners and code optimization tools to make sure your scripts are light as a feather.

You’ll also find a few new and alternative JavaScript and AJAX frameworks to help you explore options beyond the big names (i.e. MooTools, jQuery, YUI, Dojo, Prototype), in addition to useful scripts to help you accomplish a host of design and development tasks related to JavaScript.

Also, be sure to check out the following related posts:

• 75 (Really) Useful JavaScript Techniques
• 60 AJAX- and Javascript Solutions For Professional Coding
• jQuery and JavaScript Coding: Examples and Best Practices
• 50 Extremely Useful And Powerful CSS Tools

JavaScript/AJAX Authoring Tools

• jQuery UI
  The jQuery UI allows you to design custom user interfaces for Web applications using the jQuery library. With jQuery UI, you can reduce the amount of code you write for common rich interactive features and website widgets. Be sure to check out the jQuery UI Demo page, which showcases some of the things you can accomplish using jQuery UI.

  

• Google Web Toolkit
  The Google Web Toolkit (commonly referred to as GWT) is a framework for developing complex and fully featured AJAX-based Web applications. You write front-end code in Java that is later compiled into optimized and cross-browser-friendly JavaScript. GWT puts the focus on Web application development by reducing the need for testing and debugging JavaScript for browser quirks.
• Jx
  Jx is a JavaScript library for creating graphical user interfaces written on top of the MooTools framework. Jx is distributed with an MIT license and is well documented. Numerous examples as well as thorough and well-organized API documentation is available on the website.

  

• Freestyle Webtop Toolkit
  Freestyle aims to reduce the complexity and time involved in deploying Web-based user interfaces by eliminating the separation of client-side and server-side development. With Freestyle, you focus on programming logic and UI design, and it handles the rest (i.e. cross-browser compatibility and DHTML and AJAX development).

  

• Script#
  Script# is an AJAX and JavaScript authoring tool that allows developers to write in C#. It also allows .NET developers to leverage their existing knowledge and provides powerful tools associated with the .NET framework.

  

• Aptana Jaxer
  Aptana Jaxer is the first “AJAX server” that allows developers to use their AJAX, HTML, JavaScript and DOM knowledge to create fully featured server-side-powered Web applications. With Jaxer, you can even write database queries in JavaScript syntax. Jaxer integrates very well with popular JavaScript libraries such as jQuery, Dojo and Ext JS.
• JS Regex Generator
  JS Regex Generator helps JavaScript developers write Regular Expressions for matching strings of text. This is commonly done for text-format validation, such as when checking if inputted text has the correct date and email format.

  

• WaveMaker
  WaveMaker is open-source software for complete Web application development and deployment. You can find a host of demo applications built and deployed using WaveMaker on the Demo Applications page.

  

Documentation Tools

• JSDoc Toolkit
  JSDoc Toolkit makes code documentation a breeze. Written in JavaScript, it helps developers automatically generate templates for JavaScript comments. It’s a great tool for managing large-scale applications developed by teams of developers who have different coding styles.
• jGrouseDoc
  jGrouseDoc is an open-source project distributed through Google Code under a modified BSD license. It lets developers document and manage their code comments using a format similar to Javadoc’s.

  

JavaScript Debugging Tools

• Firebug
  Firebug is an extremely popular and well-regarded front-end debugging tool. It has all the features you’d expect from a JavaScript debugging tool, such as the ability to set breakpoints in your code so that you can step through your script. For people developing outside of Mozilla-based browsers, check out Firebug Lite, which is a JavaScript library you can include in your Web pages to access some of the features of Firebug.

  

• Venkman JavaScript Debugger
  Venkman is Mozilla’s JavaScript debugger and an add-on for Gecko-based browsers. Venkman is a robust and fully featured JavaScript debugging environment, with a host of useful features and options, such as code profiling to inspect your script’s performance.

  

• Drosera
  Drosera is an excellent debugging tool for Safari and WebKit-based browsers.

  

• Opera Dragonfly
  Opera Dragonfly is a robust debugging environment for the Opera browser. Dragonfly allows you to view and inspect errors, debug your scripts and inspect and edit the DOM and CSS on the fly.
• NitobiBug
  NitobiBug is a browser-based JavaScript object logger and inspector. It runs on numerous browsers, including IE, Safari, Opera and Firefox. It is a powerful tool in helping developers build rich interactive AJAX applications.
• DebugBar
  DebugBar is an in-browser front-end debugger for Internet Explorer. Much like its Firefox counterparts, it has a robust set of features, such as DOM, JavaScript and cookie inspection. Be sure to check out Companion JS, which is a JavaScript debugging library to be used alongside DebugBar.

  

• Internet Explorer Developer Toolbar
  Similar to Firebug, IE Developer Toolbar is an in-browser tool to help you debug front-end code in Internet Explorer. It’s especially handy as a debugging and inspection alternative to Firefox when you’re developing and testing in IE.

JavaScript Testing and Validation Tools

• Test – JavaScriptMVC
  Test is a JavaScriptMVC component for easily setting up automated unit testing for JavaScript code. It lets you effectively test for DOM events (such as a key press or form submission), thereby lessening development time, oversight and errors associated with manual testing.

  

• JsUnit
  JsUnit is a popular unit testing framework for JavaScript code. It’s a JavaScript port from another unit testing framework for Java called JUnit. JsUnit allows you to write test cases and provides tools for automated code execution.
• JSLint
  JSLint is a Web-based tool for verifying your JavaScript code for errors. It has a ton of features and settings that you can use to customize verification algorithms to suit your needs.

  

• Crosscheck
  Crosscheck is an open-source testing framework for JavaScript. Crosscheck is unique because it works independent of environment: you can run tests outside of a Web browser, which avoids discrepancies that occur when testing in various browsers.
• YUI Test
  YUI Test is a suite of testing utilities that’s part of the YUI library developed by Yahoo!. It has numerous features, such as easy creation of test cases through an intuitive syntax, advanced failure detection and the ability to organize test cases by grouping them into test suites.

  

• J3Unit
  J3Unit is an excellent object-oriented unit-testing framework for JavaScript. It gives you a host of options for writing automated test cases and has three modes: Static Mode, Local Browser Mode and Remote Browser Mode.
• Regular Expression Tool
  The Regular Expression Tool is an online utility that allows you to test your RegEx code against a sample test. It’s a handy tool to have around when you want to quickly test the efficacy of your regular expressions in a variety of example texts.

  

• JavaScript Regular Expression Tester
  This is another handy tool for testing regular expressions within the Web browser.

  

• JSLitmus
  JSLitmus is a lightweight tool for creating JavaScript benchmarks and performance tests, using an intuitive API.

  

Security Tools

• AttackAPI
  AttackAPI is a framework for writing test cases of potential JavaScript exploits and vulnerabilities.
• jsfuzzer
  jsfuzzer is a fuzzing tool to help you write (and test for) attack vectors in JavaScript.

New and Alternative JavaScript and Ajax Development Frameworks

• Clean AJAX
  Clean AJAX is an open-source framework for creating AJAX-based applications. Check out the demo page to see it in action.

  

• SAJAX
  SAJAX is an excellent toolkit for developing AJAX-based applications. It supports PHP, Perl and Python.

  

• JavaScriptMVC
  JavaScriptMVC is a Web application framework based on the MVC software architectural pattern. It speeds up Web development processes and lays down best practices, maintainability and standards as principles in a project’s development.
• qooxdoo
  qooxdoo is a simple and intuitive AJAX application framework. Be sure to check out the Demo Browser, a Web-based application that allows you to view demos of qooxdoo at work.

  

• SimpleJS
  SimpleJS is a small and lightweight JavaScript library that provides developers with useful JavaScript functions for working with AJAX.

Image Manipulation and Graphing

• Reflection.js
  Reflection.js automatically adds reflections to your images unobtrusively. Also check out instant.js, a similar script that adds an image border and tilts images on a Web page.

  

• typeface.js
  typeface.js allows you to embed custom fonts on Web pages, freeing you from having to create images for HTML text.
• CanvasGraph.js
  CanvasGraph.js is a simple JavaScript library that lets you construct bar, line and pie charts using HTML’s canvas element.

  

• flot
  flot is a JavaScript library for plotting data and has been tested to work in most modern Web browsers.

  

• JavaScript Diagram Builder
  The JavaScript Diagram Builder is a JavaScript library that consists of a variety of objects and functions for constructing diagrams.

  

• The Dojo Charting Engine
  The Dojo Charting Engine is a robust utility for creating components for data visualization, written on top of the Dojo Toolkit.

Useful Utilities and JavaScript Scripts

• Processing.js
  Processing.js is a JavaScript port of Processing, the open-source data-visualization programming language. Check out examples that use Processing.js.
• AJAX Libraries API
  Google’s AJAX Libraries API allows you to serve popular JavaScript libraries using its CDN, which reduces the server load on your website.
• DamnIT
  DamnIT is an error-reporting service that allows you to gather feedback from beta testers after they’ve encountered a JavaScript error. This is perfect for live production testing and as a monitoring tool that helps you track errors and weak spots in your Web applications.
• ie7-js
  ie7-js is a JavaScript library that forces Internet Explorer to behave like a standards-based browser (like Firefox or Opera). It automatically fixes IE browser quirks and deviations from Web standards, as in the case of its box model.
• Lazy loader
  Lazy loader is a jQuery plug-in that delays the loading of images so that text content can load first, thereby making image-heavy pages load faster.

JavaScript Code Optimization and Minification Tools

• JS Minifier
  JS Minifier is a Web-based tool for shrinking your JavaScript code to make it as lightweight as possible.

  

• JSMIN
  JSMIN is a popular JavaScript minifier that removes unneeded characters (like spaces and tabs) and comments, thus reducing your script’s file size.
• YUI Compressor
  The YUI Compressor is another well-regarded JavaScript code-optimization tool developed by Yahoo!.
• Scriptalizer
  Scriptalizer is a helpful online tool for combining JavaScript files to reduce HTTP requests.

  

• ShrinkSafe
  ShrinkSafe is a compression tool that reduces JavaScript file sizes.
• SlickSpeed Selectors Test
  SlickSpeed is a Web page for comparing the performance of the DOM object selection of various popular frameworks like MooTools and jQuery.

  

About the Author

Jacob Gube is a Web developer, designer, and founder of Six Revisions, a blog on Web development and design. If you want to connect with the author, you can follow him on Twitter.

(al)

JavaScipt libraries have made huge leaps and bounds in helping developers write code and develop products more quickly. jQuery is one of the most popular JavaScript frameworks, with powerful tools that improve the user’s interaction with Web applications. jQuery has an additional advantage in that it allows developers to select elements on a page using CSS-like syntax.

To help you take it up a notch, we share below some methods that can help you give visitors to your website an amazing user experience. Here are over 45 impressive jQuery plug-ins and techniques that have been recently created and that could make the development of your next website an easier and more interesting experience than the last.

You may want to take a look at the following related posts:

• jQuery and JavaScript Coding: Examples and Best Practices
• 75 (Really) Useful JavaScript Techniques
• 80+ AJAX-Solutions For Professional Coding
• 60 More AJAX- and Javascript Solutions For Professional Coding

Dynamic Content

1. Build A Login Form With jQuery
In this tutorial, we’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. In this case, we will be creating a hypothetical login for the new tutsplus area that’s coming soon.

2. Spoiler Revealer with jQuery
A simple technique that hides some content first and fades it in once a link is clicked.

3. AJAX Upload
This AJAX file upload plug-in allows users to easily upload multiple files without having to refresh the page. In addition, you can use any element to trigger the file selection window. The plug-in creates a semi-transparent file input screen over the button you specify, so when a user clicks on the button, the normal file selection window is shown. After the user selects a file, the plug-in submits the form that contains the file input to an iFrame. So it isn’t true AJAX but provides the same user experience.

4. FCBKcomplete
Give your users fancy Facebook-like dynamic inputs, with auto-complete and pre-added values.

5. Create Accessible Charts Using Canvas and jQuery
This tool is proof that you can use the <canvas> element to illustrate HTML table data. The idea is a good one: putting the data in a table allows it to remain accessible, while the chart can be shown for visual enhancement.

 

Form Manipulation

6. Radio Button and Check Box Replacement
This jQuery tool replaces radio buttons and check boxes with a more appealing display.

7. Submit a Form without a Page Refresh

8. jQuery AJAX Contact Form
Here is a quick and easy way to make a jQuery AJAX contact form with a “honeypot” to foil email bots, load success and error messages dynamically without leaving the page and provide descriptive error messages detailing why submitted values have failed validation.

9. Simple jQuery Form Validation
This jQuery form shows live form-input validators both server-side and browser-side.

 

Navigation Menus

10. jQuery Context Menu
A context menu plug-in for jQuery that features easy implementation, keyboard shortcuts, CSS styling and control methods.

11. Kwicks for jQuery
Kwicks for jQuery started off as a port of the incredibly attractive MooTools framework, but has evolved into a highly customizable and versatile widget.

12. jQuery iPod-style Drilldown Menu
“We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It’s especially helpful when organizing large data structures that don’t translate well into traditional dropdown or fly-out menus.”

13. jQuery File Tree
The jQuery File Tree is a configurable AJAX file-browser plug-in for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.

14. How to Create a MooTools Home Page-Inspired Navigation Effect
In this tutorial, you’ll recreate the same effect seen in MooTools’s menu, but in jQuery!

15. CSS Sprites2
This tutorial demonstrates how to implement inline CSS Sprites2 using jQuery.

 

Manipulating Content

16. jQuery books widget
With some custom JavaScript and jQuery magic you can create some interesting widgets. A good way to demonstrate this functionality is by building a browsable Amazon.com books widget.

17. Text Size Slider
This tutorial explains how to use a slider to control the text size of an article on a page. This lets the user control exactly the size that suits them, and is also a pretty impressive feature to have on a site.

18. Pagination
Create navigational elements: when you have a large number of items, you can group them into pages and present navigational elements that allow users to move from one page to another.

19. Coda-Slider
As with the last tool, groups items together using navigational elements that allow users to move from one page to another.

20. Creating a Slick Auto-Playing Featured-Content Slider
If you love the Coda-Slider plug-in for jQuery, then you will find this plug-in very useful for displaying lots of content in a small area. This nice plug-in adds some features not found in the original Coda-Slider, such as slowly cycling through panels, auto-playing different types of custom content. An arrow indicator serves as a visual indication of which panel you are currently viewing.

• Demo can be found here.
• Download files here.

21. haccordion
A simple horizontal accordion plug-in for jQuery.

 

Tabular Data and Grids

22. Table Row Checkbox Toggle
This tool generically adds a toggle function to any table row you specify based on a CSS class name. It will, by default, toggle on any check boxes within that table row.

23. Tablesorter
Tablesorter is a jQuery plug-in that turns a standard HTML table with <th> and <td> tags into a sortable table without the need for page refreshes. Tablesorter can successfully parse and sort many types of data, including linked data, in a cell.

24. TableEditor
TableEditor provides flexible in-place editing of HTML tables. User-defined handler functions can easily be dropped in to update, for example, a data source via an AJAX request.

25. Scrollable HTML Table
This JavaScript code can be used to convert ordinary HTML tables into scrollable ones.

 

Lightbox Techniques

26. Revealing Photo Slider
Learn how to create a thumbnail photo gallery, where clicking a button reveals the entire photo and more information about that photo.

27. FancyBox
FancyBox was born to automatically scale large images to fit in windows, adding a nice drop-shadow under the zoomed item. It can be used to group related items and add navigation between them (using a pre-loading function). FancyBox is totally customizable through settings and CSS.

28. Facebox Image and Content Viewer
Facebox is a lightweight Facebook-style Lightbox that can display images, divs, and even entirely remote pages (via AJAX) inline on a page and on demand. It uses the compact jQuery library as its engine, unlike Lightbox v2.0, which uses Prototype.

29. jQuery.popeye
jQuery.popeye is a plug-in that transforms an unordered list of images into a simple image gallery. When an image is clicked, it enlarges Lightbox-style. The images are displayed in a box with “Previous” and “Next” controls, and information about the images can be included.

 

Image Galleries and Viewers

30. Simple Controls Gallery
Simple Controls Gallery rotates and displays each image by fading it into view over the previous one, with navigation controls that pop up when the mouse hovers over the gallery. The controls allow the user to play, pause or jump to a specific image in the gallery.

31. Agile Carousel
This jQuery plug-in allows you to easily create a custom carousel. Use the jQuery UI to enable many different types of transition. The plug-in uses PHP to call images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!

 

Browser Tweaks

32. Setting Equal Heights with jQuery
A script to equalize the heights of boxes within the same container and create a tidy grid.

33. jQuery IE6 PNG Transparency Fix
Another IE6 PNG fix that uses jQuery selectors to automatically fix all PNG images on a page.

34. BGI frame
This tool helps ease the pain of dealing with IE z-index issues. You can find a demo here.

35. Fix Overflow
IE puts scroll bars inside overflowing elements, and if an element is only one line, the scroll bar will cover it. This plug-in fixes that issue.

36. Lazy Load
Lazy Load delays the loading of images below the fold on long pages. As the user scrolls down, the images are loaded as needed. Check out the demo here.

37. Maxlength
It’s a fairly common design practice to limit the number of characters a user can input in a field while giving feedback on how many spaces are left. This plug-in automates that task.

 

Animation Effects

38. Scrollable
Scrollable is a flexible and lightweight (3.9 KB) jQuery plug-in for creating scrollable content. Scrollable items can contain any HTML, such as text, images, forms, video or any combination of them. You can make items scroll horizontally or vertically and decide how many items are visible at once.

39. jQuery Fading Menu – Replacing Content
“Instead of thinking about CSS as page layout and a way to style your page when it loads, you can use in animation and change it on-the-fly to react to events that happen on your page. Take for example a menu. You can take the “click” event that happens when clicking on a menu to do lots of stuff.”

40. Build an Animated Cartoon Robot with jQuery
This effect simulates a faux 3-D animated background reminiscent of old-school side-scrolling video games (and not unlike the parallax effect). This effect is created by layering several empty divs over each other, with transparent PNGs as background images. The backgrounds are animated at different speeds using jQuery.

41. Flip
Flip is a plug-in for jQuery that “flips” page elements in four directions. Compatible with Firefox 2+, Internet Explorer 6+, Safari 3.1 (for Windows) and Google Chrome.

• Download files here.

42. Use jQuery for Background Image Animations
Animate your menu whenever a user hovers over an item with this effect.

 

Image Manipulation

43. Jcrop
Jcrop is the quick and easy way to add image-cropping functionality to your Web application. It combines the ease of use of a typical jQuery plug-in with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

44. jQZoom
JQZoom is a JavaScript image magnifier that makes it really easy to magnify what you want. It is easy to customize and works on all modern browsers.

 

Miscellaneous

45. Date Range Picker
A rich date-range widget that uses the jQuery UI’s date picker and some additional custom interaction.

46. Sortable Lists
Unordered lists are commonly used to structure a website’s navigation. Having the ability to re-order such lists would be extremely useful. Here is a method to easily save and reload the list element order without getting lost as the page is refreshed.

47. Amazing Music Player Using Mouse Gestures and Hotkeys
Learn how to create an amazing music player, coded in XHTML and jQuery, that makes use of mouse gestures and hotkeys. You can click and drag the mouse to interact with the music player’s interface or use directional keys and the space bar instead of the mouse.

48. Script for Tracking Outbound Links in Google Analytics with jQuery
This code snippet uses Google Analytics and jQuery to automatically track outbound links. This interesting script enhances behavior by comparing the link’s domain to the current page’s domain and, if they are different, triggering the behavior. This is helpful when using a CMS or other tool that generates full URLs, including the “http://,” instead of relative ones.

<script type="text/javascript">
	$('#content a:not(.popupwindow)').filter(function() {
		var theHref = this;
		if (theHref.hostname && theHref.hostname !== location.hostname) {
			$(theHref).not(".noAutoIcon").addClass("offSite");
			$(theHref).not(".noAutoLink").attr('target','_blank').bind('click keypress', function(event) {
				var code=event.charCode || event.keyCode;
				if (!code || (code && code == 13)) {
					if(pageTracker){
						var fixedLink = this.href;
						fixedLink = fixedLink.replace(/https?:\/\/(.*)/,"$1");
						fixedLink = '/outgoing/'   fixedLink;
						pageTracker._trackPageview(fixedLink);
					};
				};
			});
		};
	});
</script>

49. jGrowl
jGrowl is a jQuery plug-in that delivers unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.

Related posts

You may want to take a look at the following related posts:

• jQuery and JavaScript Coding: Examples and Best Practices
• 75 (Really) Useful JavaScript Techniques
• 80+ AJAX-Solutions For Professional Coding
• 60 More AJAX- and Javascript Solutions For Professional Coding

About the author

Noura Yehia is a Web designer and blogger who can be found at Noupe and Devsnippets. If you want to connect with the author, you can follow her on Twitter.

As the mistletoe is hung and egg nog served, friends and family of Web developers around the world are pulling their hair trying to figure out what to get someone who works on the Web for a living. Our loved ones typically have no idea what to get us for Christmas, because for many, our job and online world are very foreign places. Instead of getting the traditional pack of underwear, neck ties or socks, you can give your friends and family a nudge in the right direction with a gift idea from this list.

Please notice that often it’s even a better idea to take a closer look at the blog of a web-developer to find a wish list containing concrete items that a designer, blogger or programmer would like to get for Christmas. It also makes sense to consider the environment of the web-developer — for instance, if you find an Apple logo on the back of his or her car, it is probably not a good idea to spend money on a Windows-application. If possible, pay close attention to the applications, frameworks and tools the web-developer uses. Once you know the environment, you can better find out what is needed and how an untraditional Christmas gift can become a pleasant Christmas surprise.

It’s been said that “It is better to give than to receive,” so let’s help our friends and family give to us by providing an extensive list of tools that we’d love to see under the Christmas tree this year. Feel free to send this list to your relatives if you’d like to get a solid, useful gift for the upcoming holidays!

1. Ergonomic Office Chair

Ergonomic office chairs are a bit of a pricey Christmas gift and may be out of most people’s shopping budget. High-quality chairs as a whole aren’t cheap, but when you take into account how long developers spend sitting in office chairs, they’re a small price to pay for health.

Here are some highly reviewed ergonomic chairs:

• Aeron ergonomic office chair: $674.

  

   

• Freedom Chair by Humanscale: $700.

  

   

• Stealcase Leap: $849.

  

   

• Office Star Deluxe Ergonomic Leather Chair: $270.

  

   

2. Ergonomic Keyboard

Because Web developers usually spend anywhere from 8 to 12 hours per day on the computer (sometimes more!), a comfortable keyboard is an absolute must. However, many developers use whatever keyboard is shipped with their computer, and many times the keyboard isn’t very friendly to extended usage.

Please notice that some web developers prefer to work with laptops instead of desktop PCs which is why it may be reasonable to look for an ergonomic mouse instead. Here are a few of the top ergonomic keyboards:

• Kinesis Advantage
  A little pricey, but one of the best: $299.

  

• Microsoft Natural Hand
  One of the most recommendable ergonomic keyboards: $60.

  

• Tru-Form Pro -Contoured Ergonomic Keyboard
  A highly rated Windows ergonomic keyboard: $80.

  

3. Office Plants

While it may not be high on the list of things a Web worker might want, a plant for the office is an extremely thoughtful gift. Studies have shown that plants make for much more productive work environments, because they improve air quality, control humidity and provide many other benefits. In fact, studies have shown that office spaces with plants actually improve creativity.

Photo by misocrazy

There are any number of household plants that can improve an office space. WikiHow has an excellent article on how to choose a good office plant for your Web developer.

4. Visual Editors

Visual editing applications can speed up the layout process of a website, providing quicker turnaround times. While not all Web developers use visual editors, many do use them to see what’s going on with their code.

Dreamweaver is a robust Web authoring tool for both Mac and Windows users. It’s far and away the most popular of the Web editors. $399.

Coda is a beautiful Mac application that combines a powerful text editor, Subversion, CSS, file transfer and terminal all in a single window. The file transfer is done by the Coda makers’ excellent FTP-application Transmit. If you already own Transmit, Coda costs $85, without $99.

You can find more editors worth considering in our reviews CSS Editors reviewed, WYSIWIG-Editors reviewed and Source code editors reviewed.

5. Advanced Text Editor

Text editors are lifelines for Web developers. Lots of time can be saved with text editors that have extended functionality. Auto-completion, language formatting and a slew of other features would be helpful when laying out a theme or programming Web functionality.

• Textmate
  An advanced text editor for Mac: $52.

  

   

• UltraEdit
  Popular professional Windows text editing application that boasts over 2 million users worldwide: $50.

  

   

• BBEdit
  Another powerful text editor for Mac users: $125.

  

   

• E Text Editor
  The Windows equivalent of Textmate: $34.95.

  

   

Please notice: if a web-developer uses Notepad++, a robust freeware editor for Windows users, he or she will be very unlikely to switch to one of the above mentioned applications.

6. CSS Editor

CSS editors are very specific visual editors that pay attention only to CSS. They’re quite handy to have around for debugging code and quickly setting up website designs.

• Style Master
  A robust CSS editor for both Mac and Windows users: $60.

  

   

• CSSEdit
  The Mac-only CSS editor that won the prestigious 2007 Apple Design Award for Best Development Tool: $39.

  

   

7. Subversion Client

Subversion is an excellent way for developers to work on shared code without having to worry about spoiling someone else’s updates. Subversion is also quite handy when it comes to backing up data and keeping versions of local files, which can be especially useful for designers wanting to store revisions of their work.

The only downside to subversion is the learning curve. It can be quite tricky learning how to create, manipulate and sync your repositories. But a subversion client can make the learning curve much smaller with tools for streamlining your workflow, making updates, reverting to previous revisions and using diff to compare versions all within a client on your computer, no terminal necessary. Here are some of the best subversion clients:

• Versions
  A Mac-only subversion client that also interfaces with Beanstalk, a subversion host: €39.00 (approximately $52).

  

   

• Tortoise SVN
  A freeware SVN utility for Windows. If a web-developer doesn’t know about SVN yet, he’ll never forget you if you’ll point him to it.

  

   

8. Hosted Versioning Subscription

What better complement to a nice subversion client than a subscription to a versioning service to remotely house your repository?

If you’re using Subversion, then Beanstalk is an excellent SVN hosting service. Beanstalk offers a free account as well as higher levels of service with more repositories, users and storage, starting at $15 per month.

If you’re using Git, then GitHub is a popular online Git repository. It has a free plan if you’re running an open-source project, giving you up to 100 MB of space, otherwise GitHub offers monthly subscription plans starting at $7 per month.

9. Creative Coffee Mugs

It’s a safe assumption that many designers and Web developers drink coffee or tea. Coffee mugs make great stocking stuffers, because they’re typically not that expensive, and it’s guaranteed they’ll be used. Web Urbanist has an excellent roundup of interesting coffee mugs that you can give as gifts this holiday season.

10. Backup Software

There is nothing more valuable to developers and designers than daily backups of their hard drive. Losing a hard drive is a Web worker’s worst nightmare, and any tool that can ensure it doesn’t happen is greatly appreciated.

• Mozy
  Mozy is a simple solution that runs in the background and backs up the hard drive at set intervals. Both Windows and Mac users can enjoy this service for free if they’re backing up less than 2 GB of data. Otherwise, a $5 per month subscription is required.

  

   

• Jungle Disk
  Jungle Disk uses your Amazon S3 account to regularly back up your hard drive on Amazon’s servers. Available for Windows, Linux and Mac users for $20.

  

   

• Syncback
  If you’re a Windows user, you can save money with the freeware utility Syncback, which schedules backups to an external hard drive. Lifehacker has an excellent tutorial on how to do this.

   

11. Browsershots

Browsershots is an incredible resource that every developer should have. Browsershots takes a screenshot of any Web page and allows you to test layouts across many different browser types and operating systems. Developers can see how their layout looks in IE on Windows, Firefox on Linux, and almost any other combination they can think of.

Browsershots offers a priority service that gives paying members immediate screenshot processing (which can otherwise take hours if many screenshots are requested).

12. Subscription to libraries or magazines

Knowledge is the gift that keeps on giving. It’s definitely a good idea to give a web-developer subscription to a journal or magazine, or you can also consider a subscription for an online-library. For instance, O’Reilly is an excellent resource for the developer thirsting for knowledge. A Web development industry leader for many years, O’Reilly provides many great resources for those wanting to learn new languages, techniques and other development skills.

For a monthly fee, O’Reilly provides online access to its complete library, with a service called Safari. The Safari Bookshelf plan is $22.99 and restricts access to 10 books per month. The Safari Library plan offers more types of content (video, full downloads) and allows for unlimited access to its books for $42.99 a month.

13. Books, books, books

There are plenty of books out there that a web developer would love to get for Christmas. It would be important to list all of them, but fortunately we and other bloggerse have selected some useful books already. Make sure that you select a gift that really fits to the interests of a person: no, not every web-developer is a huge fan of Swiss design and not every typographer would love to have a book on SEO optimization techniques. Here are some useful lists where you can find useful and interestind web-development related books:

• Usability and Interface Design Books
• 30 Essential Books For Industrial Designers
  Some useful books for web-developers are in the list as well.
• 25 Must Buy, Borrow Or Steal Books For Web Designers
• 40+ Books For Professional Design and Development
• 30 Delightful Graphic Design Books
• Useful Web Design Books
• Powerful Design Books

14. Adobe Creative Suite 4 Web Premium

If you’re feeling really generous this Christmas, then head on over to Adobe and snag the Adobe Creative Suite 4 Web Premium software package. While it is a tad expensive ($1,699), you’ll get 11 Adobe products that can greatly enhance a Web developer’s workflow. Photoshop, Dreamweaver, Illustrator and Fireworks are all included, along with many other programs. This software package is a virtual Swiss army knife for Web developers. If you give it to a Web developer, he will certainly never forget you.

Notice: while there isn’t a comparable set of free tools to match the Creative Suite 4 Web Premium package, Gimp is an open-source image editor that is supported across Linux, Mac and Windows platforms. If a web-developer is a Gimp fan, you may want to search for a useful Gimp-book out there.

15. iPhone Developer Program

Many developers want to get more involved in the iPhone Developer program, which gives developers access to build and distribute iPhone apps through Apple. A standard program developer account costs $99.

An excellent complementary gift to the iPhone Developer program would be the iPhone Developer’s Cookbook: Building Applications with the iPhone SDK, an excellent tutorial that answers questions that the iPhone SDK documentation doesn’t answer.

16. Password Management Software

Nobody likes to remember all of their passwords, least of all Web developers. We may have tens or even hundreds of account, user name and password combinations to remember, many of which are used daily. Software that stores passwords is a perfect gift for any Web developer. There are plenty of software options, both free and paid, that help with password storage on any platform.

• 1Password
  Highly rated Mac software that stores your passwords and syncs data between different browsers and other programs: $39.95.

  

   

• Roboform
  Roboform is another highly rated Windows password client that has won many awards, such as PC Magazine Editor’s Choice and Download.com’s Software of the Year: $29.95.

  

   

• Passpack
  Passpack is an online solution for storing passwords. It offers a free account of up to 100 entries and a pro account for €10 ($13.50).

  Passpack

   

• KeePass
  An open-source password manager for Windows.

  

   

17. Screen Capture Software

Capturing screens is an almost daily routine with Web developers. A picture is worth a thousand words, and this is especially true with development. Many times, it’s easier just to show a screenshot of a buggy Web page than to try to describe what’s wrong. Here are a few screenshot services and software that can speed up this process.

• SnagIt
  Windows-only screen capturing software that quickly captures, edits and shares screenshots: $49.95.

  

   

• Jing
  Jing is the little brother to SnagIt, because they’re both made by TechSmith. Jing quickly takes snapshots and allows simple editing and sharing via many online services. Jing is freeware.

  

   

• Skitch
  Skitch is similar to Jing, except that the software only works for Mac computers. You can snap a screenshot, annotate, edit and upload the screenshot to skitch.com. Skitch is freeware.

  

   

18. Project Management Software

There are plenty of reasons for Web developers to use project management software: to collaborate with other project members, to organize their workflow and to generally stay on top of all that needs to be done when working on a project. Here are a few of the best project management and task manager software products.

• Basecamp
  Long considered the best project management tool, Basecamp is an excellent online service that tracks projects for many users. Basecamp offers a free basic plan, and extended plans start at $24 per month.

  

   

• Action Method
  Action Method is an excellent project management tool that allows you to add references, discussions and events to any project. Unlike services like Basecamp’s, Action Method allows you create unlimited projects with a paid account of $12 a month.

  

   

• OpenProj
  OpenProj is an open-source project management solution for your desktop. It has been downloaded over 800,000 times since its launch.

  

   

• activeCollab
  activeCollab is another highly rated online project management software package. However, unlike Basecamp, activeCollab allows you to install the software on your own website and server. Plans start at $199 per year.

  

   

19. Idea Capturing Tools

Keeping ideas and thoughts together can be a struggle for developers and designers. Fortunately, there are tools that can capture and store the ideas.

• Evernote
  This tool can be indispensable for capturing ideas anywhere. You can record a voice memo, take a screenshot, clip a Web page or just write a note. Evernote syncs your captured ideas online and locally, and it even has mobile access and an iPhone app. With Evernote, you’ll never let your Web developer lose an idea again. (Evernote even allows people to purchase the premium level plan as a gift.)

  

   

• Jott
  Jott allows you to call a number and record an idea (or “jott”), and then the speech is converted to text. Jott is a free service but has extended plans starting at $39.50 a year.

  

   

• Moleskine – Sometimes the best way to capture a thought is to write it down the old-fashioned way, with pen and paper. A moleskine is an excellent gift for those who prefer the paper method.

  

   

20. Music or movies

Because Web developers spend hours in front of the computer each day, it’s only natural that many will listen to music. Music is a gift that never wears out. Consider an iTunes or Amazon MP3 gift card.

A subscription to a music service is another great gift idea; for a monthly fee, you can listen to as much music as you want. Rhapsody music is a music subscription service that allows you to use (non-iPod) portable music players and your computer to stream any song, album or artist from its vast collection. Plans start at $12.99.

Another great idea is a high performance over-ear headphones that deliver the perfect atmosphere for a creative and enjoyable workflow. Some good examples of professional over-ear headphones are:

• Sennheiser HD-555 Audiophile Headphones
  A comfortable, high-quality headphone system. Price: $98.99.

  

   

• Bose® QuietComfort 2 Acoustic Noise Cancelling Headphones
  This system has a noise reduction and quality sound for travel, work and home. AAA batteries guarantee a 40 hours average life. Price: $269.

  

   

• the recent Consumersearch Headphones Review may provide you with more useful pointers to various headphones.

You may also consider buying a couple of DVDs with movies the web-developer will probably like. In the end, web developers are also people and yes, sometimes we do watch movies.

Summary

To conclude, here is a brief summary of some useful things that would put a smile on a web-developer’s face, make him or her happy and will definitely help to make the life of a web-developer easier:

• ergonomic office chair,
• ergonomic keyboard or mouse,
• creative coffee mugs,
• office plants,
• visual editors, CSS-editors and text-editors,
• Subversion client,
• hosted versioning subscription,
• backup software,
• subscriptions to librarier or magazines (e.g. O’Reilly),
• books, books, books,
• Adobe Creative Suite 4 Web Premium,
• iPhone Developer Program,
• password management software,
• screen capture software,
• project management software,
• idea capturing tools,
• music, movies or headphones,
• even more ideas…

What’s your favourite gift?

What would you like to get as a present for Christmas? Is something missing in the list? And what are you going to give to web developers for this Christmas? Share your thoughts, ideas and opinions in the comments!

What gift would you like to get for Christmas?
( polls)

About the author

Glen Stansberry is the editor at Web Jackalope, a blog about creative Web development. You can follow him on Twitter. (al)

Photoshop users are able to benefit from the vast amount of high-quality resources that are freely available to the community. Brushes get a lot of attention, but custom shapes are also extremely useful in the right situations. Finding a custom shape that has already been created can save you some time and headaches in your design, and fortunately there is a very wide variety of custom shapes available.

This post highlights 80 different sets of custom shapes (over 2,500 individual shapes) in several different categories. If you plan to download and use any of these shapes be sure to check to terms and conditions set by the creator of the shapes.

1. People

People Silhouettes (306 shapes)

Costumes and Characters Shapes (56 shapes)

Skateboarding (9 shapes)

Skater Collection (3 shapes)

Skateboarders (8 shapes)

Stock Girls (8 shapes)

Businessman Silhouettes (12 shapes)

Business Girls (12 silhouettes)

Jumping People Silhouettes (104 shapes)

Break Dancing (8 shapes)

Hoops (57 shapes)

Presentational Shapes (10 shapes)

Random People Shapes (11 shapes)

People Shape Set (25 shapes)

Hot Babes (7 shapes)

Go-Go Girls (18 shapes)

Sexy Stances (13 shapes)

Ladies (7 shapes)

Sexy Girls (47 shapes)

2. Animals

Birds (12 shapes)

Butterflies (38 shapes)

Horses (9 shapes)

Horses (15 shapes)

Zebras (6 shapes)

Sea Creatures (27 shapes)

Animals (10 shapes)

Animal Patterns (13 shapes)

Bugs (20 shapes)

Weathered Flying Bugs (21 shapes)

3. Planes and Boats

Aircraft (21 shapes)

Maritime (27 shapes)

WW2 Planes (13 shapes)

4. Guns and Weapons

Guns (30 shapes)

Guns (26 shapes)

Ray Guns and Laser Blasters (15 shapes)

I Love Weapons (12 shapes)

5. Halloween Shapes

Halloween Shapes (23 shapes)

Halloween Shapes (10 shapes)

6. Trees

Trees (17 shapes)

Dead Trees (24 shapes)

Live Trees (21 shapes)

Plan Trees (20 shapes)

7. Circles

Retro Circles (10 shapes)

Circles (10 shapes)

Circles, Lines and Sunlights (108 shapes)

8. Random Shapes

Stars (200 shapes)

Sunbursts (30 shapes)

Splats and Drips (15 shapes)

Splat Shapes (8 shapes)

Stains & Blots (34 shapes)

Drips (25 shapes)

Paisley (24 shapes)

Kiddy Stuffs (72 shapes)

Ribbon Collection (3 shapes)

Voters Collection (2 shapes)

Surfing Themed Shapes (6 shapes)

Hero Shapes (13 shapes)

Flames (5 shapes)

Markers (23 shapes)

Vector Shapes (13 shapes)

Arrows (10 shapes)

Speech Bubble Shapes (42 shapes)

Cartoon Shapes (25 shapes)

Assorted Logos (38 shapes)

CD & DVD Logos (7 shapes)

Foliage Shapes (371 shapes)

Tools (9 shapes)

I Love Skulls (12 shapes)

Urban Shapes (31 shapes)

World Map (3 shapes)

Banner and Scrolls (28 shapes)

Art Supplies (16 shapes)

Skyline Collection (6 shapes)

Arabeski (23 shapes)

9. Combination Packs

Custom Shapes Pack v. 1.1 (100 shapes)

Custom Shape Pack (45 shapes)

50s Custom Shapes (14 shapes)

Revolution Collection (6 shapes)

Custom Shape Mix (24 shapes)

Vector Shape Mix (50 shapes)

If you’re interested in learning more about the basics of custom shapes, how to load them, and how to create your own, try the following resources.

• What are Photoshop Custom Shapes?
• Loading Custom Shapes
• Creating Custom Shapes
• Create Your Own Photoshop Custom Shapes
• Creating Photoshop Custom Shape Sets

About the Author:

Steven Snell is a Web designer and freelance blogger who can be found on his own blogs: Vandelay Website Design and DesignM.ag. (al)

RSS is one of those technologies that are extremely simple yet extremely powerful. Currently, RSS is the de facto standard for blog syndication, and it is used widely in both personal and corporate settings; for example, in blogs. And because a large percentage of these blogs run on WordPress, we’ll cover in this post some (hopefully) relatively unknown but useful RSS-related tricks and hacks that will help you use RSS in a more effective way — and without unnecessary and chunky WordPress plug-ins.

Let’s take a look at 10 useful, yet rather unknown RSS-tricks for WordPress. Each section of the article presents a problem, suggests a solution and provides you with an explanation of the solution, so that you can not just solve some of your RSS-related problems but also understand what you are actually doing. Thus, you can make sure your WordPress theme remains under your control and is not bloated with some obscure source code.

1. Control When Your Posts are Available via RSS

The problem. Have you ever published an article and then immediately noticed an error? Sure, you can edit it, but there’s another problem: the article has already been published in your RSS feed. To avoid this kind of problem, use this recipe to create a delay between the publication of a post and its availability in your RSS feed.

The solution. To apply this hack, simply paste the following code into your theme’s function.php file. If your theme doesn’t have this file, just create it.

function publish_later_on_feed($where) {
	global $wpdb;

	if ( is_feed() ) {
		// timestamp in WP-format
		$now = gmdate('Y-m-d H:i:s');

		// value for wait; + device
		$wait = '5'; // integer

		// http://dev.mysql.com/doc/refman/5.0/en/date-and-time-functions.html#function_timestampdiff
		$device = 'MINUTE'; //MINUTE, HOUR, DAY, WEEK, MONTH, YEAR

		// add SQL-sytax to default $where
		$where .= " AND TIMESTAMPDIFF($device, $wpdb->posts.post_date_gmt, '$now') > $wait ";
	}
	return $where;
}

add_filter('posts_where', 'publish_later_on_feed');

Code explanation. The above code will add a 5-minute delay to the time between when your post is published on your blog and when it appears in your RSS feed. To change the length of the delay, change the value of the $wait variable on line 9.

Sources

• Publish your feed later

2. Redirecting WordPress Feeds to FeedBurner Feeds

The problem. Beginner bloggers usually start to use FeedBurner only after they have seen it used on many other blogs and realize how useful and cool this tool is. They sign up and start to use it, but their early readers are already subscribed to their default WordPress feed.

Another problem: do you often change your theme? If so, you must be bored having to edit each call to bloginfo(’rss2_url’) and replace it with your FeedBurner feed’s URL.

The solution. The solution to both problems described above is simple: use server redirections.

1. Create a backup of your .htaccess file, located in the root of your Web server.
2. Edit the .htaccess file and add the following code. Don’t forget to modify the feed’s URL with your own feed’s URL.

   # temp redirect wordpress content feeds to feedburner
   <IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteCond %{HTTP_USER_AGENT} !FeedBurner    [NC]
    RewriteCond %{HTTP_USER_AGENT} !FeedValidator [NC]
    RewriteRule ^feed/?([_0-9a-z-]+)?/?$ http://feeds.feedburner.com/wprecipes [R=302,NC,L]
   </IfModule>

3. Save the file. You’re done!

Code explanation. Each time someone clicks on a link to http://www.yourblog.com/feed, he or she will be redirected to http://feeds.feedburner.com/yourblog. This way, you will have never lost an RSS subscriber, and even if you change your theme twice a day, you’ll never have to manually edit your RSS feed links again.

Sources

• Redirect WordPress feeds to FeedBurner via htaccess (Redux)
• How to: redirect WordPress RSS feeds to FeedBurner with .htaccess

3. Insert Ads (or Anything Else) in Your RSS Feed

The problem. Monetizing RSS feeds is currently becoming a common practice, and many blog owners do it to maximize their income. FeedBurner can insert AdSense ads into your feed items, but you need at least 500 subscribers to qualify, and you can’t use any ads other than the AdSense ads provided by FeedBurner.

The solution. It is possible, though, to insert other kinds of ads into your RSS feed. You can, for example, use a link to a free WordPress theme only for your RSS subscribers.

Follow these simple steps to perform this hack:

1. Edit the functions.php file of your theme. If your theme doesn’t have a functions.php file, simply create one.
2. Paste the following code into your functions.php file:

   <?php
   function insertAds($content) {
       $content = $content.'<hr /><a href="http://www.wprecipes.com">Have you visited WpRecipes today?</a><hr />';
       return $content;
   }
   add_filter('the_excerpt_rss', 'insertAds');
   add_filter('the_content_rss', 'insertAds');
   ?>

3. Save the file. You’re now displaying your ads in your RSS feed!

Code explanation. I have seen many similar hacks on the Web, but all of them require you to edit WordPress core files to achieve the same result. Of course, editing WordPress core files is a very bad idea because then you would have to re-edit the files each time you upgrade your blog. Instead, this hack uses the add_filter() WordPress function to insert content into your RSS feed without editing any core files.

Sources

• How to: insert ads in your RSS feed
• WordPress, ajouter du contenu dans son flux RSS !

4. Format Your Images for Feed Readers

The problem. You took a lot of time to write and format your post and add beautiful screenshots. It looks so good on your blog. Sadly, when the post is displayed in Google Reader or any other RSS reader, it doesn’t look so great.

The solution. This is due to the fact that most feed readers display images inline with text:

To avoid this problem, add a CSS class to display the image as a block. WordPress provides the built-in class “center“:

<img src="http://88.198.60.17/images/wordpress-rss-hacks/myimage.jpg" alt="This is my image" class="center"/>

Sources

• How to format images for feed readers

5. Provide Your Readers with a Feed for Each Post

The problem. When a post has lots and lots of comments, it can be hard for readers to follow the conversation. Most WordPress users don’t know this, but our favorite blogging engine has a built-in function for providing an RSS feed for the comments in each post.

The solution. Well, this recipe isn’t really a hack or anything: to provide an RSS feed for the comments in a particular post, just call the comment_rss_link() function:

<?php comments_rss_link('&raquo; Comments RSS Feed'); ?>

Sources

• WordPress how to: provide an RSS feed for the comments in each post

6. Exclude Categories from Your RSS Feed

The problem. Do you use one of your blog categories to let readers know about your website’s news, or does your blog feature a category that has nothing to do with the rest of your content? If so, it is generally not a good idea to include it in your RSS feed.

The solution. Here’s how to get rid of one of the categories in your RSS feed:

1. First, get the numeric ID of the category you want to exclude. If you don’t know how to get the ID of a particular category, you can learn how here.
2. Once you have the ID of the category you want to exclude from your RSS feed, edit the functions.php file in your theme. Create the file if it doesn’t exist.
3. Paste the following code in it:

   function myFilter($query) {
       if ($query->is_feed) {
           $query->set('cat','-5'); //Don't forget to change the category ID =^o^=
       }
   return $query;
   }
   
   add_filter('pre_get_posts','myFilter');

4. Save the file, and you’re done!

Code explanation. This hack works exactly the same way as the previous one: create a custom function to exclude the category that you don’t want to appear in your RSS feed, and then use the super-useful add_filter() function to apply it to the pre_get_posts() WordPress core function.

Sources

• Excluding posts from your WordPress feed
• How to: exclude categories from your RSS feed

7. Display Any RSS Feed on Your WordPress Blog

The problem. Do you have more than one blog, or do you manage a forum? If so, you may want to be able to display any RSS feed on your WordPress blog.

The solution. Many plug-ins can do the job, but they’re not necessary at all. WordPress has a built-in RSS reader that is used, for example, to display news on your dashboard. All you have to do is use it in your theme.

1. Paste the following code anywhere in your theme (personally, I’d put it in the sidebar, the footer or, even better, the page template):

   <?php include_once(ABSPATH.WPINC.'/rss.php');
   wp_rss('http://feeds.feedburner.com/wprecipes', 3); ?>

2. Save it and you’re done. It’s as easy as that!

Code explanation. The first thing we have done is include the rss.php file from WordPress core. This file allows us to use the wp_rss() function, which takes two parameters: the first is the RSS feed’s URL, and the second is the number of RSS entries to be displayed.

Sources

• How to: Display any RSS feed on your WordPress blog

8. Use Category-Specific RSS Feeds

The problem. Many blogs talk about a lot of different topics: design, programming, blogging tips, etc. Have you ever come across a blog in which you have enjoyed only one category of posts? If so, you should definitely consider offering one feed per category to your own readers.

The solution. Let’s say you’d like to be able to subscribe only to TheGridSystem’s tools section. The category URL is:

http://www.thegridsystem.org/categories/tools/

To get an RSS feed for this category, you simply have to add /feed to the end of the URL:

http://www.thegridsystem.org/categories/tools/feed

Pretty easy, isn’t it? But pretty useful, too, in my opinion.

9. List RSS Feeds by Category

The problem. If you like the previous hack, you will probably also want to be able to display the names of all your category feeds in a list to your readers.

The solution.

1. Edit any of your theme files, where you want to list your categories and their accompanying feeds.
2. Paste the following code:

   <?php wp_list_categories('feed_image=http://www.myblog.com/image.gif&feed=XML Feed&optioncount=1&children=0'); ?>

3. Save the file. You categories will now be displayed, along with their RSS feeds!

Code explanation. This hack uses only the good old wp_list_categories() function, with two parameters. The first is feed_image, which allows us to specify the URL to be displayed as a feed image. The second parameter is feed, which is used to specify the feed format.

10. Get Rid of RSS Feeds the Clean Way

The problem. Let’s say you’re using WordPress as a CMS to manage your online portfolio or your company’s website. In such cases, the RSS feed isn’t that useful, and some people would probably want to remove it.

The solution. I have seen many “hacks” on the Web where people say you just have to remove the include on the wp-settings.php core file. I don’t think you should ever edit a core file. Instead, the following hack will do the job. Simply paste this code in the functions.php file of your theme:

function fb_disable_feed() {
	wp_die( __('No feed available,please visit our <a href="'. get_bloginfo('url') .'">homepage</a>!') );
}

add_action('do_feed', 'fb_disable_feed', 1);
add_action('do_feed_rdf', 'fb_disable_feed', 1);
add_action('do_feed_rss', 'fb_disable_feed', 1);
add_action('do_feed_rss2', 'fb_disable_feed', 1);
add_action('do_feed_atom', 'fb_disable_feed', 1);

Sources

• Disable WordPress feed

About the author

This guest post was written by Jean-Baptiste Jung, a 26-year-old blogger from Belgium, who blogs about WordPress at WpRecipes and about everything related to blogging and programming at Cats Who Code. You can stay in touch with Jean by following him on Twitter. (al)

If you haven’t taken a look at the (X)HTML/CSS templates that are available for free from a variety of sources, you may be surprised by the quality you can find. WordPress themes tend to get a lot of exposure and attention in the design community right now, but there is also a wide variety of high-quality (X)HTML/CSS templates that are free of charge.

In this post, we’ll showcase 100 free high-quality templates. Hopefully some of them will save you some time in your design and development. While they are generally free for personal or commercial use, always remember to check the license first for any restrictions or guidelines.

You may want to take a look at other collections as well (some are from Smashing Magazine, some are not):

• Free Design Templates
• Free CSS Layouts and Templates
• 100 Excellent Free WordPress Themes
• 25 Sites to download Free Web Templates

100 Free High-Quality XHTML/CSS Templates

Package | Registration is necessary.

Consultant | Download Consultant

Environmental Brand | Download Environmental Brand

Internet Jobs | Download Internet Jobs

Internet Music | Download Internet Music

Greefies | Download Greefies

Squick Design | Download Squick Design

Harvest | Download Harvest

Blackberry | Download Blackberry

Flower Shop | Download Flower Shop

Lingerie Store | Download Lingerie Store

Web Application | Download Web Application

Internet Studio | Download Internet Studio

Puzzled | Download Puzzled

Journey of Love | Must register with Registration is necessary.

Strockes | Must register with Registration is necessary.

EC Mania | Must register with Registration is necessary.

Cluster | Must register with Registration is necessary to download.

Temper | Download Temper

Jet 30 | Download Jet 30

Green Web | Download Green Web

Flash Web | Download Flash Web

AppleWeb | Download Apple Web

Trial Impact | Download Trial Impact

Aquatic | Download Aquatic

Business Events | Download Business Events

Cool Web | Download Cool Web

Genious Web | Download Genious Web

Expert Vision | Download Expert Vision

Intercraft | Download Intercraft

Clean Design | Download Clean Design

Business Design | Download Business Design

Delicious Fruit | Download Delicious Fruit

MultiFlex 3 | Download MultiFlex 3

Simple Life | Download Simple Life

Street Style | Download Street Style

Miss Understood | Download Miss Understood

Street Life | Download Street Life

skuteczni | Download skuteczni

Clarity | Download Clarity

The Old Forest | Download The Old Forest

Typography Paramount | Download Typography Paramount

Subordinate | Download Subordinate

Nature’s Charm II | Download Nature’s Charm II

Zenlike | Download Zenlike

Clicker | Download Clicker

Biz Company | Download Biz Company

Attractive Business Temp | Download Attractive Business Template

Happy Template | Download Happy Template

Internet Encyclopedia | Download Internet Encyclopedia

Concept Nova | Download Concept Nova

Free CSS Full Site Template | Download Free CSS Full Site Template

Black Eyed Susan | Download Black Eyed Susan

Reference | Download Reference

Interlude | Download Interlude

Printing | Download Printing

Numerology | Download Numerology

Greeny Grass | Download Greeny Grass

Collaboration | Download Collaboration

Breakfast | Download Breakfast

News Flash | Download News Flash

Discovery | Download Discovery

Adios | Download Adios

Old Architecture | Download Old Architecture

Beauty Co. | Download Beauty Co.

Jewelry Shop | Download Jewelry Shop

Book Store | Download Book Store

Real Estate | Download Real Estate

Business Company Dark Blue | Download Business Company Dark Blue

Electronix | Download Electronix

Photo Gallery Green | Download Photo Gallery Green

Quartz Storage | Download Quartz Storage

Aero Solutions | Download Aero Solutions

Unnamed | Download Unnamed

Imagination | Download Imagination

Corporate | Download Corporate

Urban Artist | Download Urban Artist

VectorLover | Download VectorLover

Keep it Simple | Download Keep it Simple

FreshMedia | Download FreshMedia

EliteCircle | Download EliteCircle

Nature Theme | Download Nature Theme

Mint Idea | Download Mint Idea

Metplate | Download Metplate

Decent Photo Gallery | Download Decent Photo Gallery

Consulting Services | Download Consulting Services

Flare | Download Flare

Water Spill | Download Water Spill

Inverted Headline | Download Inverted Headline

Choice | Download Choice

Purple | Download Purple

Business Elegance | Download Business Elegance

Symisun | Download Symisun

Ad Agency | Download Ad Agency

GUITARhero | Download GUITARhero

Pixel Green | Download Pixel Green

Subdued | Download Subdued

The Big Leaf | Download the Big Leaf

GreenWay | Download GreenWay

BWDEC2007 | Download BWDEC2007

Other collections:

• Free Design Templates
• Free CSS Layouts and Templates
• 100 Excellent Free WordPress Themes
• 25 Sites to download Free Web Templates

About the Author

Steven Snell is a Web designer and freelance blogger who can be found on his own blogs: Vandelay Website Design and DesignM.ag. (al)