:focus

Focusing on all things web, occasionally blurring out into what not. Currently employed at Forsman & Bodenfors Inhouse.

[andersmattson]

How to calibrate ESCs

Quick and dirty on how to calibrate your ESCs using Cleanflight:

Open Cleanflight

Connect your flight controller to your computer through USB

Disconnect your battery

REMOVE YOUR PROPS!!!

Go to the motor tab in Cleanflight and set the master slider all the way to the top (tick the checkbox to allow this first)

While the slider is up, connect the battery

The ESCs will beep to indicate that they are in calibration mode

Drag the master slider all the way down to the bottom

The ESCs will play a happy tune, indicating that they are calibrated

Done!

[andersmattson]

Javascript queue system with loop and delay functionality

I found this excellent post by Andrea Giammarchi about a tweet-sized queue system that lets you do asynchronous function calls:

function Queue(args, f) { setTimeout(args.next = function next() { return (f = args.shift()) ? !!f(args) || !0 : !1; }, 0); return args; }

Basically you call it with an array of functions (your queue) and every function gets called with the array itself as the only argument but with an extra method added to it to run the next function in the queue (example taken directly from Andreas post):

Queue([ function (queue) { // do amazing stuff asynchronously setTimeout(function () { queue.message = "Hello Queue"; queue.next(); }, 500); }, function (queue) { // do something else alert(queue.message); // Hello Queue queue.next(); // not necessary at the end // does not hurt thought } ]);

I often run into situations where I need to perfom a series of tasks over and over again (like a looping animation) so I created a version of my own, using this as the base:

function Queue(a) { (a.next = function(d) { setTimeout(function() { a[0](a); a.push(a.shift()) }, d || 0) })() }

This adds the ability to loop the queue (just run "queue.next()" in the last function in the queue) but also the ability to delay the next function call by giving a millisecond value as argument:

Queue([ function(q) { console.log('First'); q.next(500); }, function(q) { console.log('Second'); q.next(500); }, function(q) { console.log('Last'); q.next(500); } ]);

There are som trade-offs from Andreas version (apart adding 1 byte to the minimized version) but none that mattered to me, and although you can create the same effect with his function, this suited my way of coding more.

[andersmattson]

Really easy A/B testing done with unobtrusive javascript

A/B-testing (or Bucket testing) is a really easy way of testing what triggers visitor behavior. By randomly varying the content presented to visitors and measuring the outcome of the different variations you can optimize your site and get a better control over your visitor flow.

One simple example of when you can use an A/B test is when you want to test different versions of a text inside a link, like in a menu for instance. Say you have a link from your frontpage to your current offers and it's currently containing the text "The Market place" (because that's what you always have called it) but you're not sure that this is the right text for that link. You want try something else, like "Current offers". You could just change the text to "Current offers" and measure the difference in traffic from the frontpage to the "Current offers" page before and after the change, right? Well, this is actually not that statistically correct since there can be external differences in traffic and target audience that's really hard to account for. Perhaps it's some sort of holiday, or your target audience is hockey crazy and it's the playoffs (I don't know really, I don't play hockey). What you really want to do is to use both variations at the same time and this is exactly what A/B testing does.

By randomly presenting one link text to roughly (roughly because it's random) 50% of your visitors and the other text to the other 50%, and measuring which link produced the most clicks from your visitors you can easily see which link text attracted the most clicks.

So, exactly how do you do this with javascript?

It turns out that it's pretty easy, just a few things to think about. The first part is just to change the link text for roughly half of your visitors:

// Assuming that your link has the unique id "mylink" var link = document.getElementById("mylink"); // Create a random number {0,1} var rand = Math.round(Math.random()); if(rand) { link.innerHTML = "Current offers"; }

Second, we need to measure the results in some way and this is where statistics tools like Google Analytics comes in really handy. If we change the url of the link by adding a dummy parameter to it we can track the two different variations really easy. So, go get a Google Analytics account and add to your page if you haven't already (lots of guides out there, just Google for it;) and then add the following to your code:

link.setAttribute("href", link.getAttribute("href") + "?variation=" + index);

Doing a search in Google Analytics for "?variation=" yields the different variations (this is a really simplified version of changing the href attribute, you should take into account that it might already contain a question mark, etc).

Third, you really should do this in an unobtrusive manner. In this case it means that your visitors should not be bothered by a link changing its text every time they visit the frontpage of your site, it doesn't create a good user experience. To prevent this we store the created random number in a cookie and check for it every time the visitor comes back. So, change the random number creation above to this:

var rand, match; if(match = document.cookie.match(/\;*\s*variation\=([0-9]+)/)) { rand = parseInt(match[1]); } else { rand = Math.round(Math.random()); document.cookie = "variation=" + rand + ";" }

Some final words

This method should give you a statistically correct result, provided that you generate the random number the correct way and that you have a sufficient amount of visitors and thus, test cases. One thing that you should be aware of is that this method doesn't measure the number of failed tests, i.e. the variations presented but never clicked so if your visitor count isn't that high and your A/B test doesn't yield an overwhelmingly outcome one way or the other, you can't really rely on the data. I can't really give you an exact number but my guess is that you need a couple of thousand visitors before you can get anything out of it.

An extended version of this script is available on GitHub, go fork it!