How to validate CPF number using custom method in jQuery.validate plugin

Last week I was polishing the subscription process of an app I’m currently working on in terms of better validation and more friendly UI/UX.

During the subscription this form collects a non-confidential CPF number, which is Brazilian analog of SIN (Canada) or SSN (USA). This information is critical to be verified upfront, so it’s required to be checked during subscription process, on a client side.

Continue reading

Dribbble Genealogy: Meet your Dribbble ancestors

This is my new web experiment with JavaScript, jQuery and Dribbble API – called “Dribbble Genealogy“:
js.ework.me/code/dribbble-genealogy/

  • If you’re, by any chance, a Dribbble Player, you can enter your username to generate your own dribbble genealogy.
  • If not, you may use my username – Rork, or try these IDs to check the functionality: 14392, 2942, 38531, 1433, 34963.

This time I’m connecting to API directly with AJAX requests using JSONP, without Jribbble library I used before. So I’m going to do some re-work of Dribbble Profile too, and add its dependency-free version to Github in some time.

dribbble-genealogy

Here is the Github repo.

How to handle an unknown number of arguments?

Hey guys! Did you know that JavaScript functions can have unknown arguments?! JS functions can also have optional arguments and even optional number of arguments!

And the best part of it, is that arguments can be treated as Arrays, including build-in JavaScript methods.

To explain you this on a very simple example, lets create a function, which will sum up any numbers that would be passed to it.

function sum() {

    var totalSum = 0;

    for (i=0; i<arguments.length; i++) {
        totalSum = totalSum + arguments[i];
    }
    return totalSum;
}

alert( sum(1,3,7,11,25,38,41,56,129) );

Try it live at JSFiddle!

Searching for element’s index number in Array

While learning Arrays today, I needed a search function, which could find any element in an Array and return its index number.

function find(arr, value){
    for (var i=0;i<arr.length;i++){
        if (arr[i] === value){
            return i;
        }
    }
    return -1;
}

var abc = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];

alert( find(abc,'q') );

Try it out with a very long Array here.

BTW, to create this very long Array I used JavaScript too:

var alphabet = 'abcdefghijklmnopqrstuvwxyz';
var alphabetArray = [];

for (i=0; i<alphabet.length; i++) {
    alphabetArray.push( alphabet.charAt(i) );
}

var alphabetSymbolsDivided = alphabetArray.join("\',\'");

Editing strings with built-in JavaScript methods

While learning some very useful strings methods today, I decided to practice them together with short if-else syntax I discovered yesterday.

1. This function re-format the string to begin with capital letter followed by lowercase letters, using toUpperCase and toLowerCase methods:

function toCapitalLetter(string) {
    return (string === '') ? '' : string = string[0].toUpperCase() + string.slice(1).toLowerCase();
}

2. This function cut the end of a string, if it’s longer then the maximum number of symbols, using length and slice methods:

function checkLength(string, maxlength) {
    return (string.length <= maxlength) ? string : string.slice(0 , maxlength-3) + '...';
}

3. This function checks, if the phrase contains spam words, using indexOf and toLowerCase methods:

function checkSpam(string) {
    return ( ~string.toLowerCase().indexOf('viagra') || ~string.toLowerCase().indexOf('xxx') ) ? true : false;
}

You may check all these functions with working examples at JSFiddle.

If (if-else loop be shorter) {…

It turned out that not only architects, but JavaScript developers too, love minimalism. :)

Pawson_House_1999_04
design: John Pawson

Check out another – shorter – way of writing if-else loop. It’s useful, if your loop is short and can be easily understood in one line:

(if condition is true) ? this happens : else;

Sweet! Let’s eat some apples! At first, here is an example of general If-Else syntax:

Continue reading

Minor fixes and updates.

Today I’ve noticed that Twitter script works fine now on the About page of this blog. (Here you may read what was wrong with it.)

Since it works fine now, I’ve installed the default Twitter widget to showcase my last tweets on the About page:

last-tweets-about-page

Also made some minor CSS fixes to my child WordPress theme:

  • comments re-styling;
  • color scheme adaptation;
  • avatar border removed;
  • previous/next post links repositioned.

How much time has passed?

Two weeks have passed since I started my JavaScript Marathon together with writing this blog.

To celebrate this date and to practice with Dates in JavaScript I learnt yesterday, I decided to create a universal function, which would tell you the time that have passed since any moment in the past till the current moment.

Let’s create a function, which would take any Date as an argument and return us the information on how long ago it happened:

function analyzeDate(date) {

    var now = new Date();
    var diff = Math.round(now - date);

    if ( diff < 1000 ) {
        return('Now');

    } else if ( diff >= 1000 && diff < 60*1000) {
        return( diff/1000 +' seconds ago');

    } else if ( diff >= 60000 && diff < 60*60*1000) {
        return ( diff/60000 +' minutes ago'); // 55 minutes ago

    } else {
        return reformatDate(date);
    }
}

As an additional feature, I’d like to change the Date output into European format so it to be presentes as dd.mm.yy hh:mm:

Continue reading