It seems like everyone these days is downloading, watching, and sharing videos from video-sharing sites like YouTube, Google Video, MetaCafe, DailyMotion, Veoh, Break, and a ton of other similar sites. Whether you want to watch the video on your iPod while working out, insert it into a PowerPoint presentation to add some spice, or simply download a video before it’s removed, it’s quite essential to know how to download, convert, and play these videos.

There are basically two ways to download videos off the Internet and that’s how I’ll split up this post: either via a web app or via a desktop application. Personally, I like the web applications better simply because you don’t have to clutter up and slow down your computer with all kinds of software!

Free Web services for downloading videos from video-sharing sites

	ClipNabber allows you to download videos from YouTube, Metacafe, etc by simply copying and pasting the URL. You’ll then get a link whereby you can download the file to your computer, iPod, iPhone, or any other media player. You’ll need to have an FLV player for the YouTube videos. Quick and very easy to use!
	Zamzar is a free online file conversion web application that can not only convert videos off the Internet to AVI, MPEG, 3GP, MP4, MOV, etc, but also converts between audio, image, and document formats. Paste the URL into Step 1 and then convert the file to your favorite format.
	VideoDownloader is a FireFox extension, but also allows you to paste in any URL from many sites such as Blip.TV, iFilm, and even social networking sites like MySpace. You can also download a free FLV player from their site to play the videos.
	Vixy.net is another site that not only downloads online videos, but will also convert them AVI, MOV, MP4, 3GP, or MP3 (if you want to extract the audio from the file). Using this site, you don’t have to worry about downloading a FLV player as you can convert it to Windows format. (Same as Zamzar)
	KeepVid also supports just about any video sharing site out there and the only difference about this site is that it also has a Top Videos section, so you can quickly download the most watched videos around the web.
	Media Converter is similar to ZamZar and vixy.net, but requires you to create an account and log in. Also, it seems like it only supports downloading and converting videos from YouTube. You can also download their video download program, but it only supports 5 sites.
	Hey! Watch is an online video encoding web service that encodes video into different formats including HD very quickly. The graphical interface is very nice and there are lots of features and options, such as the ability to transfer any video from the web directly to an FTP server or to online storage.
	YoutubeX, as the name suggests, allows you to download videos from YouTube. Obviously, it only supports YouTube, but it has a couple of other features, such as the ability to play your video on the site and find popular videos quickly.
	VideoRonk searches across multiple video-sharing sites such as Google Video, YouTube, MetaCafe and DailyMotion to find the most popular videos on each of them. You can either watch them on VideoRonk or download them to your computer in FLV format.
	VidDownloader supports about 10 sites including the major ones and can download the videos in DivX AVI format. It’s very easy to use and can also extract only the audio from a video by choosing “Just Audio” on the download page. You don’t have to worry about having an FLV player since it converts the files to Windows format.
	According to their web site, they support more than 98 video sites including MySpace, CollegeHumor, iFilm, etc. You’ll have to rename the files you download from YouTube with the .FLV extension at the end.
	This site is a foreign site, but is easy to use and supports most of the major sites. You can also download a free FLV player off their site to play videos from YouTube.
	DownThisVideo has a nice tag cloud at the top that you can click on to find videos quickly. From what I could tell, this site is mostly used by Japanese because the popular videos are mostly Anime, etc. However, you can still use it to download any YouTube video.

Video Downloaders for your DeSktop

If you prefer to have a desktop application that can download videos for you, check out the following list:

1. Orbit Downloader - This is by far the best desktop application I have seen for downloading any type of social media off the Internet. It can download videos and music from MySpace, YouTube, Pandora, Rapidshare, and lots more. It has a great interface and carries a very small foot print.

2. VDownloader - A small little application that can download videos from many sites and converts them to AVI or MPG format.

3. VideoDownloader - A useful FireFox add-on that supports more than 60 video sharing sites. It can also download other objects on a web page, such as movies, MP3s, flash files, and Quicktime movies directly.

4. Ares Tube - Another popular video download application that is very small and very easy to use. You can download videos in batches by entering URLs into a queue and Ares Tube can convert them into different formats such as iPod, MP4, MPG, etc.

4. YouTubeGrabber - Not a very fancy program, it simply takes your URL and downloads the file. No conversion is done and you’ll need to install an FLV player to watch the videos.

5. KeepV - Downloads videos from YouTube, MySpace, and Google and converts them to either MOV, 3GP, AVI, iPod, or PSP format.

Hopefully, using one of the tools above, you can download the video you want! I’m sure the arsenal of web services and desktop apps will grow, so this list will be updated as needed.

When it comes to design of modern web-applications, Ajax is considered as a standard approach. Interactive solutions for lightboxes, form validation, navigation, search, tooltips and tables are developed using Ajax libraries and nifty Ajax scripts. Ajax is useful and powerful. However, when using Ajax, one should keep in mind its drawbacks in terms of usability and accessibility. With an extensive use of Ajax, you can easily confuse your visitors offering too much control and too many features.

Nevertheless, it’s important to know what’s possible, particularly since you can develop new ideas further, improving the quality of your web applications. Since our last article 80+ AJAX-Solutions For Professional Coding many things have changed — new scripts were introduced, new creative solutions were developed, new robust development kits have been released. They all are supposed to serve a better user experience and provide more comfort for web-developers.

This post presents over 60 new useful Ajax scripts, libraries and solutions which you can use in your future projects. License agreements can change from time to time — please read them carefully before using the script in a commercial web-application.

