Tools Installation Hack

Objective: Understand the basics of setting up a development environment and the tools required.

Shell Commands

  • Take note and describe the type of shell commands you are using through Terminal in this installation procedure. This is specific to your machine.
    • Examples: wsl, cd, git, apt, brew, etc.

Version Control

  • In the development process, developers use version control. Annotate in your notes what you have learned about version control during this setup process.
    • How are the files from GitHub placed on your local machine? How do you navigate to those files?
    • How are the files updated in GitHub? How do you navigate to those files?
    • How would you update your template of the student_2025 repository? How would you make it more applicable to your specific course?

Localhost vs. Deployed Server

  • Put into words the difference between viewing GitHub Pages running on your localhost machine versus running on a deployed server.
    • What is the localhost URL for your project? Can anyone else see what you see?
    • What is the GitHub Pages URL for your project? Can anyone else see what you see?

DNS and GitHub Pages

  • DNS is the address manager for the internet. Reflect on the following questions:
    • Is there a domain on your GitHub Pages?
    • Is the URL for your GitHub Pages different from your neighbors’ URLs? Did you change the URL? If so, when?

Prepare for Pair Showcase (GitHub)

By answering question in this section of hacks you will gain a deeper understanding of the tools and processes involved in setting up and managing a development environment, version control, and deploying a website.

Prepare a 1-2 minute summary on the questions related to tools.

While installing dependencies and tools, I used apt, which is a command used for managing packages, pip, which is a command from python that is used for installing python modules, cd to change directories and move around my computer, git to clone repositories and later to push and pull changes and set my user email and username, and ls to verify the existence of certain folders, and make sure I am not missing anything.

Q: How are the files from GitHub placed on your local machine? How do you navigate to those files?

A: The files from github were cloned from the student_2025 or portfolio_2025 repositories using the git clone command. I can navigate to those files using cd to change directories into the one where I cloned those files.

Q: How are the files updated in GitHub? How do you navigate to those files?

A: Files are updated by committing changes and later pushing those changes. I can navigate to those files on the github page itself when I access the repository that the changes were pushed to.

Q: How would you update your template of the student_2025 repository? How would you make it more applicable to your specific course?

A: I would change the files to make it more personalized, including changing to a theme that better fits me, adding content to my home page, and rearranging things like navbars. I could then commit and push those changes. I could make it more applicable to my course by making it easier to access course-specific content, filling out hacks like I am doing now, or adding images and personalization that fits the subject matter of the course.

Q: What is the difference between viewing GitHub Pages on your localhost machine versus running on a deployed server?

A: A page on localhost is only accessible to me through the link http://localhost:4100 in my case. This port can be changed though. Github pages has a static URL that anyone on the internet can access, and usually looks something like https://7mwang.github.io/matthew-wang_2025.

Q: What is the localhost URL for your project? Can anyone else see what you see?

A: The localhost URL as stated before is something along the lines of http://localhost:PORT, PORT being most 4 digit numbers. In my case, my port is 4100. Nobody else on the internet can see what I am doing on localhost.

Q: What is the GitHub Pages URL for your project? Can anyone else see what you see?

A: My personal github pages URL for this project is https://7mwang.github.io/matthew-wang_2025. After I commit my changes, it is possible for everybody to see the content that I have added to this project.

Q: Is there a domain on your GitHub Pages?

A: Yes. The domain is something like .github.io.

Q: Is the URL for your GitHub Pages different from your neighbors’ URLs? Did you change the URL? If so, when?

A: Yes. The URL contains my personal repository name, and most importantly my username. I did change the URL by changing my repository name, which changes how you access the site.

Tools Verification Hacks

Objective: Verify that the tools installed are working correctly, and each student can demonstrate an understanding of basic usage.

Verify Installation

