diff --git a/docs/labs/index.md b/docs/labs/index.md index c1bc2bc..f0e2cfb 100644 --- a/docs/labs/index.md +++ b/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. diff --git a/docs/labs/week6/1.md b/docs/labs/week6/1.md new file mode 100644 index 0000000..f556418 --- /dev/null +++ b/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` diff --git a/docs/labs/week6/2.md b/docs/labs/week6/2.md new file mode 100644 index 0000000..f3a4470 --- /dev/null +++ b/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 +``` +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! \ No newline at end of file diff --git a/docs/labs/week6/3.md b/docs/labs/week6/3.md new file mode 100644 index 0000000..2f7913b --- /dev/null +++ b/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" + + +``` + +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 + +``` + +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! \ No newline at end of file diff --git a/docs/labs/week6/4.md b/docs/labs/week6/4.md new file mode 100644 index 0000000..f4c6858 --- /dev/null +++ b/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) diff --git a/docs/labs/week6/5.md b/docs/labs/week6/5.md new file mode 100644 index 0000000..a7c0f47 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/docs/labs/week6/index.md b/docs/labs/week6/index.md new file mode 100644 index 0000000..e0249bb --- /dev/null +++ b/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. diff --git a/docs/labs/week6/media/PR_1.png b/docs/labs/week6/media/PR_1.png new file mode 100644 index 0000000..86d78d5 Binary files /dev/null and b/docs/labs/week6/media/PR_1.png differ diff --git a/docs/labs/week6/media/PR_2.png b/docs/labs/week6/media/PR_2.png new file mode 100644 index 0000000..f2c0266 Binary files /dev/null and b/docs/labs/week6/media/PR_2.png differ diff --git a/docs/labs/week6/media/PRcreate.png b/docs/labs/week6/media/PRcreate.png new file mode 100644 index 0000000..d4da576 Binary files /dev/null and b/docs/labs/week6/media/PRcreate.png differ diff --git a/docs/labs/week6/media/branchList.png b/docs/labs/week6/media/branchList.png new file mode 100644 index 0000000..2ee9e9b Binary files /dev/null and b/docs/labs/week6/media/branchList.png differ diff --git a/docs/labs/week6/media/branchPush.png b/docs/labs/week6/media/branchPush.png new file mode 100644 index 0000000..72d5a39 Binary files /dev/null and b/docs/labs/week6/media/branchPush.png differ diff --git a/docs/labs/week6/media/branchSwitch.png b/docs/labs/week6/media/branchSwitch.png new file mode 100644 index 0000000..6d45daf Binary files /dev/null and b/docs/labs/week6/media/branchSwitch.png differ diff --git a/docs/labs/week6/media/clustermarker.png b/docs/labs/week6/media/clustermarker.png new file mode 100644 index 0000000..a2486d8 Binary files /dev/null and b/docs/labs/week6/media/clustermarker.png differ diff --git a/docs/labs/week6/media/clustermarker2.png b/docs/labs/week6/media/clustermarker2.png new file mode 100644 index 0000000..6d873a3 Binary files /dev/null and b/docs/labs/week6/media/clustermarker2.png differ diff --git a/docs/labs/week6/media/commitchanges.png b/docs/labs/week6/media/commitchanges.png new file mode 100644 index 0000000..31e3325 Binary files /dev/null and b/docs/labs/week6/media/commitchanges.png differ diff --git a/docs/labs/week6/media/finishedPR.png b/docs/labs/week6/media/finishedPR.png new file mode 100644 index 0000000..8b0c228 Binary files /dev/null and b/docs/labs/week6/media/finishedPR.png differ diff --git a/docs/labs/week6/media/gitMerge.png b/docs/labs/week6/media/gitMerge.png new file mode 100644 index 0000000..d224a86 Binary files /dev/null and b/docs/labs/week6/media/gitMerge.png differ diff --git a/docs/labs/week6/media/gitcommit.png b/docs/labs/week6/media/gitcommit.png new file mode 100644 index 0000000..2adba55 Binary files /dev/null and b/docs/labs/week6/media/gitcommit.png differ diff --git a/docs/labs/week6/media/image-1.png b/docs/labs/week6/media/image-1.png new file mode 100644 index 0000000..ac57628 Binary files /dev/null and b/docs/labs/week6/media/image-1.png differ diff --git a/docs/labs/week6/media/image.png b/docs/labs/week6/media/image.png new file mode 100644 index 0000000..1b08eca Binary files /dev/null and b/docs/labs/week6/media/image.png differ diff --git a/docs/labs/week6/media/live_share_install.png b/docs/labs/week6/media/live_share_install.png new file mode 100644 index 0000000..24fbe48 Binary files /dev/null and b/docs/labs/week6/media/live_share_install.png differ diff --git a/docs/labs/week6/media/live_share_snapping.png b/docs/labs/week6/media/live_share_snapping.png new file mode 100644 index 0000000..e40df48 Binary files /dev/null and b/docs/labs/week6/media/live_share_snapping.png differ diff --git a/docs/labs/week6/media/livesharebutton.png b/docs/labs/week6/media/livesharebutton.png new file mode 100644 index 0000000..b3ac572 Binary files /dev/null and b/docs/labs/week6/media/livesharebutton.png differ diff --git a/docs/labs/week6/media/liveshareserver.png b/docs/labs/week6/media/liveshareserver.png new file mode 100644 index 0000000..ec8e424 Binary files /dev/null and b/docs/labs/week6/media/liveshareserver.png differ diff --git a/docs/labs/week6/media/mergeconflictvscode.png b/docs/labs/week6/media/mergeconflictvscode.png new file mode 100644 index 0000000..5e8f622 Binary files /dev/null and b/docs/labs/week6/media/mergeconflictvscode.png differ diff --git a/docs/labs/week6/media/newbranch.png b/docs/labs/week6/media/newbranch.png new file mode 100644 index 0000000..eecf49a Binary files /dev/null and b/docs/labs/week6/media/newbranch.png differ diff --git a/docs/labs/week6/media/newbranchname.png b/docs/labs/week6/media/newbranchname.png new file mode 100644 index 0000000..9434497 Binary files /dev/null and b/docs/labs/week6/media/newbranchname.png differ diff --git a/docs/labs/week6/media/newbranchvs.png b/docs/labs/week6/media/newbranchvs.png new file mode 100644 index 0000000..cb6c569 Binary files /dev/null and b/docs/labs/week6/media/newbranchvs.png differ diff --git a/docs/labs/week6/media/publishBranch.png b/docs/labs/week6/media/publishBranch.png new file mode 100644 index 0000000..f72bec4 Binary files /dev/null and b/docs/labs/week6/media/publishBranch.png differ diff --git a/docs/labs/week6/media/pullRequest.png b/docs/labs/week6/media/pullRequest.png new file mode 100644 index 0000000..4464d93 Binary files /dev/null and b/docs/labs/week6/media/pullRequest.png differ diff --git a/docs/labs/week6/media/terminal.png b/docs/labs/week6/media/terminal.png new file mode 100644 index 0000000..8fa2760 Binary files /dev/null and b/docs/labs/week6/media/terminal.png differ diff --git a/docs/labs/week6/media/terminalopen.png b/docs/labs/week6/media/terminalopen.png new file mode 100644 index 0000000..9115984 Binary files /dev/null and b/docs/labs/week6/media/terminalopen.png differ diff --git a/docs/labs/week6/media/testPR_2.png b/docs/labs/week6/media/testPR_2.png new file mode 100644 index 0000000..58a7b10 Binary files /dev/null and b/docs/labs/week6/media/testPR_2.png differ diff --git a/docs/labs/week6/media/testPR_3.png b/docs/labs/week6/media/testPR_3.png new file mode 100644 index 0000000..cba3264 Binary files /dev/null and b/docs/labs/week6/media/testPR_3.png differ diff --git a/docs/labs/week6/media/testPR_4.png b/docs/labs/week6/media/testPR_4.png new file mode 100644 index 0000000..4db73e0 Binary files /dev/null and b/docs/labs/week6/media/testPR_4.png differ diff --git a/docs/labs/week6/media/testPR_5.png b/docs/labs/week6/media/testPR_5.png new file mode 100644 index 0000000..c7f0310 Binary files /dev/null and b/docs/labs/week6/media/testPR_5.png differ diff --git a/docs/labs/week6/media/testPr.png b/docs/labs/week6/media/testPr.png new file mode 100644 index 0000000..101dcd9 Binary files /dev/null and b/docs/labs/week6/media/testPr.png differ diff --git a/docs/labs/week6/media/vscode-share-button-new.png b/docs/labs/week6/media/vscode-share-button-new.png new file mode 100644 index 0000000..948a3d2 Binary files /dev/null and b/docs/labs/week6/media/vscode-share-button-new.png differ diff --git a/docs/labs/week6/media/vscode-sign-in-button.png b/docs/labs/week6/media/vscode-sign-in-button.png new file mode 100644 index 0000000..45b01cd Binary files /dev/null and b/docs/labs/week6/media/vscode-sign-in-button.png differ diff --git a/docs/weekly_materials/index.md b/docs/weekly_materials/index.md index bace735..a1d5635 100644 --- a/docs/weekly_materials/index.md +++ b/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)| \ No newline at end of file +|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| \ No newline at end of file diff --git a/docs/weekly_materials/week06.md b/docs/weekly_materials/week06.md new file mode 100644 index 0000000..03766a1 --- /dev/null +++ b/docs/weekly_materials/week06.md @@ -0,0 +1,17 @@ +# Week 10 - Beyond Web Development and GIS for Social Change + + + + +Date|Type|Description|Slides|Recording| +|---|----|-----------|------|---------| +|7/29|Collaborating with GitHub and Plugins|Lab|TBD|TBD| +|7/31|Beyond Web Development and GIS for Social Change|Lecture|None|None| + +## Lab + +- [Collaborating with GitHub and Plugins](../../labs/week6/) + +## Lecture + +- Beyond Web Development and GIS for Social Change