My Chuck Norris Quote Machine (project 2)

While the first Free Code Camp project was a bit open-ended, the second seemed much more straight forward – implement a random quote generator.  There were two user stories:

  1. Show a new random quote when you click a button.
  2. Using another button, tweet out the quote.

Button clicking was nothing new, so not much to learn there.  There had been some discussion of random number generation in the earlier exercises, so that wasn’t really a mystery.  But clicking a button to send a Tweet?  That was definitely new.

Of course, there was at least one other new thing – coming up with a list of quotes.  While thinking about where to find my quotes, I wondered if there were any quote repositories with APIs I could call to request a random quote.  That would be even more “new” than creating a data structure of strings and randomly selecting between them (which is what I assumed the assignment was hoping for.)

Turning to Google, I ran across an interesting site: icndb.com – the Internet Chuck Norris Database.  It provides access to a database of Chuck Norris jokes via a simple API, and  seemed as good as anything.  I figured if I made it seem like these were things someone said, they were every bit as quote-worthy as other quotes.  I had the idea of making Chuck himself the one being quoted, given the propensity for famous people to speak about themselves in the third person.  And thus was born the Chuck Norris 3rd Person Quote Machine.

I found a small picture of Mr. Norris, modified it with my favorite free, easy-to-use image editor, paint.net,  placed it in a <span> tag, and placed another couple of <span> tags next to it to contain the quote and some formatting.

One of the biggest, and certainly the most surprisingly difficult, challenges was getting the quote to be vertically centered in the span.  When the vertical-align CSS property didn’t do what I expected, I started looking for help.  I found this post on 6 Methods for Vertical Centering with CSS, which immediately described vertical-align not working.  The article was very helpful, and led to the eventual solution, which was to treat the <span> like a table cell, using the table-cell display mode:

#quote-text {
   ...
   display: table-cell;
   vertical-align: middle;
 }

Once the display was changed to table-cell, the vertical-align property worked as expected.

Requesting a quote required some JavaScript, and I used JQuery to connect to the On Click event of the <div> I used for the button:

$("#request-quote-button").on('click', function () {
    $.get("http://api.icndb.com/jokes/random?exclude=[explicit]", function(data) {
    $("#quote-text").html(data.value.joke);
  });
});

The “get” function performs an HTTP GET request, and the call returns a JSON object.  I simply navigated the object to pull out the joke text, and assigned it to the html property of the quote-text element.

I used .html() instead of .text() as the strings are URI encoded, and calling .html() seems to process the URI encoded strings correctly, whereas calling .text() leaves you with text like this:

If you ask Chuck Norris what time it is, he always answers &quot;Two seconds till&quot;. After you ask &quot;Two seconds to what?&quot;, he roundhouse kicks you in the face.

Once all that was in place, I needed to figure out how to tweet the quote.  There seemed to be way too many ways to accomplish this, but I found this example the easiest to get working.

Overall, I spent about 2 hours working on this project, which is significantly less than I spent on the portfolio project.  It was nice seeing things come together – the JQuery quote API call; the centering CSS solution; and the workable Twitter integration.  It certainly isn’t a complex site, but being able to whip up the functionality in a quarter of a day, and having implementation ideas become functional in a matter of minutes was a real confidence booster.

Next up, the four function calculator page!

My portfolio page (and first Free Code Camp project)

It seems like only yesterday that I was going on and on about the “big advantage” my CS degree was as I worked through the first set of algorithm exercises.  It was, in fact, almost a week ago that I completed those exercises and began working on the first of several “basic projects”, the first of which is to create a portfolio page in which you create links to all future Free Code Camp projects.  An example is provided which looks rather nice (props to you, Thiago!) but other than a handful of use cases, and a plea to not look at Thiago’s source and just copy it, you are on your own.  Hope you were paying attention!

Switching from guided instruction to open-ended project was a real jolt, especially where it came in the curriculum.  I had just finished what was supposed to be 50 hours of algorithm, and the HTML/CSS/JavaScript (JQuery) seemed an eternity ago.  A much better strategy would be to build this portfolio after a series of lessons that introduced you to the concepts you were expected to use to create the portfolio.  The “Read-Search-Ask” in this case seems more like an excuse not to organize a curriculum rather than a learning strategy.

Still, “Read-Search-Ask” is what we were given, so that is what I did.  Here is a link to the CodePen pen I’m using for this:

//codepen.io/dclark/embed/dGzVqL/?height=268&theme-id=0&default-tab=result

Even though the portfolio looks really bare-bones (as of today, anyway…) there were several things I struggled to implement.

But before I get into the things that were hard, a caution: don’t underestimate the amount of time you’ll spend on extraneous stuff that doesn’t sound time consuming, like searching for and editing the images you’ll use on your site.  I’m sure I spent at least as much time searching for the right sized images, and tweaking them in paint.net, as I did fighting my code.  Real projects – even tiny ones – require more time than you think they will.

First on the “tricky” list was duplicating the button behavior from Thiago’s page.  If you look at his example, you’ll see that his buttons have a slick grow effect when you hover over them.  This is perhaps the least important of all the features on his site, but man, I loved how it looked and wanted to copy it!

I started using JQuery, adding some code to make the buttons bigger when they were hovered over.  This created a jumbled mess, as all four of my buttons jumped and wiggled when any of them were hovered over.  I quickly abandoned this, and after failing to find anything satisfactory after Reading and Searching, I broke open Thiago’s source and looked at what he used, which was:

.contact-button:hover {
  transform: scale(1.1);
  transition: 0.3s;
 }

The scale transform made the buttons grow, and the transition time told it how long to take.  (A second transition value in the non-hover state controls returning to the normal scale.)  This was simple, easy, and man, I wish I could have found it more easily.

Much more critical was the layout of (among other things) the links to the portfolio projects.  I haven’t finished any of the FCC project yet, so I found a nice yellow “under construction” image, and used that in place of images of my projects.  That part was easy.

The harder part was getting the columns of projects to work the way I wanted, which was to show three across in the largest view, and then to scale down to 2 columns, and then 1, responsively, as the page width shrunk.  I experimented with a lot of stuff trying to position my three columns of 3 projects each, but finally settled on simply using Bootstrap’s column layout to get things working (mostly.)  The key here was applying multiple Bootstrap classes to each project div so as the screen size changed, the number of Bootstrap columns would also change.  Here’s what I’m talking about:

<div class="portfolio-cell col-xs-12 col-sm-6 col-md-4">

Each portfolio project link is contained in a div with the class portfolio-cell.  The other classes are Bootstrap classes, and can be interpreted, “take up 12 columns (the whole browser window – one cell per row) when using extra-small displays; take up 6 columns (two cells per row) when using small displays; and take up 4 columns (three cells per row) when using medium (or larger!) displays.

This all works great, and stays centered (which was part of my personal requirement) at every screen width.  I still have some cleanup to do (single column cells look way too wide) but this worked well enough for more cases.

The final thing (but certainly not the only other thing) that took up time was creating a simple-looking way of showing some of the projects I’ve worked on in the past.  There were six projects I wanted to highlight, and this is where the time was lost to looking for images.  Once I found them, and sized them somewhat similarly, I had to decide how to display them.

I settled on using a single space on the page and fading between the six images.  I did a search for “css fade image over another” and found several useful pages, including the solution I eventually settled on from stackoverflow.  The fading worked great, but because it used absolute positioning to overlay the images, the images were completely ignored when formatting the page.  The result of this was that the images would overlap the Contact me section below it.

More Googling, and I found a suggested workaround for this – floating a div underneath the images that is the same size as the images.  This worked great at first, but I didn’t like having large, statically sized images in what was supposed to be a responsive web page.  I changed the images to use the img-responsive Bootstrap class, which worked great – the images resized as the browser resized.  Unfortunately, the floated div didn’t resize along with it.

I worked around this issue by adding some JQuery JavaScript to keep the size of the floated div in sync with the size of the dynamically-sized images:

$(document).ready(function(){ 
    $( window ).resize(function() {
        $( "#hidden-div" ).height( $("#my-image").height() );
        $( "#hidden-div" ).width( $("#my-image").width() );
    });
});

This set of functions traps the window resize event, and assigns the height and width of one of my professional project images to the hidden floated div.  I did have to look up the event to use, verify how to search for elements by ID, and how to get and set the height and width, but once I had all this collected, writing the function was easy, and it worked as expected the first time I tried it.

 

I failed to count the hours on this project, but it took parts of at least five days – no less than 20 hours.  The project still isn’t finished – there is lots to polish, not the least of which is fancying up the cells that hold links to finished projects, which will be important once I have an actual project to show – but it covers all of the user stories.  They estimate that the first four projects will take 100 hours, so 20 hours sounds about right.  Next up is a Random Quote Machine, which seems a little less involved.  I guess we’ll see!

Algorithms and the big advantage

I believe I’ve mentioned it before, but if not, I assume I have a huge advantage over the majority of folks who are working through the FreeCodeCamp curriculum.  That advantage?  A bachelors degree in computer science.

I’m assuming that advantage, plus the fact that I’ve recently finished reading the introductory text Eloquent Javascript, accounts for the huge discrepancy in estimated vs. actual time to complete the Basic Algorithm Scripting section of FreeCodeCamp.  It took me 3 1/2 hours to finish the supposed 50 hour section.

Why the big discrepancy?  Not sure.  The problems didn’t seem very challenging, and several of them were easily solved using JavaScript’s higher order functions.  As an example, the second Bonfire, asking you to reverse a string, can be written in one line using three such functions:

function reverseString(str) {
return str.split(“”).reverse().join(“”);
}

Another critical skill is regular expressions, which I’ve never come close to mastering.  These simplify a whole host of search problems, and are frequently useful in the algorithms Bonfires.

Of course, understanding loops, arrays, conditional statements, etc., all come into play, and in the end, I feel like they do give you a good workout, covering all the major concepts from the just-completed JavaScript section.

Perhaps the most useful thing I did in working through the problems was to copy and paste my code into a new CodePen pen, and use their environment, along with Chrome’s developer tools (specifically the Console), to debug things when they weren’t working.  There is nothing more helpful than a few well-placed console.log() calls to help you figure out that you’ve put something in the wrong place, or have mis-typed a variable name, etc.

In the end, whether it takes you 50 hours or closer to 5, the important thing is to complete all the bonfires.  These are real programming challenges, and closer to real programming than you’ve seen so far on FreeCodeCamp.  Learn all you can before moving on.

FreeCodeCamp section: Object Oriented and Functional Programming
Time estimate: 50h
Actual time: 3h 30m
Waypoints covered: 1
Bonfires covered: 17

OO and Functional programming, already?

OK, so we’d just been introduced to the JavaScript language.  Time to do a little programming to get settled in, right?  Wrong!  Time to layer on object oriented programming and functional programming!  Just reading the title of the section, it seemed to be a bit rushed.

But this section only scratches the surface.  We’re not really learning object oriented programming, we’re just learning how to declare objects.  And we’re not so much learning functional programming as we’re learning about JavaScript’s higher order functions.

With that in mind, this section was a bit light-weight.  Granted, there is a lot to digest here, and from what I can tell by looking at the next section (Basic Algorithm Scripting) this is really just some prep work for that section.  Take your time, and make sure you at least understand how things work.

For me, getting the sort() function down was a bit of a challenge.  I needed to look up some external documentation to really get it down.  But other than that, just running through the exercises and getting them to work was sufficient.

Here’s the list of higher-order functions covered in this section:

  • map()
  • reduce()
  • filter()
  • sort()
  • reverse()
  • concat()
  • split()
  • join()

FreeCodeCamp section: Object Oriented and Functional Programming
Time estimate: 2h
Actual time: 30m
Waypoints covered: 13

JavaScript at last

After seeing hints of JavaScript for several sections, FreeCodeCamp finally gets down to the business of teaching the JavaScript programming language in the Basic JavaScript section.  It estimates the lessons will take you 10 hours to get through, and that is probably right for someone just learning programming.  I was able to get through the lessons in about half that time.

If this is your first go-round at learning a programming language, get ready for a mind-bending experience.  There are dozens of concepts you’ll need to digest (the coverage here includes 97 Waypoints, and 8 additional Checkpoints), and coming away with a solid understanding of the concepts will be hard.  Take your time, and try to understand everything that’s presented.

For those of you who have already learned a C-like language, which would include, C, C++, Java, C#, JavaScript (somewhere else), and even languages like Python and Perl, this will mostly be a review.  Things like variables, functions, control structures (if, else, switch, for and while looks, etc.), and the like, will all be familiar.  I still recommend going through it all, and making sure there isn’t something new.

For me, the Checkpoints, which are small, open-ended programming assignments that provide a significant amount of support, were the most time consuming part of this section.  The actual tasks weren’t all that difficult, but as is the case anytime you’re programming, the devil is in the details, and I lost several minutes to debugging typos (which JavaScript doesn’t make as obvious as other languages).

Other things that were new or interesting for me:

  • Variables which are defined without the var keyword are automatically created in the global scope.
  • Strict equality (===) and inequality (!==)
  • Use the delete operator to remove a property from an object.
  • Regular expressions as first-class language objects.

FreeCodeCamp section: Basic JavaScript
Time estimate: 10h
Actual time: 5h
Waypoints covered: 97
Checkpoints: 8

 

Doing JavaScript before learning JavaScript

I thought it was interesting when FreeCodeCamp.com asked their students to learn some Bootstrap just after learning the basics of CSS rather than diving into an endless review of CSS styles.  It made sense – rather than bludgeon the students to death with CSS they’ll have to look up in the future anyway, use a library to allow them to do cool things without delving into the details.

Things went even further with Free Code Camp’s handling of JavaScript.  This time, before even showing the student some sample JavaScript code, they jumped into the nitty-gritty of the JQuery library.  “Don’t worry about JavaScript itself,” they said,
“we will cover it soon.”

I’m not sure I agree with diving into JQuery before doing any JavaScript, but I agree with the concept that the JQuery library can be extremely useful without knowning JavaScript.  And in this section, you’re handed this code snippit, and asked to just ignore any questions you may have:

$(document).ready(function() {

});

This brings up questions about defining functions, what the ready function is, etc., but FreeCodeCamp handles it by assuring us:

“We’ll learn more about functions later. The important thing to know is that code you put inside this function will run as soon as your browser has loaded your page.

“This is important because without your document ready function, your code may run before your HTML is rendered, which would cause bugs.”

We’re then exposed to JQuery’s selector syntax, which seemed magical the first time I learned it, but is really just an elegant way to select items from and manipulate the DOM.  For example, this code applies the associated classes (animated and shake) with the HTML elements that share the specified class (well):

$(“.well”).addClass(“animated shake”);

$(“.well”) is the selector; addClass() is the function called on the resulting elements.

There is a lot to JQuery, and while we cover only a small subset, it shows how easily things can be manipulated.  The selectors we are shown include:

  • elements – $(“button”).addClass(“animated bounce”); // applies to all button elements
  • classes – $(“.well”).addClass(“animated shake”); // applies to all elements with the class “well”
  • ids – $(“#target3”).addClass(“animated fadeOut”); // applies to all elements with the id “target3” (should only be one)

We are also shown what they call CSS selectors for the nth child (nth-child), and odd (:odd) and even (:even) children.  You use these as modifiers on an element, class, or id query, like this:

$(“.target:nth-child(2)”).addClass(“animated bounce”);

The following functions were discussed

  • addClass()
  • removeClass()
  • css()
  • prop()
  • html()
  • text()
  • remove()
  • appendTo()
  • clone()
  • parent()
  • children()

The next section is an introduction to JavaScript, so it will be interesting to see if getting JQuery first makes any difference in that introduction.

FreeCodeCamp section: JQuery
Time estimate: 3h
Actual time: 1h 30m
Waypoints covered: 18

Our first library – Bootstrap

FreeCodeCamp section: Responsive Design with Bootstrap
Time estimate: 5h
Actual time: 1h 35m
Waypoints covered: All 31 in Responsive Design with Bootstrap

It seems a little interesting to be jumping right from HTML and CSS to a framework, but that’s what Free Code Camp does.  As soon as your feet are a little damp with tags, classes, and ids, it’s off to Bootstrap and responsive design.

One of the biggest challenges of learning to format HTML using CSS (in my experience) is the incredible volume of styles available.  The few times I’ve delved into this in the past, my enduring concern was, “how will I be able to remember all of these styles?”  And adding in the media queries required for today’s modern responsive web design.

Rather than deal directly with this issue, Free Code Camp side-steps it a bit by focusing on a popular HTML/CSS/JavaScript that provides a simplified method for applying responsive concepts.

Bootstrap works by applying styles and functionality to HTML tags that are assigned certain classes, and Free Code Camp simply begins by telling us to wrap all of our HTML in a <div> tag that is assigned the class “container-fluid”.

Unfortunately, there isn’t a whole lot of explanation of what is going on here.  Sure, there’s a paragraph or two that describe the high-level goal of responsive design, but there isn’t really a lot of deep learning going on here.  This is my biggest concern with these online curriculums, and it has driven me away in the past, focusing instead on deeper resources like books.  Sure, we’ll learn stuff by typing and watching, but it feels like it could be better.

Over the course of this section we are introduced to a fairly large number of classes that provide a wide variety of functionality:

  • container-fluid
  • img-responsive
  • text-center
  • btn
  • btn-block
  • btn-primary
  • btn-info
  • btn-danger
  • col-md-#, col-xs-#
  • row
  • text-primary
  • well

It almost starts to feel like the CSS style overload I mentioned earlier, but in reality, the Waypoints are able to cover a huge amount of ground while ignoring the nitty-gritty details underneath.  It does allow folks who are new to the game a chance to build stuff more quickly, and that can be critical in these early stages (we’re only supposed to be 10 hours into this 2080-hour curriculum at the end of this section) when it is so easy to just give up.

Similarly, the introduction of the Font Awesome icon library allows students to add some polish to their pages without having to figure out the details.  This is actually a critical skill – finding libraries that solve a problem and integrating it into your site – and introducing this early is also a nice touch.  Fortunately, the difficult side effects of this sort of thing – having to debug the underlying code of a library that isn’t behaving – is saved for another day.

So far, I’ve been able to complete the first 10 hours of FreeCodeCamp in less than 4 hours.  I don’t know how sustainable that ratio is, and it’s much more important that I’m learning as I do this, but it sure would be nice to be able to learn all this stuff in less than a year.