getTweets in JavaScript I'm a JavaScript newbie who was first introduced to JavaScript by jQuery. I'm trying to switch over some of the small things I've written in jQuery to JavaScript as a way of learning. I was wondering how I could make my code cleaner and if there were any bad habits which I am guilty of doing.

function getTweets(user) {

    //Adds a little animation to the body when function is executed
    $('.container').html('&lt;div class="loading"&gt;&lt;/div&gt;');
    var container = document.getElementsByClassName('container')[0]; 
    container.innerHTML = "&lt;div class='loading'&gt;&lt;/div&gt;";

    $.getJSON("https://twitter.com/statuses/user_timeline.json?screen_name=" + user + "&amp;callback=?&amp;count=50", function(data) {

        var date = {
            Sun : 'Sunday, ',
            Sat : 'Saturday, ',
            Mon : 'Monday, ',
            Tue : 'Tuesday, ',
            Wed : 'Wednesday, ',
            Fri : 'Friday, ',
            Thu : 'Thursday, ',
        };
        // Creates a box and puts JSON data into it.
        for ( var i = 0 ; i &lt; data.length; i++) {
            // Makes the dates readable and links work.
            data[i].text = data[i].text.replace(/(http[s]*:\/\/[\w/\.]+)/, '&lt;a href=\"$1\"&gt;$1&lt;/a&gt;')
            day = date[ data[i].created_at.match(/\w+/)[0] ];
            data[i].created_at = data[i].created_at.replace(/(\+\d+)/g, '').replace(/\w+/, day);

            var art = document.createElement('article');

            art.innerHTML = "&lt;h3&gt;" + data[i].user.name + "&lt;/h3&gt;&lt;span class='date'&gt;" + data[i].created_at + "&lt;/span&gt;&lt;p&gt;" + data[i].text + "&lt;/p&gt;";
            container.appendChild(art);

        };
        //Everything after this is to dynamically create a Pinterest type layout
        var width = Math.floor( ( $(window).width() - 200 )/225),
            col = [],
            small = 0,
            articleArray = document.getElementsByTagName('article');

        while ( col.length &lt; width ) {
            col.push(0)
        };


        for (var o = 0; o &lt; articleArray.length; o++) {

            articleArray[o].style.top = col[small] + "px";
            articleArray[o].style.left = small*225 + "px";

            col[small] += articleArray[o].clientHeight + 5;

            for ( var j = 0; j &lt; width; j++ ) { 

                if (col[j] &lt; col[small]) {
                    small = j
                }

            };
        };

        container.style.height = col[small] + 'px';
        container.style.width = col.length * 225 - 5 + 'px';

        $('.container .loading').fadeOut();
        $('article').fadeIn();

    });

};
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('&lt;div class="loading"&gt;&lt;/div&gt;'),

        //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 + '&amp;callback=?&amp;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 &lt; 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 = $('&lt;article&gt;').appendTo(container);
            value.text = value.text.replace(/(http[s]*:\/\/[\w/\.]+)/, '&lt;a href=\"$1\"&gt;$1&lt;/a&gt;')
            value.created_at = value.created_at.replace(/(\+\d+)/g, '').replace(/\w+/, day);
            art.html('&lt;h3&gt;' + value.user.name + '&lt;/h3&gt;&lt;span class="date"&gt;' + value.created_at + '&lt;/span&gt;&lt;p&gt;' + value.text + '&lt;/p&gt;');
        });


        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 &lt; width; j++) {
                if(col[j] &lt; col[small]) {
                    small = j
                }
            }
        }).fadeIn(); //chain whenever necessary

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