You might want to consider checking out the following related posts:

• 30 Scripts For Galleries, Slideshows and Lightboxes presents scripts of impressive slideshows, lightboxes and galleries you can use for effective presentations of your images,
• 40+ Tooltips Scripts With AJAX, JavaScript & CSS with handy tooltips scripts for intuitive and well-designed visual clues,
• Data Grids with AJAX, DHTML and JavaScript with free solutions for data grids, developed with AJAX, DHTML and/or JavaScript,
• Powerful CSS-techniques For Effective Coding which features 50 new CSS-techniques, ideas and ready-to-use solutions for effective CSS-coding.

Please notice: the overview presented below is not just a yet-another-one-collection of Ajax-scripts. It’s a collection of really useful ones, the ones you can use in almost every project you’ll be working on.

Useful Ajax Scripts

Mocha UI
Mocha is a web applications user interface library built on the Mootools javascript framework. The Mocha GUI components are made with <canvas> tag graphics.

An Accessible Slider
“Recently we designed and developed an interface that required a slider control, which allows users to choose one or a range of values on a continuum. Values on a slider can represent anything from hours on a clock to the volume on a music player to a complex, proprietary data set. In its simplest form, the slider is displayed as an axis of values with a handle to drag and select a value, or two handles for selecting a range.”

FancyUpload
Swf meets Ajax. An upload widget that allows queued multiple-file upload including progress bars.

Coda Popup Bubbles
“When you move the mouse over the popup, this triggers a mouseout on the image used to trigger the popup being shown. I’ll explain (carefully) how to make sure the effect doesn’t fail in this situation.”

Facebook Style Input Box
The approach to re-create the autocomplete method of adding multiple recipients to messages used on Facebook. “I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)”

Rich Text Editor
The Rich Text Editor is a UI control that replaces a standard HTML textarea. It allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images. The Rich Text Editor’s Toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization. The tool is based upon Yahoo UI Library.

iCarousel
iCarousel is an open source (free) javascript tool for creating carousel like widgets.

Ext JS - JavaScript Library
An extensive JavaScript-Framework with numerous modules and components such as tables, trees, windows, layouts, forms, and tabs. All of them look as if they’ve been used in standard desktop-applications.

Moo Wheel
The purpose of this script is to provide a unique and elegant way to visualize data using Javascript and the <canvas>-object. This type of visualization can be used to display connections between many different objects, be them people, places, things, or otherwise. The script is licensed under an MIT-style license.

Product Slider
This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items.

Taggify Tooltips
This post demonstrates how you can use Taggify widget to enhance your blog with the functionality to show popup tooltips for parts of your images.

Gettyone Search Options Menu
Learn how to implement a Gettyone-like search options menu which display a layer with some search options below the input search field, when an user click on the input field to searching for something.

Moo Canvas
Modern browser support the <canvas> tag to allow 2D command-based drawing. This script provides the third dimension, allowing for browser drawing with pure JavaScript. To use, web developers only need to include a single script tag in their existing web pages.

Relay - Ajax Directory Manager
Relay is an Ajax-powered file management library. It has a multi-user access restriction, allowing the administrator to control user access to uploaded files. Features: drag-n-drop files and folders, dynamic loading file structure, upload progress bar, thumbnail view, including pdf and multiple users & accounts.

GlassBox
GlassBox is a compact Javascript User Interface (UI) library, which use Prototype and Script.aculo.us for some effects. With GlassBox you can build transparent border, colorful layouts and “Flash-like” effects. Take a look at the site itself: you can use the keyboard navigation: Keys 1-8 (display page), arrows left/right (previous/next page) and arrows up/down (Scroll content).

qGallery
qGallery is a Prototype-based gallery script which automatically takes care of the image processing, offers multipple viewing modes and comes with a number of transition effects.

Amberjack
Amberjack is a lightweight Open Source library, enabling you to create site tours. The JavaScript library is lightweight (~4K), stable, LGPL licensed, browser compatible, set up in 2 minutes & super-easy to customize.

GWT-Ext Widget Library
GWT-Ext is a powerful widget library that provides rich widgets like Grid with sort, paging and filtering, Tree’s with Drag & Drop support, highly customizable ComboBoxes, Tab Panels, Menus & Toolbars, Dialogs, Forms and a lot more right out of the box with a powerful and easy to use API. It uses GWT and Ext.

Flexigrid
Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.

cforms II
cforms is a plugin for WordPress, offering convenient deployment of multiple contact forms throughout your blog or even on the same page. The form submission utilizes AJAX, falls back, however, to a standard method in case AJAX/Javascript is not supported or disabled.

Masked Input Plugin
A masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer 6/7, Firefox 1.5/2, Safari, and Opera.

Oversized Sliding Tabs
Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site, which in turn is very heavily inspired by a widget used in the iTunes Music Store. Similar jQuery solution.

Custom Checkbox with jQuery
This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.

NicEdit
NicEdit is a Javascript/AJAX inline content editor to allow easy editing of web site content on the fly in the browser. It integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing.

AJAX Instant Messenger
is a browser-based instant messaging client. It uses AJAX to create a near real-time IM environment that can be used in conjunction with community, intranet, and social websites. No refreshing of the page is ever needed for this “web application” to work, as everything is updated in real-time via JavaScript.

Mootools animated sidebar menu
This tutorial explains how to implement an animated menu using mootools. You can see how it works directly from mootools site.

