Home
vgs_rss' Journal -- Day [entries|friends|calendar]
vgs_rss

[ userinfo | livejournal userinfo ]
[ calendar | livejournal calendar ]

TileStack: HyperCard for the Web [13 Jun 2008|12:01am]
08:31 09.06.2008
TileStack: HyperCard for the Web

LtU pointed me to TileStack, the latest attempt to resurrect HyperCard and bring it back to the Web (they are closely related of course).

Running online there are going to be limitations about which stacks can be ported, which may reduce the usefulness and impact of this project, but maybe a standalone version will come later.

The system compiles Speak (the TileStack version of HyperTalk) to Javascript. If the result is not obfuscated, something I haven't verified, it may be possible to augment the output from TileStack with additional capabilities not supported or not yet implemented.

From the compatibility angle it is interesting to note that they renamed the language and seem to imply they are going to extend it beyond HyperTalk, without giving any specific guarantee about future compatibility. I'd suggest releasing the compiler that's as close to full HyperTalk compatibility as a separate product (or even, if they can bring themselves to do it, releasing it as open source).

What does Speak look like (remember, not Squeak!):

Speak is the name of the language that all TileStack's use to describe what should happen when someone interacts with a stack you've created. It is directly related to the HyperTalk language that was used by HyperCard for the same purpose.

It is in the same vein as the "kinda like English" languages like AppleScript, COBOL, BASIC, ...

set the name of card field 1 to \"My Field\"
	
go to the next tile
	
get the first word in field \"First Name\"

The team is working on being able to embed these Tiles anywhere on the Web (gadgets, etc).


read more at Ajaxian
post comment

jQuery UI 1.5: Effects, API, and Themes [13 Jun 2008|12:01am]
08:54 09.06.2008
jQuery UI 1.5: Effects, API, and Themes

Paul Bakaus & the jQuery UI Team has released a major update jQuery UI 1.5.

There seem to be three major pieces to the news:

API Refactoring

What we came up with, was an API that removed 95% of our exposed methods, and kept only one single overloaded method per plugin. For example:

  • $(”div”).draggable() creates a draggable
  • $(”div”).draggable(”destroy”) destroys it
  • $(”div”).draggable(”method”) calls another method on the plugin.

The new API also makes all callbacks behave similarly, exposes the default options for each plugin and intelligently cleans up plugins using remove(). We also made it possible to update plugin options on the fly, and added smaller updates that make UI feel like one suite.

In order to make this happen, we removed the jquery.dimensions.js (which can now be found in jQuery core), the ui.mouse.js and the *.ext.js dependancies, introduced a ui.core.js (which includes many useful helpers) and created the jQuery UI widget factory which makes creating a new plugin for UI amazingly simple while making it very difficult to break the API.

Effects: Internalizing Enchant

One of the great things in being able to take a step back is that it offers a totally different perspective on what a full-featured UI solution should offer. While jQuery UI v1.0 was currently offering a nice suite of UI controls, users were in need of solid effects like those offered in libraries such as script.aculo.us and jQuery UI’s former inspiration, Interface. Unfortunately, Interface was no longer being updated which left a bit of a hole in terms of effects; hence a new project called “Enchant” was born. Originally planned to be released as a complementary library to jQuery and jQuery UI, we realized that it made perfect sense to merge Enchant with jQuery UI allowing users easy access to advanced effects and UI controls from one solution.

We’re proud to announce that Enchant is now a part of jQuery UI and jQuery users now have a unified solution for their effects and UI needs. The jQuery UI effects can be used standalone or together with UI and have a separate core which extends the jQuery core to introduce advanced easing, class transitions (morphing) and color animations. All effects are tightly integrated into the main API and can be used as standalone ( $(..).effect() ) or directly from within jQuery methods you already know ( hide()/show() ).

Overall, we already have more than 15 ready-to-use effects for you to use in your projects, not only those provided by script.aculo.us (blind,bounce,drop,fold,slide …), but also fresh, new effects (transfer, explode. clip, scale) that make jQuery UI a great library enhancing your applications!

As promised in one of the last blog posts, it comes with a complete documentation and a combined demo page to let you see them in action.

Create your own Themes, with help

ThemeRoller is an application itself that allows you to create themes on the fly and save them out. The Filament Group did the work and blogged about how.

