Regular Expressions

Regular expressions are a very important part of our development tool kit at Paxmodept. I have been a big fan ever since my Perl days and we use them to validate HTML form input, match user agent patterns in our provisioning platform and retrieve data from text files. On the weekend I was getting to grips with regex in Python and thought I would do a quick comparison of the regex classes in Ruby, Java and Python. In all I would say the implementations are fairly similar. If you don’t use regular expressions you should. Jeff Atwood recently had a good blog post on the subject.

(Via Jason Delport’s Mobile Observations.)

Great LWUIT Article by Jim White On DevX

Jim White wrote an excellent LWUIT article for DevX and provided excellent/easy to follow examples.

(Via Shai’s Java & LWUIT Blog.)

Production JavaScript Debugging

You know the scenario. A bug is filed for a JavaScript issue
in production. You update your development server to the same files (allegedly)
that are in production but you can’t reproduce the issue. Debugging your
JavaScript code is horrifically difficult, if not impossible, because you’re
following best practices and crunching the file using the YUI Compressor.

You start by typing the URL of the JavaScript into a browser to confirm that the file is there. It is, and in fact, is being loaded into the browser without issue. So something must have gone wrong during the deployment process, but you need to know what part of the code is failing. Firebug, your trusty companion for JavaScript debugging, is essentially useless as it has a hard time deciphering all of your code from a single line.

When I end up in this situation, I turn to a little-known but incredibly powerful tool from Microsoft called Fiddler. Fiddler is an HTTP debugging proxy that filters all the requests coming to your machine via HTTP. It interfaces directly with WinINET, the Microsoft Internet communications stack, so it automatically picks up any requests and responses by programs using this library. By simply starting Fiddler, it will automatically pick up HTTP traffic for Internet Explorer, Safari, and Opera. Firefox doesn’t use WinINET, so you need to manually set it up to go through Fiddler. You can do so by going to the Tools menu and clicking on Options. Go to the Network tab and click the Settings button. Select Manual Proxy Configuration and enter localhost as your server and 8888 as your port. Click OK to apply the settings.

Once that’s done, you’re ready to start debugging that production JavaScript. The key to debugging is really to create a readable version of the JavaScript so that Firebug (or any other JavaScript debugger) can be used to step through the code and set breakpoints as normal. To do so, download the file in production to your local machine. Use a pretty printing tool, such as Einars "elfz" Lielmanis’ online beautifier to create a more readable version of your code and save it to a local file. It’s important to follow this process instead of using your development version of the JavaScript to ensure that you’re using the exact same code that is on production; you can more easily rule out deployment issues this way.

Next, click on Fiddler’s AutoResponder tab. The settings on this tab allow you to intercept requests and respond as if you were the server. It’s possible to respond with a status code or with actual content. To enable this feature, check the Enable automatic responses checkbox. The Permit passthrough for unmatched requests checkbox should be checked by default, which is necessary to avoid interfering with other requests. Click the Add button to create a new entry. The textbox on the left should contain either the complete URI for the JavaScript file you want to intercept, or you can create a regular expression by preceding your text with "regex". The second textbox is for the response that should be sent. Click the dropdown arrow and select Find a file. Select the pretty-printed JavaScript file from your computer and click the Save button. This places your filter in Fiddler’s memory so the next time a file matching the given URI or description is requested, it will respond by sending back the file on your computer.

After that, you can navigate back to the production server on which the problem exists knowing that your file will be inserted in place of the actual production file. The browser itself is none the wiser that the file has been swapped out, so you’re safely able to debug readable code without making any changes to the code on the server. This technique has helped me debug some of the more complex issues I’ve dealt with at Yahoo!, and I hope that it can help you as well.

(Via Yahoo! User Interface Blog.)

20080602-outaTiME, clubbers-vol.2

Today a new release of clubbers compilation comes, to play the record click here.

Track list:

1. Dirty South – The End (Tocadisco Loves Tech Remix)
2. Axwell and Bob Sinclar ft Ron Carroll – What a Wonderfull World (Original Mix)
3. Syke & Sugarstarr ft Cece Rogers – No Love Lost (Gold Ryan & Tapesh Remix)
4. Alanis Morissette – Underneath (Dave Armstrong & Redroche Mix)
5. Rihanna – Take a Bow (Seamus Haji & Paul Emanuel Club Mix)
6. Cyndi Lauper – Same Ol’ Story (Morel’s Extended Mix)
7. Alphabeat – Fascination (Bimbo Jones Full Vocal Mix)
8. Crystal Waters vs Speakerbox – Dancefloor (Soulshaker Club Mix)
9. Moony – I Don’t Know (Viale and Dj Ross Remix)
10. Julie Dennis – Fever (Sultan & Ned Shepard Vocal Mix)
11. Robyn – Handle Me (Williams Vocal Remix)

