Page: 1/9

HW01: vi, first web page, number

representations
v0.03 - 2018-02-07 ​Student name and uniqueid: Zheyu Ai aiz2

Introduction
Homework assignments have several purposes:
1. To teach new content that we didn’t have time to cover in lecture or lab, or which doesn’t
fit those formats well
2. To review the previous week’s lecture and lab, and to practice the skills from those
3. To go deeper and to force you to problem-solve using things you have learned in class
4. To prepare you for the following week’s lecture and/or lab

This assignment is expected to take about 3.5 total hours.

Reminders​:
1. This is an independent assignment. If you get stuck you may get help from the professor,
teaching assistants, or fellow students but you must do all the actual submitted work
yourself.
2. Homework assignments are graded for quality of answers, not for process.
3. I recommend making a copy of this document (in Google docs, “File -> Make a copy”),
typing in your answers with ​yellow highlighting​, and then saving the result as a PDF for
submission.
4. Please record time spent on each section, in the blanks provided. Because this is the
first time using this assignment the amount of work we have given you may be way off …
either too easy or too hard. Filling in the blanks will help us tune future assignments.

Part 1: Lab Homework

1.I. Introduction ​Time

spent:____20____
One of the most important skills for a productive developer is ​text editing​. In the CLI_1 lab we
discussed the fact that command-line interfaces typically require more learning and practice,
while GUI interfaces are often more user-friendly, but can slow you down. Nowhere is this more
true than in text editing.
 Page: 2/9
HW01: vi, first web page, number
representations
v0.03 - 2018-02-07 ​Student name and uniqueid: Zheyu Ai aiz2
Effective text editing requires two main skills: ​touch typing​ and ​effective use of shortcut
keys​. Shortcut keys are used for navigation, cut and paste, common operations on files, and so
on. In a typical GUI text editor these functions are often collected into menus, navigated using
the mouse. The most efficient developers (whether programmers, writers, web designers, data
analysis, or whatever) typically touch the mouse very little, instead learning and memorizing
shortcut keys.

In this assignment your goal is to start learning a particular editor, ​vi​. There are many great text
editors (vi, emacs, Sublime Text, Notepad++, Atom), and our choice of vi is mostly arbitrary. We
selected it because 1) it comes standard with almost every UNIX/Linux system, and 2) it is the
default text editor for many other UNIX/Linux applications. It is a typical experience that when
something goes wrong in Linux/UNIX you end up in vi … knowing how to navigate it and get out
is an important skill all of its own, even if you end up abandoning vi for another editor some day.

vi is so popular that there are plugins for many other IDEs and text editors that allow you to use
vi shortcut keys. For example, ​http://vrapper.sourceforge.net/home/​ allows you to use vi
shortcuts in Eclipse.

1.II. Learn a bit of vi ​[22 pts] ​Time

spent:____40_____
To start out, let’s learn the basics of text navigation and editing in vi. We will be using a service
called shortcutFoo to practice vi shortcut keys.

Use ​https://www.shortcutfoo.com/register/JspniYyWLyBVKmjEiMj5Ng​ to create your free

account. Then go to the “Dojos” page and select the “vim” dojo. (Because vi wasn’t originally
freely available, many clones of it appeared, and ​vim​ is the most popular version on Linux.)

You should see a green button that says “Learn.” Click the button, and the app will start
teaching you the Beginner Text Navigation lesson. After you have learned the commands, you
can use the “Practice” and “Fight” buttons to practice them until you are confident. Then, when
you are ready, select the “Test” button to take the test on those commands.

1. ​[20 pts] ​Learn the commands and pass the tests for both “Beginner Text Navigation” and
“Beginner Text Editing.” After doing so, print the vim dojo page as a PDF for submission with
your homework to prove that you completed the first two lessons successfully.
 Page: 3/9
HW01: vi, first web page, number
representations
v0.03 - 2018-02-07 ​Student name and uniqueid: Zheyu Ai aiz2
Hint: ​If you are not a master of typing on the keyboard, I suggest you look for patterns of the keys. Have
your left hand (middle fingers) reach for the keys on the left hemisphere of the keyboard; likewise, do that
with the commands that involve the keys on the right region of the keyboard. See the following picture for
some examples:

No answer needed here. Instead, submit your PDF with your earned badges through Canvas.

2. ​[2 pts] ​What key do you press to start inserting text at the cursor? What key do you press to
exit editing mode and get back into command mode?
<ESC>

1.III. Hello World, HTML edition ​[12 pts] ​ ​Time spent:_________

Throughout the semester we will have you submit work by editing your personal web page. In
this lesson we will create the initial web page (the index.html) and then set up password
protection so that your work won’t be visible to the public.
 Page: 4/9
HW01: vi, first web page, number
representations
v0.03 - 2018-02-07 ​Student name and uniqueid: Zheyu Ai aiz2
The first step is to log into our class server, just as you did in the CLI_1 lab. Then change
directories into your public_html directory.

Use the command ​touch index.html​ to create the index.html file. This is the “main” or “default”
web page. You may already have an index.html file from the CLI_1 lab.

Next, open index.html using vi. You do this by typing ​vi index.html​ at the command prompt.
Then type in the following code using vi (keep in mind what you learned in ShortcutFoo!).

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

<HTML>
<HEAD>
<TITLE>
CSE 102 - Fall 2017 - Section ​A​ - ​gomezlin​ - ​Iris Gomez
</TITLE>
</HEAD>
<BODY>
<H1>CSE 102 - Fall 2017 - Section ​A​ - ​gomezlin​ - ​Iris Gomez​</H1>
<P>This is ​Iris Gomez​'s homework portfolio for CSE 102.</P>
</BODY>
</HTML>

