Lectures.org

#-*- coding: utf-8 -*-
#+SETUPFILE: ./setup.org
#+HUGO_SECTION: slides
#+ORG_LMS_SECTION: slides
#+MWP_HUGO_TYPE: slides
#+HUGO_MENU: :menu main :weight 10
#+OPTIONS: todo:nil
#+REVEAL_ROOT: file:///home/matt/src/reveal.js
# #+REVEAL_SINGLE_FILE: t

* Set up Klipse
:PROPERTIES:
:CUSTOM_ID: set-up-klipse-f816
:END:
** remote -- for huveal
:PROPERTIES:
:CUSTOM_ID: remote----for-huveal-7a84
:END:
#+begin_src emacs-lisp
(setq org-reveal-klipse-js "https://sandbox.hackinghistory.ca/vendor/klipse/klipse_plugin.min.js")
(setq org-reveal-klipse-css "https://sandbox.hackinghistory.ca/vendor/klipse/codemirror.css")
(setq org-reveal-root "http://sandbox.hackinghistory.ca/Tools/reveal.js")
#+end_src

#+RESULTS:
: http://sandbox.hackinghistory.ca/Tools/reveal.js


** Local Versions (required for notes!)
:PROPERTIES:
:CUSTOM_ID: local-versions-(required-for-notes)-2bea
:END:
#+begin_src emacs-lisp
(setq org-reveal-klipse-js "/home/matt/Dropbox/Work/History/DigitalHistory/vendor/klipse/klipse_plugin.min.js")
(setq org-reveal-klipse-css "https://sandbox.hackinghistory.ca/vendor/klipse/codemirror.css")
(setq org-reveal-root "/home/matt/src/reveal.js/")

#+end_src

#+RESULTS:
: /home/matt/src/reveal.js/

* attendance
:PROPERTIES:
:CUSTOM_ID: attendance-5b51
:END:

- Giselle, diaspora and transnational studies; minors in religion and equity studies:
- Selena: English & Religion major;
- Geneva:
- Nicole: 3rd year religion+; history/religion -; indigenous studies; canoe; took an environment course; in Canadian History, studied differences in canoe cultures across 
- Michelle; in 4th year in EECS;
- Chae(dra): linguistics & environmental studies; first year;
- Preye: Religion major;
- 

* COMMENT Fixing presentations                                     :noexport:
:PROPERTIES:
:CUSTOM_ID: comment-fixing-presentations-7828
:END:
I need to have live-loading code in these presentations, or I'll run into serious trouble.  
THere are at least three options with reveal, and doubtless otherones using other frameworks.  

** Embed JSBIn
:PROPERTIES:
:CUSTOM_ID: embed-jsbin-094f
:END:
gThis is actually pretty simple.  Just extract the jsbin code, and embed it i nan iframe.  Tricky things:
- +instead of a "src" atrribute, you need a "data-src" attribute in the iframe+ actually this was a nload error
- This requires a snippet to add to org -- ideally, this would be a filter that recognizes the jsbin URL and turns it into an iframe (otherwise I'll lose the links in other exports).  Should be a reveal filter, not an html filter
- Has the disadvantage that the code is not actually stored in the org file; but the advantage that html can render directly in the window which is nice.
- would be nice to have a full-screen keystroke or button to take the iframe fullscreen
- no code sample required here b/c it's so simple.

** Use Klipse
:PROPERTIES:
:CUSTOM_ID: use-klipse-a813
:END:

actually this works now so I'll do this!!

- klipse is a very, very simple way to embed thecode
- will also likely require an export filter to add the required classes that klipse is looking for.
- unfortunately, also lots of work is required to get klipse/codemirror to display properly in a presentation
- will need lots of css work at a bare minimum. Looks like also some js work
- would be nice to be able to isolate the code div from the rest of the page css. Not sur how to do that. Also probably would be nice to just create an iframe for the code. That would be another option -- have a variable that holds the pre and post code for the iframe and just throw it together
- with iframeswould be nice if the code stayed the same when frame moves off... turns out this is not so hard, just use src instead of data-src.  
* COMMENT Attendance                                               :noexport:
:PROPERTIES:
:CUSTOM_ID: comment-attendance-66a6
:END:
| Name | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
|------+---+---+---+---+---+---+---+---+---+----+----+----|
|      |   |   |   |   |   |   |   |   |   |    |    |    |

* COMMENT People                                                   :noexport:
:PROPERTIES:
:CUSTOM_ID: comment-people-647b
:END:
| Last            | First     | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
|-----------------+-----------+---+---+---+---+---+---+---+---+---+----+----+----|
| Burlock         | Hillary   |   |   | x |   |   |   |   |   |   |    |    |    |
| Calderon        | Sebastian |   |   |   |   |   |   |   |   |   |    |    |    |
| Cannon-Sherlock | Tristan   |   |   |   |   |   |   |   |   |   |    |    |    |
| Cazes           | Kayla     |   |   | x |   |   |   |   |   |   |    |    |    |
| Desai           | Areya     |   |   |   |   |   |   |   |   |   |    |    |    |
| Dyer            | Shaunesy  |   |   |   |   |   |   |   |   |   |    |    |    |
| Fang            | Yuanyuan  |   |   |   |   |   |   |   |   |   |    |    |    |
| Gazo            | Alexis    |   |   |   |   |   |   |   |   |   |    |    |    |
| Ireland         | Rhiannon  |   |   |   |   |   |   |   |   |   |    |    |    |
| Kampen          | Maria     |   |   |   |   |   |   |   |   |   |    |    |    |
| Kerr            | Alexandra |   |   | x |   |   |   |   |   |   |    |    |    |
| Mackey          | Elizabeth |   |   |   |   |   |   |   |   |   |    |    |    |
| Obradovich      | Daniel    |   |   |   |   |   |   |   |   |   |    |    |    |
| Pham            | Ann       |   |   |   |   |   |   |   |   |   |    |    |    |
| Scully-Ashton   | Myrna     |   |   |   |   |   |   |   |   |   |    |    |    |
| Sibley          | Gregory   |   |   |   |   |   |   |   |   |   |    |    |    |
| Siewdass        | Samantha  |   |   |   |   |   |   |   |   |   |    |    |    |
| Silverstein     | Matthew   |   |   |   |   |   |   |   |   |   |    |    |    |
| Sohng           | Yi        |   |   |   |   |   |   |   |   |   |    |    |    |
| Wachockier      | Kim       |   |   |   |   |   |   |   |   |   |    |    |    |

* COMMENT Boilerplate for RevealEditor code in ox-reveal export    :noexport:
:PROPERTIES:
:CUSTOM_ID: comment-boilerplate-for-revealeditor-code-in-ox-reveal-export-c817
:END:
maybe add jquery, revealeditor, and ace.js as dependencies when loading reveal.js. is that possible?

Note this stuff: 
    <script src="js/jquery.js"></script>
    <script src="revealeditor.js"></script>

So, step one would be to try to load all that stuff as part of the plugin set according to the ox-reveal instructions. If that  doesn't work I can try to just add the html as in [[https://gist.github.com/bzg/5f9a952208cf8d35220a41a8ff857faa#file-gistfile1-txt][Bastien's klipse example]] 

#+BEGIN_SRC org

#+html:     <script src="../reveal.js/plugin/RevealEditor/ace-builds/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
#+html: <script>         $(".btn").RevealEditor(); </script>


#+END_SRC

* COMMENT Assignments (progressive)                                :noexport:
:PROPERTIES:
:CUSTOM_ID: comment-assignments-(progressive)-37c1
:END:
- codeacademy web track (html, css, javascript) OR send me a github URL for a project you've done.  
- mapping assignment: maybe the one from programming historian
- participation/blogging (written in markdown)
- oral history paper/annotation assignment, via an archive, and hopefully also via github.  
  - storycorps?
- "not reading a book" http://f14tot.ryancordell.org/2014/10/15/lab-8-distant-reading/
- project proposal

* COMMENT To do for today                                          :noexport:
:PROPERTIES:
:CUSTOM_ID: comment-to-do-for-today-a20c
:END:
- set up website 
- complete syllabus!
- web skills top-up assignment
- blog/participation assignment

* COMMENT org-re-reveal setup
#+begin_src emacs-lisp
(setq
 org-re-reveal-width "100%"
 org-re-reveal-height "100%"
 org-re-reveal-margin "0.1"
 org-re-reveal-min-scale "0.2"
 org-re-reveal-max-scale "2.0"
 )
#+end_src

#+RESULTS:
: 2.0

* COMMENT Participation
:PROPERTIES:
:CUSTOM_ID: participation-362b
:END:

** <2018-01-04 Thu>
:PROPERTIES:
:CUSTOM_ID: <2018-01-04-thu>-4a71
:END:
- Dany, 4th year minor in history, major in equity studies -- video games
- Victoria, 2nd year in art history & history, pop music
- Julia, 3rd yr history major, online coding skills, interested in oral history
- Ivaatz, post-matric, teacher, Ialian
- Kiera, 4th yr, history, interested in kig stuff cause it's important
- Tagwin? , history specialist,
- Anna, 4th yr , doesnt know anything about the Internet, went to Arctic over break
- Alix, 3rd yr history major, doing some web design, from BC
- Serena, in her 4th yr, poli sci & history, plays soccer
- Andrea, equity & istory 3rd yr, can't play soccer, has done some programming
- Adam, 3rd yr, history psecialist, computers are cool -- likes cars
- Anthony, 4th year, English & History, he likes hockety
- Kathy, post matric, oin data visualization
- Justin 3rd yr, double major in jhistory & classics
- Yani, 3rd yr, breadth requirement, U of T Camp
- John, CS major, what's he doing here????
- Capacin, History & Poli Sci, teaches pottery
- Sam, 3rd yr His & Pli Sci, background in hardware
- Dyoan, 4th yr Poli Sci, phil, history;
- Lany & Jenny, both CS 4th yrs, both interested in video games & anime
- Mahdi, interested in coding
- Alyssia, 3rd yr history major, very tired from break
- Natalia, 4th yr English & History,
- Briana? -- His major,
- Zoar, history major, interested in CS, RA for Elspeth LGBQT project
- Samantha, 3rd yr His major, wants to teach hsitory, namred after dad's cat
- Amelia, I know her already!
- Cia, 3rd yr his specialist,
- Rachel, His minor, took digital text, wants to be a journalist
- 

* 01: Introducing /Digital History/
:PROPERTIES:
:ID:       oH2b:196a261a-f575-44bc-8cc8-e38fd73aaf26
:POSTID:   451
:BLOG:     dig
:EXPORT_FILE_NAME: 01-intro-digital-history
:EXPORT_TITLE: Introduction to Digital History
:CUSTOM_ID: 01:-introducing-/digital-history/-6653
:END:
** About Me
:PROPERTIES:
:CUSTOM_ID: about-me-618c
:END:
#+ATTR_HTML: :class half
[[file:~/DH/Images/matt_headshot.jpg]]
- Historian of Science & Technology
- Interdisciplinary Background
- Interest in "Engaged" scholarship

** Why Care about History? Why care about the Digital Age?
:PROPERTIES:
:CUSTOM_ID: why-care-about-history?-why-care-about-the-digital-age?-8917
:reveal_extra_attr: class="twoc"
:END:
#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
*The World Out of Which We Come*
#+BEGIN_QUOTE
The past is the world out of which we have come, the multitude of events and experiences that have shaped our conscious selves and the social worlds we inhabit. To understand how and why we live as we do, we cannot avoid appealing to the past to explain how andwhy we got to be this way.   (cite:CrononWhyMatters2000, p. 4)
#+END_QUOTE
#+end_slideblock
#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
*Not just Fact but Story*
#+BEGIN_QUOTE
It is remembering and storytelling we care about, not the raw past, because only by being perennially resurrected in the mind of each ne generation does the past become meaningful.  Only this does it become a living memory which in turn gives meaning to our present lives by reminding us ho we are--as individuals, as a state and nation, as a people. (/Ibid./, p. 13)
#+END_QUOTE
#+end_slideblock
 
*** A Digital Age
:PROPERTIES:
:CUSTOM_ID: a-digital-age-5662
:reveal_extra_attr: class="twoc"
:END:

#+begin_slideblock
*Opportunity*
  - masses of data
  - tremendous participation
#+end_slideblock

#+ATTR_REVEAL: :frag (appear)
#+begin_slideblock
*Challenge*
  - filtering data
  - trusting writers
  - lack of collective experience
#+end_slideblock

*** Our Project
:PROPERTIES:
:CUSTOM_ID: our-project-5f46
:reveal_extra_attr: class="twoc"
:END:
#+begin_slideblock
Understand how to write history for a digital age!
#+end_slideblock
#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
#+ATTR_REVEAL: :frag (appear) 
- what can we preserve?
- what opportunities are there for change?
- what has been done already?
#+end_slideblock

** Method
:PROPERTIES:
:CUSTOM_ID: method-f5b6
:reveal_extra_attr: class="splitc"
:END:

#+begin_slideblock
*For most of us, this is experimental.*
- no canon
- minimal technical background
- unknown professional plans
#+end_slideblock

#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
*Systematic inquiry won't get us there*
- /Hackers/ not Computer scientists!
- Basic Concepts & Practical Tools, as a foundation for self-guided further learning
- Trial & Error, frustration management

(cf. constructivist pedagogy, e.g.)
#+end_slideblock
#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
#+ATTR_REVEAL: :frag (appear)
- Intro to toolbox
- but tools keep changing
- therefore: *simple* coding, *basic* plumbing: code editors,version control, web dev absolute basics
#+end_slideblock

** Syllabus
:PROPERTIES:
:CUSTOM_ID: syllabus-3974
:reveal_extra_attr: class="twobytwo"
:END:
*** Some Highlights
:PROPERTIES:
:reveal_extra_attr: class="twobytwo"
:END:
#+begin_slideblock
*Participate*
- come to class
- join Slack
- ask questions
- help your classmates
#+end_slideblock

#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
*Be Willing to Try*
- get outside your comfort zone
- if you don't get it right, try again
- read the assignments & follow instructions & feedback carefully
#+end_slideblock

#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
*Bring your Laptop*
- we will code almost every class
- but not chat/social media
#+end_slideblock

#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
*Find the Fun*
- every challenge is an opportunity
#+end_slideblock

*** 4 blocks!
:PROPERTIES:
:reveal_extra_attr: class="twobytwo"
:END:
#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
*Text and Code*
- Aims: 
  - understand /how the web works/ and /what it changes about the practice of history/
  - Intro to our tools & infrastructure (code editor, version control, build tools)
  - Intro to HTML and CSS (web page structure and appearance)
#+end_slideblock
#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
*Data Driven History*
- Aims:
  - understand "Distant Reading" and the problems of textual abundance
  - experiment with treating texts as data
  - distinguish between "meaning" and "information"
  - introduction to Javascript (variables, functions, control structures)
#+end_slideblock
#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
*Maps & Visualization*
- Aims:
  - understanding geohistory
  - GIS basics
  - work with web-based GIS
#+end_slideblock
#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
*Oral History & Crowdsourcing*
- Aims:
  - work with non-textual media
  - appreciate the power and perils of crowdsourced & amateur history
  - plan your own professional or independent fuutre as a digital historian
#+end_slideblock
*** Objectives
:PROPERTIES:
:ID:       o2b:08d4e118-c70c-4f4c-a99a-293d3847c9a6
:POST_DATE: [2017-01-06 Fri 12:48]
:POSTID:   597
:BLOG:     dig
:CUSTOM_ID: objectives-4b0a
:END:
At the end of this course, you should:
#+ATTR_REVEAL: :frag (appear) 
- be able to describe to others *what the phrase "digital humanities" means to you.*
- be able to frame a coherent and nuanced argument /of your own/ about *the value of DH methods to the field of history*
- be able to clearly state and *defend a position regarding "engaged scholarship"*, and articulate the relationship of your argument to the contemporary media landscape
- have a basic understanding of *markup languages* and their use in DH
- be able to *read and navigate basic Javascript* programs
- be able to make compelling use of *media materials such as audio, video, and animation* in historical arguments
- understand *how to create simple historical maps*, and have an opinion about the value of GIS in historical argument
*** About that Land Acknowledgment 
- History of Life on this shore
- Dish with One Spoon
- Continuity and Disjuncture
#+begin_paired
[[/home/matt/DH/Images/dish-spoon-territory.png]]
#+end_paired
#+begin_paired
https://www.indiantime.net/home/cms_data/dfault/photos/stories/id/1/0/7510/.TEMP/s_topTEMP425x425-8032.jpeg
#+end_paired

#+begin_notes
We would like to acknowledge this sacred land on which the University of Toronto operates. It has been a site of human activity for 15,000 years. This land is the territory of the Huron-Wendat and Petun First Nations, the Seneca, and most recently, the Mississaugas of the Credit River. The territory was the subject of the Dish with One Spoon Wampum Belt Covenant, an agreement between the Iroquois Confederacy and Confederacy of the Ojibwe and allied nations to peaceably share and care for the resources around the Great Lakes. Today, the meeting place of Toronto is still the home to many Indigenous people from across Turtle Island and we are grateful to have the opportunity to work in the community, on this territory.
#+end_notes
*** Weird Grading Method
- you choose what grade you want to get
- do the assignments required for that grade
- to "pass" an assignment, you need to achieve a high standard -- approx. ~B+~
- if you fail the first time, you have a chance to try again
- ~+/-~ set by participation
*** Assignments
:PROPERTIES:
:CUSTOM_ID: assignments-(full)-9d47
:END:
#+INCLUDE: ./His393Syllabus.org::assignments_table

*** Assignments, put another way
:PROPERTIES:
:reveal_extra_attr: class="twobytwo"
:END:
#+begin_slideblock
*To Pass*
- Class Profile
- Zero to Blog Post
- A Feast of Ministers
- Oral History
#+end_slideblock
#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
*To Get a C*
- Class Profile
- Zero to Blog Post
- A Feast of Ministers
- @@html:<span class="urgent">@@DOM and Data@@html:</span>@@
- Oral History
#+end_slideblock
#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
*To Get a B*
- Class Profile
- Zero to Blog Post
- A Feast of Ministers
- DOM and Data
- @@html:<span class="urgent">@@Spatial History@@html:</span>@@
- Oral History
#+end_slideblock
#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
*To Get an A*
- Class Profile
- Zero to Blog Post
- A Feast of Ministers
- DOM and Data
- Spatial History
- Oral History
- @@html:<span class="urgent">@@Project Proposal@@html:</span>@@
- @@html:<span class="urgent">@@All Reflection Questions@@html:</span>@@
#+end_slideblock

*** Participation
:PROPERTIES:
:CUSTOM_ID: participation-ccd7
:END:
- come every time!
- pay attention and ask questions!
- no email/youtube/reddit/facebook etc etc etc etc
- participate in Slack!

*** Assignments 0 and 1!
:PROPERTIES:
:CUSTOM_ID: first-assignment!-26f7
:END:
- available early next week.
- *Assignment 0 due in a week and a half!*
# You can find our first two assignments on the web [[https://github.com/DigitalHistory/assignment-00-git-and-github][here]] and [[https://github.com/DigitalHistory/assignment-01-html-css][here]].  Assignment 0 is due in a week and a half!
** Intros 1
:PROPERTIES:
:CUSTOM_ID: intros-1-7ff4
:END:
#+ATTR_REVEAL: :frag (appear)
- Find someone you don't know
- in 3 minutes, find out: Name; Year; Interest in the class; something else of interest
- Present yr classmate to the people around you

** Intros 2
:PROPERTIES:
:CUSTOM_ID: intros-2-479b
:END:
#+ATTR_REVEAL: :frag (appear)
- find a *different* stranger
- spend no more than 8 minutes *imagining* a DH project
- present to another pair 

