Restructured Learning: Trying Harder

5 min read

So after reading yet another good post on That Amazing Programmer, I got to thinking about my own reluctance to sit down and learn programming. I knew I should be trying harder.

Chris wrote down some of his apprehensions in a freewrite type of entry in his journal. I didn’t do that. I guess I am forcing myself to actually program 8 hours a day; yeah, a full-time job full of learning.

Here is my Priorities whiteboard:

So far yesterday I programmed for close to four hours after getting up super late as allergies are killing me and when that happens, not much gets done. And I am still looking for small freelance projects to gain more experience so I can be gainfully employed. I am probably going to head to bed very soon.

[caption id=”attachment_1069” align=”aligncenter” width=”1000”] Daily Whiteboard Schedule[/caption]

Treehouse and the jQuery for AJAX Requests Dilemma

We were going along, using vanilla JavaScript for our AJAX requests, when the next course that popped up in the AJAX basics track was jQuery for AJAX. I felt a twinge of uh oh. Don’t think this actually something you should be doing.

I felt a little uneasy that Dave McFarland actually said a lot of developers use the library to do their AJAX requests. It didn’t make sense.

So I consulted the Code Newbie Slack. And boy, it did not disappoint.

Using a lib like jQuery can really slow your site down— it’s huge and even if you use a CDN, like we did in this exercise, it has to pull a large resource from that CDN which can slow things down considerably. Take a look at this, however:


$(document).ready(function () {

  var url = "../data/employees.json";

  $.getJSON(url, function (response){

     var statusHTML = '<ul class="bulleted">';

     $.each(response, function (index, employee) {

        if (employee.inoffice === true) {

        statusHTML += '<li class = "in">';

         } else {

         statusHTML += '<li class = "out">';
      }

    statusHTML += employee.name + '<li>';

    });

statusHTML += '</ul>';

$('#employeeList').html(statusHTML);

  });

}); //end ready

This is deceptively simple code. Short and sweet as opposed to the XMLHttpRequest method of vanilla JavaScript, which is here:


var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {

    if(xhr.readyState === 4) {

       var employees = JSON.parse(xhr.responseText);

       var statusHTML = '<ul class="bulleted">';

       for (var i = 0; i < employees.length; i += 1) {

          if(employees[i].inoffice === true) {

            statusHTML += '<li class = "in">';

          } else {

            statusHTML += '<li class = "out">';
          }

          statusHTML += employees[i].name;

          statusHTML += '</li>';
      }

      statusHTML += '</ul>';

      document.getElementById('employeeList').innerHTML = statusHTML;
   }

};

xhr.open('GET', 'data/employees.json');

xhr.send();

There’s a few more lines of code here but it just looks crazy.

But, as I know and had gotten confirmed, the less dependencies the better. And for someone new, actually learning the XMLHttpRequest method of creating AJAX requests is something that I should do. The jQuery though. It’s just so simple and pretty…

Finished Up The Programming AJAX and AJAX Concepts Courses

And am almost done with the AJAX JavaScript track in the full-stack JavaScript track at Treehouse. Tonight I am finishing this AJAX course up and heading back to Free Code Camp.