LiveValidation
LiveValidation is a small open source javascript library built for giving users real-time validation information as they fill out forms. Not only that, but it serves as a sophisticated validation library for any validations you need to make elsewhere in your javascript, it is not just limited to form fields.

Creating a table with dynamically highlighted columns
There is a number of impressive things happening within this small area.

Tablecloth
Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love Try to mouseover or click on a table below.

Unobtrusive Table Actions Script
An attempt at writing an unobtrusive (and fast) script that adds commonly required “actions” to data tables. Can Zebra stripe the table. And supports row hover, column hover and cell hover effects

FancyForm
FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s easy to use and degrades gracefully on all older, non-supporting browsers.

Starbox
Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype javascript framework. For some extra effects you can add Scriptaculous as well. Check the demos below to see what Starbox is all about and read on for more information on how to customize your own Starboxes.

Style Your Website’s Search Field with JS/CSS
Continuing to provide unobtrusive solutions, CSSG is happy to present SearchField. It serves as a way to style your search field and add behavior without any additional JavaScript or modifications in your markup. It features plug & play onfocus and onblur behaviors and auto suggestion like you’ve never seen before.

The sliding Date-Picker
Due to the development of Qash.nl, a Dutch personal finance website full of cool javascript features, it’s somewhat quiet around here. But to keep you satisfied, we present the sliding date-picker. This element enables you to pick dates with a simple slider bar. By dragging the bar over the time-line, the dates change instantly.

Carousel
Prototype UI. Carousel are great to display a large set of data like images.

minishowcase
minishowcase is a small and simple php/javascript online photo gallery, powered by AJAX that allows you to easily show your images online, without complex databases or coding, allowing to have an up-and-running gallery in a few minutes.

Timeline
Timeline is a DHTML-based AJAXy widget for visualizing time-based events. It is like Google Maps for time-based information. Below is a live example that you can play with. Pan the timeline by dragging it horizontally.

Displaying source code with Ajax
The script fires off an Ajax request, gets the document the link points to, replaces the special characters and adds line numbers.

mooSlideBox 3
The mooSlideBox v3 is a small and slim ajax based extension or replacement of the common “lightbox” that can be found on nearly every page. This lightbox clone works in IE 6/7, Opera and Firefox.

Accessible News Slider
Accessible News Slider is a JavaScript plugin built for the jQuery library. It meets the accessibility requirements as outlined by WCAG 1.0.

jsProgressBarHandler (Dynamic Unobtrusive Javascript Progress/Percentage Bar)
jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App. Next to a structural rewrite of the WebAppers code, this javascript progress bar can easily be extended and tweaked just by setting a few parameters.

CNN Style Scrolling Ticker with the Marquee Toolkit Control
Besides scrolling the items from right to left, the liScroll plugin supports two additional features

mooSocialize - ajax based social bookmark widget
Enough of having to submit interesting articles by hand to your favorite social networks and newsgroups? Then this is for you. Based on ajax, this small widget allows to integrate many many bookmarks for every post on your blog, website etc.

CheckBoxList hover extender
“We created an AJAX Control Toolkit Extender that asynchronously calls a web service method (or a page method) to obtain the information displayed in the popup control, when the user hovers over an item.”

Cornerz
Bullet Proof Corners plugin for jQuery using Canvas/VML

Lightview
Lightview was built to change the way you overlay content on a website. Works on all modern browsers

lightWindow
Another script you can use to integrate lightboxes and online-galleries in your web-pages. This lightweight script supports 5 different types of Media: Pages, Inline Content, Media (movies, SWF, etc), images (galleries, single), External Websites (via IFrame). Photo: Patrick Cheatham.

DatePicker using Prototype and Scriptaculous
An unobtrusive and flexible date picker widget which uses Prototype and Scriptaculous libraries. 52 More Calendars and Date Picker Designs.

ModalBox
ModalBox is a JavaScript technique for creating modern modal dialogs or even wizards (sequences of dialogs) without using conventional pop-ups and page reloads.

Accordion v2.0
A lightweight accordion that is built with Scriptaculous, has vertical, horizontal and nested styles and works properly in every browser.

New unobtrusive dynamic flickr badge
A compact Flickr-Badge for presentation of Flickr-images with a navigation option.

13 Awesome Javascript CSS Menus
13 “fresh” JavaScript+CSS-based navigation menus in a brief overview. Among other things Slashdot Menu and Sexy Sliding Menu displayed below.

Further Ajax scripts

Maillist
An AJAX addon for your site, a Mail list. An email address can be submitted without having to reload the whole page.

ClickHeat
ClickHeat is an Ajax-powered visual heatmap of clicks on a page, showing hot and cold click zones. You can also use the heatmap generator outside ClickHeat for your own applications, using PHP and GD library.

Prototype UI
Prototype UI is an open-source configurable Modal Window system. The library allows you to add a window or a dialogue. Windows can have a shadow and be scannable; modal mode is available, and there is a window manager for Web OS behavior.

Protoload makes it easy to show the User what is going on.
Imagine a complex Rich Internet Application using different hidden requests and processes working side by side. Protoload makes it easy to show the User what is going on.

Step by Step - Show and explain visitors what your page has for them
You might have encountered interactive demos created with screencasting and screengrabbing software that explain an interface to users in a step-by-step manner. This is exactly what this script does for web sites.

FontSize slider
Enables visitors to define the font-size of the page.

Facebox
Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It’s simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

Resources