** Before next class
- [[https://github.com/join?source=header-home][Get yourself a Github user account]]
- [[https://classroom.github.com/classrooms/54332214-digital-history-fall-2019][Join the "Github Classroom"]]
- Begin working your way through the [[

** COMMENT Git!
:PROPERTIES:
:CUSTOM_ID: git-4068
:END:
- "Track Changes" on steroids
- "version Control" software optimized for collaboration


** COMMENT Github!
:PROPERTIES:
:CUSTOM_ID: github!-7877
:END:
Take out your Laptop!
- Find yet another partner (work alone or help someone else if you're very confident)
- [[https://github.com/titaniumbones/history-please][Navigate to the History-Please repository]]
- Follow the instructions on the course website:
  - make an account
  - fork the repo
  - add some Candian history
  - submit your changes as pull request
- When you're done, we'll check out the wonders of open source first hand
 
# /home/matt/DH/Images/matt_headshot.jpg http://digitalhistory.github.io/wp-content/uploads/2016/01/wpid-matt_headshot.jpg


** Bibliography
:PROPERTIES:
:CUSTOM_ID: bibliography
:END:
printbibliography:/home/matt/DH/digitalhistory.bib

** COMMENT who's Here
:PROPERTIES:
:CUSTOM_ID: comment-who's-here-5510
:END:
#+begin_src emacs-lisp :results raw

(org-lms-get-all-users )
(let ((students (org-lms-get-all-users)))
    (cl-loop for s in-ref students
             concat
             (format "- [ ] %s\n" (plist-get s :name))  
             ;; (plist-get s :)
    
    ;; (message "student %s" (plist-get s :id))
    ;; (if (equal 10444 (plist-get s :id))
    ;;          (progn 
    ;;          (message "in 10444")
    ;;          (setq s (plist-put s :github  "muppet"))))
    )
             )
#+end_src

#+RESULTS:
- [ ] Ahmed Shahab
- [ ] Alethea Pezzo
- [ ] Alicia Bui
- [ ] Aman Bhandhol
- [ ] Amanda Leiva
- [ ] Amy Cao
- [ ] Caitlyn Collins
- [ ] Christopher Obermoser
- [ ] David Polisuk
- [ ] Erin Socholotiuk
- [ ] Evelyn Bourque
- [ ] Hannah Allen
- [ ] Hyun Oh
- [ ] Iliana Derraugh
- [ ] Jiawei Zhang
- [ ] Jonathan Tom
- [ ] Jorge Guzman
- [ ] Kaan Gumrah
- [ ] Kumail Bukhari
- [ ] Lincoln Chiu
- [ ] Luc Foster
- [ ] Maria Pepelassis
- [ ] Matthew Albanese
- [ ] Matthew Price
- [ ] Michael Sloboda
- [ ] Miriam Schirmer
- [ ] Molly Farquhar
- [ ] Nicholas Morchain
- [ ] Racheal Soosaipillai
- [ ] Rayan Khadeer
- [ ] Rebekah Robinson
- [ ] Ryan Hamilton
- [ ] Ryan Kavanagh
- [ ] Ryan O'Shea
- [ ] Shaira Bagha
- [ ] Tamanna Bhasin
- [ ] Tasmiyah Randeree
- [ ] Tess Alksnis
- [ ] Tobias Dublin
- [ ] Wayne George
- [ ] Zak Dranoff-Caspi
- [ ] Zefang Yi


* 02-01: Git and Github
:PROPERTIES:
:EXPORT_FILE_NAME: 01-02-git
:END:
** COMMENT Network Diagram Code for this Lecture

*** ACTION Setup Plantuml (move to init!!)
 #+begin_src emacs-lisp
(org-babel-do-load-languages 'org-babel-load-languages '((plantuml . t)
))
(require 'ob-plantuml)
#+end_src

#+RESULTS:
#+begin_src emacs-lisp
ob-plantuml
#+end_src

*** Experiments with properties
#+begin_src plantuml :file help.svg
help skinparams
#+end_src

#+RESULTS:
 a[[file:help.svg]]

#+NAME: sprite-ex
#+begin_src plantuml :file Images/test.svg
!define ICONURL https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/v2.1.0
!includeurl ICONURL/common.puml
!includeurl ICONURL/font-awesome/cloud.puml
!includeurl ICONURL/font-awesome/server.puml
!includeurl ICONURL/font-awesome/laptop.puml
!includeurl ICONURL/devicons/git_commit.puml
!includeurl ICONURL/devicons/git_merge.puml

rectangle "<$git_commit>\ncommit" as commit1
#+end_src

#+RESULTS: sprite-ex
[[file:Images/test.svg]]


*** Common Settings

#+NAME: init-uml
#+begin_src plantuml

skinparam defaultTextAlignment center
skinparam DefaultFontSize 20 
skinparam titleFontSize 24
skinparam ArrowThickness 5
left to right direction

!define ICONURL https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/v2.1.0
!includeurl ICONURL/common.puml
!includeurl ICONURL/font-awesome/cloud.puml
!includeurl ICONURL/font-awesome/server.puml
!includeurl ICONURL/font-awesome/laptop.puml
!includeurl ICONURL/devicons/git_commit.puml
!includeurl ICONURL/devicons/git_merge.puml


#+end_src

*** Git Push
#+NAME: push-start
#+begin_src plantuml :file Images/git-push0.svg
<<init-uml>>
skinparam ArrowThickness 8
skinparam ArrowColor Black
skinparam sequenceParticipantBackgroundColor Green
skinparam sequenceActorBackgroundColor Green

title initial state - no local development

together {
DEV_GIT_COMMIT(1, "1 \n initial commit") 
DEV_GIT_COMMIT(2, "2 \n origin/master") #LightBlue
}

  1 -- 2
#+end_src

#+RESULTS: push-start
[[file:Images/git-push0.svg]]

#+begin_src plantuml :file Images/git-push1.svg
<<push-start>>
title after git clone/pull

DEV_GIT_COMMIT(3, "2 \n local/master") #Pink
1 -- 3
#+end_src

#+RESULTS:
[[file:Images/git-push1.svg]]

#+name: push-local
 #+begin_src plantuml :file Images/git-push2.svg
<<push-start>>

title local development

together {
DEV_GIT_COMMIT(3, 2)
DEV_GIT_COMMIT(4, 3)
DEV_GIT_COMMIT(5, "4 \n local/master") #Pink
}
1 -- 3
3 -- 4
4 -- 5

#+end_src

#+RESULTS: push-local
[[file:Images/git-push2.svg]]


 #+begin_src plantuml :file Images/git-push3.svg
<<push-start>>
title after git push

DEV_GIT_COMMIT(2, 2)
DEV_GIT_COMMIT(3, 3)
DEV_GIT_COMMIT(4, "4 \n origin/master\nand\nlocal/master") #Magenta

2 -- 3
3 -- 4

#+end_src


#+RESULTS:
[[file:Images/git-push3.svg]]

*** Just laptop
#+NAME: laptop-net
#+begin_src plantuml :file Images/gh-lpatop.svg :eval no-export :results value file raw
<<init-uml>>
FA_LAPTOP(mattl, matt-laptop) #Green


#+end_src

#+RESULTS:
[[file:Images/gh-lpatop.svg]]
*** Primitive network
#+NAME: degen-net
#+begin_src plantuml :file Images/gh-degen-network.svg :eval no-export :results value file raw
<<laptop-net>>

FA_SERVER(mattr,github.com/matt) #Green

mattl <--> mattr: Clone

#+end_src

#+RESULTS: degen-net
[[file:Images/gh-degen-network.svg]]

*** Simple Network
#+NAME: simple-net
#+begin_src plantuml :file Images/gh-abbrev-network.svg :eval no-export :results raw
<<degen-net>>

FA_CLOUD(alicer,github.com/alice) #Magenta
FA_CLOUD(bobr,github.com/bob) #Turquoise
FA_CLOUD(kalsangr,github.com/kalsang) #Gold

mattr --> alicer: Fork
mattr --> bobr: Fork
mattr --> kalsangr: Fork

#+end_src

#+RESULTS: simple-net
[[file:Images/gh-abbrev-network.svg]]

#+RESULTS:
[[file:Images/gh-abbrev-network.svg]]
*** Full Network
#+begin_src plantuml :file Images/gh-full-network.svg :eval no-export :results raw
<<simple-net>>
FA_LAPTOP(bobl, bob-laptop) #Turquoise
FA_LAPTOP(alicel, alice-laptop) #Magenta
FA_LAPTOP(kalsangl, kalsang-laptop) #Gold


bobr --> bobl: Clone 
alicer <--> alicel: Clone 
kalsangr <--> kalsangl: Clone

#+end_src

#+RESULTS:
[[file:Images/gh-full-network.svg]]

*** Pull

#+begin_src plantuml :file Images/gh-pull.svg :eval no-export :results value file raw
<<init-uml>>

FA_SERVER(mattr,github.com/matt) #Green
FA_CLOUD(alicer,github.com/alice) #Magenta
FA_LAPTOP(mattl, matt-laptop) #Green


mattl <-- mattr: Pull New Changes
mattr <-- alicer: Merge Changes
mattl --> mattr: Push changes back  remote
mattl --> mattl: make small change
mattl --> mattl: make another change

#+end_src

#+RESULTS:
[[file:Images/gh-pull.svg]]
** Git!
https://git-scm.com/images/logos/downloads/Git-Logo-2Color.png

- "Track Changes" on steroids
- "Version Control" software optimized for collaboration
- *essential infrastructure for almost all programming projects*
** Github!
   :PROPERTIES:
   :CUSTOM_ID: github!-7877
   :END:
https://github.githubassets.com/images/modules/open_graph/github-octocat.png
- git-based code-sharing site
- largest in history
- owned by Microsoft ☹
- where we (and most open-source projects) work!
** Today
- fun git practice
- git concepts
- ensure setup is going well
- assignment/process overview
- *If you don't have a github account yet, get one now!*
** Git Practice: History, Please!
    :PROPERTIES:
    :CUSTOM_ID: orgedd3110
    :END:

- simple command-line/graphical application
- crowd-sourced by students from this class
- many problems to fix & improvements to make
- we'll try to make some progress 
*** History, Please
*Take out your Laptop!*

- [[https://github.com/DigitalHistory/history-please][Navigate to the History-Please repository]]
- Let's explore *code*, *issues*, and *pulls*
*** Activity

- Divide into groups:
  - ~trends~ page adders
  - ~events~ page adders
  - ~copyeditors~
  - issue triagers
- Find *at least one* partner (if you're very confident, help someone else)
- Scroll down to the [[https://github.com/DigitalHistory/history-please#how-to-participate][contributing instructions]]
- Additional tips:
  - reference issues & pull requests by number, e.g. [[https://github.com/DigitalHistory/history-please/pull/58][#58]]. Do this whenever you create a pull that fixes an issue, especially.
  - Give your PR's *meaningful titles* and *helpful,extensive descriptions*
  - ~@mention~ me (~@titaniumbones~) when you think you have fixed an issue, or want my input (won't get back to you today though!)
** Git Concepts
*In this section*
- collaboration
- remotes
- branches
- commits
- worktree vs. repository 
*** Collaboration
http://invistruct.com/wp-content/uploads/2012/08/distributed-vc.png
*** Concepts: Remote
https://wac-cdn.atlassian.com/dam/jcr:df13d351-6189-4f0b-94f0-21d3fcd66038/01.svg
*** Classroom Network
:PROPERTIES:
:reveal_extra_attr: class="twobytwo"
:END:

#+begin_slideblock
#+ATTR_HTML: :style min-width: 15vw;
[[file:Images/gh-lpatop.svg]]
#+end_slideblock

#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
#+ATTR_HTML: :style min-width: 20vw;
[[file:Images/gh-degen-network.svg]]

#+end_slideblock
#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
file:Images/gh-abbrev-network.svg
#+end_slideblock
#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
[[file:Images/gh-full-network.svg]]
#+end_slideblock

*** Branches
:PROPERTIES:
:reveal_extra_attr: class="twoc"
:END:
#+begin_slideblock

https://wac-cdn.atlassian.com/dam/jcr:746be214-eb99-462c-9319-04a4d2eeebfa/01.svg

#+ATTR_REVEAL: :frag (appear) 
- git history is a *tree*, not a straight line
- nothing is ever lost!!
- can be hard to figure out!

#+end_slideblock

#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
#+ATTR_HTML: :style  min-width: 45vw;; 
[[file:Images/gh-branch.svg]]

#+end_slideblock

*** COMMENT Activity Branches
#+begin_src plantuml :file Images/gh-branch.svg :eval no-export :results value file raw
skinparam defaultTextAlignment center
left to right direction

!define ICONURL https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/v2.1.0
!includeurl ICONURL/common.puml
!includeurl ICONURL/font-awesome/cloud.puml
!includeurl ICONURL/font-awesome/server.puml
!includeurl ICONURL/font-awesome/laptop.puml

FA_SERVER(mattr,github.com/matt-master) #Green

FA_LAPTOP(mattl, matt-laptop-master) #Green

FA_CLOUD(alicer, github.com/alice-master) #Magenta
FA_CLOUD(aliceb, github.com/alice-patch123) #Magenta

mattl <--> mattr: Clone
mattr --> alicer: Fork
alicer --> aliceb: Branch
aliceb --> mattr: PR

#+end_src

#+RESULTS:
#+ATTR_HTML: :style  min-width:75vw; 
[[file:Images/gh-branch.svg]]

*** Concepts: Commit
https://wac-cdn.atlassian.com/dam/jcr:362f3b15-9e74-4fe5-b97d-784e296880ad/01.svg
- changes aren't saved automatically; manually “commit”
- every commit can be revisited later
- a branch is really just a “pointer” to a specific commit (complicated)

*** Activity Commits
#+begin_src plantuml :file Images/commits.svg :eval no-export :results raw
<<init-uml>>

skinparam ArrowThickness 8
skinparam ArrowColor Black


DEV_GIT_COMMIT(1, "1 \n start") 
DEV_GIT_COMMIT(2, "2 \n add person") 
DEV_GIT_COMMIT(3, "3 \n add event") 

1 -- 2 
2 -- 3

#+end_src

#+RESULTS:
[[file:Images/commits.svg]]


*** Concept: Worktree and Repository
:PROPERTIES:
:reveal_extra_attr: class="twoc"
:END:
#+begin_slideblock
*what you see*
[[./Images/worktree.png]]
#+end_slideblock

#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
*what's underneath*
[[./Images/repository.png]]
#+end_slideblock

** Git Workflows
*In this section*
- merging
- pulling
- pushing
*** Concepts: Merge
:PROPERTIES:
:reveal_extra_attr: class="twoc"
:END:

#+begin_slideblock
https://wac-cdn.atlassian.com/dam/jcr:83323200-3c57-4c29-9b7e-e67e98745427/Branch-1.png
- when we “merge” two branches, the changes from one are brought over into the other

#+end_slideblock
#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
https://blog.developer.atlassian.com/wp-content/uploads/dac-import/merge-conflict.png
- if work has progressed on *both* branches, then there might be incompatible changes
- these are called "merge conflicts"
- they suck!
#+end_slideblock

*** Concepts: Pull and Push Changes
:PROPERTIES:
:reveal_extra_attr: class="twoc"
:END:
#+begin_slideblock
#+ATTR_REVEAL: :frag (appear) 
[[./Images/git-push0.svg]]
#+ATTR_REVEAL: :frag (appear) 
[[./Images/git-push1.svg]]
#+end_slideblock

#+begin_slideblock
#+ATTR_REVEAL: :frag (appear) 
[[./Images/git-push2.svg]]
#+ATTR_REVEAL: :frag (appear) 
[[./Images/git-push3.svg]]

#+end_slideblock

*** Concepts: Pull and Push collaboratively
:PROPERTIES:
:reveal_extra_attr: class="twobytwo"
:END:

#+begin_slideblock
https://wac-cdn.atlassian.com/dam/jcr:0718ae20-0dc5-482c-a38c-25e4f1a1a3b0/02.svg
#+end_slideblock
#+ATTR_HTML: :style grid-row: 2/4;
#+begin_slideblock
#+ATTR_HTML: :style min-width: 20vw;
[[file:Images/gh-pull.svg]]

#+end_slideblock

#+begin_slideblock
https://wac-cdn.atlassian.com/dam/jcr:00d011ed-03dc-440f-afc5-9b13d5e14fbf/bubble%20diagram-01.svg
#+end_slideblock

** Assignment
The assignment is now up on [[https://classroom.github.com/a/VJGuHMB6][Github Classroom]], [[https://q.utoronto.ca/courses/123949/assignments/219086][Quercus]], and [[https://digitalhistory.github.io/assignment/][the course website]]. We'll discuss it, and further setup questions, on Thursday.

* 02-02: More Git, Some Markdown, a Tiny Bit of HTML
:PROPERTIES:
:EXPORT_FILE_NAME: 02-02-more-git
:EXPORT_TITLE: 2-2: More Git, Some Markdown, a Tiny Bit of HTML 
:CUSTOM_ID: 02-02-git-markdown-html-2309
:END:
** COMMENT Notes -- don't export                                  :noexport:
:PROPERTIES:
:CUSTOM_ID: comment-notes----don't-export-a542
:END:
- explain the pun
- Habermas: public sphere (Lecture: 25 mins)
- discussion/group work: definitions of public?  something like that. 15 mins.
- History on the web (Lecture: 20 mins).  Include an example
- Discussion? maybe not.
- Lab:  a few very basic bits about HTML, perhaps some exercises.
** Review
:PROPERTIES:
:CUSTOM_ID: review-1448
:END:
- 4 blocks
- Git intro & practice
- [[https://github.com/DigitalHistory/assignment-00-git-and-github][Assignment 0 is online]]
** Today
:PROPERTIES:
:CUSTOM_ID: today-abcd
:END:
- more Git
- Assignment and setup questions
- Brief HTML explication
- HTML Exercise
#+BEGIN_NOTES
Phrase "Technical Affordance"
#+END_NOTES

** Git: what we  didn't get to

*** Review: Branches
:PROPERTIES:
:reveal_extra_attr: class="twoc"
:END:
#+begin_slideblock

https://wac-cdn.atlassian.com/dam/jcr:746be214-eb99-462c-9319-04a4d2eeebfa/01.svg

#+ATTR_REVEAL: :frag (appear) 
- git history is a *tree*, not a straight line
- nothing is ever lost!!
- can be hard to figure out!

#+end_slideblock

#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
#+ATTR_HTML: :style  min-width: 45vw;; 
[[file:Images/gh-branch.svg]]

#+end_slideblock

*** Review: Commit
:PROPERTIES:
:reveal_extra_attr: class="twoc"
:END:

#+begin_slideblock
https://wac-cdn.atlassian.com/dam/jcr:362f3b15-9e74-4fe5-b97d-784e296880ad/01.svg
- changes aren't saved automatically; manually “commit”
- every commit can be revisited later
- a branch is really just a “pointer” to a specific commit (complicated)
#+end_slideblock
#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
#+begin_src plantuml :file Images/commits.svg :eval no-export :results raw
<<init-uml>>

skinparam ArrowThickness 8
skinparam ArrowColor Black


DEV_GIT_COMMIT(1, "1 \n start") 
DEV_GIT_COMMIT(2, "2 \n add person") 
DEV_GIT_COMMIT(3, "3 \n add event") 

1 -- 2 
2 -- 3

#+end_src

#+RESULTS:
[[file:Images/commits.svg]]

#+end_slideblock
 
*** Concept: Worktree and Repository
:PROPERTIES:
:reveal_extra_attr: class="twoc"
:END:
#+begin_slideblock
*what you see*
[[./Images/worktree.png]]
#+end_slideblock

#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
*what's underneath*
- these are the "real" repo of which the worktree is *just one partialrepresentation*. 
[[./Images/repository.png]]
#+end_slideblock

*** Pointers and objects
:PROPERTIES:
:reveal_extra_attr: class="splitc"
:END:
#+begin_slideblock
[[./Images/git-refs.png]] 
#+begin_quote
5e7ed7e34f9a8b34d26f98275a21afdcac171b83
#+end_quote
#+end_slideblock

#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
[[./Images/git-history.png]]
#+end_slideblock
#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
[[./Images/git-objs.png]]
#+end_slideblock


*** Review: Pull and Push Changes
:PROPERTIES:
:reveal_extra_attr: class="twoc"
:END:
#+begin_slideblock
#+ATTR_REVEAL: :frag (appear) 
[[./Images/git-push0.svg]]
#+ATTR_REVEAL: :frag (appear) 
[[./Images/git-push1.svg]]
#+end_slideblock

#+begin_slideblock
#+ATTR_REVEAL: :frag (appear) 
[[./Images/git-push2.svg]]
#+ATTR_REVEAL: :frag (appear) 
[[./Images/git-push3.svg]]

#+end_slideblock

*** Pull and Push, the repo, and the worktree
#+ATTR_REVEAL: :frag (appear) 
- pulling *attempts to impose changes* from a branch in one repo onto a branch in another repo.
- first it adds the /commit objects/ from the remote object into its own store of objects
- then it tries to *update the pointer at the tip the branch*
- if it succeds, yay!
- if not -- conflict, and new commits will be created after conflicts are resolved. 



** The Missing Markdown Cheatsheet
:PROPERTIES:
:CUSTOM_ID: markdown-cheatsheet-cn24
:END:
- ~_emphasis~ and ~__strong__~ :: single "_" or "* "  surrounding words for /ital/, double for *bold*, triple for */bold ital/*
- > for blockquotes :: just preface your paragraph with an angle bracket and one space to get a quote block
- Separate paragraphs with an empty line :: (otherwise they'll run together) 
- headings start with one or more "#" and a space :: don't ofrget the space!! 
- horizontal lines with ---- :: but be sure to keep one empty line above and below, or will be interpreted differently
- links with [Link Text](http://link.address) ::
- images with ![Alt Text](http://path.to.image "title") :: 

You'll need these for your assignment!

** Assignment Intro/questions
- install VSCode
- install extension
- install npm
- follow [[https://classroom.github.com/a/VJGuHMB6][assingment link]]
- get clone link link
- start working.  
* 03-01: HTML: Machine-readable Text
:PROPERTIES:
:CUSTOM_ID: machine-readable
:EXPORT_FILE_NAME: 03-01-html-backlog
:END:
** HTML and some consequences
:PROPERTIES:
:CUSTOM_ID: machine-readable-text-2a02
:reveal_extra_attr: class="splitc"
:END:
#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
#+BEGIN_EXPORT html
      <h1>This is the top-level heading</h1>
      <p>
        This is a paragraph. It can contain <i>further markup</i> and also 
        <a href="http:/some.where.com">more complex content</a>.
      </p>
      <aside>
        Sometimes you'll see <i>semantic</i> tags, like "aside",
        "header", "footer", "article", or "section".  
      </aside>

#+END_EXPORT
#+end_slideblock
#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
On the web, text is "Marked up" 
#+ATTR_REVEAL: :no-klipsify t
#+begin_src html
      <h1>This is a top-level heading</h1>
      <p>
        This is a paragraph. It can contain <i>further markup</i> and also 
        <a href="http:/some.where.com">more complex content</a>.
      </p>
      <aside>
        Sometimes you'll see <i>semantic</i> tags, like "aside",
        "header", "footer", "article", or "section".  
      </aside>

#+end_src
#+end_slideblock
#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
- Programs can scan this text, interpret it...
- then treat it as /data/ which can be combined, analyzed, etc.
#+ATTR_REVEAL: :frag appear
- point of learning HTML is
#+ATTR_REVEAL: :frag appear
  - Understand how to achieve a certain "look"
  - Understand how a complex computer algorithm might treat it as "data".

#+end_slideblock

** Tag Structure
:PROPERTIES:
:CUSTOM_ID: tag-structure-6119
:reveal_extra_attr: class="twoc"
:END:

#+begin_slideblock
#+ATTR_REVEAL: :no-klipsify t
#+BEGIN_SRC html
<tag att1="value1" att2="value2">content</tag>
<p class="normal" align="right">Paragraph Content</p>
<a href="http://www.google.com">Link to google</a>
<img src="http://1.bp.blogspot.com/-CzqzzBV2tMk/TxBM3ar18MI/AAAAAAAAPm0/6faLPO9BM8w/s1600/i-can-has-cheezburger.jpg" title="I can Haz Cheezburger?" alt="greedy cat saying 'I can haz cheezburger?'" />
#+END_SRC

#+ATTR_REVEAL: :frag (appear) 
- tags:
  - tag identifier
  - attributes
  - content
#+end_slideblock

#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
#+BEGIN_EXPORT html
<tag att1="value1" att2="value2">content</tag>
<p class="normal" align="right">Paragraph Content</p>
<a href="http://www.google.com">Link to google</a>
<img src="http://1.bp.blogspot.com/-CzqzzBV2tMk/TxBM3ar18MI/AAAAAAAAPm0/6faLPO9BM8w/s1600/i-can-has-cheezburger.jpg" title="I can Haz Cheezburger?" alt="greedy cat saying 'I can haz cheezburger?'" />
#+END_EXPORT


#+end_slideblock

** A Few HTML tags you should know
:PROPERTIES:
:CUSTOM_ID: a-few-html-tags-you-should-know-4481
:reveal_extra_attr: class="twoc"
:END:

#+begin_slideblock
Page Structure:
#+ATTR_REVEAL: :frag (appear) 
- ~<html></html>~ :: Opens/closes every page
- ~<head></head>~ and ~<body></body>~ :: two main sections for metadata and display
- ~<div></div>~ :: often-invisible tag that divides page into "divisions"
- ~<section></section>, <article></article>, <header></header> <footer></footer>~ :: also invisible-by-default "semantic" tags that create divisions in page
- ~<p></p>~ :: basic paragraph unit
- ~<blockquote></blockquote>~ :: semantic tag distinguishing quoted text
- ~<table>~, ~<tr>~, ~<th>~, ~<td>~ :: building tables (don't overuse!)
#+end_slideblock

#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
Found inside structural elements:
#+ATTR_REVEAL: :frag (appear) 
- ~<a href="http://link.address"></a>~ :: The essential [[http://link.address][hyperlink]] tag that makes the web what it is
- ~<img src="http://file.location" alt="text to display for non-visual browsers/viewers"/>~ :: "self-closing" image display tag
- ~<em></em> <strong></strong>,  <i></i> <b></b>~ :: /emphasized/ and *strong* text
- ~<ol>~, ~<ul>~, ~<li>~ :: building "ordered" and "unordered" lists

#+end_slideblock

** Group Work:  HTML
:PROPERTIES:
:CUSTOM_ID: group-work-2:--html,-continued-03e2
:END:
Let's continue our introduction to HTML in VSCode
- *Clone  the excercse* [[https://github.com/titaniumbones/HabermasCode][at the Github Repository]]
#+BEGIN_NOTES
Here you can see the all parts of the page in different panes.  try to add:
- images
- lists
- real links
- anything else you can think of 
Try to keep it "real", and work as *teams*, with one person driving, and the other person looking stuff up on another computer.  
#+END_NOTES
** Assignment
[[https://digitalhistory.github.io/assignment/01-html-css/][The assignment is online]]. Let's talk about it.  

** COMMENT HTML to Markdown
:PROPERTIES:
:CUSTOM_ID: html-to-markdown-69a5
:END:
Writing in HTML is distracting and time-consuming!
- HTML for publication, but
- *Markdown* for writing
  - convenient shorthand for HTML which we will often use in class
** COMMENT Markdown cheatsheet
:PROPERTIES:
:CUSTOM_ID: markdown-cheatsheet-eb13
:END:
- ~_emphasis~ and ~__strong__~ :: single "_" or "*" surrounding words for /ital/, double for *bold*, triple for */bold ital/*
- > for blockquotes :: just preface your paragraph with an angle bracket and one space to get a quote
- Separate paragraphs with an empty line ::
- headings start with one or more "#" ::
- horizontal lines with ---- :: but be sure to keep one empty line above and below, or will be interpreted differently
- links with [Link Text](http://link.address) ::
- images with ![Alt Text](http://path.to.image) :: 
* 03-02 And Now: CSS!
:PROPERTIES:
:ID:       o2b:a5ac6273-2677-4058-9687-ee0d1cf51826
:POSTID:   616
:EXPORT_FILE_NAME: 03-2-css
:CUSTOM_ID: and-now:-css-03b2
:END:

** Reminder
:PROPERTIES:
:CUSTOM_ID: reminder-974a
:END:
- HTML for *structure/content*;
- CSS for *presentation*
- Resources:  [[http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1?curriculum_id=50579fb998b470000202dc8b][Codeacademy]] CSS offerings;  [[http://learnlayout.com/][Learn Layout]]; [[https://developer.mozilla.org/en-US/docs/Web/CSS][Mozilla Developer Network]]; many other cool sites

# Exercise for today: https://github.com/DigitalHistory/css-styling/ 

** What you Need to Learn Today
:PROPERTIES:
:CUSTOM_ID: what-you-need-to-learn-today-f47f
:END:
- syntax: selectors, rules, punctuation;
- jargon: colors, sizes
- where to look stuff up (!)

** CSS Basics
:PROPERTIES:
:CUSTOM_ID: css-basics-6376
:END:
- "[[http://en.wikipedia.org/wiki/Cascading_Style_Sheets][Cascading Style Sheets]]"
- Style sheet
- that "cascades" = overrides prior values
[[http://bollig.co/assets/page-images/understanding-the-cascade-part-1/css-cascade.jpg]]

#+begin_notes
two "dimensions" to cascade (source order and specificity)

- specificity is the hard/important one.  
#+end_notes
** With and without CSS
:PROPERTIES:
:CUSTOM_ID: with-and-without-css-43a6
:END:
#+ATTR_HTML: :class paired
[[file:~/HackingHistory/Images/nytimes-w-css.png]]  
#+ATTR_HTML: :class paired
[[file:~/HackingHistory/Images/nytimes-no-css.png]] 


** CSS Selectors
:PROPERTIES:
:CUSTOM_ID: css-selectors-ab36
:END:
*** Intro
:PROPERTIES:
:CUSTOM_ID: -c0f8
:END:
#+BEGIN_SRC css 
  h1 {
      color:blue;
      font-family:serif; 
      font-size:24px; 
  }

  div {
      border: 1px solid black;
  }

  div.main p {
      color:red;
  }

  #specialid {
      float:left;
  }
#+END_SRC

#+BEGIN_NOTES
When you look at a CSS file, you will see it is divided into a bunch of stanzas, like this.  Each of these stanzas is called a "selector statement":
They all follow the same pattern: 
- first, a *selector* that identifies the elements to which these instructions will apply
- then *an open brace* "{" which marks the start of the actual instructions
- then a series of *property-value pairs*.  Each of these sets the /value/ of a particular /property/ (duh).  Note that at the end of a property, there is *always* a semi-colon!  
- finally, *a closing brace* that ends the selector declaration.
#+END_NOTES
*** Selector Anatomy
:PROPERTIES:
:CUSTOM_ID: selector-anatomy-9f2b
:END:
#+NAME:css_rules0
#+begin_src html
<style>
 h1#anatomy1 {
      display: inline-flex;
     padding: 15px;
     background-color: rgb(30,30,30,0.1);
     font-size: 1.4em;
     border: 2px gray solid; }
  h1#anatomy1 span {padding: 4px;border: 2px black solid; background-color: rgba(10,70,10,0.6);}
  h1#anatomy1 span.selector {background-color: rgba(150, 20, 20, 0.4);}
  h1#anatomy1 span.rule {background-color: rgba(70, 10,70, 0.4);}
  h1#anatomy1 span.value {background-color: rgba(10,150, 150, 0.4);}

</style>

<h1 id="anatomy1">
  <span class="selector">selector.has >  #funny:stuff</span>
  <span class="bracket">{</span>
  <span class="rule">rule:</span>
  <span class="value">value in (approved);</span>
  <span class="bracket">}</span>
</h1>
#+end_src


#+begin_src js :var elId="shadow1"
let sroot = document.getElementById(elId).attachShadow({mode: 'open'});
console.log(elId);
#+end_src

#+RESULTS:
#+begin_src js
#+end_src

#+NAME:generate_shadow_element
#+begin_src js :var elId="shadow1"
let sroot = document.getElementById('shadowEx').attachShadow({mode: 'open'});
let htmlString =
#+end_src
*** 
#+begin_export html
<div id="shadowEx"></div>

<script>
let sroot = document.getElementById('shadowEx').attachShadow({mode: 'open'});
let htmlString = `
<<css_rules0>>
`;
// let doc = new DOMParser().parseFromString(htmlString, "text/xml");
function createElementFromHTML(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString.trim();

  // Change this to div.childNodes to support multiple top-level nodes
  return div; 
}

sroot.appendChild(createElementFromHTML(htmlString));
</script>
#+end_export

*** Selector types
:PROPERTIES:
:CUSTOM_ID: selector-types
:END:

#+BEGIN_SRC html
<style>
h1 {
font-size: 2em;
color: red;
}
p {
font-size:5em}

.coolpara {
color:green;
}

#myfave {
color:yellow;
background-color: black;
}
</style>

<h1> Heading</h1>
<p class="coolpara">Some Content</p>
<p id="myfave">Some Content</p>

#+END_SRC

#+BEGIN_NOTES
Though simple in principle, CSS selectors can be confusing.  Here are some basic selector types:
- *Element* selectors:  these just give the element (like h1, p, div, span, etc.).  they apply to all elements of this type.
- *Class* selectors:  these give the name of a class attribute that an HTML element may have.  This selector will always begin with a period (".").  So for instance:

- *ID* selector:  this addresses the element with a particular ID:

#+END_NOTES
*** Selector types
:PROPERTIES:
:CUSTOM_ID: selector-types-e94f
:END:
#+begin_export html

<style>
div#cssdemo h1 {
font-size: 3em;
color: red;
}
div#cssdemo p {
font-size:5em}

.coolpara {
color:green;
}

div#cssdemo #myfave {
color:yellow;
background-color: black;
}
</style>

<div id="cssdemo">
<h1> Heading</h1>
<p class="coolpara">Some Content</p>
<p id="myfave">Some Content</p>
</div>
#+end_export

*** More Selectors
:PROPERTIES:
:CUSTOM_ID: more-selectors-d28a
:END:
#+BEGIN_SRC css
div.main p {
      color:red;
  }

div.main > p.blue {
      color: blue;
}
#+END_SRC

#+BEGIN_NOTES
- Finally, we have many more complex selectors.  This one here is a descendant selector
It addresses every *p* that is contained inside a div of *class* /"main."/
#+END_NOTES

*** More Selectors
:PROPERTIES:
:CUSTOM_ID: more-selectors-d8a0
:END:
#+BEGIN_export html
<style>
div#cssmain p {
      color:red;
  }

div#cssmain > p.blue {
      color: blue;
}
</style>
<div id="cssmain">
<p> regular (red) paragraph</p>
  <p class="blue"> not a regular paragraph (blue) </p>

</div>
#+END_export
** Selectors and the Cascade
:PROPERTIES:
:CUSTOM_ID: selectors-and-the-cascade-0a08
:END:
- Priority: inline \rightarrow id \rightarrow class \rightarrow element/tag
- fine gradations within this
- the awful *!important* rule
** Color Values
:PROPERTIES:
:CUSTOM_ID: color-values-456b
:END:
Various representations:
#+begin_export html
<style>
ul#color-rules {font-size 1.5rem;}
ul#color-rules li span.red {color: #FF0000}  
ul#color-rules li span.green {color: #00FF00}  
ul#color-rules li span.blue {color: #0000FF}  
</style>

<ul id="color-rules">
  <li>
    color: #
    <span class="red">00</span>
    <span class="green">7F</span>
    <span class="blue">FF</span>
    ;
  </li>
  <li>
    color: rgb(
    <span class="red">00</span>,
    <span class="green">127</span>,
    <span class="blue">255</span>
    );
  </li>
  <li>
    color: rgba(
    <span class="red">00</span>,
    <span class="green">127</span>,
    <span class="blue">255</span>, 0.6);
  </li>
</ul>
#+end_export

(also hsl, hsla)
*** Fonts, colors and borders
:PROPERTIES:
:CUSTOM_ID: fonts,-colors-and-borders-127a
:END:
#+BEGIN_SRC css
div.main {
      color: rgb(150,150,150);
      background-color: (#b0c4ee);
      text-align: center;
      text-decoration:underline;
      font-family: "Times New Roman", Times, Serif;
      font-style:italic;
      font-size:1.25em;
      border: 4px green solid;
      border-radius:20%;
  }
#+END_SRC
#+BEGIN_NOTES
A lot of what we do with CSS is to set fonts and colors.  Here are some examples:
There are plenty of other properties that can be set, in much the same way.
#+END_NOTES
*** Fonts and Colors in Action
:PROPERTIES:
:CUSTOM_ID: fonts-and-colors-in-action-1cb9
:END:
#+BEGIN_export html
<style>
div#maincss2 {
      color: rgb(150,150,150);
      background-color: (#b0c4ee);
      text-align: center;
      text-decoration:underline;
      font-family: "Times New Roman", Times, Serif;
      font-style:italic;
      font-size:1.25em;
      border: 4px green solid;
      border-radius:20%;
  }
</style>
<div id="maincss2">
   <p> here is a sample paragraph doing all of this stuff...</p>
#+END_export
** Sizes 
:PROPERTIES:
:CUSTOM_ID: sizes-af7f
:END:
#+begin_src html
<style>
 p.fixed {
     font-size: 20px;
     background-color: gray;
     } 
 p.em-small {
     font-size: 0.4em;
     background-color: blue;
 }
 p.em-big {
     font-size: 2.5em;
     background-color: red;
 }
 div.pixel-box {
     width: 50px;
     height: 50px;
     border: 1px solid black;
 }
 div.percent-box {
     width: 20%;
     height: 20px;
     border: 1px solid black;
 }
 div.viewport-box {
     width: 30vw;
     height: 30vh;
     border: 1px solid black;
 }
 
</style>

<p class="fixed">This paragraph will be syled differently from its peers</p>
<p class="em-small">This paragraph will be syled differently from its peers</p>
<p class="em-big">This paragraph will be syled differently from its peers</p>

<div class="pixel-box"></div>
<div class="percent-box"></div>
<div class="viewport-box"></div>
#+end_src
** Sizes
:PROPERTIES:
:CUSTOM_ID: sizes-082b
:END:
#+begin_export html
<style>
 p.fixed {
     font-size: 20px;
     background-color: gray;
 }
 p.em-small {
     font-size: 0.4em;
     background-color: blue;
 }
 p.em-big {
     font-size: 2.5em;
     background-color: red;
 }
 div.pixel-box {
     width: 50px;
     height: 50px;
     border: 1px solid black;
 }
 div.percent-box {
     width: 20%;
     height: 20px;
     border: 1px solid black;
 }
 div.viewport-box {
     width: 30vw;
     height: 30vh;
     border: 1px solid black;
 }
 
</style>

<p class="fixed">This paragraph will be syled differently from its peers</p>
<p class="em-small">This paragraph will be syled differently from its peers</p>
<p class="em-big">This paragraph will be syled differently from its peers</p>

<div class="pixel-box"></div>
<div class="percent-box"></div>
<div class="viewport-box"></div>
#+end_export

** Group Work:  HTML
:PROPERTIES:
:CUSTOM_ID: group-work-2:--html,-continued-03e2
:END:
Let's continue our introduction to HTML in VSCode
- *Clone  the excercse* [[https://github.com/titaniumbones/HabermasCode][at the Github Repository]]
#+BEGIN_NOTES
Here you can see the all parts of the page in different panes.  try to add:
- images
- lists
- real links
- anything else you can think of 
Try to keep it "real", and work as *teams*, with one person driving, and the other person looking stuff up on another computer.  
#+END_NOTES
** Simple Exercise
:PROPERTIES:
:CUSTOM_ID: simple-exercise-ca4d
:END:
https://github.com/DigitalHistory/css-styling/
* ACTION 04-01: What the Web Signifies
:PROPERTIES:
:EXPORT_FILE_NAME: 04-01-web-signifies
:END:
** Today 
- Assignment 0 review
- Concept of the "Public Sphere"
- Internet and Habermas's conception
- CSS Layout/Assignment 1
** Significance and Signification 
:PROPERTIES:
:CUSTOM_ID: significance-and-signification-4ace
:END:
- What /matters/ about the web?
- /How does the web/ create and change meaning?

#+BEGIN_NOTES
- *Significance:* what is its importance?
- *Signification:* how does the web introduce or trransform meaning? 
#+END_NOTES
*** What matters about the web?
:PROPERTIES: 
:STEP: t
:HTML_CONTAINER_CLASS: slide
:CUSTOM_ID: what-matters-about-the-web?-944f
:END:

Web has had enormous effects
#+ATTR_REVEAL: :frag (appear appear appear appear appear)
  - economic
  - political
  - cultural
  - *but I want to talk about* */discursive/*
  - does the web change what /kinds of conversations/ we can have?
    - for the better, or for the worse?
#+BEGIN_NOTES
- "peculiar :technical affordances"  of this technological system
  - tech systems make some things possible & other things impossible. Or, at lease: some thing *easy* and other things *very difficult*.
  - ex: chainsaw vs. jigsaw. Table saw vs. Band saw.  Pencil vs. pen.  
#+END_NOTES
** Part I: The Public Sphere
:PROPERTIES:
:CUSTOM_ID: part-i:-the-public-sphere-4b49
:END:
*** Authenticity in a media age
:PROPERTIES:
:CUSTOM_ID: authenticity-in-a-media-age-9bf8
:END:
#+CAPTION: Jürgen Habermas
#+ATTR_HTML: :style max-height:70vh;
[[http://upload.wikimedia.org/wikipedia/commons/4/4d/JuergenHabermas.jpg]]
*** Mid-century anxiety
:PROPERTIES:
:CUSTOM_ID: mid-century-anxiety-a1d1
:END:
#+ATTR_REVEAL: :frag appear
- Appearance of new media (radio, TV, new kinds of magazine)
- Are these "degraded"?
- Do the media make us stupider?
- Less critical?
- More pliable?

*** Reasons to worry
:PROPERTIES:
:CUSTOM_ID: reasons-to-worry-7254
:reveal_extra_attr: class="twobytwo"
:END:
#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
https://upload.wikimedia.org/wikipedia/commons/6/67/Bundesarchiv_Bild_102-17049%2C_Joseph_Goebbels_spricht.jpg
#+end_slideblock
#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
https://upload.wikimedia.org/wikipedia/en/8/86/EwigerJudeFilm.jpg
#+end_slideblock

#+ATTR_REVEAL: :frag (appear) 
#+begin_slideblock
#+ATTR_REVEAL: :frag appear
- maybe there are /material conditions/ that make this sort of evil possible?
- perhaps the media of communication have a role?  

#+end_slideblock

*** The Public Sphere
:PROPERTIES:
:CUSTOM_ID: the-public-sphere-d6c3
:END:
#+BEGIN_QUOTE
A portion of the public sphere comes into being in every conversation in which private individuals assemble to form a public body.

  -- J. Habermas

#+END_QUOTE

#+BEGIN_NOTES

Habermas wants us to believe in the reality of the "public sphere", as a /discursive body/ composed of /conversations/ that have /a certain form/
#+END_NOTES
*** Jürgen Habermas (b. 1929)
:PROPERTIES:
:CUSTOM_ID: jürgen-habermas-(b.-1929)-0ad4
:END:
- pre-eminent German public intellectual of 1960's and 1970's
- role of Holocaust/Fascism in all his thinking
- inheritance from the Frankfurt School
- search for "authentic" forms of communication
*** Concept of the Public Sphere
:PROPERTIES:
:HTML_CONTAINER_CLASS: slide
:CUSTOM_ID: concept-of-the-public-sphere-9b21
:END:

#+BEGIN_QUOTE
By "the public sphere" we mean... a realm of our social life in which something approaching public opinion can be formed... *Citizens behave as a public body when they confer in an unrestricted fashion* -- that is, with the guarantee of freedom of assembly and association and the freedom to express and publish their opinions -- *about matters of general interest.* (Habermas 1964, p.49[p.2])
#+END_QUOTE
#+BEGIN_NOTES
Unpacking:
- *"something approaching public opinion":* suggests that "public opinion" has a technical meaning
- *Conferring in an unrestricted fashion*: the public sphere *requires* a certain kind of freedom
- *Matters of general interest*: we're not talking about breakfast, jeans, or lipstick.  
#+END_NOTES

** Public and Private
:PROPERTIES:
:CUSTOM_ID: public-and-private-f483
:END:
#+ATTR_HTML: :class "smalltable"
| Public                               | Private                         |
|--------------------------------------+---------------------------------|
| open to all                          | restricted                      |
| accessible for money                 | closed even if you can pay      |
| state-related                        | non-state, civil society        |
| political                            | non-political                   |
| official                             | non-official                    |
| common                               | special                         |
| impersonal                           | personal                        |
| national or popular                  | group, class, or locale         |
| international/universal              | particular/finite               |
| in view of others                    | concealed                       |
| outside the home                     | domestic                        |
| circulated in print/electronic media | circulated orally/in manuscript |
| known widely                         | known only to a few             |
| acknowledged/explicit                | tacit/implicit                  |

#+BEGIN_NOTES
- many definitions
- not all of them part of Habermas's terminology
#+END_NOTES
** Concept of the Public Sphere
:PROPERTIES:
:STEP: 1
:CUSTOM_ID: concept-of-the-public-sphere-3013
:END:
*Strukturwandlung der Öffentlichkeit (1962)*
#+ATTR_REVEAL: :frag (none none none appear appear appear appear)
- Arena ruled by rational argument 
- Freedom of expression prevails (/...an unrestricted fashion/)
- Conversations concern /common interests/ (e.g. ?)
- both *ideal* and *historical*
- arises first in 18th Century
- flourishes and then withers in 19th
- at a nadir in 20th; can it be revived?
#+BEGIN_NOTES
Habermas's /Habilitation/ and first important book.  but 35 years old!!
#+END_NOTES
** Before Bourgeois Society
:PROPERTIES:
:CUSTOM_ID: before-bourgeois-society-dd7b
:END:
- There is no "Public Sphere"
- Instead there are "Public Individuals" with certain powers
  - and Church authorities, empowered to speak on moral matters
- Opposed to these are "private persons"
#+BEGIN_NOTES
Begin the historical story w/ the classic trnasition to a bourgeois/capitalist society around 1800.  
- before this point, not public sphere, just public individuals, who are distinct from 'private persons"
#+END_NOTES
*** Private and Public Persons
:PROPERTIES:
:CUSTOM_ID: private-and-public-persons-f0ec
:END:
#+BEGIN_QUOTE
A private person has no right to pass /public/ and perhaps even disapproving judgement on the actions, procedures, laws, regulations, and ordinances of sovereigns and courts.... or to publish in print pertinent reports that he manages to obtain.  *For a private person is not at all capable of making such judgment*, because he lacks complete knowledge of circumstances and motives.

  -- Frederick 'the Great' of Prussia, 1784
#+END_QUOTE
#+BEGIN_NOTES
"Private" and "Public" distinguish /types of person/, not types of activity. 
#+END_NOTES
** 18th Century Origins
:PROPERTIES:
:CUSTOM_ID: 18th-century-origins-265c
:END:
- How do we get from a monarchy in which only 'public persons' have license to speak on 'public matters', to a 'public sphere' which is opened more widely?
#+ATTR_REVEAL: :frag appear
- Rise of newspapers/journals. Intrusion of private commentary on 'public' matters
  - a new kind of /media/
- rise of /salons/ & coffee houses.
  - a new kind of /sociality/.  
** 
*** Salons and Coffee Houses
:PROPERTIES: 
:HTML_CONTAINER_CLASS: slide
:CUSTOM_ID: salons-and-coffee-houses-4538
:reveal_extra_attr: class="splitc"
:END:
#+begin_slideblock
#+ATTR_REVEAL: :frag (appear) 
- /Salons/ as the heart of intellectual activity in c. 18
  - 'monopoly on first publication'
  - mixing of classes
  - freedom from patronage
- Coffee Houses a similar space
  - But no restrictions on topics of discourse
  - matters of /politics/ as frequent a topic as art
- an ideal of /common humanity/ esp. in coffee houses
  - opinions judged by reason alone
    - no intrusion of 'distinction' /or/ finance
  - [ *but note:* imperfection of this vision ]

#+end_slideblock

#+begin_slideblock
https://upload.wikimedia.org/wikipedia/commons/1/17/17th_century_coffeehouse_england_1-580x400.jpg
#+end_slideblock

#+begin_slideblock
[[http://cabinetmagazine.org/issues/8/assets/images/main/coffeehouse.jpg]]
#+end_slideblock
#+BEGIN_NOTES
one of the longstanding critiques of Habermas is the /actual/ restrictiveness of coffee houses /in real life/.  Who's excluded? make a list: women, the truly poor, non-Europeans, the uneducated (to some extent), 
#+END_NOTES
*** Circulation
:PROPERTIES: 
:HTML_CONTAINER_CLASS: slide
:CUSTOM_ID: circulation-d616
:END:
- Communication across broad spaces & differences needs something more than conversation
- need a way get ideas to large numbers
  - news sheets \rarr newspapers
  - letters \rarr journals

*** Markets
:PROPERTIES: 
:STEP: t
:HTML_CONTAINER_CLASS: slide
:CUSTOM_ID: markets-ec75
:END:
- Through newspapers & journals conversation becomes a /commodity/
- Therefore it loses its exclusivity
- so, in the beginning, /commodification is a *good thing*/
#+BEGIN_NOTES
This process of commodification, and its trasformation from a *positive, welcome* force in to a *troubling, destructive* one is central to H but is not just his idea.
#+END_NOTES
** The State vs. Society
:PROPERTIES:
:CUSTOM_ID: the-state-vs.-society-4420
:END:
- This is all happening in a pre-democratic era (mostly)
- 'The People' are /a problem/ for the state
- growth of 'the social' a threat to sovereignty
- 'public sphere' precarious and subject to dissolution
*** The Structure of the Public Sphere
:PROPERTIES: 
:STEP: t
:HTML_CONTAINER_CLASS: slide
:CUSTOM_ID: the-structure-of-the-public-sphere-3d98
:END:

#+ATTR_HTML: border="2" rules="all" frame="all"
| Private Realm                                     | Public Sphere                        | Sphere of Public Authority |
|---------------------------------------------------+--------------------------------------+----------------------------|
| Civil Society (Commodity Exchange, social labour) | Political Public Sphere              | State                      |
| Conjugal Family                                   | Literary/Philosophical Public Sphere | Court                      |


- /the public sphere sits between Private Life and Authority, striving for independence from both/
- it *mediates* between them and draws its legitimacy from its use of reason
- note that it *presupposes* an emergent realm of "privacy" -- and so, it is grounded in that notion, like all liberal philosophical constructs
** From Debate to Consumption
:PROPERTIES:
:CUSTOM_ID: from-debate-to-consumption-2369
:END:
- Public Sphere in effect /undoes itself/
- success of media dissolves the reciprocal creation & communication of ideas
  - instead we just /consume/
  - /reason/ begins to vanish
- Massive growth of media in c.20
  - radio, television, film
- The Public Sphere: A Hollow Shell?
  - Where is its legitimacy?

** Reception
:PROPERTIES:
:CUSTOM_ID: reception-d9f8
:END:
- extremely influential
- with some questions about both the /historical/ and the /philosophical/ elements of the story.
*** Counterpublics
:PROPERTIES:
:CUSTOM_ID: counterpublics-8f8c
:END:
#+BEGIN_QUOTE
...some publics are defined by their tension with a larger public... Discussion with such a public is understood to *contravene the rules obtaining in the world at large*... This kind of public is, in effect, a *counterpublic*: it maintains at some level... an awareness of its subordinate status.
  -- M. Warner (2002)
#+END_QUOTE

*** One or Many?
:PROPERTIES:
:CUSTOM_ID: one-or-many?-f97b
:END:
- Habermas sees Public Sphere as *necessarily unitary*
- But discourse carves out separate spaces
  - that may correlate with social divides
  - ... and where the addressee ("stranger") is presumed to share a *common subordination* with the speaker
- ("Given the fact that almost anyone can contribute to public discourse, the multiplicity of perspectives makes it even more difficult to define public opinion. Any designation of public opinion then becomes arbitrary")

*** Disinterested or embodied?
:PROPERTIES:
:CUSTOM_ID: disinterested-or-embodied?-9ff3
:END:
- for Habermas *separation* of individual from *both* "accidental" circumstances *and* official capacities is paramount
- Warner:  This is fictive
  - and anyway undesirable
    - because some kinds of "argument" are fundamentally corporeal
    - this doesn't make them less legitimate
    - does it?  

*** Reading or Acting
:PROPERTIES:
:CUSTOM_ID: reading-or-acting-3a57
:END:
- Habermas:  the actions of a legitimate public sphere are actions of reading (scrutinize, judge, decide)
- Warner: in a counterpublic, there may be other sorts of actions (prance, diss, act up, fantasize, mourn)

** How this matters for History
:PROPERTIES:
:CUSTOM_ID: how-this-matters-for-history-d592
:END:
- If there are many "publics", then working to carve out a particular space for discourse can have salutary effects
- Modes of address and standards of comportment can differ across 'publics'
- May even be possible to craft a 'public' around our work.
  - though " it follows that the public exists only as long as the text is being engaged with"

*** Enter the Internet
:PROPERTIES:
:CUSTOM_ID: enter-the-internet-ab5f
:END:
- Habermas' theory revolves around a *technology* and a *social institution*
  - enabled by print, threatened by TV
  - can the Internet undo this dissolution?  If so, how?
  - if not, is it the apotheosis of that dissolution?

*** Digital History and the Public Sphere
:PROPERTIES:
:CUSTOM_ID: digital-history-and-the-public-sphere-5a06
:END:
- Does the Internet provide a space for authentic /public/ conversatoin?
- What are effects of the /medium/ on /how we pursue knowledge and truth/?
#+ATTR_REVEAL: :frag appear
  - *state and corporate pressures*
  - algorithmic actors (!)

*** Technical Affordances of the web
:PROPERTIES:
:CUSTOM_ID: technical-affordances-of-the-web-503d
:END:
- instantaneous distribution
- distributed production
- machine-readable text
- algorithmic sorting
#+BEGIN_NOTES
All of these are present in *every* web-based communication.  But realms of the web have distinct affordances of their own: [[http://www.reddit.com][Reddit]] \ne [[http://twitter.com][twitter]] \ne [[http://www.facebook.com][facebook]] \ne [[http://nytimes.com][The New York Times]]
#+END_NOTES
*** COMMENT Group Work
:PROPERTIES:
:CUSTOM_ID: exercise-81e3
:END:
- Groups of ~3
- Pro- and Anti-
- 3 strongest arguments for/against Internet as an "authentic" public sphere
** Assignment 1: CSS -- some hints
- new youtube video will help a little
- watch me work briefly with [[https://github.com/DigitalHistory/css-layout.git][css-layout practice repo]]

* 04-02, CSS Part 2: Layout
:PROPERTIES:
:EXPORT_FILE_NAME: 04-02-css-layout
:CUSTOM_ID: 04-02-css-part-2-layout-494e
:END:

** Recap
:PROPERTIES:
:CUSTOM_ID: recap-7f3b
:END:
- selector syntax: ~selector > string {property: value;}~
- colors: ~#RRGGBB~ or ~rgba(RRR, BBB, GGG, 0.alpha)~
- sizes: ~px~ or ~em~ (or ~rem~)

** Today
:PROPERTIES:
:CUSTOM_ID: today-e46c
:END:
- intro to layout
- follow along with the repo: https://github.com/DigitalHistory/css-layout 

** Box Model
:PROPERTIES:
:CUSTOM_ID: box-model-6dae
:END:

[[http://2014.hackinghistory.ca/wp-content/uploads/2014/09/wpid-boxmodel.png]]

- content
- padding
- border
- margin
#+begin_notes
One important notion to understand in CSS is the so-called "[[http://www.w3.org/TR/CSS2/box.html][Box Model]]", which accounts for the distribution of whitespace around elements.  A lot of the grief you will encounter when designing websites will come back to the box model, so it's important to learn it:  

#+end_notes
** "Russian Dolls"
:PROPERTIES:
:CUSTOM_ID: russian-dolls-ba13
:END:

https://www.w3.org/TR/css-flexbox-1/images/flex-order-page.svg
** Display: Block vs. Inline
:PROPERTIES:
:CUSTOM_ID: display:-block-vs.-inline-1e99
:END:
https://i.stack.imgur.com/mGTYI.png
- *block* elements *have their own boxes*
- *inline* elements *do not have boxes*. height, width, padding, work inconsistently.
- *inline-block* elements don't make "true" boxes but allow you to set height and width. 
#+begin_notes
by default, these elements are inline:
- a, b, i, strong, em, span, img
while these are block:
- div, article, section, nav, hx, p, ul, ol, li, main, header, footer
#+end_notes
** Normal Flow
:PROPERTIES:
:CUSTOM_ID: normal-flow-9b65
:END:
- page processed sequentially
- each block-level element gets its own line
- inline elements displayed inside those lines
- heights of lines set by height of content 
** Layout: Overriding "normal" flows
:PROPERTIES:
:CUSTOM_ID: layout:-overriding-normal-flows-6043
:END:
- instruct elements to either *step out of the normal flow* or *set new rues for their "internal" or "external" flow*
** Layout Methods
:PROPERTIES:
:CUSTOM_ID: layout-methods-5357
:END:
- *display* property
- *position* property
- *float* property

We focus on *display* but dip into the other methods
** Display
:PROPERTIES:
:CUSTOM_ID: display-f731
:END:
values we care about: 
- display: none
- display: block/inline/inline-block
- display: flex
- display: grid
** Follow Along
:PROPERTIES:
:CUSTOM_ID: follow-along-e70b
:END:
- I'll be using *dev tools* to quickly change css properties
- do the same if you wish!
-  https://github.com/DigitalHistory/css-layout 


** Default View (just some silly styling)
:PROPERTIES:
:reveal_extra_attr: class="twoc"
:CUSTOM_ID: default-view-(just-some-silly-styling)-3cbb
:END:
#+begin_slideblock
#+ATTR_REVEAL: :no-klipsify t
#+NAME: basic_layout
#+begin_src html
<style>
 main {
     display: block;
 }

 header {
     display:block;
 }
</style>

<main>
    <header>
        <h1>header</h1>
    </header>
    <article>
        <p>article p</p>
    </article>
    <footer>footer</footer>
</main>

#+end_src

#+end_slideblock
@@html:<div class="slideblock fragment appear" id="basic_layout"></iv>@@
#+CALL: generate_shadow_dom[:results html :exports "results"]("basic_layout", basic_layout) 
** Display: None
:PROPERTIES:
:CUSTOM_ID: display:-none-5a37
:reveal_extra_attr: class="twoc"
:END:
#+begin_slideblock
hide element *completely* so that it takes up no space at all
#+ATTR_REVEAL: :no-klipsify t
#+NAME: none_layout
#+begin_src html
<style>
 main {
     display: block;
 }

 header {
     display: none;
 }
</style>

<main>
    <header>
        <h1>header</h1>
    </header>
    <article>
        <p>article p</p>
    </article>
    <footer>footer</footer>
</main>

#+end_src

#+end_slideblock
@@html:<div class="slideblock fragment appear" id="display_none"></div>@@
#+CALL: generate_shadow_dom[:results html :exports "results"]("display_none", none_layout) 
** Display: Flex
:PROPERTIES:
:CUSTOM_ID: display:-flex-2a88
:reveal_extra_attr: class="twoc"
:END:
#+begin_slideblock

- one-dimensional layout
- "content-out"
  - container determines direction & a few defaults
  - most styling still in children
- revolutionary!

#+ATTR_REVEAL: :no-klipsify t
#+ATTR_REVEAL: :frag (appear) 
#+NAME: flex_layout
#+begin_src html
<style>
 main {
     display: flex;
     align-items: center;
     justify-content: stretch;
 }
 main>* {
     flex-grow: 1;
 }
</style>

<main>
    <header>
        <h1>header</h1>
    </header>
    <article>
        <p>article p</p>
    </article>
    <footer>footer</footer>
</main>

#+end_src



#+end_slideblock
@@html:<div class="slideblock fragment appear" id="display_flex"></div>@@

#+CALL: generate_shadow_dom[:results html :exports "results"]("display_flex", flex_layout)

*** Flex Concepts: Container and Items
:PROPERTIES:
:CUSTOM_ID: flex-concepts:-container-and-items-c4e5
:END:
- the *container* has *display: flex;*
- the *items* are *direct children of the container*
- *container* controls *direction* and *wrapping behaviour*, as well as *default box alignments*;
- *items* control most other properties
*** Flex Concepts: Direction (container!)
:PROPERTIES:
:CUSTOM_ID: flex-concepts:-direction-(container)-0ecf
:END:
https://mdn.mozillademos.org/files/3739/flex_terms.png
- *main axis*: horizontal if *flex-direction: column*; vertical if *flex-direction: row*
- *cross axis*: vertical if *flex-direction: column*; horizontal if *flex-direction: row*
*** Flex Concepts: Alignment, Justification (container and items!) 
:PROPERTIES:
:CUSTOM_ID: flex-concepts:-alignment,-justification-(container-and-items)-40c6
:END:
- *align-items*: default cross-axis alignment (stretch, flex-start, flex-end)
- *justify-content*: default main-axis alignment (flex-start, flex-end, space-around, space-between)
- *align-self:* item cross-axis
- *order*: placement in flex-container (relative, not absolute!!)
** Display: Grid
:PROPERTIES:
:CUSTOM_ID: display:-grid-f6dd
:reveal_extra_attr: class="twoc"
:END:
#+begin_slideblock
- two-dimensional layout
- "container-in"
  - container determines almost all layout properties
  - children choose their position within the grid
- revolutionary!
#+ATTR_REVEAL: :frag (appear) 
#+ATTR_REVEAL: :no-klipsify t
#+NAME: grid_layout
#+begin_src html
<style>
 main {
     display: grid;
     height: 100%;
     grid-template-rows: 1fr 4fr 1fr;
     grid-template-columns: 1fr 2fr;
 }
 main>* {
     min-width: 100%;
     border: 2px green solid;
 }
header,footer {
    grid-column: 1/3;
}
</style>

<main>
    <header>
        <h1>header</h1>
    </header>
    <aside>
    aside
    </aside>
    <article>
        <p>article p</p>
    </article>
    <footer>footer</footer>
</main>

#+end_src
#+end_slideblock
@@html:<div class="slideblock fragment appear" id="display_grid"></div>@@
#+CALL: generate_shadow_dom[:results html :exports "results"]("display_grid", grid_layout)

*** A lot like flex!
:PROPERTIES:
:CUSTOM_ID: a-lot-like-flex-1b97
:END:
- many ideas come from flex
- finer control
- 2 dimensions, not one
*** Grid Concepts: Container and Items
:PROPERTIES:
:CUSTOM_ID: grid-concepts:-container-and-items-c24b
:END:
- as in flex
*** Grid Concepts: Templates and Areas (container)
:PROPERTIES:
:CUSTOM_ID: grid-concepts:-templates-and-areas-(container)-4a8c
:END:
- set patterns for the 2-d grid
- *grid-template-columns*: how many columns, and what size?
- *grid-template-rows*: how many rows, and what size?
- *grid-template-areas*: *names* the areas, and allows *items* to set their own areas
*** Placing Items
:PROPERTIES:
:CUSTOM_ID: placing-items-ecc0
:END:
- *grid-column: n/m*: place items by *column-number*
- *grid-row: n/m*: place items by *row-number*
  - (note how these allow spanning)
- *grid-area: area-name*: place by *named area*
  - does not allow spanning
*** Resources
:PROPERTIES:
:CUSTOM_ID: resources-7128
:END:
- [[http://grid.malven.co/][visual cheatsheet]]
- [[https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids][MDN Grid series]]
** Media Queries
:PROPERTIES:
:CUSTOM_ID: media-queries-9633
:END:
- CSS rules that only come into effect under certain conditions
- we will only use for *screen size*
- allows creation of *responsive* sites
#+begin_src css
@media screen and (min-width: 500px;) {
    normal.selector > here {
        normal-rule: normal-value;
    }
}

@media screen and (max-width: 499px) {
    normal.selector > here {
        normal-rule: normal-value;
    }    
}
#+end_src
* Basic HTML -- just blocks for exporting later, not a lecture
:PROPERTIES:
:CUSTOM_ID: basic-html-4d6d
:END:
#+NAME: css_l_nodes
#+begin_src html
        <main>
            <nav>CSS Layout Exercise for <a href="https://digitalhistory.github.io">Digital History (HIS393)</a></nav>
            <aside>Sidebar ("Aside")</aside>
            <article>
                <header>
                    <h1>main > article > header > h1. I also contain a <span>span element</span>, which displays inline by default.  </h1>                
                </header>
                <section class="content">
                    <h2>main > article > section.content > h2</h2>
                    <p class="normal">Here is a normal paragraph</p>
                    <p class="normal">Here is another normal paragraph</p>
 
                    <ul id="mainlist">
                        <li class="red">List item 1 -- class of red</li>
                        <li>List item 2</li>
                        <li id="special">List item 3 -- id of special</li>
                        <li>List item 6</li>
                    </ul>
                    <div class="child-and-grand">
                        <p>just filling space but you can style me if you like. </p>
                        <div>
                            <p>bla bla bla <strong>bla</strong> bla bla. </p>
                        </div>
                    </div>
                </section>
                <footer class="inner">main > article > footer</footer>
            </article>
            <footer class="outer">main > footer</footer>
        </main>
#+end_src

#+NAME: css_l_defstyle
#+begin_src css
main {
    border: 2px solid red;
    min-height: 80vh;
    background-color: rgba(180,20,20,0.05);
    /* display: block; // this is the default */
    /* display: none; */


    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: stretch; */
    /* align-items: flex-end; */
    /* align-items: flex-start; */

    /* display: grid */
    /* grid-template-columns: 300px 300px 300px; */
    /* grid-template-columns: 1fr 3fr 1fr; */
    /* grid-template-areas: "nav nav nav"
                             "aside art footer"
                             ;*/
    
}

main > * {
    border: 2px solid blue;
    margin: 5px;
    padding: 5px;
    background-color: rgba(30, 30,200,0.1);
    /* display: inline; */
    /* flex: 1 200px; */
    /*  */
}

h1 > span {
    background-color: yellow;
    /* padding: 60px; */
    border: 2px solid magenta;
    /* display: block; */
}

nav {
    /* grid-area: nav; */
}

aside {
    /* align-self: flex-end ; */
    /* order: -1; */
    /* grid-area: aside; */

}

article {
    /* flex: 2 400px; */
    /* grid-area: art; */
    
}


footer.outer {
    /* grid-area: footer; */
}


/* Not really relevant for today but I want you to see how I modified content with pure CSS */
/* p.normal:nth-of-type(2)::after { */
/*     content: ' -    Mwahahahahhaha'; */
/*     background-color: purple; */
             
/* } */


/* put our media queries here */

@media screen and (max-width: 800px) {
    main {
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: auto;
        grid-template-areas: "nav nav nav" "aside art art" "footer footer footer";
        
    }
}

@media screen and (max-width: 500px) {
    main {
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: auto;
        grid-template-areas: "nav" "art" "aside" "footer";
        
    }
}

#+end_src
#+begin_src html
<main>
  <article>
    <header>
      <h1>H1 inside Header</h1>
    </header>
    <section>
      <p>First Paragraph</p>
      <p>Second Paragraph</p>
      <img alt="Juergen Habermas" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/JuergenHabermas_retouched.jpg/407px-JuergenHabermas_retouched.jpg"/>
      <p>Third Paragraph</p>
    </section>
    <footer>Footer text -- no nested elements</footer>
  </article>
</main>
#+end_src


#+Attr_reveal: :No-Klipsify T
#+NAME: generate_shadow_dom
#+begin_src inline-js :var elId="shadowEx"  :var dom_block=css_rules0 :exports none
function createElementFromHTML(htmlString) {
  let div = document.createElement('div');
  div.innerHTML = htmlString.trim();

  // Change This to div.childNodes to support multiple top-level nodes
  return div; 
}

// window.addEventListener("load",function(){
var htmlString = dom_block;
if (typeof document != 'undefined') {
  let sroot = document.getElementById(elId).attachShadow({mode: 'open'});
  sroot.appendChild(createElementFromHTML(htmlString));
}
//return (htmlString);
  console.log("HTMLSTRING!" + htmlString);
// });
#+end_src


** COMMENT Padding's Effects
:PROPERTIES:
:CUSTOM_ID: padding's-effects-1fea
:END:
#+BEGIN_SRC html
<style>
.simple {
  width: 500px;
  height: 50px;
  background-color: black;
  margin: 20px auto;
  border: 10px blue solid; }

.fancy {
  width: 500px;
  height: 50px;
  padding: 50px;
  background-color: black;
  //background-clip: content-box;
  margin: 20px auto;
  border: 10px blue solid; }
</style>
<div class="simple"></div>
<div class="fancy"></div>
#+END_SRC
#+BEGIN_NOTES
~<div class="fancy">~ will look a lot bigger than ~<div class="simple">~, even though they are nominally the same size!  

There are two ways to deal with this:  
1. subtract the size of the padding and border from your width values
2. use the new "box-sizing:border-box" attribute.  This will do all the math for you.  
#+END_NOTES


** COMMENT Box-sizing Border-box
:PROPERTIES:
:CUSTOM_ID: box-sizing-border-box-35df
:END:
#+BEGIN_SRC html
<style>
.simple {
  width: 500px;
  height: 50px;
  //background-color: black;
  //background-clip: content-box;
  margin: 20px auto;
  border: 10px blue solid; }

.fancy {
  width: 500px;
  height: 50px;
  padding: 50px;
  background-color: black;
  //background-clip: content-box;
  margin: 20px auto;
  border: 10px blue solid; }

div {box-sizing: border-box;}
</style>
<div class="simple"></div>
<div class="fancy"></div>
#+END_SRC

#+BEGIN_NOTES
~<div class="fancy">~ will look a lot bigger than ~<div class="simple">~, even though they are nominally the same size!  

There are two ways to deal with this:  
1. subtract the size of the padding and border from your width values
2. use the new "box-sizing:border-box" attribute.  This will do all the math for you.  

#+END_NOTES


** COMMENT Positioning
:PROPERTIES:
:CUSTOM_ID: positioning-9151
:END:

This is a difficult subject.  When you are dealing with lots of different screen sizes and resolutions, and different devices with different fonts installed, etc., it is not trivial to position every element precisely where you want it.  You will find a lot of your teeth-gnashing time is spent trying to get various columns of content to line up pretty, center themselves, etc.  

The CSS "position" property has four possible values, whose names are [[http://learnlayout.com/position.html][impossible to remember and anyway don't make sense]].  The four most important are:

#+BEGIN_SRC css
.static {
  position: static;
}
.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}
.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}
#+END_SRC

- *Static* positioning is the default.  A statically-positioned element is said to be "unpositioned".
- *Relatively* positioned elements are displaced /relative/ to the position they "ought" to be occupying (according to the defaults).  But meanwhile, the space it "ought" to be occupying is still considered "taken" by the browser, which won't put anything else in that space unless you force it to do so.
- *fixed* elements have their position /fixed/ to a spot on the screen (which is called "the viewport" in CSS talk).  This is great when you want a fixed header or footer.
- *absolutely*-positioned elements are like fixed elements, only they're positioned relative to the /closest positioned ancestor/, usually an element with a position property value of "relative".

Understanding this well involves fiddling a lot with code; rather than make a bunch of fiddly exercies myself, I'll direct you [[http://www.codecademy.com/courses/web-beginner-en-6merh/3/1?curriculum_id=50579fb998b470000202dc8b][the codeacademy positioning exercies]], which have a great help system that makes things a little easier.

** COMMENT Positioning 2: Float
:PROPERTIES:
:CUSTOM_ID: positioning-2:-float-2153
:END:
So, that's one way to position elements.  Another is to use the *float* property, which imagines the page flowing like water.  The element will "float" left or right, and everything else will /flow around it/.  To stop the flowing -- that is, to require the next element to appear *below* a floated element -- that next element will need to apply the *clear* property, which stops the float.

Let's play around with this briefly [[http://jsbin.com/dakedo/1/edit?html,css,output][in JSBin]].  

** COMMENT Changes Comin' Round Real Soon
:PROPERTIES:
:CUSTOM_ID: changes-comin'-round-real-soon-bbf2
:END:
All of what you just learned is in the process of changing dramatically.  A new CSS module, *[[https://css-tricks.com/snippets/css/a-guide-to-flexbox/][flexbox]]*, makes a lot of this stuff much easier, but takes some practice to understand.

[[http://jsbin.com/yukiwe/3/edit?html,css][Here]] is a very quick introduction to flexbox.  You may want to look at [[https://css-tricks.com/snippets/css/a-guide-to-flexbox/][this cheatsheet]], this [[https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties][slightly more verbose one]], or [[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes][this very detailed specification]]. Meanwhile, there are lots of other new CSS features coming along, which will be supported by more and more browsers as we move forwards. They are pretty fun; if you want, you can check out [[http://jsbin.com/bawoqo/3/edit?html,css,output][transitions]] and [[https://css-tricks.com/almanac/properties/a/animation/][learn]] a little bit about [[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations][animations]].

** COMMENT Exercise
:PROPERTIES:
:CUSTOM_ID: exercise-ea33
:END:
Let's do a Habermas exercise
- [[https://github.com/titaniumbones/HabermasCode/][Here's the repo, for working in Atom]]
- [[http://jsbin.com/yawujap/6/edit?html,css,js][...and her it is on JSBin]]
** COMMENT Notes
:PROPERTIES:
:CUSTOM_ID: comment-notes-6401
:END:
Rosenzweig, abundance
#+BEGIN_QUOTE
Ignacio's sudden deletion of Bert should capture our interest as historians since it dramatically illustrates the fragility of evidence in the digital era. If Ignacio had published his satire in a book or magazine, it would sit on thousands of library shelves rather than having a more fugitive existence as magnetic impulses on a web server. Although some historians might object that the Bert Is Evil web site is of little historical significance, even traditional historians should worry about what the digital era might mean for the historical record. U.S. government records, for example, are being lost on a daily basis. Although most government agencies started using e-mail and word processing in the mid-1980s, the National Archives still does not require that digital records be retained in that form, and governmental employees profess confusion over whether they should be preserving electronic files.3 Future historians may be unable to ascertain not only whether Bert is evil, but also which undersecretaries of defense were evil, or at least favored the concepts of the "evil empire" or the "axis of evil." Not only are ephemera like "Bert" and government records made vulnerable by digitization, but so are traditional works–books, journals, and film–that are increasingly being born digitally. As yet, no one has figured out how to ensure that the digital present will be available to the future's historians.

But, as we shall see, tentative efforts are afoot to preserve our digital cultural heritage. If they succeed, historians will face a second, profound challenge–what would it be like to write history when faced by an essentially complete historical record? In fact, the Bert Is Evil story could be used to tell a very different tale about the promiscuity and even persistence of digital materials. After all, despite Ignacio's pleas and Children's Television Workshop's threats, a number of Bert "mirror" sites persist. Even more remarkably, the Internet Archive–a private organization that began archiving the web in 1996–has copies of Bert Is Evil going back to March 30, 1997.

The struggle to incorporate the possibilities of new technology into the ancient practice of history has led, most importantly, to questioning the basic goals and methods of our craft. For example, the Internet has dramatically expanded and, hence, blurred our audiences. A scholarly journal like this one is suddenly much more accessible to high school students and history enthusiasts. And the work of history buffs is similarly more visible and accessible to scholars. We are forced, as a result, to rethink who our audiences really are. Similarly, the capaciousness of digital media means that the page limits of journals like this one are no longer fixed by paper and ink costs. As a result, we are led to question the nature and purpose of the scholarly journals–why do they publish articles with particular lengths and structures? Why do they publish particular types of articles? The simultaneous fragility and promiscuity of digital data requires yet more rethinking–about whether we should be trying to save everything, who is "responsible" for preserving the past, and how we find and define historical evidence.

But much–really, most–of the record of previous historical eras has disappeared. "The members of prehistoric societies did not think they lived in prehistoric times," Washington Post writer Joel Achenbach observes. "They merely lacked a good preservation medium." And non-digital records that have survived into this century–from Greek and Chinese antiquities to New Guinean folk traditions to Hollywood films–are also seriously threatened.9

Print books and records decline slowly and unevenly–faded ink or a broken-off corner of a page. But digital records fail completely–a single damaged bit can render an entire document unreadable. Here is the key difference from the paper era: we need to take action now because digital items very quickly become unreadable, or recoverable only at great expense.

But the medium is far from the weakest link in the digital preservation chain. Well before most digital media degrade, they are likely to become unreadable because of changes in hardware (the disk or tape drives become obsolete) or software (the data are organized in a format destined for an application program that no longer works). The life expectancy of digital media may be as little as ten years, but very few hardware platforms or software programs last that long.

The problem is still worse because of the ability of digital media to create and represent complex, dynamic, and interactive objects–another of their great virtues. Even relatively simple documents that appear to have direct print analogs turn out to be more complex. Printing out e-mail messages makes rapid searches of them impossible and often jettisons crucial links to related messages and attachments.

. But digital information–because it is so easily altered and copied, lacks physical marks of its origins, and, indeed, even the clear notion of an "original"–cannot be authenticated as physical documents and objects can. We have, for example, no way of knowing that forwarded e-mail messages we receive daily have not been altered. In fact, the public archive of Usenet discussion groups contains hundreds of deliberately and falsely attributed messages. "Fakery," write David Bearman and Jennifer Trant, "has not been a major issue for most researchers in the past, both because of the technical barriers to making plausible forgeries, and because of the difficulty with which such fakes entered an authoritative information stream."14 Digital media, tools, and networks have altered the balance.

But this "system" will not work in the digital era because preservation cannot begin twenty-five years after the fact. What might happen, for example, to the records of a writer active in the 1980s who dies in 2003 after a long illness? Her heirs will find a pile of unreadable 5 1/4" floppy disks with copies of letters and poems written in WordStar for the CP/M operating system or one of the more than fifty now-forgotten word-processing programs used in the late 1980s.23

Thus the Internet Archive is very far from the complete solution to the problem of digital preservation. It does not deal with the digital records that vex the National Archives and other repositories because they lack the public accessibility and minimal standardization in HTML of web pages. Nor does it include much formally published literature–e-books and journals–which is sold and hence gated from view. And even for what it has gathered, it has not yet hatched a long-term preservation plan, which would have to incorporate a strategy for continuing access to digital data that are in particular (and time-bound) formats. 

If historians are to set themselves "against forgetting" (in Milan Kundera's resonant phrase), then they may need to figure out new ways to sort their way through the potentially overwhelming digital record of the past. Contemporary historians are already groaning under the weight of their sources. Robert Caro has spent twenty-six years working his way through just the documents on Lyndon B. Johnson's pre-vice-presidential years–including 2,082 boxes of Senate papers. Surely, the injunction of traditional historians to look at "everything" cannot survive in a digital era in which "everything" has survived.55

f historians are going to join in preservation discussions, they will have to make themselves better informed about the simultaneous abundance of historical sources and scarcity of financial resources that lead archivists and librarians to respond with exasperation to scholars' blithe insistence that everything must be saved.

 When Shirley Baker, president of the Association of Research Libraries, challenged historian Robert Darnton's favorable review of Baker's book and noted "choices have always had to be made" in the absence of "greater public commitment to the preservation of the historical record," Darnton responded by urging the establishment of "a new kind of national library dedicated to the preservation of cultural artifacts" (including disappearing digital records) and funded by income generated by the sale or rental of bandwidth.65 


#+END_QUOTE

Turkel, Going Digital
#+BEGIN_QUOTE
 Electronic digital information can be duplicated at near-zero cost, transmitted at the speed of light, stored in infinitesimally small volumes, and created, processed and consumed by machines.  This means that ideas that were more-or-less serviceable in the world before networked computers–ideas about value, property rights, communication, creativity, intelligence, governance and many other aspects of society and culture–are now up for debate.  The emergence of new rights regimes (such as open access, open content and open source) and the explosion of new information are manifestations of these changing costs.

You won't be able to read everything.  Estimates of the amount of new information that is now created annually are staggering (2003, 2009).  As you become more skilled at finding online sources, you will discover that new material on your topic appears online much faster than you can read it.  The longer you work on something, the more behind you will get.  This is OK, because everyone faces this issue whether they realize it or not.  In traditional scholarship, scarcity was the problem: travel to archives was expensive, access to elite libraries was gated, resources were difficult to find, and so on.  In digital scholarship, abundance is the problem.  What is worth your attention or your trust?

Assume that what you want is out there, and that you simply need to locate it.
#+END_QUOTE
#+begin_src sh :results output
${HOME}/src/extract_pdf_annotations_to_orgmode/vkextract_annotations_to_orgmode_snippet.sh DH/Readings/Many-More-Than-a-Million
#+end_src

#+RESULTS:
#+begin_example
---- HIGHLIGHTS: ---

But when the dirty OCR was paired with the page images, the value of the technique became greatly enhanced because the text was considered good enough for searching, and potentially ambiguous results could be compared with the page image, which was considered authoritative. This strategy of linking page images with OCR enables us to make effective use of large corpora of relatively cheaply scanned books and was, in large measure, effective because it points backwards to the limitations of print: search gets human readers to the page and leaves them to parse out its meaning.

In short, digitization does provide scale \(or quantity\) but does so at the price of rich, largely manual encoding. Visualization, customization, personalization, and similar analytical services increasingly familiar to us depend upon born-digital objects in which a great deal of structural and semantic knowledge has been encoded. The information captured on page images is, by contrast, implicit and often not directly accessible to the machines that will be always their first, often their only, and arguably their most important readers. So given the trade-off between scale and encoding in converted text corpora, what are our options, and where are the opportunities?

Very large collections based on image books differ from first-generation
digital collections by one or more orders of magnitude. Of course, they
are much larger: one internal estimate of Google's collection in spring
2007 suggested that their searches were scanning at least 2 million
books already. At the same time, these collections are much more
heterogeneous, with books from any library shelf likely to find their way
into the scanning workflow. The range of subjects is thus far broader than
in the curated collections to which we are accustomed. The range of
subjects means that error rates will be much more variable, with OCR of
many texts in non-standard scripts (e.g., Arabic, Classical Greek)
producing little or no searchable text.

Linguistics. Automatically track patterns in morphology, syntax, and semantics across large stretches of time, space, and culture. These studies might be synchronic

Intellectual history. Dan Cohen, assistant professor in the Department of History and Art History at George Mason University, pointed out that the secularization thesis, for example, states that the role of religion declined in general discourse during the 19th century, but most studies of this topic have been anecdotal. If we could track references to the Bible or to other religious terminology across thousands of texts, we could begin to put this thesis on more solid footing.


Social and economic history. Will Thomas, professor of history at the University of Nebraska-Lincoln, pointed out the implications of very large collections for the study of broad socioeconomic topics such as the influence of railroads in U.S. history. Researchers can mine very large collections for references to, and propositional statements about, railroads to trace their development during the 19th century.

This faculty member faces two fundamental challenges: understanding and then communicating with intellectual communities that have different assumed background knowledge, different ideas of what questions are and are not important, different conventions of argumentation, and so on.


. We need to provide not only accurate keystrokes but also semantic markup.




Raw OCR output from page images with human-curated book-level metadata is the starting point for all work. Automatically generated metadata, capturing structural elements \(e.g., tables of contents, chapters/sections, footnotes, marginalia, indices\) will be sufficient for many purposes.

Curated structural metadata. If we have carefully marked the headwords of a reference work such as the Encyclopedia Britannica 13th edition, we can then use the OCR-generated text for each article to train classifiers to distinguish references to various Springfields or Washingtons in unstructured text.


So, this workshop posed one big question: How does scale in content, made possible by mass digitization, change humanities research? As a result of the discussion, we can now pose five questions that parse this broad question into more manageable topics for research:

\) How do traditional archival values migrate into the computationally intensive environment made possible by copious digital data and digital tools?

2\) When only the computer actually "reads" the object or the text, a new and not fully understood relationship is created among author, tools,

objects, and readers \(or users\)


Recognition of the value of the digital research and its expression in digital form, even if that expression is subject to ongoing change by subsequent generations of scholar

Recognition of digital scholarship that focuses on infrastructure. Classicists spent centuries creating the critical editions, lexica, grammars, encyclopedias, commentaries, and technical studies on which twentieth-century scholarship largely depended. We now need machine-actionable knowledge bases that can serve advanced systems and human researchers alike. These knowledge bases have print antecedents but the need to represent them in machine- actionable form and to support complex services may ultimately render them qualitatively different from their print predecessors. We need in the humanities as in the sciences to attract and support some of our most promising scholars to bridge the gap between the needs, present and potential, of the humanities and the possibilities enabled by scholarship.


Finding ways to provide analytical access the Open Content book data now available should be a priority. Scholars should be able to pose questions that analyze very large collections: e.g., what passages from Shakespeare or the Bible appear in different genres over time?

should apply exemplary questions to open collections such as the OCA, access functions that Google, Microsoft, and others provide to end-user services and APIs.

e need to clarify the costs and benefits of book scanning vs. the intensive transcription and markup of complex knowledge sources. We cannot afford to apply human labor and expertise directly to more than a tiny percentage of the published record of humanity. Are there printed materials that would, if carefully converted into machine actionable form, uniquely enhance our ability to analyze relatively unbounded bodies of

We need to understand more clearly how to relate high- value, domain-specific services and data structures to services and data structures that are common to all collections. Every discipline needs text searches, but some communities need different kinds of search.


#+end_example


Annotations:
#+begin_example
--- Annotations: ---
#+end_example

** COMMENT Some thoughts about [[http://offshore-interactive.com/#lowerplatform][Offshore-Interactive]]
:PROPERTIES:
:CUSTOM_ID: some-thoughts-about-[[http://offshore-interactive.com/#lowerplatform][offshore-interactive]]-0f41
:END:
- video-game interface
- narrative tension
- "oral history" emphasis
- Is this how we have to write? 
** COMMENT Website Evaluation
:PROPERTIES:
:CUSTOM_ID: website-evaluation-e904
:END:
Check out the Github Repo:
https://github.com/titaniumbones/website-review

With a (new!) partner, follow the directions!

** COMMENT Template
:PROPERTIES:
:CUSTOM_ID: template-35a0
:END:
#+BEGIN_SRC markdown
  # Review of [Website Name](URL)
  ## by Your First Names


  ## What does the URL tell you?
  Is this a personal site, a university-sponsored site, a corporate enterprise? 

  ## What's the Subject Matter?
  - In broad outlines, describe the scope of the website

  ## Is it trustworthy?
  - Are Sources Documented?
  - If links are provided, links to where?
  - Any evidence of plagiarism?

  ## Does Web Publication _enhance_ the storytelling?
  - What does the website do that would be _difficult_ to achieve in a linear narrative?
  - Is anything _lost_ by non-linear organization?
  - How might you suggest _improving_ the site?

  ## Overall, would you recommend this site to someone interested in the subject matter? To a researcher? 
#+END_SRC
** COMMENT List of Sites
:PROPERTIES:
:CUSTOM_ID: list-of-sites-8732
:END:
- [[http://lostmuseum.cuny.edu/index.php][The Lost Museum]]
- [[http://web.stanford.edu/group/spatialhistory/cgi-bin/site/project.php?id=997][Shaping the West]]
- [[http://www.historylearningsite.co.uk/][History Learning Site]]
- [[http://web.stanford.edu/group/spatialhistory/cgi-bin/site/project.php?id=1005][Between the Tides]]
- [[http://www.twoplantations.com/][Two Plantations]]
- [[http://revolt.axismaps.com/acknowledgments.html][Slave Revolt in Jamaica, 1760-61]]
- [[http://braceroarchive.org/][Bracero History Archive]]
- [[http://www.texasslaveryproject.org/][Texas Slavery Project]]
- [[http://www.british-history.ac.uk/][British History Online]]
* COMMENT Javascript
:PROPERTIES:
:CUSTOM_ID: javascript-252a
:END:
** Variables
:PROPERTIES:
:CUSTOM_ID: variables-7835
:END:
#+BEGIN_SRC js :results output code  replace :exports both
var myString = "Hello, everyone";
console.log(myString);
#+END_SRC
#+BEGIN_NOTES 
- strings
- numbers
- boolean
- array
- objects
#+END_NOTES
** Functions
:PROPERTIES:
:CUSTOM_ID: functions-3acc
:END:
#+BEGIN_SRC js :results output code  replace :exports both
function square(number) {
  return number * number;
}

 var cube = function(number) { 
      return number * number * number;
  };

console.log(square(2));
console.log(cube(3));
#+END_SRC
** Arrays and Loops
:PROPERTIES:
:CUSTOM_ID: loops-86b8
:END:
#+BEGIN_SRC js :results output code  replace :exports both
 // here is a very basic "for loop":
  for (i=0; i<10; i++ ) {
    console.log("this is number: " + (i+1));
  }

  // a simple array -- essentially a list
  var veggies = ["carrot", "potato", "pea"];

  // a "for-of loop" -- iterates over array items
  for (i of veggies) {
    console.log(i)
  };

  // a for-in loop -- iterates over array length (0,1,2,3, etc)
  for (i in veggies) {
       console.log(veggies[i])
       };


#+END_SRC
#+BEGIN_NOTES 
- differences between the loop types
#+END_NOTES
** Objects
:PROPERTIES:
:CUSTOM_ID: objects-1a99
:END:
#+BEGIN_SRC js :results output code  replace :exports both
  var wl = {
      "PM": "Wilfred Laurier",
      "Party": "Liberal",
      "From": "1896",
      "To": "1911"
  };
  for (i in wl) {
      console.log("wl." + i + " is: " + wl[i]);
  }
#+END_SRC

** DOM Manipulation
:PROPERTIES:
:CUSTOM_ID: dom-manipulation-6404
:END:
#+BEGIN_SRC js :exports code
var newNode = document.createElement("h1");                 // Create a <h1> node
var textnode = document.createTextNode("brand new header");         // Create a text node
newNode.appendChild(textnode);                              // insert the text into the <h1>
document.body.appendChild(newNode);

var headings = document.getElementsByTagName("h1");
console.log(headings);
for (var i=0; i<headings.length; i++) {
    console.log(headings[i].innerHTML);
};

for (var i=0; i<headings.length; i++) {
    headings[i].textContent += " Found me!!!";
    headings[i].style.color = "red";
};

#+END_SRC

#+BEGIN_NOTES 
for (var i=0; i<headings.length; i++) {
    headings[i].textContent += " Found me!!!";
    headings[i].style.color = "red";
};
#+END_NOTES
* 05-01 and 06-01: Getting Started With Javascript
:PROPERTIES:
:EXPORT_FILE_NAME: 05-01-js
:CUSTOM_ID: getting-started-with-javascript-71f3   
:header-args: :tangle Exercises/js-lecture-code-snippets/lec-05-01-js-intro.js :noweb yes
:ORG_LMS_ANNOUNCEMENT_ID: 406091
:ORG_LMS_ANNOUNCEMENT_URL: https://q.utoronto.ca/courses/123949/discussion_topics/406091
:ORG_LMS_POSTED_AT: 2019-10-08T17:47:11Z
:END:

** JavaScript
:PROPERTIES:
:CUSTOM_ID: javascript-cc80
:END:
- a real language!
- dynamic transformation
- baby steps!!
** Some Big Ideas
:PROPERTIES:
:CUSTOM_ID: some-big-ideas-1d46
:END:
- Abstraction
- Formalization
- Repetition
- Laziness!
** Assignment 1 will require 
:PROPERTIES:
:CUSTOM_ID: assignment-1-will-require-ab9b
:END:
- Basic Syntax
- Variable Types
- Function Definitions
- Loops and Branches
- Basic "Objects"
** Running Javascript
:PROPERTIES:
:CUSTOM_ID: running-javascript-10e9
:END:
- in Browser Console
- in terminal (with the command ~node~)
- in VSCode files, with Quokka attached
** What is a Variable?
:PROPERTIES:
:CUSTOM_ID: what-is-a-variable?-d2ea
:END:
- *name* for *memory location* to be used later, usually *in specific ways* that *depend on type*
- or, *box* into which you can put *information* that you will want to get later.
https://mdn.mozillademos.org/files/13506/boxes.png

*** Declaring Variables
:PROPERTIES:
:CUSTOM_ID: declaring-variables-266e
:END:
#+begin_src js
const neverChange = "Project Key"; // comment
let oftenChanges = 0; // maybe we will change this value later
var oldDeclaration = 0; // we try to avoid using var now; use let instead
#+end_src

*** Text is Data
:PROPERTIES:
:CUSTOM_ID: text-is-data-75a7
:END:
#+BEGIN_SRC js
let first="Matt";
let last="Price"
console.log(first + last);
#+END_SRC
#+ATTR_REVEAL: :frag (appear)
Do it w/ your name!
#+BEGIN_NOTES
- console; syntax; spaces; exercise: 
#+END_NOTES

*** "Dynamic" (or "Weak") Typing 
:PROPERTIES:
:CUSTOM_ID: dynamic-(or-weak)-typing-c178
:END:
- *numbers* and *strings* are different
- but we can convert *number \rarr string*
#+begin_src js
let n = 1,
    m=2,
    s="Hello, there! ";
 
console.log(m+n);
console.log(s+n);

#+end_src
#+begin_notes
- commas, semi-colons; "overloading" &dynamic typing
- this can be confusing!!!
#+end_notes

*** Some Variable Types
:PROPERTIES:
:CUSTOM_ID: some-variable-types-c445
:END:
- numbers
- strings
- boolean (true/false)
- arrays
- objects


*** Making Lists (Arrays)
:PROPERTIES:
:CUSTOM_ID: making-lists-(arrays)-5385
:END:
#+NAME: js-array-historians
#+BEGIN_SRC js
let historians= ["Edward Gibbon", "Leopold von Ranke", "Edward Said", "Joan Scott"];

#+END_SRC

#+RESULTS:
: undefined

#+BEGIN_NOTES
brackets!
#+END_NOTES

*** Working With Arrays
:PROPERTIES:
:CUSTOM_ID: working-with-arrays-c020
:END:

#+begin_src js
a = [];
a.push("Edward Gibbon");
a.push("Edward Said");
a.push("Joan Scott");

console.log(a[1]);

a.pop();
// a
#+end_src

#+begin_notes
- push, pop, INDEX
#+end_notes
*** Working with Numbers
:PROPERTIES:
:CUSTOM_ID: working-with-numbers-9fb5
:END:
#+BEGIN_SRC js
wardates=[1776, 1792, 1812, 1861, 1870, 1914, 1939, 1994]
console.log("The time between The First and \
Second World Wars was " + (wardates[6] - wardates[5]) + " years");
#+END_SRC
** Repetition: While Loops 
:PROPERTIES:
:CUSTOM_ID: repetition:-while-loops-c251
:END:
#+NAME: js-while-hist
#+begin_src js
<<js-array-historians>>
let i = 0;

while (i < historians.length) {
    console.log(historians[i] + " was a historian.");
    i+=1;
  }

#+end_src
repeat inside the ~{ ... }~ as long as test is true:
- *initial value:* ~i = 0~
- *test (halt condition):* ~i < historians.length~
- *change in condition:* ~i += 1~ 
** Repetition: For Loops
:PROPERTIES:
:CUSTOM_ID: repetition:-for-loops-c510
:END:

#+BEGIN_SRC js 
<<js-array-historians>>
for (let i=0; i < historians.length ; i++){
  console.log(historians[i] + " was a historian.");
  i // this is not required, just here to show you a slight difference
}

#+END_SRC
- *initial value:* ~i = 0~
- *test (halt condition):* ~i < historians.length~
- *change in condition:* ~i++~ (idiomatic)
** Repetition: other for loops
*** 
:PROPERTIES:
:CUSTOM_ID: repetition:-other-for-loops-3d1d
:END:
#+BEGIN_SRC js :noweb yes
<<js-array-historians>>

for (i in historians) {
  console.log(historians[i] + " was a historian.");
}

for (let h of historians) {
  console.log(h + " was a historian.");
}
#+END_SRC

#+RESULTS:

- these also "loop"
- but the *initial value*, *test*, and *increment* are *implicit*
- defined by ~historians~, but in slightly different ways.
- they are very convenient! read about them.

** Conditionals: If
:PROPERTIES:
:CUSTOM_ID: conditionals:-if-a6b8
:END:
#+BEGIN_SRC js
<<js-array-historians>>
let i = 0;

while (i < historians.length) {
  if (historians[i] === "Joan Scott") {
    console.log(historians[i] + " is my favourite.");
  }
  i +=1;
};
#+END_SRC
- execute the ~{ ... }~ only if the *test* is true
- here the test is ~historians[i] === "Joan Scott"~
- note the many ~===~ -- different from just one ~=~

*** Branching
:PROPERTIES:
:CUSTOM_ID: branching-2c02
:END:
#+BEGIN_SRC js
<<js-array-historians>>
let i = 0;

while (i < historians.length) {
  if (historians[i] ==="Joan Scott") {
    console.log(historians[i] + " is my favourite.");
  } else {
    console.log(historians[i] + ", meh.");
}
  i +=1;
};
#+END_SRC



** Doing Stuff: functions
:PROPERTIES:
:CUSTOM_ID: functions-d6a3
:END:

*** A Function *is* a variable(!)
:PROPERTIES:
:CUSTOM_ID: -7b52
:END:
- functions are also a box into which you put stuff
- but when you look into the box, the "stuff" has changed
- we use them to *change the state*: to *do things* 
- use *whenever you're repeating an action or process*

- compare: 
#+ATTR_REVEAL: frag
  - ~let fruit="orange";~
  - ~eat("orange")~
  - ~let e = eat(f)~
*** Defining a function
:PROPERTIES:
:CUSTOM_ID: defining-a-function-bb11
:END:
#+BEGIN_SRC js 
function square(number) {
  return number * number;
}

let cube = function(number) { 
      return number * number * number;
  };

console.log(square(2));
console.log(cube(3));
#+END_SRC
- we'll use the first method:
  - keyword ~function~ followed by ~name~ then ~(parameters, if, you, need, them)~, then ~{~ ,  then ~statements~, then ~}~

#+begin_notes
- name
- parameters
- definition
- return value
#+end_notes
*** Remember this
:PROPERTIES:
:CUSTOM_ID: remember-this-0f7d
:END:
#+begin_src js
let historians= ["Edward Gibbon", "Leopold von Ranke", "Edward Said", "Joan Scott"];
let i = 0;

while (i < historians.length) {
    console.log(historians[i] + " was a historian.");
    i+=1;
  }

#+end_src
*** As a function
:PROPERTIES:
:CUSTOM_ID: as-a-function-ed13
:END:

#+begin_src js
function makeSentences(historians) {
  let i = 0,
      output = "";

  while (i < historians.length) {
    output += historians[i] + " was a historian.\n";
    i+=1;
  }
  return output;
}

let h1 = ["Edward Gibbon", "Leopold von Ranke", "Edward Said", "Joan Scott"],
    h2 = ["Orlando Patterson", "Michel Foucault", "Natalie Zeemon Davis", "Howard Zinn"];

makeSentences(h1);
//makeSentences(h2);

#+end_src
*** Finally we can  talk about scope!
:PROPERTIES:
:CUSTOM_ID: finally-we-can--talk-about-scope-7723
:END:
#+begin_src js
let a = 'just some string',
    b = 'some other string';

function scopeExample (anyString) {
  let a = 'I set this value inside the function';

  return ('inside the function, a="' + a + '", not ' + anyString);
}

// a
// scopeExample(a);
//anyString
#+end_src
- outside the function, ~a~ = "just some string"
- inside, we *redeclare it for the function scope* and now ~a~ has new value
- ~anyString~ is *only* declared inside the function scope

*** Advanced scope
:PROPERTIES:
:CUSTOM_ID: advanced-scope-fa36
:END:
#+begin_src js
let a = "global scope a";

console.log(a);

for (i=0; i<6; i++) {
  let a = "local scope a on iteration: " + (i + 1) ;
  console.log(a)
}

console.log(a);
#+end_src
- we can also *redeclare* ~let~ variables in an if/for/while "block"
- scope scales:  *global \rarr function \rarr block \rarr nested block \rarr etc etc*
- any time you see ~{ .. }~ you're in a new scope context!
 
*** Function Hints for Assignments
:PROPERTIES:
:CUSTOM_ID: function-hints-for-assignments-1cb2
:END:
- *remember the return values!*
- debug by setting a variable to the function output, and using quokka to look at the value:
  #+begin_src js
    function returnArray (first, second, third) {
    // you can define the array using "new Array ()" or just "[ , , ]"
    // don't forget to return it
    // return ; // add the value here!
  }
  
  let a = returnArray (1, 3,5);
  a  // quokka will display the value
  #+end_src

*** Function note 1: Name vs. Return Value
:PROPERTIES:
:EXPORT_FILE_NAME: function-1-name-output
:CUSTOM_ID: functions-1:-name-vs.-return-value-d9ac
:END:

**** A Function is a +variable+ Robot
:PROPERTIES:
:CUSTOM_ID: a-function-is-a-+variable+-robot-29e2
:END:
#+begin_src js
function robotCleaner () {
  let output =  "I cleaned your room";
  return output;
}

let r = robotCleaner();
a
#+end_src

#+RESULTS:

- build a function to do something
- *name it* whatever you want
- the *return* value is what the function "give you back*
- call it whenever you need it done 
  
**** Name and Return Value are independent
:PROPERTIES:
:CUSTOM_ID: name-and-return-value-are-independent-e35d
:END:
#+begin_src js
function robotCleaner () {
  let output =  `Ha, ha! I have replaced your robot cleaner! 
Now your room is even messier! Bwa ha ha ha ha!`
  return output;
}

let a = robotCleaner();
a
#+end_src

- To pass the assignment, *always modify the function*
- don't get confused and try to somehow modify the function call
- no intrinsic relationship between name and return value

*** Functions note 2: Parameter and Output  
:PROPERTIES:
:CUSTOM_ID: functions-note-2:-parameter-and-output-4bfc
:END:
**** Your Return Value should Make use of the Parameter
:PROPERTIES:
:CUSTOM_ID: your-return-value-should-make-use-of-the-parameter-d994
:END:
#+begin_src js
function greatWriter (name) {
let output = "Margaret Atwood was a great writer."
return output
}

console.log(greatWriter("Margaret Atwood"))
// console.log(greatWriter("Toni Morrison"))
#+end_src
**** Solution: don't use a STATICALLY DEFINED STRING as your output
:PROPERTIES:
:CUSTOM_ID: solution:-don't-use-a-statically-defined-string-as-your-output-395c
:END:
#+begin_src js
function evenGreaterWriter (name) {
let output = name + " was a great writer."
return output
}

console.log(evenGreaterWriter("Margaret Atwood"))
// console.log(evenGreaterWriter("Toni Morrison"))
#+end_src

** Parts of things: elements, methods, properties
:PROPERTIES:
:CUSTOM_ID: parts-of-things:-elements,-methods,-properties-be27
:END:
#+begin_src js
let a=["name", 0, "otherinfo"];
console.log(a[2]);
console.log(a.length);
console.log(a[length]);
a.pop;
#+end_src
- note strange syntax:
  - ~a[1]~: second element of array
  - ~a.length~: a special way of finding the length of any array.  Length is a *property* of a.
- ~console.log(a))~: *log* is a part of *console*.  it takes a *parameter* , in this case ~a~
- not that ~a.pop~ is not the same as ~a.pop()~

** Objects and Properties
:PROPERTIES:
:CUSTOM_ID: objects-and-properties-e146
:END:

*** Objects are *variables* with *named parts*
:PROPERTIES:
:CUSTOM_ID: objects-are-variables-with-named-parts-c234
:END:
- parts are called *properties*, but
- if a part is a *function*, we call that part a *method*

*** let's eat
:PROPERTIES:
:CUSTOM_ID: let's-eat-f11e
:END:
#+begin_src js
let myFruit="orange",
    mySandwich = "just some bread!",
    myBar="weird vegan bar",
    myCookie="ginger",
    myCandy="pulparindo",
    mySnacks=["cliff bar", "cliff bar", "kind bar"];

function eat (food) {
  console.log("Umm, that was a delicious " + food + ".");
}

eat (myFruit);
//eat (myBar);
//eat (myCookie);
//eat (myCandy);
#+end_src
- we can eat any of the foods
- *they're not related to each other*, just floating around

*** Now let's make lunch
:PROPERTIES:
:CUSTOM_ID: now-let's-make-lunch-6196
:END:
#+begin_src js
let myFruit="orange",
    mySandwich = "just some bread!",
    myBar="weird vegan bar",
    myCookie="ginger",
    myCandy="pulparindo",
    mySnacks=["cliff bar", "cliff bar", "kind bar"];

let myLunch = {};
#+end_src

- myLunch is *an empty object* -- it has no parts yet

*** Add some parts
:PROPERTIES:
:CUSTOM_ID: add-some-parts-18dc
:END:
#+begin_src js
let myFruit="orange",
    mySandwich = "just some bread!",
    myBar="weird vegan bar",
    myCookie="ginger",
    myCandy="pulparindo",
    mySnacks=["cliff bar", "cliff bar", "kind bar"];

let myLunch = {
  fruit: "orange",
  sandwich: mySandwich
};

myLunch["snacks"]=mySnacks;
myLunch;

#+end_src
- added parts in 3 ways: set *directly* in definition; set *by reference* in definition; *added by reference after definition* 

*** Eat the Lunch
:PROPERTIES:
:CUSTOM_ID: eat-the-lunch-b7bb
:END:
#+begin_src js
let myFruit="orange",
    mySandwich = "just some bread!",
    myBar="weird vegan bar",
    myCookie="ginger",
    myCandy="pulparindo",
    mySnacks=["cliff bar", "cliff bar", "kind bar"];

let myLunch = {
  fruit: "orange",
  sandwich: mySandwich
};

myLunch["snacks"]=mySnacks;

function eatLunch (someLunch) {
  let output = "";
  output += "I'll start with my " + someLunch["fruit"] + "\n";
  output += "Next I want to eat " + someLunch.sandwich + "\n";
  for (snack of someLunch.snacks) {
    output += "   I love my " + snack + "\n";
  }
  return output;
}

eatLunch(myLunch);
#+end_src
- rewrote *eat* to take advantage of the *structure* of lunch
*** Add Dessert
:PROPERTIES:
:CUSTOM_ID: add-dessert-c5dd
:END:
#+begin_src js
let myLunch = {
  fruit: "orange",
  sandwich: "just some bred!",
  bar: "weird vegan bar",
  snacks: ["cliff bar", "cliff bar", "kind bar"],
  dessert: {cookie: "ginger", candy: "pulparindo"}
};

console.log("I'm finally ready for my " + myLunch.dessert.cookie);

#+end_src
- objects can be *arbitrarily complex* and *contain other objects*

*** Eat The Lunch as a Method
:PROPERTIES:
:CUSTOM_ID: eat-the-lunch-as-a-method-971e
:END:

**** Reminder
:PROPERTIES:
:CUSTOM_ID: reminder-4550
:END:
#+begin_src js
function eatLunch (someLunch) {
  let output = "";
  output += "I'll start with my " + someLunch["fruit"] + "\n";
  output += "Next I want to eat " + someLunch.sandwich + "\n";
  for (snack of someLunch.snacks) {
    output += "   I love my " + snack + "\n";
  }
  return output;
}

#+end_src

**** Writing the Method
:PROPERTIES:
:CUSTOM_ID: writing-the-method-4cae
:END:
#+begin_src js
let myLunch = {
  fruit: "orange",
  sandwich: "just some bred!",
  bar: "weird vegan bar",
  snacks: ["cliff bar", "cliff bar", "kind bar"],
  dessert: {cookie: "ginger", candy: "pulparindo"},
  eatMe: function() {
    let output = "";
    output += "I'll start with my " + this["fruit"] + "\n";
    output += "Next I want to eat " + this.sandwich + "\n";
    for (snack of this.snacks) {
      output += "   I love my " + snack + "\n";
    }
    return output;
  }
};

myLunch.eatMe;

myLunch.eatMe();
#+end_src
- note the differences between ~eat()~ and =myLunch.eatMe=:
  - the method doesn't *take a parameter*!
  - instead, we get to use ~this~, which refers to the *current object scope*
*** Finally some History
:PROPERTIES:
:CUSTOM_ID: finally-some-history-0c62
:END:
#+BEGIN_SRC js
  let greatWar = {
    name: "The First World War",
    start: 1914,
    end: 1918,
    badGuys: ["Germany", "Austria-Hungary", "Ottoman Empire"],
    goodGuys: ["All our Friends"],
    scale: "Catastrophe"
  }

//  console.log(greatWar["name"] + " lasted for " + (greatWar.end - greatWar.start) + " years.");
#+END_SRC
*** more objects
:PROPERTIES:
:CUSTOM_ID: more-objects-322f
:END:
#+BEGIN_SRC js
  let greatWar = {
    name: "The First World War",
    start: 1914,
    end: 1918,
    badGuys: ["Germany", "Austria-Hungary", "Ottoman Empire"],
    goodGuys: ["All our Friends"],
    scale: "Catastrophe",
    battles: [
      { name: "The Battle of Vimy Ridge",
        year: 1915,
        casualties: 34000
      }]
  }

  console.log(greatWar["name"] + " lasted for " + (greatWar.end - greatWar.start) + 
"  years.");
console.log(greatWar.battles[0].name + " was ferocious and horrific. There were " +   
  greatWar.battles[0].casualties + " casualties.");
#+END_SRC

*** Basic Logic with Objects
:PROPERTIES:
:CUSTOM_ID: using-objects-in-js-ace7
:END:
#+BEGIN_SRC js
let goodGuys = ["CA", "UK", "US"];
let badGuys=["DE", "AH"];
let people = [
  {name: "Kaiser Wilhelm",
   nat: "DE"},
  {name:"Winston Churchill",
   nat: "UK"}];
for (person of people) {
  if (badGuys.includes(person.nat)) {
    //console.log(person.name + ": BOOOOOOOOOOOO!!!");
  }
};
#+END_SRC

#+RESULTS:
: undefined
*** Branching Logic with Objects
:PROPERTIES:
:CUSTOM_ID: logic-with-objects-9863
:END:
#+BEGIN_SRC js
let goodGuys = ["CA", "UK", "US"];
let badGuys=["DE", "AH"];
let people = [
  {name: "Kaiser Wilhelm",
   nat: "DE"},
  {name:"Winston Churchill",
   nat: "UK"}];
for (person of people) {
  if (badGuys.includes(person.nat)) {
    console.log(person.name + ": BOOOOOOOOOOOO!!!");
  } else {
    console.log(person.name + ": YAAAAYYY!!!");

}
};
#+END_SRC
** In-class coding exercise!
*** 
Pull in changes to [[https://github.com/DigitalHistory/lecture-code-snippest][the code snippets repo]]

Now consider the following javascript array of objects:

#+NAME: rev-orgs
#+begin_src js 
orgs = [
  {"name": "African National Congress",
   "founded": 1912,
   "link": "https://en.wikipedia.org/wiki/African_National_Congress"
  },
  {"name": "Pan Africanist Congress",
   "founded": 1959,
   "link": "https://en.wikipedia.org/wiki/Pan_Africanist_Congress_of_Azania"
  },
  {"name": "South African Communist Party",
   "founded": 1921,
   "link": "https://en.wikipedia.org/wiki/South_African_Communist_Party"
  },
  {
    "name": "Black Sash",
    "founded": 1955,
    "link": "https://en.wikipedia.org/wiki/Black_Sash"
  },
  {
    "name": "South African Students' Organization",
    "founded": 1968,
    "link": "https://en.wikipedia.org/wiki/South_African_Students%27_Organisation"
  }
]
orgs
#+end_src

#+RESULTS: rev-orgs
: undefined

#+RESULTS:

Our objective is to read this variable and use it to build sentences about anti-apartheid organizations in South Africa.  
*** using JSON data
#+begin_src js :var orgs=rev-orgs :results value
<<rev-orgs>> 
function describeOrg (org) {
  return org.name + ' was founded in ' + org.founded + '.';
}

console.log(describeOrg(orgs[0]));
#+end_src


*** Looping through the data
#+begin_src js :var orgs=rev-orgs :results value
<<rev-orgs>> 
function describeOrg (org) {
  return org.name + ' was founded in ' + org.founded + '.';
}

for (let o of orgs) {
console.log(describeOrg(o));
}
#+end_src




* Short Note on Functions (youtube video, never lectured, now incorporated into 05-01)
:PROPERTIES:
:EXPORT_FILE_NAME: short-note-on-functions
:CUSTOM_ID: short-note-on-functions-499b
:END:
** Functions 1: Name vs. Return Value
:PROPERTIES:
:EXPORT_FILE_NAME: function-1-name-output
:CUSTOM_ID: functions-1:-name-vs.-return-value-d9ac
:END:

*** A Function is a +variable+ Robot
:PROPERTIES:
:CUSTOM_ID: a-function-is-a-+variable+-robot-29e2
:END:
#+begin_src js
function robotCleaner () {
  let output =  "I cleaned your room";
  return output;
}

let a = robotCleaner();
a
#+end_src

#+RESULTS:

- build a function to do something
- *name it* whatever you want
- the *return* value is what the function "give you back*
- call it whenever you need it done 
  
*** Name and Return Value are independent
:PROPERTIES:
:CUSTOM_ID: name-and-return-value-are-independent-e35d
:END:
#+begin_src js
function robotCleaner () {
  let output =  `Ha, ha! I have replaced your robot cleaner! 
Now your room is even messier! Bwa ha ha ha ha!`
  return output;
}

let a = robotCleaner();
a
#+end_src

- To pass the assignment, *always modify the function*
- don't get confused and try to somehow modify the function call
- no intrinsic relationship between name and return value

** Functions note 2: Parameter and Output  
:PROPERTIES:
:CUSTOM_ID: functions-note-2:-parameter-and-output-4bfc
:END:
*** Your Return Value should Make use of the Parameter
:PROPERTIES:
:CUSTOM_ID: your-return-value-should-make-use-of-the-parameter-d994
:END:
#+begin_src js
function greatWriter (name) {
let output = "Margaret Atwood was a great writer."
return output
}

console.log(greatWriter("Margaret Atwood"))
// console.log(greatWriter("Toni Morrison"))
#+end_src
*** Solution: don't use a STATICALLY DEFINED STRING as your output
:PROPERTIES:
:CUSTOM_ID: solution:-don't-use-a-statically-defined-string-as-your-output-395c
:END:
#+begin_src js
function evenGreaterWriter (name) {
let output = name + " was a great writer."
return output
}

console.log(evenGreaterWriter("Margaret Atwood"))
// console.log(evenGreaterWriter("Toni Morrison"))
#+end_src

* 05-02: Distant Reading and Age of Abundance
:PROPERTIES:
:EXPORT_FILE_NAME: 05-02-distant-reading
:EXPORT_TITLE: Distant Reading
:END:
** COMMENT Notes
:PROPERTIES:
:CUSTOM_ID: comment-27db
:END:
- Lecture: Graphs & maps (30 mins)
- discussion
- Wordles
- Have assignment ready!

- Abundance.  Have some examples, talk about *real history*
- Openness.  Github, e.g.
- Search engines. Algorithms.  curation.  
- Lab: list of websites to evaluate.  This will require *prep*
http://adamcrymble.org/intro-to-digital-history-2015/#week2 
** Recap
:PROPERTIES:
:CUSTOM_ID: recap-53d2
:END:
- "Public sphere" at a turning point
- Transformation by automated agents and encoded text

***  War is Peace. @@html:<br/>@@Freedom is Slavery. @@html:<br/>@@Ignorance is Strength.
:PROPERTIES:
:CUSTOM_ID: war-is-peace
:END:
*** Plan for the day
:PROPERTIES:
:CUSTOM_ID: plan-for-the-day-b6ce
:END:
- Problems of Abundance
- Distant Reading: a method for textual overload?
- Discussion: how do *you* respond to information abundance?
- post-class period *ONLY* for students who *failed the tests, or did not receive a mark* 
** History in the age of scarcity
:PROPERTIES:
:CUSTOM_ID: history-in-the-age-of-scarcity-3970
:END:
#+BEGIN_QUOTE
The members of prehistoric societies did not think they lived in prehistoric times. They merely lacked a good preservation medium. (Auerbach, quoted in Rosenzweig)
#+END_QUOTE

#+BEGIN_NOTES 
- lots was going on, lots of continuity, lots *we will never know* b/c oral preservation is *terrible* at outliving a cultural tradition
#+END_NOTES

*** Scarcity
:PROPERTIES:
:CUSTOM_ID: scarcity-184c
:END:
#+ATTR_REVEAL: :frag (appear appear appear)
- Historically, very little recorded
- Even less /preserved/
- historian's task was to /locate rare sources/ in faraway places

*** Implications
:PROPERTIES:
:CUSTOM_ID: implications-1db9
:END:
#+ATTR_REVEAL: :frag (appear appear appear)
- History skewed to /those whose records appeared worth saving/
- record /always/ fragmentary
  - Historian free to fill in gaps
- BUT: often possible to read /large percentage/ of relevant sources

** Age of Abundance
:PROPERTIES:
:CUSTOM_ID: age-of-abundance-7ddc
:END:
#+BEGIN_QUOTE
Tentative efforts are afoot to preserve our digital cultural heritage. If they succeed, historians will face a second, profound challenge--what would it be like to write history when faced by an essentially complete historical record? (Rosenzweig)
#+END_QUOTE

#+BEGIN_NOTES 
- completely different situation than we used to have!
#+END_NOTES
*** Abundance
:PROPERTIES:
:CUSTOM_ID: abundance-6257
:END:
#+ATTR_REVEAL: :frag (appear appear appear)
- *much* more recorded than in the past
- *vastly more* preserved, at least for now
- increasing percentage of historical works as well

*** Mechanical Speech
:PROPERTIES:
:CUSTOM_ID: mechanical-speech-c3b6
:END:
- auto-preservation
- but by and for whom?

#+BEGIN_NOTES 
Google, FB, and Twitter are preserving lots of data.  As are Tesla and Samsung. But who will get to see it? How does a historian compete?
#+END_NOTES
*** Problems of Preservation
:PROPERTIES:
:CUSTOM_ID: problems-of-preservation-29ba
:END:
- physical media
- software turnover & bitrot
- capturing dynamic/interactive media
#+BEGIN_NOTES 

#+END_NOTES
*** What big data means for old documents
:PROPERTIES:
:CUSTOM_ID: what-big-data-means-for-old-documents-608a
:END:
#+BEGIN_QUOTE
digitization does provide scale (or quantity) but does so at the price of rich, largely manual encoding. Visualization, customization, personalization, and similar analytical services increasingly familiar to us depend upon born-digital objects in which a great deal of structural and semantic knowledge has been encoded. The information captured on page images is, by contrast, implicit and often not directly accessible to the machines that will be always their first, often their only, and arguably their most important readers. (CILR)
#+END_QUOTE


*** Can we tell stories? Can we do research?
:PROPERTIES:
:CUSTOM_ID: can-we-tell-stories?-can-we-do-research?-269a
:END:
#+ATTR_REVEAL: :frag (appear)
- no longer possible to read everything!
  - who will read it for us? How will we be experts? Can we automate our reading?
- Narrative form ill-suited to massive quantities of data
  - can we develop new types of narratives?
- Big questions may be answerable!
  - What used to be pure speculation, can perhaps now be made more concrete and compelling
    - How does role of religion in public discourse change over time?
    - how do railroads impact social and economic development?
    - others?
** Abundance: Summary
:PROPERTIES:
:CUSTOM_ID: recap-77644
:END:
#+ATTR_REVEAL: :frag (appear appear)
- "Abundance" offers many challenges
  - preservation
  - interpretation
  - access
- Does /history itself/ need to be reformed?
  - What /relation to sources/?
  - What /kinds of arguments/?
  - What /narrative forms/?
** No Clothes, no body
#+begin_quote 
 It's not that the emperor has no clothes(that would be fine); it's that no one knows what the emperor looks like. (Ramsey 2010)
#+end_quote

#+BEGIN_NOTES 
"It's one thing to worry that your canon isn't sufficiently inclusive, or broad, or representative. It's another thing when your canon has no better chance of being these thngs than a random selection. When we get up into the 14-million book range, books that are known by more than 2 living people are already "popular"
#+END_NOTES
** Distant Reading: Abstract Models
:PROPERTIES:
:CUSTOM_ID: abstract-models-d7c3
:END:
#+BEGIN_QUOTE
...distance is however not an obstacle, but a /specific form of knowledge:/ fewer elements, hence a sharper sense of their overall interconnection. Shapes, relations, structures. Forms. Models. 
#+END_QUOTE
*** The opposite of close?
:PROPERTIES:
:CUSTOM_ID: the-opposite-of-close?-f387
:END:
#+BEGIN_QUOTE
 Dorothea, endowed with the extraordinary capacity for attentiveness that is "ardor," is given to the strongest denunciations of the trivial, the most overwhelming anxieties of admitting the trivial into her life of any character in the novel. She is blind to the possibility that attention has the capacity to reveal that what seems trivial is in fact significant. She fears instead that the attention is wasted by devoting itself to those common objects which really are trivial, which have no redeeming significance: 

"...I should learn everything then," she said to herself, still walking quickly along the bridle road through the wood. "It would be my duty to study that I might help him the better in his great works. There would be nothing trivial about our lives. Everyday-things with us would mean the greatest things."
#+END_QUOTE

#+BEGIN_NOTES
to notice:
- analysis of passage longer than passage itself.
#+END_NOTES
*** To the point of deconstruction
:PROPERTIES:
:CUSTOM_ID: to-the-point-of-deconstruction-7de9
:END:
#+BEGIN_QUOTE
If the pharmakon is ambivalent, it is because it constitutes the medium in which opposites are opposed, the movement and the play that links them among themselves, reverses them or makes one side cross over into the other (soul/ body, good/ evil, inside/ outside, memory/ forgetfulness, speech/ writing, etc.). The pharmakon is the movement, the locus, and the play: (the production of) difference. It is the différance of difference. It holds in reserve, in its undecided shadow and vigil, the opposites and the differends that the process of discrimination will come to carve out. Contradictions and pairs of opposites are lifted from the bottom of this diacritical, differing, deferring, reserve. Already inhabited by différance, this reserve, even though it precedes the opposition between different effects, even though it preexists differences as effects, does not have the punctual simplicity of a coincidentia oppositorum. It is from this fund that dialectics draws its reserves.
#+END_QUOTE
*** Closeness
:PROPERTIES:
:CUSTOM_ID: closeness-431d
:END:
#+ATTR_REVEAL: :frag (appear appear appear)
- Literary study long organized around "close" reading
- "Hermeneutic" model of scholarship
- defines what it has meant to /understand/ or /master/ a text
*** Questioning Close Reading
:PROPERTIES:
:CUSTOM_ID: questioning-close-reading-7c74
:END:
- But what is understanding?
- what is literature?
- what is the scholar's goal?
#+BEGIN_NOTES

#+END_NOTES
*** Some Numbers
:PROPERTIES:
:CUSTOM_ID: some-numbers-b757
:END:
- ~62,000 new Novels published in English in the US/year
- ~304,000 new and re-issued /books/ in US/year
- ~129,000,000 books collected in world's libraries
#+ATTR_REVEAL: :frag (appear)
- *not possible to read these*
  - can one still be an expert?
*** New forms of Understanding?
:PROPERTIES:
:CUSTOM_ID: new-forms-of-understanding?-c1c6
:END:
- instead of, or in parallel with, close reading?
- apprehension of /large-scale phenomena/
- studying models, rather than texts themselves
*** Questions to consider
:PROPERTIES:
:CUSTOM_ID: questions-to-consider-6df4
:END:
- Does this count as /comprehension/?
- what new skills are required?
- What are the weaknesses of this form?
** Graphs
:PROPERTIES:
:CUSTOM_ID: graphs-70bf
:END:
#+ATTR_HTML: :style float:left;
[[https://seeingcomplexity.files.wordpress.com/2011/02/william_playfair_graph.jpg]]
#+ATTR_HTML: :style float:left;
#+ATTR_REVEAL: :frag (appear appear appear appear)
- /condense/ data
- /conceptualize/ mathematically
- /convince/ readers
- a fundamentally *rhetorical* tool
*** Moretti's Graphs
:PROPERTIES:
:CUSTOM_ID: moretti's-graphs-68bd
:END:
https://newleftreview-org.myaccess.library.utoronto.ca/system/dragonfly/production/2019/05/13/3iz0atrlo0_2580502large.gif
#+BEGIN_QUOTE
Quantitative research provides a type of data which is ideally independent of interpretations. (p.9)
#+END_QUOTE
- yet, the graph is an argument:  rise, fall, rise
*** A History of Readers
:PROPERTIES:
:CUSTOM_ID: a-history-of-readers-7e72
:END:
[[http://sandbox.hackinghistory.ca/assets/images/DH/three-rises-novel-colored.gif]]
- each phase a new "kind" of reader
- intensive, extensive, generic
*** Cycles
:PROPERTIES:
:CUSTOM_ID: cycles-3686
:END:
#+BEGIN_QUOTE
Event, cycle, /longue durée/: three time frames which have fared very unevenly in literary studies.

... cycles constitute /temporary structures within the historical flow./ (p.14)
#+END_QUOTE
- *event \rarr close reading*
- *longue durée \rarr grand narrative*
- *cycle \rarr ?*
*** Cycles in Literature
:PROPERTIES:
:CUSTOM_ID: cycles-in-literature-f456
:END:
[[http://sandbox.hackinghistory.ca/assets/images/DH/genres-colored.gif]]
#+BEGIN_QUOTE
A genre exhausts its potentialities... when its inner form is no longer capable of representing the most significant aspects of contemporary reality. (p. 17, fn 7)
#+END_QUOTE
*** Genre & Generation
:PROPERTIES:
:CUSTOM_ID: genre-&-generation-5762
:END:
#+BEGIN_QUOTE
... some kind of generational mechanism seems the best way to account for the regularity of the novelistic cycle... (p. 22)
#+END_QUOTE
- "Normal literature"
- but "revolution" as "dying out"
*** From "the shift" to "a shift"
:PROPERTIES:
:CUSTOM_ID: shift-4356
:END:
http://newleftreview.org/static/assets/images/2580512large.gif
#+BEGIN_QUOTE
...the point is not who prevails in this or that skirmish, but exactly the opposite: no victory is ever definitive... the form keeps oscillating back and forth between the two groups. (p.29)
#+END_QUOTE
*** Moretti's method
:PROPERTIES:
:CUSTOM_ID: moretti's-method-dbf4
:END:
#+BEGIN_QUOTE
...the real point here... is the total /heterogeneity of problem and solution:/ to make sense of quantitative data, I had to abandon the quantitative universe, and turn to morphology: evoke form, in order to explain figures.
#+END_QUOTE
- how justified is this move?
- what do we learn from it? 
** Maps
:PROPERTIES:
:CUSTOM_ID: maps-59e4
:END:
#+BEGIN_QUOTE
There is a very simple question about literary maps: what exactly do they /do/?
#+END_QUOTE
- like graphs, maps are a /persuasive tool/
- What does it mean to "map" a novel?
*** What is a map?
:PROPERTIES:
:CUSTOM_ID: what-is-a-map?-44e9
:END:
#+ATTR_HTML: :style float:left; max-height:320px;
http://www.socialresearchmethods.net/research/epp2/15.gif
#+ATTR_HTML: :style float:left; max-height:320px;  max-width:49%
http://theexpertsagree.files.wordpress.com/2009/06/tokyorail.jpg
#+ATTR_HTML: :style float:left; max-height:320px; max-width:49%
http://www.fubiz.net/wp-content/uploads/2013/07/am1.jpg
*** What is a map?
:PROPERTIES:
:CUSTOM_ID: what-is-a-map?-6c3d
:END:
#+ATTR_REVEAL: :frag (appear appear appear appear)
- abstract
- visual
- representation
- of a physical or imagined space
*** Moretti's method
:PROPERTIES:
:CUSTOM_ID: moretti's-method-ddd7
:END:
#+ATTR_HTML: :style float:left; max-width:49%
http://www.newleftreview.org.myaccess.library.utoronto.ca/assets/images/2600502large.gif 
#+ATTR_HTML: :style float:left; max-width:49%
http://www.newleftreview.org.myaccess.library.utoronto.ca/assets/images/2600511large.gif
#+BEGIN_QUOTE
The form of an object is a 'diagram of forces', in this sense, at least that from it we can... deduce the forces that ... have acted upon it. (p.57)
#+END_QUOTE
*** /Our Village/
:PROPERTIES:
:CUSTOM_ID: /our-village/-c56c
:END:
#+BEGIN_QUOTE
In the 1824 volume... the vilage was the undisputed centre of the surrounding countryside: the centripetal effects of the force "from within" were omnipresent, while the force "from without" was nowhere to be seen. (p. 57)

Two collections later, in 1828, the village's gravitation field is already weaker...  Something is wrong with the force from within, but as no counter-force challenges it yet, the basic pattern... remains in place.  But by 1832... the village's centripetal force is reduced to nothing, and the bulk of the book moves away... (p. 58-59)
#+END_QUOTE
*** /Our Village/ -- Extremes
:PROPERTIES:
:CUSTOM_ID: /our-village/----extremes-3f27
:END:
#+ATTR_HTML: :style float:left; max-height:400px; max-width:49%
http://www.newleftreview.org.myaccess.library.utoronto.ca/assets/images/2600502large.gif 
#+ATTR_HTML: :style float:left; max-height:400px; max-width:49%
http://www.newleftreview.org.myaccess.library.utoronto.ca/assets/images/2600512large.gif
*** Modelling the text
:PROPERTIES:
:CUSTOM_ID: modelling-the-text-1363
:END:
- *reduce* text to the model
- *presume* that sociological factors are determinative
- *sustain* focus on form ("a quantitative history of literature is also a profoundly formalist one" -p.25, fn 14)
- *interpret* model in light of theories

** Trees
:PROPERTIES:
:CUSTOM_ID: trees-66d5
:END:
#+ATTR_HTML: :style float:left; max-width:49%;
https://upload.wikimedia.org/wikipedia/commons/1/10/Darwin_Tree_1837.png
#+ATTR_HTML: :style float:left; max-width:49%;
https://upload.wikimedia.org/wikipedia/commons/4/4e/Darwins_tree_of_life_1859.png
*** Moretti's Evolutionism
:PROPERTIES:
:CUSTOM_ID: moretti's-evolutionism-251f
:END:
- Citations: Darwin, Feldman, Cavalli-Sforza
- In his genealogy: Karl Marx; H. G. Wells; E. O. Wilson; all of evolutionary psychology
*** Plots
:PROPERTIES:
:CUSTOM_ID: plots-525b
:END:
https://newleftreview-org.myaccess.library.utoronto.ca/system/dragonfly/production/2019/05/13/1tvogaisyo_2620303large.gif
**** Clues as /evolved/ phenomenon
:PROPERTIES:
:CUSTOM_ID: clues-as-/evolved/-phenomenon-baf4
:END:
- Doyle as /canonical starting point/ for detective fiction
- But has a context; how to describe?
- note: /not/ a personal context!
*** Styles
:PROPERTIES:
:CUSTOM_ID: styles-4fc2
:END:
https://nplusonemag.com/wp-content/uploads/2014/04/moretti-2.jpg
**** Free Indirect Style
:PROPERTIES:
:CUSTOM_ID: free-indirect-style-4a25
:END:
#+BEGIN_QUOTE
A peculiar mix of indirect and direct discourse, which draws the verbal tenses and pronouns from the former, and the tone and the order of the sentence from the latter:

It was the abode of noise, disorder, and impropriety. Nobody was in their right place, nothing was done as it ought to be. She could not respect her parents, as she had hoped. 
#+END_QUOTE
**** Why FIS?
:PROPERTIES:
:CUSTOM_ID: why-fis?-eefc
:END:
- appears to mark a major social transformation ("halfway btwn the social doxa and the individual voice, FIS is a good indicator of their changing balance of forces")
- Moretti's goal: to /quantitatively/ (?) trace these forces
  #+BEGIN_QUOTE
  Take a form, follow it from space to space, and study the reasons for its transformations: the 'opportunistic, hence unpredictable' reasons of evolution.
  #+END_QUOTE
*** Problematics
:PROPERTIES:
:CUSTOM_ID: problematics-4d4e
:END:
- Teleological thinking?
- dealing with the "twisted branching"?
- is this really "quantitative"?
- Does this qualify as "insight"? 
** Summary: Moretti and History
:PROPERTIES:
:CUSTOM_ID: summary:-moretti-and-history-59c4
:END:
- *labor-intensive* quantification of sources
- *glossing over* problems of quantification
- *continued reliance* on expert opinion -- but how is that expertise to be cultivated? 
* 06-02: Text as Data, history As Algorithm (but also homework help)
:PROPERTIES:
:EXPORT_FILE_NAME: 06-02-text-as-data
:CUSTOM_ID: 06-02-text-as-data-f1aa
:END:
** Recap (distant reading)
:PROPERTIES:
:CUSTOM_ID: recap-8099
:END:
Models and Distant Reading
- Hopeful, even Utopian discourse
- Makes some questionable assumptions
- But raises substantive questions:
  #+ATTR_REVEAL: :frag (appear appear appear)
  - Do we really deserve to call ourselves "Experts"?
  - What does it mean, today, to "know" something?
  - Can we leverage data-analysis tools to inform the classical goals of humanistic scholarship?

** Today
:PROPERTIES:
:CUSTOM_ID: synopsis-bfc9
:END:
- Assignment Questions
- Hermeneutics
- Data beyond evidence
- Screwing Around
** How's it going?
#+begin_src js
//add code here

#+end_src

** Hermeneutics of Data
:PROPERTIES:
:CUSTOM_ID: hermeneutics-of-data-45d2
:END:
*** The Hermeneutic Tradition
:PROPERTIES:
:CUSTOM_ID: the-hermeneutic-tradition-b60e
:END:
- Science of Interpretation
  - Biblical Scholarship: how to read
  - Schleiermacher: how to understand others
  - Heidegger: experience as hermeneutic
    #+BEGIN_QUOTE
     It is not really we who address the texts of tradition, but the canonic texts that address us. Having traveled through decades and centuries, the classic works of art, literature, science, and philosophy question us and our way of life. Our prejudices, whatever aspects of our cultural horizon that we take for granted, are brought into the open in the encounter with the past.
    #+END_QUOTE
#+BEGIN_NOTES
 Human being, Gadamer argues, is a being in language. It is through language that the world is opened up for us. We learn to know the world by learning to master a language. Hence we cannot really understand ourselves unless we understand ourselves as situated in a linguistically mediated, historical culture. Language is our second nature

 Gadamer argues that we never know a historical work as it originally appeared to its contemporaries. We have no access to its original context of production or to the intentions of its author. Tradition is always alive. It is not passive and stifling, but productive and in constant development. Trying, as the earlier hermeneuticians did, to locate the (scientific) value of the humanities in their capacity for objective reconstruction is bound to be a wasted effort. The past is handed over to us through the complex and ever-changing fabric of interpretations, which gets richer and more complex as decades and centuries pass. History, as Gadamer puts it, is always effective history. This, however, is not a deficiency. It is, rather, a unique possibility, a possibility that involves the particular kind of truth-claim that Gadamer ascribes to the human sciences: the truth of self-understanding.
#+END_NOTES

- textual encouter as a fundamental act of self-comprehension
- can this be recaptured in data-heavy analysis?

*** Method as Interpretation
:PROPERTIES:
:CUSTOM_ID: method-as-interpretation-db44
:END:

#+BEGIN_QUOTE
...work with data can be exploratory and deliberately without the mathematical rigor that social scientists must use to support their epistemological claims. Using data in this way is fundamentally different from using data for quantifying, computing and creating knowledge as per quantitative history.

...data does not always have to be used as evidence. It can also help with discovering and framing research questions. 
#+END_QUOTE

#+BEGIN_NOTES
- Gibbs & Owens, both figures in DH scene in first half of this decade
- data in history has been around a while!
#+END_NOTES

*** Openness
:PROPERTIES:
:CUSTOM_ID: openness-a3bd
:END:

#+BEGIN_QUOTE
Regardless of form, we need history writing that explicates the research process as much as the research conclusions. We need history writing that interfaces with, explains, and makes accessible the data that historians use...One way of reducing hostility to data and its manipulation is to lay bare whatever manipulations have led to some historical insight. 
#+END_QUOTE
*** Open Research on "Users"
:PROPERTIES:
:CUSTOM_ID: open-research-on-users-5357
:END:
- [[https://books.google.com/ngrams/graph?content=user&year_start=1800&year_end=2000&corpus=15&smoothing=3&share=&direct_url=t1%3B%2Cuser%3B%2Cc0][Rise of the User]]
- [[https://books.google.com/ngrams/graph?content=drug+user%2Cuser+interface&year_start=1960&year_end=2000&corpus=15&smoothing=3&share=&direct_url=t1%3B%2Cdrug%20user%3B%2Cc0%3B.t1%3B%2Cuser%20interface%3B%2Cc0][Two different Rises]]
- [[https://docs.google.com/spreadsheets/d/12ARdbZeISIGzV-_7sJPlB56ZOGZZvAQCC79CUcIRxqU/pub?hl=en_US&hl=en_US&output=html][Using Collocation]]
- [[https://books.google.com/ngrams/graph?content=cyborg%2Crobot%2Candroid%2Cartificial+intelligence%2Cautomaton%2Cfrankenstein&case_insensitive=on&year_start=1800&year_end=2008&corpus=15&smoothing=3&share=&direct_url=t4%3B%2Ccyborg%3B%2Cc0%3B%2Cs0%3B%3Bcyborg%3B%2Cc0%3B%3BCyborg%3B%2Cc0%3B%3BCYBORG%3B%2Cc0%3B.t4%3B%2Crobot%3B%2Cc0%3B%2Cs0%3B%3Brobot%3B%2Cc0%3B%3BRobot%3B%2Cc0%3B%3BROBOT%3B%2Cc0%3B.t4%3B%2Candroid%3B%2Cc0%3B%2Cs0%3B%3Bandroid%3B%2Cc0%3B%3BAndroid%3B%2Cc0%3B%3BANDROID%3B%2Cc0%3B.t4%3B%2Cartificial%20intelligence%3B%2Cc0%3B%2Cs0%3B%3BArtificial%20Intelligence%3B%2Cc0%3B%3Bartificial%20intelligence%3B%2Cc0%3B%3BArtificial%20intelligence%3B%2Cc0%3B%3BARTIFICIAL%20INTELLIGENCE%3B%2Cc0%3B.t4%3B%2Cautomaton%3B%2Cc0%3B%2Cs0%3B%3Bautomaton%3B%2Cc0%3B%3BAutomaton%3B%2Cc0%3B%3BAUTOMATON%3B%2Cc0%3B.t4%3B%2Cfrankenstein%3B%2Cc0%3B%2Cs0%3B%3BFrankenstein%3B%2Cc0%3B%3BFRANKENSTEIN%3B%2Cc0][And some further thoughts about human-machine hybrids]]
** Screwing Around
:PROPERTIES:
:CUSTOM_ID: screwing-around-2dc5
:END:
*** Millions of books
:PROPERTIES:
:CUSTOM_ID: millions-of-books-474c
:END:
#+BEGIN_QUOTE
It's one thing to worry that your canon isn't sufficiently inclusive, or broad, or representative. It's another thing when your canon has no better chance of being these things than a random selection.(Ramsay, p.3)
#+END_QUOTE

- now-familiar insight: you can't read everything
*** Searching and Browsing
:PROPERTIES:
:CUSTOM_ID: searching-and-browsing-f338
:END:
- Search: knowledge of object; strategies of data collection; methods of reading
- Browsing: bundle of interests; unsystematic following of connections
#+BEGIN_NOTES
  I walk into the library and wander around in a state of insoucient boredom. I like music, so I head over to the music section. I pick up a book on American rock music and start flipping through it (because it's purple and big). There's an interesting bit on Frank Zappa, and it mentions that Zappa was way into this guy named Edgard Varèse. I have no idea who that is, so I start looking around for some Varèse. One look at the cover of his biography—Varèse with that mad-scientist look and the crazy hair—and I'm already a fan. And so off I go. I check out some records and discover Varèse.
#+END_NOTES
*** "Screwing Around"
:PROPERTIES:
:CUSTOM_ID: screwing-around-898f
:END:
- "Screwing around" is a form of hermeneutic encounter
- the text /addresses us/
*** Linked Data for /Screwing Around/, not only /rigourous investigation/
:PROPERTIES:
:CUSTOM_ID: linked-data-for-/screwing-around/,-not-only-/rigourous-investigation/-a896
:END:
*Goal:*
#+BEGIN_QUOTE
Extract from the stored record of humanity useful information in an actionable format for any given human being of any culture at any time and in
any place. (Crane, cited in Ramsay, 7)
#+END_QUOTE

- A library where books talk to each other! and our encounter with them is playfully mediated through algorithms.

#+BEGIN_QUOTE
the real message of our technology is something entirely unexpected—
a writerly, anarchic text that is more useful than the readerly, institutional
text. Useful and practical not in spite of its anarchic nature, but as a natural
consequence of the speed and scale that inhere in all anarchic systems.
#+END_QUOTE


* COMMENT 04: Pt 2, Distant Reading 1 (2019-01 version)                                    
:PROPERTIES:
:EXPORT_FILE_NAME: 04-distant-reading-1
:EXPORT_TITLE: Distant Reading I
:CUSTOM_ID: 04:-distant-reading-1-65c1
:END:
** COMMENT
:PROPERTIES:
:CUSTOM_ID: comment-27db
:END:
- Lecture: Graphs & maps (30 mins)
- discussion
- Wordles
- Have assignment ready!
** COMMENT Bright the Hawk's Flight
:PROPERTIES:
:CUSTOM_ID: bright-the-hawk's-flight-d1e1
:END:
@@html:<div class="paired" style="margin-right:40px;">@@
#+begin_verse 
Only in silence the word,
Only in dark the light,
Only in dying life:
Bright the hawk's flight
On the empty sky.
#+end_verse
@@html:</div>@@

#+ATTR_HTML: :class paired
https://c1.staticflickr.com/3/2430/3551195631_bc66b90648_b.jpg
** Reminder
:PROPERTIES:
:CUSTOM_ID: recap-7764
:END:
#+ATTR_REVEAL: :frag (appear appear appear)
- "Abundance" offers many challenges
  - preservation
  - interpretation
  - access
- Does /history itself/ need to be reformed?
  - What /relation to sources/?
  - What /kinds of arguments/?
  - What /narrative forms/?
*** Plan for the day
:PROPERTIES:
:CUSTOM_ID: plan-for-the-day-c53a
:END:
- Lecture (short as i can manage, will stop early if nec)
- Class Discussion (what did you learn/ what do you doubt)
- help w/ HTML/CSS/JS (if you're stuck/don't understand) 
** Abstract Models
:PROPERTIES:
:CUSTOM_ID: abstract-models-d7c3
:END:
#+BEGIN_QUOTE
...distance is however not an obstacle, but a /specific form of knowledge:/ fewer elements, hence a sharper sense of their overall interconnection. Shapes, relations, structures. Forms. Models. 
#+END_QUOTE
*** The opposite of close?
:PROPERTIES:
:CUSTOM_ID: the-opposite-of-close?-f387
:END:
#+BEGIN_QUOTE
 Dorothea, endowed with the extraordinary capacity for attentiveness that is “ardor,” is given to the strongest denunciations of the trivial, the most overwhelming anxieties of admitting the trivial into her life of any character in the novel. She is blind to the possibility that attention has the capacity to reveal that what seems trivial is in fact significant. She fears instead that the attention is wasted by devoting itself to those common objects which really are trivial, which have no redeeming significance: 

"“I should learn everything then,” she said to herself, still walking quickly along the bridle road through the wood. “It would be my duty to study that I might help him the better in his great works. There would be nothing trivial about our lives. Everyday-things with us would mean the greatest things."
#+END_QUOTE

#+BEGIN_NOTES
to notice:
- analysis of passage longer than passage itself.
#+END_NOTES
*** To the point of deconstruction
:PROPERTIES:
:CUSTOM_ID: to-the-point-of-deconstruction-7de9
:END:
#+BEGIN_QUOTE
If the pharmakon is ‘ambivalent,' it is because it constitutes the medium in which opposites are opposed, the movement and the play that links them among themselves, reverses them or makes one side cross over into the other (soul/ body, good/ evil, inside/ outside, memory/ forgetfulness, speech/ writing, etc.).…The pharmakon is the movement, the locus, and the play: (the production of) difference. It is the différance of difference. It holds in reserve, in its undecided shadow and vigil, the opposites and the differends that the process of discrimination will come to carve out. Contradictions and pairs of opposites are lifted from the bottom of this diacritical, differing, deferring, reserve. Already inhabited by différance, this reserve, even though it ‘precedes' the opposition between different effects, even though it preexists differences as effects, does not have the punctual simplicity of a coincidentia oppositorum. It is from this fund that dialectics draws its reserves.
#+END_QUOTE
*** Closeness
:PROPERTIES:
:CUSTOM_ID: closeness-431d
:END:
#+ATTR_REVEAL: :frag (appear appear appear)
- Literary study long organized around "close" reading
- "Hermeneutic" model of scholarship
- defines what it has meant to /understand/ or /master/ a text
*** Questioning Close Reading
:PROPERTIES:
:CUSTOM_ID: questioning-close-reading-7c74
:END:
- But what is understanding?
- what is literature?
- what is the scholar's goal?
#+BEGIN_NOTES

#+END_NOTES
*** Some Numbers
:PROPERTIES:
:CUSTOM_ID: some-numbers-b757
:END:
- ~62,000 new Novels published in English in the US/year
- ~304,000 new and re-issued /books/ in US/year
- ~129,000,000 books collected in world's libraries
#+ATTR_REVEAL: :frag (appear)
- *not possible to read these*
  - can one still be an expert?
*** New forms of Understanding?
:PROPERTIES:
:CUSTOM_ID: new-forms-of-understanding?-c1c6
:END:
- instead of, or in parallel with, close reading?
- apprehension of /large-scale phenomena/
- studying models, rather than texts themselves
*** Questions to consider
:PROPERTIES:
:CUSTOM_ID: questions-to-consider-6df4
:END:
- Does this count as /comprehension/?
- what new skills are required?
- What are the weaknesses of this form?

** Graphs
:PROPERTIES:
:CUSTOM_ID: graphs-70bf
:END:
#+ATTR_HTML: :style float:left;
[[https://seeingcomplexity.files.wordpress.com/2011/02/william_playfair_graph.jpg]]
#+ATTR_HTML: :style float:left;
#+ATTR_REVEAL: :frag (appear appear appear appear)
- /condense/ data
- /conceptualize/ mathematically
- /convince/ readers
- a fundamentally *rhetorical* tool
*** Moretti's Graphs
:PROPERTIES:
:CUSTOM_ID: moretti's-graphs-68bd
:END:
http://newleftreview.org/static/assets/images/2580501large.gif
#+BEGIN_QUOTE
Quantitative research provides a type of data which is ideally independent of interpretations. (p.9)
#+END_QUOTE
- yet, the graph is an argument:  rise, fall, rise
*** A History of Readers
:PROPERTIES:
:CUSTOM_ID: a-history-of-readers-7e72
:END:
[[http://sandbox.hackinghistory.ca/assets/images/DH/three-rises-novel-colored.gif]]
- each phase a new "kind" of reader
- intensive, extensive, generic
*** Cycles
:PROPERTIES:
:CUSTOM_ID: cycles-3686
:END:
#+BEGIN_QUOTE
Event, cycle, /longue durée/: three time frames which have fared very unevenly in literary studies.

... cycles constitute /temporary structures within the historical flow./ (p.14)
#+END_QUOTE
- *event \rarr close reading*
- *longue durée \rarr grand narrative*
- *cycle \rarr ?*
*** Cycles in Literature
:PROPERTIES:
:CUSTOM_ID: cycles-in-literature-f456
:END:
[[http://sandbox.hackinghistory.ca/assets/images/DH/genres-colored.gif]]
#+BEGIN_QUOTE
A genre exhausts its potentialities... when its inner form is no longer capable of representing the most significant aspects of contemporary reality. (p. 17, fn 7)
#+END_QUOTE
*** Genre & Generation
:PROPERTIES:
:CUSTOM_ID: genre-&-generation-5762
:END:
#+BEGIN_QUOTE
... some kind of generational mechanism seems the best way to account for the regularity of the novelistic cycle... (p. 22)
#+END_QUOTE
- "Normal literature"
- but "revolution" as "dying out"
*** From "the shift" to "a shift"
:PROPERTIES:
:CUSTOM_ID: shift-4356
:END:
http://newleftreview.org/static/assets/images/2580512large.gif
#+BEGIN_QUOTE
...the point is not who prevails in this or that skirmish, but exactly the opposite: no victory is ever definitive... the form keeps oscillating back and forth between the two groups. (p.29)
#+END_QUOTE
*** Moretti's method
:PROPERTIES:
:CUSTOM_ID: moretti's-method-dbf4
:END:
#+BEGIN_QUOTE
...the real point here... is the total /heterogeneity of problem and solution:/ to make sense of quantitative data, I had to abandon the quantitative universe, and turn to morphology: evoke form, in order to explain figures.
#+END_QUOTE
- how justified is this move?
- what do we learn from it? 
** Maps
:PROPERTIES:
:CUSTOM_ID: maps-59e4
:END:
#+BEGIN_QUOTE
There is a very simple question about literary maps: what exactly do they /do/?
#+END_QUOTE
- like graphs, maps are a /persuasive tool/
- What does it mean to "map" a novel?
*** What is a map?
:PROPERTIES:
:CUSTOM_ID: what-is-a-map?-44e9
:END:
#+ATTR_HTML: :style float:left; max-height:320px;
http://www.socialresearchmethods.net/research/epp2/15.gif
#+ATTR_HTML: :style float:left; max-height:320px;  max-width:49%
http://theexpertsagree.files.wordpress.com/2009/06/tokyorail.jpg
#+ATTR_HTML: :style float:left; max-height:320px; max-width:49%
http://www.fubiz.net/wp-content/uploads/2013/07/am1.jpg
*** What is a map?
:PROPERTIES:
:CUSTOM_ID: what-is-a-map?-6c3d
:END:
#+ATTR_REVEAL: :frag (appear appear appear appear)
- abstract
- visual
- representation
- of a physical or imagined space
*** Moretti's method
:PROPERTIES:
:CUSTOM_ID: moretti's-method-ddd7
:END:
#+ATTR_HTML: :style float:left; max-width:49%
http://www.newleftreview.org.myaccess.library.utoronto.ca/assets/images/2600502large.gif 
#+ATTR_HTML: :style float:left; max-width:49%
http://www.newleftreview.org.myaccess.library.utoronto.ca/assets/images/2600511large.gif
#+BEGIN_QUOTE
The form of an object is a 'diagram of forces', in this sense, at least that from it we can... deduce the forces that ... have acted upon it. (p.57)
#+END_QUOTE
*** /Our Village/
:PROPERTIES:
:CUSTOM_ID: /our-village/-c56c
:END:
#+BEGIN_QUOTE
In the 1824 volume... the vilage was the undisputed centre of the surrounding countryside: the centripetal effects of the force "from within" were omnipresent, while the force "from without" was nowhere to be seen. (p. 57)

Two collections later, in 1828, the village's gravitation field is already weaker...  Something is wrong with the force from within, but as no counter-force challenges it yet, the basic pattern... remains in place.  But by 1832... the village's centripetal force is reduced to nothing, and the bulk of the book moves away... (p. 58-59)
#+END_QUOTE
*** /Our Village/ -- Extremes
:PROPERTIES:
:CUSTOM_ID: /our-village/----extremes-3f27
:END:
#+ATTR_HTML: :style float:left; max-height:400px; max-width:49%
http://www.newleftreview.org.myaccess.library.utoronto.ca/assets/images/2600502large.gif 
#+ATTR_HTML: :style float:left; max-height:400px; max-width:49%
http://www.newleftreview.org.myaccess.library.utoronto.ca/assets/images/2600512large.gif
*** Modelling the text
:PROPERTIES:
:CUSTOM_ID: modelling-the-text-1363
:END:
- *reduce* text to the model
- *presume* that sociological factors are determinative
- *sustain* focus on form ("a quantitative history of literature is also a profoundly formalist one" -p.25, fn 14)
- *interpret* model in light of theories
** Summary: Moretti and History
:PROPERTIES:
:CUSTOM_ID: summary:-moretti-and-history-59c4
:END:
- *labor-intensive* quantification of sources
- *glossing over* problems of quantification
- *continued reliance* on expert opinion -- but how is that expertise to be cultivated? 
** COMMENT Tools for Distant Reading: the wordle
:PROPERTIES:
:CUSTOM_ID: tools-for-distant-reading:-the-wordle-eaf6
:END:
#+ATTR_HTML: :style float:left; max-height:400px; max-width:49%
http://www.themacroscope.org/wp-content/uploads/2013/10/Fig-2-CCF.png
#+ATTR_HTML: :style float:left; max-height:400px; max-width:49%
http://www.themacroscope.org/wp-content/uploads/2013/10/Fig-3-CCF.png
- what do and don't we know? 
** COMMENT Exercise: build a wordle 
:PROPERTIES:
:CUSTOM_ID: exercise:-build-a-wordle-34a6
:END:
*** Choose a work to not read.
:PROPERTIES:
:CUSTOM_ID: choose-a-work-to-not-read.-43b7
:END:
- navigate to [[http://www.gutenberg.org/][Project Gutenberg]].  Pick any 19th Century novel, but esp. something FAT that would be hard to read.
- download the *text* version
*** Make some predictions
:PROPERTIES:
:CUSTOM_ID: make-some-predictions-df0a
:END:
- Write down your basic expectations of the novel: 
- What are the main themes?
- What are the lessons?
- What is its place in literary history?
*** Make a Wordle
:PROPERTIES:
:CUSTOM_ID: make-a-wordle-c8b5
:END:
- navigate to [[http://wordle.net]]
- strip the metadata from the text (e.g., license, etc.)
- create wordle for the text as a whole.
  - then for several chapters or sections
  - what patterns do you see? 
*** Make a network
:PROPERTIES:
:ID:       aefd9474-d1ed-40ae-9190-034aac825a3e
:CUSTOM_ID: make-a-network-43f4
:END:
- copy and paste your novel (again, without the Gutenberg metadata) into [[http://textexture.com/user.php][Textexture]], which will visualize the words in the novel as a network. 

#+BEGIN_QUOTE
    The gist of textexure's process is that account of words that occur near each other. That is not to say words have to be directly next to one another, paragraph and sentence structures are both considered. In the network, the nodes are the words themselves while the edges (or connections from node to node) are determined by the co-occurrence between words either directly, in paragraphs or sentences. In terms of the visualization, this effectively does two things: 1. organizes groups of words into the communities they appear (color coded) so that with a quick glance at the network, you can pick out certain themes and 2. You can also easily see what the primary theme that links the various aspects together.
#+END_QUOTE
In short, Textexture tries to automatically discern and visualize relationships between words, based on their usage, within a text. Looking at the network graph of your novel, what relationships seem most interesting? Experiment with the graph by clicking through different words. 

*** Repeat
:PROPERTIES:
:CUSTOM_ID: repeat-a785
:END:
- Try the same process with another novel.
- What have you learned? Anything?  

** COMMENT HTML Questions
:PROPERTIES:
:CUSTOM_ID: html-questions-87d5
:END:
#+begin_src html
<style>

</style>
<!-- leaving blank for your questions -->
#+end_src
* 07-01: JavaScript and the DOM
:PROPERTIES:
:CUSTOM_ID: javascript-30da
:EXPORT_FILE_NAME: 07-01-js-dom
:END:
** Working with the DOM
:PROPERTIES:
:CUSTOM_ID: working-with-the-dom-d129
:END:
*Document Object*
- everything in the document can be manipulated via the DOM
https://www.computerhope.com/jargon/d/dom1.jpg
*** Inspecting the DOM
:PROPERTIES:
:CUSTOM_ID: inspecting-the-dom-edf1
:END:
file:///home/matt/DH/Images/devtools.png

** Finding Elements
:PROPERTIES:
:CUSTOM_ID: finding-elements-11f8
:END:
- *"Vanilla" JavaScript* (described in MDN)
  - ~document.querySelector("str")~
- ~document.querySelectorAll("str")~
- *jQuery* (convenience library)
  - ~$("str")~
  - *library must be loaded* with ~<script src="http://code.jquery.com/jquery-3.3.1.min.js"</script>~


- we use jQuery in examples, but it's your choice.
  - slightly different syntax & different return values, so be careful. 

** Cheat Sheet
| Task                       | jQuery                                               | "Vanilla" JS                                                                          |
|----------------------------+------------------------------------------------------+---------------------------------------------------------------------------------------|
| Get all matching elements  | ~$('selector')~                                      | ~document.querySelectorAll('selector')~                                               |
| Get first matching element | ~$('selector').first()~                              | ~document.querySelector('selector')~                                                  |
| Change CSS prop            | ~$('selector').css('property-name', 'value')~        | ~document.querySelector('selector').style.property-name = 'value'~                    |
|                            |                                                      | ~const matches = document.querySelectorAll('selector')~                               |
|                            |                                                      | ~for (const m of matches) {m.style.property-name='value'~                             |
| Change Text Value          | ~$('selector').text('new text here')~                | ~document.querySelector('selector').textContent = 'new text here'~                    |
|                            |                                                      | ~const matches = document.querySelectorAll('selector')~                               |
|                            |                                                      | ~for (const m of matches) {m.textContent ='new text here'~                            |
| Set inner HTML             | ~$('selector').html('<tag>valid HTML here</tag>')~   | ~document.querySelector('selector').innerHTML = '<tag>valid HTML here</tag>'~         |
|                            |                                                      | ~const matches = document.querySelectorAll('selector')~                               |
|                            |                                                      | ~for (const m of matches) {m.textContent ='<tag>valid HTML here</tag>'~               |
| Append to an element       | ~$('selector').append('<tag>valid HTML here</tag>')~ | ~document.querySelector('selector').innerHTML += '<tag>valid HTML here</tag>'~ risky! |
| Remove a node              | ~$('selector').remove()~                             | ~let el = document.querySelector('selector'); el.parentNode.removeChild(el);~         |





** Change CSS of an Element
:PROPERTIES:
:CUSTOM_ID: change-css-of-an-element-0bef
:END:
#+begin_src js
$('selector').css('property-name', 'value')
#+end_src

** Get and Change Text Content
#+begin_src js
$('selector').text()
$('selector').text('new value')
#+end_src

** Get and Change Full inner HTML
#+begin_src js
$('selector').text()
$('selector').text('<h2>new value, with valid HTML markup</h2>')
#+end_src

** Append elements
#+begin_src js
$('selector').append('<p>valid HTML Markup</p>')
#+end_src

** What does jQuery return? 
- an "array-like object"
- it's not exactly an array, but you can use "of" to iterate over HTMl objects
- each element can use *native DOM methods* for HTML elements (cf MDN)
- to use jQuery methods on it, wrap it again in the $() function 

** Looping: over HTML elements
#+begin_src js
let allElements = $('selector');
// for.. in will NOT work!!!!
for (e of allElements) { // this will loop through the *html elements* found by jQ   
  $(e).doSomething(0) // if you want to use jquery methods, you have to jquery-ize first
}
#+end_src

** Looping -- advanced
Trickier! Uses a "callback function" -- see this [[https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced][excellent, but still difficult, explanation]] 
#+begin_src js
$('td.name').each(
  function (index) {
    console.log(`here's the content of cell number ${index}`);
    console.log($(this).text());
  });
#+end_src

** Takeaways for us
- it's a wild world out there
- many complex concepts, but if you go slowly, it's not impossible to figure out
- key is to understand that the DOM is a *struture of HTML elements*, which can be *created, destroyed, 
* COMMENT 07-02 -- just used the exercise repo for that!!
* 08-01: Homework Help Day
:PROPERTIES:
:EXPORT_FILE_NAME: 08-01-homework-help
:header-args: :noweb yes
:END:
** Today
- [[https://github.com/DigitalHistory/dom-exercises][working again from this repository]]
- HTML Structures & Atomic Functions
** Put a Pin In This
:PROPERTIES:
:reveal_extra_attr: class="splitc"
:END:

#+begin_slideblock
[[./Images/e2019/globe-results-2019.png]]
#+end_slideblock

#+begin_slideblock
[[./Images/e2019/cbc-results-2019.png]]
#+end_slideblock

#+begin_slideblock
[[./Images/e2019/star-results-2019.png]]
#+end_slideblock


** HTML Structures
- for the rest of the course, coding is mostly *creating HTML structures*
- becaue HTML is tedious, *lots* of opportunity to introduce errors!
- How to avoid?
  - *D.R.Y.* (Don't Repeat Yourself)
  - if done right, guarantees that low-level problems only need to be solved *once*
  - remember: laziness is a virtue

** Writing "Atomic" Functions
- Complex code is difficult to debug!
- instead, try to make your individual functions as simple as possible
- *divide your problem into smallest possible parts* (hence 'atomic')
- "chain" your functions together to recreate complexity
- much easier to localize failure

** Making a card deck 
:PROPERTIES:
:reveal_extra_attr: class="twoc"
:END:
#+begin_slideblock
#+begin_src html
<card class="card">
  <header>
    <h1>Person Name</h1>
  </header>
  <main class="card">   
    <p>
      lengthy text here
    </p>
  </main>
  <footer>
    <a href="https://digitalhistory.github.io/">A Project of HIS393</a>
  </footer>
</card>
#+end_src

#+end_slideblock


#+begin_slideblock

#+begin_src js
let sampleData = {
  name: 'Person Name',
  blurb: 'lengthy text here',
};
#+end_src
*Task:* given a JSON data structure, generate a set of cards (like the ones we made in assignment 0, but simpler)


#+end_slideblock
*** First, Map the assignment
#+ATTR_REVEAL: :frag (appear)
- card deck \rarr set of cards
- card \rarr ~<card><header></header><main></main><footer></footer><card>~
- this is *set of tagged elements*
- so we might do something like this:
  #+ATTR_REVEAL: :frag (appear)
  - *fn 1*: tag some content
  - *fn 2*: use *fn 1* to make header structure
  - *fn 3*: use *fn 1* to make main structure
  - *fn 4*: use *fn 1* to make footer structure
  - *fn 5*: use *fn 2, fn 3, fn 4* to make sub-structures and then call *fn 1* to wrap whole thing
  - *fn 6*: loop through data structure, calling *fn 5* once for each element


*** Start with Fn 1: ~letsTag~
#+NAME: letstag
#+begin_src js :exports none
function letsTag(a,c,b={}){output=`<${c} `;Object.keys(b).map((k,i)=>output+=`${k}="${b[k]}" `);output+=`>${a}</${c}>`;return output}

#+end_src

#+begin_src js 
<<letstag>>
letsTag('I am the main content', 'main', {style: 'border: 2px solid black;'});

#+end_src

- code is purposely obfuscated; you guys can perhaps discuss among yourselves how you would implement it (is slightly harder than your assignment)
*** Fn 2: ~headMe()~
#+begin_src js 
<<letstag>>
function headMe (titleText) {
  let output=letsTag(titleText, 'h1');
  output=letsTag(output, 'header');
  return output
}

headMe('I am the title');
#+end_src

*** All the Rest
#+begin_src js
<<letstag>>
function footMe () {
  let link = letsTag('A Project of HIS393', 'a', {href: 'https://digitalhistory.github.io/'});
  return letsTag(link, 'footer');
}

function mainMe (blurb) {
  let p = letsTag(blurb, 'p');
  return letsTag(p, 'main');
}

function cardMe (person) {
  let header = headMe(person.name);
  let main = mainMe(person.blurb);
  let footer = footMe();
  return letsTag(header + main + footer, 'card', {class: 'card'});
}

function makeAllTheCards (people) {
  output = '';
  for (p of people) {
    output += cardMe (p);
  }
  return $('main#page-main').append(output); 
}

makeAllTheCards (allEntries);
#+end_src

* Computing Concepts Catchup
:PROPERTIES:
:EXPORT_FILE_NAME: 06-1-concepts-catchup
:END:

** Abstraction
- objects & other vars are *abstract representations* of the phenomena we're interested in
- careful choice of abstraction is important for *computational efficacy* and also for *epistemological reasons*
** Iteration
#+begin_src js
for(let i = 0; i < collection.length; i++) {
  // do something here for each element of collection using
  // collection[i]
  // "i" is always an integer value
}

for (i in ObjectOrArray ) {
  // do something here with ObjectOrArray[i]
  // "i" wil lbe an integer for an array, or
  // a "property key(name)" for an object
}

for (let a of ArrayOrElementList) {
  // do something directly with a
  // a will take the value of whatever
  // is at the current location in the array
  // great for looping over DOM elements!
}

let i=0;
while (i < myArray.length) {
  // do osmething wiht myArray[i]
  // remember to increment i within the loop!!!!
}
#+end_src
** Branching Logic
- without logic, programming would be pretty limited.
- use these constructions to change the flow of your output depending on conditions
#+begin_src js
if (condition1) {
  console.log("condition is true");
} else if (condition2) {
  console.log("conition1 is false but condition2 is true");
} else {
  console.log("none of hte above ocnditions is true")
}

#+end_src
** Variable Scope
- with *let* we have fine-grained control over "scope" of variable values.
- most important within a function, but also works inside nay block: 
#+begin_src js
let x = 3;
console.log(myvar);
if (myvar) {
  let myvar = 2;
  console.log(myvar);
}
console.log(myvar);
#+end_src
** Functions: Definition; Invocation; Transformation of Parameters
#+begin_src js
function nameHere (param1, param2) {
  // use params here
  // remember to alwyas use the marameter name -- which is an abstraction!
  // return a value that has somehow made use of parameters
  return something;
}

nameHere(someValue1, someValue2) // when called, param1 wil lbe set equal to someValue1
#+end_src
** DOM as Branching Tree Structure
- DOM Elements nest and bramch
- possible to add, delete, modify them
- to do this we need to select the right elements, then change their properties

* COMMENT old javascript lecture notes -- contains some important araay & string methods
:PROPERTIES:
:CUSTOM_ID: javascript-30da
:END:
** For loops!
#+BEGIN_SRC js
var historians= ["Edward Gibbon", "Arnold Toynbee", "Leopold von Ranke"];
  for (h of historians) {
    console.log(h + " was a historian.");
  }
  for (i=0; i < historians.length ; i++){
    console.log(historians[i] + " was a historian.");
  }
  for (i in historians) {
    console.log(historians[i] + " was a historian.");
  }
#+END_SRC
** Conditionals
#+BEGIN_SRC js
  var goodGuys = ["CA", "UK", "US"];
  var badGuys=["DE", "AH"];
  var people = [
    {name: "Kaiser Wilhelm",
     nat: "DE"}];
  for (person of people) {
    if (badGuys.includes(person.nat)) {
      //console.log(person.name + ": BOOOOOOOOOOOO!!!");
    }
  };
#+END_SRC

#+RESULTS:
: undefined

** the "Repeat" function
#+BEGIN_SRC js
var myString="hello";
myString.repeat(5);
#+END_SRC
** Check length
#+BEGIN_SRC js
  var myString="Hello all you students.",
      myArray = ["Hello", "all", "you", "students", "."],
      myObject = {greeting: "Hello",
                  addressee: "all you students",
                  punctuation: "."
                 },
     myNumber=25;
  //console.log(myString.length);
  //console.log(myArray.length);
  //console.log(myObject.length);
  //console.log(myNumber.length);
#+END_SRC

** "Operator Overloading"
~+~, ~-~, do different things w/ different variable types
#+begin_src js
s = "asdf";
t= "ghj";

s+t;

#+end_src

** Working with the DOM
*Document Object*
- everything in the document can be manipulated here
https://www.computerhope.com/jargon/d/dom1.jpg
*** Finding Elements
- ~document.getElementById("str")~
- ~document.getElementByTagName("str")~
- ~document.getElementByClassName("str")~

*** Creating Elements
- ~var newElement = document.createElement("str")~

*** Putting elements into the document
- ~var newElement = document.createElement("str")~
- ~var oldElement = document.getElementByID("str")~
- ~oldElement.append(newElement)~
* COMMENT 02: What the web signifies | HTML & CSS                  
:PROPERTIES:
:EXPORT_FILE_NAME: 02-what-the-web-signifies
:EXPORT_TITLE: What the Web Signifies
:CUSTOM_ID: 02:-what-the-web-signifies-|-html-&-css-09a6
:END:
** COMMENT Notes -- don't export :noexport:
:PROPERTIES:
:CUSTOM_ID: comment-notes----don't-export-a542
:END:
- explain the pun
- Habermas: public sphere (Lecture: 25 mins)
- discussion/group work: definitions of public?  something like that. 15 mins.
- History on the web (Lecture: 20 mins).  Include an example
- Discussion? maybe not.
- Lab:  a few very basic bits about HTML, perhaps some exercises.
** COMMENT Readings/Notes                                         :noexport:
:PROPERTIES:
:CUSTOM_ID: comment-readings/notes-7e81
:END:
#+begin_src sh :results output
${HOME}/src/extract_pdf_annotations_to_orgmode/vkextract_annotations_to_orgmode_snippet.sh DH/Readings/Habermas-public-1964
#+end_src

#+RESULTS:
#+begin_example
---- HIGHLIGHTS: ---
portion of the public sphere comes into being in every conversation in which private individuals assemble to form a public body.' They then behave neither like business or professional people transacting private affairs, nor like members of a constitutional order subject to the legal constraints of a state bureaucracy. Citizens behave as a public body when they confer in an unrestricted fashion-that is, with the guarantee of freedom of assembly and association and the freedom to express and publish their opinions-about matters of general interest. In a large public body this kind of communication requires specific means for transmitting information and influencing those who receive it. Today newspapers and magazines, radio and television are the media of the public sphere. We speak of the political public sphere in contrast, for instance, to the literary one, when public discussion deals with objects connected to the activity of the state. Although state authority is so to speak the executor of the political public sphere, it is not a part of it.2

The state and the public sphere do not overlap, as one might suppose from casual language use. Rather they confront one another as opponents. Habermas designates that sphere as public which antiquity understood to be private, i.e. the sphere of non-governmental opinion making.

The expression "public opinion" refers to the tasks of criticism and control which a public body of citizens informally-and, in periodic elections, formally as well- practices &-d-vis the ruling structure organized in the form of a state.

It is no coincidence that these concepts of the public sphere and public opinion arose for the first time only in the eighteenth century. They acquire their specific meaning from a concrete historical situation. It was at that time that the distinction of "opinion" from "opinion publique" and "public opinion" came about. Though mere opinions \(cultural assumptions, normative attitudes, collective prejudices and values\) seem to persist unchanged in their natural form as a kind of sediment of history, public opinion can by definition only come into existence when a reasoning public is presupposed. Public discussions about the exercise of political power which are both critical in intent and institutionally guaranteed have not always existed- they grew out of a specific phase of bourgeois society and could enter into the order of the bourgeois constitutional state only as a result of a particular constellation of interests.

By the end of the eighteenth century they had broken apart into private elements on the one hand, and into public on the other. The position of the church changed with the reformation: the link to divine authority which the church represented, that is, religion, became a private matter. So-called religious freedom came to insure what was historically the first area of private autonomy. The church itself continued its existence as one public and legal body among others. The corresponding polarization within princely authority was visibly manifested in the separation of the public budget from the private household expenses of a ruler.

The press remained an institution of the public itself, effective in the manner of a mediator and intensifier of public discussion, no longer a mere organ for the spreading of news but not yet the medium of a consumer culture

Even in the Paris of 1848 every half-way eminent politician organized his club, every other his journal: 450 clubs and over 200 journals were established there between February and May alone. Until the permanent legalization of a politically functional public sphere, the appearance of a political newspaper meant joining the struggle for freedom and public opinion, and thus for the public sphere as a principle. Only with the establishment of the bourgeois constitutional state was the intellectual press relieved of the pressure of its convictions. Since then it has been able to abandon its polemical position and take advantage of the earning possibilities of a commercial undertaking. In England, France, and the United States the transformation from a journalism of conviction to one of commerce began in the 1830s at approximately the same time. In the transition from the literary journalism of private individuals to the public services of the mass media the public sphere was transformed by the influx of private interests, which received special prominence in the mass media.

Because of the diffusion of press and propaganda, the public body expanded beyond the bounds of the bourgeoisie. The public body lost not only its social exclusivity; it lost in addition the coherence created by bourgeois social institutions and a relatively high standard of education. Conflicts hitherto restricted to the private sphere now intrude into the public sphere. Group needs which can expect no satisfaction from a self- regulating market now tend towards a regulation by the state. The public sphere, which must now mediate these demands, becomes a field for the competition of interests, competitions which assume the form of violent conflict. Laws which obviously have come about under the "pressure of the. street" can scarcely still be understood as arising from the consensus of private individuals engaged in public discussion. They correspond in a more or less unconcealed manner to the compromise of conflicting private interests.

With the interweaving of the public and private realm, not only do the political authorities assume certain functions in the sphere of commodity exchange and social labor, but conversely social powers now assume political functions. This leads to a kind of "refeudalization" of the public sphere. Large organizations strive for political compromises with the state and with each other, excluding the public sphere whenever possible. But at the same time the large organizations must assure themselves of at least plebiscitary support from the mass of the population through an apparent display of openness \(demonstrative P~blizitiit\).

The political public sphere of the social welfare state is characterized by a peculiar weakening of its critical functions. At one time the process of making proceedings public \(Publizitdt\) was intended to subject persons or affairs to public reason, and to make political decisions subject to appeal before the court of public opinion.

The idea of the public sphere, preserved in the social welfare state mass democracy, an idea which calls for a rationalization of power through the medium of public discussion among private individuals, threatens to disintegrate with the structural transformation of the public sphere itself. It could only be realized today, on an altered basis, as a rational reorganization of social and political power under the mutual control of rival organizations committed to the public sphere in their internal structure as well as in their relations with the state and each other.
#+end_example


*** notes on Interchange
:PROPERTIES:
:CUSTOM_ID: notes-on-interchange-6bbf
:END:


Here is a step toward a working definition. Digital history is an approach to examining and representing the past that works with the new communication technologies of the computer, the Internet network, and software systems. On one level, digital history is an open arena of scholarly production and communication, encompassing the development of new course materials and scholarly data collections. On another, it is a methodological approach framed by the hypertextual power of these technologies to make, define, query, and annotate associations in the human record of the past. To do digital history, then, is to create a framework, an ontology, through the technology for people to experience, read, and follow an argument about a historical problem.



Digital history possesses a crucial set of common components—the capacity for play, manipulation, participation, and investigation by the reader. Dissemination in digital form makes the work of the scholar available for verification and examination; it also offers the reader the opportunity to experiment. He or she can test the interpretations of others, formulate new views, and mine the materials of the past for overlooked items and clues. The reader can immerse him/herself in the past, surrounded with the evidence, and make new associations. The goal of digital history might be to build environments that pull readers in less by the force of a linear argument than by the experience of total immersion and the curiosity to build connections. (Versus the narrative anticipation of what comes next, this is a curiosity about what could be related to what and why.)

Digital sources

• Can be created and altered with relatively little effort or expense

• Can be duplicated with near-zero marginal cost and shared by any number of people

• Can be transmitted near or at the speed of light

• Can be stored in nanoscale volumes

• Can serve as the inputs to any process that can be specified algorithmically

• Allow form to be more easily separated from content

• Allow historians to gain the well-known benefits of working in a networked mode

The use of digital sources, in other words, completely changes the landscape of information and transaction costs that historians have traditionally faced.

 Their main concern was audience and access. We heard a great deal about “democratizing history” and opening the archives to wider dissemination. Many historians welcomed the Web largely because of the opportunity to expand the audience for historical scholarship. 

Some historians have tried to reconcile the iterative, seemingly stable, process of analog historical scholarship with the digital environment. Most of all, we have struggled with the question: Where does interpretation go in these online projects? Ideas about versioning, release dates, update systems, and so forth, bubbled to the surface in technical meetings for many projects. Interpretation, the coin of the realm in professional historical study, seemed cast aside How could interpretation be assessed if the project was continually in motion? Most digital history projects offered huge audiences, but potentially at the expense of interpretive salience. Was the digital medium the place to do historical scholarship? Or was it suitable only for pedagogical tool building? Or documentary editing? 

ew Archives/New Inquiry: Digital resources are expanding and redefining the archival base for most fields and thereby redefining the fields themselves. (This is driven more by libraries and the tech industry than by historians.) My initial interest in things digital grew from developing a database to piece together fragmentary sources obscure people had left behind in multiple archives; the approach was not new, but the scale of the project I could imagine as an individual graduate student was. Linda Colley's latest book, The Ordeal of Elizabeth Marsh—trumpeted in reviews as a “new” approach to biography—is a recent example. The book is not new in its recovery of an ordinary life as a window on a world. (Laurel Thatcher Ulrich showed us that in 1990.) But its ability to encompass the globe is new; Colley credits new media resources with making the project possible.

Audience: New bridges between academic and popular/public history.

Collaboration: A source of excitement and perhaps peril. The best digital projects are collaborative, involving multiple scholars and a technical team, and ideally an institution committed to keeping the project alive after its creators move on to other things. This is, I think, a great way to work. It is not, however, one for which history as a discipline has established institutional resources. 

To reiterate some of the excellent points made here: The new media are profoundly changing the ways most historians work, whether or not we are self-conscious about how we are becoming digital. As Dan has noted, it is in the discipline's interest to be proactive, rather than reactive, in response to these changes. Institutions and individuals who have steered clear of the cutting edge have an important role to play here. Even those who do not envision themselves shaping new tools or expressive forms can—and should—work to make sure that the rising generation of scholars has the opportunity and the institutional space to experiment with digital media. In addition to funding and professionally sanctioned forums for expression, there needs be space for this in the graduate curriculum. The digital pioneers present in this conversation—and the much-missed Roy Rosenzweig—have made it very easy for others to introduce themselves and their students to the field. Check out their online syllabi; you might well be able to add an “Introduction to History and the New Media” to your institution's roster of methods courses.

** Review
:PROPERTIES:
:CUSTOM_ID: review-1448
:END:
- 4 blocks
- [[https://github.com/DigitalHistory/assignment-00-git-and-github][Assignment 0 is online]]
- If you haven't started Assignment 1, hold on for now
- Explaining Git
** Today
:PROPERTIES:
:CUSTOM_ID: today-abcd
:END:
- Concept of the "Public Sphere"
- Internet and Habermas's conception
- Discussion
- more Git
- Brief HTML explication
- HTML Exercise
#+BEGIN_NOTES
Phrase "Technical Affordance"
#+END_NOTES
** Significance and Signification 
:PROPERTIES:
:CUSTOM_ID: significance-and-signification-4ace
:END:
- What /matters/ about the web?
- /How does the web/ create and change meaning?

#+BEGIN_NOTES
- *Significance:* what is its importance?
- *Signification:* how does the web introduce or trransform meaning? 
#+END_NOTES
*** What matters about the web?
:PROPERTIES: 
:STEP: t
:HTML_CONTAINER_CLASS: slide
:CUSTOM_ID: what-matters-about-the-web?-944f
:END:

Web has had enormous effects
#+ATTR_REVEAL: :frag (appear appear appear appear appear)
  - economic
  - political
  - cultural
  - *but I want to talk about* */discursive/*
  - does the web change what /kinds of conversations/ we can have?
    - for the better, or for the worse?
#+BEGIN_NOTES
- "peculiar :technical affordances"  of this technological system
  - tech systems make some things possible & other things impossible. Or, at lease: some thing *easy* and other things *very difficult*.
  - ex: chainsaw vs. jigsaw. Table saw vs. Band saw.  Pencil vs. pen.  
#+END_NOTES
** Part I: The Public Sphere
:PROPERTIES:
:CUSTOM_ID: part-i:-the-public-sphere-4b49
:END:
*** Authenticity in a media age
:PROPERTIES:
:CUSTOM_ID: authenticity-in-a-media-age-9bf8
:END:
#+CAPTION: Jürgen Habermas
#+ATTR_HTML: height="200px" width="300px" align="center"
[[http://upload.wikimedia.org/wikipedia/commons/4/4d/JuergenHabermas.jpg]]

*** Mid-century anxiety
:PROPERTIES:
:CUSTOM_ID: mid-century-anxiety-a1d1
:END:
#+ATTR_REVEAL: :frag appear
- Appearance of new media (radio, TV, new kinds of magazine)
- Are these "degraded"?
- Do the media make us stupider?
- Less critical?
- More pliable?

*** Reasons to worry
:PROPERTIES:
:CUSTOM_ID: reasons-to-worry-7254
:END:
#+ATTR_HTML: :class paired
https://upload.wikimedia.org/wikipedia/commons/6/67/Bundesarchiv_Bild_102-17049%2C_Joseph_Goebbels_spricht.jpg
#+ATTR_HTML: :class paired
https://upload.wikimedia.org/wikipedia/en/8/86/EwigerJudeFilm.jpg
#+ATTR_REVEAL: :frag appear
- maybe there are /material conditions/ that make this sort of evil possible?
- perhaps the media of communication have a role?  

*** The Public Sphere
:PROPERTIES:
:CUSTOM_ID: the-public-sphere-d6c3
:END:
#+BEGIN_QUOTE
A portion of the public sphere comes into being in every conversation in which private individuals assemble to form a public body.

  -- J. Habermas

#+END_QUOTE

#+BEGIN_NOTES

Habermas wants us to believe in the reality of the "public sphere", as a /discursive body/ composed of /conversations/ that have /a certain form/
#+END_NOTES
*** Jürgen Habermas (b. 1929)
:PROPERTIES:
:CUSTOM_ID: jürgen-habermas-(b.-1929)-0ad4
:END:
- pre-eminent German public intellectual of 1960's and 1970's
- role of Holocaust/Fascism in all his thinking
- inheritance from the Frankfurt School
- search for "authentic" forms of communication
*** Concept of the Public Sphere
:PROPERTIES:
:HTML_CONTAINER_CLASS: slide
:CUSTOM_ID: concept-of-the-public-sphere-9b21
:END:

#+BEGIN_QUOTE
By "the public sphere" we mean... a realm of our social life in which something approaching public opinion can be formed... *Citizens behave as a public body when they confer in an unrestricted fashion* -- that is, with the guarantee of freedom of assembly and association and the freedom to express and publish their opinions -- *about matters of general interest.* (Habermas 1964, p.49[p.2])
#+END_QUOTE
#+BEGIN_NOTES
Unpacking:
- *"something approaching public opinion":* suggests that "public opinion" has a technical meaning
- *Conferring in an unrestricted fashion*: the public sphere *requires* a certain kind of freedom
- *Matters of general interest*: we're not talking about breakfast, jeans, or lipstick.  
#+END_NOTES

** Public and Private
:PROPERTIES:
:CUSTOM_ID: public-and-private-f483
:END:
#+ATTR_HTML: :class "smalltable"
| Public                               | Private                         |
|--------------------------------------+---------------------------------|
| open to all                          | restricted                      |
| accessible for money                 | closed even if you can pay      |
| state-related                        | non-state, civil society        |
| political                            | non-political                   |
| official                             | non-official                    |
| common                               | special                         |
| impersonal                           | personal                        |
| national or popular                  | group, class, or locale         |
| international/universal              | particular/finite               |
| in view of others                    | concealed                       |
| outside the home                     | domestic                        |
| circulated in print/electronic media | circulated orally/in manuscript |
| known widely                         | known only to a few             |
| acknowledged/explicit                | tacit/implicit                  |

#+BEGIN_NOTES
- many definitions
- not all of them part of Habermas's terminology
#+END_NOTES
** Concept of the Public Sphere
:PROPERTIES:
:STEP: 1
:CUSTOM_ID: concept-of-the-public-sphere-3013
:END:
*Strukturwandlung der Öffentlichkeit (1962)*
#+ATTR_REVEAL: :frag (none none none appear appear appear appear)
- Arena ruled by rational argument 
- Freedom of expression prevails (/...an unrestricted fashion/)
- Conversations concern /common interests/ (e.g. ?)
- both *ideal* and *historical*
- arises first in 18th Century
- flourishes and then withers in 19th
- at a nadir in 20th; can it be revived?
#+BEGIN_NOTES
Habermas's /Habilitation/ and first important book.  but 35 years old!!
#+END_NOTES
** Before Bourgeois Society
:PROPERTIES:
:CUSTOM_ID: before-bourgeois-society-dd7b
:END:
- There is no "Public Sphere"
- Instead there are "Public Individuals" with certain powers
  - and Church authorities, empowered to speak on moral matters
- Opposed to these are "private persons"
#+BEGIN_NOTES
Begin the historical story w/ the classic trnasition to a bourgeois/capitalist society around 1800.  
- before this point, not public sphere, just public individuals, who are distinct from 'private persons"
#+END_NOTES
*** Private and Public Persons
:PROPERTIES:
:CUSTOM_ID: private-and-public-persons-f0ec
:END:
#+BEGIN_QUOTE
A private person has no right to pass /public/ and perhaps even disapproving judgement on the actions, procedures, laws, regulations, and ordinances of sovereigns and courts.... or to publish in print pertinent reports that he manages to obtain.  *For a private person is not at all capable of making such judgment*, because he lacks complete knowledge of circumstances and motives.

  -- Frederick 'the Great' of Prussia, 1784
#+END_QUOTE
#+BEGIN_NOTES
"Private" and "Public" distinguish /types of person/, not types of activity. 
#+END_NOTES
** 18th Century Origins
:PROPERTIES:
:CUSTOM_ID: 18th-century-origins-265c
:END:
- How do we get from a monarchy in which only 'public persons' have license to speak on 'public matters', to a 'public sphere' which is opened more widely?
#+ATTR_REVEAL: :frag appear
- Rise of newspapers/journals. Intrusion of private commentary on 'public' matters
  - a new kind of /media/
- rise of /salons/ & coffee houses.
  - a new kind of /sociality/.  
*** Salons and Coffee Houses
:PROPERTIES: 
:HTML_CONTAINER_CLASS: slide
:CUSTOM_ID: salons-and-coffee-houses-4538
:END:

#+ATTR_HTML: :style float:left; max-height:400px;
https://upload.wikimedia.org/wikipedia/commons/1/17/17th_century_coffeehouse_england_1-580x400.jpg
#+ATTR_HTML:  style="vertical-align:top;" width="40%" float="left"
[[http://cabinetmagazine.org/issues/8/assets/images/main/coffeehouse.jpg]]
*** Salons and Coffee Houses
:PROPERTIES: 
:HTML_CONTAINER_CLASS: slide
:CUSTOM_ID: salons-and-coffee-houses-151f
:END:
- /Salons/ as the heart of intellectual activity in c. 18
  - 'monopoly on first publication'
  - mixing of classes
  - freedom from patronage
- Coffee Houses a similar space
  - But no restrictions on topics of discourse
  - matters of /politics/ as frequent a topic as art
- an ideal of /common humanity/ esp. in coffee houses
  - opinions judged by reason alone
    - no intrusion of 'distinction' /or/ finance
  - [ *but note:* imperfection of this vision ]
#+BEGIN_NOTES
one of the longstanding critiques of Habermas is the /actual/ restrictiveness of coffee houses /in real life/.  Who's excluded? make a list: women, the truly poor, non-Europeans, the uneducated (to some extent), 
#+END_NOTES
*** Circulation
:PROPERTIES: 
:HTML_CONTAINER_CLASS: slide
:CUSTOM_ID: circulation-d616
:END:
- Communication across broad spaces & differences needs something more than conversation
- need a way get ideas to large numbers
  - news sheets \rarr newspapers
  - letters \rarr journals

*** Markets
:PROPERTIES: 
:STEP: t
:HTML_CONTAINER_CLASS: slide
:CUSTOM_ID: markets-ec75
:END:
- Through newspapers & journals conversation becomes a /commodity/
- Therefore it loses its exclusivity
- so, in the beginning, /commodification is a *good thing*/
#+BEGIN_NOTES
This process of commodification, and its trasformation from a *positive, welcome* force in to a *troubling, destructive* one is central to H but is not just his idea.
#+END_NOTES
** The State vs. Society
:PROPERTIES:
:CUSTOM_ID: the-state-vs.-society-4420
:END:
- This is all happening in a pre-democratic era (mostly)
- 'The People' are /a problem/ for the state
- growth of 'the social' a threat to sovereignty
- 'public sphere' precarious and subject to dissolution
*** The Structure of the Public Sphere
:PROPERTIES: 
:STEP: t
:HTML_CONTAINER_CLASS: slide
:CUSTOM_ID: the-structure-of-the-public-sphere-3d98
:END:

#+ATTR_HTML: border="2" rules="all" frame="all"
| Private Realm                                     | Public Sphere                        | Sphere of Public Authority |
|---------------------------------------------------+--------------------------------------+----------------------------|
| Civil Society (Commodity Exchange, social labour) | Political Public Sphere              | State                      |
| Conjugal Family                                   | Literary/Philosophical Public Sphere | Court                      |


- /the public sphere sits between Private Life and Authority, striving for independence from both/
- it *mediates* between them and draws its legitimacy from its use of reason
- note that it *presupposes* an emergent realm of "privacy" -- and so, it is grounded in that notion, like all liberal philosophical constructs
** From Debate to Consumption
:PROPERTIES:
:CUSTOM_ID: from-debate-to-consumption-2369
:END:
- Public Sphere in effect /undoes itself/
- success of media dissolves the reciprocal creation & communication of ideas
  - instead we just /consume/
  - /reason/ begins to vanish
- Massive growth of media in c.20
  - radio, television, film
- The Public Sphere: A Hollow Shell?
  - Where is its legitimacy?

** Reception
:PROPERTIES:
:CUSTOM_ID: reception-d9f8
:END:
- extremely influential
- with some questions about both the /historical/ and the /philosophical/ elements of the story.
*** Counterpublics
:PROPERTIES:
:CUSTOM_ID: counterpublics-8f8c
:END:
#+BEGIN_QUOTE
...some publics are defined by their tension with a larger public... Discussion with such a public is understood to *contravene the rules obtaining in the world at large*... This kind of public is, in effect, a *counterpublic*: it maintains at some level... an awareness of its subordinate status.
  -- M. Warner (2002)
#+END_QUOTE

*** One or Many?
:PROPERTIES:
:CUSTOM_ID: one-or-many?-f97b
:END:
- Habermas sees Public Sphere as *necessarily unitary*
- But discourse carves out separate spaces
  - that may correlate with social divides
  - ... and where the addressee ("stranger") is presumed to share a *common subordination* with the speaker
- ("Given the fact that almost anyone can contribute to public discourse, the multiplicity of perspectives makes it even more difficult to define public opinion. Any designation of public opinion then becomes arbitrary")

*** Disinterested or embodied?
:PROPERTIES:
:CUSTOM_ID: disinterested-or-embodied?-9ff3
:END:
- for Habermas *separation* of individual from *both* "accidental" circumstances *and* official capacities is paramount
- Warner:  This is fictive
  - and anyway undesirable
    - because some kinds of "argument" are fundamentally corporeal
    - this doesn't make them less legitimate
    - does it?  

*** Reading or Acting
:PROPERTIES:
:CUSTOM_ID: reading-or-acting-3a57
:END:
- Habermas:  the actions of a legitimate public sphere are actions of reading (scrutinize, judge, decide)
- Warner: in a counterpublic, there may be other sorts of actions (prance, diss, act up, fantasize, mourn)

**  How this matters for History
:PROPERTIES:
:CUSTOM_ID: how-this-matters-for-history-d592
:END:
- If there are many "publics", then working to carve out a particular space for discourse can have salutary effects
- Modes of address and standards of comportment can differ across 'publics'
- May even be possible to craft a 'public' around our work.
  - though " it follows that the public exists only as long as the text is being engaged with"

*** Enter the Internet
:PROPERTIES:
:CUSTOM_ID: enter-the-internet-ab5f
:END:
- Habermas' theory revolves around a *technology* and a *social institution*
  - enabled by print, threatened by TV
  - can the Internet undo this dissolution?  If so, how?
  - if not, is it the apotheosis of that dissolution?

*** Digital History and the Public Sphere
:PROPERTIES:
:CUSTOM_ID: digital-history-and-the-public-sphere-5a06
:END:
- Does the Internet provide a space for authentic /public/ conversatoin?
- What are effects of the /medium/ on /how we pursue knowledge and truth/?
#+ATTR_REVEAL: :frag appear
  - *state and corporate pressures*
  - algorithmic actors (!)

*** Technical Affordances of the web
:PROPERTIES:
:CUSTOM_ID: technical-affordances-of-the-web-503d
:END:
- instantaneous distribution
- distributed production
- machine-readable text
- algorithmic sorting
#+BEGIN_NOTES
All of these are present in *every* web-based communication.  But realms of the web have distinct affordances of their own: [[http://www.reddit.com][Reddit]] \ne [[http://twitter.com][twitter]] \ne [[http://www.facebook.com][facebook]] \ne [[http://nytimes.com][The New York Times]]
#+END_NOTES
*** Group Work
:PROPERTIES:
:CUSTOM_ID: exercise-81e3
:END:
- Groups of ~3
- Pro- and Anti-
- 3 strongest arguments for/against Internet as an "authentic" public sphere

** Machine-readable Text
:PROPERTIES:
:CUSTOM_ID: machine-readable
:END:
On the web, text is "Marked up" 
#+BEGIN_SRC html
  <html>
    <head>
      <meta name="keywords" content="HTML,CSS,XML,JavaScript">
      <title>HTML Example</title>
    </head>

    <body>
      <h1>This is the heading</h1>
      <p>
        This is a paragraph. It can contain <i>further markup</i> and also 
        <a href="http:/some.where.com">more complex content</a>.
      </p>
      <aside>
        Sometimes you will see <i>semantic</i> tags, like "aside",
        "header", "footer", "article", or "section".  
      </aside>
    </body>
  </html>
#+END_SRC
*** Machine-readable Text
:PROPERTIES:
:CUSTOM_ID: machine-readable-text-2a02
:END:
#+BEGIN_EXPORT html
      <h1>This is the heading</h1>
      <p>
        This is a paragraph. It can contain <i>further markup</i> and also 
        <a href="http:/some.where.com">more complex content</a>.
      </p>
      <aside>
        Sometimes you'll see <i>semantic</i> tags, like "aside",
        "header", "footer", "article", or "section".  
      </aside>

#+END_EXPORT

*** Consequences
:PROPERTIES:
:CUSTOM_ID: consequences-5b9c
:END:
- Programs can scan this text, interpret it...
- then treat it as /data/ which can be combined, analyzed, etc.
#+ATTR_REVEAL: :frag appear
- point of learning HTML is
#+ATTR_REVEAL: :frag appear
  - Understand how to achieve a certain "look"
  - Understand how a complex computer algorithm might treat it as "data".

*** Tag Structure
:PROPERTIES:
:CUSTOM_ID: tag-structure-6119
:END:
#+BEGIN_SRC html
<tag att1="value1" att2="value2">content</tag>
<p class="normal" align="right">Paragraph Content</p>
<a href="http://www.google.com">Link to google</a>
<img src="http://1.bp.blogspot.com/-CzqzzBV2tMk/TxBM3ar18MI/AAAAAAAAPm0/6faLPO9BM8w/s1600/i-can-has-cheezburger.jpg" title="I can Haz Cheezburger?" alt="greedy cat saying 'I can haz cheezburger?'" />
#+END_SRC
tags:
- tag identifier
- attributes
- content
*** A Few HTML tags you should know
:PROPERTIES:
:CUSTOM_ID: a-few-html-tags-you-should-know-4481
:END:
- ~<html></html>~ :: Opens/closes every page
- ~<head></head>~ and ~<body></body>~ :: two main sections for metadata and display
- ~<p></p>~ :: basic paragraph unit
- ~<a href="http://link.address"></a>~ :: The essential [[http://link.address][hyperlink]] tag that makes the web what it is
- ~<img src="http://file.location" alt="text to display for non-visual browsers/viewers"/>~ :: "self-closing" image display tag
- ~<blockquote></blockquote>~ :: semantic tag distinguishing quoted text
- ~<div></div>~ :: often-invisible tag that divides page into "divisions"
- ~<em></em> <strong></strong>,  <i></i> <b></b>~ :: /emphasized/ and *strong* text
- ~<ol>~, ~<ul>~, ~<li>~ :: building "ordered" and "unordered" lists
- ~<table>~, ~<tr>~, ~<th>~, ~<td>~ :: building tables (don't overuse!)
*** Group Work 2:  HTML, continued
:PROPERTIES:
:CUSTOM_ID: group-work-2:--html,-continued-03e2
:END:
Let's continue our introduction to HTML via JSBin: 
- click here: http://jsbin.com/utinoz/27/edit?html,output
- You can also *download the excercse* [[https://github.com/titaniumbones/HabermasCode][at the Github Repository]]
#+BEGIN_NOTES
Here you can see the all parts of the page in different panes.  try to add:
- images
- lists
- real links
- anything else you can think of 
Try to keep it "real", and work as *teams*, with one person driving, and the other person looking stuff up on another computer.  
#+END_NOTES
*** HTML to Markdown
:PROPERTIES:
:CUSTOM_ID: html-to-markdown-69a5
:END:
Writing in HTML is distracting and time-consuming!
- HTML for publication, but
- *Markdown* for writing
  - convenient shorthand for HTML which we will often use in class
*** Markdown cheatsheet
:PROPERTIES:
:CUSTOM_ID: markdown-cheatsheet-eb13
:END:
- ~_emphasis~ and ~__strong__~ :: single "_" or "*" surrounding words for /ital/, double for *bold*, triple for */bold ital/*
- > for blockquotes :: just preface your paragraph with an angle bracket and one space to get a quote
- Separate paragraphs with an empty line ::
- headings start with one or more "#" ::
- horizontal lines with ---- :: but be sure to keep one empty line above and below, or will be interpreted differently
- links with [Link Text](http://link.address) ::
- images with ![Alt Text](http://path.to.image) :: 

Practice Markdown [[http://jsbin.com/sopemef/edit?html,output][on this similar but subtly different page]], or edit `index.md` in atom.  

* COMMENT 03: Abundance & Openness              
:PROPERTIES:
:EXPORT_FILE_NAME: 03-1-abundance-and-opennness
:EXPORT_TITLE: Abundance and Openness
:CUSTOM_ID: 03:-abundance-&-openness-2a2e
:END:
** COMMENT Notes
:PROPERTIES:
:CUSTOM_ID: comment-notes-891e
:END:
- Abundance.  Have some examples, talk about *real history*
- Openness.  Github, e.g.
- Search engines. Algorithms.  curation.  
- Lab: list of websites to evaluate.  This will require *prep*
http://adamcrymble.org/intro-to-digital-history-2015/#week2 
**  War is Peace. @@html:<br/>@@Freedom is Slavery. @@html:<br/>@@Ignorance is Strength.
:PROPERTIES:
:CUSTOM_ID: war-is-peace
:END:
** Recap
:PROPERTIES:
:CUSTOM_ID: recap-53d2
:END:
- "Public sphere" at a turning point
- Transformation by automated agents and encoded text

*** Plan for the day
:PROPERTIES:
:CUSTOM_ID: plan-for-the-day-b6ce
:END:
- Lecture
- Discussion: how do *you* respond to information abundance?
- post-class period *ONLY* for students who *failed the tests, or did not receive a mark* 
** History in the age of scarcity
:PROPERTIES:
:CUSTOM_ID: history-in-the-age-of-scarcity-3970
:END:
#+BEGIN_QUOTE
The members of prehistoric societies did not think they lived in prehistoric times. They merely lacked a good preservation medium. (Auerbach, quoted in Rosenzweig)
#+END_QUOTE

#+BEGIN_NOTES 
- lots was going on, lots of continuity, lots *we will never know* b/c oral preservation is *terrible* at outliving a cultural tradition
#+END_NOTES

*** Scarcity
:PROPERTIES:
:CUSTOM_ID: scarcity-184c
:END:
#+ATTR_REVEAL: :frag (appear appear appear)
- Historically, very little recorded
- Even less /preserved/
- historian's task was to /locate rare sources/ in faraway places

*** Implications
:PROPERTIES:
:CUSTOM_ID: implications-1db9
:END:
#+ATTR_REVEAL: :frag (appear appear appear)
- History skewed to /those whose records appeared worth saving/
- record /always/ fragmentary
  - Historian free to fill in gaps
- BUT: often possible to read /large percentage/ of relevant sources

** Age of Abundance
:PROPERTIES:
:CUSTOM_ID: age-of-abundance-7ddc
:END:
#+BEGIN_QUOTE
Tentative efforts are afoot to preserve our digital cultural heritage. If they succeed, historians will face a second, profound challenge–what would it be like to write history when faced by an essentially complete historical record? (Rosenzweig)
#+END_QUOTE

#+BEGIN_NOTES 
- completely different situation than we used to have!
#+END_NOTES
*** Abundance
:PROPERTIES:
:CUSTOM_ID: abundance-6257
:END:
#+ATTR_REVEAL: :frag (appear appear appear)
- *much* more recorded than in the past
- *vastly more* preserved, at least for now
- increasing percentage of historical works as well

*** Mechanical Speech
:PROPERTIES:
:CUSTOM_ID: mechanical-speech-c3b6
:END:
- auto-preservation
- but by and for whom?

#+BEGIN_NOTES 
Google, FB, and Twitter are preserving lots of data.  As are Tesla and Samsung. But who wil lget to see it? How does a historian compete?
#+END_NOTES
*** Problems of Preservation
:PROPERTIES:
:CUSTOM_ID: problems-of-preservation-29ba
:END:
- physical media
- software turnover & bitrot
- capturing dynamic/interactive media
#+BEGIN_NOTES 

#+END_NOTES
*** What big data means for old documents
:PROPERTIES:
:CUSTOM_ID: what-big-data-means-for-old-documents-608a
:END:
#+BEGIN_QUOTE
digitization does provide scale (or quantity) but does so at the price of rich, largely manual encoding. Visualization, customization, personalization, and similar analytical services increasingly familiar to us depend upon born-digital objects in which a great deal of structural and semantic knowledge has been encoded. The information captured on page images is, by contrast, implicit and often not directly accessible to the machines that will be always their first, often their only, and arguably their most important readers. (CILR)
#+END_QUOTE


*** Can we tell stories? Can we do research?
:PROPERTIES:
:CUSTOM_ID: can-we-tell-stories?-can-we-do-research?-269a
:END:
#+ATTR_REVEAL: :frag (appear)
- no longer possible to read everything!
  - who will read it for us? How will we be experts? Can we automate our reading?
- Narrative form ill-suited to massive quantities of data
  - can we develop new types of narratives?
- Big questions may be answerable!
  - What used to be pure speculation, can perhaps now be made more concrete and compelling
    - How does role of religion in public discourse change over time?
    - how do railroads impact social and economic development?
    - others?
** The Preservation Challenge
:PROPERTIES:
:CUSTOM_ID: the-preservation-challenge-0188
:END:
http://mediad.publicbroadcasting.net/p/shared/npr/styles/x_large/nprshared/201701/510243425.jpg
*** and this
:PROPERTIES:
:CUSTOM_ID: and-this-505a
:END:
#+ATTR_HTML: :class paired
http://motherboard-images.vice.com//content-images/contentimage/no-id/1484933328844565.png
#+ATTR_HTML: :class paired
http://motherboard-images.vice.com//content-images/contentimage/no-id/1484933375405914.png
*** and this too
:PROPERTIES:
:CUSTOM_ID: and-this-too-1e8f
:END:
[[./Images/trump-epa-changes.png]]
*** Remind you of anything?
:PROPERTIES:
:CUSTOM_ID: remind-you-of-anything?-74b2
:END:
#+BEGIN_QUOTE
The Party said that Oceania had never been in alliance with Eurasia. He, Winston Smith, knew that Oceania had been in alliance with Eurasia as short a time as four years ago. But *where did that knowledge exist? Only in his own consciousness, which in any case must soon be annihilated.* And if all others accepted the lie which the Party imposed -if all records told the same tale -- *then the lie passed into history and became truth*. 'Who controls the past,' ran the Party slogan, 'controls the future: who controls the present controls the past.' And yet the past, though of its nature alterable, never had been altered. Whatever was true now was true from everlasting to everlasting. It was quite simple. All that was needed was an unending series of victories over your own memory. 'Reality control', they called it: in Newspeak, 'doublethink'.
#+END_QUOTE

*** Remind you of anything?
:PROPERTIES:
:CUSTOM_ID: remind-you-of-anything?-f5fc
:END:

#+BEGIN_QUOTE
Winston sank his arms to his sides and slowly refilled his lungs with air. His mind slid away into the labyrinthine world of doublethink. To know and not to know, to be conscious of complete truthfulness while telling carefully constructed lies, to hold simultaneously two opinions which cancelled out, knowing them to be contradictory and believing in both of them, to use logic against logic, to repudiate morality while laying claim to it, to believe that democracy was impossible and that the Party was the guardian of democracy, to forget whatever it was necessary to forget, then to draw it back into memory again at the moment when it was needed, and then promptly to forget it again: and above all, to apply the same process to the process itself. That was the ultimate subtlety: consciously to induce unconsciousness, and then, once again, to become unconscious of the act of hypnosis you had just performed. Even to understand the word 'doublethink' involved the use of doublethink. 
#+END_QUOTE
*** Everything.gov
:PROPERTIES:
:CUSTOM_ID: everything.gov-09b5
:END:
- Archive Everything
- Write the query tools
- "genome project" for government data
** Openness
:PROPERTIES:
:CUSTOM_ID: op-enness-0724
:END:
#+BEGIN_QUOTE
...ideas that were more-or-less serviceable in the world before networked computers... are now up for debate.  The emergence of new rights regimes (such as *open access, open content and open source*) and the explosion of new information are manifestations of these changing costs. (Turkel)
#+END_QUOTE
*** Ideals of openness
:PROPERTIES:
:CUSTOM_ID: ideals-of-openness-cb72
:END:

#+begin_paired
[[file:~/DH/Images/louvre-jean-baptiste-greuze-la-lecture-de-la-bible.jpg]]
#+end_paired
#+begin_paired
[[file:~/DH/Images/jos-wri-airpump.jpg]]
#+end_paired

- rooted in Enlightenment
- at the foundation of scholarship
- yet, not manifest in our scholarly journals & publishing regimes
*** Jefferson on Freedom of Information
:PROPERTIES:
:CUSTOM_ID: jefferson-on-freedom-of-information-bd14
:END:
#+BEGIN_QUOTE
 It would be curious then, if an idea, the fugitive fermentation of an individual brain, could, of natural right, be claimed in exclusive and stable property. If nature has made any one thing less susceptible than all others of exclusive property, it is the action of the thinking power called an idea, which an individual may exclusively possess as long as he keeps it to himself; but *the moment it is divulged, it forces itself into the possession of every one,* and the receiver cannot dispossess himself of it. Its peculiar character, too, is that no one possesses the less, because every other possesses the whole of it. He who receives an idea from me, receives instruction himself without lessening mine; as he who lights his taper at mine, receives light without darkening me. *That ideas should freely spread from one to another over the globe, for the moral and mutual instruction of man, and improvement of his condition, seems to have been peculiarly and benevolently designed by nature, when she made them,* like fire, expansible over all space, without lessening their density in any point, and like the air in which we breathe, move, and have our physical being, incapable of confinement or exclusive appropriation. Inventions then cannot, in nature, be a subject of property.
#+END_QUOTE
*** the web as open space
:PROPERTIES:
:CUSTOM_ID: the-web-as-open-space-e7e9
:END:
- Origins of Web wrapped up in ideologies of Freedom
#+BEGIN_QUOTE
"Information wants to be free - because it is now so easy to copy and distribute casually - and information wants to be expensive - because in an Information Age, nothing is so valuable as the right information at the right time. (Brand, ca. 1984)

When information is generally useful, redistributing it makes humanity wealthier no matter who is distributing and no matter who is receiving. (Stallman, ~1990, quoted by Dening)
#+END_QUOTE
- but different freedoms compete
- "walled gardens" vs /open access/
- Struggles only intensifying, with battle lines not quite stable
  - net neutrality
  - the Facebook problem
  - Digital Public Library of America
  - archive.org
** Summary
:PROPERTIES:
:CUSTOM_ID: summary-8c37
:END:
- Information Abundance comes with many challenges
- Preservation
- Interpretation
- Access

Future of the web and of historical scholarship depends on /continued struggle/ over these contested values.
* COMMENT Notes on papers 
- use markdown markup
- inline images instead of links
- avoid smart quotes, etc. 
* COMMENT 05: Distant Reading 2                                    
:PROPERTIES:
:EXPORT_FILE_NAME: 05-distant-reading-2
:EXPORT_TITLE: Distant Reading II
:CUSTOM_ID: 05:-distant-reading-2-58b8
:END:
** Recap
:PROPERTIES:
:CUSTOM_ID: recap-d952
:END:
#+ATTR_REVEAL: :frag (appear appear appear)
- Openness in Historical Perspective
- "Abstract Models" in Moretti
  - /distance/ from text
  - /patterns/ across genres, time, space
- intro to JS

** Graphs
:PROPERTIES:
:CUSTOM_ID: graphs-70bf
:END:
#+ATTR_HTML: :style float:left;
[[https://seeingcomplexity.files.wordpress.com/2011/02/william_playfair_graph.jpg]]
#+ATTR_HTML: :style float:left;
#+ATTR_REVEAL: :frag (appear appear appear appear)
- /condense/ data
- /conceptualize/ mathematically
- /convince/ readers
- a fundamentally *rhetorical* tool
*** Moretti's Graphs
:PROPERTIES:
:CUSTOM_ID: moretti's-graphs-68bd
:END:
http://newleftreview.org/static/assets/images/2580501large.gif
#+BEGIN_QUOTE
Quantitative research provides a type of data which is ideally independent of interpretations. (p.9)
#+END_QUOTE
- yet, the graph is an argument:  rise, fall, rise
*** A History of Readers
:PROPERTIES:
:CUSTOM_ID: a-history-of-readers-7e72
:END:
[[http://sandbox.hackinghistory.ca/assets/images/DH/three-rises-novel-colored.gif]]
- each phase a new "kind" of reader
- intensive, extensive, generic
*** Cycles
:PROPERTIES:
:CUSTOM_ID: cycles-3686
:END:
#+BEGIN_QUOTE
Event, cycle, /longue durée/: three time frames which have fared very unevenly in literary studies.

... cycles constitute /temporary structures within the historical flow./ (p.14)
#+END_QUOTE
- *event \rarr close reading*
- *longue durée \rarr grand narrative*
- *cycle \rarr ?*
*** Cycles in Literature
:PROPERTIES:
:CUSTOM_ID: cycles-in-literature-f456
:END:
[[http://sandbox.hackinghistory.ca/assets/images/DH/genres-colored.gif]]
#+BEGIN_QUOTE
A genre exhausts its potentialities... when its inner form is no longer capable of representing the most significant aspects of contemporary reality. (p. 17, fn 7)
#+END_QUOTE
*** Genre & Generation
:PROPERTIES:
:CUSTOM_ID: genre-&-generation-5762
:END:
#+BEGIN_QUOTE
... some kind of generational mechanism seems the best way to account for the regularity of the novelistic cycle... (p. 22)
#+END_QUOTE
- "Normal literature"
- but "revolution" as "dying out"
*** From "the shift" to "a shift"
:PROPERTIES:
:CUSTOM_ID: shift-4356
:END:
http://newleftreview.org/static/assets/images/2580512large.gif
#+BEGIN_QUOTE
...the point is not who prevails in this or that skirmish, but exactly the opposite: no victory is ever definitive... the form keeps oscillating back and forth between the two groups. (p.29)
#+END_QUOTE
*** Moretti's method
:PROPERTIES:
:CUSTOM_ID: moretti's-method-dbf4
:END:
#+BEGIN_QUOTE
...the real point here... is the total /heterogeneity of problem and solution:/ to make sense of quantitative data, I had to abandon the quantitative universe, and turn to morphology: evoke form, in order to explain figures.
#+END_QUOTE
- how justified is this move?
- what do we learn from it? 
** COMMENT Maps
:PROPERTIES:
:CUSTOM_ID: maps-59e4
:END:
#+BEGIN_QUOTE
There is a very simple question about literary maps: what exactly do they /do/?
#+END_QUOTE
- like graphs, maps are a /persuasive tool/
- What does it mean to "map" a novel?
*** What is a map?
:PROPERTIES:
:CUSTOM_ID: what-is-a-map?-44e9
:END:
#+ATTR_HTML: :style float:left; max-height:320px;
http://www.socialresearchmethods.net/research/epp2/15.gif
#+ATTR_HTML: :style float:left; max-height:320px;  max-width:49%
http://theexpertsagree.files.wordpress.com/2009/06/tokyorail.jpg
#+ATTR_HTML: :style float:left; max-height:320px; max-width:49%
http://www.fubiz.net/wp-content/uploads/2013/07/am1.jpg
*** What is a map?
:PROPERTIES:
:CUSTOM_ID: what-is-a-map?-6c3d
:END:
#+ATTR_REVEAL: :frag (appear appear appear appear)
- abstract
- visual
- representation
- of a physical or imagined space
*** Moretti's method
:PROPERTIES:
:CUSTOM_ID: moretti's-method-ddd7
:END:
#+ATTR_HTML: :style float:left; max-width:49%
http://www.newleftreview.org.myaccess.library.utoronto.ca/assets/images/2600502large.gif 
#+ATTR_HTML: :style float:left; max-width:49%
http://www.newleftreview.org.myaccess.library.utoronto.ca/assets/images/2600511large.gif
#+BEGIN_QUOTE
The form of an object is a 'diagram of forces', in this sense, at least, that from it we can... deduce the forces that ... have acted upon it. (p.57)
#+END_QUOTE
*** /Our Village/
:PROPERTIES:
:CUSTOM_ID: /our-village/-c56c
:END:
#+BEGIN_QUOTE
In the 1824 volume... the vilage was the undisputed centre of the surrounding countryside: the centripetal effects of the force "from within" were omnipresent, while the force "from without" was nowhere to be seen. (p. 57)

Two collections later, in 1828, the village's gravitation field is already weaker...  Something is wrong with the force from within, but as no counter-force challenges it yet, the basic pattern... remains in place.  But by 1832... the village's centripetal force is reduced to nothing, and the bulk of the book moves away... (p. 58-59)
#+END_QUOTE
*** /Our Village/ -- Extremes
:PROPERTIES:
:CUSTOM_ID: /our-village/----extremes-3f27
:END:
#+ATTR_HTML: :style float:left; max-height:400px; max-width:49%
http://www.newleftreview.org.myaccess.library.utoronto.ca/assets/images/2600502large.gif 
#+ATTR_HTML: :style float:left; max-height:400px; max-width:49%
http://www.newleftreview.org.myaccess.library.utoronto.ca/assets/images/2600512large.gif
*** Modelling the text
:PROPERTIES:
:CUSTOM_ID: modelling-the-text-1363
:END:
- *reduce* text to the model
- *presume* that sociological factors are determinative
- *sustain* focus on form ("a quantitative history of literature is also a profoundly formalist one" -p.25, fn 14)
- *interpret* model in light of theories

** Today: Trees
:PROPERTIES:
:CUSTOM_ID: today:-trees-66d5
:END:
#+ATTR_HTML: :style float:left; max-width:49%;
https://upload.wikimedia.org/wikipedia/commons/1/10/Darwin_Tree_1837.png
#+ATTR_HTML: :style float:left; max-width:49%;
https://upload.wikimedia.org/wikipedia/commons/4/4e/Darwins_tree_of_life_1859.png
*** Moretti's Evolutionism
:PROPERTIES:
:CUSTOM_ID: moretti's-evolutionism-251f
:END:
- Citations: Darwin, Feldman, Cavalli-Sforza
- In his genealogy: Karl Marx; H. G. Wells; E. O. Wilson; all of evolutionary psychology
*** Plots
:PROPERTIES:
:CUSTOM_ID: plots-525b
:END:
http://newleftreview.org.myaccess.library.utoronto.ca/static/assets/images/2620303large.gif
**** Clues as /evolved/ phenomenon
:PROPERTIES:
:CUSTOM_ID: clues-as-/evolved/-phenomenon-baf4
:END:
- Doyle as /canonical starting point/ for detective fiction
- But has a context; how to describe?
- note: /not/ a personal context!
*** Styles
:PROPERTIES:
:CUSTOM_ID: styles-4fc2
:END:
https://nplusonemag.com/wp-content/uploads/2014/04/moretti-2.jpg
**** Free Indirect Style
:PROPERTIES:
:CUSTOM_ID: free-indirect-style-4a25
:END:
#+BEGIN_QUOTE
A peculiar mix of indirect and direct discourse, which draws the verbal tenses and pronouns from the former, and the tone and the order of the sentence from the latter:

It was the abode of noise, disorder, and impropriety. Nobody was in their right place, nothing was done as it ought to be. She could not respect her parents, as she had hoped. 
#+END_QUOTE
**** Why FIS?
:PROPERTIES:
:CUSTOM_ID: why-fis?-eefc
:END:
- appears to mark a major social transformation ("halfway btwn the social doxa and the individual voice, FIS is a good indicator of their changing balance of forces")
- Moretti's goal: to /quantitatively/ (?) trace these forces
  #+BEGIN_QUOTE
  Take a form, follow it from space to space, and study the reasons for its transformations: the 'opportunistic, hence unpredictable' reasons of evolution.
  #+END_QUOTE
*** Problematics
:PROPERTIES:
:CUSTOM_ID: problematics-4d4e
:END:
- Teleological thinking?
- dealing with the "twisted branching"?
- is this really "quantitative"?
- Does this qualify as "insight"? 
** Summary: Moretti and History
:PROPERTIES:
:CUSTOM_ID: summary:-moretti-and-history-59c4
:END:
- *labor-intensive* quantification of sources
- *glossing over* problems of quantification
- *continued reliance* on expert opinion -- but how is that expertise to be cultivated? 
** COMMENT Tools for Distant Reading: the wordle
:PROPERTIES:
:CUSTOM_ID: tools-for-distant-reading:-the-wordle-c4c7
:END:
#+ATTR_HTML: :style float:left; max-height:400px; max-width:49%
http://www.themacroscope.org/wp-content/uploads/2013/10/Fig-2-CCF.png
#+ATTR_HTML: :style float:left; max-height:400px; max-width:49%
http://www.themacroscope.org/wp-content/uploads/2014/12/3.4-ndp-platform.png
- what do and don't we know?
** COMMENT Word Clouds: The Gateway Drug
:PROPERTIES:
:CUSTOM_ID: word-clouds:-the-gateway-drug-1541
:END:
[[http://www.wordle.net/][Try it yourslef on Wordle.net]]
- simple visalization tool
- entirely eradicates /context/, and the capacity for close reading
- But if you provide the context yourself, yo may immediately learn, /without reading/ what the document is about
- exercise: try with a novel; try with a text from [[http://archive.org][the Internet Archive]]
** COMMENT old visual
:PROPERTIES:
:CUSTOM_ID: comment-old-visual-bf16
:END:
http://www.themacroscope.org/wp-content/uploads/2013/10/Fig-3-CCF.png
** More Javascript
:PROPERTIES:
:CUSTOM_ID: javascript-30da
:END:
*** For loops!
#+BEGIN_SRC js
var historians= ["Edward Gibbon", "Arnold Toynbee", "Leopold von Ranke"];
  for (h of historians) {
    console.log(h + " was a historian.");
  }
  for (i=0; i < historians.length ; i++){
    console.log(historians[i] + " was a historian.");
  }
  for (i in historians) {
    console.log(historians[i] + " was a historian.");
  }
#+END_SRC
*** Conditionals
#+BEGIN_SRC js
  var goodGuys = ["CA", "UK", "US"];
  var badGuys=["DE", "AH"];
  var people = [
    {name: "Kaiser Wilhelm",
     nat: "DE"}];
  for (person of people) {
    if (badGuys.includes(person.nat)) {
      //console.log(person.name + ": BOOOOOOOOOOOO!!!");
    }
  };
#+END_SRC

#+RESULTS:
: undefined

*** the "Repeat" function
#+BEGIN_SRC js
var myString="hello";
myString.repeat(5);
#+END_SRC
*** Check length
#+BEGIN_SRC js
  var myString="Hello all you students.",
      myArray = ["Hello", "all", "you", "students", "."],
      myObject = {greeting: "Hello",
                  addressee: "all you students",
                  punctuation: "."
                 },
     myNumber=25;
  //console.log(myString.length);
  //console.log(myArray.length);
  //console.log(myObject.length);
  //console.log(myNumber.length);
#+END_SRC

*** "Operator Overloading"
~+~, ~-~, do different things w/ different variable types
#+begin_src js
s = "asdf";
t= "ghj";

s+t;

#+end_src

*** Working with the DOM
*Document Object*
- everything in the document can be manipulated here
https://www.computerhope.com/jargon/d/dom1.jpg
*** Finding Elements
- ~document.getElementById("str")~
- ~document.getElementByTagName("str")~
- ~document.getElementByClassName("str")~

*** Creating Elements
- ~var newElement = document.createElement("str")~

*** Putting elements into the document
- ~var newElement = document.createElement("str")~
- ~var oldElement = document.getElementByID("str")~
- ~oldElement.append(newElement)~
** live ex
- [[http://sandbox.hackinghistory.ca/doc-practice.html][HTML doc]]
- [[http://sandbox.hackinghistory.ca/doc-practice.js][JS code]]

** COMMENT Voyant-Tools
:PROPERTIES:
:CUSTOM_ID: voyant-tools-a335
:END:

** Footnotes
:PROPERTIES:
:CUSTOM_ID: footnotes-08a9
:END:

Stolen from http://f14tot.ryancordell.org/2014/10/15/lab-8-distant-reading/ 

From Owen Boynton, /Middlemarch/, Pastoral, and the Waste of Attention (http://litimag.oxfordjournals.org.myaccess.library.utoronto.ca/content/16/3/275.full)


* COMMENT 06: Distant Reading, Catchup, yet more javascript
:PROPERTIES:
:EXPORT_FILE_NAME: 06-distant-reading-3
:EXPORT_TITLE: Distant Reading III
:CUSTOM_ID: 06-catchup
:END:
** JS Questions
- where do I run Javascript?
- how do I define a function?
- what are return values?
- DOM manipulation
*** Running JS
- Atom -- js-console (under packages menu)
- Firefox: Scratchpad + console
- Chrome: console alone
- any of my lectures!
*** Defining a function
#+begin_src js
function someFUnctionName (parameter1/parameter2,parameterEtc) {
    //function body
    return someValue
}
#+end_src
*** DOM
- identifying nodes
- adding a node
- clearing a node
#+begin_src js
// nothing to see here yet
#+end_src
** No Clothes, no body
#+begin_quote 
 It's not that the emperor has no clothes(that would be fine); it's that no one knows what the emperor looks like. (Ramsey 2010)
#+end_quote

#+BEGIN_NOTES 
"It's one thing to worry that your canon isn't sufficiently inclusive, or broad, or representative. It's another thing when your canon has no better chance of being these thngs than a random selection. When we get up into the 14-million book rnag, books that are known by more than 2 living people are already "popular"

(let alone Hamlet!!!)
#+END_NOTES
** Finally: Trees
:PROPERTIES:
:CUSTOM_ID: today:-trees-66d5
:END:
#+ATTR_HTML: :style float:left; max-width:49%;
https://upload.wikimedia.org/wikipedia/commons/1/10/Darwin_Tree_1837.png
#+ATTR_HTML: :style float:left; max-width:49%;
https://upload.wikimedia.org/wikipedia/commons/4/4e/Darwins_tree_of_life_1859.png
*** Moretti's Evolutionism
:PROPERTIES:
:CUSTOM_ID: moretti's-evolutionism-251f
:END:
- Citations: Darwin, Feldman, Cavalli-Sforza
- In his genealogy: Karl Marx; H. G. Wells; E. O. Wilson; all of evolutionary psychology
- "morphological" diagrams -- "with form and history as the two variableso f the analysis" -- vertical is time, horizontal is "formal diversification" eventually leading to 'well-marked varieties'
*** Plots
:PROPERTIES:
:CUSTOM_ID: plots-525b
:END:
http://newleftreview.org.myaccess.library.utoronto.ca/static/assets/images/2620303large.gif

#+BEGIN_NOTES 
- literary market as "ruthless competition" hinging on form (p.48). "readers discover that they like a certain device, and if a story doesn't seem to include it, they simply don't read it (and the story becomes extinct)". Somewhat bizarre positioning over readres and markets as Nat Sel pressures.  
#+END_NOTES
**** Clues as /evolved/ phenomenon
:PROPERTIES:
:CUSTOM_ID: clues-as-/evolved/-phenomenon-baf4
:END:
- Doyle as /canonical starting point/ for detective fiction
- But has a context; how to describe?
- note: /not/ a personal context!

#+BEGIN_NOTES 
- the very small and the very large: "devices & genres: not texts". Texts are "the real objects" of literature; but they are not the right /objects of knowledge/ for literary history.  
#+END_NOTES
*** Styles
:PROPERTIES:
:CUSTOM_ID: styles-4fc2
:END:
https://nplusonemag.com/wp-content/uploads/2014/04/moretti-2.jpg
**** Free Indirect Style
:PROPERTIES:
:CUSTOM_ID: free-indirect-style-4a25
:END:
#+BEGIN_QUOTE
A peculiar mix of indirect and direct discourse, which draws the verbal tenses and pronouns from the former, and the tone and the order of the sentence from the latter:

It was the abode of noise, disorder, and impropriety. Nobody was in their right place, nothing was done as it ought to be. She could not respect her parents, as she had hoped. 
#+END_QUOTE
#+begin_quote 
- because it has this weird mix of personal and impersonal, distance and intimacy, it evokes a kind of confusion in the readre -- and...
#+end_quote
**** Why FIS?
:PROPERTIES:
:CUSTOM_ID: why-fis?-eefc
:END:
- appears to mark a major social transformation ("halfway btwn the social doxa and the individual voice, FIS is a good indicator of their changing balance of forces")
- Moretti's goal: to /quantitatively/ (?) trace these forces
  #+BEGIN_QUOTE
  Take a form, follow it from space to space, and study the reasons for its transformations: the 'opportunistic, hence unpredictable' reasons of evolution.
  #+END_QUOTE
#+BEGIN_NOTES 
 ...in Austen in particular, we can associate it with t stron g correspondence between the social norms of the time, and the heroines of the novel. In the Latin American dictator novels, the style instead critiques the one-to-one corresponence that the dictator wants to assert between his personal interior life and the social order.  So as we watch the trnasformation of FIS, we can see also a transformation i n the balance between the individual and the social, as poles of concern in the novelistic endeavour.
#+END_NOTES
*** Problematics
:PROPERTIES:
:CUSTOM_ID: problematics-4d4e
:END:
#+begin_quote 
the approaches I have discussed... share a clear preference /for explanation over interpretation/
#+end_quote
- Teleological thinking?
- is this really "quantitative"?
- Does this qualify as "insight"? 

* COMMENT Visualizations                                                   :noexport:
:PROPERTIES:
:CUSTOM_ID: visualizations-7449
:END:
** COMMENT Notes 
:PROPERTIES:
:CUSTOM_ID: comment-notes-1335
:END:
http://adamcrymble.org/intro-to-digital-history-2015/#week12


Kostiantyn Kucher and Andreas Kerren, ‘ Text Visualization Browser: A Visual Survey of Text Visualization Techniques', (2014)
Jefferson Bailey and Lily Pregill, ‘Speak to the Eyes: The History and Practice of Information Visualization', Art Documentation: Journal of the Art Libraries Society of North America, vol. 33 (2014).
Andy Kirk, 298 Data Visualisation Resources, Visualising Data, (2015).
William Playfair, ‘Exports and Imports to and from Denmark & Norway from 1700 to 1780′, (1786) (for workshop, – available via Wikipedia).
Florence Nightingale, ‘Diagram of the Causes of Mortality in the Army in the East', (1856) (for workshop, – available via Wikipedia).
Charles Joseph Minard, ‘Map of Napoleon's Retreat from Moscow – 1813-14′ (1869) (for workshop – available via Wikipedia).
‘Chart showing the Aggregate Number of Blind…' (1870) (for workshop – available via David Rumsey Collection).
‘Rank of states and territories in population at each census: 1790 – 1890′, (1890) (for workshop – available via Handsome Atlas).
Recent Work

Valentina D'Efilippo, ‘Field of Commemoration', (2013) (for workshop)
Ben Schmidt, ‘Mad Men Anachronisms' (2012) (for workshop).
Hans Rosling, ‘200 Countries, 200 Years, 4 Minutes', (2009) (for workshop).
William J Turkel and Tim Hitchcock, Data Mining with Criminal Intent (2009) (for workshop).
Timeplots, A Visual History of the United States House of Representatives, (2012) (for workshop).
** COMMENT Spatial history
:PROPERTIES:
:CUSTOM_ID: comment-spatial-history-ea38
:END:

* 08-02: Why Spatial history?       
:PROPERTIES:
:EXPORT_FILE_NAME: 08-02-why-spatial-history
:CUSTOM_ID: 07:-why-spatial-history?-c5b0
:END:
** Assignment Notes
- Assignment 3: good luck!!
- Assignment 4: not up yet! But the *non-technical instructions* in [[https://github.com/DigitalHistory/advanced-topics/tree/master/spatial-history#assignment][last year's version]] will still apply. There will, however, be some significant differences in the technical content. 
** Recap (from a while ago)
:PROPERTIES:
:CUSTOM_ID: recap-abcf
:END:
- Hermeneutics and understanding
- What does it mean to /understand/ large numbers of texts, and what is the nature of /expertise/?
- /searching/ vs /browsing/
- data as /evidence/, data as /inspiration/
** Summary
:PROPERTIES:
:CUSTOM_ID: summary-7391
:END:
- Space & Place
- The Work Maps Do: lying; presenting; creating

** Spatial Turn
:PROPERTIES:
:CUSTOM_ID: spatial-turn-c310
:END:
- Space and "place"
- Space /as historically constituted/
- What is "the History of a place?" 

*** Questions for us
:PROPERTIES:
:CUSTOM_ID: questions-for-us-3e02
:END:
- What does it mean to foreground spatial characteristics in a /spatial/ history?
- How do maps & media /transform/ the kinds of stories we can tell
** COMMENT /Nature's Metropolis/ (1991)
:PROPERTIES:
:CUSTOM_ID: /nature's-metropolis/-(1991)-987d
:END:
- "New" Environmental History, 1990's
- /culture/ of environment
- /place/ as constitutive of history

*** Why "Nature's" Metropolis?
:PROPERTIES:
:CUSTOM_ID: why-"nature's"-metropolis?-5bfb
:END:
- Chicago's "Natural" advantages
- Chicago's creation of "natural" resources
  - First, Second Nature
    #+BEGIN_NOTES
    hat Chicago's history is the history of the ttransformaiton &
    appropriation of the natural environment surrounding the city.  city & country are not “seperate & opposing worlds” (17) but mutually reinforcing & indeed mutualsly necessary entities.  
    #+END_NOTES

*** Thunen's Zones
:PROPERTIES:
:CUSTOM_ID: thunen's-zones-9ebe
:END:
[[file:~/Dropbox/Work/History/DigitalHistory/Images/van_thunen_zones.jpg]]

*** Gateway to the West
:PROPERTIES:
:CUSTOM_ID: gateway-to-the-west-b83f
:END:
https://web.stanford.edu/group/spatialhistory/media/images/publication/Cronon.jpg

*** Chicago Takes Over!
:PROPERTIES:
:CUSTOM_ID: chicago-takes-over!-b13d
:END:
- "Necessary Point of Passage" from West \rarr East
- Pork, Grain, Lumber Zones
[[file:~/Dropbox/Work/History/DigitalHistory/Images/railroads.jpg]]
#+BEGIN_NOTES
In early c. 19, Chicago one of several cities struggling to ocntrol the vast hinterlands west of the Mississipi – including St. Slouis, Minneapolis, WInnipeg.  Key elementi n Chicago's ascension:  transformation of vaast western space into zones of human activity radiating out from Chicago.  Chicago is ”Nature's Metropolis” = dependent on natural resources in extraordinarty way.  

First big victory:  getting railroads to travel through city, makes C. “nec point of passage” for all commodities travelling East.  Railroad time & space on a massive scale.  
#+END_NOTES
*** Creation of Modernity
:PROPERTIES:
:CUSTOM_ID: creation-of-modernity-3624
:END:
- Pricing the Future
- Mechanization of Slaughter
- the Regrigerator Car
- Capital Flows
  #+BEGIN_NOTES
  1st & second nature:  pricing thefuture.  abstraction of grain commodities.  confrontation of 1st & second natures.  

Meat:  mechanization of slaughter:  prairies transformed; bison eliminated; fences;  densification of herds;  “storing the winter” 
--meat industry as biopower.  management of life & energy;
-feed lots like grain elevators:  feed is in Chicago:  why not bring there to slaughter.  value of a porcine life changes over time.  

-- so Chicago notjust conquest of space, but time as well – futures AND feed lots (which stave off decay of loife) AND refrigeration.  

disassembly line
meat packing replacing butchery.
-refrigerator cars*...  
  #+END_NOTES
*** Impact
:PROPERTIES:
:CUSTOM_ID: impact-e9ac
:END:
- shows that /focus on space/ can deeply change our understanding of major historical developments
- impressive combination of /quantitative economic/ and /cultural/ history
** Looking at Whales
:PROPERTIES:
:CUSTOM_ID: looking-at-whales-7029
:END:
- impressive data collection
- arresting images
- but conclusion is about *pillage*: not immediately apparent to the eye.
*** One version of the story
:PROPERTIES:
:CUSTOM_ID: one-version-of-the-story-8339
:END:
@@html:<iframe width="800px" height="600px" src="https://www.youtube.com/embed/Tn7fQ5mYHPA" frameborder="0" allowfullscreen></iframe>@@

** Lying with Maps
:PROPERTIES:
:CUSTOM_ID: lying-with-maps-7a34
:END:
- maps are /rhetorical objects/
- use of shade, color, can /be very misleading/
- same numbers can produce /very different/ visualizations
*** birth rates
:PROPERTIES:
:CUSTOM_ID: birth-rates-8c7e
:END:
#+ATTR_HTML: :class paired
[[file:~/DH/Images/lying-w-maps-birth-rates1.jpeg]]
#+ATTR_HTML: :class paired
[[file:~/DH/Images/lying-w-maps-birth-rates-2.jpeg]]
**** COMMENT
:PROPERTIES:
:CUSTOM_ID: comment-77cb
:END:
[[file:~/Dropbox/Work/History/DigitalHistory/Images/map-clorpleth.jpeg]]
in particular, 
** "Critical" Cartography
:PROPERTIES:
:CUSTOM_ID: critical-cartography-b130
:END:
- if maps "lie", or, at least, if maps are /arguments/, then:
  - what relations of power do they reveal/participate in?
  - if we are aware of the "lying", how can we work with it /critically/?
** Maps Make Landscapes
:PROPERTIES:
:CUSTOM_ID: maps-make-landscapes-346e
:END:
- U.S. /Land Ordinance of 1785/ establishes grid mappping method as national system
- lots sold /according to this method/
#+ATTR_HTML: :class paired
https://mvmtbldg.files.wordpress.com/2011/02/glo-plat2.jpg
#+ATTR_HTML: :class paired
https://mvmtbldg.files.wordpress.com/2011/02/corner-homestead4.jpg
** Mapping /enrols/ State Power
:PROPERTIES:
:CUSTOM_ID: mapping-/enrols/-state-power-900d
:END:
[[file:~/DH/Images/concession_roads.jpeg]]
** ...and technological power
:PROPERTIES:
:CUSTOM_ID: ...and-technological-power-79b0
:END:
#+ATTR_HTML: :class paired
[[file:~/DH/Images/surveyor.jpeg]]
#+ATTR_HTML: :class paired
[[file:~/DH/Images/line_cut.jpeg]]
** Maps /Reinscribe/ Power
:PROPERTIES:
:CUSTOM_ID: maps-/reinscribe/-power-1dc0
:reveal_extra_attr: class="twoc"
:END:
#+begin_slideblock
- "Home Owners Loan Corporations (HOLC) (1930's)
  - US Federal Agency in New Deal
  - tasked with preventing foreclosures
  - ranked neighbourhoods by "desirability"
  - ancestor to contemporary maps used by real estate brokers

https://ncrc.org/wp-content/uploads/2018/09/PHILLY_HOLC-2.jpg
#+end_slideblock

#+ATTR_REVEAL: :frag appear
#+begin_slideblock
@@html:<iframe width="100%" height="800px" src="https://dsl.richmond.edu/panorama/redlining/#loc=12/40.017/-75.205&city=philadelphia-pa" allowfullscreen></iframe>@@
#+end_slideblock


** Questions for us (again)
:PROPERTIES:
:CUSTOM_ID: questions-for-us-3e234
:END:
- What does it mean to foreground spatial characteristics in a /spatial/ history?
- How do maps & media /transform/ the kinds of stories we can tell
* 09-01: Spatial History with Leaflet Maps
:PROPERTIES:
:CUSTOM_ID: spatial-history-with-leaflet-maps-a3dc
:EXPORT_FILE_NAME: 09-01-spatial-history-leaflet
:END:  
** COMMENT Cats
#+ATTR_HTML: :class paired
[[./Images/cat.jpg]]
#+ATTR_HTML: :class paired
#+ATTR_REVEAL: :frag appear
[[./Images/ropes.jpg]]
** API's: incantations, conjurations, and mystical binding
- API's are /magic/
- we /bind/ a monster to a variable
- and then it has to perform tasks for us.
- sometimes we need to give it an offering first
** Maps and Spatial History
:PROPERTIES:
:CUSTOM_ID: leaflet-maps-and-spatial-history-eeb1
:END:
- use online Maps to explore *making geography central* to historical explanation

#+BEGIN_NOTES 
Today in class we are discussing /spatial history/, that is, history which focusses very strongly on the cultural history of space and place. There is nothing /intrinsically digital/ about spatial history, nor is it necessarily qunatitative in nature; but the incredible development of Geographical Information Systems (GIS) in the last 15 years has made the use of interactive digital maps an attractive target for historians.

Sophisticated works such as the [[http://web.stanford.edu/group/spatialhistory/cgi-bin/site/pub.php?id=29][Spatial History Project]] and Ben Schmidt's [[http://sappingattention.blogspot.co.uk/2012/10/data-narratives-and-structural.html][Whaling Maps Project]] take substantial technical effort to achieve their effects; in general, lengthy training in the use of specialized GIS software is required. We have our own example in the [[http://decima.chass.utoronto.ca/][DECIMA Project]] run by Prof. Terpstra in our department.

Our approach will be decidedly more lightweight. In class today, we will build a very simple "Geographical Information System" around a Leaflet Map. Leaflet Maps are, in fact, highly sophisticated GIS's, with powerful tools for accessing various layers of information; but in order to work with them, we will need to use a very small amount of Javascript.
#+END_NOTES
** Read this part! Follow the links! 
:PROPERTIES:
:CUSTOM_ID: read-this-part!-follow-the-links!-ee94
:END:
- [[https://classroom.github.com/a/oC6_7PJk][create your assignment repo and clone locally]]. we will work on it directly.

** What is a GIS?
:PROPERTIES:
:CUSTOM_ID: what-is-a-gis?-12ec
:reveal_extra_attr: class="twoc"
:END:

#+begin_slideblock

https://web.archive.org/web/20190105210746/http://iolandarch.com/wp-content/uploads/2014/09/overlay-analysis.jpg

#+end_slideblock

#+begin_slideblock

- all data is "geo-tagged" (has location info = latitude-longitude co-ords)
- layered data (like photoshop)
  - "layering" a non-trivial taxonomic decision 
- managed by a database, often quite complex, sophisticated

#+end_slideblock

#+BEGIN_NOTES 
GIS is just a name for any system that tries to capture, manipulate, and represent geographical data. There are many GIS tools; the history department uses [[http://www.arcgis.com/features/][ArcGIS]], which is expensive and something of an industry standard, while many independent scholars use [[http://www.qgis.org/en/site/][QGIS]], which is free, open source, and not quite as powerful as Arc.

The data in a GIS is all [[https://en.wikipedia.org/wiki/Geotagging][geotagged]], that is, assigned a set of geographical co-ordinates. This sounds simple but it is actually quite complex, since any co-ordinate system is a /simplified projection/ of real, disordered, 3-dimensional space.  Many of the frustrations of working with GIS comes from the difficulty of rendering (say) historical map images /commensurate/ with modern, satellite-derived maps.

Within a GIS, information is generally accessed as a set of *layers*.  Data of specific types is /stratified/ in layers, in much the same way that one creates image layers in photoshop. This image gives a typical example.  Note that the creation of layers is itself an intellectual decision, relying on judgments about the relationships between individual bits of data.
#+END_NOTES

** Design Considerations
- what should the *baselayer* look like?
- what *kinds of phenomena are we representing*?
- what are the *logical groupings*? These hsold probably be layers
- how does the map *enhance and transform* the story you're telling? 
** Controlling Leaflet Maps
:PROPERTIES:
:CUSTOM_ID: controlling-leaflet-maps-a206
:END:
- first, *instantiate map* and set up initial conditions
- then *add baselayer*
- then add *other layers as desired*
- finally, *add controls*
- we use Leaflet Maps *API* to add markers to marker layer, generate map on web page
  - "load" Leaflet Maps API (using a script tag)
  - instruct Leaflet Maps to do what we want by *using methods of the ~L~ object, which is the name assigned to the API by default
  - API's as [[https://en.wikipedia.org/wiki/Evocation][Evocation]]
  - code may look complex, but you only need to change a few things

#+BEGIN_ASIDE
An *API* is an "Application Programming Interface": a communications channel that lets programs talk to each other.  By "loading" the Leaflet API, our web pages can communicate directly with Leaflet's servers to modify the map that Leaflet is presenting to us.  In fact, most of the interesting stuff happening on the web these days happens via these machine-to-machine communication channels.  Cf. [[https://www.youtube.com/watch?v=s7wmiS2mSXY][this helpful video]] or [[https://en.wikipedia.org/wiki/Application_programming_interface][Wikipedia]] for more API info.
#+END_ASIDE

#+BEGIN_NOTES 
For our exercise today, we are really only interested in two layers:  the "basemap", that is, the street or satellite map most of us use on an almost-daily basis; and the /marker layer/, in which all of the little pins on a map are stored.  We access these layers, and create those markers, with Javascript, by making /calls/ to the /Leaflet Maps API/.

You don't have to understand the Leaflet Maps API very thoroughly to be able to do this assignment.  The code comes pre-written; all you have to do is hack at it till it does what you want it to.  

#+END_NOTES

** Using Markdown (refresher)
:PROPERTIES:
:CUSTOM_ID: using-markdown-3d00
:END:

- write your essay in Markdown, rather than HTMl (b/c so much easier)
- HTML included in a markdown file will still render as HTML.
  - Use this when Markdown syntax is not complex enough for your needs

#+BEGIN_SRC markdown
# one or more '#' marks indicates a headline

### this one is "level 3"

*a single asterisk is emphasis, or italics*

**two are strong, or bold**

An empty line separates paragraphs.

> blockquotes are made with angle brackets
> like this

#+END_SRC

While you're coding, reflect on [[https://www.youtube.com/watch?v=Q8gGsuWouDE&t=0m20s][the satisfaction that good, honest work brings to the act of electronic communication]]. 

** The Assignment
:PROPERTIES:
:CUSTOM_ID: the-exercise-9a2b
:END:
[[https://classroom.github.com/a/Irv1gDIe][online here]]
** The code
:PROPERTIES:
:CUSTOM_ID: the-code-e630
:END:
*** Javascript
:PROPERTIES:
:CUSTOM_ID: javascript-ed67
:END:
- modify lat/long co-ords of ~my_center~.
- modify content of marker objects
- very little else needs to change
*** HTML
:PROPERTIES:
:CUSTOM_ID: html-f31e
:END:
- shouldn't have to change much, though feel free to add
*** CSS
:PROPERTIES:
:CUSTOM_ID: css-46fc
:END:
- in your assignment, use ~css/extra-styles.css~ to make small changes to CSS
- use a different Bootstrap theme to make bigger changes
- read assignment notes to learn more about the frameworks this assignment leans on

*  09-02: Deep Maps & Spatial Humanities                                                  
:PROPERTIES:
:EXPORT_FILE_NAME: 09-maps-online
:CUSTOM_ID: comment-09:-deep-maps-8fd5
:END:
** What is Spatial Humanities?
- GIS Methods
- Humanities Questions

** The Temptations of GIS
:PROPERTIES:
:CUSTOM_ID: the-temptations-of-gis-a71e
:END:
- precision
- accuracy
- determinism
- "thin maps"
#+BEGIN_QUOTE
...conceived, designed, created, and maintained by experts for both general and specific audiences... heavily focused on the material and physical characteristics of landscape and society.
#+END_QUOTE 
#+BEGIN_NOTES

critics contend that GIS privileges master narratives and cat-
egorical causation at the cost of contingent causation and
alternative interpretations and renderings of space and par-
ticularly place. This reductionist meta-narrative stands in con-
trast to many parts of human geography and the humanities
that are heavily versed in multivocality, intertextuality, and
contingency, and where place is as equally important as
space in the construction of human geographies. (http://www.tandfonline.com.myaccess.library.utoronto.ca/doi/pdf/10.1080/00087041.2016.1243864?needAccess=true
#+END_NOTES
** Between /Maps/ and /Narrative/
:PROPERTIES:
:CUSTOM_ID: between-/maps/-and-/narrative/-c6d9
:END:
- Yes, maps are rhetorical, but
- they lack the narrative elements that make history
#+BEGIN_NOTES
- to what extent, with what tools, can the "experience" of embeddedness in a place be captured?
  - "between the objective role of scientific theorizing & the subjective role of empathetic understanding."
  - emphasis on conceptual  mapping  rather  than  on  cartographic mapping
 
maps on their own are not "stories". But on the other hand *places* are essential to stories. cf. finding that tellers of oral epics memorize their stories *place by place* -- places have strong resonances within our narratives. So, can we capture place in a more robust way? 
#+END_NOTES
** Roots of Deep Mapping
:PROPERTIES:
:CUSTOM_ID: roots-of-deep-mapping-d17a
:END:
- antiquarians of c.18
  - attention to folklore, natural history, hearsay.
  - attempted to "record and represent the grain and patina of a location through the justapositions and interpenetrations of the historical and tecontemporary, the factual and the fictional" (Pearson & Shank, 2001)
- Situationists (1960's)
#+BEGIN_QUOTE
Geography... deals with the determinant actions of general natural forces.... Psychogeography could set for itself the study of the precise laws and specific effects of the geographical environment... on the emotions and behavior of individuals. (Debord)
#+END_QUOTE
** Building a "Spatial Story"
:PROPERTIES:
:CUSTOM_ID: building-a-"spatial-story"-23b5
:END:

 *Some Examples*

- [[https://storymaps.esri.com/stories/2017/japanese-internment/index.html][Japanese Internment on Storymap]]
- [[http://bl.ocks.org/anonymous/raw/7d67c4ef3348192da613/][H.M.S. Beagle on Odyssey.js]]
** Data and Meaning (again)
:PROPERTIES:
:CUSTOM_ID: data-and-meaning-(again)-e74b
:END:
** Mapping Ecosystems: Current Conditions
:PROPERTIES:
:CUSTOM_ID: mapping-ecosystems:-current-conditions-01a5
:END:
- [[http://geojson.io][GeoJSON.io]]
- [[https://www.google.com/maps/d/?hl=en_US&app=mp][Google My Maps]]
- [[https://cartodb.com/][CartoDB]]
- [[http://mapstory.org/][MapStory]]
- [[https://storymap.knightlab.com/][StoryMap]]
- [[http://timemapper.okfnlabs.org/create][TimeMapper]]
- [[http://storymaps.arcgis.com/en/][ESRI StoryMaps]]
- [[http://theclio.com/web/search?lat=37.7749295&lon=-122.41941550000001&location=san%20francisco%2C%20ca][CLIO historical maps]]
- [[http://chartsbin.com/about/apply][ChartsBin]]
- [[http://cartodb.github.io/odyssey.js/][Odyssey.js]]
** Remaining mapping questions
:PROPERTIES:
:CUSTOM_ID: activity:-a-richer-map-c194
:END:
- What do you still need help with? due tonight
** COMMENT Next Assignment: Oral History. 
- [[https://digitalhistory.github.io/assignment/04-oral-history/][on the website]]
- [[https://github.com/DigitalHistory/advanced-topics/tree/master/oral-history][On Github]]
** Final Assignment: Project Proposal
- [[http://digitalhistory.github.io/assignment-05-project-proposal/][Now On the Website]]!
** COMMENT Activity: make-up work                                 :noexport:
:PROPERTIES:
:CUSTOM_ID: activity:-make-up-work-cbc7
:END:
* 09-02: More GIS
:PROPERTIES:
:EXPORT_FILE_NAME: 09-02-more-gis
:END:
*  COMMENT 08: Visualization                                        
:PROPERTIES:
:EXPORT_FILE_NAME: 08-visualization
:CUSTOM_ID: comment-08:-visualization-acf2
:END:
** Recap
:PROPERTIES:
:CUSTOM_ID: recap-4fed
:END:
- Maps as Rhetoric
- "Critical" Cartography
- Google Maps Intro
** Today
:PROPERTIES:
:CUSTOM_ID: today-64a7
:END:
- History of Visualizations
- more Google Maps
** Playfair: Early Techniques
:PROPERTIES:
:CUSTOM_ID: playfair:-early-techniques-a672
:END:
[[http://www.jeffersonbailey.com/wp-content/uploads/2014/12/figure_2.png]]
multivariate data; area as quantity; pie chart
#+BEGIN_NOTES
William Playfair (1789-1823), Scottish engineer & political scientist; brother John a major figure in Scottish enlightenment, which saw Adam Smith, James Watt, etc.; never a success in business, but interest in both tech & finance.
#+END_NOTES
** Playfair: Early Techniques
https://upload.wikimedia.org/wikipedia/commons/5/52/Playfair_TimeSeries-2.png
** Charles Joseph Minard: Storytelling
:PROPERTIES:
:CUSTOM_ID: charles-joseph-minard:-storytelling-7995
:END:
[[https://upload.wikimedia.org/wikipedia/commons/2/29/Minard.png]]
#+BEGIN_NOTES
CJ Minard (1781-1870); civil engineer; drawn in 1869; 
 six different dimensions: latitude, longitude, direction of movement, time, temperature, and the size of the Grand Army. Minard's achievement here is expertly illustrating a complex, multivariate time-space story in a compelling and concise display. Tufte has famously endorsed it as the “best statistical graphic ever drawn.” 11  E.J. Marey, a contemporary of Minard, praised the map as “seeming to defy the pen of the historian by its brutal eloquence.” 1

"The numbers of men present are represented by the widths of the colored zones in a rate of one millimeter for ten thousand men; these are also written beside the zones. Red designates men moving into Russia, black those on retreat. — The informations used for drawing the map were taken from the works of Messrs. Thiers, de Ségur, de Fezensac, de Chambray and the unpublished diary of Jacob, pharmacist of the Army since 28 October.
In order to facilitate the judgement of the eye regarding the diminution of the army, I supposed that the troops under Prince Jèrôme and under Marshal Davoust, who were sent to Minsk and Mobilow and who rejoined near Orscha and Witebsk, had always marched with the army."
#+END_NOTES
** Neurath: Isotype
:PROPERTIES:
:CUSTOM_ID: neurath:-isotype-3467
:END:
[[http://56.media.tumblr.com/92cae54746a0198abb7a769f91c6ff83/tumblr_mobrwkmIla1r06q0no1_1280.jpg]]
#+BEGIN_NOTES
Unified Encyclopedia of Science; Vienna Circle; the Ship
#+END_NOTES
** Working with Data
:PROPERTIES:
:CUSTOM_ID: working-with-data-618e
:END:
[[http://selfiecity.net/selfiexploratory/][Selfiexploratory]]
[[http://histecon.fas.harvard.edu/innerlife/connections-basic.html][Network Graphs]]
** Panama Papers
- [[https://panamapapers.icij.org/graphs/][ICIJ visualizations]]
- [[http://fusion.net/story/287382/panama-papers-data-visualization/][Fusion graph network visualization]]
* 09 -- Map & Visualization race-through
** Recap
:PROPERTIES:
:CUSTOM_ID: recap-4fed
:END:
- Maps as Rhetoric
- "Critical" Cartography

**  Visualization                                        
:PROPERTIES:
:EXPORT_FILE_NAME: 08-visualization
:CUSTOM_ID: comment-08:-visualization-acf2
:END:
**** Today
:PROPERTIES:
:CUSTOM_ID: today-64a7
:END:
- History of Visualizations
- more Google Maps
**** Playfair: Early Techniques
:PROPERTIES:
:CUSTOM_ID: playfair:-early-techniques-a672
:END:
[[http://www.jeffersonbailey.com/wp-content/uploads/2014/12/figure_2.png]]
multivariate data; area as quantity; pie chart
#+BEGIN_NOTES
William Playfair (1789-1823), Scottish engineer & political scientist; brother John a major figure in Scottish enlightenment, which saw Adam Smith, James Watt, etc.; never a success in business, but interest in both tech & finance.
#+END_NOTES
**** Playfair: Early Techniques
https://upload.wikimedia.org/wikipedia/commons/5/52/Playfair_TimeSeries-2.png
**** Charles Joseph Minard: Storytelling
:PROPERTIES:
:CUSTOM_ID: charles-joseph-minard:-storytelling-7995
:END:
[[https://upload.wikimedia.org/wikipedia/commons/2/29/Minard.png]]
#+BEGIN_NOTES
CJ Minard (1781-1870); civil engineer; drawn in 1869; 
 six different dimensions: latitude, longitude, direction of movement, time, temperature, and the size of the Grand Army. Minard's achievement here is expertly illustrating a complex, multivariate time-space story in a compelling and concise display. Tufte has famously endorsed it as the “best statistical graphic ever drawn.” 11  E.J. Marey, a contemporary of Minard, praised the map as “seeming to defy the pen of the historian by its brutal eloquence.” 1

"The numbers of men present are represented by the widths of the colored zones in a rate of one millimeter for ten thousand men; these are also written beside the zones. Red designates men moving into Russia, black those on retreat. — The informations used for drawing the map were taken from the works of Messrs. Thiers, de Ségur, de Fezensac, de Chambray and the unpublished diary of Jacob, pharmacist of the Army since 28 October.
In order to facilitate the judgement of the eye regarding the diminution of the army, I supposed that the troops under Prince Jèrôme and under Marshal Davoust, who were sent to Minsk and Mobilow and who rejoined near Orscha and Witebsk, had always marched with the army."
#+END_NOTES
**** Neurath: Isotype
:PROPERTIES:
:CUSTOM_ID: neurath:-isotype-3467
:END:
[[http://56.media.tumblr.com/92cae54746a0198abb7a769f91c6ff83/tumblr_mobrwkmIla1r06q0no1_1280.jpg]]
#+BEGIN_NOTES
Unified Encyclopedia of Science; Vienna Circle; the Ship
#+END_NOTES
**** Working with Data
:PROPERTIES:
:CUSTOM_ID: working-with-data-618e
:END:
[[http://www.imageatlas.org/search?q=socialism&sort=gdp&afghanistan=on&brazil=on&china=on&egypt=on&france=on&germany=on&india=on&iran=on&israel=on&newzealand=on&northkorea=on&russia=on&saudiarabia=on&southkorea=on&spain=on&sweden=on&syria=on&usa=on&ukraine=on][ImageAtlas]]

[[http://research.kraeutli.com/index.php/2013/11/the-tate-collection-on-github/][Collection Analysis]]
**** Panama Papers
- [[https://panamapapers.icij.org/graphs/][ICIJ visualizations]]
- [[http://fusion.net/story/287382/panama-papers-data-visualization/][Fusion graph network visualization]]

**   Deep Maps & Spatial Humanities                                                  
:PROPERTIES:
:EXPORT_FILE_NAME: 09-maps-online
:CUSTOM_ID: comment-09:-deep-maps-8fd5
:END:
*** What is Spatial Humanities?
- GIS Methods
- Humanities Questions
*** The Temptations of GIS
:PROPERTIES:
:CUSTOM_ID: the-temptations-of-gis-a71e
:END:
- precision
- accuracy
- determinism
- "thin maps"
#+BEGIN_QUOTE
...conceived, designed, created, and maintained by experts for both general and specific audiences... heavily focused on the material and physical characteristics of landscape and society.
#+END_QUOTE 
#+BEGIN_NOTES

critics contend that GIS privileges master narratives and cat-
egorical causation at the cost of contingent causation and
alternative interpretations and renderings of space and par-
ticularly place. This reductionist meta-narrative stands in con-
trast to many parts of human geography and the humanities
that are heavily versed in multivocality, intertextuality, and
contingency, and where place is as equally important as
space in the construction of human geographies. (http://www.tandfonline.com.myaccess.library.utoronto.ca/doi/pdf/10.1080/00087041.2016.1243864?needAccess=true
#+END_NOTES
*** Between /Maps/ and /Narrative/
:PROPERTIES:
:CUSTOM_ID: between-/maps/-and-/narrative/-c6d9
:END:
- Yes, maps are rhetorical, but
- they lack the narrative elements that make history
#+BEGIN_NOTES
- to what extent, with what tools, can the "experience" of embeddedness in a place be captured?
  - "between the objective role of scientific theorizing & the subjective role of empathetic understanding."
  - emphasis on conceptual  mapping  rather  than  on  cartographic mapping
 
maps on their own are not "stories". But on the other hand *places* are essential to stories. cf. finding that tellers of oral epics memorize their stories *place by place* -- places have strong resonances within our narratives. So, can we capture place in a more robust way? 
#+END_NOTES
*** Roots of Deep Mapping
:PROPERTIES:
:CUSTOM_ID: roots-of-deep-mapping-d17a
:END:
- antiquarians of c.18
  - attention to folklore, natural history, hearsay.
  - attempted to "record and represent the grain and patina of a location through the justapositions and interpenetrations of the historical and tecontemporary, the factual and the fictional" (Pearson & Shank, 2001)
- Situationists (1960's)
#+BEGIN_QUOTE
Geography... deals with the determinant actions of general natural forces.... Psychogeography could set for itself the study of the precise laws and specific effects of the geographical environment... on the emotions and behavior of individuals. (Debord)
#+END_QUOTE
*** Building a "Spatial Story"
:PROPERTIES:
:CUSTOM_ID: building-a-"spatial-story"-23b5
:END:

*** Some Examples
:PROPERTIES:
:CUSTOM_ID: some-examples-bfb0
:END:
- [[https://storymaps.esri.com/stories/2017/japanese-internment/index.html][Japanese Internment on Storymap]]
- [[http://bl.ocks.org/anonymous/raw/7d67c4ef3348192da613/][H.M.S. Beagle on Odyssey.js]]
*** Data and Meaning (again)
:PROPERTIES:
:CUSTOM_ID: data-and-meaning-(again)-e74b
:END:
*** Mapping Ecosystems: Current Conditions
:PROPERTIES:
:CUSTOM_ID: mapping-ecosystems:-current-conditions-01a5
:END:
- [[http://geojson.io][GeoJSON.io]]
- [[https://www.google.com/maps/d/?hl=en_US&app=mp][Google My Maps]]
- [[https://cartodb.com/][CartoDB]]
- [[http://mapstory.org/][MapStory]]
- [[https://storymap.knightlab.com/][StoryMap]]
- [[http://timemapper.okfnlabs.org/create][TimeMapper]]
- [[http://storymaps.arcgis.com/en/][ESRI StoryMaps]]
- [[http://theclio.com/web/search?lat=37.7749295&lon=-122.41941550000001&location=san%20francisco%2C%20ca][CLIO historical maps]]
- [[http://chartsbin.com/about/apply][ChartsBin]]
- [[http://cartodb.github.io/odyssey.js/][Odyssey.js]]
*** Remaining mapping questions
:PROPERTIES:
:CUSTOM_ID: activity:-a-richer-map-c194
:END:
- What do you still need help with? due Monday
*** COMMENT Next Assignment: Oral History. 
- [[https://digitalhistory.github.io/assignment/04-oral-history/][on the website]]
- [[https://github.com/DigitalHistory/advanced-topics/tree/master/oral-history][On Github]]
*** COMMENT Final Assignment: Project Proposal
- [[http://digitalhistory.github.io/assignment-05-project-proposal/][Now On the Website]]!
*** COMMENT Activity: make-up work                               :noexport:
:PROPERTIES:
:CUSTOM_ID: activity:-make-up-work-cbc7
:END:

* 10: Visualization/Engaged History/Oral History
:PROPERTIES:
:EXPORT_FILE_NAME: 10-oral-history
:CUSTOM_ID: comment-10:-what's-special-about-oral-history-("engaged"-history)-b57f
:END:
** COMMENT old title: What's Special about Oral History 
** Recap
:PROPERTIES:
:CUSTOM_ID: recap-e97e
:END:
- Spatial History
  - new tools form GIS
  - new questions from cultural geography
  - maps & visualizations are *rhetorical* and need *interpretation*
** Today
:PROPERTIES:
:CUSTOM_ID: today-0deb
:END:
- a bit more on visualization (catchup really)
- Excursus on "Objectivity"
- What's Special about Oral History?

** Playfair: Early Techniques
:PROPERTIES:
:CUSTOM_ID: playfair:-early-techniques-a672
:END:
[[http://www.jeffersonbailey.com/wp-content/uploads/2014/12/figure_2.png]]
multivariate data; area as quantity; pie chart
#+BEGIN_NOTES
William Playfair (1789-1823), Scottish engineer & political scientist; brother John a major figure in Scottish enlightenment, which saw Adam Smith, James Watt, etc.; never a success in business, but interest in both tech & finance.
#+END_NOTES
** Playfair: Early Techniques
https://upload.wikimedia.org/wikipedia/commons/5/52/Playfair_TimeSeries-2.png
** Charles Joseph Minard: Storytelling
:PROPERTIES:
:CUSTOM_ID: charles-joseph-minard:-storytelling-7995
:END:
[[https://upload.wikimedia.org/wikipedia/commons/2/29/Minard.png]]
#+BEGIN_NOTES
CJ Minard (1781-1870); civil engineer; drawn in 1869; 
 six different dimensions: latitude, longitude, direction of movement, time, temperature, and the size of the Grand Army. Minard's achievement here is expertly illustrating a complex, multivariate time-space story in a compelling and concise display. Tufte has famously endorsed it as the “best statistical graphic ever drawn.” 11  E.J. Marey, a contemporary of Minard, praised the map as “seeming to defy the pen of the historian by its brutal eloquence.” 1

"The numbers of men present are represented by the widths of the colored zones in a rate of one millimeter for ten thousand men; these are also written beside the zones. Red designates men moving into Russia, black those on retreat. — The informations used for drawing the map were taken from the works of Messrs. Thiers, de Ségur, de Fezensac, de Chambray and the unpublished diary of Jacob, pharmacist of the Army since 28 October.
In order to facilitate the judgement of the eye regarding the diminution of the army, I supposed that the troops under Prince Jèrôme and under Marshal Davoust, who were sent to Minsk and Mobilow and who rejoined near Orscha and Witebsk, had always marched with the army."
#+END_NOTES
** Neurath: Isotype
:PROPERTIES:
:CUSTOM_ID: neurath:-isotype-3467
:END:
[[http://56.media.tumblr.com/92cae54746a0198abb7a769f91c6ff83/tumblr_mobrwkmIla1r06q0no1_1280.jpg]]
#+BEGIN_NOTES
Unified Encyclopedia of Science; Vienna Circle; the Ship
#+END_NOTES
** Working with Data
:PROPERTIES:
:CUSTOM_ID: working-with-data-618e
:END:
[[http://selfiecity.net/selfiexploratory/][Selfiexploratory]]
[[http://histecon.fas.harvard.edu/innerlife/connections-basic.html][Network Graphs]]
** Panama Papers
- [[https://panamapapers.icij.org/graphs/][ICIJ visualizations]]
- [[http://fusion.net/story/287382/panama-papers-data-visualization/][Fusion graph network visualization]]
** Objectivity in History
:PROPERTIES:
:CUSTOM_ID: objectivity-in-history-8ee3
:END:
#+BEGIN_QUOTE
All history ultimately depends on its social purpose. (Thompson)
#+END_QUOTE
#+BEGIN_QUOTE
Oral sources are not objective. This of course applies to every source, though
the holiness of writing often leads us to forget it. (Portelli)
#+END_QUOTE
- What does it mean to be objective and/or neutral?
- What happens to history that abandons or modifies this standard?

*** Myth
:PROPERTIES:
:CUSTOM_ID: myth-6729
:END:
- not untruth, but beyond truth. 
- Myths structure understanding of world, self, and events, give meaning to action, and purpose to the world.
  - Myth of Prometheus & Fire gives an account of reason & techne in Greece
  - Creation Myth of Genesis give guide to relationships among (e.g.) Man, Woman, God, Nature
  - 'Myth of Progress' makes sense of modernity
  - George Washington & the apple tree ties virtue to the State
  - "multiculturalism" as a mythical strucutrefor Canadians
#+BEGIN_NOTES 
emphasize "beyond"
#+END_NOTES
*** Objectivity as Founding Myth
:PROPERTIES:
:CUSTOM_ID: objectivity-as-founding-myth-c350
:END:
- fundamental to our pursuit
- but deeply problematic
- commitment to: fixity of the past; sharp separation between subject & object; prior nature of fact to interpretation
- "wie es eigentlich gewesen" as bedrock
- and then the Twentieth Century
#+BEGIN_NOTES 
- Leopold von Ranke, 1824, /Geschichte der romanischen und germanischen Völker/, "wie es eigentlich gewesen".
#+END_NOTES
*** Epistemological Challenges
:PROPERTIES:
:CUSTOM_ID: epistemological-challenges-e712
:END:
- the fact/value distinction
- structures of knowledge
- contexts of interpretation
- standpoints & the view from nowhere
- "relativism" as nemesis and saviour

#+BEGIN_NOTES 
- *fact/value distinction:* between what is and what ought to be, or between raw reality and interpretation
  - undermined not just for history but even for science: theory-ladenness of observation (Pierre Duhem, WVO Quine, others)
- *structures & contexts:* we make sense of the world through coherent, interlocked structures of meaning. We can't evaluate turth claims outside of those strctures
- These problems are sort-of solved by a variety of movments going by name of *relativism*, but they bring a whole bunch of serious problems with them, especially moral ones.  

Take-home: knowledge about the past turns out to be much more unstable/complex than it first appears. 
- and, even i n the absence of a clear/straightforward standard for "truth" or "objectivity", we still need a standard of "integrity". 

#+END_NOTES
** Truth and Meaning in Oral History
:PROPERTIES:
:CUSTOM_ID: truth-and-meaning-in-oral-history-1ed0
:END:
#+BEGIN_QUOTE
The first thing that makes oral history different, therefore, is that it tells us
less about events than about their meaning...
Oral sources are credible but with a different credibility. The importance of
oral testimony may lie not in its adherence to fact, but rather in its departure
from it, as imagination, symbolism, and desire emerge. (Portelli)
#+END_QUOTE

#+BEGIN_NOTES 
- we can learn about the past /without limiting ourseles to the quest for facts/
- Oral History shines best where it uncovers *relationships of meaning*: how does this union strike or this car bomb explosion or this assasisnation *resonate throughout a community*, and get tied back to actions/events that preceded or followed it? 
#+END_NOTES
*** Politics of engagement
:PROPERTIES:
:CUSTOM_ID: politics-of-engagement-84de
:END:
#+BEGIN_QUOTE
Oral sources are a necessary (not a sufficient) condition for a history of the
nonhegemonic classes; they are less necessary (though by no means useless)
for the history of the ruling classes, who have had control over writing and
leave behind a much more abundant written record. (Portelli)
#+END_QUOTE
- New Social Movements and subversive history
- History from Below: /History Workshop/; /Radical History/; /Race Traitor/
- slow elaboration of self-aware 'engagement' by scholars
- oral history central to this /champs de bataille/
  - challenges to objectivity/fact as goal
  - growing role for /empathy/ as technique
#+BEGIN_NOTES 
- emphasis on meaning leads almost seamlessly into forms of "engagement"
- infiltration of academia by radicals from movements of the 50s, 60s, and 70s.
- interest in harmonizing political work and academic pursuits
- 
#+END_NOTES
*** Oral History as Redemption
:PROPERTIES:
:CUSTOM_ID: oral-history-as-redemption-836b
:END:
#+BEGIN_QUOTE
In the most general sense, once the life experience of people of all kinds
can be used as its raw material, a new dimension is given to history. (Thompson, 24)
#+END_QUOTE
- 1980's: 'testimony' in Central American solidarity movement;
- 1990's & later: /Truth/ and Reconciliation Commissions (South Africa; Australia; Chile; Argentina; Guatemala; Canada)
- tensions between /truth/ and /experience/
#+BEGIN_NOTES 
Having been mobilized as this kind of a tool, Oral History finds its way into many domains of activity beyind the historical profession.  
- tightrope of honoring subjects/subject matter & allegiance to some standard of integrity
#+END_NOTES
*** Ethical Demands of Engagement
:PROPERTIES:
:CUSTOM_ID: ethical-demands-of-engagement-e9c2
:END:
- "Engagement" a terribly difficult stance to maintain
- Not a rejection of 'objectivity', but a refinement
- balancing btwn epistemic virtues
- constant vigilance!
#+BEGIN_NOTES 
- balance objectivity, neutrality, with ethical responsibilities (ov various kinds), also with complex engagements w/ meaning as it propagates across communities.  
#+END_NOTES
** Questions of Form
:PROPERTIES:
:CUSTOM_ID: questions-of-form-47c4
:END:
- transcripts not the same as tape
- tape not the same as digital media
- there are lots of kinds of 'oral history'

#+BEGIN_NOTES 

#+END_NOTES
** Ethics of Oral History
:PROPERTIES:
:CUSTOM_ID: ethics-of-oral-history-3b99
:END:
- historians' responsibilities
  - respect
  - handle materials carefully
  - seek consent at all stages
- Forms 
  - ensure they understand it
  - make sure they KNOW you intend to publish on the web
    - give them MULTIPLE chances to withdraw

** COMMENT Doing an Oral History
:PROPERTIES:
:CUSTOM_ID: comment-doing-an-oral-history-f8d7
:END:
- relationship of respect
- meaning and memory
- conversation, not interrogation
*** Getting Started
:PROPERTIES:
:CUSTOM_ID: getting-started-6da7
:END:
lot of this is about building a relationship
- Research
- contact 
- pre-interview session
***  Pre-interview
:PROPERTIES:
:CUSTOM_ID: pre-interview-7690
:END:
- often by phone
- introduce yourself
- learn what you can
*** Prep
:PROPERTIES:
:CUSTOM_ID: prep-e09d
:END:
- checklist:
  - post-it notes/notebook
  - directions
  - The recorder, batteries
  - the questionnaire, the strategy, your partners(!)
*** The Interview -- starting
:PROPERTIES:
:CUSTOM_ID: the-interview----starting-be18
:END:
- Gift
- assess the surroundings
- small talk
- review informed consent
- establish signals -- raising hand for a break ,etc. 
*** The Interview - -getting going
:PROPERTIES:
:CUSTOM_ID: the-interview----getting-going-ef5a
:END:
- 'This is Matt Price, interviewing ..., on date (incl year!) at his/her house in Toronto On.  The purpose of this interview is to...
- Be aware of verbal tics ('you know,' 'sort of', 'uh', etc.)
- practice responding nonverbally (no 'uh-huh's')
- Logical/chronological order
- Stories and specific memories!! No yes/no questions
*** The Interview, main techniques
:PROPERTIES:
:CUSTOM_ID: the-interview,-main-techniques-149a
:END:
- flexibility.
- open-ended questions (again, no yes/no!)
- follow-up questions!!
- note-taking?
  - *both* for follow-up questions *and* to remind you of what was said
- difficult questions, but with sensitivity
- don't be afraid of silence (feels like forever!!!)
- attention to body language
*** The Interview, finishing up
:PROPERTIES:
:CUSTOM_ID: the-interview,-finishing-up-32e3
:END:
- take breaks
- conclude, schedule another if necessary
- review spellings of names/places
- materials:
  - document loans
  - consider copyright
  - Handle with care
  - return promptly
*** COMMENT Going over the forms
:PROPERTIES:
:CUSTOM_ID: comment-going-over-the-forms-09bb
:END:
*** COMMENT Reportback
:PROPERTIES:
:CUSTOM_ID: comment-reportback-9026
:END:
- how far along have you gotten?
- Any Problems so far?
*** COMMENT In-class interview #2:  
:PROPERTIES:
:CUSTOM_ID: comment-in-class-interview-#2:-d79c
:END:
- 10 minutes in each direction

** Active Listening
:PROPERTIES:
:CUSTOM_ID: active-listening-8adc
:END:
#+BEGIN_QUOTE: 
*Interviewee:* I practically had a nervous breakdown when I discovered my sister had cancer, you know; it was kind of like knocking the pins [out from under me] -- and I had, after the second boy was born, I just had ill health for quite a few years. I evidently had a low-grade blood infection or something. Because I was very thin, and, of course, I kept working hard. And every fall, why, I'd generally spend a month or so being sick -- from overdoing, probably.

*Interviewer:* What kind of farming did you do right after you were married?
#+END_QUOTE:
*** Active Listening
:PROPERTIES:
:CUSTOM_ID: active-listening-eb83
:END:
- Don't be afraid to deviate from script
- pay attention to what you hear
#+BEGIN_NOTES 
- these are skills every historian needs
- of course we *also* need to be careful reading written texts. But the writtne text wil lstil lbe there when we go back to reread. The interview is *actively shaped* by our participation
- OH offers special opportunities when it comes to redirecting your research -- but you have to be able to seize them in the moment.  In this sense, more performative than other parts of history; closer to anthropology, to journalism, in effect, to all theo ther disciplines where OH is used!
#+END_NOTES
** COMMENT Tech Part 1: Mapping Assignment Leftovers
:PROPERTIES:
:CUSTOM_ID: tech-part-1:-mapping-assignment-leftovers-3d69
:END:
first: any questions?
*** Icon Madness 1: symbol definition
:PROPERTIES:
:CUSTOM_ID: icon-madness-1:-symbol-definition-497b
:END:
#+begin_src javascript
// notice how palegreenarrow is not a string value, but an object.
// we're using the symbol api:
//     https://developers.google.com/maps/documentation/javascript/symbols
var blueURL = "http://maps.google.com/mapfiles/ms/icons/blue-dot.png",
    redURL = "http://maps.google.com/mapfiles/ms/icons/red-dot.png",
    paleGreenArrow  =  {
      path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
      strokeColor: "palegreen",
      strokeWeight: 1,
      fillColor: "palegreen",
      fillOpacity: 0.5,
      scale: 4};

#+end_src

#+BEGIN_NOTES 
- in my code, we used *simple string* as value for ~icon~ attribute of each markers. The string *had to be a valid URL* for the marker to work.
- icon can *also accept an object as a value*. This gives us lots and lots of options, which are explained at length & v. technically in the Google API docs.
- Amelia found some of these herself, and they're kind of cool.
- main thing here is that you get *very fine* control over color, opacity, and shape.  
#+END_NOTES
*** Icon Madness 2: Icon Assignment
:PROPERTIES:
:CUSTOM_ID: icon-madness-2:-icon-assignment-5262
:END:
#+begin_src javascript
    // this is an *array* that holds all the marker info
    var all_my_markers =
            [{position: new google.maps.LatLng(41.9000,12.5000),
              map: my_map,
              icon: blueURL, // this sets the image that represents the marker in the map to the one
                             // located at the URL which is given by the variable blueURL, see above
              title: "first Marker",
              window_content: "<h1>Marker1</h1><p> and this would be the extended description</p>"
             },
             {position: new google.maps.LatLng(41.8902,12.4923),
              map: my_map,
              icon: paleGreenArrow, // this sets the image that represents the marker in the map
              title: "second Marker",
              window_content: "<h1>Marker2</h1><p> and <a href='http://something'>this would</a> be the extended description</p>"
            },
            {position: new google.maps.LatLng(41.8986,12.4768),
             map: my_map,
             icon: redURL, // this sets the image that represents the marker in the map
             title: "third Marker",
             window_content: '<h1>Marker3</h1><img title="Picture of Quote. Src: someone, some year"  src="https://s-media-cache-ak0.pinimg.com/736x/6d/e2/25/6de2251b8b4be709dcc936ae4f0caaaf.jpg"/>' +
             '<blockquote>quote quote quote quote</blockquote>'
           }
            ];
#+end_src
*** Circles
:PROPERTIES:
:CUSTOM_ID: circles-bfdb
:END:
#+begin_src  javascript
  var romeCircle = new google.maps.Circle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    // in general, we always have to *set the map* when we
    // add features. 
    map: my_map,
    center: {"lat": 41.9000, "lng":12.5000},
    radius: 1000,
    window_content: "<h4>Circle</h4><p>This is a circle!</p>"
  });

  
  google.maps.event.addListener(romeCircle, 'click', function (evt) {
    infowindow.setContent(this.window_content);
    infowindow.setPosition(this.getCenter());
    infowindow.open(my_map);
  });
#+end_src
*** Rectangles
:PROPERTIES:
:CUSTOM_ID: rectangles-ffd1
:END:
#+begin_src javascript
  var romeRectangle = new google.maps.Rectangle({
    strokeColor: 'purple',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: 'purple',
    fillOpacity: 0.35,
    // in general, we always have to *set the map* when we
    // add features. 
    map: my_map,
    bounds: {
      north: 42.685,
      south: 40.671,
      east: 12.501,
      west: 12.485
    },
    window_content: "<h4>Rectangle</h4><p>This is a rectangle!</p>"
  });

  google.maps.event.addListener(romeRectangle, 'click', function (evt) {
    infowindow.setContent(this.window_content);
    infowindow.setPosition(this.getBounds().getCenter());
    infowindow.open(my_map);
  });

#+end_src
*** Polygons (native google solution, w/ infowindow)
:PROPERTIES:
:CUSTOM_ID: polygons-(native-google-solution,-w-infowindow)-4bdf
:END:
#+begin_src javascript

  // add some misisng code to google! 
  if (!google.maps.Polygon.prototype.getBounds) {
    google.maps.Polygon.prototype.getBounds = function () {
      var bounds = new google.maps.LatLngBounds();
      this.getPath().forEach(function (element, index) { bounds.extend(element); });
      return bounds;
    };
  }
  var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190} //final co-ord is same as first co-ord!
  ];
  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    window_content: "<h4>Bermuda Triangle</h4><p>This is a polygon!</p>"
      });
  bermudaTriangle.setMap(my_map);

  google.maps.event.addListener(bermudaTriangle, 'click', function (evt) {
    infowindow.setContent(this.window_content);
    infowindow.setPosition(this.getBounds().getCenter());
    infowindow.open(my_map);
  });
#+end_src
* Popcorn/Oral History 
:PROPERTIES:
:CUSTOM_ID: popcornoral-history-6ef0
:EXPORT_FILE_NAME: 10-02-popcorn
:END:
** Taking Stock
- The End is Nigh!!
- Assignment 4: Lara has Returned it!
- Assignment 5: Required for *everyone* (!!)
** Oral History Assignment
- intellectual goal: think hard about *nature of oral history*, and *how to use digital media effectively* 
- technical goal: think more about working with non-textual media, about HTML structures, and about APIs (monsters in the deep)
** Before we go further!
pull in upstream changes so you can play w/ up to date code during class today. 
#+begin_src 
git pull
#+end_src

** COMMENT Before Going Further: Update Repos
:PROPERTIES:
:CUSTOM_ID: repo-update-3733
:END:
#+begin_src sh
git push # super important, do this first!!!
git remote add upstream https://github.com/DigitalHistory/advanced-topics.git
git fetch upstream master
git checkout -b update-attempt 
git merge  upstream/master
# if that all works (it should)
git checkout master
git pull upstream master
#+end_src
** What the heck is this? 
:PROPERTIES:
:CUSTOM_ID: repo-update-37fdds
:END:
- *Popcorn*: media "events" framework for audio & video annotation
  - developed by Mozilla for about 5 years before it was orphaned.
  - perhaps being revivified
  - keeps track of media playback, and renders specified web content between start and end timecodes.
  - for us: turns *audio file* into a kind of *imovie-style slideshow* except that the "slides" are arbitrary web content instead of photos.
  - in particular, can include google maps, wikipeida pages, and some other types of content.

** Popcorn framework
:PROPERTIES:
:CUSTOM_ID: popcorn-framework-e5ca
:END:
- Library-Plugin framework
  - main library tracks media element, renders content
  - plugins generate html to feed to main
  - every "event" (or "slide") is generated by *calling a plugin* with a JS object as parameter.  cf. *[[https://github.com/DigitalHistory/advanced-topics/blob/master/js/popcorn-data-from-google.js#L42][line 42 of popcorn-data-from-google.js]]* to see how this works
#+BEGIN_NOTES 
we don't have to worry about the main library

*basically no coding to do o nthis assignment!*
- focus on markdown skills, google sheet
#+END_NOTES
** Plugin Structure
:PROPERTIES:
:CUSTOM_ID: plugin-structure-2f5b
:END:
#+begin_src javascript
  pop.footnote({
    start: 50,
    end: 90,
    text: "Second Footnote!",
    target: "popcorn-container"
  });
#+end_src
#+begin_notes
- plugins define a method of the main popcorn object
- each plugin has its own required and optional parameters, which you can read about in the docs
#+end_notes
 
** Google sheets: API Power
:PROPERTIES:
:CUSTOM_ID: google-sheets-1f77
:END:
Line 16 in [[https://github.com/DigitalHistory/advanced-topics/blob/master/js/popcorn-data-from-google.js#L16][js/~popcorn-data-from-google.js]]:
#+begin_src javascript
    var public_spreadsheet_key = 'https://docs.google.com/spreadsheets/d/1pL_Lj62_ZcW7iawTCQ_5BQsmdynCtC8y5BCNy3k2LOM/pubhtml?gid=0&single=true';
#+end_src
- uses Google JSON API, which represents each spreadsheet row as a JSON object
- column headers as property names
- script iterates through rows & invokes appropriate popcorn plugin for each row, w/ column values as plugin parameter properties
- if you use some other plugin that I haven't mentioned, you may need to add a column!
- *YOU DON'T HAVE TO DO THE PROGAMMING WORK* -- managed for you

** Tabletop: small interpreter demon
:PROPERTIES:
:CUSTOM_ID: repo-update-32309428
:END:
- Google Spreadsheets API speaks a Byzantine language of Hell
- Tabletop lets you speak simple JS
- cf [[https://github.com/jsoma/tabletop#1-publishing-your-google-sheet][very clear and helpful Tabletop instructions]] and also [[https://github.com/DigitalHistory/advanced-topics/blob/master/js/popcorn-data-from-google.js#L21][line 21]] in popcorn-data-from-google.js: 
#+begin_src js
var mytables = Tabletop.init( { key: public_spreadsheet_key,
                                callback: processInfo ,
                                simpleSheet: false } );
#+end_src

** Before we go further!
pull in upstream changes so you can play w/ up to date code during class today. 
#+begin_src 
git pull
#+end_src

** Getting Started: First, Copy Spreadsheet
:PROPERTIES:
:CUSTOM_ID: repo-update-37330908fdsa
:END:
#+begin_slideblock
- go to my sheet: https://docs.google.com/spreadsheets/d/1pL_Lj62_ZcW7iawTCQ_5BQsmdynCtC8y5BCNy3k2LOM/edit#gid=0
- ~File~ --> ~Make a copy~
- Under ~File~ --> ~Publish to the web~, make sure yr sheet is published
- *NOT DONE YET!*
- go to "Share" and "Copy Link to Share"
- *this is your new key!!!!*
- insert into your js file
#+end_slideblock

#+begin_slideblock
*Alternative Method*
#+begin_src javascript
  var public_spreadsheet_key = 'https://docs.google.com/spreadsheets/d/1pL_Lj62_ZcW7iawTCQ_5BQsmdynCtC8y5BCNy3k2LOM/pubhtml?gid=0&single=true';
#+end_src
- Replace *ONLY THE PART BTWN /d/ and /pubhtml* with the spreadsheet "key" from yr new sheet
#+end_slideblock

** Styling Popcorn Plugins
:PROPERTIES:
:reveal_extra_attr: class="twoc"
:END:
#+begin_slideblock
*Page-specific code is found in ~/css/oh-styles.css~*
#+begin_src css
.main-container {
    grid-template-areas: "intro popcorn" "main main";
    grid-auto-columns: 1fr;
    grid-template-rows: 50vh 1fr;
}
aside#popcorn-container {
    grid-area: popcorn;
    background-color: var(--color-highlight2);
    border: 1px solid var(--color-custom-borders);
    display: flex;
    flex-direction: row;
    overflow-y: scroll;
    overflow-x: hidden;
    flex-wrap: wrap;
    max-height: 100%;
    /* space things out! */
    justify-content: space-around;
}
aside#popcorn-container > * {
    /* default base width for plugins */
    flex-basis: var(--default-width);
    flex-shrink: 1;
    flex-grow: 1;
}


/* most of the plugins will create divs or other elements w/ class "pluginname-plugin" */
/* here's one example of styling particular plugins differently from others */
#popcorn-container figure.figure-plugin {
    /* an example of setting the figure as a bit larger than the others.  */
    flex-basis: calc(var(--default-width)*4/3);
    max-width: 100%;
}

#popcorn-container .leaflet-plugin, #popcorn-container .googlemap-plugin {
    /* make these full-width by default */
    flex-basis: 100%;
}

/* you can also use the `id` column to address *most* plugins (but not all!) */
#+end_src
#+end_slideblock
#+begin_slideblock
*Some thoughts*
- if you are using a video (instead of audio), you may want to *make changes to the grid*. e.g., you might want to put the video inside the grid, next to the annotations, and either move intro to its own row or just eliminate the intro section altogether. This would likely involve change to the HTML as well.
- *are you happy with the default display of the plugins?* This design assumes that you are unlikely to have more than 2 plugins visible at the same time. If you never have more than one, you may want to set ~--default-width~ to ~100%~. Maybe you don't even want to use a flex container!
- *set plugin-type and plugin-instance CSS with class and id properties*. In general, plugin instance containers have both a plugin-specific class ~pluginName-plugin~ and an instance-spcific id (the ~id~ property you set in a spreadsheet row). 
- *notice the use of CSS variables*. The syntax can sometimes feel a little heavy, but ultimately they mike life a lot easier.  
#+end_slideblock
** Getting Started with code
:PROPERTIES:
:CUSTOM_ID: repo-update-37332l3j4
:reveal_extra_attr: class="twobytwo"
:END:
#+begin_slideblock
*Install npm & run server*
#+begin_src sh
cd advanced-topics-yr-name
npm install 
npm run server &
#+end_src
#+end_slideblock
#+begin_slideblock
*Navigate to your site*
#+begin_src sh
firefox localhost:8080/oral-history
#+end_src
#+end_slideblock
#+begin_slideblock
*use DevTools to look for errors*
[[./Images/console.png]]
#+end_slideblock
#+begin_slideblock
*Error Sources*
- bad spreadsheet URL
- bad time codes etc. in spreadsheet
- JS syntax errors in ~popcorn-data-from-google.js~
- JS syntax errors in ~index.html~
#+end_slideblock


** Good and Less Good Annotations
:PROPERTIES:
:reveal_extra_attr: class="twoc"
:END:
#+begin_slideblock
*Good Annotations:*
- Add context/info
  #+begin_quote
  /Stunde null/ ("hour zero") refers to the period of time directly after World War II, when the future direction and status of the old German Reich was radically undertain, and a dramatic reset of all social and political expectations seemed inevitable.
  #+end_quote
  @@html:<iframe style="width:100%; height: 20vh" src="https://en.wikipedia.org/wiki/Stunde_Null"></iframe>@@
- clarify content
  #+begin_quote
  "His Holiness", that is, the Dalai Lama.
  #+end_quote
- enhance rather than distract
#+end_slideblock
#+begin_slideblock
*Less Good Annotations:*
- are not directly tied to what's being discussed in your media file
- pass too quickly to be comprehended in real time
- are too cluttered to interpret
#+end_slideblock

** Extra fun
:PROPERTIES:
:CUSTOM_ID: seek-function-a7fd
:reveal_extra_attr: class="twoc"
:END:
#+begin_slideblock
*Seek Function*
#+begin_src javascript
const seek = function (time) {
 document.getElementById("media").currentTime= time;
 }; 
#+end_src

Use in Markdown thus: 

#+begin_src markdown
When <a href="javascript:seek(75)">Jonathan discusses the trauma of wartime (1:15)</a>, 
he uses language that clearly echos that of professional psychiatric discourse as it 
came into vogue in the 1970's. 
#+end_src
#+end_slideblock

#+begin_slideblock
*Styling media container in chrome*
#+begin_src css
audio::-webkit-media-controls-enclosure {
    background-color: rgba(20,20,20,0.4);
    border-radius: 5px;
}
audio {
    width: 100%;
}
#+end_src
#+end_slideblock



** Your Questions/Efforts

* 11: Oral History & Remix Culture                                 :noexport:
:PROPERTIES:
:EXPORT_FILE_NAME: 11-oral-history
:CUSTOM_ID: 11:-oral-history-&-remix-culture-3cc1
:END:
** Copy Spreadsheet
- go to my sheet: https://docs.google.com/spreadsheets/d/1pL_Lj62_ZcW7iawTCQ_5BQsmdynCtC8y5BCNy3k2LOM/edit#gid=0
- ~File~ --> ~Make a copy~
- Under ~File~ --> ~Publish to the web~, make sure yr sheet is published
- the "key" is btwn ~/d/~ and ~/edit~
** Spreadsheet URL
#+begin_src javascript
  var public_spreadsheet_key = 'https://docs.google.com/spreadsheets/d/1pL_Lj62_ZcW7iawTCQ_5BQsmdynCtC8y5BCNy3k2LOM/pubhtml?gid=0&single=true';
#+end_src
- Replace *ONLY THE PART BTWN /d/ and /pubhtml* with the spreadsheet "key" from yr new sheet
** Run server
#+begin_src sh
cd advanced-topics-yr-name
npm install 
npm run server &
#+end_src
** Open in browser
#+begin_src sh
firefox localhost:8080/oral-history
#+end_src
** use DevTools to look for errors
[[./Images/console.png]]
** Error Sources
- bad spreadsheet URL
- bad time codes etc. in spreadsheet
- JS syntax errors in ~popcorn-data-from-google.js~
- JS syntax errors in ~index.html~
** Good and Less Good Annotations
- Add context/info
- clarify
- Comment
* 12: Citizen History                                     
:PROPERTIES:
:EXPORT_FILE_NAME: 12-citizen-history
:CUSTOM_ID: 12:-citizen-history-815e
:END:

** Reminders
- Oral History due shortly
- Proposal due immediately after
- sorry no snacks!
** What we've learned
*** Text is Code
- all our work is "digital" now
*** The 3 layers of the web
- structure
- presentation
- dynamism
*** The "Public" and "the Public Sphere"
- media constrain the possible
- the "public" is probably not unitary
- don't have to be a genius to make a contribution
*** Invocations and Incantations
- Using APIs to take advantage of other people's work
- writing only what you have to
*** Open and Closed Systems
- what "open source" means for us
*** Maps and Legends
- organizing stories around space
- digital maps are spcial
*** Storytelling
- the distinctive features of oral history
- problems of truth and objectivity
- collaboration and authorship
** What you might do
/History doesn't have to stop at graduation/
*** Changing Landscape of Profession and Expertise
:PROPERTIES:
:CUSTOM_ID: changing-landscape-of-profession-and-expertise-4204
:END:
- how will "professionalism" stretch and change shape in the future?
*** Continuing as "historian" after graduation
:PROPERTIES:
:CUSTOM_ID: continuing-as-"historian"-after-graduation-2a55
:END:
- history fora & groups
- participating in crowdsourced projects
- writing with a historian's eye
*** Use your new skills!
- you're not a programmer yet, but you now understand how code works
- lots of ways to learn
- lots of roles for "demi-geeks"
*** History and Digital Literacy as Citizenship
#+begin_notes
remind everyone that we live together in a world shaped both by the events of the past and by a tremendously powerful media landscape. Charting a course through this new world requires some understanding of both. Promises and pitfalls of DH are the promises and pitfalls of the new world.   
#+end_notes
** Congratulations!
#+begin_notes
you've all come a really long way this semester. Lots of your cohort quit before you did. Even if you are just scraping by, you have had to work to a high standard. You deserve a round of applause!
#+end_notes
* COMMENT Assignments                                              :noexport:
:PROPERTIES:
:CUSTOM_ID: comment-assignments-cf12
:END:
** HTML Coding Assignment (what????)
:PROPERTIES:
:CUSTOM_ID: html-coding-assignment-(what????)-8ede
:END:
** Data Munging Assignment (what?)
:PROPERTIES:
:CUSTOM_ID: data-munging-assignment-(what?)-dc58
:END:
** Data Visualization
:PROPERTIES:
:CUSTOM_ID: data-visualization-187e
:END:
** Google Map Mashup
:PROPERTIES:
:CUSTOM_ID: google-map-mashup-ed4f
:END:
** Oral History Remix
:PROPERTIES:
:CUSTOM_ID: oral-history-remix-e3c3
:END:
** Paper
:PROPERTIES:
:CUSTOM_ID: paper-06b4
:END:
** 
:PROPERTIES:
:CUSTOM_ID: -3a2d
:END:

# /home/matt/Pictures/Screenshot from 2015-06-23 16-12-51.png http://relsci.hackinghistory.ca/wp-content/uploads/2015/06/wpid-Screenshot-from-2015-06-23-16-12-51.png




# /home/matt/DH/Images/louvre-jean-baptiste-greuze-la-lecture-de-la-bible.jpg http://2015.hackinghistory.ca/wp-content/uploads/2016/03/wpid-louvre-jean-baptiste-greuze-la-lecture-de-la-bible.jpg
# /home/matt/DH/Images/jos-wri-airpump.jpg http://2015.hackinghistory.ca/wp-content/uploads/2016/03/wpid-jos-wri-airpump.jpg
# /home/matt/Dropbox/Work/History/DigitalHistory/Images/van_thunen_zones.jpg http://2015.hackinghistory.ca/wp-content/uploads/2016/03/wpid-van_thunen_zones.jpg
# /home/matt/Dropbox/Work/History/DigitalHistory/Images/railroads.jpg http://2015.hackinghistory.ca/wp-content/uploads/2016/03/wpid-railroads.jpg
# /home/matt/DH/Images/lying-w-maps-birth-rates1.jpeg http://2015.hackinghistory.ca/wp-content/uploads/2016/03/wpid-lying-w-maps-birth-rates1.jpeg
# /home/matt/DH/Images/lying-w-maps-birth-rates-2.jpeg http://2015.hackinghistory.ca/wp-content/uploads/2016/03/wpid-lying-w-maps-birth-rates-2.jpeg
# /home/matt/DH/Images/concession_roads.jpeg http://2015.hackinghistory.ca/wp-content/uploads/2016/03/wpid-concession_roads1.jpeg
# /home/matt/DH/Images/surveyor.jpeg http://2015.hackinghistory.ca/wp-content/uploads/2016/03/wpid-surveyor.jpeg
# /home/matt/DH/Images/line_cut.jpeg http://2015.hackinghistory.ca/wp-content/uploads/2016/03/wpid-line_cut.jpeg

* COMMENT Variables                                                :noexport:
:PROPERTIES:
:CUSTOM_ID: comment-variables-84fe
:END:

# /home/matt/HackingHistory/Images/nytimes-w-css.png http://digitalhistory.github.io/wp-content/uploads/2017/01/wpid-nytimes-w-css.png
# /home/matt/HackingHistory/Images/nytimes-no-css.png http://digitalhistory.github.io/wp-content/uploads/2017/01/wpid-nytimes-no-css.png

local variables need to be set at the end of the file.  
# Local Variables:
# org-time-stamp-custom-formats: ("<%b. %d>" . "<%Y-%m-%d %H:%M>")
# mwp-start-date-timestamp-calibration: ("<2019-01-03 Thu>" "<2019-01-01 Tue>" )
# End: