JasonWyatt

How to kick off a TestSwarm job from jQuery…

Towards the end of last week I set up an instance of John Resig’s TestSwarm server here at TransLoc. In case you’re not familiar with it, here’s an excerpt of the description from the TestSwarm wiki at GitHub:

TestSwarm provides distributed continuous integration testing for JavaScript. It was initially created by John Resig as a tool to support the jQuery project and has since moved to become an official Mozilla Labs project.

I’ve got to admit, I’m blown away by the elegance with which TestSwarm solves such a complicated problem. Basically, you throw TestSwarm’s PHP contents onto a LAMP server, create some Cron Jobs or Post-Commit Hooks to watch your version control system, point browsers at your server, then sit back and watch the results come in.

Unfortunately, in the current version of TestSwarm there is no simple way to kick off test jobs without a cron job/hook. Apparently, there used to be a web-based form that would work, but it seems to be missing.

Below, you’ll find a really quick $.ajax() invocation that will initiate a test job on a TestSwarm server. Just make sure that the “urls” parameter contains urls with valid QUnit/DOH/etc. test modules that can be accessed by the swarm’s browsers (i.e. not filesystem urls on your development machine).

$.ajax({
    data: {
        state: "addjob",
        output: "dump",
        user: "[Your User Name]",
        auth: "[Your Authentication Key]",
        max: 5,
        job_name: '[Whatever name you want]',
        browsers: 'all',
        'suites': [
            "Suite 1",
            "Suite 2",
            "Suite 3",
            "Suite 4"
        ],
        'urls': [
            "http://url/to/test/suite/1.html",
            "http://url/to/test/suite/2.html",
            "http://url/to/test/suite/3.html",
            "http://url/to/test/suite/4.html"
        ]
    },
    url: 'http://[your testswarm location]',
    traditional: true,
    success: function(data){
        console.log(data);
    }
});

The nice thing about this little script is that it can be run from within Firebug or the Webkit developer tools in a browser that’s already pointed at your TestSwarm server (because it includes jQuery for you).

jQuery Anti-Patterns for Performance & Compression

Use jQuery to Make Your DOM Editable!

I was playing around with jQuery a bit last night on my flight from Raleigh to Tampa and put together a pretty cool little piece of code that will let you click any paragraph on the page and edit it in place. I’d say it needs some more work before it could be a plugin (for example, adding functionality to support updates to the server), but it’s not too bad:

<script type="text/javascript" src="./jquery-1.3.2.js" charset="UTF-8"></script>
<script type="text/javascript">
    // <!--
    $(document).ready(function(){
        $("p").live("click", function(){
            var node = $(this);
            var html = node.html();
            
            var editNode = $('<textarea/>');
            editNode.text(html);
            editNode.css('display', node.css('display'));
            editNode.width(node.width());
            editNode.height(node.height());
            editNode.blur(function(){
                node.html($(this).attr("value"));
                $(this).before(node);
                $(this).remove();
            });
            
            node.before(editNode);
            editNode.focus();
            node.remove();
        });
    });
    // -->
</script>

You can see it in action on the demo page.

Introducing jQSlickWrap - The Pixel-Perfect Prose Plugin for jQuery

I’ve been working on a new project over the past four nights after mulling the idea around in my head for a while.

Have you ever needed or wanted to wrap text around an image in HTML but were disappointed that your text was forced to wrap to the rectangular shape of the image’s bounding box - as opposed to the actual contents of the image?

Have you heard of the method of Sliced and Diced Sandbags, but were reluctant to use a server-side script to accomplish something that really belongs on the browser?

Yes? Awesome! No? That’s ok too… I’d like to introduce my new project: jQSlickWrap. It’s a plugin to the jQuery framework, which allows you to easily wrap text around irregularly-shaped images on the browser.

Check it out at its home page, here. If you feel like contributing to the project, you can find it on Google Code

Sanitize Properties Files During jQuery Ajax

Today I needed to be able to retrieve and use a Java-styled properties file in an HTML file. After looking around, I couldn’t find any plugins that would handle properties files during jQuery’s AJAX process so I ended up resorting to writing my own function, which I then set to the dataFilter parameter on the $.ajax()’s argument object.

Here’s an example call to $.ajax() which will sanitize the response to a JavaScript object from plain text formatted as a Java Properties file:

$.ajax({
    url: "http://url.to/my_file.properties",
    /*
     * other parameters...
     */
    dataType: "text",
    dataFilter: function(data, request){
        var propsRegex = /^([\w]+)[ \t]*(=|:)[ \t]*((([^\n\\]*\\[\s]*\n)+|([^\n]*$))*)/gm;
        var sanitized = {};
        var match = propsRegex.exec(data);
        while (match != null){
            sanitized[match[1]] = match[3].replace(/[^\\]\\|\n/g, " ").trim();
            match = propsRegex.exec(data);
        }
        return sanitized;
    },
    success: function(data){
        // do stuff with our sanitized data object
    }
});

