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 soni_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.

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.