Wednesday, November 12th, 2008
Category: MooTools
, Toolkit
To the ranks of Ext JS, jQuery UI, Dijit, and others comes JxLib, a new browser-based UI toolkit built on top of MooTools. Jason Fournier from the team passed the announcement to us:
JxLib includes layout managers, buttons, tabs, toolbars, dialogs, panels, trees and a basic
grid control all designed to work together. It is heavily based on
using CSS for presentation and includes two separate ‘themes’ that you
can easily switch between. New themes can be constructed by modifying
the existing themes…
JxLib has evolved out of a generic web-based UI toolkit…
for building web-mapping applications. It has been distributed under an MIT license for a couple of years, but this is the first time we have actively attempted to build an open
source community around it. We are excited to share this project with
others, and invite users and developers to join the project.
The Examples page, available off the main project’s page, showcases many of the built-in components and features. The source is hosted on Google Code and there’s a JxLib Google Group as well. After playing with the examples, JxLib seems quite polished and a welcome addition to the crowd. A year ago some folks may have counted MooTools out of the game, but with at least one major release this year, a revamped website, steps towards a plug-in community, and a now a quality UI toolkit, MooTools is in the game.
Monday, November 3rd, 2008
Category: MooTools
Nir Tayeb, a Web developer in Israel, has written up a new Mootools Fx effect class that creates a linear transformation effect using the new transform CSS property (of Safari and Firefox) and or the IE Matrix filter:
I've
created a class extending Fx class and learned for the first time how
to create custom effects. It is very easy, but there isn't enough
documentation about this subject. There also isn't any documentation on
the code specifying what each method in Fx/Fx.CSS does, so I read the
code and analyzed the order of the calls to each method and looked in
the source code of another custom effects of what I found while
Googling on it.
The result is the Fx.Matrix class, which I added
to my MUI project (Mootools UI). It supports the following functions:
scale, skewX, skewY, rotate, scaleNonUniform and rotateFromVector.
These transformations are the only ones which can be implemented in
both the Safari and the IE way; the rest (perspective, translate, etc.)
are only supported in Safari/Firefox 3.1, so I didn't implement them.
You can do matrix work, or do a full transformation with code as simple as:
JAVASCRIPT:
-
-
mfx.start( {
-
scale:[1, 2],
-
skewX: [40],
-
skewY: [50, 0]
-
});
-
Check out the live demo to see a simple transformation.
Wednesday, October 29th, 2008
Category: MooTools
Aaron Newton wrote in with a few interesting news items related to the MooTools community.
Clientcide Testing Framework
First, on the new stand-alone Clientcide.com site (formerly clientside.cnet.com) recently released the Clientcide Test Framework (aka the MooTools Unit Test Framework):
MooTools ships with a version of JSSpec (http://jania.pe.kr/aw/moin.cgi/JSSpec) and a series of Specs tests. This test framework is excellent at verifying that code that immediately produces an output is working. It can test, for example, that 2+2 does equal 4.
It is not, however, very good at evaluating any type of code that has a delay between the execution of a code block and the production of a result. This includes Ajax requests, animations and other transitions, or interfaces that require a user to interact with the test (such as Drag).
The MooTools Unit Test Framework aims to create an environment where developers can utilize test driven development patterns to develop their code as well as use those tests to regress their changes. Tests are easy to write and easy to verify by non-coders. Users are given a simple task ("Drag the box around") and a question to answer ("Can you drag it around?"). Answering yes marks the test as having passed. Answering no marks it as having failed.
Each test is configured thusly:
JAVASCRIPT:
-
-
{
-
tests: [
-
{
-
title: "Your Test Title",
-
description: "A brief description of this test.",
-
verify: "Verification question to ask the user - did the test work?",
-
before: function(){
-
//code to execute when the user starts the test
-
},
-
body: "//User editable JavaScript run after *before* and before *post*",
-
post: function(){
-
//code to execute immediately after the *before* test above;
-
//if this returns a "falsy" value, the test will fail immediately
-
//before the user does anything else
-
}
-
}
-
],
-
otherScripts: ["SomeOtherFileToLoad"]
-
}
-
Clientcide Plug-in Repository
While MooTools lacks a formal plug-in community, Aaron is also announcing that the Clientcide website will fulfill that need on a temporary basis and as part of that makes a call for plug-ins and releases his own batch of plug-ins:
As many of you know, the MooTools team is hard at work on a plugin repository that will allow developers to share their date pickers, form validators, effects, and other widgets with anyone. This project is being pursued as fast as possible, but this means it’s up to a few people who are burning their spare time to work on it as they can.
As a stop-gap solution, I’m going to open up the Clientcide repositories now that I’ve thrown off my corporate bonds. Anyone that wants to release a plugin here is welcome to do so. They’ll be included as additional download options on the Clientcide builder page.
Starting today I’m going to start releasing my work as I write it. This is still somewhat infrequent - the majority of the code I write are classes for my own projects that would be of little use to anyone else. But instead of letting them pile up, I’m going to just drop them all in a “Beta” directory in my repository and get them onto the download page.
Today I released 9 scripts:
* DollarE - Brings back $E from MooTools 1.11. Returns a single Element for a selector.
* DollarG - Returns a collection when given an element, a collection of elements, an element id, or a selector.
* Hash.Run - Executes every method in a hash. Used for page init function groups.
* HoverGroup - Manages mousing in and out of multiple objects (think drop-down menus).
* InputFocus - Adds a ‘focused’ class to inputs when they have focus.
* MenuSlider - A simple dropdown class; see the menu at the top of Clientcide.com.
* Occlude - Mixin class for preventing a class from applying itself to the same element twice.
* String.FindAllEmails - Finds all the email addresses in a string.
* ToElement - Mixin class that returns *this.element*. Allows you to do $(myInstance).
Wednesday, October 22nd, 2008
Category: JavaScript, MooTools
Form validation is one of those problems that every IT developer has to deal with at one point or another. Form.Check is a MooTools plug-in library for dealing with client-side validation easily:
And, it's very easy to use:
JAVASCRIPT:
-
-
window.addEvent('domready', function(){
-
new FormCheck('formular', {
-
display : {
-
errorsLocation : 1,
-
indicateErrors : 2
-
}
-
})
-
});
-
Friday, October 17th, 2008
Category: MooTools
Tom Occhino has released Mootools 1.2.1, a backwards compatible release that also features:
Element.Properties.html (element.set('html', html);) now works even with select and table element’s in Internet Explorer. Element:clone is also now faster than ever, and retains the values of form elements being cloned. A lot of work has also been done to fix some bugs in Class.js, and Safari 2 support is now back. With the help of Daniel Steigerwald, we’ve also cleaned up quite a few memory leaks in IE related to events and Element storage, and destroyed elements are now more effectively destroyed.
Tom also tells us what is new....
We are going to keep going through all the tickets, and try to start fixing the bugs that have cropped up with some of the plugins. 1.2.2 might also see a few new features as we start preparing for some exciting changes and additions we have planned for 1.3.
MooTools 1.2 will be the last version of MooTools to support Safari 2 and Opera 9.5. These browsers have been advancing at a tremendous pace, and have a user base which updates regularly, so we don’t think this will be much of an issue when the time comes. Note that you don’t need to worry about this for quite some time yet because 1.3 is a long way off, but we just thought this was a good place to let everyone know.
Friday, September 12th, 2008
Category: MooTools, Showcase
Ruven Pillay has updated the JavaScript image viewer that we posted on awhile back. We asked Ruven what he has done and he told us:
Well, I've just released a new version which updates the libraries to Mootools 1.2 and adds a whole bunch of useful features like navigation buttons, a draggable navigation window and the ability to create layers.
I've also tried to push javascript to it's limits and build an advanced visualization application around the IIPMooViewer. There is a demo of a multispectral viewer, which allows you to blend between different kinds of scientific imagery of the same painting. For example, you can blend between a normal colour image and an X-ray / UV or infra-red view. You can also view the spectral curve at each point on the painting when you click on the main image. The whole thing is pure javascript (using Mootools) with the graphing done using Canvas/VML via the MooCanvas library.
Friday, August 22nd, 2008
Category: Games, MooTools
Munteanu Gabriel has created today's Friday JavaScript game. It is an old favourite.... Bomberman.
Munteanu has released the code as an open source project, and you can get going to bomb away now
Tuesday, August 19th, 2008
Category: MooTools, Tutorial
Conserving screen real-estate while still providing good content to the user has always been a challenge for designers and developers and while larger screen dimensions are becoming more prominent, it's still important to take full advantage of the space available to you. Jeeremie over at Web Kreation came up with a very cool method of display a login panel using MooTools v1.2's built-in effects capabilities:
Some of you were wondering what script I used to show/hide the login panel on top of this page (or in my latest Wordpress theme: “Night Transition”). In this tutorial, we will see how to create a similar login/signup panel for your website using Mootools 1.2.
Jeeremie walks you through the steps of dropping this code into your site and provides the final source code as well to make the whole process painless. The end result is a very nice and intuitive slide down login panel which provides a nice balance of functionality and preserving screen real-estate.
Thursday, August 14th, 2008
Category: MooTools
Aaron Newton has relaunched clientside.cnet.com with a cleaner, leaner, look and feel. The news for the launch is:
- The Mootorial (the MooTools tutorial) is now updated for MooTools 1.2 and on it's own domain www.mootorial.com
- The wikiTorials(tm! - not really) for all of CNET's codebase have been updated for our updated 1.2 code (which launched in June)
- The MooTools book (Apress) is available for sale! You can get the PDF today, and you can pre-order the paper back which should ship in just a few days time.
Tuesday, July 1st, 2008
Category: JavaScript, MooTools
MooWheel, the JavaScript connections visualization library, has been updated to version 0.2.
Updates include:
- New data format
- Text can now be hovered over, in addition to the dot
- Images can be added for each item
You can see the popular Twitter example
(thanks to Augsto Becciu, creator of TweetWheel).
Also, MooCirclePack has just been released:
MooCirclePack is another stunning visualization library that brings circle packing to JavaScript. It is great for data that can be represented by size (eg: an alternative to a bar graph), or data that can be represented amorphously.
There is a non-Ajax demo, and an Ajax one.
Monday, June 23rd, 2008
Category: MooTools
The MooTools team recently announced v1.2 of their namesake JavaScript library and hot on the heels of this release is an update to the CNET Clientside MooTools plugin repository.
CNET has a very comprehensive set of controls and widgets that complement the MooTools library that provide such functionality as carousels, slideshows, date pickers and tabs. This update brings the plugins inline with MooTools v1.2's updated architecture as well as adds several new features and fixes.
We’ve done a fair amount of QA (with the above listed test suites) and officially support Safari, Firefox (we haven’t done much testing in FF3 just yet but don’t expect any issues), IE 6, 7, and 8. We’ve tested in Opera and have found one or two small issues that we’ll address.
The updates are available in a couple of ways including:
Thursday, June 19th, 2008
Category: Examples, MooTools
Scott Boyce wrote in with an interesting story about deckmyplace.com.
The site was originally designed as a Flash site, but when the mandate came from the top to use HTML instead of Flash, he had to see just how much of the original comps he could implement. And it turns out, pretty much everything.
We asked Scott to share some details on his experiences building the site:
When the mandate to drop Flash came, there wasn't time to redesign. My goal was to make it indistinguishable from Flash visually, but do so while employing valid markup, progressive enhancement, and Section 508 accessibility.
MooTools
I had previously used Mootools (and moo.fx prior to that) to add subtle animation to interface elements, but I had not built a site entirely around it (or any other JS library). I had also not created a site with such explicit positioning throughout, so there were CSS challenges as well.
I used a lot of Mootools' built-in assets: AJAX, tool tips, sliders.
Fancy Page Transitions
The page transitions are done with a combination of effects. Basically, there's three layers: the frame, the content, and the (ususally hidden) background. When the user navigates to a new page, the following occurs:
1. The background is switched to a blurred screenshot of the current page (instant; the image has been pre-loaded).
2. The opacity of the content area is reduced, revealing the blurred background image (300 ms).
3. New content is loaded via AJAX (each content page is about 1 KB; the lounge is about 4 KB).
4. The opacity of the content area is scaled back to 100% (300 ms).
The Development Process
The content was first laid out with HTML, using PHP includes to eliminate the need for any duplicate content. (Incidentally, the entry form and validation were also written in PHP.) The CSS was created alongside this framework, which resulted in the JS-disabled version of the site. Once we were satisfied there were no issues with the display or functionality in a few target browsers (Firefox, IE6, Safari, Opera, Lynx, IE6 + JAWS), I started writing event listeners.
Once the JavaScript was written, we tested again. In the end, I think the only thing we had to drop were the background music and some of the secondary animation (spinning knobs). Still, most people just assume it's Flash.
Firebug, YSlow, and the Web Developer toolbar for Firefox were invaluable tools during development
Stats
* Total JavaScript is 59 KB (51 KB for Mootools + 8 KB for the library)
* 30.9 KB of CSS (including 4.7 KB of CSS for MSIE loaded via conditional comments)
* 2.59 MB for the whole site (2.11 MB of images)
I love the legal disclaimer at the bottom:
The thought of a corporation owning a trademark on a given name... fascinating. I can only imagine the future litigation between the Dave Thomas' of the world.
Friday, June 13th, 2008
Category: MooTools
Many people wrote in to tell us about the recent MooTools 1.2 release and updated MooTools website. Coming nearly a year to the day after their last production release (1.11), Moo differentiates itself from other popular frameworks by cramming Prototype-inspired helpers and smooth effects into a small download. Weighing in at 90KB uncompressed, this bovine package is quite a bit smaller than Prototype by itself (124KB) or when combined with Scriptaculous and all its features (~280KB); it's also a bit smaller than jQuery (97KB).
(Of course, comparing sizes is fairly meaningless due not only to minification and gzip'ing distorting the numbers but also the large variety of what's in the "core" distribution of frameworks and what's relegated to other plug-in's, etc.).
Some of Moo 1.2's notable new features include:
And more! I love the custom MooTools version builders for creating an optimized version of the MooTools core and MooTools plug-ins.
Milkshakes all around for the Moo team; congratulations on the new release.
Friday, May 30th, 2008
Category: Games, MooTools
Markus Inger wanted to hone his Mootools skills, so he created a BeJewelled-like game, BeSlimed. Give it a Friday whirl!
Wednesday, May 14th, 2008
Category: CSS, MooTools
Chris Schneider has created a javascript implementation of CSS Effects using the MooTools JavaScript library. It basically parses the css and mimics the new Webkit css animations.
With the introduction of CSS we could seperate the presentation layer and the content layer, but we were not able to add animations via CSS. DHTML fixed this misbehavior, but now the presentation and behaviour layer were mixed.
First I tried the concept of adding something like “-moofx-{property}: {from} {to};†to CSS. The disadvantage of this way is that you have to specify the change twice: First in regular CSS to serve the non-JavaScript-users, then for the animation.
After hearing about WebKit’s CSS Animations I changed my concept of CSS animations. Instead of setting an additional target or starting value, both properties are specified â€normallyâ€. The only thing you have to add is a declaration.
The script uses MooTools soon to be release v1.2 and works in Safari 3, Firefox 2 and mostly Internet Explorer 7. The script degrades in Internet Explorer 6, because no dynamic pseudo-classes are supported.
You can see the script in action here.
Monday, April 28th, 2008
Category: Component, Flash, JavaScript, MooTools
Harald Kirschner has created a new version of FancyUpload "a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar."
A good example is the Queued Photo Uploader which is coded by:
JAVASCRIPT:
-
-
var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
-
'url': $('form-demo').action,
-
'fieldName': 'photoupload',
-
'path': '../../source/Swiff.Uploader.swf',
-
'onLoad': function() {
-
$('demo-status').removeClass('hide');
-
$('demo-fallback').destroy();
-
}
-
});
-
-
/**
-
* Various interactions
-
*/
-
$('demo-browse-all').addEvent('click', function() {
-
swiffy.browse();
-
return false;
-
});
-
-
