Tag: Web Development

Javascript Operation Queue

by on May.28, 2010, under Dev, Palm, Web Dev, webOS

When developing for a platform that relies on asynchronous APIs, such as webOS, the application logic frequently will need to block on a given operation prior to executing other dependent components. This may include anything from loading user data after authentication to saving data after initialization of a given data structure among others.

One method of handling this problem is to make the blocker component explicitly aware of the dependent components and the unique interface to each component, which works for simple cases or situations where the dependent to blocking relationship is one-to-one, but this quickly becomes complicated as a number of dependent components grows. In the extreme cases the blocker may have to be aware of significant portions of the system, leading to maintenance concerns.

Alternatively the blocker call can allow dependent components to register their interest in the completion of the operation and upon completion the blocker can simply notify the components on this list in a generic fashion. This allows that components to remain loosely coupled and has the added benefit of allowing for run-time conditional relationships without requiring that the blocker be aware of the state of the dependent.

Implementing such a notification system is fairly straightforward in Javascript: Simply collect waiting callbacks in an array or other structure then executing each upon completion of the blocking call.

Library

While simple to implement, my experience onFacebook for webOS has shown that a library to implement this behavior is worth the initial effort as manually writing nearly identical for loops over callbacks for the umpteenth time becomes tedious and error-prone.

To this end, we developed and open sourced the OperationQueue class which provides a common implementation that doesn’t require far too many for loops :)

Usage

To use the OperationQueue class you simply need to enqueue your dependent operations using the queue API.

queue can accept a single function which will be called upon successful completion.

    opQueue.queue(function(result) {
        // Do something with the data that we were waiting for!
        console.log("Blocking Operation Completed!");
    });
It also accepts an object with any combination of onSuccess and onFailure fields who will be called for each respective event.
    opQueue.queue({
        onSuccess: function(result) {
            // Do something with the data that we were waiting for!
            console.log("Blocking Operation Completed!");
        },
        onFailure: function(result) {
            console.log("Blocking Operation Failed");
        }
    });

These calls may occur at anytime. If the blocking operation has already completed then calls to queue will result in immediate execution of the queued operation. In this case the result object will not be included.

For the blocking call itself the getSuccessHandler and getFailureHandler generators will return callback functions that may be used to directly on completion or may be passed as callback handlers to the async API. These methods also accept a function parameter which will be called prior to their completion.

Used directly:
(opQueue.getSuccessHandler())();
As a callback:
ServiceRequestWrapper.request('palm://com.palm.preferences/systemProperties', {
        method:"Get",
        parameters:{"key": "com.palm.properties.nduid" },
        onSuccess: opQueue.getSuccessHandler(function(response) {
                Mojo.Log.info("Device ID: %j", response);
            }),
        onFailure: opQueue.getFailureHandler()
    });

For more complicated use cases, the reset function allows for enabling and disabling queuing at any time. For example, if you need to initially allow all operations to proceed and then block only while a given operation is in progress, the getSuccessHandler API may be called immediately after instantiation of the queue and then reset called prior to execution of the blocking operation.

Source:

Operation queue is available in the webos-samples repository on github, within the tipsAndTricks subproject.

One final note: While this was written for a webOS application, it does not depend on any webOS-specific constructs and may be used in any Javascript environment. To see it in action, check out the demo in any browser!

Comments Off on Javascript Operation Queue :, , , , more...

border-image-generator

by on Apr.04, 2010, under border-image-generator

Update: border-image-generator is not hosted on border-image.com. The previous URLs are configured to redirect to this url.

Example of the border-image-generator visual editor. The CSS3 border-image property allows for some very cool and efficient design but after implementing them in both Mozilla for the Firebug search panel and WebKit for the Palm Facebook notifications badge, I’ve learned that they can be quite frustrating to properly tweak by hand.

Background

For those who have not been exposed to this property, it allows a single image to be used to style the borders and background of a particular element. In the example above, each section will map to a different border, corner, or the content background, allowing for a single element and image to provide styling the previously required significantly more of each.

Using these properties the following element can be rendered using simple semantic HTML and CSS.

Element rendered using border-image
<div class="stylishContent">Some stylish content</div>
.stylishContent {
    display: inline-block;
    border-width: 27px 27px 27px 27px;
    -moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 27 27 27; -webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 27 27 27;
    border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 27 27 27;
}

For more detail, John Resig has published an excellent writeup on the Mozilla implementation.

App

As noted above there is a bit of tweaking involved in getting these settings right. To ease some of this pain I’ve created the border-image-generator project, which allows for WYSIWYG editing of these properties. Rather than manually adjusting each parameter, border-image-generator allows the various parameters involved to be changed visually with instant preview of what these changes will look like in the current browser.

Seen in action demonstrating Resig’s examples here and here.

Features

  • WYSIWYG editing of border-image properties
  • Cross-browser border-image CSS generation
  • URL-based State (History + Preview in multiple browsers)

It can be accessed through any of the following URLs:

Any issues or suggestions for improvements can be sent to myself or logged in the github issue tracker.

Warning

As a preliminary warning this is currently a vendor experimental feature but it is currently set to be included in the CSS3 specification. There are some significant differences between the vendor implementations and the W3C candidate, so some caution should be used. Border-image-generator attempts to handle these cases as defined by the spec, but many things could change between the current implementations and the release of CSS3 implementations in the wild.

Related Links:

5 Comments :, more...

Firediff 1.0 Released

by on Mar.21, 2010, under Firediff

