getTweets in JavaScript

• First step to making the code look good is proper indentation. JSBeautifier can do that for you.

• Next is consistency. If you use jQuery, you can go all-out with jQuery to make it as neat and uniform. Of course, you can do vanilla JS if you want to for optimization.

• Then remove duplicate code or code that does the same thing over and over again.

• Watch out for missed vars. This can make variables to globals which isn't good.

• When declaring, follow this order:

  • variables
  • functions
  • "prep code" like initializers, code to fill arrays, fetching values etc.
  • actual operation of the function

The rest are commented so keep a sharp eye. Can't really debug the code but the idea of what to do are there:

function getTweets(user) {

    //cache an object if it's to be used more than once
    var container = $('.container').html('<div class="loading"></div>'),

        //put the url up here so it does not clutter the getJSON below
        //i prefer using single quotes than double quotes for a cleaner look
        url = 'https://twitter.com/statuses/user_timeline.json?screen_name=' + user + '&callback=?&count=50';

    $.getJSON(url, function (data) {

        //it's logical to only put things where they are needed
        //in this case, the following variables are only needed
        //when the callback completes
        var date = {
            Sun: 'Sunday, ',
            Sat: 'Saturday, ',
            Mon: 'Monday, ',
            Tue: 'Tuesday, ',
            Wed: 'Wednesday, ',
            Fri: 'Friday, ',
            Thu: 'Thursday, '
        },
            width = Math.floor(($(window).width() - 200) / 225),
            col = [],
            small = 0,
            articleArray = $('article');

        //prep codes after vars
        while(col.length < width) {
            col.push(0)
        };

        //consistency and ease, use jQuery instead.
        $.each(data, function (i, value) {
            //watch out for missed "vars"
            var day = date[value.created_at.match(/\w+/)[0]],
                //shorthand notation for creating a variable, appending it to the container directly
                //we can hand it over to a reference to do more on it
                art = $('<article>').appendTo(container);
            value.text = value.text.replace(/(http[s]*:\/\/[\w/\.]+)/, '<a href=\"$1\">$1</a>')
            value.created_at = value.created_at.replace(/(\+\d+)/g, '').replace(/\w+/, day);
            art.html('<h3>' + value.user.name + '</h3><span class="date">' + value.created_at + '</span><p>' + value.text + '</p>');
        });


        container.css({
            width : col.length * 225 - 5,
            height : col[small]
        })

        //using the built in each to loop through DOM
        articleArray.each(function (i, article) {
            $(article).css({
                'top': col[small],
                'left': small * 225
            });
            col[small] += article.clientHeight + 5;
            for(var j = 0; j < width; j++) {
                if(col[j] < col[small]) {
                    small = j
                }
            }
        }).fadeIn(); //chain whenever necessary

        //using context to limit the scope of the selector search
        $('.loading', container).fadeOut();
    });
}