This code will work for files that look similar to this properties file:

key1 = value 1
key2 : value 2 with some other text
key3 = value 3 for an example\
  that uses multiple lines

I’m pretty sure this works under most situations, but please leave a comment if you find a bug and I’ll be glad to fix it.

Footnotes.js - Automatic Footnote Creator

This is another project I worked on a few months ago. It’s a script that will automatically scan your document for footnote anchors and generate links to the footnotes you specify in an ordered list anywhere on the page. It requires jQuery to operate.

Tutorial

1. Download the zip and extract it into a folder within your site somewhere. For the sake of this tutorial we’ll say you unzipped it into the directory /httpdocs/footnotes, where /httpdocs is the root of your web site and is where the HTML file we’re going to use footnotes with resides.

2. In your HTML document’s <head> section add the following lines:

   <link ref="stylesheet" href="./footnotes/footnotes.css" type="text/css" charset="UTF-8" />
   <script type="text/javascript" src="./footnotes/footnotes.js" charset="UTF-8"></script>

3. There are two main areas to think about when you want to reference a footnote:

   • the text that is referring to the footnote,
   • and the footnote itself.

   With footnotes.js, you refer to a footnote by using an anchor tag and you store your footnotes in a list.

   Depending on the settings you specify within footnotes.js, what you need to do can vary, but we’ll assume you stuck with the default values.

   Assume you have the following paragraph in your HTML (from Jules Verne’s Around the World in Eighty Days):

   <p>
     Mr. Phileas Fogg lived, in 1872, at No.7, Saville Row, Burlington Gardens, the house in which Sheridan died in 1814. He was one of the most noticeable members of the Reform Club, though he seemed always to avoid attracting attention; an enigmatical personage, about whom little was known, except that he was a polished man of the world.  People said that he resembled Byron - at least that his head was Byronic; but he was a bearded, tranquil Byron, who might live on a thousand years without growing old.
   </p>

   And assume we want to add a link to a footnote after the first sentence that says this:

   At least we think it was the house where Sheridan died, but we're not 100% sure.

   As well as another footnote referenced after each mention of Byron that has a link to the Wikipedia article about Byron:

   See the article at <a href="http://en.wikipedia.org/wiki/George_Gordon_Byron,_6th_Baron_Byron">Wikipedia</a> to learn who George Gordon Byron was.

   We would introduce three anchor tags into the paragraph which would look like so:

   <p>
     Mr. Phileas Fogg lived, in 1872, at No.7, Saville Row, Burlington Gardens, the house in which Sheridan died in 1814.<a class="footnote"></a> He was one of the most noticeable members of the Reform Club, though he seemed always to avoid attracting attention; an enigmatical personage, about whom little was known, except that he was a polished man of the world.  People said that he resembled Byron<a class="footnote"></a> - at least that his head was Byronic; but he was a bearded, tranquil Byron<a class="footnote" name="2"></a>, who might live on a thousand years without growing old.
   </p>

   If you notice, you’ll see two different kinds of anchor tags we added there:

   • One with only a class attribute “footnote” - These will get auto-numbered by the script in the order in which they appear. This is useful if you know your references will be in the same order as the footnote list you’re using.
   • One with two attributes: class and name - The class attribute is still set to “footnote”, but the name attribute is identifying the “target” footnote to reference (I would’ve loved to make the attribute be the “target” HTML attribute, but in XHTML Strict there is no such thing).

   Of course we also need to add a list containing the content of our actual footnotes (you can put it anywhere):

   <ol id="footnotes">
     <li class="footnote">
       At least we think it was the house where Sheridan died, but we're not 100% 
       sure.
     </li>
   
     <li class="footnote">
       See the article at 
       <a href="http://en.wikipedia.org/wiki/George_Gordon_Byron,_6th_Baron_Byron">Wikipedia</a>
       to learn who George Gordon Byron was.
     </li>
   <ol>

4. There we go, you’re done!

toc.js - Table of Contents Injector

toc.js will scour your page for heading tags and build a table of contents for you. All you have to do is create an empty ordered list and give it a specific ID that the script will look for. toc.js will then automatically construct the table of contents and set up anchor-links for your users to use to quickly navigate to specific sections of your page.

Download it!

You can download toc.js from here. (Contains toc.css and a readme file in addition to the JavaScript)

I should probably turn this into a proper jQuery plugin eventually, but I wanted to get it out there.