JasonWyatt

This blog is full of stuff, and things.

Find my resume.

permalink

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).

permalink The legendary web designer, Mike Kus of Carsonified has been working on changes to the web site for the Future of Web Design conference they hold every year.  A few minutes ago, he tweeted about a really cool little 404 Error page that uses CSS Animations in webkit to create a rotating Earth.

Naturally, I had to dig through the source code to find out what made it spin, here’s what I found:
/********** 404 Page **********/
#earth {
	width:100%;
	height:1500px;
	background:url(../images/presentation/planet_1500.jpg) top center no-repeat;
	position:absolute;
	margin:-1100px 0px 0px 0px;
	-webkit-animation-name: earthRotation;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 500s;
	z-index:-1;
}

@-webkit-keyframes earthRotation {
from {
	-webkit-transform: rotate(0deg);
	}
to {
	-webkit-transform: rotate(360deg);
	}
}

This is an awesome use of CSS animation. 

Why? because it is completely progressively-enhanced. If the viewer is not using a webkit browser (Chrome, Safari, etc.), they’ll still see the earth in the background but it won’t be spinning - and they won’t know the difference.  Check it out, here.

Nicely done, Mike.

The legendary web designer, Mike Kus of Carsonified has been working on changes to the web site for the Future of Web Design conference they hold every year. A few minutes ago, he tweeted about a really cool little 404 Error page that uses CSS Animations in webkit to create a rotating Earth.

Naturally, I had to dig through the source code to find out what made it spin, here’s what I found:

/********** 404 Page **********/
#earth {
	width:100%;
	height:1500px;
	background:url(../images/presentation/planet_1500.jpg) top center no-repeat;
	position:absolute;
	margin:-1100px 0px 0px 0px;
	-webkit-animation-name: earthRotation;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 500s;
	z-index:-1;
}

@-webkit-keyframes earthRotation {
from {
	-webkit-transform: rotate(0deg);
	}
to {
	-webkit-transform: rotate(360deg);
	}
}

This is an awesome use of CSS animation.

Why? because it is completely progressively-enhanced. If the viewer is not using a webkit browser (Chrome, Safari, etc.), they’ll still see the earth in the background but it won’t be spinning - and they won’t know the difference. Check it out, here.

Nicely done, Mike.

permalink

Ajaxian recently posted that they found out WebGL is available in the firefox nightly build. Man, I can’t wait to play around with this when it actually gets released.