Week 1: Markdown, URLs, Paths, and the File System (2023)

Expiration Dates and Links

• Welcome survey (quiz part 1)- Expires Wednesday, April 5, 2023 at 1pm. M. (just before class)
• Lab report 1- Expires at 22:00 on Monday, April 10, 2023
• Quiz 1 (will be posted on Monday after class)- Expires Wednesday, April 5, 2023 at 1pm. M. (just before class)

class materials

• Flyer Montagsvorlesung (PDF)
• Monday Keynote Handout (Google Slides)
• Wednesday Lecture Flyer (PDF)
• Wednesday Keynote Handout (Google Slides)

class notes

Links to the podcast

To use:Links require you to log in as a UCSD student

• 13:00 Excerpt - A00
• 14:00 section - B00

• About Git
• GitHub
• Pages Github Pages
• Github office
• sell cheat sheets
• What is Markdown?
• git(You don't necessarily need to install this just for your computer, but here is the link to the underlying toolgit. It is included in Github Desktop).
• Visual Studio-Code

key definitions

• Git-RepositoryName– A folder that keeps track of the edit history of your files
• Github-RepositoryName: An online Git repository, eg. B. a Google Drive folder with history
• Github pages: a service that takes a github repository and builds a website from it (usually based on conventions likeindex.md)
• Reduction: A way to write plain text files with some formatting
• commit: a series of changes to one or more files in a repository. The history of a repository consists of commits.
• Clone: A Git action to copy a repository from one place to another (usually from somewhere like Github to our machine). Copy the contents of the folder.jthe whole story, the whole repository.
• git cometer: a Git action to take some changes we've made to files and turn them into a commit in the repository history
• git push: A Git action to send commits from one place to another (usually from our computer to Github)

video demos

lab assignments

In this lab, you will create a professional website to post your lab reports for the course. Please contact the teacher (jpolitz@eng.ucsd.edu) if you don't want to publish a public website, even under a pseudonym, for security or privacy reasons.

Part 1: Know Your Group!

We divided into groups of 6 to 8 students for discussion. In week 1, you can sit where you want and choose who you want to work with. From the 2nd week we will have allocated places and groups. These groups will remain fairly stable throughout the quarter, although some small changes may occur. You have a tutor or TA assigned to your group for help and discussion.

Your moderator (the tutor/TA in your lab) shares a Google Doc with your group so you can take notes as you work; This document is for your group only. your discussion leaderNOtake notes You can ask someone to volunteer to take notes or find a way to share the role.

write in notes: In your groups, share and comment on the document with notes in progress (discussion leaders, reply to this too!):

• How would you like others to refer to you (pronounce your name/nickname, pronouns like he/she/it, etc.)
• your specialty
• One of:
  • A UCSD student organization you are a member of or interested in
  • Your favorite spot you've found on campus so far
  • A useful campus shortcut or trick you know
• Your answer to the following question. Discuss why you chose this answer.

Part 2: Your CSE15L account

Find your specific course account for CSE15L here:

https://sdacs.ucsd.edu/~icc/index.php

Here is a guide on how to reset your password:[TUTORIAL] How to reset your CSE 15L password

Follow the on-screen instructions very carefully! Have someone watch you if you feel it isn't working.

After restarting and waiting a few minutes for it to take effect, you can start working on later sections of the lab.

Chapter 3: Visual Studio-Code

(If for some reason you can't or don't want to use your own computer, you can skip the installation step and just open VScode on one of the lab computers. You can do all your lab work on computers every quarter, no personal laptop setup required).

Go to the Visual Studio Code websitehttps://code.visualstudio.com/and follow the instructions to download and install it on your computer. There are versions for all major operating systems, including macOS (for Mac) and Windows (for PC).

After installation, you should be able to open a window similar to this one (it may have different colors or menu bar depending on your system and configuration):

write in notes: Everyone must share a screenshot of the open VScode; Help people find out if it won't install. If anyone gets stuck, please take a screenshot of the error message or where you are stuck so we can help you figure it out later and you can decide whether to keep trying (possibly with the tutor's help) or move on.

