CNET JS Standards: Posts

Hi gang,

Been out of town for a week and now that I’m back it’s time to smash a few bugs:

• Fx.SmoothShow - refactored the exploration of the element dimensions when hidden so that it isn’t visible to the user (you won’t see items “flicker” before the show transition anymore)
• element.position - refactored to allow for more than just the previous 5 positions, now supports nine: all corners, all mid-points between those corners, and the center (examples)
• string.cnet.js - fixed up the query string logic to url-decode values
• element.legacy.js - added Element.setText for users who aren’t up to Mootools 1.0
• date.picker.js, product.picker.js, stickyWin.default.layout.js, stickyWin.js - now all use Element.setText for css injection (fixes IE6 probs)
• dramatic refactor of tabswapper; now tabs can be added, removed, moved. Additionally, you can now pass in for tabs, sections, and clickers a dom collection or a selector.

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…

Mootools 1.1 was released a few weeks ago and I’ve finally finished re-writing the Mootorial. You’ll find executable examples of nearly every function and class found in the library. Just as before, it’s a wiki (a wikitorial?) so you can jump in and fix typos or add clarity where you think it needs it.

In addition to this update we’ve tidied up some of our libraries (in particular the Element extensions) and tested them for compatibility with Mootools 1.1. You can download these files from our SVN server, view the examples of them in action, and look through the docs. | Read the rest »

The CNET libraries have, until recently, required that you download a version of Mootools from our svn repository or use the dev version of Mootools. This was before Mootools 1.1 released, and it had some dependencies on code that wasn’t in 1.0.

As Mootools 1.1 is now out, you should download it from Mootools.net. I’ve removed Mootools from our SVN so now the only thing there is our code. You’ll find clientside.moo.v1.1.packed.js in the /cat directory; this is a copy of ALL of Mootools 1.1 + ALL of our code. It’s a big file, but it’s complete if you just want to fool around with it.

I released a lot of code today including a bug fix that was probably pestering any of you with r87.

• product.picker.js now has no picklets; these are in the implementations/picklets directory
• ProductPicker now detects if there is no doctyp and, if not, sets the position of the picker to be fixed (no IE6 support)
• small docs update in element.cnet.js
• added new picklet: CNETProductPicker_PricePath
• added new picklet: NewsStoryPicker_Path
• new file: clipboard.js (allows you to insert text into the OS clipboard)
• new file: html.table.js (automates building html tables)
• new file: element.forms.js (for managing text inputs - get selected text information, insert content around selection, etc.)
• fixed an error in stickyWinHTML (ie reserves “class” for member names)
• converted window.onDomReady references to window.addEvent(’domready’..
• updated css for stickyWin.js to avoid namespace conflicts with the css class “clearfix”

| Read the rest »

So over at Ajaxian today they have a post on Dean Edward's latest update for his excellent packer javascript compression tool:

Dean Edwards has released Packer v3.0, one of the top utilities to squeeze your JavaScript like a lemon.

• respects Microsoft conditional comments
• new option to shrink variable and argument identifiers
• removed the special chars feature
  
  (except the ;;; feature which people seem to like)
• some bug fixes:
  • packer no longer closes spaces between the +/- operators so code like this is safe: c = a++ +b;
  • the throw"error"} bug that affected Safari (this is a Safari bug really but packer gets around it)
  • the __proto__ bug for Mozilla browsers (this only affected the online version of packer)
  • a minor parsing bug affecting the detection of regular expressions
• simplified the user interface

Update:

The problems I outline below are fixed. Thanks Dean!

Unfortunately, I ran one of our libraries through it and found two issues that we'll need to address before we can use it (luckly, I have a local copy of the previous version of the Packer...):

• 'http://...' breaks. Your packer wants this to be double quotes ("http://...").
• /*comment*//*followed by another comment*/ breaks. This happens in our code because we concatenate several files together and each file starts with comments and ends with comments.

I emailed Dean. Maybe he'll have a fix. If not, we'll have to figure something out or use the old one.

Another topic we've been discussing lately is unit testing. This is especially tricky when you're writing code that requires a specific context, but even if we had an automated test for all our common libraries - which assume no such context - I think it would help dramatically. Here's a recent post on Ajaxian about Squish, but, as noted in the post, Selenium seems to be the current favorite for this kind of task...

Squish for Web is a GUI testing tool aiming to be well suited for testing Ajax GUIs (and has special
support for many frameworks such as Backbase, dojo, ICEFaces, qooxdoo, JackBe, etc.)

The Squish for Web edition enables testing HTML-based Web and Web 2.0 (Ajax) applications in different web browsers running on different platforms.

Squish for Web is, unlike many available web testing tools, not restricted to a single web browser or platform. Squish for Web supports running and recording tests for web applications in Microsoft Internet Explorer, Mozilla, Firefox, Apple's Safari and KDE's Konqueror on Windows, Linux, Unix and Mac OS X.

Demos

• Introduction to Squish
• Testing a backbase application

Selenium seems to be the de facto standard these days, but we can always do with new tools to help us test. What do you use?

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 (?)
• ???

Part of writing clean code that doesn't cause you grief in esoteric browsers is doing the best you can to ensure that your code is completely syntactically valid. My pal Valerio (principle author of Mootools) pointed out how to turn on strict warnings, which I couldn't get to show up in Firebug, even though I enabled them there.

The problem turned out to be the excellent Web Developer Toolbar which, if you haven't installed, you should.

The issue is that the default setting in Disable > Javascript > Strict Warnings is to suppress these errors, so even if you enable them in Firebug, you won't see them. You have to enable them in both places. | Read the rest »

There are several new goodies in the most recent release of the CNET libraries. I've got examples and details in the wikitorial, but here's a quick list:

• JsonP - handles grabbing Json from a foreign domain; works a lot like Ajax
• Element.smoothShow/smoothHide - a height/opacity transition for an element to add it to the page smoothly.
• Element.setPosition - position an element relative to another (the window or another dom element)
• ProductPicker - a generic "picker" to allow users (typically in a CMS) to choose an item from a data source.
• stickyWinHTML - a default html block for in-page popups
• SimpleSlideShow - a very, very simple slideshow for dom elements or images

Have fun.