jQuery UI 1.5.1

Soon after the release of jQuery UI 1.5, we were getting many useful feedback and issues entered in our bugtracker. Today, we’re happy to release another version of jQuery UI which takes care of many minor regressions and a lot of unsolved issues.

1.5.1 doesn’t add any new features or API changes, but fixes more than 50 found issues. A full changelog is available, if you want to know the specifics. Updating to this version is highly recommended and likely not to break anything in your written code.

Additionally, issues within ThemeRoller and the demos on our homepage also have been reported and fixed. We are now continuing to finish all unit tests and functional demos, so expect to see another release of both UI and its website soon again.

You can grab the latest release as always via the downloader or as developer package at http://ui.jquery.com/download or if you prefer, get it as latest tag from Subversion.

See you soon,

Paul Bakaus & the jQuery UI Team

(Via jQuery Blog.)

Eclipse 3.4 Hidden Treasures

Eclipse 3.4 “Ganymede” will be released in the upcoming days. I’ve been working with the RC builds for some time now and I like it. Eclipse 3.4 is a better IDE and a more robust platform than its’ successor. In this post, I’ve gathered some new features which I like and may be “off the beaten path”.

(Via Eclipse In The News.)

Image Transformations in Canvas with Slicing

We’ve been obsessed with the canvas tag for a while now; we think it represents a huge opportunity for creative interfaces on the web, and current browser support for the tag is excellent (as long as you don’t mind using excanvas.js for IE6/7). That being said, there are some limitations. The only available built-in transformations are translation, rotationg and scale. Performing a complex transformation, such as keystoning an image so that it can be used in a faux 3D environment, has been difficult.

However, there is an easy way to simulate arbitrary transformations on images in canvas. If you cut the image into slices, you can redraw each slice with different dimensions. The code is simple: using the slicing variation of the drawImage method, it’s possible to take a slice of a source image and draw it to the canvas. This slice can be scaled horizontally and vertically according to a formula. As the number of slices increases, the edges of the image become smoother and less jagged. It’s important to note that you only need one copy of the source image, and that drawing many slices doesn’t mean there are many copies of the image in the page. You are able to use one source image to draw multiple images on a destination canvas.

Creating a keystone effect looks complex but is actually very straightforward:

function keystoneAndDisplayImage(ctx, img, x, y, pixelWidth,
								 scalingFactor) {
	var h = img.height,
	     w = img.width,

	    // The number of slices to draw.
	    numSlices = Math.abs(pixelWidth),

	    // The width of each source slice.
	    sliceWidth = w / numSlices,

	    // Whether to draw the slices in reverse order or not.
	    polarity = (pixelWidth > 0) ? 1 : -1,

	    // How much should we scale the width of the slice
	    // before drawing?
	    widthScale = Math.abs(pixelWidth) / w,

	    // How much should we scale the height of the slice
	    // before drawing?
	    heightScale = (1 - scalingFactor) / numSlices;

	    for(var n = 0; n < numSlices; n++) {

		// Source: where to take the slice from.
		var sx = sliceWidth * n,
		    sy = 0,
		    sWidth = sliceWidth,
		    sHeight = h;

		// Destination: where to draw the slice to
		// (the transformation happens here).
		var dx = x + (sliceWidth * n * widthScale * polarity),
		    dy = y + ((h * heightScale * n) / 2),
		    dWidth = sliceWidth * widthScale,
		    dHeight = h * (1 - (heightScale * n));

		ctx.drawImage(img, sx, sy, sWidth, sHeight,
        			  dx, dy, dWidth, dHeight);
	}
}

We take slices from the source image one at a time, apply a horizontal and vertical transformation, and then draw it in the correct order. This also allows us to do something interesting; if the slices are drawn in reverse order, we can reverse the image. The keystone demo page shows this code in action. The two sliders control the values entered into the function as pixelWidth and scalingFactor. Keystoning has a lot of potential applications. For instance, If you animate both width and scaling, you can create a page turning effect for any image.

You can apply any transformation to the slices. If you were to scale the height of the slices based on a parabolic curve, you could create a cylindrical distortion that mimics a panorama view. We set up a Quicktime VR-style panorama using this technique. Be sure to view it with the rest of the canvas both shown and hidden to see how it works. It would also be possible to add an animating flag-ripple effect to any image, just by varying dy. We believe that image slicing transformations have a lot of applications in mimicing 3D environments and creating image effects. All you have to do is apply a formula to change the slice dimensions or position.

(Via Yahoo! User Interface Blog.)

CPU-optimized Firefox 3 builds available

Back in the days of Firefox 2 (a.k.a. last week), my browser of choice was a special version of Firefox that was optimized for my Intel processor. Made by Neil Bruce Lee of the BeatnikPad blog, these builds not only ran speedier than the official build of Firefox, but also had aqua widgets, making the application fit in a little better with the rest of my Cocoa apps.

But with the arrival of Firefox 3, I tossed aside my CPU-optimized build, happy with the major speed increases and Cocoa-ness of latest incarnation of Mozilla’s new browser. Yet not too long after Firefox 3’s famed “Download Day,” Lee released his Firefox 3-optimized builds.

Like the older builds, the optimized Firefox 3 versions come in different versions for different processor architectures. For now, only Intel and G5 builds are available, but G4 will hopefully come soon. Unlike older optimized builds, however, the ones for Firefox 3 no longer come with an option for aqua widgets, as this is natively built into the browser (but, if you desire an even more Mac-like Firefox appearance, Lee does provide a link to the Safari-like GrApple themes for Firefox). Also, the builds look a little different than the official version of Firefox 3. Uses of the name “Firefox” in the application, such as in the menubar, are changed to Minefield, Firefox 3’s codename, and the application icon uses one created by Adam Betts, all to avoid copyright infringement.

In any case, I’ve tried out the optimized build of Firefox 3, and in my very limited testing, I can’t say that it feels any faster than the standard version of Firefox, at least in very mild use. Still, any bit of speed helps, and these builds can provide that little boost that will make your web browsing experience just a little more pleasurable.

(Via MacUser.)

Jiffy Firebug Plugin: Fine grained calculation of performance timings

Today is the kick off of the Velocity performance conference, and we are going to see a fair share of performance news over the next day or two.

To start out, Bill Scott (Rico/ex-Yahoo/now Netflix) has announced a new Firebug plugin, Jiffy that adds a new tab showing fine grained performance data. You want to know the time between the onunload of the previous page, the first rendering, time until onload, time after, and more.

This is where Jiffy-Web comes in. Jiffy-Web is a fine-grained and flexible website performance tracking and analysis suite written by Scott Ruthfield and the team at Whitepages.com.

The Firebug plugin uses that data, which it gets from the DOM JSON object, to do the visualization.

Bill wrote a detailed post on Measuring User Experience Performance that goes into the details behind this tool.

He goes into detail on how to measure things, and what can get in the way. For example, onunload:

The most logical place to measure the start of a request (”from Click”) is on the originating page (see A in figure above). The straighforward approach is to add a timing capture to the unload event (or onbeforeunload). More than one technique exist for persisting this measurement, but the most common way is to write the timing information (like URL, user agent, start time, etc.) to a cookie.

However, there is a downside to this methodology. If the user navigates to your home page from elsewhere (e.g., from a google search), then there will be no “start time” captured since the unload event never happened on your site. So we need a more consistent “start time”.

We address this by providing an alternate start time. We instrument a time capture at the very earliest point in the servlet that handles the request at the beginning of the response (see B in figure above). This guarantees that we will always have a start time. While it does miss the time it takes to handle the request, it ends up capturing the important part of the round trip time — from response generation outward.

There are a number of ways to save this information so that it can be passed along through the response cycle to finally be logged. You can write out a server-side cookie. You can generate JSON objects that get embedded in the page. You could even pass along parameters in the URL (though this would not be desirable for a number of reasons). The point is you will need a way to persist the data until it gets out to the generated page for logging.

Note that the absolute time captured here is in server clock time and not client clock time. There is no guarantee these values will be in sync. We will discuss how we handle this later.

He also talks about practical issues that he has found implementing this at Netflix, and when the data shows you the real truth:

Recently we fielded a different variation of our star ratings widget. While it cut the number of HTTP requests in half for large Queue pages (a good thing) it actually degraded performance. Having real time performance data let us narrow down on the culprit. This feedback loops is an excellent learning tool for performance. With our significant customer base, large number of daily page hits we can get a really reliable read on the performance our users are experiencing. As a side note, the median is the best way to summarize our measurements as it nicely takes care of the outliers (think of the widely varying bandwidths, different browser performance profiles that can all affect measurements.)

(Via Ajaxian.)

Photo Collages with Canvas

Ernest Delgado is having fun experimenting with canvas. He has posted on one of his tests which involved creating a photo-table-like system.

You can visit the demo that allows you to work with some photos and export them out. You can play with adding borders, show corners for rotation, all on the fly.

It is a rich example, and Ernest explained how he did it:

Implementing this in canvas presents two main challenges: drag & drop and performance. I tried several approaches to solving these problems, and ended up using a multilayer solution which renders only the active image on the top-most canvas layer. This allows us to have drag & drop without needing to redraw every image each time one of them is dragged.

You can check out the source code for yourself.

Ernest has some other fun things that he is playing with, which I hope to feature soon.

(Via Ajaxian.)