Category Archives: Web Architecture

Testing your web application in just 3 steps

It is generally known as a best practice to have automated tests for your web application, which not always is an easy nor cost-affordable task. I have recently used BugBuster, a SaaS testing platform that makes the task easy by providing a solution that does exploratory testing in a smart way.

BugBuster‘s heuristic will crawl around your web application reporting JavaScript errors, missing resources and HTTP error messages; besides, unlike regular crawlers, it will try random combinations whenever it finds an action point: clickable buttons or links, text fields to fill, areas to scroll, and so forth. It is even able to test signup and confirmation emails, and integrates with common CI systems and bug tracking applications.

Some of the most interesting features of BugBuster are:

  • Smart exploration: it discovers actions and walks through the application trying combinations that may lead to corner cases that weren’t covered by regular test cases.
  • Time-insensitive: BugBuster waits for stable states between actions, so that dealing with AJAX features is as easy as chaining events. Say goodbye to random waits in your test code.
  • Signup forms and validation emails: BugBuster can receive automated emails and check whether your signup or other email-based forms succeed or fail.
  • Nearly-zero setup effort: it is a SaaS platform, they put the infrastructure at your service; you only have to write the test cases.
  • And many others.

In this post I will show how easy it is to test a web application with BugBuster- whether in production, staging or development environments, it can also access your local and private environments thanks to a SSH tunnel. If you want to try it yourself, you can start by creating an account here if you haven’t already, and log in to the BugBuster application at app.bugbuster.com. To illustrate the example, I will test my own blog website.

Continue reading Testing your web application in just 3 steps

About JavaScript workers and webwork.js

Following the recent publication of the webwork.js library by @kolodny, I felt curious about the relative performance of web workers compared to regular sequential JavaScript. With this code snippet you can try by yourself – just inject the JS library in your web app:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var now = 0;
var testLength = 1000000;
var batches = 10;
var fooArray = [];
var i = 0;
var j = 0;
 
var worker = webwork(function(data){
var fooArray = [];
var testLength = data[0];
var batches = data[1];
 
for (j=0; j<testLength/batches; j++){
fooArray.push(j);
}
 
return fooArray;
});
 
// First test, good-old sequential JavaScript
now = new Date().getTime();
for (i=0; i<testLength; i++){
fooArray[i] = i;
}
console.log('It took %@ milliseconds to run without web workers'.fmt((new Date().getTime()) - now))
 
// second test, paralelized with web workers
now = new Date().getTime();
fooArray = [];
for (i = 0; i < batches; i++) {
worker([testLength, batches], function (err, result) {
if (err) return console.log("goodWorker Errored with " + err.message);
fooArray = fooArray.concat(result);
 
if (fooArray.length == testLength) {
console.log('It took %@ milliseconds to run with web workers'.fmt((new Date().getTime()) - now));
}
});
}

The results, splitting a batch of one million array inserts into ten parallel workers, is quite amazing:

It took 1039 milliseconds to run without web workers
It took 391 milliseconds to run with web workers

So in this simple example, using web workers increased processing speed around three times. Yet another reason to consider them in heavyweight client-side processing tasks!

Comodoro, a Task & Project Manager for Micro-Companies

I am proudly announcing Comodoro Alpha 0.1.0, a task and project manager meant to simplify work management in micro-companies (start-up’s, freelancers, individuals…).

Comodoro lets you take full control of your work in progress, by providing a detailed insight of your ongoing tasks and increasing your awareness of the status and health of your projects. All from a single interface, at a glance.

It is a mash-up of several Agile methodologies and strongly inspired on the Visual Management principles. It brings Project Management to multi-micro-project environments where many things happen in parallel and resources are limited.

Check it out, it is open and free to use: www.comodoroapp.com!

Publish to Facebook page or application’s wall with PHP

Just after implementing the Twitter Oauth API to publish tweets from a PHP application, I thought that doing the same with Facebook would be a piece of cake. Well, not quite, although I’ve finally managed to have the messages published to a page wall, or even to an application’s page wall from an automated script. In this article I explain some of the problems I encountered and how to solved them. I hope this example may be of help if you are having trouble with this.

Continue reading Publish to Facebook page or application’s wall with PHP

Internet Explorer limits nested @import CSS statements

I have been lately working on a collection of home-made widgets based on Dojo. This architecture has been designed to reuse elements and so there are widgets inside widgets, the code is arranged and structured, CSS is imported in a waterfall model, and everything should be fine and working properly.

Until Internet Explorer.

Let’s not talk about its mystic JavaScript errors, DOM random model interpretations and box model hacks. I had heard about the 32 @import CSS statements limit before (here, here and here), but what we were experiencing was different: beyond a given number of nested CSS imports, it seemed like stylesheets stopped being loaded. This was a big WTF the first time we spotted the problem, and blindly fixed it by adding twice the deeper @import sentences into the higher level CSS files. After all, it worked then.

But after a bad night of guilty conscience that issue came back to me, and I decided to do some tests on the issue so that some light be thrown on this dark matter. This was the plan: a simple HTML file with a number of divs (with a border and height definitions to make them visible by default), and a set of CSS files that where imported in waterfall mode, each one of them assigning the background color of one div according to its nesting level. The rupture point would be spotted where div’s started to look blank. Something like this:

Continue reading Internet Explorer limits nested @import CSS statements