-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1908 lines (1466 loc) · 110 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>code societies cooperative web page</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
padding: 0 20px;
font-family: monospace;
background: #FFA500;
color: white;
font-size: 1em;
height: 100vh;
overflow: hidden;
}
p {
font-size: 1.25em;
}
.sticky {
position: absolute;
top: 0;
left: 0;
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
cursor: nw-resize;
width: 100%;
}
.friendz {
background: transparent;
position: fixed;
right: 0;
bottom: 30%;
padding: 20px;
border: 4px solid white;
}
a {
display: block;
color: white;
font-size: 1.125em;
margin-bottom: 5px;
}
.home {
padding: 10px;
}
.home img {
display: block;
width: 30%;
position: absolute;
right: 120px;
bottom: 40px;
}
.it-begins {
padding: 200px 120px;
width: 80%;
}
.homepage-as-ethics img {
display: block;
margin-bottom: 230px;
width: 50%;
}
.ree-1 {
position: absolute;
top: 30%;
right: 80%;
width: 20%;
}
.ree-2 {
position: absolute;
top: 5%;
right: 65%;
width: 20%;
}
.ree-3 {
position: absolute;
top: 30%;
right: 45%;
width: 20%;
}
.ree-4 {
position: absolute;
top: 30%;
right: 20%;
width: 20%;
}
.ree-5 {
position: absolute;
top: 35%;
right: 45%;
width: 20%;
}
.ree-hol-1 {
position: absolute;
top: 30%;
left: 50%;
width: 20%;
}
.ree-hol-2 {
position: absolute;
top: 25%;
left: 45%;
width: 20%;
}
.ree-hol-3 {
position: absolute;
top: 80%;
left: 15%;
width: 20%;
}
.ree-hol-4 {
position: absolute;
top: 50%;
left: 90%;
width: 20%;
}
.ree-hol-5 {
position: absolute;
top: 5%;
left: 5%;
width: 20%;
}
.markdown-syllabus {
color: white;
position: absolute;
overflow: scroll;
height: 100%;
top: 0;
left: 0;
right: 0;
width: 100%;
}
.markdown-syllabus.essay pre {font-size: 1.3em; background-color: sienna; width: 30%; margin-left: 33px;
margin-top: 23px; padding: 10px 10px 40px 10px; margin-bottom: 150px;}
.markdown-syllabus.computational-methods pre { background: black; width: 60%; margin-top: 3px; margin-left: 20px; }
.markdown-syllabus.computational-scrawl pre { background: blue; width: 90%; margin-top: 30px; margin-left: 12px; }
.markdown-syllabus.floating-data-with-everest-pipkin pre {background-color: brown; width: 80%;margin-top: 5px;margin-left: 8px;}
.markdown-syllabus.distributed-web-with-taeyoon-choi pre {background-color: lightseagreen; width: 70%;margin-top: 0;margin-left: 30px;}
.markdown-syllabus.wyfy-with-bufu pre {background-color:darkorchid; width: 88%;margin-top: 50px;margin-left: 18px;}
.markdown-syllabus.ethicsware-with-dan-taeyoung pre {background-color: coral; width: 45%;margin-top: 90px;margin-left: 40px;}
.markdown-syllabus.cybernetics-of-sex-with-melanie-hoff pre {background-color: darkslateblue; width: 67%;margin-top: 20px;margin-left: 42px;}
.markdown-syllabus.we-play-programmed-with-fluct pre {background-color: red; width: 73%;margin-top: 65px;margin-left: 8px;}
.markdown-syllabus.terraforming-with-ingrid-burrington pre {background-color: blue; width: 65%;margin-top: 85px;margin-left: 15px;}
.markdown-syllabus.software-as-ideology-with-american-artist pre {background-color: green; width: 62%;margin-top: 48px;margin-left: 5px;}
.markdown-syllabus.critical-simulation-with-nora-khan pre {background-color: orangered; width: 44%;margin-top: 8px;margin-left: 50px;}
.folder-narrative-screenshot {
display: block;
margin-bottom: 16px;
width: 94%;
}
.auto-writing {
display: block;
margin-bottom: 16px;
}
.auto-writing-ss {
display: block;
}
.auto-writing-ss:first-child() {
margin-left: 60%;
}
.auto-writing-ss:nth-child(even) {
width: 90%;
}
.distributed-web {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.distributed-web img {
display: block;
margin-bottom: 12px;
width: 20%;
padding: 5px;
-webkit-clip-path: polygon(50% 0%, 80% 10%, 78% 35%, 100% 70%, 80% 90%, 50% 100%, 30% 80%, 0% 70%, 5% 43%, 20% 10%);
clip-path: polygon(50% 0%, 80% 10%, 78% 35%, 100% 70%, 80% 90%, 50% 100%, 30% 80%, 0% 70%, 5% 43%, 20% 10%);
}
.distributed-web img:nth-child(odd) {
-webkit-clip-path: polygon(50% 0%, 70% 18%, 95% 12%, 100% 70%, 80% 90%, 51% 77%, 18% 98%, 0% 70%, 4% 21%, 20% 10%);
clip-path: polygon(50% 0%, 70% 18%, 95% 12%, 100% 70%, 80% 90%, 51% 77%, 18% 98%, 0% 70%, 4% 21%, 20% 10%);
width: 38%;
}
.wyfy img {
display: block;
width: 70%;
}
.wyfy p {
background-color: darkslategrey;
}
.asemic img {
display: block;
margin-bottom: 40px;
width: 50%;
}
.asemic img:first-child {
width: 100%;
}
.asemic img:nth-child(3){
width: 30%;
margin-left: 50%;
}
.ethicsware img {
display: block;
margin-bottom: 80px;
width: 70%;
}
.ethicsware p {
background-color: deeppink;
width: 85%;
margin-bottom: 40px;
}
.layer-of-earth.five p {
background-color: brown;
font-size: 2em;
position: absolute;
left: 0px;
width: 96%;
padding: 20px;
bottom: 20%;
}
.floating-data p {
background-color: forestgreen;
font-size: 4em;
width: 68%;
padding: 10px;
margin-left: 90px;
margin-top: 90px;
}
.floating-data img {
display: block;
width: 30%;
margin: 40px 0 120px 38px;
}
.ethicsware p:nth-child(odd) {
font-size: 3em;
}
.cybernetics-of-sex img {
display: block;
width: 80%;
margin: 0px 0 30px 98px;
}
.we-play-programmed p {
background-color: crimson;
font-size: 2em;
width: 88%;
padding: 20px;
}
.we-play-programmed img {
display: block;
width: 30%;
margin-bottom: 30px;
}
.terraforming-2 img {
display: block;
width: 80%;
margin-bottom: 30px;
margin-top: 90px;
}
.nabil-thought p {
background-color: olivedrab;
font-size: 4em;
width: 63%;
padding: 5px;
margin-top: 220px;
margin-bottom: 300px;
margin-left: 20px;
}
.ephemera {
padding: 3px;
width: 100%;
}
.ephemera img {
width: 35%;
}
.ephemera.whiteboard img { margin-top: 33%; margin-left: 33%; width: 60%; margin-bottom: 400px;}
.ephemera.slack-message img {margin-top: 16%; margin-left: 13%; width: 40%; margin-bottom: 500px; }
.ephemera.rock-photo img { margin-top: 43%; margin-left: 53%; width: 45%; }
.software-as-ideology img:first-child {
display: block;
width: 40%;
margin-left: 54%;
margin-top: 30%;
background: yellow;
padding: 10px;
}
.software-as-ideology img:nth-child(2) {
display: block;
width: 80%;
margin-left: 20%;
margin-bottom: 100px;
margin-top: 20%;
}
.software-as-ideology pre {
background-color: hotpink;
}
pre {
padding: 20px;
width: 100%;
white-space: pre-line;
max-width: 80%;
word-wrap: break-word;
}
.critical-simulation pre {
background-color: mediumslateblue;
white-space: pre;
margin-left: 20%;
max-width: 60%;
}
.layer-of-earth {
width: 100%;
overflow: hidden;
height: 100vh;
}
.nadja-link {
margin-left: 30%;
margin-top: 20%;
width: 80%;
}
.amiri-baraka-text img {
margin-left: 1%;
margin-top: 4%;
width: 70%;
}
.ree-ter-1 {
position: absolute;
top: 10%;
left: 20%;
width: 30%;
}
.ree-ter-2 {
position: absolute;
top: 15%;
left: 65%;
width: 24%;
}
.ree-ter-3 {
position: absolute;
top: 90%;
left: 85%;
width: 30%;
}
.ree-ter-4 {
position: absolute;
top: 40%;
left: 3%;
width: 24%;
}
.ree-ter-5 {
position: absolute;
top: 5%;
left: 5%;
width: 25%;
}
.ree-ter-6 {
position: absolute;
top: 45%;
left: 35%;
width: 25%;
}
.ree-ter-7 {
position: absolute;
top: 75%;
left: 25%;
width: 35%;
}
.ree-ter-8 {
position: absolute;
top: -10%;
left: 1%;
width: 15%;
}
.ree-ter-9 {
position: absolute;
top: 45%;
left: 75%;
width: 25%;
}
.ree-ter-10 {
position: absolute;
top: 1%;
right: 5%;
width: 30%;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body class="time-traveling-towards-the-past">
<section tabindex="0" class="home sticky poetic-edge">
<h1>
code societies<br>winter 2019<br>
<br>
<br>here we are building <br>
a cooperative web page<br>with care<br>
<img alt="taeyoon slack message: " src="ephemera/taeyoon-screenshot.png" />
</h1>
</section>
<section tabindex="0" class="it-begins sticky poetic-edge">
<div class="friendz">
<p>code societies friendz</p>
<div id="sfpc-marquee"></div>
</div>
<p>
<em>some initial thoughts:</em>
</p>
<p>what does a cooperative web page look like? curious about what happens when we simultaneously write code inside of this index.html file</p>
<div class="publishing-flow">
<p><em>potential publishing flow:</em></p>
<p>each day students can update/ add files to this github repository</p>
<p>maybe we can also auto publish to a github pages site?</p>
<p>suggestions? comments?</p>
</div>
<div class="ideas-for-this-site">
<p>each person on the site can be "seen" here as a cursor</p>
<p>the cursor moves waaaay slower or maybe just a little slower that expected</p>
</div>
<div class="homepage-as-ethics">
<img alt="a photo of a drawing we made for a homepage which is representative of our code of ethics" src="ephemera/group-homepage-as-coe.jpg" />
</div>
</section>
<section tabindex="0" class="layer-of-earth one sticky poetic-edge">
<img class="ree-1" alt="photo of rare earth element yttrium" src="ephemera/ree-yttrium.png" />
<img class="ree-2" alt="photo of rare earth element yttrium" src="ephemera/ree-yttrium.png" />
<img class="ree-3" alt="photo of rare earth element yttrium" src="ephemera/ree-yttrium.png" />
<img class="ree-4" alt="photo of rare earth element yttrium" src="ephemera/ree-yttrium.png" />
<img class="ree-5" alt="photo of rare earth element yttrium" src="ephemera/ree-yttrium.png" />
</section>
<section tabindex="0" class="markdown-syllabus computational-methods sticky poetic-edge">
<pre>
# Computational Methods of Code Societies
Day 2 ~ Code Societies ~ Winter 2019
Taught by Melanie Hoff & Nabil Hassein
✿ this guide was compiled by emma @doodybrains rae norton
_🍃The computer, the programmer, the relationship they have with each other, and the environments they create🍃_
A one-session class covering the primary computational methods of Code Societies Classes: Winter 2019. Together we will defamiliarize and refamiliarize ourselves with the Command Line Interface, Git/Github, running Python 3 in the terminal, & running Python 3 with Anaconda Jupyter Notebook. We will navigate folder structure narratives with the command line, time travel with Git, code socially with Github, and process language with Python.
## 🌿Before we begin...
- You should have the following programs installed on your system:
- Atom
- Git
- Anaconda
- You should also have a GitHub account
- Original syllabus lives here: https://docs.google.com/document/d/1nTAGOnsBCW5pTe0KfKtdEfqeSwC8YuFhBSad0Xu_Zdw/edit#heading=h.j1gmhmtgvufk
- Download the folder at this link: https://drive.google.com/file/d/1DtBmjeguFjsyHmj8oqADk8NEv14g1bCh/view
- Unzip the folder and move it into to your “home” or "root" folder (the one with the little house icon on a Mac).
## 🌿We can think of the “environment” as way that a programmer builds their personal workflow in the domain of their computer…
> Coding isn’t something that just happens in your text editor or terminal. Coding can be a wholistic computer practice, a new relationship you have with your computer & your computer habits. from the way you name your files or organize your folders, to completely changing how you perform routine tasks on your computer such as moving a file.
To ensure that you can easily access Atom (the text editor we will be using throughout this guide) follow these steps:
1. Open Atom
2. Click the Atom menu in the top left corner and choose “install shell commands”. This will ensure that you can access Atom from the Terminal also known as the *command line*.
## 🌿What is the command line?
Think about all of the applications you open on a day to day basis on your computer. One of the many mechanisms we use to do these things is dragging and clicking different icons and folders using a mouse or trackpad.
Let’s take a small tour of our computers by following these steps:
1. Open up a new Finder window.
2. Navigate to your home folder. It is helpful to use the “folder view”, you can do this by clicking the little icon with the three rectangles at the top of the Finder window.
3. Click on the code-societies folder
4. Notice that there are two folders inside of that folder
5. Now click on the computational-methods-code-societies folder
6. Notice that there is a folder called house
7. If you click on house you will notice a few more folders denoting the rooms in the house
8. Keep going!
> This folder structure follows the structure of a house which is a spatial metaphor for how we navigate folders on our computer. For example, when you’re in a house and standing in the kitchen and you wanted to go to bed you would need to navigate from the kitchen into your bedroom before you actually tried to lay down.
Another way to do this kind of navigation is by using the command line, a text-based mechanism for doing the same kind of navigation between folders and files.
The command line can be seen a more intimate way to interact with your computer, it’s kind of like having a conversation, you can ask your computer to do something and it might respond to you with a confirmation of what you typed or some kind of prompt or a scrolling list of crazy words letting you know that it is in the process of installing some stuff or nothing at all!
> sometimes you will ask your computer to install something and it will not give you any kind of response but the thing you wanted to install was actually successful. the reason the computer will not return any kind of response takes us way back into the history of computing when the computer would respond to a programmer by printing out its response on a piece of paper. In order to save paper computers were programmed to just do nothing if the command was successful.
## 🌿Lets embark on a Folder Structure Narrative !
> Moving forward you can think of the Terminal (command line) as the “secret trap door/master key/teleportation portal” to your computer.
The programming language of the terminal is called Bash. This is the language that allows us to write commands that the Terminal can understand so that we can do things like navigate the file system (as we did above) on our computers. Bash files, also known as scripts because they often execute pieces of code, look something like this `name-of-bash-script.sh`
Follow these steps to begin:
1. Press command and spacebar
2. Type in “Terminal”
3. Press Enter
4. When you open the Terminal you’ll see something called a bash prompt: You’ll see your user name and a `~` The `~` represents your home directory.
5. You can verify that you’re in the home directory by typing `ls` and pressing enter. You should see a list of all of the folders and files directly inside of your home directory.
6. You change directories from your home directory by typing `cd` and pressing enter.
7. If you type in `cd code-societies` your bash prompt will now look something like this `your username:code-societies$`
8. Remember you can verify that you’re in the a particular directory by looking at your bash prompt as well as by running the `ls` command. With the `ls` command you should see all of the folders and files inside the directory you are currently in.
9. From the `code-socities` folder you can cd into `computational-methods-code-societies`
10. Finally you can cd in the house folder.
11. Welcome to the house tour! Lets `cd` into the `kitchen`!
12. Run `ls`. Do you see the file `pots-and-pans.txt` ?
13. Try running this command `cat pots-and-pans.txt`
14. This `cat` command will display all of contents of that file right inside your terminal ! How beautiful !
15. Now you lets `cd` into the `garden`
16. Run ls again and notice a file called `grow.sh`. We know this is a bash script because of the `.sh`. This means that we can execute this script (or program) inside of terminal.
17. To see the bash script in action type `bash grow.sh` and press enter. A bunch of beautiful flowers should appear!
18. Notice if you run `cat grow.sh` you will see the contents of the script that produced the bunch of beautiful flowers!
The commands we’ve learned so far are:
`cd`
`ls`
`cat`
`bash`
Some more helpful commands:
`pwd`
`open .`
opens the folder you are currently inside of
`cd ..`
changes directories in reverse
tab key to autocomplete
up and down arrow keys
`touch`
creates a new file
`atom .`
opens the folder you are currently inside of with Atom
`mkdir`
makes a new directory
`touch myfile.txt`
creates a new file called myfile.txt
`rm foldername`
removes a folder called foldername
`rm filename.txt`
removes a file called filename.txt
`say`
asks your terminal to say whatever you have types
> If you try to run cat on a jpg file the terminal will print out all of the “text” for the file.
## 🌿Now you can create your _own_ Folder Structure Narrative
> Example of artist, Ryan Kuo who used navigating a generic looking Mac Application to talk about navigating family dynamics in his piece, [Family Maker](https://www.dropbox.com/s/ra6gl7hakv4n3qg/Screenshot%202019-01-08%2013.34.51.png?dl=0)
1. Run `cd ..` as many times as you need until your bash prompt tells you that you are inside of the `computational-methods-code-societies` folder
2. We will use the `mkdir` command to create some new folders. mkdir stands for make directory. For example, you can run `mkdir my-new-folder` and that folder will be created inside of your `computational-methods-code-societies directory`.
3. Use the touch command to create new files within the folders. It is helpful to make sure that the names of your folders and files do not have spaces or capital letters
4. Use `cd name-of-folder` and `cd ..` to move in and out of folders
5. Use `rm -rf name-of-folder-or-file` (remove recursive force) to delete items but be careful you can’t undo this!
6. If you see a bash command and you want to know exactly what it does you can use the man command, for example `man ls` will show you what ls stands for. You can press `q` to exit the explanation.
7. If you want to see hidden files (files that start with a dot) within a directory you can run `ls -AF`
8. You can run the `clear` command to refresh your terminal window.
### 🌵Some more Folder Structure Narrative examples
| Subject | Link |
| ------ | ------ |
| City of my dreams | https://github.com/doodybrains/computational-methods-code-societies-iris/tree/master/cities-in-my-dreams |
| A physical desktop | https://github.com/mimidoan/methods |
| A bodega | https://github.com/a-sparse-city/computational-methods-code-societies/tree/master/bodega |
| Universe of Tushar | https://github.com/Saltzshaker/universe-of-tushar-computational-methods-code-societies-1 |
| The roots: a plant | https://github.com/jarretbryan/acgillette-computational-methods-code-society |
| Champagne glasses | https://github.com/acgillette/computational-methods-code-societies-jarret/tree/master/champagne_glass |
| Clouds | https://github.com/mattohagan/yesmoon-computational-methods-code-societies
| Space |https://github.com/yesmoon/mattohagan-computational-methods-code-societies
| Guilty pleasures |https://github.com/nadjao/computational-methods-code-societies-sonny
| Semantic world of familiar things | https://github.com/nicolch/computational-methods-code-societies
| Levels of hunger | https://github.com/sonnynomnom/computational-methods-code-society-nadjao
| Crowded train | https://github.com/iris-qu/computational-methods-code-societies-emma-rae
| Basic | https://github.com/vcampbell89/computational-methods-code-societies
| House | https://github.com/asd0999/emily-s-computational-methods-code-societies-1
| Stages of Life | https://github.com/csanchez73/ingrid-computational-methods-code-societies
| College Home | https://github.com/ilange/Carlos-computational-methods-code-societies
| Order of activities after waking up |
| People met today |
## 🌿What is git??
> A version control and time travel software! Suspend your belief for just a moment!
To begin `cd ..` and `cd ..` again until you are inside `computational-methods-code-societies`
✨Enter the command: `git init`
Now follow these steps:
1. `git add .`
2. `cd time-travel/`
3. `ls`
4. You should now see a folder called `sensations.txt`
5. `atom .`
6. Edit the `sensations.txt` file in Atom
> For the next 60s ⏲, inside the `sensations.txt` file write down the small sensations and sounds you’re experiencing right now in this moment. Volume of words > coherence
7. Save the file and go back to terminal.
8. `git commit -am “my first sensations”`
> Repeat steps 6 - 7 two more times;
9. Make sure you `git commit -m “my second sensations”` + `git commit -m “my third sensations”`
10. `git log`
11. Copy one of the hashes from one of your commits. The hash looks something like this `6c750cb264c6d5ad0fac18863cafd0df35315fce`
12. Press `q` to exit log
13. `git show <place your hash here>` this allows you to review the detailed history of a given change
> Now we’re going to time travel!!
14. `git checkout <place the hash of your first commit here>`
> This is like traveling through time to past versions of yourself and the record of the sensations you were feeling at multiple distinct moments in the past 🔮
15. Advanced, optional: rewriting history with `git rebase`
## 🌿What is GitHub?
Git is an open source software that GitHub capitalizes on. Git allows for collaboration. GitHub will allow you to save, and edit and update your code. For this guide we will be pushing our Folder Strucuture Narrative up to a new GitHub repository
Make sure to run `git checkout master` to go back to your latest code (all three sensations).
1. Login to GitHub or create account.
2. Go to repositories page and click new,
3. Name it `computational-methods-code-societies`
4. Click the Create Repository button
5. Type `git remote rm origin` (this ensures that you will be able to add your own github repository as the origin)
6. Follow the instructions at your GitHub repository for “push to an existing repository”
7. Copy each of the following commands one at a time, paste it into the terminal and press enter
8. git remote add origin <YOUR URL HERE>
9. Before running the following command you should ensure that all of your files and folders are ready to be added to your repository. You can do this by running `git add .` Keep in mind that git only cares about files, so it will not upload folders if they don’t have files inside of them.
10. Now you can run `git commit -am “name of message”` (the message describes what you are adding)
11. Now type `git push -u origin master` (the name origin is just a naming convention and is referring to the url for your repository)
12. Prompt for username and password: Passwords are invisible in terminal
13. Optional: setting up ssh keys, if you don’t want to constantly enter your username and password
Common workflow:
`git pull`
make changes
save file changes
run `git status` to see a list of what files changes have been made
`git commit -am “my changes message”`
`git push`
#### Partner Activity
1. Fork the `computational-methods-code-societies` repo of your partner
2. Rename this forked repo on your github via the Settings button to include their name
3. Press the green Git Clone button and copy paste: `git clone <the url of the forked repo>` into your terminal (make sure that you are doing this inside your home directory)
4. Now you have a copy of your partner’s repo on your computer.
5. Take a look at your partner’s invented Folder Structure Narrative from earlier in class.
6. Using terminal, build on top of what your partner was going for with their narrative.
7. `git add .`
8. `git commit -am “my addition to my partner’s narrative”`
9. `git push`
## 🌿Python
There are a lot of different ways to interact with Python. One way is using the interactive interpreter. Another way is using Jupyter Notebooks. In this guide we will mostly be working within a Jupyter Notebook.
> Don’t forget to check out Nabil’s workshop Mathematics as Religious Experience on Dec 23
#### To ensure that Python is installed:
Type word python and press enter you should get back something like this Python 3.7.1 (default, Dec 14 2018, 13:28:58)[Clang 4.0.1 (tags/RELEASE_401/final)] ::
#### Python terminology + conventions
In terminal you can write `print(hello world)` and the terminal will print out the line "hello world". In Python you will usually write the name of the function, open parentheses, argument, closed parentheses
> When learning to program make sure to give yourself time! Check out the book _Teach yourself programming in 10 years_
Now we will do some more things with Python:
1. Open atom
2. Create a new file
3. Paste in the following:
`sensations = open(“sensations.txt”)`
4. Creating a variable that is going to store the information inside sensations.txt. Open is telling my computer to looks for a file called sensations.txt within the directory that you are currently in. Don’t forget to use quotations for your file name!
5. Now add print(sensations)
This will print out whatever is inside of the variable sensations. Terminal will return:
`<_io.TextIOWrapper name='sensations.txt' mode='r' encoding='UTF-8'>`
## Loops
In the sensations.txt file add the following lines:
```sh
for line in sensations:
print(line)
```
The sensations.txt file should now look like this:
```sh
sensations = open("sensations.txt")
for line in sensations:
print(line)
```
Now you can save the file and go back to the Terminal.
In the terminal you can write `jupyter notebook` and press enter. This will automatically open up a new browser window.
> Programming is like magic :)
Click on `Introduction to Python` file.
##### How can we work with these python notebooks?
Here is a list of Jupyter Notebook Keyboard Shortcuts:
- shift + enter run cell, select below.
- ctrl + enter run cell.
- option + enter run cell, insert below.
- A insert cell above.
- B insert cell below.
- C copy cell.
- V paste cell.
- D , D delete selected cell.
- Use down arrow key to navigate to next section or block of code
- When clock of code is highlighted in blue you can press command enter (or control enter) to run it (you can press the button also!)
- Debugging
> think like a scientist and come up with a hypothesis for what you think is going on then do a series of test to try and prove yourself wrong
- Once we have gotten to the end of the file remember that we need to open the file again before we can successfully run it!
- Make sure to read the error messages. Try your best to understand what the computer is saying.
For example:
- `Traceback (most recent call last)` is referring to the most recent place in the code where an error was found
- `Io` stands for input ouput
##### Perhaps the #1 programming skill is “googling the error message”
More resources:
- https://drive.google.com/file/d/1gxjTV0SjIgedS7mGaLGwwf6_-7w380lL/view
- https://devhints.io/
</pre>
</section>
<section tabindex="0" class="layer-of-earth two sticky poetic-edge">
<img class="ree-hol-1" alt="photo of rare earth element holmium" src="ephemera/ree-holmium.png" />
<img class="ree-hol-2" alt="photo of rare earth element holmium" src="ephemera/ree-holmium.png" />
<img class="ree-hol-3" alt="photo of rare earth element holmium" src="ephemera/ree-holmium.png" />
<img class="ree-hol-4" alt="photo of rare earth element holmium" src="ephemera/ree-holmium.png" />
<img class="ree-hol-5" alt="photo of rare earth element holmium" src="ephemera/ree-holmium.png" />
</section>
<section tabindex="0" class="day-2 sticky poetic-edge">
<img tabindex="0" class="folder-narrative-screenshot" alt="screenshot of folder narrative structure by iris" src="ephemera/iris-folder-narrative.png"/>
<img tabindex="0" class="folder-narrative-screenshot" alt="screenshot of folder narrative structure by nicole" src="ephemera/nicole-folder-narrative.png" />
<img tabindex="0" class="folder-narrative-screenshot" alt="screenshot of folder narrative structure by yasmeen" src="ephemera/yasmeen-folder-narrative.png" />
</section>
<section tabindex="0" class="layer-of-earth three sticky poetic-edge">
<img class="ree-1" alt="photo of rare earth element yttrium" src="ephemera/ree-yttrium.png" />
<img class="ree-2" alt="photo of rare earth element yttrium" src="ephemera/ree-yttrium.png" />
<img class="ree-3" alt="photo of rare earth element yttrium" src="ephemera/ree-yttrium.png" />
<img class="ree-4" alt="photo of rare earth element yttrium" src="ephemera/ree-yttrium.png" />
<img class="ree-5" alt="photo of rare earth element yttrium" src="ephemera/ree-yttrium.png" />
</section>
<section tabindex="0" class="markdown-syllabus computational-scrawl sticky poetic-edge">
<pre>
# The Computational Scrawl
[Allison Parrish](http://www.decontextualize.com) for SFPC Code Societies January 2019.
## Description
This two-part workshop examines the physical gesture and material artifacts of the act of writing, as seen through the lens of computation and digital media. Taking contemporary and historical practices in asemic poetry, experimental typography and automatic writing as inspiration, participants will use the Python programming language to prototype speculative writing technologies that challenge conventional reading practices and notions of sense-making.
## Objectives
The goal of the workshop is twofold: First, to introduce asemic and automatic writing practices as historical and contemporary practices and invite students to expand on these practices with computation; second, using asemic and automatic writing as a lens, encourage discussion around the rhetoric and materiality of language in digital and computational contexts.
## Requirements
You'll need to bring a laptop with you. Please install [Anaconda](https://www.anaconda.com/download/) (Python 3.7+, 64-bit) on your computer before the first session.
## Schedule
### Session 1
* In-class exercise: Invent digital writing from scratch
* Presentation: A brief history of automatic writing
* In-class exercise: Free-writing and the textual interface
* Python: [Predictive text and text generation](https://gist.github.com/aparrish/0739ea3d15bf64cd4de242a48c81c631)
* Composing text with grammars: [Tracery tutorial](http://air.decontextualize.com/tracery/), [Tracery in Python](https://github.com/aparrish/rwet/blob/master/tracery-and-python.ipynb) (if there's time)
Assignment: Write Python code that performs automatic writing. Contrast the feeling that the output of your program evokes with the feeling evoked by your own free-writing (or other automatic writing). Contrast the process of writing a computer program to produce written language with using a conventional writing interface (keyboard, phone, pen and paper) to do the same.
### Session 2
* Writing as gesture
* [Flat, randomness, curves, asemic writing](https://gist.github.com/aparrish/2209201ed3ecf35332d96264e66ce681)
Assignment: Write Python code that produces asemic writing. Use this as an opportunity to design an experiment to answer the question: what is the boundary between "writing" and "non-writing"? Computation can be understood as introducing a "layer of indirection" between the physical gesture of writing and the visible output. How does this affect the way that you read/interpret the output of your code?
## Reading
### Required
Boice, Robert, and Patricia E. Meyers. “[Two Parallel Traditions: Automatic Writing and Free Writing.](https://scholar.google.com/scholar?q=Two+Parallel+Traditions%3A+Automatic+Writing+and+Free+Writing)” Written Communication, vol. 3, no. 4, Oct. 1986, pp. 471–90. SAGE Journals, doi:10.1177/0741088386003004004.
Aima, Rahel. “Definition Not Found.” Real Life, Sept. 2016, https://reallifemag.com/definition-not-found/. (before session 2)
### Optional
Callich, Ty Casey. “Mean Less: My Experience With Asemic Writing.” Ty Casey Callich, 12 Oct. 2016, https://medium.com/@tylercaseycallich/mean-less-my-experience-with-asemic-writing-5c5791e91162.
Bury, Louis. “Mirtha Dermisache’s Writing Is a Rorschach Test.” Hyperallergic, 24 June 2018. https://hyperallergic.com/444659/selected-writings-mirtha-dermisache-ugly-duckling-presse-siglio-2017/
Romano, Aja. “How Ouija Boards Work. (Hint: It’s Not Ghosts.).” Vox, 29 Oct. 2016, https://www.vox.com/2016/10/29/13301590/how-ouija-boards-work-debunked-ideomotor-effect
Newton, Casey. “When Her Best Friend Died, She Used Artificial Intelligence to Keep Talking to Him.” TheVerge.Com, 6 Oct. 2016, http://www.theverge.com/a/luka-artificial-intelligence-memorial-roman-mazurenko-bot.
</pre>
</section>
<section tabindex="0" class="layer-of-earth four sticky poetic-edge">
<img class="ree-hol-1" alt="photo of rare earth element holmium" src="ephemera/ree-holmium.png" />
<img class="ree-hol-2" alt="photo of rare earth element holmium" src="ephemera/ree-holmium.png" />
<img class="ree-hol-3" alt="photo of rare earth element holmium" src="ephemera/ree-holmium.png" />
<img class="ree-hol-4" alt="photo of rare earth element holmium" src="ephemera/ree-holmium.png" />
<img class="ree-hol-5" alt="photo of rare earth element holmium" src="ephemera/ree-holmium.png" />
</section>
<section tabindex="0" class="automatic-writing sticky poetic-edge">
<img class="auto-writing" alt="screenshot of automatic writing made by AC" src="ephemera/ac-automatic-writing.png" />
<img class="auto-writing" alt="Photo of class doing automatic writing on their computers." src="ephemera/blog-image-comp-scrawl-1.jpg" />
</section>
<section tabindex="0" class="layer-of-earth five sticky poetic-edge">
<img class="ree-hol-1" alt="photo of rare earth element holmium" src="ephemera/ree-holmium.png" />
<img class="ree-hol-2" alt="photo of rare earth element holmium" src="ephemera/ree-holmium.png" />
<img class="ree-hol-3" alt="photo of rare earth element holmium" src="ephemera/ree-holmium.png" />
<img class="ree-hol-4" alt="photo of rare earth element holmium" src="ephemera/ree-holmium.png" />
<img class="ree-hol-5" alt="photo of rare earth element holmium" src="ephemera/ree-holmium.png" />
</section>
<section tabindex="0" class="floating-data sticky poetic-edge">
<!-- floating-data -->
<img class="floating" alt="building your own data set lets you have hyper-spefic control for tone, vibe, content, language, and poetics of that space. making good generative work is 95% having the right material to work with. it all starts here." src="ephemera/floating-data.png" />
<p>"Scraping is perfect for data that is ungathered, under-respected, or generally lacks the resources to be bundled into
a set; data that is "floating."</p>
</section>
<section tabindex="0" class="markdown-syllabus floating-data-with-everest-pipkin sticky poetic-edge">
<pre>
Building Nets for Floating Data -- 1/10/19
Everest Pipkin
Office Hours: 4:30-6pm (before class)
Class Hours: 6:30-9:15pm
Class Description:
Building Nets for Floating Data is a one-session class on scraping information from websites, including text, images, and source code. We will talk about potential uses of large datasets, look at examples of artworks that use scraping as their informational backbone, and survey the ecosystem of online information gathering at large.
We will discuss popular alternatives to scraping, from APIs (online communication portals that serve data from organizations) to pre-gathered datasets uploaded to Github (for machine learning and other tasks). We will talk about this type of packaged data, as well as bias that is so often contained within.
By web-scraping without going through an organizational or corporate medium, we are able to make datasets that are more flexible, personal, and just. We are able to pull information from websites, organizations, or individuals that do not have the overhead to provide an official access point, as well as to build systems that help push back against the social, racial, economic, and other biases so often contained in large datasets. We may also be able to circumnavigate political or corporate ‘locks’ on data, scraping information that may be hidden.
After getting a handle on the landscape of web-scraping at large, we will talk about the type of websites that are easy to work with and look over example code in Python 3 and Node.js. By the end of the class, everyone will have a working web-scraper on their machine to use in the future.
Artwork to consider:
ICE dataset -- Scraped data of ICE Employees from LinkedIn, by Sam Lavigne
Shiv Integer -- 3d model Thingiverse bot, M Plummer-Fernandez and Julien Deswaef
Mosaic Virus -- Machine-learning generated Tulips by Anna Ridler
Suns from Sunsets from Flickr & Everyone’s Photos Any License -- Flickr collections from Penelope Umbrico
Felt Personality -- Felt soft-sculptures responding to scraped OKCupid Data By Laurie Frick
The Seeker -- A generated poetry book from WikiHow by Li Zi
Vr 3 -- A museum of all the water on the Unity Store by Pippin Barr
Some of my own work with generative text and poetry, object models, and cursors - most recently, I’ve never picked a protected flower.
Prerequisites:
Come to class with either Node.JS or Python 3 installed on your machine, or running in a Jupyter Notebook. (We will look at example code in both languages, and you may use whichever is more comfortable.) If you are unable to get these running on your own, please come by my office hours and we can get you set up before class.
Please also bring a website, forum, or online dataset that you are interested in scraping from. We will discuss what makes a good candidate for web-scraping together, but it will be useful to have a personal starting point.
Further use;
Please use the scraper to pull data from an online source that you may use as primary material for projects later on in the session.
</pre>
</section>
<section tabindex="0" class="distributed-web sticky poetic-edge">
<!-- distributed-web -->
<img class="dat-zine-screenshot" alt="screen shot of collective dat zine archive" src="ephemera/group-dat-zine-ss1.png" />
<img class="dat-zine-screenshot" alt="screen shot of collective dat zine archive" src="ephemera/group-dat-zine-ss2.png" />
<img class="dat-zine-screenshot" alt="screen shot of collective dat zine archive" src="ephemera/group-dat-zine-ss3.png" />
<img class="dat-zine-screenshot" alt="screen shot of collective dat zine archive" src="ephemera/group-dat-zine-ss4.png" />
<img class="dat-zine-screenshot" alt="screen shot of collective dat zine archive" src="ephemera/group-dat-zine-ss5.png" />
<img class="dat-zine-screenshot" alt="screen shot of collective dat zine archive" src="ephemera/group-dat-zine-ss6.png" />
<img class="dat-zine-screenshot" alt="screen shot of collective dat zine archive" src="ephemera/group-dat-zine-ss7.png" />
</section>
<section tabindex="0" class="markdown-syllabus distributed-web-with-taeyoon-choi sticky poetic-edge">
<pre>
Distributed Web of Care
Class for Code Societies at SFPC
by Taeyoon Choi
A class at Code Societies Winter 2019 at the School for Poetic Computation in New York City.
Distributed Web of Care is an initiative to code to care and code carefully. In this class there will engage in three different activities. First, we will investigate centralized, decentralized, distributed and peer to peer networks. We will analyze the popular technology platforms, focusing on its network infrastructure and terms of services. We will compare them with decentralized alternatives such as Dat Peer to Peer Protocol and Scuttlebutt. Second, we will take on performative exercises to explore the feeling of being in a network. We will learn to move around in physical space with strings in order to care, not control, each other. Lastly, we will imagine the kinds of network we want for the future and we will discuss how we can build it with code and code of conduct. We will distribute our code and code of conduct as zines in physical print and data, published with Dat.
Suggested readings
Reboot World by Paul Ford
Meet Ray Johnson, the Greatest Artist You’ve Never Heard Of by Rachel Tashjian
My website is a shifting house next to a river of knowledge. What could yours be? by Laurel Schwulst
Dat Zine Library by Zach Mandeville
Distributed Web of Care by Taeyoon Choi
Ethics and Archiving the Web by Distributed Web of Care
At the New York Tech Zine Fair, the Digital and the Tactile Converge by Megan N. Liberty
Low-tech Magazine
In class, we will use terminal, git and Dat. Please familiarize yourself with using the terminal. The class is based on a class from Summer 2018.
Concepts
Intersections of Race – Gender – Environment – Disability justice
Code Ecologies notes > https://github.com/SFPC/codeecologies/tree/master/notes
Artificial Advancements > https://thenewinquiry.com/artificial-advancements/
Computing and Stories > http://sfpc.io/classes/computingandstories/
Diversity at SFPC > https://medium.com/@tchoi8/diversity-at-sfpc-d494d7390375
Code of Conduct from eTextile Spring break > http://etextilespringbreak.org/
Keywords
dat create : You are creating your digital archive.
dat keys: In case you forget your key, you can get it again.
dat share: You will start to seed your archive.
dat sync: You can connect to a remote dat, and live sync to it’s changes. This also results in you sharing the archive even when the original archive is not available.
Step by step
Getting set up
open up terminal, go to your project directory
mkdir datzines
cd datzines