• Ajax Rain is a growing collection of Ajax / Javascript / DHTML examples and demos you can download for free. The site currently offers over 1000 examples.
• 14 Cool Mootools Scripts lists useful Ajax-scripts for the Mootools library.
• 45 Fresh jQuery Plugins offers a growing list of references for jQuery plugins and solutions.

Web developers may already have heard of Yahoo’s new AJAX and DHTML framework. Maybe not - Yahoo! User Interface (YUI) has yet not gained popularity similar to Script.aculo.us, Prototype or Mootools.

But it certainly will. Spot on - Smashing Magazine introduces Yahoo’s User Interface framework.

Editor’s note: be aware that libraries and frameworks often tend to generate not “optimal”, sometimes even bloated code. In YUI’s case especially if you use YUI Grids you might end up with dozens of div-containers even although you don’t really need all of them. Therefore it is almost necessary to verify the quality of the generated code before applying it to your web-site or web-applications — to maintain the quality of your code and save you a lot of headache in the future.

What is YUI?

“Yahoo’s User Interface” is a set of Javascript utilities and libraries that enable web developers to quickly create AJAX and DHTML websites and web applications. YUI is BSD-licensed and free (as in freedom) software so there are literally no restrictions in how and where to use it.

Yahoo! User Interface Library (YUI)

Do I need YUI?

Maybe not yet.

YUI still has it’s rough edges as many components are in beta or even alpha stage, which makes life hard from time to time. However, Yahoo’s developers are working hard to polish and enhance YUI. It won’t take long until YUI’s quirks have been sorted out.

YUI will certainly soon belong to the standard set of AJAX frameworks such as Script.aculo.us, Prototype, and Mootools. Not only because a Fortune 500 company is the driving force behind it, but because YUI is created by top-notch developers.

Introducing the most important components

Core components: DOM Collection & Events
DOM Collection is a set of convenience methods that simplify DOM-scripting, element positioning and CSS style management, regarding browser specifics. “Events” is a simplified interface for subscribing to DOM events and for examining properties of the browser’s Event object. Custom Events are also possible that allow you to trigger events so that other components “subscribe” to those events and respond to them.

YUI Utilities
Several utilities have been merged into this part of YUI.

Animation (YUI Utility)
Using “Animation” component developers create animated objects that fly, ease in or out, change color, or resize.

Animation along a given path

Browser History Manager (YUI Utility)

Changes of content client-side do not lead to new URLs (through page reloads) that could be bookmarked. Cure is “Browser History Manager” that records new URLs in the browser’s history in order to enable users to bookmark certain stages of a web application.

Browser History Manager: Injecting date information into the URL

Connection Manager (YUI Utility)
“Connection Manager” is a simplified interface to XMLHttpRequest (XHR). It cares for initialisation of XMLHttpRequest, handles server responses and provides a callback interface so developers can easily process server respond objects.

DataSource (YUI Utility)
“DataSource” provides a unified interface for other components to interact with different types of data. It is configurable and supports simple JavaScript arrays, JSON and online servers over XHR. This variety of data sources makes it quite simple to develop an application dummy first using static Javascript objects and then switch to live data sources in order to create a “real” working application.

Drag & Drop: grouped objects

Drag & Drop (YUI Utility)
This component offers a wide variety of methods and functions to implement a draggable interface. For example, drag handles can be customised, objects can be grouped so drag targets can reject certain dropped items or a whole group of items.

Drag & Drop: reordering items

Element (YUI Utility)
“Element” is a wrapper around the browser’s HTMLElement that simplifies manipulating and reading DOM. Developers may also implement custom event listeners.

ImageLoader (YUI Utility)
This utility allows developers to defer loading of images during page load. For example, images placed on top of the page can be loaded prior to those placed outside the viewport. This can lead to better overall pageload performance.

YUILoader (YUI Utility)
“YUILoader” handles loading of components in the right order and automatically resolves component dependencies.

YUI Test (YUI Utility)
“YUI Test” is a handy module for unit testing purposes.

YUI Library & Widgets
“YUI Library & Widgets” contains numerous ready-to-use controls and widgets based on YUI Utility components.

AutoComplete (YUI Library)
Provides autocomplete functions. Autocomplete queries may be limited in scope, they can be deferred, results can be cached. Quite handy.

Autocomplete demo

Button Control (YUI Library)
This control replaces a whole range of standard form fields such as plain buttons, select fields, checkboxes, and radio fields. Designers have full control on how these should look like, contrary to the dull standard elements. Custom logic can be implemented, so this control is like form designer’s heaven.

Select fields emulation

Checkbox fields, radio fields can also be implemented

Calendar (YUI Library)
As one might have guessed this component provides an easy to use calendar, that features single month or multiple months views. Developers can also define valid date ranges, for example if only a certain date in a given date range should be selected.

Calendar demo

Color Picker (YUI Library)
“Color Picker” provides a color picking widget we all know from desktop applications. Color codes can be displayed in RGB, hex, and HSV format. Like all other widgets, color pickers can be placed in tab views and panel containers.

Color picker in a tab view

Container (YUI Library)

“Container” is the base class for several other sub-components:

“Dialog” and “SimpleDialog” provide functions that can be used to create dialog “windows”.

Container effects

“Loading” panels ask users to be patient, e.g. during a page load.

