15 Awesome tutorials and resources for web developers

A new week is coming and in this post I want to suggest you some interesting tutorials and resources for web developers I bookmarked this week. If you want to suggest a link, please leave a comment.

1. InfoVis Toolkit
The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web. It supports multiple data representations: treemaps, radial layouts, hypertrees/graphs, spacetree-like layouts, and more.

2. Vaadin
Vaadin is a Java framework for building modern web applications that look great, perform well and make your user happy.

3. Flip!
Flip is a jQuery plugin for jquery that will flip HTML elements in four directions. It's really simple to implement and customize.

4. Uploadify
Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.

5. Create a Twitter-Like "Load More" Widget
Both Twitter and the Apple App Store use a brilliant technique for loading more information; you click the link and fresh items magically appear on the screen. This tutorial teaches you to use AJAX, CSS, Javascript, JSON, PHP, and HTML to create that magic. This tutorial will also feature both jQuery and MooTools versions of the script.

6. FullCalendar
FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

7. HTML5 drag and drop in Firefox 3.5
In this tutorial you can learn HTML 5 specification section on new drag-and-drop events, and Firefox 3.5 with an included implementation of those events.

8. Music Player with mouse gestures
This tutorial illustrates how to implement an amazing music player using mouse gestures & hotkeys in jQuery. You can Click & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse.

9. jQuery Image Magnify
jQuery Image Magnify enables any image on the page to be magnified by a desired factor when clicked on, via a sleek zoom in/out effect. The enlarged image is centered on the user's screen until dismissed. It works on both images with and without explicit width/height attributes defined.

10. Creating a Keyboard with CSS and jQuery
Sometimes it's just fun to play around with the programming languages we know and see what we can create. It might be nice to create a little online keyboard with CSS, and then make it work with jQuery. The keyboard includes "action" keys (caps lock, shift, and delete) which dynamically changes the keyboard when clicked. This tutorial it'll show you how to build it.

11. Img Notes
Img Notes is an useful jQuery plug-in to add notes over images in a Flickr-like style. It's simple to implement and customize.

12. WriteMaps
WriteMaps is a free web-based tool that allows you to create, edit, and share sitemaps online. As a WriteMaps user, you and your team will be able to build and access your sitemaps from anywhere, without having to rely on proprietary desktop apps and static files.

13. Simple vibration effect for your form box with jQuery
This effect can be used to validate certain criteria in your form. Other than using highlighter to highlight the error area, we can use a more creativity approach by vibrating that particular input box to alert the user. This tutorial demonstrate a very easy way to understanding how vibration works on the web and how it can be used in your web design.

14. epiClock
epiClock is an extremely lightweight jQuery plugin which gives users the ability to easily create and manage any number of javascript powered clocks.

15. ThickBox
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.