DevKick is another directory where you can find carefully hand-picked components and resources. Focusing web developers and designers, DevKick provides a well-organized space with a clean interface, where you can browse components, play with demos, read the latest news from the blog and experience the latest web development experiments in the lab section.

Allthrough DevKick is quite new (at least, in its current instantiation) and is a bit limited at the moment (about 70 scripts and components are listed), it has a great potential to grow fast and become a good and solid reference, like WebAppers or Smashing (which is more generalist, but offers great content for developpers, too).

» Visit DevKick

So you've decided to become a programmer. That's a great decision, but let us ask you a little question: do you know where to start? Maybe this article should be a good starting point.

Read more...

Are you into AJAX? What a silly question, of course you are! Who isn't, those days? AJAX is everywhere, and it fuels the so-called "web 2.0". So even if you're not into it, you have to deal with it. That's the story.

Now the wonderful thing about AJAX is that, since everybody does it, there are tons and tons of scripts, modules, libraries, snippets and frameworks available. And the place to start looking for those is certainly AjaxRain.

AjaxRain is a repository of over 1000 AJAX, Javascript and HTML examples and demos ready for download. The AjaxRain guy call themselves the secret behind your inspiration!. As we all know, inspiration isn’t usually generated all within our singularly creative being, infact, sometimes (not to say, quite often) we just are downright "inspired" by another person’s work, a little copy and paste never hurt anyone, right?

AjaxRain's website is crisp and simple. You can browse through the demos and examples, search, use the tag cloud and mark the ones you like as favorites so you can review those later. Registration is required to benefit all the features of the site, but hey, it's free. You can also suggest new stuff to add to the repository, so it's a living thing, maintained and bred by a whole community.

» AjaxRain

When you think of javascript frameworks, you think Prototype, Mootools, JQuery or YUI. But hopefully, the web 2.0 world is moving and changing fast, and new players show up everyday. So now, when thinking javascript framework, you'll have to think Ext JS as well.

Ext JS is an open-source JavaScript library, for building richly interactive web applications using techniques such as AJAX, DHTML and DOM scripting. Its first particularity comes from its origin: it was built as an extension of YUI, and was later extended to jQuery and Prototype. Today, it's able to run stand-alone without relying on any of those external libraries, though they remain an option for integration.

The main feature of Ext JS is to allow developers to integrate a desktop-like experience in their web applications by providing a rich set of controls (or "widgets"), including (but not limited to) text fields, dialog boxes, textareas, date fields, pop-up date-picker, comboboxes, radio and checkboxes, html editor, data grid, tab and region panels, toolbars and window-style menus.

Needless to say, Ext JS outputs 100% XHTML-compliant code, is fully "stylable" with CSS, and provides an extensive documentation, a blog, a forum and numbers of tutorials. Finally, the complete library (including all the controls) weights only 70Kb (compressed), and can be extended thanks to themes and plugins written by the community.

Jack Slocum, the man behind Ext JS, also features numbers of nice things about its baby on his own blog, so make sure you stop by from time to time.

» Visit ExT JS website
» Download Ext JS
» Read the documentation
» Browse through the tutorials
» Get additional themes and plugins

Google launches a new activity called Google App Engine that actually works as an application cloud service. It provides the environment, the infrastructure and the storage needed to develop and deploy new applications. In other words, it's designed to completely house your project, and to integrate easily with Google services. It's been opened up to the first 10,000 developers that request an account — free of charge. And, in the pure Google-style, it's expected to remain free — at least to some extent.

There's, however, one major constrain with this new system: you’ll be particularly limited in your development style. Are you a PHP developer? ASP/.net developer? Just about any kind of developer? You’re likely going to be out of luck here. No, this isn’t a proprietary Google way of coding things, but it is limited, at present, to Python as the development environment.