The jQuery team also wanted to give a shout out to Liferay, "who invested countless hours into the development of the new UI website, and with whom we worked closely together to stabilize jQuery UI for all kinds of enterprise situations."


read more at Ajaxian
post comment

Johnson: Wrapping JavaScript in a loving Ruby embrace, and ARAX [13 Jun 2008|12:01am]
11:05 09.06.2008
Johnson: Wrapping JavaScript in a loving Ruby embrace, and ARAX

John Resig pointed us to Johnson, a project that "wraps JavaScript in a loving Ruby embrace."

It seems to give you a JavaScript interpreter that you can pass a context into to. The simple examples are:

PLAIN TEXT
RUBY:
    require "johnson"
     
    Johnson.evaluate("4 + 4") # => 8
    Johnson.evaluate("4 + foo", :foo => 4) # => 8

John saw the following code that gives you __FILE__ as a global that stores the file name a la Perl:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. (function(){
  3.   this.__defineGetter__("__FILE__", function() {
  4.     return (new Error).stack.split("\n")[2].split("@")[1].split(":").slice(0,-1).join(":");
  5.   });
  6. })();
  7.  

I am curious to see the itch that they guys are scratching here.

Of course, Silverlight is giving us ARAX according to John Lam. Darryl Taft reported on the news, and I quickly told him that JRuby has given us Ruby in the browser for quite some time. The latest Java plugin supports JNLP, and JRuby build a JNLP distribution for you if you want it. Silverlight is another vector for Ruby in the browser.

Ben said the following about the Silverlight version:

If this is about using Silverlight to host client-side browser scripting in Ruby, it's definitely an appealing notion, but the problem will always be about Silverlight being a Microsoft technology.

As long as Windows/Office dominates Microsoft's balance sheet, these cross-platform Microsoft plays always feel a bit like the story of the boy who upon encountering a rattlesnake picks it up after it promises not to hurt him, upon which the snake promptly bites. After the boy protests, the snake says: 'You knew what I was when you picked me up.' No matter what capabilities Silverlight may have, I think most of us in the community simply wouldn't dream of embracing architectures dependent on Microsoft's goodwill to support other OS vendors.


read more at Ajaxian
post comment

String Performance in IE: Array.join vs += continued [13 Jun 2008|12:01am]
13:37 09.06.2008
String Performance in IE: Array.join vs += continued

Tom Trenka has followed up his last post on String performance with a deep dive on IE that dispells the myth of Array.join.

Tom goes through tons of tests across versions of IE and using varying sizes of data.

In Conclusion

First things first—with the performance improvements with IE7, we no longer need to consider using an alternate path when doing large scale string operations; using Array.join in an iterative situation gives you no major advantages than using += in the same situation. In addition, the differences with IE6 were slight enough to allow you to not bother forking for that specific version.

The only time considering using an array as opposed to a string for these kind of operations is when you are aware that the fragments you are appending are very large (on the order of > 65536 bytes); doing this will cause the GC issues Dan Pupius talks about in his analysis of object allocation and the JScript garbage collector.

From there, we can progress to programming techniques—with Internet Explorer, it is much better to call Builder.append with as many arguments as possible than to simply iterate and push things in one at a time.

It is also better to start small; try to structure your string operations so that very large string operations are minimized. In this case, using a temporary buffer to assemble a set of strings together and then adding them to a much larger string is better than constantly adding small fragments to a larger string.

And as always, minimizing the size of an iteration will help get extra performance out of JScript.

The raw numbers have been made available to scour over.


read more at Ajaxian
post comment

Is “finally” the answer to all IE6 memory leak issues? [13 Jun 2008|12:01am]
15:22 09.06.2008
Is “finally” the answer to all IE6 memory leak issues?

Hedger Wang has been scanning a lot of Chinese blogs lately for solutions to IE6 and memory leak issues. One of the things he stumbled upon is a pretty nifty way of nulling the objects to stop memory leaks by using the try ... finally construct. So instead of this solution which leaks memory:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. function createButton() {
  3.       var obj = document.createElement("button");
  4.       obj.innerHTML = "click me";
  5.       obj.onclick = function() {
  6.         //handle onclick
  7.       }
  8.       obj.onmouseover = function() {
  9.         //handle onmouseover
  10.       }
  11.       return obj;//return a object which has memory leak problem in IE6
  12.     }
  13.     var dButton = document.getElementsById("d1").appendChild(createButton());
  14.     //skipped....
  15.  

You can use the following which doesn't:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. function createButton() {
  3.       var obj = document.createElement("button");
  4.       obj.innerHTML = "click me";
  5.       obj.onclick = function() {
  6.         //handle onclick
  7.       }
  8.       obj.onmouseover = function() {
  9.         //handle onmouseover
  10.       }
  11.       //this helps to fix the memory leak issue
  12.       try {
  13.         return obj;
  14.  
  15.       } finally {
  16.         obj = null;
  17.       }
  18.     }
  19.     var dButton = document.getElementsById("d1").appendChild(createButton());
  20. }
  21.  

More demos, proof of concept examples and the "finally" explanation is available on Hedger's blog: Finally, the alternative fix for IE6's memory leak is available


read more at Ajaxian
post comment

Require Javascript for Contributions? [13 Jun 2008|12:01am]
20:53 09.06.2008
Require Javascript for Contributions?

On the Stack Overflow blog, Jeff Attwood asks Is it OK to require JavaScript to participate?

Note that by “participate” I mean “edit, answer or ask a question”. Of course passively reading a question and the associated answers will work fine without JavaScript enabled.
...
While we do believe in progressive enhancement, it’s possible that some of the features we’re building for asking and editing may be so dynamic that they do not degrade well, if at all.

What say you? Is it OK for a website in 2008 to require JavaScript for active (not passive) participation?

On a forum site like StackOverflow, is it an "enhancement" when you add a comment? Not really, which would make me lean towards keeping the site simple and not requiring Javascript for making basic contributions. There is also accessibility to consider (although "accessible" is not the same thing as "Javascript not required").

It could be argued that as a developer-focused website, Javascript can be assumed. But developers are also the most likely folks to go out of their way and turn Javascript off. And developers are also among the most critical of sites that require Javascript (or Flash) when it could have worked without it.


read more at Ajaxian
post comment

jQuery Selectors Refcard Now Available [13 Jun 2008|12:01am]
08:18 10.06.2008
jQuery Selectors Refcard Now Available

The latest Refcard, jQuery Selectors written by authors Bear Bibeault and Yehuda Katz, has been released and is now available for download in PDF format (DZone registration required!)

jQuery selectors are one of the most important aspects of the jQuery library. These selectors use familiar CSS syntax to allow page authors to quickly and easily identify any set of page elements to operate upon with the jQuery library methods. Understanding jQuery selectors is the key to using the jQuery library most effectively.

The Refcard covers jQuery topics such as the types of jQuery selectors, basic CSS selectors, custom jQuery selectors, matched set methods and more. It also includes very useful "Hot Tips", such as how you can create unions of queries, and beginner mistakes.


read more at Ajaxian
post comment

Silverlight 2 beta 2: cross domain connections, more controls, and animation [13 Jun 2008|12:01am]
10:13 10.06.2008
Silverlight 2 beta 2: cross domain connections, more controls, and animation

Microsoft launched Silverlight 2 beta 2 last Friday (which seemed a bit strange....).

I saw this on the same day as some Adobe folks showed me an old thread that showed MLB.tv sneaking a context menu saying "About Silverlight" into the Flash version ;)

What is new in the latest beta? Danny Thorpe is looking forward to digging into the "new support for cross-domain connections using sockets, sibling to Silverlight’s existing cross-domain HTTP request."

