Week 12 Homework 💻 🐝

New stuff we learned this week: 🤔

Vim

  • to move quickly within a line, use f<char> or t<char>
  • to move quickly anywhere in the file, search is your friend: /<search><ENTER>
  • the { and } keys move backwards and forwards by paragraph.
  • remember . repeats the last edit you made — use it for great good

Regex

  • \b means word boundary, and matches beginning/end of lines, spaces, tabs — basically everything that you intuitively think marks the beginning or end of a word.
  • \w is a special token that means a word-like character. Technically it’s alphanumeric plus underscore. It’s exactly equivalent to writing out the character set [A-Za-z0-9_]
  • a ? character that is directly after a * or + quantifier makes it LAZY — it will no longer match as many characters as possible, it will rather stop as soon as possible.

HTML

  • a <div> tag is a generic, block-level element — think of it like a bucket to put other tags in
  • a <span> is a generic, inline element — think of it like a way to wrap a tight box around a bit of text
  • an HTML <table> tag is used to represent tabular data. <tr> is for a row and <td> is for a cell. A simple table markup is as follows:
<table>
  <tr>
    <td>Name:</td>
    <td>Age:</td>
  </tr>
  <tr>
    <td>Jared</td>
    <td>40</td>
  </tr>
</table>

Styling web-pages

  • you can apply styling to an HTML element by using a special attribute called style, like this: <div style="color: red">
  • multiple styles can be added to a single element by separating them with a semicolon <div style="color: red; margin: 1em">
  • html elements have a display property that controls how they are drawn on the page. block elements (display: block) take up their own line and use the full width of their parent element. inline elements (display: inline) hug tight around the text inside them, and don’t make their own line.
  • two useful units are px (pixels) and em (width of an M char).
  • every element on a webpage creates a box and the box can have padding surrounded by a border which is surrounded by margin. Together this is called the BOX MODEL.
  • colors can be specified in several ways, the easiest is with color keywords like red, green, salmon. For a list, see here.
  • background-color controls the, um…, background color, example: background-color: rebeccapurple
  • padding adds space between an element and it’s (optional) border, example: padding: 20px or padding: 2em
  • margin adds space around an element, example: margin: 15px or margin: 1em
  • borders can be added by specifying 3 properties:
    • border-width — example border-width: 10px
    • border-color — example border-color: papayawhip
    • border-style — example border-style: solid (or: dashed, groove, inset, and more…)
  • color controls the text color — it’s horribly named, just memorize it, example: color: red
  • font-size controls the font size, example: font-size: 20000px
  • font-family controls what we normally call the font. It takes a list of font-families in order of preference. The browser will use the first one installed on the users system. Example: font-family: BizarroLOL, Nope, Georgia, Times, serif

Useful Links:

Homework Plan:

  • 1 day creating new flash cards
  • 2 days reviewing all flash cards
  • 2 days CLI practice
  • 2 days touch-typing practice
  • 2 days Web practice
  • 1 day watch CCCS#10

Homework day 1

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

Homework day 2

  • watch CCCS#10
  • touch-typing practice
  • Web Homework #1

Homework day 3

  • review all flash cards
  • CLI Homework #2

Homework day 4

  • touch-typing practice
  • Web Homework #2

Flashcard Assignment

  • review your current stack of flashcards
  • make 2 new VIM flashcards for { and }
  • add 3 new REGEX flashcards for the 3 new regex concepts we learned this week
  • add 5 new HTML flashcards for the 5 new tags we learned: <div>, <span>, <table>, <tr>, <td>
  • make 9 new flashcards labeled CSS (don’t worry about what that means yet) for these styling concepts:
    • color
    • font-size
    • font-family
    • margin
    • padding
    • border-style, border-width, border-color (one card for all three is good)
    • background-color
    • em (the unit)
    • px (the unit)

CLI Homework #1

  • ssh into your home dir and make a new week12/ dir, then cd down into it
  • copy the file from /regex/ishmael.txt into the week12/ dir
  • cat out the file so you can see what’s in it
  • note, if you’re having trouble with any of these steps, try using regexr.com
  • pipe the file into perl (perl -pe 's/<search>/<replace>/<flags>') with a regex that changes every word that begins with a lowercase w into the word WOMBAT. Use the \b flag we learned this week at least (you might want to use all 3 new concepts). There should be 5 WOMBATS in the text after your replacement.
  • write a new regular expression that removes everything after the first word on each line
  • Extra Credit: ✨ write a new regex that removes everything after the SECOND word on each line
  • write a new regular expression that changes every 3-letter word to <3>
  • write a new regex that changes every capitalized word that is at least two letters long into ### — if you did it right, you should have SIX ### on your screen
  • change your regex from the last step so that the ### is prepended with the capital letter that started the word, so for instance, the text should start with C### me I###. and so forth…
  • Extra Credit: ✨ write a regex so that every capitalized word at least two letters long has it’s initial capital letter moved to the end of the word. So the text should start: allC me shmaelI. omeS, etc.
  • write a new regex that changes all the occurrences of the word I to ME — but be sure to avoid changing the beginning of words like It and Ishamel.
  • write a new regex that changes all words that are at least 9 characters long into: BIGSCARYWORD — there should be 4 of them.
  • write a new regex that removes all of the punctuation marks in the text.