Besides “Dialog” and “SimpleDialog” there are several other sub components: “Module” is a base module for custom widgets or for enhancing existing widgets. “Overlay” positions modules absolutely on the page, floating above the document’s inline content. Just like we all know it from Lightbox. “Panels” are in many ways just like small inline windows that can be dragged and closed. They can be created from Javascript code or from HTML markup. Using “Tooltips” developers can pop up small tool tips when mouse is hovering above an element connected to such a tooltip. As a extra, tooltips can be connected to several DOM objects at the same time.

DataTable (YUI Library)

DataTable demo

“DataTable” is a mighty widget. It can read data from just about any source DataSource can hook into, and render an HTML table completely capsuled from the developer. Although designers still have full control on how the table looks like using common CSS. Users can sort table items client-side or server-side, scroll table, append or remove rows dynamically, resize columns, or apply developer-defined functions on selected rows. Tables can be split into pages and cells can be made inline-editable. It’s YUI’s killer-widget.

DataTable inline editing in action

Logger (YUI Library)
“Logger” is a useful tool for developers that chronologically logs messages emitted from scripts. This way developers don’t have to do the dreaded “place-an-alert()-somewhere-then-reload-and-check-again” cycle if they only want to know what values variables carry.

Menu (YUI Library)
“Menu” lets developers create accessible menus. Menu items can be remove or inserted dynamically and users can navigate them by mouse or keyboard.

Menu effects

Rich Text Editor (YUI Library)
This is yet another rich text editor. It is quite basic, although it features some distinctive functions such as Flickr-Search.

RTE showing off Flickr integration

Slider
“Slider” is a simple way to let users select a number in a finite number domain. They simply slide a handle until the desired value is reached. Not neccessarily useful in every case though.

Slider

TabView (YUI Library)
“TabView” provides a tabbed view. Tabs and views can be manipulated dynamically and can be defined via Javascript or via HTML markup.

Dynamic TabView widget

TreeView (YUI Library)
We all know treeviews from desktop file managers. TreeViews are ideal for presenting hierarchical data. Using this widget, data structures can be collapsed, expanded, and outfitted with neat icons.

TreeView Widget

YUI CSS-Grids:

Reset
“Reset CSS” normalises browser’s standard rendering by “resetting” CSS values of DOM elements to 0, e.g. for margins, padding and so on. This way, HTML rendering is absolutely the same across different web browsers, though it looks quite dull because all HTML look the same.

Base CSS & Fonts CSS
So in order to add some color and styles, Base CSS extends the normalizing approach by setting (and not resetting) CSS values, that also look the same across different web browsers. The same is done for fonts by “Fonts CSS”. The latter not only regards browser specifics but platform specifics also.

Grids CSS
“Grids CSS” is a 4kb CSS file that carries predefined page layouts. Layouts can be stacked, nested and subdivided in order to create distinctive layouts.

Conclusion

YUI at this stage is already quite vast. It is hardly imaginable that a developer would have absolutely no use for anything YUI offers. The BSD license allows YUI to be integrated into opensource projects as well as closed source projects. There is a bright future ahead for YUI, that’s for sure.

PDF magazines are a great promotional tool used by companies and collectives. They are quick to put together, can be attached to emails, or made available as free downloads. Numerous visual arts publications from around the world are available for you to draw inspiration from. These magazines serve as excellent sources of both conceptual and visual design. Furthermore, it’s both interesting and important to know what other artists do — to explore new artistic style, learn new techniques and make new contacts.

View great illustration, photography, graphic design, painting, typography, and various other visual and communication arts. Dig into ideas with artist interviews and articles. Or flip through these pages to discover new visual solutions and styles. Below you’ll find both well-established and new PDF magazines for you to download and to draw inspiration from.

You may also want to consider visiting

• the post 42 Design/Tech Magazines To Read which presents an overview of over 40 established international design/tech-related magazines, blogs and resources.

PDF Magazines

• Adobe Magazine
  Adobe sets a high standard of professionalism with this visual communication publication. It’s a quarterly magazine filled with practical information and design inspiration. “You’ll see work that’s breaking new ground, get an insider’s perspective on how it was created, and find new ideas and tools to enhance your own projects.”

  

  

• Font Magazine
  While this magazine promotes fonts, it also provides inspiration and commentary on design and visual communication. This magazine brings us interesting articles from a global perspective. In Issue 006 the magazine has the theme of “Think globally. Design locally.” It focuses on design that makes a difference in various places around the world in order to broaden our perspective on design.

  

  

• Candy
  Candy Collective puts out an engaging visual arts and design magazine. Over the course of two years, the magazine has grown into a large publication with a polished feel. It showcases photographers, designers, illustrator, painters and other forms of visual arts. It does this by, both interviewing the artists and displaying their work.

  

  

• Blanket
  This is an interesting magazine. It’s well designed. There is a good mix of excellent writing, colorful layouts, and good content. The magazine promotes authors form around the world. It also has a varied editorial staff. They write about their individual interests.

  

  

• VVM
  This magazine is about Vector and Vexel art. A large part of the Mags format is made up of half page spreads of artist’s work. Each piece has a brief explanation of the design and a link to the artist’s portfolio.

  

  

• Vektorika
  This magazine is all about Vector Graphics. It is predominately an artist promotional magazine. The quality of their interviews are really good. Each issue has a theme. Issue 10 was based on Character design. For a review of this Mag see the article Inspiration: Vektorika Magazine.

  

  

• Etel Magazine
  This is a young mag that presents numerous artist interviews. It covers art, design, literature, architecture, and fashion. A small sample from each genre is on display in the magazine. It will be interesting to see how this magazine grows.

  

  