On the practical side, Google App Engine makes it easy to build an application that runs reliably, even under heavy load and with large amounts of data. The environment includes the following features dynamic web serving (with full support for common web technologies), persistent storage with queries, sorting and transactions, automatic scaling and load balancing, APIs for authenticating users and sending email using Google Accounts, and a fully featured local development environment that simulates Google App Engine on your computer. With the basic account, you get up to 500MB of persistent storage and enough CPU and bandwidth for about 5 million page views a month. And finally, there's also a sandbox that places your application in its own secure, reliable environment that is independent of the hardware, operating system and physical location of the web server.

» Subscribe to Google App Engine
» Read the documentation
» Read more about it on Google App Engine's blog

There are a multitude of date-picker scripts available on the internet but, with only a few exceptions, they all require either the use of a nasty pop-up window or the inclusion of an embedded JavaScript block within the HTML. That's no good practice.

Brian McAllister coded an Unobtrusive Date-Picker that is accessible using the keyboard, that requires no embedded JS blocks and is suitable for use within documents served as application/xhtml+xml (as no document.write statements are used). The date-picker attempts to auto-detect the language of the users browser installation and download the corresponding language file from the server. It also has a nice fade-in/out effect. And finally, the script is available under a Creative Commons Attribution-ShareAlike 2.5 license, so it's free to use in both personal and professionnal projects.

Here's a quick feature list:

• Fully keyboard accessible
• Multiple date formats and date dividers supported
• Unobtrusive and nameSpace friendly
• Fully skinnable with CSS
• Both upper and lower date limits can be set
• Certain days of the week can be disabled
• Certain dates can be disabled/enabled
• Exclusions can be set using wildcards
• Includes "smart" localisation (16 languages currently available)
• Bespoke days of the week can be highlighted
• Works with single text inputs, split text inputs or select lists
• It’s free to use, even commercially

» Read the documentation
» See the demo
» Download the .zip archive

When you start a new business with a consumer focus, you more than often found that the available budget for software is minimal. With this in mind, when the guys behind Jitsu (who like free and open-source technologies like Apache, Linux, MySql) couldn’t find any open source Ajax frameworks that supported compiled XML and data binding, they decided to build their own, and they released their work under an open source license for the good of the community.

Jitsu contains an integrated set of tools that enable developers to build and deploy sophisticated user interfaces for web applications. It includes an XML markup language, a page compiler, a data binding engine, a JavaScript runtime, a control library, a runtime inspector, an animation engine, a cross-platform library, Ajax, and back button support. Jitsu applications rely on DHTML and run in most modern web browsers.

Jitsu main elements are:

• The Jitsu XML Engine defines UI pages and controls using a mix of XHTML and namespaced XML elements, and also defines application types and datasets in XML.

• The Jitsu Compiler converts XML source markup to a fast JS representation.

• The Jitsu Control Library allows to create flexible controls whose appearance can be customized through markup, without writing code, and includes templated list, card deck, dock panel, date picker, slider, popup, etc.

• The Jitsu Runtime uses a cross-platform JS/DHTML runtime that works in all modern browsers, implements the JSON messaging protocol and wires up controls to data using a full client-side data binding engine that keeps controls and data model in sync.

Jitsu is still in early stages and the code provided is intended for evaluation and feedback only. In its current form, it might not yet be suitable for use in a large-scale project. However, the release of a beta version that will be much more suitable as a building base is foreseen in a near future.

» Visit Jitsu website
» See Jitsu in action
» Download Jitsu

If you're a purist, you're most probably coding everything by hand. HTML, templates, CSS, javascript... Everything. But wheter you rely on your own libraries or on existing frameworks or templates, there always comes a time when you'll be doing things that eat your time.

k-html is a little application (380Kb only) that lives in your windows tray, and that allows you to insert HTML code by using keyboard shortcuts. You can either use it to speed up the writing of HTML tags, to convert text blocks to tables, or to quickly build your HTML structure. The generated code is XHTML 1.0 Strict-conform.