CLI Homework #2

  • ssh into your home dir, then cd into the week12/ dir
  • type a command to barf to standard out the full path to the directory you’re currently in
  • redirect the output of the command from step 2 into a new file called here.txt
  • make a new empty file (without vim) called names.txt
  • use three commands (without vim, instead combine echo and the redirect which appends) to add 3 new lines to names.txt containing your first, middle and last name - be sure to capitalize the first letter of each
  • cat out your names.txt file and pipe it to perl with a regex that removes every letter EXCEPT the capital letters at the beginning of your name.
  • repeat step 6, but this time, redirect the output into a file called initials.txt
  • in one command, make a directory called sweet inside of the week12 dir, and another inside of that called path — all in one command
  • change directories down into the path/ folder you just made
  • from the path/ dir, use cat and a relative path to see the contents of the here.txt file you made in step 3.
  • print out your current working directory
  • repeat the last step, but this time append the output of the last command to the here.txt that you made in step 3 (hint: you’ll need to use a redirect and the relative path up to where that file is)
  • repeat step 10 — there should be two lines in the file now, with two different paths
  • make a new file in the path/ dir (where you currently are) using vim — give it 3 short lines. Save it as horse.txt
  • use cd and an ABSOLUTE PATH to move back to your week12/ dir in one shot.
  • from the week12/ dir, move the horse.txt file you made in step 13 into your current directory.
  • in one command, remove the sweet dir and the path dir inside of it.
  • use a single cat command and shell expansion to print out to standard out the contents of all of the files in your current directory
  • repeat step 18, but this time pipe the output through perl -pe and write a regular expression and replacement that causes every line to begin with <<< and end with >>>
  • repeat step 19, but this time redirect the output to a file called combined.txt
  • type a set of commands to see the first 3 lines only of combined.txt barfed to standard out
  • repeat the last step, but showing only the last 3 lines
  • Extra Credit: ✨ type a set of commands that will barf to standard out only the three lines containing your initials (they will be wrapped in <<< and >>>)
  • type a command that will print to standard out all of the recent bash commands you’ve executed
  • repeat the last step, but pipe to perl so that every instance of the command cat becomes kitty (Extra Credit: ✨first add something to your command to filter out all of the commands that don’t contain cat, so that every line ends up containing kitty)
  • type a command that makes a new file called dir-contents.txt that contains a listing of the contents of the current directory
  • repeat the last step, but this time name the file dir-contents-all.txt and have it also include HIDDEN files.
  • cat out the files from the previous two steps to make sure you got the correct content in them.
  • in one command, using shell expansion, delete just the two files you made in step 26 and 27
  • make a new bash variable called MOOD that contains your current mood (hint: check week 8 homework notes if you don’t remember)
  • echo out a string to standard out that says “I am feeling <MOOD>” — but use the variable you created instead of typing <mood> so that it prints something like I am feeling silly

Web Homework #1

  • ssh into your home dir, then cd into your www dir
  • make a new dir called week12 inside of www (this is different from the dir for the CLI homework, since this is also inside of www)
  • cd into your www/week12 dir, then copy all the files from /www-assets into your current working dir
  • now, copy your local copy of boilerplate.html into a new file called whacky.html and open that new file to edit it in vim.
  • write some HTML and some random text, you must use ALL of the following tags:
    • <h1>
    • <h2>
    • <p>
    • <div>
    • <ul>
    • <li>
    • <img>
    • <span>
    • <i>
    • <b>
  • view your page in a browser at: http://<yourname>.howtocomputer.link/week12/whacky.html
  • now, use ALL of the below listed styling concepts at least once to make your webpage look hideously whacky:
    • color
    • font-size
    • font-family
    • border-width, border-style, border-color
    • margin
    • padding
    • background-color
  • now, figure out one HTML element that has a default display value of block, and change it to inline
  • now, figure out one HTML element that has a default display value of inline, and change it to block
  • share the link to your whacky page in slack so we can all see it!

Web Homework #2

  • ssh into your home dir, then cd down into www/week12
  • make another copy of boilerplate.html saving it as table.html
  • make a table displaying data about 5 quaker books, here’s the data: (Title, Author, edition, pages, and price)
    • Walk in the Spirit, Hugh Turford, updated, 122, \$4.99
    • Journal of George Fox, George Fox, original, 1322, \$15.34
    • Saved to the Uttermost, Robert Barclay, updated, 288, \$6.34
    • Letter to a Backslidden Brother, Catherine Payton, modernized, 17, \$1.43
  • add a row on top of the table labeling what the 5 columns are
  • add some styling to the top row so it looks different than the rows containing the book data
  • add a header above the table describing what it is
  • add a <p> tag below the table encouraging people to check out the books, and have part of your sentence be a link to the MSF early quakers page, the URL is https://www.marketstreetfellowship.com/early-quakers/
  • add an image of a goat at the bottom of the page
  • make a stylish border around the goat image using style tags
  • style at least 5 other tags to make the whole page look super nifty
  • share your link in slack so we can see your web page!
← All homework