Week 0 HACKS | Tools and DevOps

**Tools and DevOps**

Tools and Equipment Overview

Hacks

Review all the items mentioned above and get started with setup. Try to understand the concepts behind these tools and seek clarification when needed. Each student needs to take the setup process seriously and should highlight that consistent access to the necessary tools is essential for active participation in the class.

  • [ x ] Bring your computer daily. If you don’t have computer and tools access, you are effectually absent!!!
  • [ x ] Review material on tools, draw a picture. Installing tools can be a bit of a process. Read, review, and get started. After you do it a little, it starts to become easy.
  • [ x ] Blog why you love your tools. Do not fear your tools, love your tools’. Then you become familiar and proficient in using your tools, they become extensions of your abilities and empower you to accomplish Code/Code/Coding tasks more efficiently.

Jupyter Notebook helps you learn and show things in a nice way. Visual Studio Code helps you write code without trouble. Linux lets you explore and use your computer freely. Homebrew helps you get new things on your computer quickly. Java helps you create many cool programs. These tools make everything wayyy easier instead of doing things from scratch. The more I use my tools and the more I explore my tools the faster I am to do things and install and learn more.

  • [ x ] Add yourself to Users Database. We need you registered so we know how to support you best. This registration will be used for automation now and through the year.

IMG_312C51D8BBD0-1

VSCode, GitHub Pages Setup

  • [ x ] Create a personal repository. Teacher suggestion is to use Template to create your own repository.

Hacks

Installation Hack It is fundamental that you learn how to make your own blogging Website and make sure you begin your understanding of the following.

  • [ x ] Take note and describe the type of shell commands that you are using through Terminal in this installation procedure.
    • [ x ] wsl, cd, git, apt, brew, …

make: one of the five codes needed in mort’s fastpages blog

cd: The cd command stands for “change directory.” It’s used to navigate between different directories (folders) in the file system. For example, cd myfolder would take you to the “myfolder” directory.

clear: clears everything in the terminal

code: opens the repository in vscode

git: Git is a version control system used to track changes in your code. Commands like git clone, git pull, and git push are used to manage and synchronize your codebase with a remote repository.

-apt: This command is specific to Debian-based Linux distributions like Ubuntu. It’s used to manage software packages. For instance, sudo apt update refreshes the package list, and sudo apt install is used to install new software packages.

mkdir: Creates directories

ls: Lists files and directories within a directory

rm: Used to remove files

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

brew install wget

git config --global user.email <lunaiwazaki@gmail.com>
git config --global user.name <lunaiwa>

mkdir vscode
cd vscode

git clone ---

code ----repo name----

VSCode Terminal

cs ~/vscode
git clone <link>
code <repo name>

Tools to Run Locally

echo
brew update
brew upgrade
brew install xz

echo 
brew install rbenv
rbenv install 3.1.4
rbenv global 3.1.4

echo
rbenv versions

echo
brew install python

echo brew install jupyter

export GEM_HOME="$HOME/gems"
export PATH="$HOME/gems/bin:$PATH"
echo 'export GEM_HOME="$HOME/gems"' >> ~/.zshrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.zshrc
gem install jekyll bundler

Version Check

ruby -v

python --version

pip install nbconvert 
pip install nbformat 
pip install pyyaml  

jupyter --version

jupyter kernelspec list

bundle install
make
  • [ x ] In the Development process, developers use Version control. Annotate in notes what you have learned about Version Control while doing this setup process.

Version control helps track changes to code. It saves different versions so if something breaks you can go back. This is good when working in teams too. It’s like a backup.

  • [ x ] Where are the files from GitHub placed on your local machine. How do you navigate to those files.

They are placed in the vscode file. When doing git clone in the terminal you must do cd vscode, git clone xxx. You do cd vscode and ls to show all files

  • [ x ] Where are the files placed in the GitHub Cloud, how do you navigate to those files.

They are stroed in repostories. You open a repository on GitHub. You can click through folders to find what you need. It is basically all of the files on your repo but online and on a website.

Version Control

  • Helps Devs keep track of changes in code and keep a history
  • Git push and pull
  • You can work with many other people

  • You can go back inside the code history to see what worked and what didn’t

  • [ x ] Put into words the difference between viewing GitHub Pages running on localhost machine versus running on a deployed server.

    • [ x ] What is the localhost URL for your distribution? Can anyone else see it?
    • [ x ] What is the GitHub Pages URL for your distribution? Can anyone else see it?

Local Host URL: http://0.0.0.0:4200/student/ Only I can see it since I am running it live on my computer and it is used for testing/development. It is super helpful during testing to test code and see if it works before pushing the code.

GitHUb Pages URL:

Anatomy of GitHub Pages

Discuss how to develop a home page, code, run local server test, and then sync to deploy to GitHub Pages.

  • [ x ] Review tools setup and make in README.md to support this lesson.

Hacks

  • [ x ] Perform customization to your ‘student’. This is an opportunity to learn a few concepts from ‘teacher’ repository and then customize your own page to your course needs and personal interests.

Observe the Submenu on the teacher project home page.

  • Course. This is course overview.
  • Style. This page how to Style, while understanding inherited styling from Theme.
  • Background. This page contains JavaScript background description overlay.
  • Table. This page shows how to obtain data from outside source and forming a table.
  • About. This is about the Creator.

Course Hack

This is made from markdown and references images from the image folder.

  • index.md is the file that contains markdown for this page
  • _includes/nave_home.html contains code for submenu, it is included in every page in this dialog
  • menus code shows img and href examples, /teacher refers to baseurl defined in _config.yml, this is the localtion of all files in WebSite. Note, this changes as you run on localhost and deployed; make sure you remember to use this for locations of assets in site.
  • [ x ] As you view content in any of these files, it is best to recognize language type and then find a reference. For instance, looking at index.md you should recognize it as Markdown and then use a Markdown Cheet Sheet for reference.

Style Hack

The Style submenu is using a Calculator as an example.

  • [ x ] /assets/css/style.css contains import of style customization per rules defined by GitHub Pages themse. Read the description on how Stye customization are handled by midnight in the README.md. This is a way to use there repo of customization, but also add individual spice. This is much faster than trying to do this by yourself.
  • [ x ] /_posts/Example-calculator.md contains code for Calculator in the project. Only the top output is generating completely custom style, the remainder comes from adjusting style.css.
  • [ x ] A Calculator is a great way to learn customizations of things like buttons, which are common elements in a Theme. Also, it is great way to learn Math operations. Suggested Hacks are inside this file.
  • [ x ] As you view the content of this file you will see CSS, HTML, and JavaScipt. To enhance this you would need to start to learn the basic structures and use a Cheat Sheet for reference. Also, putting this code into ChatGPT and aking for overview is a great way to understand line by line.