Design Courses with Ellen Lupton on Skillshare

Ellen Lupton is a curator of contemporary design at Cooper Hewitt, Smithsonian Design Museum in New York City and director of the Graphic Design MFA program at Maryland Institute College of Art (MICA) in Baltimore. She is also the author of Thinking with Type, which is widely used in graphic design.

After recently browsing around on Skillshare, I discovered a few of her. Many are free and only around 30 min long. Here’s a short list. I haven’t taken them all, but I hope to review sometime soon.

Typography That Works: Typographic Composition and Fonts

Screenshot from skillshare




Demystifying Beauty: Inspiration for Design






Graphic Design Basics

Screen shot of video on scale




How Posters Work

Title slide for skillshare





I’m not a big fan of the Skillshare interface — for one thing, the videos autoplay when you load the page. But, these are pretty short videos, about 30 minutes, so don’t let autoplay scare you. Plus, they’re all free.

Learning about the DOM in JavaScript, jQuery, and More

A recap of my recent experience with an intermediate JavaScript course on Lynda.

Screenshot of Lynda course
Click the image to watch the preview for ‘The DOM in JavaScript, jQuery, AngularJS, and React’ on

I recently finished an interesting course on the DOM and different versions of JavaScript. I liked that it was just a taste of JavaScript, jQuery, Angular, and React. It’s called The DOM in JavaScript, jQuery, AngularJS, and React. It was released in 2017.

Much of the course was focused on regular JavaScript. I’m glad I’ve spent so much time studying JavaScript, because a lot of basic things didn’t need to be explained for me in this course.

Although I know about the DOM, using HTML, this focus on the DOM using JavaScript was an interesting approach. For instance, traversing the DOM (with classes and IDs) was fun:


This selects the 5th child of the body, then the 2nd child from that. This is almost like using CSS selectors to select parent and child elements.

One of the things I love about Lynda is that they recommend additional courses to learn more about related topics. A few courses the instructor recommended included:

  • JavaScript Essential Training
  • jQuery for Web Designers
  • Angular 2 Essential Training
  • ReactJS Essential Training

They may have updated it, but I’ve already taken the JavaScript Essentials course before, so I’ll check if the others are already on my list. Angular is past version 2 by now, but maybe it’s easier to get started with that version.


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

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); 

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); 

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); 

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); 

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.