• Revolutionart
  This is a large artist promotion magazine. Artists have full wide page spreads and often get more than one page to display their work on. There is work from artists, designers, musicians, photographers, and models. Revolutionart magazine publishes work from accomplished and untrained artists indiscriminately. There appears to be little editorial limitations on the scope or quality of work displayed. There is an interesting mix of great work and mediocrity.

  

  

• FF3300
  Numerous types of art and design are on display in this magazine. An interesting aspect of this magazine is that most of the art is discussed conceptually as it is presented. It is also a dual language publication.

  

  

• Royal
  The Keystone Design Union creates this publication that covers design, illustration, and photography. It is available via PDF or online via Flash.

  

  

• Woosta
  This magazine is interview driven. It promotes each artist’s work alongside interviews with them.

  

  

• Grafikal
  This magazine has a wide layout that uses plenty of white space. It promotes the visual arts. Numerous artist’s work is on display with ample explanations of the work running along the side. This Mag recently got started.

  

  

• JPG Magazine
  While the PDF version of the magazine is just a sample, it still gives a good preview into this community of Photographers. You can also view the photos and stories online, as well.

  

  

• Naked Wales
  This Mag covers the design scene in Wales. While this magazine has a local flavor, it also covers design issues we can all relate to, like speculative work. This magazine has only released one issue at the time of this writing.

  

  

• FreshCut Magazine
  Although this magazine is not in English, it doesn’t really matter. This is because over 95% of the magazine is artist’s work on display with no commentary. You can quickly move through the pages for pure visual inspiration.

  

  

• ANTI Magazine
  ANTI Magazine aims to showcase outstanding visual content as an online magazine and also through future exhibitions all around the world.

  

  

Further Magazines

• Artzmania
  Artzmania is an independent venture showcasing outstanding international creativity and culture. According to the authors, it is supposed to be the “platform for Designer’s Territory to inspire, express and share with fellow art enthusiast profiling diversified design”. What makes Artzmania different is its touch for graphics works from different cultures. For instance, the latest issue covers Asia’s finest artists and designers, a representation of the arts crowds that are existing in the Asia region. If you are looking for fresh and creative inspiration, that’s a nice place to start. Only executables can be downloaded, but not the .pdf-files.

  

  

• BAK Magazine
  This Flash-magazine is being edited by Turkish graphic designers. The magazines contains interviews, graphic design-related articles as well as numerous showcases of designers’ works. You can also submit their work to the magazine and thus can get featured in one of the upcoming issues.

  

  

• Encore Magazine
  This Flash-magazine comes from Germany and focuses on graphic design as well as on photography. Written in German and English.

  

  

The selection presented above is, of course, not complete. You may want to browse through Pdf-mags.com, a growing repository of free PDF magazines which presents recent issues of nearly 175 PDF magazines from all over the world with main focus on art, design, illustration and culture.

Calendars always come in handy. Whether you are planning a schedule for your next project, manage your appointments or simply want to keep track on events you are going to take part in — to get things done in time you need a clear, simple and user-friendly time line. The more flexible your calendars are, the more effectively you can work with them. E.g. setting up your milestones, defining your deadlines and shifting your time line once unexpected problems occur. Besides, if you can get notified once the deadline is coming up or update the data once you stuck in the traffic then your calendar can turn out to be a real life-saver and boost your effectiveness.

Online calendars can also be useful if you’d like to publish your schedule or share it with your colleagues instantly — instead of sending hundreds of e-mails via a mailing list. Or if you’d like to provide your visitors with a date picker — e.g. for your web form. In fact, online calendar services, scripts, tools and software applications are useful for everybody.

This post presents a detailed overview of calendar scripts (Ajax, PHP, DHTML etc.), applications, tools and related services, including CSS-styling of online calendars and web-services you can use to generate a printable weekly planners and monthly and yearly calendars for free.

• You can find more AJAX-code snippets in our article 80+ AJAX-Solutions For Professional Coding.

Example: Sunbird Calendar

Calendar Scripts, Date Pickers

These calendars are generated dynamically and can be used in web forms as date pickers. In some cases date is used for the navigation through the content of the site (like in Livejournal blogs).

• The DHTML / JavaScript Calendar
  A flat DHTML calendar which is suitable for selecting date/time “on the fly”. The design is customizable through external CSS, the script provides help hints, allows multiple days selection, is fast and very easy to setup. Keyboard can be used for a quicker date selection. Open source.
• NoGray Calendar Component
  A customizable and extensible JavaScript mooTools Calendar. It’s skinnable using CSS.
• Quick Calendar Using AJAX and PHP
  A Tutorial from Bernard Peh at evolt.org. Visitors can navigate through the calender clicking on the linked dates; the information about the event which took place on this day appears below the calendar.
• jQuery Calendar v2.7
  The calendar can easily be added to an input field with appropriate default settings. The calendar can appear on focus, via button and both ways. Day names are clickable to change the first day of the week. The calendar also responds to keystrokes entered in the input field. Use a custom field settings function to create a date range control: two date fields, each restricting the other. Very flexible solution.
• Calendar System
  This calendar is using PHP & Script.aculo.us. There are 3 parts, the Javascript, the HTML and the PHP script. The style can be applied with CSS, of course.
