Stuff I learned about Debugging on FreeCodeCamp

I recently got through the Debugging set of lessons on FreeCodeCamp. Here are a few points I learned.

Error Types

There are 3 types of errors:

  • Syntax – misspelled word, missing parentheses, etc.
  • Runtime – detected while running the program.
  • Semantic – detected after testing output. Program works but result is wrong. Be careful!
Short List

1. Use DevTools on Chrome or Firefox

2. Use console.log(); a lot. console.log spits out the value of whatever is in the () to the browser console, which helps you keep tabs on how a value is changing in your code. Sometimes you have to move the console.log to a different place, like before or after another function, because order matters and the value of your value can change.

3. Use console.clear(); to clear the memory of a value in the console. Sometimes it’s ok to forget.

4. Use typeof to keep track of values. For instance sometimes a number is a numeral and sometimes it’s a string. Write console.log(typeof value); and that will tell you the type for value.

5. Lastly, you have to watch out for misspellings, missing brackets or parentheses, using ‘=‘ instead of ‘==‘, or getting the dreaded infinite loop.


Next in FreeCodeCamp is Data Structures!

Learning Regular Expressions (regex)

A very brief overview of regular expressions after finishing the lessons on FreeCodeCamp.org.

Last on my list of JavaScript education was most recently regular expressions, which are ways for a programmer to search for strings in text. I followed FreeCodeCamp’s (FCC) curriculum. You can find more about Regular Expressions on MDN.

The short name for regular expressions is “regex”, or “regexp”. The basic outline of a ‘regex’ goes like this, which tests if “Happy” is in thisLine:

let thisLine = "Happy happy, joy joy!"; 
let thisMatch = /Happy/; 
let outcome = thisMatch.test(thisLine); 
console.log(outcome);

The outcome is true. The test method only results in true or false.

In addition to test, you might also use match and replace. I believe those are the only 3 methods used in the FCC set of lessons.

Let’s try match. If you wanted to match “Happy”, and only “Happy”, you’d write:

let thisLine = "Happy happy, joy joy!"; 
let thisMatch = /^H[a-z]+/; 
let outcome = thisLine.match(thisMatch); 
console.log(outcome);

The outcome is [Happy]. Probably the most important part of regex is using special characters, and that’s what’s going on in this example. The special characters are shortcuts to help you search for a specific string. This examples searches for a string starting with a capital H (^H) and is following by any letter from a-z ([a-z]), and repeats the search for as long as necessary until reaching a break (like a space) (+).

An even simpler way to write the above would be to use a special character (\w) to search for any non-digit character and flags to allow upper or lower case (i), and global to search the entire string (g).

let thisLine = "Happy happy, joy joy!"; 
let thisMatch = /^H\w+/ig; 
let outcome = thisLine.match(thisMatch); 
console.log(outcome);

You can also return only non-alphanumeric or digit characters.

let thisLine = "Happy happy, joy joy!"; 
let thisMatch = /\W+/ig; 
let outcome = thisLine.match(thisMatch); 
console.log(outcome);

The outcome is [" ", ", ", " ", "!"]

There are many more examples of special characters, and I’ll be honest in admitting that I find it confusing. It took me a little while to figure out the second example above, partly because MDN separates their special characters onto different lines. Try these out in jsbin.

Anyway, regex are good to know if you need it.


From FreeCodeCamp:

Regular expressions are special strings that represent a search pattern. Also known as “regex” or “regexp”, they help programmers match, search, and replace text. Regular expressions can appear cryptic because a few characters have special meaning. The goal is to combine the symbols and text into a pattern that matches what you want, but only what you want. This section will cover the characters, a few shortcuts, and the common uses for writing regular expressions.

Typography Book Projects: Psychogeographical Mapping, Cooking & Typography

Outlining some ideas for my typography class at Parson’s, for our book making projects.

For class, we will be creating 2 projects, which will turn into books. One is a psychogeographical map and the other is a little cooking memoir. I need to come up with idea for each.

The cooking book is to teach us about book binding and selecting type options for recipes, which can have many options. We need to pick a somewhat personal story/recipe. I think I will write about both my hatred of pot pies, as well as my love of Gordon Ramsay’s shepherd’s pie recipe, which I first made during Hurricane Sandy. This was also the week I adopted my cats, only kittens at the time, only 8-10 weeks old. At the time, the subways had been shut down, so I couldn’t go anywhere for a week. Luckily, because I was living so far north in Manhattan, there was no flooding and basically we didn’t lose any power. (In the East Village, it was another story.) I think there’s enough there to write a good story.

For the Psychogeographical Mapping…I’m drawing a blank. Some ideas:

  • dog runs
  • pet stores
  • Japanese grocery stores
  • Walking down the street listening to Rhapsody In Blue and taking note of what’s around me. (If you haven’t done this, while taking a walk in NYC, you’re really missing out.)
  • Mapping the Central Park Conservatory Garden, a good place to read. Maybe the benches.

Maybe some better ideas:

  • Map movie theaters in NYC that aren’t chains, up to 96th St. Meaning no Regal, AMC, or Imax theaters. City Cinemas is OK.
  • Map Goodwill Donation stores. I do go to Goodwill and the Salvation Army a lot.

I’m leaning towards the theater idea. Now to do some write-ups.