Week 13 Homework 💻 🐥

New stuff we learned this week: 🤔

Vim

  • C is a shortcut for c$ meaning “change to the end of the line”
  • D is a shortcut for d$ meaning “delete to the end of the line”
  • the p command “put” works differently based on whether you’ve yanked lines or characters. p always puts after, and P always puts _before

Regex

  • \s stands for whitespace and matches spaces, tabs, and newlines
  • \S stands for everything BUT whitespace (opposite of \s)
  • \D stands for everything BUT digits (opposite of \d)
  • \W stands for everything BUT word-ish characters (opposite of \w)

HTML

  • HTML does weird things if you don’t properly close out elements
  • you can check the correctness of your HTML and find common mistakes by typing validate <myfile>.
  • you can format your HTML files (and find errors) using the command format <myfile>
  • all HTML elements may have an id attribute, like <div id="foo"></div>
  • id attributes are supposed to be totally unique for the page.
  • all HTML elements may have a list of classes, separated by spaces, like <div class="foo bar">
  • classes do not need to be unique on the page
  • id’s and classes allow elements to be targeted by CSS (and javascript) — think of them like “handles” to grab hold of elements

CSS

  • HTML pages can be styled using CSS - which stands for Cascading Style Sheets
  • a Style Sheet can be embedded in the <head> portion of an HTML page using the <style></style> tag
  • CSS consists of rule-sets
  • a CSS rule-set is composed of a selector, and one or more declarations inside of curly braces.
  • CSS declarations are made up of a property and a value
  • the example below shows a CSS rule-set — the h1 is the selector and the color: red; is the declaration:
h1 {
  color: red;
}
  • in CSS, you can target elements by using their tag-name like the h1 in the example above
  • in CSS you can also target an element by it’s id using the syntax #<id> like #foo { color: red; }
  • in CSS you can also target an element by it’s class using the syntax .<class> like .bar { color: red; }
  • you can target multiple things at once by making a list of selectors as shown here:
h1, h3, #some-id, .my-class {
  color: red;
}

Javascript

  • javascript (js) is an all-purpose programming language created by Brendan Eich that is extremely widely-used primarily because it is the only programming language that works in web browsers.
  • javascript for many years could only run inside of a browser, but that changed when nodejs (or just node) was created in 2009 by Ryan Dahl
  • now, javascript is run primarily in the browser, or in node.
  • a REPL is an acronym that stands for “Read Evaluate Print Loop” — it’s like a playground for a programming language. Both the browser and node have one. In the browser, you open the developer tools and go to console and in node you just type node from the command line.
  • in js you can declare a variable by using the let keyword: let x = 42;
  • a number in js is written with plain old digits, like 42
  • a string in js is written as characters wrapped with " or ', like 'foo' or "bar"
  • a boolean in js is written with the two special keywords true and false
  • there is a special primitive type in js called undefined which means “not defined” — it is written with the keyword undefined. It is used for sort of “the absence of a value”. For instance, if you wrote let x; then x would have the value of undefined.
  • there is a special primitive type in js called null which means “nothing” and is written with the keyword null
  • null and undefined are very similar, but not technically the same
  • the typeof operator in js evalutes to a string containing the type of whatever comes after it, so: typeof 42 evaluates to "number"
  • in js console.log(<something>) is basically like barfing to standard out.
  • in node, javascript can be written in <filename>.js files and executed by typing node <filename>.js
  • here are some examples of declaring javascript variables of different types, plus using the typeof operator:
let myNumber = 42;
let myString = "goat banjo rodeo";
let myBoolean = true;
let myUndefined = undefined;
let myNull = null;
console.log(myString);
console.log(33);
console.log(false);
console.log(typeof myNull);
console.log('I like goats:', myBoolean);

Useful Links:

Homework Plan:

  • 1 day creating new flash cards
  • 2 days reviewing all flash cards
  • 1 day Regex practice at RegexOne
  • 1 day javascript practice
  • 2 days touch-typing practice
  • 2 days Web practice
  • 1 day watch CCCS#11

Homework day 1

  • create new flash cards
  • review all flash cards
  • Web Homework #1

Homework day 2

  • watch CCCS#11
  • touch-typing practice
  • Regex Practice

Homework day 3

  • review all flash cards
  • Javascript Practice

Homework day 4

  • touch-typing practice
  • Web Homework #2

Flashcard Assignment

  • review your current stack of flashcards
  • make 2 new VIM flashcards for C and D
  • make 4 new REGEX flashcards for \s, \S, \D, \W

Regex Homework

  • sort out your REGEX category flashcards and review them
  • complete all of the lessons on RegexOne — try to use the concepts introduced in each lesson to complete the task, and don’t do the minimum required to get the “continue” button to turn green, try to fully and perfectly complete each step
  • STOP at Lesson X: Infinity and beyond! — do not “continue to Additional Problems”

Web Homework #1

  • slowly and carefully review the HTML, CSS, and Vim sections of the “New Stuff Learned this Week” above ^
  • ssh into your home dir, then cd down into the www dir
  • use cp and a flag to make it work recursively to copy the entire week12/ dir, creating a new directory called week13 that has all of the same files in it (if you don’t know the flag, man cp)
  • cd down into week13 and edit your whacky.html file with vim, then convert all of your inline styles to CSS by creating a new <style>...</style> tag in the <head> and moving all of the style declarations from your style attributes up into CSS rule-sets in the <style> tag. You may have to add a few ids and classes in order to target the elements you want to style
  • view your week13/whacky.html file in a browser, and compare it to week12/whacky.html — they should look the same, keep working until they do.
  • now, run validate whacky.html and fix any errors it reports
  • next try running format whacky.html — see if it finds any errors, and check to see if your html/css was re-formatted by the tool
  • repeat steps 4 through 7 but this time with your table.html file
  • edit both your whacky.html and table.html file and add to each a new CSS rule-set modifying the body tag, adding both a background-color and some padding

