31:Tead,_s2 = md` ### Step 2: Open the code in Glitch Okay, now you have your own repo - how do you run this code and add your own changes? Glitch to the rescue! For this workshop, we will be using [Glitch](https://glitch.com/) to code and make our changes. Glitch is a website where you can share your own web projects with other people, and remix other people's projects. However, normally you will be doing this on your own computer. Setting up git/running code our your own computer can get messy and complicated, so we decided to use Glitch to abstract that all away. In the future, we’ll help you get your computer setup so you won’t have to always use Glitch! To get started, click this button: ${html`

`} Now, in a new tab, an empty Glitch project has opened up, and looks like this: ${picWithSubtitle(assests.glitch_new, 'Your first (empty) Glitch project!')}
Now, let's open up a terminal so that way we can get our code into this Glitch project! #### What is a terminal? The "terminal" (console, command line, bash, shell, etc.) is a tool you use to more efficiently interact with code, scripts, and your computer. Don't worry if you've never used a terminal before - we'll walk you through it! To open up the terminal (called "console" in Glitch), go to the top left options -> Advanced Options -> Open Console. In a new tab, the "console" will open like: ${picWithSubtitle(assests.glitch_terminal, 'The "terminal" in Glitch!')}
Now, in this terminal, you are inside a **directory**, or, a folder. Inside this directory is just other files (could be .txt files, .pdf, whatever) and other directories. In a terminal, to see what files are inside your current directory, run the command \`ls\` (stands for "list contents") like so: ${Terminal(['ls', '!outputnode_modules package.json README.md server.js shrinkwrap.yaml'], glitchStyle)}
These are the "contents" of the directory! \`node_modules\` is a directory, \`package.json\`, \`README.md\`, \`server.js\`, and \`shrinkwrap.yaml\` are all files! You can ignore all of these, these have nothing to do with our graffiti wall. Before we do anything with git, you have to tell git who you are! Run these commands below, replacing with your own name and email address (use the same email that you used to sign up for GitHub)! ${Terminal(`git config --global user.email "you@example.com" git config --global user.name "Your Name"`.split('\n'), glitchStyle)}
Now, we want to **clone** your forked repo - meaning we want to get your code from GitHub into this directory. To do that, you will run: ${Terminal([`git clone https://github.com/${_username}/graffiti-wall.git`],glitchStyle)}
You'll get some output like: ${ Terminal( `Cloning into 'graffiti-wall'... remote: Enumerating objects: 35, done. remote: Total 35 (delta 0), reused 0 (delta 0), pack-reused 35 Unpacking objects: 100% (35/35), done. Checking connectivity... done.`.split('\n').map(s=>`!output${s}`) ,glitchStyle) }
Now, if you \`ls\` again, you'll see a new directory called \`graffiti-wall\` has been created - thats your repo, thats where your code is! ${Terminal([ 'ls', '!outputgraffiti-wall node_modules package.json README.md server.js shrinkwrap.yaml' ] ,glitchStyle)}
Now, before we go back to the nicer looking part of glitch, run the \`refresh\` command so glitch knows you just added some files: ${Terminal(['refresh', '!outputrestarting...'],glitchStyle)} `32:T807,_step4 = md` ### Step 4: Add your tag Okay, now you have your own local wall running - how can you add your own tag? If you check out your forked repo (link), you’ll see a directory (a folder) called \`tags\`. Inside of this directory, there are a number of \`.json\` files that contain similar info - each \`json\` file corresponds to one tag on the graffiti wall For example, \`alex.json\` is owned by Alex Garcia and contains this: \`\`\`json { "grid":[ [0,0,1,1,1,0,0], [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,1,1,1,1,1], [1,1,1,1,1,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1] ], "color": "steelblue", "name":"Alex Garcia" } \`\`\` Now, all you have to do is add your own \`name.json\` file inside of the \`tags\` folder, and you’ll be set! To add a new file in Glitch, click on the “New File” button and add a file called \`tags/${_name}.json\` (note: glitch isn’t the best at displaying directories in the file tree - you’ll see the tags are named \`tags/name1.json\`, \`tags/name2.json\` etc) Now, you’re greeted with a nice empty file in your editor - time to fill it up! Now, a \`.json\` file has a very specific structure to it - Below is a small tester that you can use to make sure your JSON file is correct for the graffiti wall. As you can see, there are three "keys" youll have to fill in: - \`"grid"\` the "Grid" is the main part of your tag - it is a 2x2 array filled with 0's and 1's - if you don't know what an array is, that's okay, just raise your hand and we'll help out! To make your design, change the 0's to 1's or 1's to 0's - the 1's coorespond with a darker color - feel free to draw whatever (appropriate) image you want - it could be a letter, a face, a dog - whatever you want! - \`"color"\` For the color, you'll see something like "rgb(10, 20, 30)". Feel free to change those numbers to anything between 0-255, or replace the entire thing with "red", "blue", "pink" - whatever color you can think of! - \`"name"\` This is simple - just put your name! `33:T7f4,_step5 = md` ### Step 5: commit/push Awesome, you’ve now added your own personalized tag your own wall! But, if you go back to the original [eceusc/graffiti-wall](http://eceusc.ucsd.edu/graffiti-wall), you’ll see it your tag doesn’t appear: What??? Also, if you go to your forked repo on GitHub, your new files doesnt appear either - what gives? #### Your changes are only *local* You added files, you made changes - but you haven't told git about them yet! These are called ** unstaged changes**. You can see this with: ${Terminal(['git status'], glitchStyle)} If you run this on your terminal in glitch, you'll see something like: ${Terminal( `On branch master Your branch is up-to-date with 'origin/master'. Untracked files: (use "git add ..." to include in what will be committed) tags/YOUR_NAME.json nothing added to commit but untracked files present (use "git add" to track)`.split('\n').map(s=>`!output${s}`), glitchStyle)} How do we tell git of our changes? Just run these commands! ${Terminal(['git add --all', `git commit -m "added ${_name}.json"`], glitchStyle)} Lets see if you did that right! Run these commands, and see if your output looks similar: ${Terminal(['git status', ...`On branch master Your branch is ahead of 'origin/master' by 1 commit. (use "git push" to publish your local commits) nothing to commit, working directory clean`.split('\n')], glitchStyle)} You did it, git now knows about your changes! 🎉 #### What about GitHub? So now, the git program *on your glitch server* knows about your changes. But if you go to [your forked repo](), your file isn't there - why not?? Git and GitHub are NOT the same thing. Git is a program that is ran on your terminal with the \`git\` command. GitHub is a website that hosts git repositories and lets you manage code/collaboration. You still have to tell GitHub that you made changes to your local repository. Do to that, you'll need to run: ${Terminal(['git push origin master'], glitchStyle)} Now, go to your repository `34:T6a9,$8 = !compareRepos ? html`waiting`: compareRepos.ready && (compareRepos.status === 'identical') ? html`identical`: html`

Oh no! Your forked repo is a little bit behind. Run these commands to

${Terminal([ `git clone ${forkedRepo.clone_url}`, `!outputCloning into '${forkedRepo.name}'...`, `!outputremote: Counting objects: 361, done.`, `!outputremote: Total 361 (delta 0), reused 0 (delta 0), pack-reused 361`, `!outputReceiving objects: 100% (361/361), 66.51 KiB | 0 bytes/s, done.`, `!outputResolving deltas: 100% (194/194), done.`, `!outputChecking connectivity... done.`, `cd ${forkedRepo.name}`, {line:`git remote add upstream ${origRepo.clone_url}`, prefix:`${forkedRepo.name} $ `}, {line:`git pull upstream master`, prefix:`${forkedRepo.name} $ `}, `!outputremote: Counting objects: 2, done.`, `!outputremote: Total 2 (delta 0), reused 0 (delta 0), pack-reused 2`, `!outputUnpacking objects: 100% (2/2), done.`, `!outputFrom ${origRepo.html_url}`, `!output * branch master -> FETCH_HEAD`, `!output * [new branch] master -> upstream/master`, `!outputUpdating 5f9e5a3..f359511`, `!outputFast-forward`, {line:`git push origin master`, prefix:`${forkedRepo.name} $ `}, `!outputUsername for 'https://github.com': `, `!outputPassword for 'https://${_username}@github.com': `, `!outputCounting objects: 2, done.`, `!outputDelta compression using up to 4 threads.`, `!outputCompressing objects: 100% (2/2), done.`, `!outputWriting objects: 100% (2/2), 1.25 KiB | 0 bytes/s, done.`, `!outputTotal 2 (delta 0), reused 0 (delta 0)`, `!outputTo ${forkedRepo.git_url}`, `!output 5f9e5a3..f359511 master -> master`, ], {outputStyle:'opacity:.6'})} `35:T488,_style = html` `36:[] 2f:{"title":"Graffiti Wall Tutorial","cells":[{"id":0,"value":"_1 = md`# Graffiti Wall Tutorial`","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"_2 = md`\nWelcome! This tutorial is meant to teach you the basics of open source - by tagging our virtual graffiti wall!\n\nthis is what the wall looks like:\n\n${wall}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"_2_2 = md`You'll be adding your own tag this wall!\n\nEach every individual tag you see here is it's own open source contribution - or, a **commit**. \nA contributor added\ntheir own tag by adding a \\`.json\\` file into the [Graffiti Wall repository](https://github.com/eceusc/graffiti-wall) - \nthen sent a **pull request** to add their commit to the project. Finally, a maintainer of the graffiti wall project \n([Alex Garcia](https://github.com/asg017) or [Victor Miranda](https://github.com/vmm2297)) **reviewed and approved** the proposed changes, and the tags were added to the wall!\n\n\nThis workshop will guide you step-by-step how to do the same thing!\n\n\nIn the end, your tag will look something like:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"_2_3 = {\n let i = 1;\n while(i)\n yield Promises.delay(1000, html`\n

\n ${example_cell(chance().name()).next().value}\n

`)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"_2_5 = md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"_4 = md`## Instructions\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"_5 = md`### Step 0: Pre-Requisites\n\nHopefully you've done this before the workshop, but just to recap, make sure you:\n\n1. Have a [GitHub](https://github.com/) account\n2. Have a [Glitch](https://glitch.com/) account (can sign up with your GitHub account)\n3. (optional) Sign up for our Slack workspace to ask questions! https://eceopensource.slack.com/signup\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"___ = md`Also, please fill out the information below! We'll use it to personalize this guide to make it easier 😃`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"viewof _username = {\n \n const t= text({\n title: 'GitHub Username',\n placeholder: \"username...\", \n description: \"Enter your GitHub username! E.g. asg017, zenoss, etc.\", submit: \"Submit\"\n })\n t.onsubmit = (e)=>{\n e.preventDefault();\n return false;\n }\n t.submit.addEventListener('click', async e=>{\n e.preventDefault()\n const target = e.target;\n target.value = 'checking username...'\n await checkGhUser(e.target.parentElement.input.value);\n if(ghUser)\n target.value = '👍'\n else\n target.value = 'oh no'\n return false\n })\n t.style = \"margin: 0 auto; width:350px;text-align:center;\"\n yield t\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"viewof _name = {\nconst t = text({\n title: 'Your First Name',\n placeholder: \"name...\"\n})\nt.style = \"margin: 0 auto; width:350px;text-align:center;\"\n yield t\n}\n\n\n/*html`\n\n`{\n \n const t = text({placeholder: \"Your first name\", submit: \"Go!\"})\n t.submit.addEventListener('click', e=>{\n e.target.value = '👍'\n })\n t.style = \"margin: 0 auto; width:350px;text-align:center;\"\n yield t\n}*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":917,"value":"__namehi = _name.length > 0 ? md`Cool! Hello ${_name}!` : md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"$$6 = {\n if(!ghUser.Ready) return html``;\n if(ghUser.message === 'Not Found'){\n return noGHUserCard()\n }\n return ghUserCard()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"_step1 = md`\n### Step 1: “Fork” the repository \n\nThe “repository” you will be contributing to can be found here:\n\n

https://github.com/eceusc/graffiti-wall

\n\n#### What *is* a repository?\n\nYou can think of a repository (repo) as a folder where all the code exists for a certain project. All of the code for our graffiti wall can be found inside [\\`eceusc/graffiti-wall\\`](https://github.com/eceusc/graffiti-wall), and you will make your contributions to this repository!\n\nYou are going to **fork** this repo. Forking means you’ll be making your own copy of the repo that is owned by your GitHub account! \n\nDo this by navigating to the [\\`eceusc/graffiti-wall\\`](https://github.com/eceusc/graffiti-wall) repo and clicking on the “Fork” button in the upper right, like so:\n\n${picWithSubtitle(assests.fork, 'how to fork a repo')}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"_step3 = md`\n### Step 3: Your own local Graffiti wall\n\nNow that you’re settled in with Glitch, to see *your own* graffiti wall, click on the Show Live button near the top!\n\n${picWithSubtitle(assests.glitch_showlive, 'Click \"Show Live\" to see your own graffiti wall!')}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"_tester = tester","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"_s4_s = md`\n\nOnce your satisfied with this, copy and paste whatever is on the textbox to the right into the empty \n\\`${_name}.json\\` file you have in glitch (with all the \\`{\\` \\`}\\` braces), and save the file - now you're ready\nfor the next step!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"_step6 = md`\n\n### Step 6: Make Pull Request \n\nOkay dope, now you've got you cool little \\`.json\\` file in your GitHub repo - but if you go to the \n[eceusc/graffiti-wall](https://github.com/eceusc/graffiti-wall) repo, it's not there - why??\n\nNOTE: I havent finished this part of the tutorial yet :( Go to this link Step 6!\n\nhttps://paper.dropbox.com/doc/GIT-GUD-Introduction-to-GitGitHub-xUn2KzhMbLhTJ4Y23KUjf\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"_step7 = md`\n\n### Step 7: Wait for approval\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"_step8 = md`\n\n### Step 8: Done!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"ll = md`Once you’ve done this, please click this button to see if you did it right!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"glitchStyle = ({commandPrefix:'app@random-name:~ 09:04 $ ', commandPrefixStyle:'color:#00BA13;'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"chkRepo = {\n const b= btn(\"Check Repo\", function(e){\n console.log('clicked')\n mutable forkedRepo = checkForkedRepo()\n })\n yield b;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"_forkedRepoCheck = {\n await forkedRepo;\n if(forkedRepo==='waiting')\n return html``\n return !forkedRepo \n ? ohNo(md`You haven't forked the repository yet!`)\n : woohoo('you did it!')\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"//___=md`Awesome! now, whatever changes you make to /graffiti-wall will only effect your repo - they will have no effect on the original eceusc/graffiti-wall repo (until you make a pull request in Step 6!). `","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"ghUserCard = (params={}) =>{\n let {style=''} = params;\n return html`\n

\n $\"Avatar\"$ \n

${ghUser.name}

${ghUser.login}

\n\n`\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"noGHUserCard = ()=>html`not fonuud :(`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"githubLogo = {\n //https://github.com/simple-icons/simple-icons\nlet githubD = 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'\n const svg = d3.select(DOM.svg(32,32))\n svg.append('path').attr('d', githubD)\n yield svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"md`## GitHub Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":834,"value":"ghUser","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"mutable ghUser = null ","pinned":false,"hidden":false,"mode":"ojs"},{"id":817,"value":"checkGhUser('asg017')","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"checkGhUser = async(u) => {\n{\n if(!u) return;\n mutable ghUser = await fetch(`https://api.github.com/users/${u}`)\n .then( (r) => r.json())\n .then(o=>o.message==='Not Found' ? null : o)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"origRepo = await fetch(`https://api.github.com/repos/eceusc/graffiti-wall`).then( (r) => r.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"mutable forkedRepo = await checkForkedRepo()","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"checkForkedRepo = async function*(){\n //yield false;\n //ghUser;\n if ((ghUser.Ready && ghUser.message !== 'Not Found')) {\n const resp = await fetch(`https://api.github.com/repos/${_username}/graffiti-wall`).then( (r) => r.json())\n yield resp\n }\n else {\n yield 'waiting';\n }\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"compareRepos = {\n if (ghUser.message === 'Ready')\n return d3.json(`https://api.github.com/repos/eceusc/messenger-bot/compare/master...${ghUser.login}:master`)\n .then(o=>{o['Ready']=true;return o;})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"picWithSubtitle = (pic, subtitle) => html`\n

\n $\"${subtitle}\"/$ \n

\n ${subtitle}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"ohNo = (msg)=>html`\n

\n ${msg || ''}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"woohoo = (msg) => \n\nhtml`\n

\n 🎉\n

${msg}
👇🏽 continue below 👇🏽

\n \n\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":568,"value":"example_cell","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"btn = (msg, e) => {\n const btn = html`

${msg}

`\n if(e) btn.addEventListener('click', e)\n return btn\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"assests = ({\n pr_button: 'https://gist.githubusercontent.com/asg017/192820f769d22015ac871cf5111fc642/raw/24b3dfc368c44f60f670ef8930a5670ae4eb2604/image.png',\n new_pr: 'https://gist.githubusercontent.com/asg017/192820f769d22015ac871cf5111fc642/raw/24b3dfc368c44f60f670ef8930a5670ae4eb2604/gitpr.gif',\n fork: 'https://gist.githubusercontent.com/asg017/192820f769d22015ac871cf5111fc642/raw/24b3dfc368c44f60f670ef8930a5670ae4eb2604/gitfork.gif',\n glitch_new:\n 'https://gist.githubusercontent.com/asg017/192820f769d22015ac871cf5111fc642/raw/a1f6961142aad90ab0eba5461bbdd32bcb784d7f/glitch-new.png',\n glitch_terminal:\n 'https://gist.githubusercontent.com/asg017/192820f769d22015ac871cf5111fc642/raw/40375ed8fcf2ad02fdff66daa647794aa7c373c7/glitch-console.png',\n glitch_showlive:\n 'https://gist.githubusercontent.com/asg017/192820f769d22015ac871cf5111fc642/raw/4232630e1dbeeec590c6012839d9e778ac3d5e3e/glitch-showlive.png',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":874,"value":"alexIsTerrible()","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"alexIsTerrible = () => html`

Alex is dumb and didnt finish this :'( Angry table flip\n(ノಠ益ಠ)ノ彡┻━┻

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"import {text, dot} from '@asg017/toolbox'","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"import {underConstruction} from '@asg017/messages'","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"import {Terminal} from '@asg017/terminal'","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"import {glitch} from '@asg017/glitch'","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"chance = require('chance')","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"import {example_cell,tester, wall} from '@asg017/graffiti-wall'","pinned":false,"hidden":false,"mode":"ojs"},{"id":923,"value":"astyle = html`