2a:null 2b:["$","title",null,{"children":"CSE 412 Intro to Git & Web Handout | cse412 | Observable"}] 30: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.

`31:[{"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}] 2e:{"id":"21a7b2a3e7247439","slug":"cse-412-intro-to-git-web-handout","title":"CSE 412 Intro to Git & Web Handout","thumbnail":"e278bba386ee18467274f279bc17e5827ac3192b337fd4c4f5e1073e169afa8f","access_level":"public","create_time":"$D2021-02-03T08:47:41.444Z","update_time":"$D2021-04-28T19:03:22.000Z","view_time":null,"first_public_time":"$D2021-02-16T12:11:45.750Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"16c5e985f8389c16","login":"cse412","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e212536a9dc2df98bc8c2baec0ece23b782e9d064e97e67ede01a5ca9a933fa9","tier":"starter_2024"},"version":749,"publish_version":749,"role":null,"authored":false,"authors":[{"type":"individual","id":"9461267a8818334e","login":"cse412","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e212536a9dc2df98bc8c2baec0ece23b782e9d064e97e67ede01a5ca9a933fa9","tier":null}],"members":[{"type":"individual","id":"9461267a8818334e","login":"cse412","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e212536a9dc2df98bc8c2baec0ece23b782e9d064e97e67ede01a5ca9a933fa9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"dfcea94f61fa37af","slug":"uw-cse-412-quiz-sections","title":"UW CSE 412 Quiz Sections","owner":{"id":"16c5e985f8389c16","login":"cse412","name":""}},"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"md`# Git Workflow`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"// Git Workflow Image Source: https://uidaholib.github.io/get-git/3workflow.html","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"html`

\n### Explore more about Git?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"md`## HTML, CSS & JavaScript Resources`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"md`<\\hr>` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"md`# Quick Guide to HTML & CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"md`<\\hr>`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`First, apply what we learned to create a visualization in Tableau.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`### Create your profile for Tableau Public`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"md`### Publish the worksheet on Tableau Public`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"md`A \"Extract Data\" window will then pop up, and Click on \"Extract\".`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"md`### Share and Embed Your Visualization in Your Web Page`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"