Archive for June, 2007

I just did a little clean up and released Fx.SmoothMove. This functionality used to be a part of Element.setPosition but now it’s an extension to Fx.Styles.

Mootools has a convention that I was breaking here (the same reason prompted me moving Fx.SmoothShow into Fx and out of Element). Basically, it is a general rule in the Mootools dev team never to create one-off instance of classes, especially in Native object extensions (Element in particular). Element.setPosition had an option (smoothMove: true) that would transition the position of the element to the new location smoothly (i.e. using Fx.Styles). But it didn’t return this to you, so every time you used it you created a new instance of Fx.Styles. Aside from this being wasteful, it also means that if you attempt to do this behavior while another is still in process, instead of canceling the previous one and starting a new one, both would run, causing your element to jump around until they both finished.

This is bad form and I should be given three lashes or something. I figured all this out after I’d written a lot of it and have just now gotten around to cleaning it up. But hey, as long as we all learned something… right?

See Fx.SmoothMove in action.

Update: I keep switching out Fx.SmoothShow and Fx.SmoothMove; this note as about the latter… Fixed the typos…

There is a new “Facebook” application that utilizes CNETs great API system. This app that was developed is called “My Tech”.
Apart from the great technology use, it is a fun way to show off your latest tech gear to your friends. The best part is you can show your disdain for certain tech products if you absolutely hate it… Good times

“Tag line from app profile”
This application allows you to let everyone know about the latest tech gadgets available using MyTech powered by the CNET API. Facebook users can find it at: http://mytech.cnet.com

CNET Report on CNET MYtech

Here’s a step-by-step and line-by-line example of how to write a Mootools Class. I wrote this example for a javascript class I taught here at CNET for our developers and figured I’d share with everyone else.

Hell must have frozen over or something. I don’t know if this just fixes certain kinds of leaks or all of them; explicit circular references in your code should still be avoided. Xopus, via Snook:

At Xopus we develop a pretty big (~50k lines) JavaScript application to edit XML documents through a WYSIWYG interface. With such a large application there’s a large risk of memory leaks. Indeed, this is what we’ve been experiencing in Internet Explorer 6. We’ve also seen a decrease in performance as memory usage increased. These leaks, however, do not occur in Internet Explorer 7. And, as of just 10 days ago, they no longer occur in IE6 on Windows XP.

On June 12th, Microsoft released security update MS07-033. Included in this update is the following:

General distribution release (GDR) fixes
A memory leak occurs in Internet Explorer 6 when you view a Web page that uses JScript scripting on a Windows XP-based computer (KB929874)

And indeed, IE 6 on Windows XP no longer leaks memory, nor performance. This is great news for all JavaScript hackers, there’s no need to worry about memory leaks anymore!

The one cave-at is that this fix is only available for Windows XP. For Xopus this means we’ll still have to fix the leaks, since some of our clients are still running Windows 2000. Users who haven’t installed the latest security updates will also experience memory leaks in IE 6. In the end though, Microsoft fixed the memory leak issues in Internet Explorer, and I’m thankful for that.

Jonathan Snook has a nice write-up about using private methods in javascript.

With JavaScript, you can create private methods and properties using what Yahoo describes as the module pattern. Here's the basic construct, including a private method:

PLAIN TEXT

JavaScript:

MyObject = function(){

  var privateMethod = function(){ /* do stuff */ };
 
  var obj = {
    publicProperty:5,
    publicMethod:function(){ /* do stuff */ };
  };
 
  return obj;
}(); // run it right away

If you're not familiar with this pattern, it's really quite cool. It takes advantage of closures, allowing the public methods to access the private methods. I've been using this approach in my recent work and it feels nice and works well.

Slimbox is awesome and we wanted to use it, but there were a few things I wanted to change about it:

• It should be a class
• You should be able to interact with the options without editing the script itself
• I wanted to have the css assets added to the page automatically

So I made these changes and checked it in. | Read the rest »

So in the last week or so I've been working on a bunch of CMS related tasks. I've added some new stuff and, for the first time, 3rd party scripts are now in our repository. Why? Well, why re-invent the wheel, right? In some cases I've implemented a few changes in these libraries, while in others I've rewritten them a LOT. You'll find working examples and details in the wikitorials and I'll be updating our docs shortly. | Read the rest »

Over on the Mootools forum digitarald (a contributor to Mootools) has posted date.js, a date parsing script that converts just about any date a user could imagine entering into a field into an actual date. I'm probably going to add this to our /mootools.extensions/Native folder and integrate it in with our own date.picker.js.

History Manager

Here's another digitarald script that I'm eyeing with a bit of interest, a state manager for ajax environments. From his site:

“Ajax History”, “Back-Button”, “Ajax Bookmarks”, call it however you like. This is an unobtrusive MooTools plugin to allow history handling for multiple modules, try it out. It can handle back/forward history actions and bookmarks with the location hash.

Features

• Allow users to bookmark your ajaxified application in the current state
• Forward/Backward history browsing for your Accordion and every other
• Save states of One-Page-Applications over sessions
• Change easily default options and customize the behaviour with Events

New Mootools Blog

The Mootools site now has a nifty blog and it's got some great stuff on it already. First up is a quick set of reference links to everything you need to learn javascript. Many of these things are stuff I've linked to in my side-bar or in various posts, but it's a nice collection for sure.

SlickSpeed

You might have seen this show up on Ajaxian, but the Mootools gang released Slickspeed, a set of browser tests for dom selector comparisons for various browsers:

IE Debugger: My DebugBar

Here's a new debugger for IE that looks promising. I haven't fooled around with it yet but if anyone has or does, post a comment with your thoughts!

Google Gears

If you've followed ajaxian in the last two weeks no doubt you've seen this already, but Google launched Google Gears a week or two ago. In their words:

Google Gears (BETA) is an open source browser extension that enables web applications to provide offline functionality using the following JavaScript APIs:

• Store and serve application resources locally
• Store data locally in a fully-searchable relational database
• Run asynchronous Javascript to improve application responsiveness

Sounds promising. Here's a nice little write up from Uriel Katz.

Fx.Morph

Was glancing through the demos at http://demos.mootools.net and stumbled on to Fx.Morph, a short little Fx class that transitions an element's properties from one css class to another. I wrote something like this a few months ago but ultimately decided I didn't really need it but now I'm giving it a second thought.