Full Feature List

  • Animation
    1. Support for animating custom data points
    2. Object Animation support (animating structs)
  • Deep Zoom
    1. New XML-based file format
    2. MultiScaleTileSource to wire up your own images and get the Deep Zoom experience
    3. Better notifications when sub-images enter the view
  • Controls
    1. Customize the look and feel of controls using Visual State Manager. Interactive control templates were never so easy.
    2. Some base controls are now part of the core platform, rather than packaged into apps. Say hello to smaller app sizes.
    3. Calendar now supports multi-selection and blackout dates
    4. New TabControl
    5. Control properties changes (Background, Tooltip, FontFamily, FontSize…)
    6. DataGrid improvements: auto size, reorder, sort, performance and more
  • TextBox
    1. IME Level 3 input support
    2. Text wrapping and multiline selection highlighting in textbox
    3. Scrolling and clipboard support
    4. Document level navigation keys
  • Improvements in error handling, reporting
  • Parser and Property system
    1. DependencyProperty.Register/RegisterAttached now supports PropertyMetadata
    2. New DependencyObject.ClearValue
    3. Visual tree helper
  • Data-binding
    1. Per binding level validation
    2. Support for element syntax for binding markup extensions
    3. Binding to attached properties
    4. ItemsControl extensibility (OnItemsChanged method)
    5. Fallback in value conversion (Binding.UnsetValue)
  • Input
    1. Support for limited keyboard input in Full Screen mode (arrow, tab, enter, home, end, pageup/pagedown, space). I've seen more than a few requests for this on the forums.
    2. Managed APIs for Inking and stylus input
  • Networking and Data
    1. Cross Domain support in Sockets
    2. Cross Domain security enhancements
    3. HttpWebRequest and WebClient callable from background threads
    4. Upload support in WebClient
    5. Isolated Storage: default size increased to 1MB and new ability to change quota with user consent. Also a new management UI.
    6. Duplex communications ("push" from server to Silverlight client with no need to "poll" for data)
    7. LINQ -to- JSON serialization
    8. Significantly improved SOAP interop
    9. "Add New Item" template in Visual Studio for "Silverlight-enabled WCF Service"
    10. ADO.NET Data Services support
  • UIAutomation and Accessibility support in the platform
  • Media
    1. Platform support for Adaptive Streaming (also referred to by people as multi bitrate), the ability for Silverlight to switch between media depending on network and CPU conditions
    2. Content protection with PlayReady DRM and Windows DRM
    3. Basic server-side playlist (SSPL) support
  • Localization
    1. Changes to localized application model. You now create one xap per locale, instead of one monolithic multilingual app
    2. Expanded localization languages of runtime and SDK
    3. Japanese SDK Installer and documentation (July 10)
  • Several changes to make API and behavior more compatible with WPF
  • Tools
    1. Beta 1 projects will be automatically ported to Beta 2
    2. Remote debugging for VB on the Mac
  • CLR
    1. A new developer-oriented runtime package with debugging binaries, localized strings, docs etc.
    2. Support for OS fallback logic for resources
    3. CurrentCulture and CurrentUICulture isolation to AppDomain level
  • DLR
    1. Performance improvements
    2. Various new DLR and IronPython 2.0 Beta 2 language features
    3. Various new IronRuby features

read more at Ajaxian
post comment

Aptana Cloud: A sneak peak [13 Jun 2008|12:01am]
10:27 10.06.2008
Aptana Cloud: A sneak peak

Aptana Cloud

Dougal Matthews has been playing with Aptana Cloud in a beta form. He wrote up this piece that walks you through the functionality with screenshots:

After creating a project it then is automatically available in the cloud options.

When you click on the project under the cloud menu you are taken through a (very easy to use) wizard for configuration. This runs your through a few steps, setting up a site name, picking a payment plan (the beta is free), payment details and so on. Most of these screens are fairly standard, however the service selection is quite interesting. I imagine these prices are not final, so just take them with a pinch of salt.

The payment scheme seems to be quite flexible and we can see a large number of services that are included, PHP being the main server side language at the moment, with Aptana Jaxer still being a beta… (Ruby of Rails is on the ‘coming soon’ list). The prices range from the cheapest being 256 MB ram and 5 GB hard disc for $0.99 a day, up to 2 GB of ram and 25 GB hard disc for $8.22 a day. Seems fairly reasonably priced.

After set-up is finished, it phones home and does some magic.

This is an important step for Aptana, as it not only gives us a good general cloud service, but it also gives you the perfect place to play with Jaxer. I am looking forward to seeing more.


read more at Ajaxian
post comment

Mascara: Putting lipstick on JavaScript? [13 Jun 2008|12:01am]
21:25 10.06.2008
Mascara: Putting lipstick on JavaScript?

Mascara

Mascara is the latest in a "Write code in X and translate it to JavaScript" system to be launched.

Mascara calls out systems like GWT, Script#, and HotRuby and says...