After more than a year of development I am absolutely ecstatic to announce the 1.0 release of Firediff. There were quite a few hiccups due to personal commitments in this development cycle, but I feel like this release is quite solid and brings quite a few must have features.

As noted in the previous alpha and beta announcements, this release adds many key features to the 0.2.1 release:

  • Revert Changes
  • Save Snapshot
  • Save Diff
  • Document Formatters
  • Search
  • Activation Data Handling Improvements
  • Style attribute change handling

At this point I have achieved the majority of my initial goals for Firediff and feel as though it fits most of the realistic needs that I originally envisioned when I set out on this project. From this point onward the community is even more vital in defining the future direction of Firediff as I am looking for additional features that can be implemented.

The following features and fixes are currently under consideration for future releases but we are looking for more to implement.

  • Filtering of the changes view
  • Stack trace
  • Free Edit Diffing
  • Entire tree diffs on insertion or removal
  • Improved handling of inline stylesheets
  • Iframe Support
  • Parity changes with Firebug enhancements

Any input from the community in terms of feature request or code contributions that will help improve the quality of the project. If you have a cool feature that you would like to see implemented in Firediff, please feel free to file bugs or enhancement requests with the fbug project or contact me directly.

Version 1.0 is available on here and has been seeded to AMO (Under review as of this writing).

15 Comments :, , more...

Firediff 1.0b1

by on Jan.18, 2010, under Firediff

The first feature complete beta for Firediff 1.0 has just landed here. This release allows for customization of the format saved by the save snapshot and diff features. Also included are some minor bug fixes and official support for Firefox 3.6 and Firebug 1.5.

This release has also been registered on Babelzilla (along with Firefocus) and any translators are welcome to provide their input.

Bugs may be filed with the fbug issue tracker.

Comments Off on Firediff 1.0b1 :, , more...

Firefocus

by on Nov.01, 2009, under Firefocus

As part of my day job I recently needed to debug focus handling within a AJAXy web app and found that logging and visualizing of this was quite difficult. To assist with this task I spent some of my personal time developing Firefocus, a Firebug extension for tracking keyboard focus at the HTML node level within Firefox.

Firefocus provides the ability to log all focus and blur events to the console as well displaying the element which currently has focus on the HTML panel, particularly helpful for tracking down the nuisance element that managed to inject themselves in the tab order but are not displaying the focus status properly.

This extension supports Firebug 1.4 and higher and is available here.

Comments Off on Firefocus :, , more...

Firediff Snapshot + Diff Generation

by on Oct.05, 2009, under Firediff, Firefox

Firediff recently hit a major milestone, with the implementation of major portions of the save snapshot and save diff features. These as well as the revert and search features are available in the most recent alpha.

As a somewhat preemptive warning, the save diff feature is not likely to generate a line for line match that can be applied directly to the source files. This is due a number of reasons, including performance optimizations in Firefox that cull information that is not vital to the final rendering of the page and the large number of coding styles that exist in the wild.

We are currently investigating the options that we have to improve this, although the current iteration should be treated as a  a serialized version of the page state that the designer or developer can use to manually update the source files, rather than something that can be automatically applied to the source using patch or another method.

Feel free to comment on this post or email me at kpdecker AT gmail.com with any input on these features or any of the other Firediff features.

3 Comments :, , more...

Firediff 0.2.1 Released

by on Jul.19, 2009, under Firediff

Due an a conflict between one of the libraries used by Firediff and just about everything else, I have pushed the Firediff release schedule forward some and rolled a 0.2.1 release.

This release includes fixes for the extension conflict, a new text diffing algorithm that will hopefully give better results as well as provide the basis of the unified diff feature that is planned for 0.1, and a few minor bug fixes to the Snapshot UI.

Thank you to all of those who notified me of this conflict.

Comments Off on Firediff 0.2.1 Released :, , , more...

Firediff 0.2 Released

by on Jun.29, 2009, under Firediff

CSS Snapshot

CSS Snapshot

After 3 months of development the latest release of Firediff is ready for distribution.

The release includes

  • Snapshots: Display the changes made to the DOM or CSS at any point in time
  • Support for the new Firebug Insert/Remove CSS rule functionality
  • Various bug fixes from the 0.1 release

The updated extension may be found here as well as through Firefox’s auto-update mechanism (for those currently running Firediff 0.1a2)

As always any issues may be reported on the Firebug issue tracker.

Comments Off on Firediff 0.2 Released :, , more...

Firediff 0.1a2 Released

by on Apr.22, 2009, under Firediff

The release of the initial version of Firediff brought quite a bit of input in terms of changes that can be made to the app. Due to this, I have decided to release another version from the 0.1 branch, 0.1a2. This is release is a bug fix release and does not include any of the extended functionality that is targeted for the 0.2 branch.

Changes: – Display an error message when Firediff is installed on top of Firebug 1.3 – Modified Firebug HTML editor handling to improve Firebug source tracking – Fixed CSS editor merge logic – Provide failover case for XPath generation on “unknown” node types – Extension update registration

This is again located here

Comments Off on Firediff 0.1a2 Released :, , more...

Firediff Release Location Moved

by on Apr.18, 2009, under Firediff

Many thanks to Ajaxian for the bump yesterday.

A few people have reported issues with downloading the extension due to MIME types. Rather than trying to force WordPress to handle non-media files, I have moved the release location here. Future releases will be available at this location as well.

A few other issues within the code have been identified that are targeted at the 0.1 codeline. These are currently being examined and a new 0.1 branch release will likely be created in the next few days.

Comments Off on Firediff Release Location Moved :, , more...

Visit our friends!

A few highly recommended friends...