Here’s a little Mootools extension that you might find useful. I’m using it my StickyWin classes to allow the user to “pin” it in place so it won’t move if they scroll.
$('fxTarget').pin()
Execute the example, then scroll. That’s it. You can unpin it if you like:
$('fxTarget').unpin()
(note, in this example because of the way my little fxTarget helper works, unpin will break the drag behavior, but that won’t happen in other instances).
I’ve added .pin and .unpin to StickyWin, too.
UPDATE: This code is now in the plugins directory of the mootools library as Hash.Cookie.
Over on Ajaxian there was a recent post about a little Prototype.js dependent class called CookieJar.
Lalit Patel has created a JavaScript Library to use JSON to store data in cookies. JSON Cookies is built on top of Prototype and gives you a simple API to put and get JSON values into cookies
I liked the idea, so I wrote a version for Mootools. The Mootools version is a little different and adds some functionality (for merging data) and it stores its info a little differently, but it’s basically the same concept. Read the rest of this entry »
Just today I was asked over in the Mootools forums why we don’t create a dependency map like the one in Mootools. My answer there was, basically, that the common code we publish here on clientside is but a small portion of our library. Our javascript spans numerous teams, sites, and applications, and keeping a map like this by hand is probably not practical.
Then today on Ajaxian there’s this post about T.J. VanSlyke’s alterations to Dean Edward’s Base.js to allow him to generate a dependency map of all the classes he writes. This isn’t quite the same as mapping out file-by-file dependencies, but it’s a start. Considering that Mootools is largely based on Base.js, this shouldn’t be too hard to incorporate over there. Read the rest of this entry »
Valerio posted over on the Mootools forums today a list of changes in the upcoming 1.1 version of mootools. We’ve been hard at work on a lot of this stuff and I’m excited to see it come out. After this version, we anticipate working less on the core framework and more on plugins and widgets.
————————————————————————————————————
#Additions
————————————————————————————————————
- CUSTOM EVENTS!
- $each also iterates objects
- added Element::getStyles
- added Element::hasChild
- added Array::include
- added Array::merge
- added $merge, to merge objects
- Dom.js uses XPATH in supporting browsers
- the use of +’px’ in setStyle is not required anymore.
- added XHR::cancel
————————————————————————————————————
#Changes
————————————————————————————————————
- Object.extend is now $extend, still compatible
- Object.native is now $native, still compatible
- Element has been splitted in Element.Events, Element.Form, Element.Dimensions
————————————————————————————————————
#Elements Creation
————————————————————————————————————
- elements creation is easier: new Element accepts second param
- elements creation for elements with name/type is easier, just use second argument.
- setProperty for name/type are is supported anymore.
————————————————————————————————————
#Notable Fixes
————————————————————————————————————
- dom logic is highly optimized and its blazing fast
- better sortables, no more flickering, removed Drag dependency
- Fx.Slide now accepts borders and margins. Positioning is now possible.
- Element::toQueryString in ajax now works as intended with all Form elements, including multiple selects.
- Element::setStyle supports float
- Element::setProperty and Element::getProperty now supports “for”
————————————————————————————————————
#Obvious Things
————————————————————————————————————
- code cleanup and optimization
- bugs and incompatbilities fixed
- mootools is faster, FASTER, FAAASTEEERRR
————————————————————————————————————
#TODO
————————————————————————————————————
- some bugs left
- testing
- css3 selectors (?)
- ???
Over at Ajaxian today they have a post on miniajax.com which describes itself as “a showroom of nice looking simple downloadable DHTML and Ajax scripts”.
I’m not sure if they authored these scripts or if they just collected them all into slick looking examples. Some of the items link to other sites, but some they seem to host.
Some of these things I think would do well to write as plugins for the Mootools library but if Valerio (the gatekeeper for Mootools) doesn’t want it I think some of them would do well to be added to the CNET Library.
This goes hand-in-hand with the patterns project that we’re trying to kick off here. I think this page could really help inform that work…
Now, the problem with the Tutorial is that it shows you snippets of how Mootools work, but doesn’t put them all together to show you how to actually do things on a page.
So in an effort to help people see the right way to write code (well, at least how I write code; “right” is definitely subjective with javascript), as well as how to use the accordion and things like Fx.Slide, I’ve authored a simple little page that demonstrates these things and comments them line by line.
So:
3) View the source of the Mootools Beginner’s Example
Ajaxian has a post on Yahoo!’s latest and greatest: pipes. I haven’t had the time (and am not likely to get the time) . I’m somewhat blown away. It’s stuff like this that makes me wonder what the interweb is gonna be like in a few years. I’m beginning to think that I am going to need a Gibson-esque Johnny Mnemonic port or something.
Crafty. Very crafty.
Yahoo! has a new service called Pipes that aims to make it easy to build mashups:
Pipes is a hosted service that lets you remix feeds and create new data mashups in a visual programming environment. The name of the service pays tribute to Unix pipes, which let programmers do astonishingly clever things by making it easy to chain simple utilities together on the command line.
The UI is a rich Ajax application using YUI of course. It is the kind of UI that feels like Flash, but then you do a view source and you see:
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo-dom-event_2.1.2.js"></script> <script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/connection_2.1.2.js"></script> <script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/animation_2.1.2.js"></script> <script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dragdrop_2.1.2.js"></script> <script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/widgets/2/logger/logger_2.1.2.js"></script> <script type="text/javascript" src="/js/maxwell.js"></script>
Another Ajaxian post today, this one on DJAX, a language that sits on top of javascript. This reminds me of haxe and to a lesser extent of things like the Google Toolkit. Still, I think this is a good idea, but it definitely represents that “next level” of javascript that may actually make it harder for people to adopt. Another programming language? A lot of javascripters barely can handle javascript.
That said, on a personal level, I find it interesting and I want to dig into these kinds of solutions because they are so promising. Anyone have an opinion here? Read the rest of this entry »
That’s odd. Somehow I left out the section in the Mootorial about arrays. Weird. Anyway, it’s there now.
Mootools 1.0 is out. Fancy new site design and docs.
We’ve already refactored all our code for 1.0, though it is not yet released to the CNET site. We’re entering into QA now…
I’ve also released the second part of my wiki tutorial series, this time giving working examples of all the CNET common code. The CNET Libraries are comprised of common code (widgets, shortcuts, etc.) and implementation code - code that is specific to a given page or application. The implementation code is usually just implementing and executing functions and libraries in the common portion of the library. The wikitorial for the CNET common code focuses on this generic content. Form validation, date pickers, carousels, etc. Dig in! Oh, and if you have a chance, Digg the tutorials, too. You’ll find shortcuts to do that in the right navigation column in the tutorials.