Mascara has a different approach, because we actually like JavaScript. The core of JavaScript is well-designed, powerful and flexible, and in many ways a more modern design than C# and Java. ECMAScript 4 is not a replacement for JavaScript, rather it is a set of powerful extensions to the base language, while still fully backwards compatible with classic JavaScript.

This means you can keep using all your existing JS-code, or gradually upgrade your code step-by-step to ES4. ES4 is actually specifically designed to allow gradual upgrade from classic JavaScript to ES4.

You can keep using your favorite JavaScript libraries like jQuery, Prototype or YUI and the immense amount of JavaScript code available on the web, while still making your own code more robust and structured by utilizing the ESMAScript 4 type verification and constructs like classes and namespaces.

JavaScript have gotten a reputation for incompatibilities across browsers. This is somewhat unfair, since JavaScript the language is quite consistent across browsers. The incompatibilities are caused by differences in the DOM and CSS implementations, which indeed are frustratingly inconsistent across browser. But that problem is not solvable at the language level, but rather at the library level, where jQuery or the alternatives will hide the browser incompatibilities for you.

So, if you like JavaScript, but want more of it, ECMAScript may be for you.

The generator is written in Python, and John Resig has a good writeup of the features:

  • Type verification
  • Classes and inheritance, constructors, super initializers
  • Static members
  • Type inference from initialization
  • Parameterized types, Map and Vector
  • Union types
  • Structural types
  • Getters/setters
  • Namespaces
  • Nullable types

Time to write JavaScript in JavaScript? Will this type of system be a way to start writing in JavaScript that has it run in older VMs?


read more at Ajaxian
post comment

Leveraging Ext JS on the Server via Jaxer [13 Jun 2008|12:01am]
11:00 11.06.2008
Leveraging Ext JS on the Server via Jaxer

When Aptana released Jaxer, it really excited the community because you could now leverage your client-side skills on the server end of things. Rich Waters of Ext JS talks about how to leverage Ext JS on the server via Jaxer. The code created by Rich creates a Ext JaxerStore which allows you to run queries and directly put them into a Ext Store. This has the benefit of leveraging the same Ext language syntax you've become accustomed to for server-side processing by allowing Jaxer to wrap client and server-side communications up allowing either synchronous or asynchronous calls between the client and server.

I asked Rich why would developers do this versus doing a simple Ajax call to a template sitting on a server:

The template bit lets you generate the html before the page is served up so that no extra client side calls are necessary. I think the Ext template system is really slick and easier than even a lot of other existing server side templating systems. More or less it was also just an example to get people thinking about what could be done now that Ext can be run server-side.

The code snippet allows you to make the calls to Jaxer very easily:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. Ext.onReady(function() {
  3.    var store = new Ext.data.JaxerStore({
  4.        table : 'demo',
  5.        fields : [
  6.            {name : 'name'},
  7.            {name : 'phone'},
  8.            {name : 'email'}
  9.        ],
  10.        readerConfig : {
  11.            sortInfo : {
  12.                sort : 'name',
  13.                dir : 'asc'
  14.            }
  15.        }
  16.    });
  17.  
  18.    // create the Grid
  19.    var grid = new Ext.grid.GridPanel({
  20.        store : store,
  21.        columns : [
  22.            {header : "Name", sortable : true, dataIndex : 'name'},
  23.            {header : "Phone #", sortable : true, dataIndex : 'phone'},
  24.            {header : "Email", sortable : true, dataIndex : 'email'}
  25.        ],
  26.        viewConfig : {
  27.            forceFit : true
  28.        },
  29.        stripeRows : true,
  30.        height : 350,
  31.        width : 680,
  32.        title : 'Jaxer Demo Grid',
  33.        renderTo : Ext.getBody()
  34.    });
  35. });
  36.  

which would then populate a grid control and render it accordingly.

The source code to this new functionality can be downloaded here.


read more at Ajaxian
post comment

X-UA-Compatible: IE=EmulateIE7 [13 Jun 2008|12:01am]
12:22 11.06.2008
X-UA-Compatible: IE=EmulateIE7

The IE team has created a new value for the X-UA-Compatible header in IE 8 IE=EmulateIE7.