Be sure to modify the parts that are in bold to contain your correct personal information.

When you are done typing it in, be sure you are back in command mode, then type ​:wq​ to save
the file and exit vi. (If you ever want to exit without saving, you can do ​:q!​)

Go back to your homepage URL (which we learned about in the CLI_1 lab) in a web browser. It
should look something like this:

If not, reopen your file in vi and check it very carefully. Even a single seemingly insignificant typo
can cause massive mistakes in rendering your web page.
 Page: 5/9
HW01: vi, first web page, number
representations
v0.03 - 2018-02-07 ​Student name and uniqueid: Zheyu Ai aiz2

1.IV. Password protecting page ​[12 pts] ​Time

spent:____40_____
We don’t want random people to be able to view your homework portfolio without permission, so
we will use the ​.htaccess​ file to set a password, which you will then share with us so we can
grade your work.

First, navigate to your public_html folder on the server. Then use the command ​touch
.htaccess​ to create the file. Notice that the first character of the file name is a period. This is
very important: In UNIX/Linux systems files that start with a period are hidden from most shell
commands (such as ls). In fact, try using the ​ls​ command, and notice that the .htaccess file that
you just created isn’t listed.

3. ​[2 pts] ​Using either the UNIX cheat-sheets from the CLI_1 lab or a search of the WWW,
determine how to use ls to list all files in a directory, including the hidden ones. Write down the
command here:
Cat listing.txt

Next, we will create a password for the instructor and TA to use to log into your site. Change
directories so that you are in your public_html directory, then execute the following command:

htpasswd -c ../.htpasswd cse102

Be very careful to get it exactly right! Capitalization, spacing, and the right number of periods
are all important. This shell command will ask you to come up with a password and type it in
twice. DO NOT USE YOUR MIAMI PASSWORD. Make up something new. Then use the
following Google form to submit it to us: ​https://goo.gl/forms/dPlQjClmbl5MiC4x1
If you ever change your portfolio password in the future you will need to use this form to update
us.

[6 pts]​ Password submitted correctly, we are able to log in using the password, but not able to
login without the password.
 Page: 6/9
HW01: vi, first web page, number
representations
v0.03 - 2018-02-07 ​Student name and uniqueid: Zheyu Ai aiz2
The htpasswd program creates a password file that contains a list of usernames and encrypted
passwords. Using what you learned in step 2 about listing hidden files, check and see if there is
a file called .htpasswd in your home directory. Use ​cat ~/.htpasswd​ to print out the contents.

4. ​[2 pts] ​Which part is the username, which part is the password, and what symbol is used to
separate them?
cse102:$apr1$ZCJ6c/Af$js7CzrF/9ULsyH8dY6dRJ0

Next, use vi to open your ~/public_html/.htaccess file. Edit it so that it contains the following:

AuthType Basic
AuthName "Password Protected Area"
AuthUserFile "/home/​gomezlin​/.htpasswd"
Require user cse102

Again, spelling, capitalization, quote marks, and periods are all very important. Type this
carefully, and be sure to change the bold part to be your uniqueid.

Now go back to your web page in a web browser and refresh it. It should ask you for a
username and password. Use ​cse102​ as the username, and use the password that you just
created as the password.
 Page: 7/9
HW01: vi, first web page, number
representations
v0.03 - 2018-02-07 ​Student name and uniqueid: Zheyu Ai aiz2
5. ​[2 pts] ​What happens if you type the password or username incorrectly? What happens if
you select “cancel” instead of “log in” when the password blanks appear? You may need to use
an incognito window in your browser, because your login credentials may be cached once you
have typed them in once (check at the end of this file the ​how to​ section for more details).
Shows error when I type incorrectly.

Part 2: Lecture Homework

2.I. Introduction
By now you should understand the basics of binary. In this section we will have you to practice
your knowledge of this topic.

2.II. Number systems practice ​[24 pts] ​ ​Time

spent:_____20____
6. Fill in the empty blanks in the table (the first row is done for you). Do the computations by
hand, because you will need to do them by hand on exams, and this will help you practice.

binary decimal

0b10010 (is the same as 100102 ) 18 (is the same as 1810 )

0b110111 55

0b11111 31

0b100001 33

0b100000000 256

0b101010 42

0b01100101 101
 Page: 8/9
HW01: vi, first web page, number
representations
v0.03 - 2018-02-07 ​Student name and uniqueid: Zheyu Ai aiz2

Deliverables
You should submit the following electronically via Canvas, as PDF files:
1. The ShortcutFoo printout showing that you completed the first two lessons
2. The answers to the questions in this assignment, typed into this document, with ​yellow
highlighting​. Be sure you added your name and uniqueid in the header. Use the “File ->
Download as” menu to download as a PDF and then upload that PDF to Canvas.
You must also:
1. Submit your portfolio password using the Google Form provided above
2. Have your index.html formatted as specified in this lab, including your personal info.

How to​ Section

This section is created to supplement the material of this homework for clarification.

To open an incognito browser follow the recommendations below:

1.- Chrome: go to Chrome taskbar and select “File”, then click “New Incognito Window”.
2.- IExplorer: go to IExplorer taskbar and select “Safety”, then click “InPrivate Browsing”.
3.- Firefox: go to Firefox taskbar and select “Tools”, then click “Start Private Browsing”.
4.- Safari: go to Safari taskbar and select “File”, then click “New Private Window”.

This set of instructions might slightly change according to most recent or older browser versions;
however, the principle should be the same.
 Page: 9/9
HW01: vi, first web page, number
representations
v0.03 - 2018-02-07 ​Student name and uniqueid: Zheyu Ai aiz2