"OK", you'll say. "And...? There are tons of code editors that do the same, not to mention my favourite IDE". Yep, you're absolutely right. But the reason why k-html really adds value, it's because you can use its features within any text editor. So wheter you're using Dreamweaver, NVU, Notepad, Ultraedit or your own hand-coded IDE, it'll work. Simply.

Here are some of the things that k-html can help you with:

» turn a selection into an HTML table
» automatic code indentation
» autoreplace specific strings
» generate the structure of an XHTML 1.0 Strict document
» turn a word into a tag pair
» surround a selection with tags, quotes, ...
» turn a plain list into a bulleted or numbered list
» insert custom tags attributes (eg. class="..." or id="...")
» transform special chars in &#... entities
» generate the structure of a table
» insert date and time
» cut and paste content from a remote file
» insert the color of the pixel under the mouse cursor
» ...and many more !

k-html is a free software distributed under the GNU GPLv3 license, based on the autohotkey engine, and developped (in french, however an english version is also available) by Normand Lamoureux. It's however not affiliated in any way with KHTML (the HTML layout engine used by the Konqueror web browser and forked for Apple Safari's WebKit).

» Download k-html (french version)
» Download k-html (english version)
» Read the documentation (in french)

Whether you’ve forgotten the name of a function or the property of a cascading style sheet, these quick reference maps deliver the information you are looking for - immediately. Most of those are provided as .pdf or .png-files, so you can print them and use them every day for whatever projects you’re currently working on.

» ActionScript: base, classes and packages
» AJAX: What's AJAX, Prototype and Scriptaculous FX
» Character codes: ASCII, HTML Entities
» ASP/VBScript
» Blogging: Blogger, WordPress, TypePad, Movable Type
» CSS: CSS 1, CSS 2, CSS
» .htaccess Cheat Ssheet
» HTML: HTML, Codes, DOM, XHTML, strict, transitional
» Java
» JavaScript: Cheat Sheet, Reference
» JSP 2.0
» mod_rewrite
» MySQL: Cheat Sheet, Quick Reference
» Oracle PL/SQL
» Perl: RegExps, Quick Reference
» PHP
» Python: Cheat Sheet, Quick Reference
» Ruby: Quick Reference, Cheat Sheet
» XML: Quick Reference, Structures, Data Types, XSLT

Smart Lists is light-weight (8KB) javascript applet, created by Benjamin Keen, that lets you convert "flat" HTML lists of information into categorized, paginated lists. In essence, it's a presentation layer for improving the readability of related information, without requiring a database or server-side script. It's very browser friendly, supports Firefox 2, IE6+, Safari 2+ and Opera 9+.

Smart Lists relies on Prototype and Scriptaculous, does does not require a database or server-side script, and provides the following configurable options:

» Choice for the item hide/show effect
» Choice for changing page effect
» Control effects speed
» Number of items per page
» Option to show/hide the number of items
» Complete control on CSS classes
» Downgrades gracefully if no JS

Smart Lists can be easily applied to existing lists with very little effort, providing a significant bump in usability.

» See Smart Lists in action
» Download Smart Lists

When it comes to dropdown menus, there are a lot of different coding techniques. Some rely on pure javascript, most on a mixed javascript+CSS approach. To our knowledge, very few utilize the pure CSS methodology, which primarely consist of leveraging original CSS attributes of standard HTML elements.

The snippet we're presenting today, PVII CSS Express Drop-Down Menus from ProjectSeven, uses the "pure CSS" way to implement an easy-to-use and easy-to-setup dropdown menu, by reusing the hover pseudoclass and the li tag to hide and show the menu elements without JavaScript. Sounds great in theory, but in practice it's not so pure. Browsers used by the vast majority of humans do not support this technique and must be served a small script to simulate li:hover. That said, the piece of code is less than 1K and doesn't conflict with any of the standard frameworks.

Setting up the necessary code is child's play: download the little .zip archive from their website, extract the content and move the .js and the .css files to your preferred location into your website structure. Link into the <head> section and add a small conditional markup for IE browsers 6 and before, initialize the script with a <body onload ... > or an event.observe, et voilà ! You're ready to go.

The rest is pure hassle-free: just build your menu structure by imbricating <ul> and <li> tags with the proper class definitions. It's really, really simple! And since it's pure CSS, it's very easy to customize, just as we did for one of our customers: textured background and alpha transparency, anyone ?

See this live on http://www.lelizabeth.be.

What else to say? You can also imbricate multiple levels and sublevels of menu items, and browser support includes (but is not limited to) IE5+, Opera 8+, Safari 1.2+, Firefox 1+ and Mozilla/Gecko 1+.

» Download PVII Menu System

Lets face it, forms are boring, validation is a pain. It’s time to inject some life into them, make them fun again... LiveValidation is a small open source javascript library for making client-side validation quick, easy, and powerful. It comprises of two main parts. Firstly, it provides developers with a rich set of core validation methods, which can also be used outside the context of forms. Secondly, it provides your visitors with real-time validation information as they fill out forms, helping them to get it right first time, making the forms easier, quicker and less daunting to complete.

Two versions are provided - a prototype.js version (ideal for use with Rails), and a standalone version (for using with any other javascript framework). Both are fully tested on most modern browsers with a comprehensive test suite.

» LiveValidation - Validate As You Type

Prototype is one of the coolest javascript frameworks available to developers. And since it's been massively adopted by the community, multiple plugins and snippets were created by enthusiast contributors.

Scripteka centralizes the best extensions for Prototype. Through a minimalist but effective interface, you can browse through 100+ useful (or useless) prototype based extensions, rate and use rating to find the coolest scripts out there, submit your own creations and get community feedback or subscribe to the newest additions to the library.

Definitely the site that many users of Prototype have been waiting for!

» Scripteka: An Extension Library for Prototype

JSLoader is a dead-simple, non-intrusive "Javascript-on-demand" packaging convention which helps developers and the internet community rapidly develop and prototype applications without the headache of figuring out the witches' brew of files that need to be copied, included, etc. You do not need to download anything to use all the Javascript frameworks. it is because multiple sites will share this code the browser and proxy caches will help make things more efficient.

All Javascript Libraries are already installed on their server, so all you need to do is create a <script></script> tag with inside <noautolink> of your page and you should be able to load any of the available modules. Once you’ve loaded them, close the script tag out, and use a separate script block for using the API.

JSLoader supports many Javascript Framewroks, and is beeing regularly updated. So far it offers dynamic embedding of Dojo, Ext.js, FCKEditor, JQuery, MochiKit, PlotKit, Google Prettify, Prototype.js, Scriptaculous, SWFUpload, TinyMCE and YahooUI.

» JSLoader: Javascript Libraries On Demand

The JS Framework scene today is heavily dominated by three major players: Mootools, Prototype and JQuery (I'm not discussing Rails here). So when a rookie enters the game, it certainly deserves a closer look !

Rookie, really? From the name of its proud father, I wouldn't call it a "rookie". The Spry framework for Ajax from Adobe Labs is a JavaScript library that provides easy-to-use, yet powerful Ajax functionality that allows designers to build pages that provide a richer experience for their users. It is designed to take the complexity out of Ajax and allow designers to easily create Web 2.0 pages.

The Spry framework is a way to incorporate XML, JSON or HTML data into pages using HTML, CSS, and a minimal amount of JavaScript. It's HTML-centric, and easy to implement for users with basic knowledge of HTML, CSS and JavaScript. Spry was designed such that the markup is simple and the JavaScript is minimal. By building the front-end of your web application with Spry you enable a more efficient designer-developer workflow by keeping UI separated from back-end application logic.

» Spry framework homepage
» Spry framework demos and samples