Ashley Ford from PaperMashup is a sharing a nice tutorial about creating a set of pretty CSS3 buttons that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers. Currently, compatible CSS3 browsers are Safari, Chrome and FireFox 3+. It is worth noting that if you’re using Internet Explorer you’re not going to see all the effects as Microsoft’s browser still doesn’t support CSS3.

A button is customized by adding a chain of CSS classes. This way you can set the color and size. The button uses an overlay background image. This is useful for the gradient effect. For IE6 you’ll need to use a PNG transparency hack to make a 24 bit PNG’s render correctly. Another thing to notice is the way colors are defined. All are set using RGBA which brings much more flexibility when rendering shadows.

Inspired by the article ‘Make Your Mockup in Markup’ by Meagan Fisher, Sebastian Senf developed a plugin useful to style your markup right in your browser with a build-in element selector and CSS editor.

Just generate the CSS code of altered elements with one click and use it in your own stylesheet. Being annoyed by the process of designing the mockup with markup, Sebastian coded this plugin as an alternative to the classical ways of designing (e.g. change the CSS code and then check the results in your browser). He is one of the persons who can’t stand Photoshop to design every bit of a website in it.

ie-css3.js is JS Script that allows Internet Explorer browser to identify CSS3 pseudo-class selectors and render any style rules defined with them. To use it, you will have to download ie-css3.js and one of the supported JavaScript libraries and include them both in the page of your
website.

First, ie-css3.js makes a check for known JavaScript libraries and selects the one with the best CSS3 selector support. Next, the stylesheets are downloaded and each of their selectors are parsed. Any CSS3 pseudo-classes are replaced by a standard CSS class of a similar name (e.g. div:nth-child(2) becomes div.iecss-nth-child-2). After that, the detected JavaScript library is used to find the DOM nodes matching the original CSS3 selector and the same CSS class is applied to them. Finally, the stylesheet gets replaced with the new one and any elements targeted with CSS3 pseudo-classes will be styled.

A few things you should know:

• Style sheets MUST be added using the <link> tag. Page level style sheets won’t pe parsed
• Style sheets that use the file:// protocol will not work due to browser security restrictions
• Style sheets MUST be hosted on the domain as the page
• The emulation is not dynamic. The styles are fixed once they are applied. Changes to the DOM won’t be reflected.
• The :not() pseudo selector is not supported (it’s coming though)

JQuery styledButton Plugin is an attempt to recreate Google’s imageless buttons and prove “that it doesn’t take a whole team of engineers and an endless cycle of code revision and quality control (their own words) to pull this off.” These buttons automatically adapt to padding and other styling you wish to use. To customize them, you just need to change a few CSS lines. All the display critical CSS rules are hidden deep inside the plugin. The buttons were tested with SPANs, although they should be applicable on any element. In order to preserver the semantic structure of the documents, all markup needed to render the buttons is nested inside the main element.

SimpleModal Login is a Modal AJAX Login for Wordpress that uses the jQuery library and the SimpleModal JQuery Plugin. This WP Plugin allows you to create your own custom themes. Currently, there are 2 themes available: default and osx.

From the plugin’s settings menu you can choose from one of the available themes as well as select where the user will be taken upon successful logon.

If you want to create a new theme, you need to add 2 files under the simplemodal-login plugin directory. css/THEME.css and js/THEME.js. Replace theme with the name you would like to use. Eric Martin, the author of this awesome plugin, suggests using one of the existing themes as a template.

More information – including installation guide, FAQ’s, screenshots – can be found on the WordPress SimpleModal Login Plugin page.

iJab is a free web based instant messaging program for XMPP/Jabber. Users can run their own instant messaging, complimenting the XMPP philosophy of a distributed network. iJab is interpreted purely by the client web browser. Hence, it does not require downloading and installing any additional software. iJab also developed iJabBar, a Facebook styled web chat client.

Features include:

• Based on XMPP protocol and it’s standard
• Support MSN, AIM transport and any transports in XMPP server
• Written with GWT and compiled to Javascript files
• Cross-browser compatible
• Easy integration with website
• Supports theme – you can add your own theme
• Support for 3 modes: stand-alone application, web chat bar in page and live support
• Sound support
• User search
• Smiles support

jQuery Lint is a simple script, used with the JQuery library, that diligently reports errors and any incorrect usage of jQuery. To some extend, it also offers guidance on best practices and performance concerns. Unline JSLint, this plugin is a runtime reporter. To use it, you need to include it after JQuery in your document.

If you pass incorrect arguments to any method, jQuery Lint will let you know. It compares your arguments with the argument signatures in jQuery’s API. To see the errors reports, you can either use FireBug or you can quite easily plug-in your own console mechanism.

$dom is a lightweight JavaScript library for selecting, traversing, styling and animating DOM elements. This tiny JavaScript library weights only 5k (2kb gzip’d) and it can be used as an alternative to other well known.js libraries such as JQuery or Prototype. Sometimes, you just need a library that loads faster and has only the features you need to use. Many developers are using only 10% of other frameworks’ features while still having to download 100% of the code.

Features include:

• CSS selectors and animations
• DOM manipluation and traversal
• Element styling
• Completely unobtrusive

J.A.I (JavaScript Audio Interface) is the world’s first JavaScript interface for web <audio>. It doesn’t use any images for it’s player interface, all the graphics being rendered to a <canvas> element at run-time. The links from the click-able play-list area are CSS customizable. ‘Javascript Audio Interface’ is designed to provide juke-box functionality to <audio> enabled browsers that use the Ogg Vorbis audio codec.

This open-source web-application reads standard HTML5 <audio> tags from the HTML document. If the browser does not support HTML5 audio, anything between the start and the end of the audio tag gets rendered. Thus, it allows you to offer fall-back content to users with older browsers.

In order to hear the sound, your browser neeeds to be serving the correct MIME types. You can update your http.conf if you’re using Apache. If you do not have access to this file then you can add the line AddType application/ogg ogg to .htaccess.