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.

HTML – the foundation

FreeCodeCamp section: HTML 5 and CSS
Time estimate: 5h
Actual time: 1h 30m
Waypoints covered: All 68 in HTML 5 and CSS section

I have known about HTML for a couple of decades at least, so I wasn’t sure exactly what I would learn through the first 5 hours of the FreeCodeCamp curriculum.  Still, I’m a completionist, and didn’t feel comfortable skipping stuff, so I dove in with the goal of reading through everything, and doing the work.

One critical tool I made sure I had before starting was a way to keep notes on the things I’d be learning.  I’ve had a lot of success using Google Drive (including Google Docs and Google Sheets) in my professional and educational experience, given it’s “available anywhere” nature, and I highly recommend using Google Drive, or a similar tool, to keep track of the critical things you learn along the way.

The first thing I recognized as I started through the first lesson was the importance of vocabulary.  In order to learn about something, you need to learn the words that describe it, and their meaning.  With HTML, there isn’t a ton of vocabulary, but in order to put everything together, you have to know what things are called.

Key vocabulary in this opening lesson included:

  • HTML element (<h1>Hello</h1>)
  • HTML tag
    • opening (<h1>) and closing (</h1>) tags
  • Slash (/), angle bracket(< and >)

Interestingly, I didn’t get through the first lesson without finding a bug.  Not a serious bug for the majority of the community, but it was something that would impact my early work here.  The bug was that even though I’d deleted my account, all my old code changes – which effectively completed the Waypoints – were still showing up.

This was a good opportunity for me to log a bug, and the easiest way of doing so is to click on the Bug button at the bottom of the text on the left side of the Waypoint:

FCC-bug button

That opens up a window showing you the process of troubleshooting the issue, approaching the community, and searching GitHub, after which, if you haven’t found a resolution, you can log a new issue.

While my issue wasn’t found anywhere, there is a fairly easy workaround visible even in the above window – pressing the Reset button.  Sure, I’d have to do this for every Waypoint, that was a reasonable way to have the same experience.  [NOTE: It was pointed out to me by a FreeCodeCamp volunteer that my issue was “as designed” and was due to my having code from my previous account stored in my brower local storage.  This article shows how to resolve the problem.]

Problem with the first Waypoint: there is no description of what the <h1> element should do.  On the second Waypoint, they discuss things like, “…This element tells the browser how to render the text that it contains.” and “…h2 elements are slightly smaller than h1 elements. There are also h3, h4, h5 andh6 elements.”  That’s not a great introduction to what an HTML element is.  But the curriculum is nothing if not visual, and I can see what using these tags does to the phone on the right of the screen.  Maybe that’s enough.  Still, an extra sentence or two in the right place, or even a waypoint introducing the role of the browser in rendering HTML would have made for a much smoother beginning.

Ran into another vocabulary word that was important: inline style

Styles are used to apply formatting to HTML elements, and there are multiple ways to apply them.  The first one we are taught is an inline style, which places the style inside of the HTML element.  We then learn about CSS style sheets, and alternate between these two strategies as appropriate throughout the lessons.  I like the way these were introduced almost simultaneously, so you know about both, and can see the differences right away – no learning one way and then relearning another way.

Other things that were interesting or new to me in the HTML and CSS section:

  • vocabulary word: “dead link” – this refers to any tag with an href property (a, img, etc.) with the value “#”, which doesn’t link to anything.
  • Attributes with no values – “required” (for a required form element) and “checked” (which defaults a radio button or check box to “checked”) were the two introduced in this section.
  • !important – Used to give a CSS style a higher priority.  If your CSS is getting over-ridden by something else (say, a CSS library you’ve linked to) you can try to over-ride the override by setting your style to !important.

This stuff wasn’t new to me, and it didn’t take as long as suggested – only an hour and a half, rather than 5 hours.   I expect the rest of the curriculum to take more time to understand.

It begins…

FreeCodeCamp Section: Getting Started
Time estimate: 15m
Time actual: 26m to 36m (depending on what you count)

I had pressed the big pinkish button, and deleted my existing FreeCodeCamp profile that had been languishing for several months.  I wanted to provide feedback to the community on how long things took for me, and I needed to start over to provide that on the earlier sections.  I was now ready to begin.