• PHP iCalendar
  PHP iCalendar is a PHP-based iCal file viewer/parser to display iCals in a Web browser. It displays iCal files in a nice logical, clean manner with day, week, month, and year navigation. It is available in 13 languages and includes support for printing, searching and RSS news feeds.
• Yahoo! UI Library: Calendar
  The Calendar component is a UI control that enables users to choose one or more dates from a graphical calendar presented in a single month or multi month interface. Calendars are generated entirely via script and can be navigated without any page refreshes. There are dozens of examples and additional options you can use to customize the calendar.
• JavaScript DatePicker Control
  The DatePicker lets users easily select valid dates from a dropdown calendar. No need to worry about date formats, by picking dates it’s always correct.
• Simple Calendar Widget
  This flexible, simple pop-up calendar is written to work across browsers. It’s fully commented and customisable for language, colours and date format. The pop-up displays a month at a time from a specified range of years.
• Tigra Calendar
  Tigra Calendar is a free JavaScript Calendar control that makes it easy for the website users to fill out the date/time fields by selecting the date from a popup calendar. Script saves the time for those internet/intranet developers who need intuitive, easy to use cross-browser client-side date or timestamp input control. Calendars are attached to the existing input fields in the web form, multiple calendars can be configured independently in the same form or page. Tigra Calendar is pure client side script so it can work with any server side scripting technology (PHP, ASP, CGI etc.).
• Epoch – Date Picker
  A cross-browser date picker which is fast, easy to use and easy to configure.
• JS Calendar (version 2.1)
  A cross browser Javascript calendar. 12 languages are currently supported
• Keith Devens PHP Calendar
  A very simple, but multi-functional PHP script to print out a calendar. Neat bonus features include the ability to link certain days in the calendar to a web page - useful for a weblog. You can also assign stylesheet classes to specific days, and provide content for an individual day.
• Developing Johan’s Accessible Calendar
  These examples relates to the Accessible Calendar with Selection of Weeks topic on Accessify Forums.
• AJAX Datetime Toolbocks
  Intuitive Date Input Selection. The Datetime Toolbocks is a pure JavaScript library using DHTML and advanced date parsing to generate the date based on the grammar passed. The purpose of the Datetime Toolbocks is to simplify the date entering process using common terms we are all familiar with.
• AJAX Calendars
  An overview of 10 AJAX-based calendar scripts.

Tutorials

• Learn how to integrate Google Calendar in your website using AJAX
  A detailed step-by-step tutorial on how you can integrate Google calendar directly in a website and display latest events in a brief overview.
• Syncing Google Calendar With iCal
  Google calendar can be a great tool for organizing your life. However, sometimes you would still want to use your own desktop application. Apple’s iCal, which is built-into Mac OS X, can be used to subscribe to your Google Calendar, and will automatically check Google Calendar every few minutes to check for new items. Screencast.
• Stay in Sync with GCal and Thunderbird
  View and Update your Google Calendar offline from within Thunderbird by making use of the Lightning and Provider Add-ons. This step-by-step guide will show you how to get up and running (and staying in sync) in no time.
• Sync Google Calendar With Your Phone
  GCalSync allows you to synchronize your Google Calendar and your mobile phone. It works for most phones including Blackberry.
• GsyncIt For Microsoft Outlook
  gSyncit works by updating your Microsoft Outlook calendar with your Google calendar entries and then updating your Google calendar with your Microsoft Outlook entries. All appointments that occurred in the past 365 days and those that will occur in the next 365 days will be synchronized.
• Add Events to Google Calendar with SMS
  Apparently you can add events to your Google Calendar (and other nifty tricks) by sending text messages to SMS short code 48368. More information in this article.
• 40+ Tools For Google Calendar
  A series of programs, browser add-ons, Greasemonkey scripts, and Stylish user styles for Google’s calendar service.

Online Calendars with Database-Support

The examples listed below are complete stand-alone applications. They don’t only display the date, but can also link the date to specific data, such as information about a given event, your next milestone or your visitors’ plans.

• iZeit
  iZeit is an easy to use online PHP calendar and to-do list. iZeit runs on your own server, so it’s totally customizable.
• Easy PHP Calendar
  The Easy PHP Calendar is a powerful PHP calendar script that is easily integrated into web sites and is easily customizable. This attractive, full-featured calendar is suitable for display on a calendar of events page, home page, or any other page. Price: $19.95.
• Plans
  One installation of this tool can support many calendars. Plans supports multiple languages. This also has CSS-themes. Plans can store data in flat files or an SQL database and is licensed under the GPL.