Web Homework #2

  • slowly and carefully review the HTML, CSS, and Vim sections of the “New Stuff Learned this Week” above ^
  • ssh into your home dir, then cd down into www/week13
  • without leaving your current directory, use ls to look around in the /www-assets dir — you should see two new images — copy them down into your current directory in one command (remember, cp takes a variable number of arguments, so you can do cp <path1> <path2> <destination-dir>)
  • make a copy of the boilerplate.html file, copying it to a new file called animals.html
  • edit the animals.html file, making 4 chunks of html code one for each type of animal you have a picture for (goat, cat, frog, aardwolf). Each html chunk should contain:
    • an <div> wrapping the whole section, or chunk
    • an <h1> with the name of the animal
    • an <img> tag with the picture of the image
    • a <ul> with 5 list items containing facts (you can make them up) about each animal
    • a <p> tag with a sentence or two about whether you like or dislike that animal
  • now, create a <style> tag in the <head> section and write CSS rule-sets for h1, ul, img, and p — each ruleset should be different, and have at least two declarations (a declaration is like color: red;)
  • next, modify your HTML by adding some ids, so that you can add 4 new rule-sets to make each h1 a different color, then add the css rules to do so
  • next, make the background-color of the two chunks showing baby animals (aardwolf and cat) a unique color — you’ll need to add some class attributes in order to do this.
  • (for this step, try to use vim’s . to speed up the repetative part) next, add a combination of html class attributes and a css rule-set so that every other list item in each list has a background color of pink (or some other color) — so that it has a zebra-striped appearance
  • style the img tags so that the four images are approximately equal size — you can use css declarations width: 200px; to accomplish this — you may need to add classes or ids to target what you want
  • add any other cool styling effects you want
  • run validate and format commands on your animals.html file, fixing anything it points out
  • share your link in Slack so we can see your web-page

Javascript Homework

  • slowly and carefully review the Javascript portion of “New Stuff Learned this Week” above ^
  • ssh into your home dir
  • start up the node REPL by typing node<enter>
  • try directly typing in a string, number and boolean value (meaning, for a number you’d just type 13 and then hit enter) — the REPL will spit the value back out to you. Notice how the node REPL colorizes and formats different types differently to help you out
  • next, declare a variable called today that contains a string with the current day of the week
  • on a new line, type just the name of the variable today and notice that the REPL spits back out the variable’s value
  • next make another variable called temp that contains a number with the current temperature (just guess)
  • use the console.log() to barf out the value of the temp variable to standard out
  • repeat the last step, but with the variable today you created above
  • next, make a new boolean variable called raining that is either true or false
  • use console.log() to barf out raining to standard out
  • use console.log() to barf out the string ‘foobar’ without creating a variable, just put 'foobar' directly inside the parens.
  • try to console.log() two variables at once, separating them with a comma: , — try to do it with the variables today AND temp
  • console.log() is variadic (like cp!) — you can pass it any number of values, not just 2. Knowing this, try to passconsole.log()a set of variables and strings (separated by commas) so that it barfs outToday is Thursday and the temperature is 33 and it is raining: false — except it should use the three variables you made above
  • we didn’t cover this in class, but the typeof keyword in javascript evaluates the type of whatever comes after it. Experiment with it by typing typeof 32 and typeof 'foobar' into the REPL
  • for your 3 variables you created above, use the typeof keyword to have the REPL show you the type of each
  • now, make a new variable called myNull and set it’s value to null
  • type typeof null — are you surprised by what the REPL spits back? Make a mental note…
  • make 3 new variables: x, y, and z with the values of 3, 4, and 5
  • try some basic math with these new variables, like x + 3 and y / 2
  • another operator in javascript is === — it is used to test equality — whether two things are equal to each other. Try it out by typing x === y.
  • what type did the last step return? Does that make sense to you? Verify your answer by typing typeof x = y
  • Extra Credit ✨ — see if you can verify the pythagorean theorem, which says that for a right triangle or something, x squared plus y squared equals z squared where z is the hypoteneuse. if you do it right, the REPL should spit back true. (hint you’ll need to use === and the multiplication operator, which is *)
  • quit the node REPL by typing .exit or CTRL-C twice
  • create a new file called me.js using vim
  • use what you learned above to write 3 lines of code declaring 3 variables:
    • name should be a string with your name
    • age should be number with your age
    • likesGoats should be a boolean
  • then on lines 3-6 write a single call to console.log() on each line, passing TWO values (separated by a comma) to each call. Write them so that when you later execute (run) the program, you will see 3 lines of text spit out like this: My name is Harriet, I am 12 years old, and I like goats: true.
  • when you think you’re done, save the file and close
  • run or execute the file by typing node me.js — if there are any errors try to understand what the error messages mean and fix them on your own, if possible
  • if you can’t get the errors figured out, try typing format me.js and see if you get some more help from that command
  • still stuck? send a slack
  • keep fixing and tweaking until your program spits out the correct three lines of text
← All homework