31:T574,md` - The flow in the image above describes the most common way of working with git version control. Git is a distributed version control system. It has multiple copies of files locally and remotely to avoid a single point of failure. This is one of the most important ideas behind modern software development to ensure reliability. - We have different locations for the storage which are shown as nodes in the flow graph. We move files between these nodes using different git commands that we will explore later. Let's start by looking at the different locations: 1. Working Directory: The local directory where you create your project and work on the project using your favorite development environment. 2. Staging Area: This is an intermediate draft space where you place your files before commiting them. You can add multiple files to the staging area and once you have made all the desired additions, you should move these files from the staging area to the commit area. 3. local .git: This is your local git storage and maintainence area. You can have multiple git branches here and you can make changes permanent by commiting them here. 4. remote client: Remote client is a hosted git storage service like GitHub, Gitlab, Bitbucket, etc where you can store an extra hosted copy of your repository.

`32:[{"id":"567df6bef7c150de8ba23dceb11968ce6e4b28eae7cf0e5a60e694420ae4ec19b94a3fc734471b72fd66a967027f4a022bb2689b22d45b2f0a002494e8865ac6","href":"https://static.observableusercontent.com/files/567df6bef7c150de8ba23dceb11968ce6e4b28eae7cf0e5a60e694420ae4ec19b94a3fc734471b72fd66a967027f4a022bb2689b22d45b2f0a002494e8865ac6","name":"image.png","type":"image/png","lastModified":1612342083508.051,"size":406430},{"id":"ca7897405f7b9d730cfbd004bf2d7d3928e52803ec2d24d1478004129b3c92500ab5c47ea093c2ca00dab8de6712476b19d93548355afd73a5576120e1d89b6a","href":"https://static.observableusercontent.com/files/ca7897405f7b9d730cfbd004bf2d7d3928e52803ec2d24d1478004129b3c92500ab5c47ea093c2ca00dab8de6712476b19d93548355afd73a5576120e1d89b6a","name":"image@4.png","type":"image/png","lastModified":1612948465598.493,"size":291122},{"id":"441fff7d07292187228430cbb3729d7a1e98f6b7f9107430583f76cf7f9c1585eaae04b25c1eaeec48ea67baf030f9ca0f8e6f4ac449a53281cef64be90959e6","href":"https://static.observableusercontent.com/files/441fff7d07292187228430cbb3729d7a1e98f6b7f9107430583f76cf7f9c1585eaae04b25c1eaeec48ea67baf030f9ca0f8e6f4ac449a53281cef64be90959e6","name":"image@3.png","type":"image/png","lastModified":1612948192726.625,"size":279938},{"id":"cde1b3afcf478268a26610941151c8f783143bba474a80f014f4cca0317099324973bd67b05e9497b90774ffa5154e7d3d876394d19279528ec5390c2c631040","href":"https://static.observableusercontent.com/files/cde1b3afcf478268a26610941151c8f783143bba474a80f014f4cca0317099324973bd67b05e9497b90774ffa5154e7d3d876394d19279528ec5390c2c631040","name":"image@1.png","type":"image/png","lastModified":1612945526826.352,"size":73132},{"id":"b62eae5bc2a2f4856df93a7c9aa530ac813c4ed74917ce13113632f286b356382f049028afd6066b7f611ff3c6cdc36c7752327042d39a803d82c1162886949b","href":"https://static.observableusercontent.com/files/b62eae5bc2a2f4856df93a7c9aa530ac813c4ed74917ce13113632f286b356382f049028afd6066b7f611ff3c6cdc36c7752327042d39a803d82c1162886949b","name":"image@7.png","type":"image/png","lastModified":1612953653901.93,"size":31330},{"id":"44afd6facfe5076768aebd2c07361bd8d77a67d5a8cb639d45ca5077fe0a19737aaadfb97138fc26788a78e49f9ea09052419515ce84514500eb29f4a10bfde6","href":"https://static.observableusercontent.com/files/44afd6facfe5076768aebd2c07361bd8d77a67d5a8cb639d45ca5077fe0a19737aaadfb97138fc26788a78e49f9ea09052419515ce84514500eb29f4a10bfde6","name":"image@5.png","type":"image/png","lastModified":1612953521402.303,"size":58318},{"id":"46d0a40b2e237bfa7c92a2701f9772f714c10f69d59037a4bf5ea995c04045d9fe0d57c593449eaef4887ae13d7f27b1eb4c9de4a8d6abe1ea082f6da08cea80","href":"https://static.observableusercontent.com/files/46d0a40b2e237bfa7c92a2701f9772f714c10f69d59037a4bf5ea995c04045d9fe0d57c593449eaef4887ae13d7f27b1eb4c9de4a8d6abe1ea082f6da08cea80","name":"workflow.png","type":"image/png","lastModified":1613205251123.787,"size":32865},{"id":"12978918d54693f96d857228bf68133645fbd6941a4b363fb938a181b00ca628858d9f38a2cf2c562054929f2bcf423493a0dab24df614d8bd2d7c3914aa361b","href":"https://static.observableusercontent.com/files/12978918d54693f96d857228bf68133645fbd6941a4b363fb938a181b00ca628858d9f38a2cf2c562054929f2bcf423493a0dab24df614d8bd2d7c3914aa361b","name":"image@9.png","type":"image/png","lastModified":1613204873504.187,"size":57297},{"id":"2457b2c74925e6dc47e59aa3a423446218d68378b076454411137152179b5cc4920fb4886c3f80699aea1a5a4ac5d6d7837b792088e1ded80fa23e9d1a11dd03","href":"https://static.observableusercontent.com/files/2457b2c74925e6dc47e59aa3a423446218d68378b076454411137152179b5cc4920fb4886c3f80699aea1a5a4ac5d6d7837b792088e1ded80fa23e9d1a11dd03","name":"image@8.png","type":"image/png","lastModified":1613204787580.279,"size":57769},{"id":"69321a12ee80d930af9e1e4064a014bc7df208f6e2fb5da6a7fb4dafe5fe569516db12b0deffb57420cee4e110725c53a551a04b43911315377db34d1bd1eb58","href":"https://static.observableusercontent.com/files/69321a12ee80d930af9e1e4064a014bc7df208f6e2fb5da6a7fb4dafe5fe569516db12b0deffb57420cee4e110725c53a551a04b43911315377db34d1bd1eb58","name":"image@11.png","type":"image/png","lastModified":1613218797309.116,"size":81271},{"id":"ce364c4d177a00397c6015847d8690a5b542d8553d8caf126ff49edb9afe4db5ca63480dd04bb611c1fe60e8d726b5611ce95beea1243765284e19363f473349","href":"https://static.observableusercontent.com/files/ce364c4d177a00397c6015847d8690a5b542d8553d8caf126ff49edb9afe4db5ca63480dd04bb611c1fe60e8d726b5611ce95beea1243765284e19363f473349","name":"image@10.png","type":"image/png","lastModified":1613218016599.053,"size":67567}] 2f:{"title":"CSE 412 Intro to Git & Web Handout","cells":[{"id":0,"value":"md`# CSE 412 Intro to Git & Web Handout`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"md`\n## Version Control:\n\"[Version control](https://www.geeksforgeeks.org/version-control-systems/), also known as source control, is the practice of tracking and managing changes to software code. Version control systems are software tools that help software teams manage changes to source code over time. As development environments have accelerated, version control systems help software teams work faster and smarter. They are especially useful for DevOps teams since they help them to reduce development time and increase successful deployments.\" - Atlassian Bitbucket\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"md`## Some Benefits of the Version Control Systems:\n- They can provide efficient collaboration, communication, and assistance.\n- They have traceability to every small change.\n- They help in recovery in case of any disaster or contingent situation.\n- They are also commonly used for other tasks such as writing academic papers!\n- ...\n\n#### There are many popular VCS following different paradigms:\n1. Local VCS - GNU RCS\n2. Centralized VCS - Tortoise SVN\n3. Distributed VCS - Git\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"md`\n### Git:\nGit is one of many different kinds of version control systems which uses distributed storage. Git stores a local copy on each system that is developing code and also stores a hosted copy in a remote server.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"md`\n### Why Git?\n- ensures file integrity using a checksum.\n- handles high security using SHA-1.\n- Allows features to be developed simultaneously through branching and merging.\n- Central to open source software development.\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"md`# Git Workflow`","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"// Git Workflow Image Source: https://uidaholib.github.io/get-git/3workflow.html","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"md`# git commands\n\nThere are various commands to move files between the different stages of the git workflow. Since we will do our final project based on the GitHub, if you feel that you are not comfortable with using terminal or command lines after learning/reading information below, no worry, check **[GitHub Desktop interface](https://desktop.github.com/)** and here is [an overview](https://docs.github.com/en/desktop) of how to use it!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"md`\n## \\`git init\\`\n\n- \\`git init\\` command initializes a directory to use git version control. It creates a subdirectory called .git which maintains all the information necessary for storing the state of your git branch. \n\n- Unless you know what you are doing, don't touch this directory. If you are curious to know, maybe take a peek inside the directory without manipulating anything.\n\n- On a higher level, git hosting clients like GitHub, GitLab, Bitbucket, etc use this directory to see the new changes you have made and update those changes on the hosted repository.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"md`In the example below, we have created a directory called Git Demo. We will execute the command \\`git init\\` and a .git directory will appear. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"md`\n## \\`git add\\`\n- \\`git add\\` command is used to put a file or a group of files into a local staging area. \n\n- When you make a commit, all the files that are in the staging area get their git states updated. \n\n- Updates can include adding files for the first time, deleting existing files, or modifying files by changing parts of the file.\n\n- \" git add . \" adds all new/modified/deleted files in the working directory to staging area.\n\nIn the example below, we have a file called README.md and we use the command \\`git add README.md\\` to add the file to the staging area.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"md`\n## \\`git commit\\`\n- \\`git commit\\` command is used to move files from the staging area to the local .git repo. \n\n- Commits require a commit message to annotate each commit. Commit messages are added using -m flag.\n\n- Typical usage looks like \\`git commit -m \"add readme\"\\`.\n\nIn the example below, we commit the file README.md.\n\nAlthough your commit message can be whatever you like. VCS won't (although your teammates could) complain if you commit something with message like \\`git commit -m \"what a beautiful day\"\\`. However, this is not an informative message, and we want to use our commit message to inform your teammates what has changed and maintain a record of what each commit does!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"md`\n## \\`git push\\`\n- \\`git push\\` command is used to move files from the local repo to the hosted remote repo. \n\n- Before pushing files, you will need to make the repository on your github account and link it to your local repo.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"md`\n## \\`git pull\\`\n- \\`git pull\\` command is used to move files from the remote repo to the local repo. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"md`\n

\n### Explore more about Git?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"md`One of the best resources for more information on git is the [Pro Git](https://git-scm.com/book/en/v2) book. It starts from the basics of git version control and goes all the way to distributed workflows and advanced features.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"md`## The Magic of CSS\n_Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to DOM elements._\n[DOM: _Document Object Model_ means the hierarchical structure of HTML. Each pair of bracketed tags (or a single tag in some cases) is an DOM element.]\n- Check pretty CSS design [here](http://www.csszengarden.com/)!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"md`## HTML, CSS & JavaScript Resources`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"md`[Textbook: Chapter 3 (reading for 1/8)](https://learning.oreilly.com/library/view/interactive-data-visualization/9781491921296/ch03.html#technology_fundamentals) [Free ACCESS by Sign in with your UW NETID]\n\n[Javascript & Observable](https://observablehq.com/@uwdata/a-minimal-introduction-to-javascript-and-observable)\n\n[CSE 154: Web Programming](https://courses.cs.washington.edu/courses/cse154/20au/sections/index.html)\n\n[MDN: Getting started with the Web](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web)\n\n[W3schools Tutorials](https://www.w3schools.com/)\n\n- [HTML Tutorial](https://www.w3schools.com/html/default.asp)\n\n- [CSS Tutorial](https://www.w3schools.com/css/default.asp)\n\n- [JavaScript Tutorial](https://www.w3schools.com/js/default.asp)\n\nCheatSheet:\n\n- [HTML](https://overapi.com/html)\n\n- [CSS](https://overapi.com/css)\n\n- [JavaScript](JavaScript)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"md`<\\hr>` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"md`# Quick Guide to HTML & CSS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"md`In this section, we will introduce some useful HTML tags and CSS properties that you may refer to when doing your final project.\nYou can clone [the repo of our demo page](https://github.com/cse412/cse412-21sp-HTML-CSS-demo) and follow us!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"md`<\\hr>`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md `## Tableau Embed Instruction\nData Source: [Hours of Sunshine](https://observablehq.com/@uwdata/hours-of-sunshine)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"md`First, apply what we learned to create a visualization in Tableau.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"md`Then, we can publish the worksheet (or a dashboard) on Tableau Public. _Notice that Tableau Public server is public so people can find and see the visualizations you post there. It is fine since we would analyze public data. However, it is not great if using private data, in which you may want to create your own server._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`### Create your profile for Tableau Public`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"md`To upload your dashboard to the Tableau Public server, you need to first create a profile for Tableau Public by:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"md`1. Go to [Tableau Public](https://public.tableau.com/s)\n2. Click on \"Sign In\"\n3. Click on \"Create one now for free\"\n4. Fill in your information and click on \"Create My Profile\"\n5. Check your email to activate your profile!\n\nNow, let's see how to publish our worksheet/dashboard on Tableau Public!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"md`### Publish the worksheet on Tableau Public`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"md`#### Extract Data\n\nThis is to make sure Tableau Public would know the data we use:\n\nIn the top menu bar of Tableau, select \"Data\" --> \"Your Dataset\" --> \"Extract Data\".`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"md`A \"Extract Data\" window will then pop up, and Click on \"Extract\".`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"md`Now, we have prepared our data for publishing successfully! Let's upload our interactive visualization to the Tableau Public server now!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"md`#### Upload your visualizations to Tableau Public`","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"md`In the top menu bar of Tableau, select \"Sever\" --> \"Tableau Public\" --> \"Save to Tableau Public As...\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"md`Sign in your Tableau Public account, and name your workbook.
\nNow, a web browser is automatically opened and you should be able to see your visualization online now!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"md`### Share and Embed Your Visualization in Your Web Page`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`In your online workbook, click the share button under your visualization, and you should now see the share window pop up:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"md`Copy what's in the Embed Code and Paste that in the proper position of your HTML file!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"md`<\\hr>\n## Acknowledgements\n\nThis handout was developed by [Aayush Chhabra](https://www.aayushchhabra.com), [Yueqian Zhang](https://www.linkedin.com/in/yueqianz/), Sonya Lao, and Jane Hoffswell at the University of Washington.`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}