ARCHIVES / MUSIC /  RSS

Blog

Quit applying styles on form elements for nothing.

If you want your site to look exactly the same on any OS it's OK to apply styles on it, but do it properly.

Since I use a dark theme on Ubuntu I've realized that many websites enforce text color on form elements.

I often see things like:

textarea, input, button {
    color: black;
}

Those 3 lines of code may look trivial, but they are rendering your entire website forms unusable with dark themes simply because the black text will be displayed over a dark, probably black, background.

If you have to enforce text color on form elements, you should always specify the background color.

It's generally a good idea to specify the background color for the html and body elements as well.

Thanks, A dark theme user.

Here's 10 tips that will makes you code more efficiently with jQuery.

1. Be lazy

// Don't
if ($('#item').get(0)) {
    $('#item').someFunction();
}

// Or
if ($('#item').length) {
    $('#item').someFunction();
}


// Just do
$('#item').someFunction();

jQuery will call the function only if there is a match, no need to double check.

2. Use shortcuts

// You can but..
$(document).ready(function(){
    // ...
});

// There is a shorter equivalent
$(function(){
   // ...
});

It should be well known, but obviously it is not.

3. Chain

// Don't
$('#frame').fadeIn();
$('#frame .title').show();
$('#frame a:visited').hide;

// Do
$('#frame').fadeIn()
    .find('.title').show().end()
    .find('a:visited').hide();

Unnecessary DOM traversal is a expensive operation, avoid it when possible.

4. Group queries

// Ugly
$('div.close').click(closeCallback);
$('button.close').click(closeCallback);
$('input.close').click(closeCallback);

// Not ugly
$('div.close, button.close, input.close')
    .click(closeCallback);

5. Select siblings like a pro

// Don't
$('#nav li').click(function(){
    $('#nav li').removeClass('active');
    $(this).addClass('active');
});

// Do
$('#nav li').click(function(){
    $(this).addClass('active')
        .siblings().removeClass('active');
});

6. Use each and map

// Try to avoid
var output = [];
for (var i=0;i < arr.length; i++) {
    output.push(arr[i]);
}

// Do
var output = $.map(arr, function() {
    ...
});

// Or
var output = [];
$.each(arr, function(index, value) {
    output.push(value);
});

Using jQuery's each and map is more reliable because they won't break if another library is extending the Array object.

7. Use namespaces

Events can be namespaced

$('input').bind('blur.validation', function(e){
    // ...
});

The data method also accept namespaces

$('input').data('validation.isValid', true);

8. triggerHandler is great

Instead of

var refreshFrame = function() {
    $('#frame').load('http://reddit.com');
};

$('.button').click(refreshFrame);

refreshFrame();

You can do

$('.button').click(function() {
    $('#frame').load('/page/frame.html');
}).triggerHandler('click');

// You can also use a shortcut
$('.button').click(function() {
    $('#frame').load('/page/frame.html');
}).click();

triggerHandler is also useful for creating custom events, which leads me to my next tip

9. Custom events

In some situation it can saves you lots of pain, it's also really handy to encapsulate plugins interactions. Let me illustrate.

$('.button').click(function() {
    $('div#frame').load('/page/frame.html', function(){
        $(this).triggerHandler('frameLoaded');
    });
});

// PluginA.js
$('#frame').bind('frameLoaded', function(){
    $(this).show('slide', {direction: 'top'});
});

// PluginB.js
$('div').bind('frameLoaded', function(){
    // do something else
});

10. Test !

jQuery comes with a nice unit test framework called QUnit. Writing tests is quite easy and allow you to confidently modify your code while ensuring that it still works as expected.

module("A simple test");

test("The frame should appear #button is clicked", function() {
  expect(1);
  $('#button').click();
  ok($('#frame').is(':visible'), "The frame is visible" );
});

I had some troubles while trying to open a Google App Engine account, because they use a SMS verification system. So I sent them a feedback, but wasn't able because the feedback form is broken and always return an error that makes no sense.

So I decided to post it here:

Hello,

Sorry to bother but I just had this really bad experience with your SMS verification system..

I indeed received a SMS as expected, but unfortunately it was not the confirmation code.

It was from Rogers and it went like this (translated from French):

"Welcome to Rogers SMS E-Mail Service. You have SMS Email, but you are not subscribed. Reply "yes" to subscribe"

I was really surprised because I pay quite a lot of money for that full data plan with "Internet" services and now Rogers telling me that I need to subscribe to yet another service which is called "SMS Email" in order to read the SMS that your system sent me.

The term "SMS Email" sounds wrong on so many levels I just don't know where to start. But have no fear, I do know it's not your fault. I just don't understand why your system don't send a good old SMS that works fine without extra fees.

And to top it off, I really needed that API key so like a fool, I did reply "yes".

I really tried to act surprised when nothing happened, retried and received the same Rogers message.. asking me to subscribe.

I'll also pretend to be surprised when I'll receive my inflated phone bill.

Best regards

– Maxime Haineault

I pay 56$ per month for that damn cellphone, for twice that amount you get a decent car around here.

Something is wrong in this country.

And how awesome can a SMS Email ca be so it requires extra fees ? I mean, it's just TEXT.

I just can't wait for their 3D SMS.