We already had IE=7, which causes the page to be displayed in "IE7 Standards mode." This forces both quirks and standards mode pages up that path, and people were asking for a solution that only pushes the non-quirks mode ones to change, thus the new option:

In response to the great IE8 Beta 1 feedback we’ve received so far, we are introducing the “IE=EmulateIE7” tag to address this problem. EmulateIE7 tells IE8 to display standards DOCTYPEs in IE7 Standards mode, and Quirks DOCTYPEs in Quirks mode. We believe this will be the preferred IE7 compatibility mode for most cases. Support for IE=EmulateIE7 is available now as part of the IE June Security Update for IE8 Beta 1. Installing this update will enable you to verify you’ve applied the EmulateIE7 tag to your site correctly.

Implementing the HTTP header is beneficial if a site owner wants most of their site to render as it did in IE7 or if there are no plans to update site content. Inclusion of this header honors any Quirks mode pages that belong to the site.

Using the meta-tag on a per-page basis is beneficial when the publisher wants to opt-in specific pages to render as they did in IE7.

The X-UA-Compatible tag and header override any existing DOCTYPE. Also, the mode specified by the page takes precedent over the HTTP header. For example, you could add the EmulateIE7 HTTP header to a site, and set specific pages to display in IE8 mode (by using the meta-tag with content=”IE8”).

Using the IE=EmulateIE7 compatibility tag is a simple way for users to continue their current experience when browsing your site until you can update with more standards-compliant content. Although adding this tag will prevent most display issues, you may also need to update your site to properly detect IE8. To learn more about IE8 document compatibility and browser detection, check out the IE Compatibility Center.


read more at Ajaxian
post comment

Ajaxian Featured Tutorial: A Double Dose of Dojo [13 Jun 2008|12:01am]
14:00 11.06.2008
Ajaxian Featured Tutorial: A Double Dose of Dojo

The team at Dojo have been really working hard to improve their documentation and put more information in the hands of Dojo developers. Between DojoCampus.org and the SitePen blog, they've really come a long way to providing solid education material for the Dojo community.

Normally, the Ajaxian Featured Tutorial consists of one really good educational piece but two really awesome tutorials were recently posted and I decided to give Ajaxian readers a two-fer:

Tutorial 1: Dojo Drag and Drop, Part 1: dojo.dnd

In the first part of this series, Revin Guillen takes you through the ins-and-outs of Dojo's drag and drop API named dojo.dnd.

What I really like about Revin's tutorial is his extensive code samples that reinforce the concepts. His demo code on building a drop handler, for example, is very extensive and concise allowing the reader to easily understand how to create the drop handler:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. // calculate simple totals in the wishlist and cart titles
  3. var setupCartTitle = function(){
  4.     var title = "Shopping Cart";
  5.     var cartLength = cart.getAllNodes().length;
  6.     if(cartLength){
  7.         var items = cartLength> 1 ? " items" : " item";
  8.         title += " (" + cartLength + items + ")";
  9.     }
  10.     cartPane.setTitle(title);
  11. };
  12. var setupWishlistTitle = function(){
  13.     var title = "Wishlist";
  14.     var wishlistLength = wishlist.getAllNodes().length;
  15.     if(wishlistLength){
  16.         var items = wishlistLength> 1 ? " items" : " item";
  17.         title += " (" + wishlistLength + items + ")";
  18.     }
  19.     wishlistPane.setTitle(title);
  20. };
  21. dojo.connect(cart, "onDndDrop", setupCartTitle);
  22. dojo.connect(wishlist, "onDndDrop", setupWishlistTitle);
  23.  

Tutorial 3: A Beginner’s Guide to Dojo Charting, Part 1 of 2

Next up Doug McMaster teaches you how to leverage Dojo's charting capability:

In this two part guide, we look at how easy it is to get Dojo Charting up and running, and then examine in greater detail the options available for different looks for your charts. Today in Part 1, we start with a basic example and then examine all the options available in defining your plot type. Part 2 will cover the options available in defining the axes and data sets for your charts.

Doug explains how to easily create charts by customizing the available 2D charts included in Dojo charting API. Code as simple as:

PLAIN TEXT
HTML:
  1.  
  4. <title>Basic Charting</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></a>
  6.  
  7. <script type="text/javascript" src="dojo/dojo.js" djConfig="isDebug: true"></a></script>
  8.  
  9. <script type="text/javascript"></a>
  10.  
  11. dojo.require("dojox.charting.Chart2D");
  12.  
  13. makeCharts = function(){
  14.  
  15.         var chart1 = new dojox.charting.Chart2D("simplechart");
  16.         chart1.addPlot("default", {type: "Lines"});
  17.         chart1.addAxis("x");
  18.         chart1.addAxis("y", {vertical: true});
  19.         chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
  20.         chart1.render();
  21.  
  22. };
  23.  
  24. dojo.addOnLoad(makeCharts);
  25.  
  26. </script>
  27. </head>
  29. <div id="simplechart" style="width: 250px; height: 150px;"></a></div>
  30. </body>
  31. </html>
  32.  

produces a nice chart like this:


read more at Ajaxian
post comment

Frizone: JavaScript dev, test, and deployment environment [13 Jun 2008|12:01am]
14:10 11.06.2008
Frizone: JavaScript dev, test, and deployment environment

John Leach has created a very cool new open source project called Frizione (Italian for Clutch).

Frizione is a "JavaScript development, testing and deployment environment. It comprises a library agnostic set of tools for any type of browser based JavaScript development, which coincidentally has Gears support."

You run Frizione as a Web server and it gives you a set of services:

Compressor Service

The compressor service takes a JavaScript file and removes comments and
unnecessary whitespace. This can be a destructive operation in that the original

JavaScript file can be overwritten, unless the -o option is specified – you have been
warned.

To invoke the service, send a POST request to /run_compressor, appending the
absolute JavaScript file path, with respect to the /Clutch root directory, as part of
the URL. Clutch will then compress the JavaScript file. Additional request parameters
can be set to modify the behaviour of the compressor, using the YUICompressor
command line options.

Fixture Service

The fixture service allows you to write text to hard disk. When sent a POST, the
service writes the POST data to the file specified in the URL, optionally modifying the
contents with parameter values specified in the POST request, using ERB.
To invoke the service, send a POST request to /run_fixture, appending the
absolute output text file path, with respect to the /Clutch root directory, as part of
the URL.

Join Service

The join (or concatenate) service uses ERB to join together a list of text files,
producing a single concatenated file. Each file can contain include commands
which contain relative URLs to other files to be included at the point of the include
command itself. This process can also be repeated within the included files (nesting).
To invoke the service, send a POST request to /run_join, specifying the absolute
text file path, with respect to the /Clutch root directory, as part of the URL. Clutch
will then create the joined (or concatenated) file. The to request parameter is
required to set the destination absolute URL of the resulting joined file.

JSLint Service

The original lint program analysed C source code for potential (and subtle)
malpractices likely to lead to run-time bugs. Modern C compilers now provide
sufficient syntactic and semantic checking that lint is now rarely required or used.

Fortunately for JavaScript programmers, Douglas Crockford has built a lint program
specifically for JavaScript, in JavaScript, called JSLint. Finding and removing
potentially poor code before unit testing is an essential process, at least for me.
Unfortunately, cutting and pasting code to the web page can itself be error prone.

Clutch alleviates this problem by creating static HTML pages that read in your
JavaScript code, which can then be analysed locally by JSLint. You only need create
the static HTML page once for each JavaScript file you wish to analyse.

To invoke the service, send a POST request to /run_jslint, specifying the absolute
JavaScript file path, with respect to the /Clutch root directory, as part of the URL.
Clutch will then produce a static HTML file under the /jslint folder, which
automatically loads the JavaScript file into the JSLint page. You may then wish to add
a link to this static HTML file in the /jslint/index.html page.

Test Service

The test service creates a run/view pair of static HTML files for a given JavaScript
file. The reasons for using two HTML files is explained in the 'Unit Testing' section
below.

It can also provide functionality similar to the join service. It can use ERB to join
together a list of JavaScript files, producing a single concatenated JavaScript file, but
only if the to parameter is specified.

To invoke the service, send a POST request to /run_test, specifying the absolute
JavaScript file path, with respect to the /Clutch root directory, as part of the URL.
Clutch will then create the two static HTML files.

The Unit Test Framework

The framework follows a similar pattern to the well known JUnit Java testing
framework.