The first task, before even starting the “getting started” section, is to create a login, and that is where my clock begins…

The starting place is obviously www.freecodecamp.com.  The first thing that caught my eye was the big yellow “Sign in” button on the top right of the screen.  Clicking that – or the other even bigger “Start learning to code (it’s free)” button lower down on the page – takes you to the same sign in page.

When I did this on January 5th, 2016, there were six options, and what looks like a legacy email login link that is a bit confusing:

  • Sign in with Github
  • Sign in with Facebook
  • Sign in with Google
  • Sign in with LinkedIn
  • Sign in with Twitter
  • sign up with your email address
  • a weird, “if you originally signed up using your email address, you can sign in here” option.

I had all six types of accounts available to use, but while I used my email account to sign up on my first FreeCodeCamp go-round, I realized that this was eventually pushed aside by the Github account I was asked to create during the “Getting Started” steps.  Because of that, experience, I just clicked on my GitHub account, and was automatically logged in.FreeCodeCampGettingStarted

The first section is called “Getting Started” , and it consisted (as of this writing) of the following five “Waypoints”:

FCC-GettingStartedWaypoints

It had taken between 5 and 15 minutes to get this far, what between considering sign in options, writing this blog, etc., so with that, I expected getting through to the end of this section should take about 30 minutes total.

I had been through all this information before, done the GitHub configuration, etc., so this section went much faster for me than it would for someone completely new.  The information was interesting, but the one statement that gave me pause – as it had every time I’d read it – was this:

“…no one has actually completed our entire program, because campers get jobs before they’re able to.”

Was this a blessing or a curse?  I was determined to find out…

I did learn one new thing that I’d missed before – the process of changing your Notification settings for Gitter is required per-room.  In other words, when you click on the wrench and screwdriver icon, select “Notifications”, and change the default from “Notify me for all messages” to “Notify me when somebody mentions me”, you are changing the setting for that room only.  You need to change this setting for each room you join…unless you actually do want to be notified of every message sent in that room.

In my previous FreeCodeCamp experience, I never really asked a question in Gitter.  I did leave some feedback somewhere about a broken Waypoint or two, but I never used Gitter other than to say “Hello!” at the beginning.  A big goal this time around is to try and participate more in the forums – either as a question asker or a question answerer.

All-in-all, it took me about 21 minutes to get through the Getting Started section, not counting the 5 to 15 minutes it took working through the sign up procedure.  Again, this is heavily impacted by writing this blog at the same time, so the 15 minute suggestion is probably accurate for many (though I did find myself getting lost in the Gitter forums, which can soak up a ton of time if you let it.)

At the end of the section, I was dropped at the first HTML Waypoint .  FreeCodeCamp is pretty good about moving you through the content.  Just keep clicking, and you’ll be guided along.  If you leave and come back, just click the Learn link at the top of the page.  Simple as that.

FCC-HTML-first-Waypoint

So, in about a half-an-hour I was back up and running in FreeCodeCamp.  Next stop, learning!

FreeCodeCamp – one step back…

OK, so here we are, at the beginning of a 2080 hour journey to full-stack JavaScript mastery.  What is the first step?  For me, it’s actually a step backwards.

I ran across FreeCodeCamp in the summer of 2015 – about six months ago.  I dove in, and in a few days completed several of the early sections.  Unfortunately, as I finished many of them, I received word that those parts had been cut out of the curriculum.  And that is where my first foray into FreeCodeCamp ended – with throw up my hands” exasperation that I would never be able to finish because everything was changing out from under me.

Six months later, it appears that things have matured at least a little bit.  But here I am with an already-begun profile…

I decided to start over, rather than skip blogging about the early stages of the curriculum.  I logged into FreeCodeCamp, navigated to my profile page (clicked on my GitHub profile image), scrolled to the bottom of the page, and clicked the pinkish-red button – “Delete my Free Code Camp account”.

There was a really cute “head shaking” animation on the warning dialog that appeared, but despite that, and the plea to give them feedback rather than walk away, I deleted my account.

So here, at 12:29 PM on January 5th, 2016, I begin my journey through FreeCodeCamp.

Let’s go already!