• VCalendar
  This is an open source Web calendar application with related tools, for posting and maintaining events and schedules online, in calendar format. Unlike any other online calendars, VCalendar comes with source code in multiple programming languages: PHP, ASP and ASP.NET (C# and VB.NET).
• WebCalendar
  WebCalendar is a PHP-based calendar application that can be configured as a single-user calendar, a multi-user calendar for groups of users, or as an event calendar viewable by visitors. MySQL, PostgreSQL, Oracle, DB2, Interbase, MS SQL Server, or ODBC is required.

Online Calenders and Software

There is a number of web services which offer web-based calenders without installation. In most cases calenders are integrated among dozens of other features; we wanted to present “pure” calenders, without additional features which aren’t always useful, particularly if you just want to manage your time line as quickly and as painless as possible.

• Google Calendar
  With Google Calendar, you can see your friends’ and family’s schedules right next to your own; quickly add events mentioned in Gmail conversations or saved in other calendar applications. Sharing events and calendars is also available. You can also sync Google Calender with Microsoft Outlook, Thunderbird, iCal and your mobile phone.
• Yahoo! Calendar
  Yahoo! Calendar lets you to share your calendar with specific friends and co-workers and remember important dates, setting up automatic reminders. It offers public and private event scheduling, to-do lists, weather, and integration with Microsoft Outlook and Palm devices.
• Windows Vista Calendar
  A calendar application that is included in Windows Vista. It natively supports the iCalendar file format, and has the ability to publish and subscribe to web-based calendars. Calendars may also be published to network drive shares. Windows Calendar has several calendar views, including Day, Week (5 and 7 day) and Month, and also supports Tasks. Windows Calendar supports over 100 calendars for each user.
• Kiko
  A Web 2.0 Calender running in your browser. Use it for appointments and contacts. Data can be shared, and there is an API.
• iCalShare
  iCalShare is the web’s largest directory of shareable calendars. We have over 1500 calendars in more than 35 different categories, including calendar for sports teams, music groups, television shows, holidays, and more. Used calendar applications are Cal, Mozilla Calendar, Sunbird, Zimbra, Microsoft Works, WinDates, Novell Evolution, KOrganizer. Lots of them seem to be temporarily unavailable.
• Calendarhub
  Calendarhub is a solution for private use or groups. You can create multiple personal or group calendars, find local events and add them to your calendar, get reminders by email or on your phone and invite others to your events. The tool offers an Ajax-based drag & drop interface, RSS feeds for any calendar view and Import/Export functionality for Outlook, Yahoo etc. It is also possible to subscribe to public calendars (e.g. iCal).
• Mozilla Sunbird and Lightning
  Mozilla-style ease-of-use for your calendar. Sunbird lets you manage your schedule easily, and store it where you want to. Download free for Win, Mac OS and Linux - available in a couple of languages. Use Lightning if you use Mozilla Thunderbird for email.

  

• Calgoo
  Calgoo is calendar software that manages multiple calendars and schedules, contacts and tasks online and offline.
• Eventsherpa
  Windows only. Organize and manage your events online or offline and instantly generate a Web calendar to share with anyone on the Internet. Integrate shared calendars into your corporate or personal Web site and update with one click. Deliver upcoming events to your audiences desktops by allowing them to subscribe to event feeds using one of the free cross platform calendar tools.
• Rainlendar
  Rainlendar is a feature rich calendar application that is easy to use and doesn’t take much space on your desktop. The application is platform independent so you can run it both on Windows and on Linux. Lite-Version is free. Lots of language file are available. Comes with event-planner an todo-list.
  Rainlendar sits on the desktop

Calendar Styling and Experiments with CSS

• A CSS styled calendar
  A tutorial by Veerle Pieters.
• CSS Play A validating link calendar
  CSS Styling by Stu Nicholls.
• Unordered List Calendar
  This is a list boxes calendar. It isn’t the most semantic method, but it does seem to be fairly stable and it resizes perfectly. A monospace font like Courier New must be used to ensure proper proportions and two characters must be used. Prepared with dynamic generation in mind. Mike Cherim’s experiment.
• Calendars & Date Pickers Design Showcase
  52 examples of CSS-based calendar designs collected by Christian Watson.

Web 2.0 Social Calendar and Services

Web 2.0 offers dozens of web-based services which offer calendars and similar functionality. Let’s take a look at some of them — in a brief overview.

• Backpack Calendar + Basecamp
  Apart from other services this 37signals’ product offers a simple presentation of events that span multiple days (like trips, conferences, etc.) and has Email/SMS reminders - you can be notified 30 minutes before an event. Basecamp users can also manage their project milestones.
• RSS Calendar
  Web-based calendar service that allows the sharing RSS calendar feeds with others.
• 30 Boxes
  Share your calendar and your web stuff online. Organize your life, share all or parts of it with friends.
• Remember The Milk
  Online to do list and task management.
• You can also use Jotlet, Plaxo, Calgoo, Cozi (the family calendar), myMemorizer (a reminding service with - of course - a calendar), Scrybe and Airset for similar purposes.

Generate Your Personal Calendar Online!

Instead of using web services you might want to stick to pen and paper. In this case you can use some web tools which can generate a printable version of a calendar you can fill in after you’ve printed it out. Some useful tools in a brief overview.

• Compact Calendar (for 2007)
  The Compact Calendar is designed to provide a compact view of the year, with plenty of space for making annotations. I use it as to “doodle plan” project timelines during meetings with clients. Since the days are presented contiguously while retaining the days of the week, you get a more intuitive sense of how the days are flowing and can estimate accordingly.
• CalendarsQuick
  CalendarsQuick lets you create professional-looking printable calendars in PDF - personalized with your own titles, photos, start days, time ranges.
• Printable Calendars
  Generate a printable weekly planners and monthly and yearly calendars for free. With just a few clicks you will be able to personalize these calendars by adding an image and any text you’d like.
• Free Calendar Template
  Three variations of a CSS-based calendar - for free download.
• Big Huge Labs Calendar
  The tool enables you to create a customized calendar from your digital photographs.
• 12 sided Calendar
  Generate a dodecahedral calendar. You can choose between PostScript and PDF format. Choose PostScript format if you want to mark holidays and birthdays. The PostScript file explains how to do it. 3-D Calendar is based upon the same idea.
• Free Online PDF Calendars
  Downloadable and printable calendars for the upcoming year. Free Online PDF Calendars - Month on a Page version.