It is important that you resolve tool issues immediately. These are the foundations for 24 weeks for CSSE and 36 weeks for CSP and CSA.

  • Check Tool Functionality: Ensure the tools installed in Tools Setup are working correctly using the provided scripts and outputs.
  • Run Basic Commands: Execute basic commands for each tool from the terminal (e.g., git --version, ruby --version, python --version, etc.).
  • Document Issues and Resolutions: Record any issues encountered and the strategies and verifications you performed to resolve them.

Prepare for Pair Showcase (Tool Verification)

Develop a student view to verify tool installation with the Teacher. You and your pair should share the same validation procedures, but each individual needs to show those procedures running on their personal hardware environment.

  • Verification Discussion: Be prepared to discuss outputs from shell scripts during verification.
  • Comment Code Cells: Add comments to code cells to remember and discuss how these verifications work.
  • Live Reviews: Live reviews are subject to Teacher opinion unless you show indisputable command through vocabulary and technical accuracy.

GitHub Usage with VSCode

During the tools and installation process, you are expected to become familiar with VSCode to GitHub operations. By the end of this project, it is expected that you will have a minimum of 5 significant commits.

Perform Basic Operations with GitHub Integration in VSCode

Use GitHub with VSCode frequently. Lots of small, iterative commits are recommended.

  • Commit: Save changes to your local repository.
  • VSCode Sync (Push): Upload your local commits to the remote repository on GitHub.
  • Pull: Download changes from the remote repository to your local repository.

Prepare for Pair Showcase (GitHub)

Prepare a 1-minute summary on GitHub Usage. This should focus on GitLens VSCode extension and an interactive overview of the pair’s history.

  • Show Commits: Display the history of changes made to the repository using GitLens->Commits.
  • Show Contributors: Highlight the individuals who have contributed to the repository using GitLens->Contributors.

Brief Definitions

  • Git: A distributed version control system that allows multiple developers to work on a project simultaneously without overwriting each other’s changes.
  • GitLens: A powerful extension for VSCode that provides insights into Git repositories. It helps visualize code authorship, track changes, and understand the history and evolution of a codebase.

By completing these tasks, you will ensure that your development environment is correctly set up and that you are proficient in using essential tools and GitHub integration.

Prepare a 2 minute summary on Tools Verification and GitHub usage accomplishments.

Tool Play with JavaScript

Objective: Use your tools installation to learn JavaScript, create dynamic web content, and understand that there are many ways to solve the same problem (coding styles).

JavaScript Ideation

Using ideas and hints from the Tool Play lesson, start the ideation process in Jupyter Notebooks to define your future index.md home page.

Ideation in the course starts in Jupyter Notebooks. Follow these steps:

  1. Create an HTML File: Start with an HTML file that includes a container element.
  2. Enhance with CSS: Use CSS to style your HTML elements.
  3. Modify with JavaScript: Use JavaScript to dynamically modify content within the HTML container.

Vocabulary Note: Modifying an HTML container is often referred to as modifying the DOM (Document Object Model). The term “DOM” will be used frequently in the course and is associated with the “document.” prefix used in commands like document.createElement.

Update index.md Home Page

Transition from ideation to designing your own home pages. As you work with your pair, you should learn similar coding styles, but your end product should be unique.

  1. Integrate JavaScript: Incorporate your JavaScript code into your GitHub Pages project.
  2. Verify Display: Ensure that the dynamic content is displayed correctly on both localhost and the deployed server.
  3. Document Challenges: Blog about any challenges faced and how you overcame them.

Prepare a 2-Minute Summary on Your index.md

  1. Demo the Pages: Show the live pages on both localhost and the deployed server.
  2. Show the Code: Walk through the JavaScript code that modifies the DOM.
  3. Jupyter Ideation Process: Explain the ideation process documented in your Jupyter Notebooks.
  4. Coding Style Question: Be prepared to answer the question, “How could you use another coding style to change your loop?” For example, if you used a for loop, explain how you could use forEach or another iteration method.

By completing these “Hacks,” you will gain a deeper understanding of the tools and processes involved in setting up and managing a development environment, verifying tool installations, and applying JavaScript to create dynamic web content.

Prepare a 2-minute summary on your Home Page coding accomplishments.