Part 4: Remote Connection

15 minutes in your group

To use: If you see light gray code in this section, it indicates that the block of code is running atRemote ControlServer. For example:

$ this is a remote server command

$ This is a command on your own computer

Many CSE courses use course-specific accounts. They are similar to accounts you might get on other systems at other institutions (or in future employment). We'll see how to use VScode/terminal to connect to a remote computer over the internet to work there.

There is a necessary first step if you are using Windows: Installgitfor Windows, which includes some useful tools we need:

Git for Windows

Once installed, use the steps in this post to set your default terminal to use the newly installed one.git bashim Visual Studio-Code:

Usando o Bash no Windows no VScode

So to usesch, open a terminal in VScode. (Ctrl or Cmd + `, or use the Terminal → New Terminal menu option.) Your command will look like this, but with thezzreplaced by the letters in your course-specific account.

$ ssh cs15lsp23zz@ieng6.ucsd.edu

(That's one, five, l (lowercase L, not one); the one and the l are very similar in some fonts. And remember, when we write thesep.s, this is not for you to write! It's just a convention of how we type the commands.)

As this is probably the first time you are connecting to this server, you will likely get a message like this:

⤇ ssh cs15lsp23zz@ieng6.ucsd.edu Unable to determine authenticity of host "ieng6.ucsd.edu (128.54.70.227)". The RSA key fingerprint is SHA256:ksruYwhnYH+sySHnHAtLUHngrPEyZTDl/1x99wUQcec. Are you sure you want to continue the connection? (yes/no/[fingerprint])?

I (Joe) always assert these messages when I connect to a new server for the first time; If so, you will most likely receive this message. If you get this message when connecting to a server you are connecting tooften, it could mean that someone is trying to spy on or control the connection. This answer is a decent description of what's going on:In response to Ben Voigt

so writeEand press Enter and enter your password; The general interaction should look like this after you enter your password and log in:

# Unable to authenticate to your client⤇ ssh cs15lsp23zz@ieng6.ucsd.edu host 'ieng6-202.ucsd.edu (128.54.70.227)'. The RSA key fingerprint is SHA256:ksruYwhnYH+sySHnHAtLUHngrPEyZTDl/1x99wUQcec. Are you sure you want to continue the connection (yes/no/[fingerprint])? Password:

# Now on remote server Last Login: Sun Jan 2 14:03:05 2022 from 107-217-10-235.lightspeed.sndgca.sbcglobal.netquota: No filesystem specified. Hello cs15lsp23zz, You are currently connected to ieng6-203.ucsd .edu You are using 0% CPU on this system Cluster Status Hostname Time Number of Users Average Utilization ieng6-201 23:25:01 0 0,08, 0, 17, 0.11 ieng6-202 23:25:01 1 0.09, 0.15, 0.11ieng6-203 23:25:01 1 0.08, 0.15, 0.11 Sun Jan 02 2022 23:28 - preparing cs15lsp23

Your terminal is now connected to a computer in the CSE basement and all commands you run will be executed on that computer! We call it your computerClientand the computer in the basementserverdepending on how you are connected.

If you find errors and don't know what to do, just ask! When prompted, take a screenshot of your issue and add it to your group's performance notes document. Then describe what the solution was. If you don't know how to take a screenshot, just ask!

remember - it isstrangefor a tutorial to work perfectly. Many times we have to stop, think, guess, google, ask someone, etc. for things to work as the tutorial says. I'm looking for the right way to describe this(But)B. Always reply on first login. So you help your group.Get information about possible problemsif so, and this is an important learning outcome of the course! If you see someone having a problem that you didn't, ask why and what might be different from what you were doing or how your environment is set up. You will learn by thinking about it.

write in notes: When you're done,to speakwhat you saw when you signed up. Take a screenshot or copy and paste the output. Did everyone see the same thing? What could the differences mean? Record the results of your discussion in the notes document.

Part 5: Run some commands

Try to run the commandsCD,ls,disabled people,mkdir, jc.p.sometimes in different ways, both inyour computer, E noremote computerafter ssh-ing (use terminal in VScode). Discuss what you see with your group. Can you get them to generate error messages? What do you mean? If you use Windows, what happens if you use them on Windows?

Here are some specific useful commands to try:

• CD ~
• CD
• ls page
• ls-a
• ls <directory>Wo<directory>es/inicio/linux/ieng6/cs15lsp23/cs15lsp23abc, Where is hea BCis the username of one of the other group members
• cp /home/linux/ieng6/cs15lsp23/public/hola.txt ~/
• gato /home/linux/ieng6/cs15lsp23/public/hola.txt

write in notes: Copy at least one example from each group member into your shared notes document with an explanation.

Tip: To exit the remote server in your terminal you can use:

• Ctrl-D
• run the commandsalida

You can also open more terminals in VSCode (there's a little + button at the top of the terminal window that you can use to create another one).

Part 6: Git, Github and Github Pages

Having a professional portfolio website to yourself can help in many ways. It's a useful URL to put at the top of your resume where potential employers can learn more about you. A lot of CS's great work is only posted on someone's personal page, or at least it's more accessible there. Most CS teachers have this page (just some examples againCSE teachers), for example.

Keeping a journal and recording what you've learned is also a powerful tool. Writing what we did and how we did it for audiences (real or imagined) beyond ourselves forces us to confront persistent misunderstandings and consolidates what we learn in our memory. It's also useful for jogging your memory later!

For these reasons, we'll spend the rest of this lab creating a personal page and learning how to write a blog post about what we've learned.

Github (https://www.github.com) is a web service for storing and sharing code, along with a variety of services related to that code. It uses a tool and protocol calledgit https://git-scm.com/to store and retrieve this code. Github pageshttps://pages.github.com/is one of the services that Github provides to publish personal and project websites from your Github account.

This lab is a basic introduction to all of that. We'll learn to use them in more detail throughout the quarter; Learning all that Git, Github or Github Pages has to offer can take months of practice!

Part 7: Building a website with Github Pages

In this section, you'll learn how to create a website with Github pages to use in your lab reports.

Below are written instructions with screenshots to follow, as well as a video version:

Create an account on Github

Becomeshttps://www.github.comand create an account:

(If you already have an account, choose to use it or create a new one for this course.)

You can choose any username for the account; It doesn't have to be related to your official or preferred name, although it can and often is. Some people choose names related to their name like me (my github account ispolished). Others choose more abstract or whimsical names for their accounts, just like usernames on any other service. Feel free to do whatever feels right to you, and you can always do it anyway.change later.

create a repository

After creating your account, weCreate a new repositoryfor github. BLACKRepositoryis a folder or directory with an associated history of changes made to files within it. In that sense, a repository on Github has some similarities to a folder on Google Drive; The differences are mainly in the control we gain from managing this history of changes.

name the repositorycse15l-lab-informes(In my screenshot it looks like the name was taken off because I made it before taking the screenshot - it will turn green and that's fine with you.) Leave the other settings as they are and click "Create Repository" below.

You should see a screen like this (but with your username):

Click the "Create a new file" link (small, blue, below the "Set up on desktop" button). Create a new file calledindex.md, and write some text in it (whatever you want).

Scroll to the bottom of the page and click Commit New File. You should see a view of your repository now listing a file calledindex.md.

They have a public github repository with some text! You can copy the link from your browser and send it to your friends and family for them to see!

Create a page website

Then click "Settings" at the top of your repository and select the "Pages" option in the sidebar:

To choosedirectoras source for Github Pages and click Save.

It says "Saved GitHub Pages Source" at the top. Wait and refresh the page. Eventually you will see a message that says "Your site is active on<URL yesterday>.” (This may take a few minutes!) Click the link displayed there; First it shows that the page was not found. Wait a few minutes and refresh the page. You should then see the typed text on a page like this:

Note that in addition to viewing your file in, for example,https://jpolitz.github.io/cse-15l-lab-informe/, you can also see it withindex.htmladded at the end of the url:https://jpolitz.github.io/cse-15l-lab-report/index.html(Tent!).

Do it now!Add another file to your repository with a name of your choosing, but end with the extension.Maryland. Can you use this idea to visualize this file?

discount edition

AND.MarylandThe extension stands for "Markdown", a specific text format used for writing. There are many good documents on the internet. A good cheat sheet and explanation is here:

• cheat sheet
• What is Markdown?

Flip through the two documents and try using some of the items described in the cheat sheet on yourindex.mdFile. How do some of the different formatting options appear when you use them? they are amazing

Now you must have:

• A repository with at least two files (index.mdand another one you made up)
• One of these files uses all sorts of basic Markdown syntax
• A page that displays the rendered version of your Markdown text at a public URL

applauseNow you know how to create a public (simple) website with a simple layout! You can share your page link with anyone in the world who has an internet connection and they can view your page.

(Fun fact:the page you are reading nowis written in Markdown and uses Github Pages!)

before you go

Go ahead and fill out this Google form before you go, it will help us create next week's seating plan.Link to Google form

Lab Report 1: Remote Access and File System (Week 1)

You submit a lab report by writing a blog post about remote access, as just described using the Github Pages. The lab report is due on Monday, April 10th at 10:00 pm. M. Check out the FAQ below for frequently asked questions, including information on adding images and uploading images to Gradescope.

You will write a tutorial for new 15L students (and for you in the future!) on how to log into a course-specific accountIng.6. Your post should include all the steps you've taken, along with screenshots of each step. You can use the screenshots you took for Lab 1 or your new ones. Complete the steps you didn't complete alone in your group.

In general, make sure you have at least 3 screenshots, one for each of the steps below (although more will be helpful, remember this will help you in the future). For each step, include at least 2-3 sentences or bullet points that describe what you did. If for some reason you didn't do the step exactly, please describe why not (maybe your computer already has something on it, maybe the department's computers work differently, etc.).

• Instalar VScode
• remote connection
• try some commands

You must complete the action.alone. Feel free to ask someone for help (staff or other students are fine!) if you have trouble setting up remote access, understanding commands, displaying your texts on Github pages, etc. But don't let anyone help you. about preparing the report itself: the text and screenshotshe mustBe yourself.

Upload your submission by publishing the page to Github Pages, print the page in PDF format, and upload it to the Lab Report 1 task in Gradescope.

Frequently asked questions about shipping

Do I need to upload the Google doc we used during the lab session for this lab report assignment?

No, this custom lab submission is about the screenshot tutorial that you will place on your own Github pages.

You don't need to upload the shared notes anywhere in Google Doc.

How do I add images/screenshots to my lab report?

In your repository, click the Add File button and then click Upload Files. Upload desired screenshots from your computer. Then in the .md file you created for lab report 1 you can add the images using![image](imagename.png)Syntax as described in the Markdown cheat sheet link above. SubstituteImagename.pngwith the name of your image in your repository. For example I have the following screenshotdog.jpgin my repository so I can paste this screenshot by typing![image](dog.jpg)in my lab1.md file.

How do I submit my Github Pages site to Gradescope?

Visit your Github Pages site with your tutorial in a browser (Safari, Chrome, Brave, Firefox, Edge, etc.) and use "Print" to save it as a PDF. Then upload the PDF file to the Lab Report 1: Remote Access and File System task in Gradescope. For example, if the Github Pages site contains the linkhttps://pandrew99.github.io/cse15l-lab-reports-exampleand you named your lab report 1 .md filelaboratorio1.md, you would access it by addinglabor1.htmlnot end like:https://pandrew99.github.io/cse15l-lab-reports-example/lab1.html. The format of the PDF file you upload should look like this:

How should I combine pages with questions when submitting them to Gradescope?

You must match every page of your lab report to the question called "Score". This makes it easier for us to evaluate your lab reports and provide you with feedback more quickly.

Can I use screenshots from the lab document we worked on together?

Safe! If they're any of your business, fine. If you didn't get yoursschLog in to complete all these steps, do not share screenshots from another user, instead describe where you get stuck and attach a screenshot of what is not working.