Sexy Validation with Formular
MooTools FormCheck + Form.Validator = Formular
There are two (well known) ways to go about form validation using MooTools. One method includes using the MooTools FormCheck plugin which offers a very elegant form validation experience using custom made (but scalable) tooltips to signify error messages that appear inline with the erroneous form input elements. This solution is very nice, and I myself have used this plugin in the past. The big issue, however, is that extending this tool and merging it with MooTools itself is fairly complicated.
The second option is to use the Form.Validator core provided from MooTools. This plugin doesn’t have a visual aspect to it and the Form.Validator.Inline plugin offers the visuals of inline form validation, but doesn’t include the fancy tooltips that the FormCheck plugin provides. Extending Form.Validator is simple, and the options are very fancy indeed.
The MooTools Formular plugin is the third approach to form validation using MooTools. The plugin mixes in the functionality of the FormCheck plugin (the ToolTips and Scrolling) with that of the codebase of the Form.Validator plugin. Thus it is the best of both worlds. The plugin is available from, your’s truly, yearofmoo.com and can be found from this page (the documentation is also hosted on the same page).
Darkmate Color Scheme for Vim
Darkmate for Vim is finally here
The Darkmate theme for the gedit is one of the best themes out there. However, other text editors such as VIM do not have their own port of the darkmate theme … but now there finally is one offered exclusively by yearofmoo.
(more…)
Minify CSS and JS with Git Hooks
Automating Minification with Git
nine times out of ten, the website that you’re working on will need to have some form of compression, minification and concatenation of stylesheet and javascript files. There are a few options todo this automatically, such as using a server-side minification script that will combine the stylesheet files as well as JavaScript files (separately of coarse).
However, using Git Hooks, you can combine and minify all the stylesheet and javascript files before they’re uploaded to the repository.
Cross Browser Stylesheet Preloading
Preload stylesheets with ease
Since this website focus is primarily on JavaScript and AJAX, I figured it would be worth while to discuss the mechanics behind cross-browser stylesheet preloading because this topic hasn’t been effectively solved and discussed about online. Preloading (downloading in the background) stylesheets is tricky, but its a solid requirement for creating advanced AJAX-based websites. So how do we get this to work? What’s the problem?
To preload a stylesheet file, we simply create a <link> tag with the attributes rel=”stylesheet”, type=”text/css” and href=”/path/to/stylesheet” and set an onload property right? Well, popular browsers such as Chrome, Firefox and Safari do not support the onload event/property for link tags, so natively there is no method of getting the onload event to fire when the stylesheet has been loaded.
Basically, what we want to get is this:
new RemoteStylesheet('/path/to/stylesheet.css',{
onLoad : function(link,href) {
alert('stylesheet loaded!');
},
onError : function(link) {
alert('something messed up :[');
}
});IE9 and CSS3 Box Shadow
How well does IE9 support box-shadow?
This is a very short blog entry to CONFIRM that the CSS box-shadow property does work in Internet Explorer 9. The reason why I’m blogging about this is because after the final version of IE9 was released, I was eager to find out if the box shadow property was supported and if it worked properly. After testing a couple of the websites where I have implemented the box shadow property, I still wasn’t sure if it was working 100%, and there were no websites that directly ensured that it works.
The findings are explained below:
(more…)
Autocompleter.js with ID values
Customize Autocompleter.js to provide ID values
AutoCompleter.js is a useful tool for providing autocompletion for websites. However, despite the wealth of features, the plugin doesn’t automatically provide support for ID values fetched directly from the JSON response.
This blog article will explain how to tweak the MooTools AutoCompleter.js plugin to support ID values.
MooCaptcha
MooCaptcha Plugin
The MooCaptcha plugin is available for use. The plugin is designed to make the integration of the Google Recaptcha plugin into a website very easy with MooTools.
new MooCaptcha(container,{
publicKey:'124567890...',
theme:'clean',
onReady : function() {
//the captcha is ready
}
});