Create your test methods in a plain JavaScript object, then wrap that object in a
clutch.unittest function call, as shown in the first example above. All functions
in your test object which begin with test will be executed by the unit test
framework, but the order of function execution is not guaranteed.

Before a testxxx function is executed, the unit test framework will execute a setUp
function in your object. After a testxxx function has been executed, the unit test
framework will execute a tearDown function in your object. Clutch provides a
default no-operation function for setUp and tearDown if none are defined in your
object.


read more at Ajaxian
post comment

ensure: on demand resources [13 Jun 2008|12:01am]
11:18 12.06.2008
ensure: on demand resources

Omar AL Zabir of Pageflakes.com has posted on ensure, his JavaScript library that provides a handy function ensure which allows you to load JavaScript, HTML, CSS on-demand and then execute your code.

Ensure ensures that relevant JavaScript and HTML snippets are already in the browser DOM before executing your code that uses them.

For example:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. ensure( { js: "Some.js" }, function() {
  3.     SomeJS(); // The function SomeJS is available in Some.js only
  4. });
  5.  

You can also specify multiple Javascripts, html or CSS files to ensure all of them are made available before executing the code:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. ensure( { js: ["blockUI.js","popup.js"], html: ["popup.html", "blockUI.html"], css: ["blockUI.css", "popup.css"] }, function() {
  3.     BlockUI.show();
  4.     PopupManager.show();
  5. });
  6.  

Omar says:

Websites with rich client side effects (animations, validations, menus, popups) and Ajax websites require large amount of Javascript, HTML and CSS to be delivered to the browser on the same web page. Thus the initial loading time of a rich web page increases significantly as it takes quite some time to download the necessary components. Moreover, delivering all possible components upfront makes the page heavy and browser gets sluggish responding to actions. You sometimes see pull-down menus getting stuck, popups appearing slowly, window scroll feels sluggish and so on.

The solution is not to deliver all possible HTML, Javascript and CSS on initial load instead deliver them when needed. For example, when user hovers the mouse on menu bar, download necessary Javascript and CSS for the pull-down menu effect as well as the menu html that appears inside the pull-down. Similarly, if you have client side validations, deliver client side validation library, relevant warning HTML snippets and CSS when user clicks the 'submit' button. If you have a Ajax site which shows pages on demand, you can load the Ajax library itself only when user does the action that results in an Ajax call. Thus by breaking a complex page full of HTML, CSS and Javascript into smaller parts, you can significantly lower down the size of the initial delivery and thus load the initial page really fast and give user a fast smooth browsing experience.

There is a detailed writeup on how it all works, and it dovetails with the recent performance proposals around when to download resources (sometimes you may not want to wait for on demand loading of course).


read more at Ajaxian
post comment

TLS Report: Best and Worst Security Charts [13 Jun 2008|12:01am]
12:04 12.06.2008
TLS Report: Best and Worst Security Charts

The TLS Report is a new site that Benjamin Black has put together to watch over the security of major sites on the internet.

There have been services that watch the top sites for various statistics, but not security. The best and worst list has some surprises, namely:

  • Best: UBS.com, good to see a bank up there; openid.ee, good to see an OpenID provider; worldofwarcraft.com, real-time and secure
  • Worst: wachovia.com, bad to see a bank down there; usmap.cnet.navy.mi, a .mil will scare anyone; cpscontractor.nih.gov, ditto for a .gov.

Of course, there are already lots of arguments over the minutia. A really nice service though!

TLS Bottom 20

TLS Top 20


read more at Ajaxian
post comment

Validanguage 0.9: More form validation [13 Jun 2008|12:01am]
12:25 12.06.2008
Validanguage 0.9: More form validation

Form validation may seem a little boring, but it is still one of the low hanging fruits for Ajax.

Validanguage is a simple new validation framework that you can access and configure through HTML (via comments rather than attributes) and a JSON API.

For example, if you place the following next to an input, it will flash red if you try to type in anything other than a number, a dollar, or a period (good for a price).

PLAIN TEXT
HTML:
  1.  
  2. <!-- <validanguage target="example" mode="allow" expression="numeric$." /> -->
  3.  

Or you can configure it via JSON:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. validanguage.el.example = {
  3.   characters: