Merge pull request #59 from albertkun:dev

Add Week 6 Lab

docs/labs/index.md

@@ -8,6 +8,7 @@
 |#3|[For-hoops and Geo-J-cieON](week3/index.md)|Events, Functions, Methods|
 |#4|[Forms, Geocoding, Conditionals, and APIs, oh my!](week4/index.md)|Forms, Conditionals, APIs|
 |#5|[Final Touch-ups](week5/index.md)|JavaScript, HTML, CSS|
+|#6|[Collaborating with GitHub and Plugins](week6/index.md)|GitHub, Plugins|
 
 !!! warning "Remember!"
     Unless specified otherwise, all assignments are **due at the beginning of class**. Late assignments will be given half credit up until a week.

docs/labs/week6/1.md

@@ -0,0 +1,41 @@
+# Clone a new repo
+
+We will be working with the terminal a bit today, so let's open up the terminal by going to the menu bar:
+
+![](media/terminal.png)
+
+Then clicking on `New Terminal`:
+
+![](media/terminalopen.png)
+
+Start by cloning this repo:
+
+```
+git clone https://github.com/albertkun/24SU-ASIAAM-191A-Git-Practicing.git
+```
+
+!!! danger "Watch where you run terminal commands!"
+    Make sure to note that where you run the terminal command is where the `git clone` will run and thus copy the folder into. DO NOT run this inside of another repository or you will create a lot of problems and break your git capabilities.
+
+!!! note "Navigating the Terminal/Command Prompt"
+    - To move up a directory use `cd ..`
+    - To see what directory and files type in Mac/Linux: `ls` or Windows: `dir` 
+    - To make a directory use `mkdir aNewFolderName`
+    - To move into a directory use `cd aNewFolderName`
+
+
+Here are the basic git commands for adding new changes:
+
+```
+git add .
+git commit -am "message"
+git push
+```
+
+These commands are identical to what we do in the source control tab in VS Code:
+
+![](media/gitcommit.png)
+
+1. Is the `git add .`
+2. Is the `git commit` with a `message`
+3. Is the `git push`

docs/labs/week6/2.md

@@ -0,0 +1,119 @@
+# Working with `branches`
+## Making a new branch
+
+```
+git checkout -b helloNewBranch
+```
+This creates a branch called `helloNewBranch` and switches to it!
+
+You can also make a new branch in VS Code by clicking this button:
+
+![](./media/../media/newbranchvs.png)
+
+You can then create a name for it
+![](./media/../media/newbranchname.png)
+
+
+### `git add .` your changes to the new branch:
+Make some changes and add them to the branch:
+```
+git add .
+```
+
+## Add a message to your commit
+```
+git commit -am "message"
+```
+
+## Push your changes to your new branch
+
+This code creates a new branch called `helloNewBranch` on GitHub to push to:
+
+```
+git push --set-upstream origin helloNewBranch
+```
+
+You only need to run it when the branch DOES NOT exist on GitHub!!! After the branch is on GitHub, use only need to use `git push`:
+
+```
+git push
+```
+## Updating your branch
+Sometimes you want to make sure your branch is up to date, so you can use the following command:
+``` bash
+git merge <branch_you_want_to_merge>
+```
+For example this command will `merge` content from `main` to the branch I am currently on:
+``` bash
+git merge main
+```
+
+However!!!
+
+What happens when a `git push` affects in a file that was changed locally but someone else edited on GitHub?
+
+[Refer to this medium post to learn more about git merges](https://medium.com/swlh/git-branching-and-merging-made-easy-f7dacd4aa75e)
+
+## Merge Conflicts!!!
+
+A `merge conflict` occurs when one file was changed in two places. For example, Person A edits line 1 of `readme.md` and `Person B` also edits line 1 of `readme.md`. A `git` doesn't know which changes to keep, so a person needs to take a look and manually `merge` them.
+
+First, do a `git pull` which will check if you are behind a commit:
+
+``` bash
+git pull
+```
+
+When your commit is behind, you may receive this message:
+
+``` bash
+error: Your local changes to the following files would be overwritten by merge:
+        **SOME FILE(S)**
+Please commit your changes or stash them before you merge.
+Aborting
+Updating 6ac38e2..4dbc13c
+```
+
+Do a git commit:
+
+``` bash
+git add .
+git commit -am "message"
+git push
+```
+
+After you try to push, this message should pop-up:
+
+``` bash
+error: failed to push some refs to 'https://github.com/albertkun/24SU-ASIAAM-191A-Git-Practicing.git'
+hint: Updates were rejected because the tip of your current branch is behind
+hint: its remote counterpart. Integrate the remote changes (e.g.
+hint: 'git pull ...') before pushing again.
+hint: See the 'Note about fast-forwards' in 'git push --help' for details.```
+```
+
+Run another `git pull`
+
+``` bash
+git pull
+```
+
+If files didn't change at the same time, then auto-merging could take place.
+
+Then proceed to push as normal:
+
+``` bash
+git push
+```
+
+If files did change at the same time, you have to choose which version to keep:
+
+![](./media/mergeconflictvscode.png)
+
+After choosing an option, you can can push as normal:
+
+```
+git push
+```
+
+With a better understanding of `branches` and `merge conflicts`, now we can go ahead and test some new features without worrying about blowing up our repository!

docs/labs/week6/3.md

@@ -0,0 +1,57 @@
+
+# Adding a new MapLibreGL JavaScript Plugin
+
+Plugins are a great way to add extra functionality to your MapLibreGL map.
+
+Here are some examples:
+
+## Visualizations
+- [Turf.js](https://turfjs.org/)
+- [Charts](https://www.chartjs.org/docs/latest/samples/bar/vertical.html)
+
+## General JavaScript Functions
+- [Scrollama](https://russellsamora.github.io/scrollama/sticky-side/)
+
+## MapLibreGL Related
+
+- https://maplibre.org/maplibre-gl-js/docs/plugins/
+
+To keep things simple, we will add a cluster marker functionality to our MapLibreGL map. Clustering makes it easier to see when multiple points are in the same area.
+
+With just a few changes our map will look as follows:
+![alt text](media/image.png)
+
+As with when we first used MapLibreGL we need to include the library, so in our html add the following lines:
+
+```html title="index.html"
+        <!-- Overlapping Markers JavaScript -->
+		<script src="https://unpkg.com/maplibre-randomize-overlapping-markers/dist/bundle.js"></script>
+```	
+
+Next, let's read the documentation on how to use the `cluster maker`:
+
+![alt text](media/image-1.png)
+
+Judging from this code, we need to turn our `init.js` into a module.
+
+```html
+<script type="module" src="js/init.js"></script>
+```
+
+Next we need to add the following code to our `init.js`:
+
+```js title="js/init.js"
+	const [modifiedLongitude, modifiedLatitude] = PointManager.addPointData(longitude, latitude, 25);
+
+	const marker = new maplibregl.Marker()
+		.setLngLat([modifiedLongitude, modifiedLatitude])
+		.addTo(map);
+```
+
+And... wow that's it!
+
+This flexibility is what makes opensource tools and plugins so great! However, be warned that not all plugins will be as simple to plug and play.
+
+Congrats!
+
+After you've made this change the time has come to make a pull request!

docs/labs/week6/4.md

@@ -0,0 +1,32 @@
+# Pull Requests on GitHub
+
+On GitHub you may have seen this nagging icon a few times by now:
+
+![](media/pullRequest.png)
+
+You will then be greeted by a new page where you can title, assign, comment, etc. about the pull request (or PR):
+![](media/PRcreate.png)
+
+ and most importantly create a `pull request`:
+![](media/testPr.png)
+After clicking the button to `create a new pull request` scroll down to the resulting page:
+![](media/testPR_2.png)
+
+You should be able to click on `merge` if your `pull request` has no `merge conflicts`:
+![](media/testPR_3.png)
+
+Click to `confirm` the auto merge:
+![](media/testPR_4.png)
+
+And now you can delete the branch:
+![](media/testPR_5.png)
+
+## Warning: Merge Conflicts do not allow you to auto-merge a Pull Request!
+
+!!! danger "Warning! Merge Conflicts pvrevent auto-merges of a Pull Request!"
+    You will be unable to `auto-merge` if there is a merge conflict, so refer to the `merge-conflict` steps in order to finish the `pull request`.
+
+## Completed Pull Request
+
+Your completed pull request should look like the following:
+![](media/finishedPR.png)

docs/labs/week6/5.md

@@ -0,0 +1,70 @@
+# `Live Share` The VS Code Plugin for Collaboration
+
+Make sure you have installed the Live Share extension by going to the following link and clicking on "Install": 
+
+>[https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
+
+![./media/live_share_install.png](./media/live_share_install.png)
+
+You can read the documentation to learn more about Live Share and what it does too:
+
+>[https://docs.microsoft.com/en-us/visualstudio/liveshare/](https://docs.microsoft.com/en-us/visualstudio/liveshare/)
+
+
+After installing Live Share, you can join a session with these steps:
+
+## Joining a live share session
+
+### 1. Click on the Join url
+
+Click the session URL the **host** sent you, which will open it up in a browser. When prompted, allow your browser to launch VS Code
+
+### 2. Sign in to GitHub
+
+!!! help "Tip"
+    This will only need be done once.
+
+Click on the `Live Share` status bar item **or** press `Ctrl+Shift+P` / `Cmd+Shift+P` and select the `Live Share: Sign In With Browser` command.
+![](media/vscode-sign-in-button.png)
+
+### 3. Working the session
+
+After you join, you'll be immediately presented with the file that the "host" has open, and can see their cursor and any edits they make.
+
+### 4. Viewing a live server
+
+If the **host** is sharing a live server of their website, you can view it on your local machine by clicking on the live share button:
+
+![](media/livesharebutton.png)
+
+Then you can click on any server under `Shared Servers`, such as `localhost:8000` to open it: 
+
+![](media/liveshareserver.png)
+
+## Hosting a live share session
+
+!!! info "Live Server and Live Share"
+    To make previewing content easier, always remember to start a `Live Server` before starting a `Live Server` session!
+
+
+Click the "live share" button to immediately start sharing your coding session.
+
+![./media/vscode-share-button-new.png](./media/vscode-share-button-new.png)
+
+An invitation link will automatically be copied to your clip board, you can invite anyone to join your session by sharing it. 
+
+You can join your own collaboration session by clicking the link yourself. open it in any browser to join your session.
+
+## Saving Changes
+
+The host can **commit** changes by clicking on the source control tab in VS Code when they are done with the session.
+
+![](./media/commitchanges.png)
+
+## 🏁Final Checkpoint
+
+1. Make sure you have [live share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) and [live server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) installed to make collaboration easier.
+
+2. Be sure to have made a pull request to the GitPracticing repo!
+
+Congrats on finishing the lab! There is no assignment, so you can focus on the [final project](../../assignments/final.md) due on Wednesday.

docs/labs/week6/index.md

@@ -0,0 +1,30 @@
+# Collaborating with GitHub and Plugins
+
+The goal of this lab is to get more familiar with coding for your final group projects.
+
+!!! tldr "Goals"
+    - Clone a new repository
+    - Create a new branch
+    - Add a new MapLibre feature or plugin
+    - Create a pull request
+    - Install and test the live share extension
+
+## Lab Overview
+
+1. [Cloning a new repository](1.md)
+2. [Creating a new branch](2.md)
+3. [Adding a new MapLibreGL plugin](3.md)
+4. [Creating a pull request](4.md)
+5. [Installing and testing the live share extension](5.md)
+
+This lab will start by cloning a new repository from the `git practicing repo` here:
+
+- https://github.com/albertkun/24SU-ASIAAM-191A-Git-Practicing/
+
+The git link to be cloned is here:
+
+```
+https://github.com/albertkun/24SU-ASIAAM-191A-Git-Practicing.git
+```
+
+**Note**: This is similar to cloning your group projects repository to your local machine if you have not done so already.

docs/weekly_materials/index.md

@@ -9,6 +9,7 @@
 |#3|[Society, Technology, and Ethics :link:](week03.md)|
 |#4|[Open Source and Web Mapping :link:](week04.md)|
 |#5|[Human-Centered Design :link:](week05.md)|
+|#6|[Beyond Web Development and GIS for Social Change :link:](week06.md)|
 
 ## Course Materials
 
@@ -23,4 +24,5 @@
 |4|Ethical Software and Developing for Civil Society|Lecture|[Here](../materials/AA191_S_W4_Lecture_4.pdf)|[Here](https://ucla.zoom.us/rec/share/BfOiS4yd_c9HH7Wl6cz1Gdhv14KId4C-v-8oZX3NyO76LrBIHfoGKazhB8mpQriD.53kDHw2KxqL9FW5t)|
 |4|Loops and Google FORMulating Data|Lab + Lecture|[Here](../materials/AA191_S_W4_Lab_4.pdf)|[Here](https://ucla.zoom.us/rec/share/5ispFNnoVrk814ShGik2vREPWWgVEB5IqKFGE0mcfPn2krP9mHTDzj3c2om9MGoL.Yr-bQpdJUxQpzk3V)
 |5|Putting the "us" in design justice|Lecture|[Here](../materials/AA191_S_W5_Lecture_5.pdf)|[Here](https://ucla.zoom.us/rec/share/z6ZSWHSrC8KmaF_ykIxb8U2CX--7qykq4Hp2-wAUyAqX5TeLk3gSNH1be9TJw-jc.LJSmsyGMo_Bvdah6)|
-|5|Mentorship and Final Finishing Touches|Lab|[Here](../materials/AA191_S_W5_Lab_5.pdf)|[Here](https://ucla.zoom.us/rec/share/R3gnj941VfvGH0w-Q0koE-aX_9n5T3sRVJV8rbGZAoh0Y6VobH03R7SQc7PodYlS.Zj9_yL3fBqYFNw74)|
+|5|Mentorship and Final Finishing Touches|Lab|[Here](../materials/AA191_S_W5_Lab_5.pdf)|[Here](https://ucla.zoom.us/rec/share/R3gnj941VfvGH0w-Q0koE-aX_9n5T3sRVJV8rbGZAoh0Y6VobH03R7SQc7PodYlS.Zj9_yL3fBqYFNw74)|
+|6|Collaborating with GitHub and Plugins|Lab|TBD|TBD|