Digital writing

Welcome!

---

Plan for the day:

• interfaces for reading and writing
• react recap, then props and routing

---

Reading interfaces

---

The three readings articulate around the changes of how information, and text in particular, is represented through software.

---

Computational Poetics

Dennis Tennen, Computational Poetics.

Where is the word stored? and how?

---

3000 B.C. writing appears, we write to remember what we said

The medium evolves:

• clay tablets
• stone carving
• linen
• scrolls
• codex (books)

---

Books as a means to communicate knowledge.

---

1950 A.D. writing disappears

---

The last people who really wrote are the ones who write software.1

---

Text is no longer what it used to be, it's hidden, it's distant, it's changing.

---

Reading Interfaces

Johanna Drucker, Reading Interfaces.

Why, and how should we pay attention to our interfaces?

---

Communication has always been mediated:

• body language (pre-alphabet, expression of emotions, shared with animals)
• speech (tone, emotions, sincerity, irony) (answer) (synchronous)
• writing (alphabetical) (asynchronous) (rhetoric) (prayers and legal texts)
• writing (numbers) (quantity and money, how much a thing is worth) (abstracting things) (numbers can be in a rigorous sequence, and a rigorous system)
• code (numbers and letters)

---

An interface is a kind of medium which is explicitly designed.

How interfaces make us think?

---

The first computer interfaces were:

1. punched cards
2. switches and lights
3. pixels (text).
4. pixels (images)

---

A writing interface that frames how we write.

---

A reading interface that frames how we read.

---

A mental model is never the same as physical reality, but tries to map on to it.

How complex should the mental model be?

iMovie vs. AfterEffects

---

speech involves the present, the immediate. it has the most emotion and is directly social.

writing involves the past, lasting throughout the ages and is less personal, asynchronous.

coding involves the network and the dynamism of the document (also having to deal with maths :/ ).

---

each form of communication has an aspect of co-creation

• speech -> live discussion
• writing -> async quoting
• code -> modification and connection

---

Electric Zine

Nicholas Froio, Electric Zine Maker as a creative DIY Open-Source tool.

The transformation of the medium involves transformations of practices.

---

What is open-source?

---

Lowering barriers to entry involve:

• (almost) no-cost sharing
• accessibility
• community

---

The zine a.k.a. punk publishing!

---

• special.fish
• trashheap.party
• artistic library of print on demand
• zine-machine

---

The transformation of a medium can involve new dependencies and new possibilities.

---

React

---

• Recap (what is react, what are the files?)
• Components (how to separate documents in re-usable parts)
• Routing (how to direct the user to different components)

---

Recap

---

React is a framework to make interactive webpages.

---

We write components: JS files that generate (return) HTML components.

---

Components can be combined by importing and exporting.

---

Anatomy of a component:

// importing some stuff at the beginning

export default MyComponent(/* possibly some stuff here */) {
    // possibly some stuff here
    return (
        

        // always some HTML here
        // sometimes mixed with JS
        
    )
}

---

weird note: the return can only have one HTML element at the top.

<div><p></p></div>

and not

<div>
</div>
<p>
</p>

---

Routing

---

Routing is the process of deciding what to show based on a URL.

https://mydomain.com/path?query=value

What interests us here is the path.

---

---

First, we setup a router component with all the possible available pages.

Second, we import all the components we want to display and add them to the routes.

Third, we put this router on the main files app.jsx (every visit will go through this router).

---

Props

---

Do I need to make a whole new component for every piece of information I want? No!

We can separate form from content.

---

Form > components

Content > props

---

We can pass different props (content) to the same component, to have different results!

---

export default TheReadingResponse({title, text}) {
    return (
        

            
{title}
            
{text}
        
    )
}

import {TheReadingResponse} from "./TheReadingResponse.jsx"
export default ReadingResponses() {
    return(
        

            
            
        
    )
}

---

Demo:

Display a summary card for each of the reading responses.

---

Exercise:

Add a new page to your website on which you will show multiple components that make use of props.

For instance, it could be an image gallery, a notebook with some thoughts, a list of the places you've visited in Berlin, etc.

---

Detailed steps:

1. Add a new file in the pages folder
2. Modify the router to include a route to this new page
3. Add a new component in the components folder. Make sure the arguments of the function can include props
4. Import the new component inside your new page
5. Pass some props to the page.
6. Style it nicely!

---

Outro

---

The digitalization of writing is a significant change in the (long!) history of writing. It comes with pros (access, modification) and cons (ephemerality, loss of agency due to interfaces).

---

Homework:

• Book learner hours.
• Post your reading response on your React website, using a new route.
• Read Getting Started With React .

---