Web is a bunch of lists, let's break it (OER)
Section outline
-
-
In which we look at what we already know about programming without knowing it. We also think about digital media, and pick up the tool we will be using.
Hello world! 👋
🏭 Guided activity
Open the browser developer console and type the following.console.log("Hello world!");Typing and running that program introduces all the concepts of object, method call, argument, string, statement, a line of code, source code and execution have already been introduced.
As we learn to program, we will encounter a lot of strange vocabulary. Why? Because in programming terms are typically quite specifically defined. Some of their origin is in specialized fields such as mathematics, engineering, Philosophy and linguistics, and subfields of programming.
It is good to learn early how to do online searches on programming topics. The search engines will need to know the name of the functionality, and context, plus what the answer is about; opening the developer browser-specific, so consider which browsers are in use, and compose a search query. The search “firefox how to open developer console” works for me. At the time of writing in 2023, the google search result listing should contain the answer, negating the need to click through to the website google extracts the snippets from. Something to critique already.
What is programming?
What activities come to mind with the word “programming”?
🏭 Guided activity
What comes to mind from the word “programming”? What are some preconceived and received ideas what programming is?One view is that programming is use of written language to make computers do things.
[!quote] As you will see, programming interweaved human languages and computer languages. ~ Soon + Cox 2020, pp. 44-45
We already saw in the “Hello world” program above that some parts of the language are meant for humans: “Hello world” and some for computers: “console.log”, “(…)”, “;”.
console.log("Hello world!");When studying and teaching programming, you will probably encounter various placeholders which try to keep visible the concrete code and the more abstract pattern it tries to demonstrate. Some usual ones are
foo,bar,qux,i,f,x, andtestandasdf. You can read more about these “metasyntactic variables” and interweaving of human and computer languages more generally for instance in the following research paper:- Brian Lennon (2021). Foo, Bar, Baz…: The Metasyntactic Variable and the Programming Language Hierarchy. Philosophy & Technology. 34, pp. 13-32
Writing code is the most quintessential programming activity. There are others…
🏭 Guided activity
Could you name some other programming activities than writing code?These could include for example
- Reading code
- UI design and UX design
- Debugging
- User testing
- Making diagrams
- Software maintenance
- Writing documentation
- Modeling (what is that?)
- …
Why program?
According to Nick Montfort in Exploratory Programming for the Arts and Humanities 2nd ed. 2021 (MIT Press)
Montford lists three reasons why programming is worth learning, plus a bonus reason.
- allows us to think in new ways
- offers us a better understanding of culture and media systems, and
- can help us improve society
- Bonus reason: fun; poetic and creating pleasure
A critique of that list could be, that those reasons could apply to many other things too. Can you list some less wholesome activities which would be justified by the above reasons?
Cover of Montfort’s Exploratory Programming for the Arts and Humanities (Image from book website, CC BY-NC-SA license) According to Geoff Cox & Winnie Soon in Aesthetic Programming: A Handbook of Software Studies. Open Humanities Press. 2020 🔓
[!quote] In general, we agree with Montfort on these points, but at the same time we see this as a means to open up different working methods, and, using programming as a basis for our thoughts, to speculate on alternative forms and political imaginaries of programming practice.
According to Code Week Germany
[!quote] Jedes Jahr im Herbst engagieren sich Hunderte Menschen und Initiativen in ganz Europa, um Kinder und Jugendliche für die digitale Welt zu begeistern.
[!question] Take a look at Code Week Germany website. Who is it aimed at? Who is it trying to convince and about what? Do you see some events nearby you?
It does not matter whether you speak German or not – look at the pictures, colors and other clues designed for Code Week Germany.
What reasons for programming have you encountered earlier? Has “fun, poetry and creative pleasure” among those reasons? What about changing society? Or making strange sounds for private pleasure?
Hello all the worlds!
Now after a hello world, let’s generalize to hello all the worlds. Generalization of solutions is a typical move in programming, and we often want to write programs not to work in a specific situation only, but to many similar situations. Why do you think this makes sense?
Look at the following program and read it aloud. Do you get an overall intuition what it does?
all_the_paragraphs = document.querySelectorAll('p'); all_the_paragraphs.forEach(p => { p.innerText = "Hello world"; p.style.color = "green"; });🏭 Guided activity
Go to any website, open the developer console, and copy+paste the following program and run it. What happened? Looking at the code above, what two things could easily be changed to make modify the effect of the program when run on a website? Try it.Praxis and exploration
What comes to your mind when you hear the word praxis or practice? Check up a dictionary. In the context of where I developed this course, I was trying to think of praxis as an alternative to a project
Praxis Project Open-ended Goal-oriented Inseparable from a person Transferrable (e.g. as a product or job) Never complete Naturally ends Towards perfection Towards good-enough Internal motivation External motivation The last point about internal versus external motivation reminds of the argument of Bernard Suits’ fun book The Grasshopper: Games, Life and Utopia from 1978 which extend Æsop’s famous fable about the and and the grasshopper.
The word “exploratory” is in the title of Nick Montford’s book. What does he mean by it?
It is important that you take time to explore software on your own. Smaller the explorations the better! Draw from what your already know about and what you have been interested in before. Music, graphics, games, sports, cooking, using social media, collecting manga… all those areas can inspire programming.
Show and Tell
It is a good idea to show your code to someone while you are learning. It can also be really hard and awkward. Make sure to do so in safe company; this is better in person than online (people can be rude). Show your program to your mom, friend, teacher, partner… Not just the output of your program, but the code too. Can you explain to them what the code does? “Explainability” of computer software and AI is a trending topic in 2023.
HTML, CSS, JS – name a more iconic trio
We could say that HTML, CSS and JS are the skeleton, skin and brains of the internet as we know it. More and more of our interfactions with the computer and digital media happens via this trio.
[!question] Does the trio HTML, CSS and JavaScript sound familiar?
Three separate tasks
Let’s look at the website of the Institute for Media Studies at Ruhr-University Bochum. From the computer’s perspective it could look the following combination of HTML, CSS and JavaScript. The last one of these, JavaScript (aka JS) is the focus os this programming course.
Hypertext Markup Language (HTML) for structured content:
<html> <menu>home,news,studium,forshung</menu> <section> <h1>Institute für Medienwissenschaft</h1> <p>Über uns</p> <p>Das <em>Institut für Medienwissenschaft</em> an der Ruhr-Universität Bochum besteht seit 2002 und ...</p> <p>Insgesamt drei Studiengänge werden dabei vom Institut angeboten zu denen Sie unter den folgenden Links weitere Infos finden</p> </section> <section> <p>Unsere Services</p> </section> <footer>Kontakt,Impressum</footer> </html>Like this in Cascading Stylesheets (CSS) for layout and design
body { background-color: lightblue; } p { background-color: white; font-size: 12; }Javascript (JS) for interaction
cookie_popup.onclick(store_cookies);This website let’s you play around now these three play together https://html-css-js.com.
[!note] Popular! Word documents, eBooks, many mobile apps, infoscreens are actually made similarly out of HTML+CSS+JS. This page too is build using that trio
Developer tools UI tour
🏭 Guided activity
Get familiar with the basics of the developer tools of your browser. Especially learn the main tab, the coding view and how to run code there. In the document tree view you can point at things to inspect them, and the browser will highlight also in the normal view what are you pointing at.All web browsers on a computer have “developer tools”. These are powerful tools to make websites. Professional, semi-professional and amateur web designers use it all the time. The developer console is, however, not available on mobile phones or tablets. While those are very capable devices, they are in this aspect incapacitated devices more suitable for media consumption of certain types of media like video, images and text. This is a ironic, since so much of internet content such as videos and photos are made on the mobile phone. Why do you think the mobile devices lack developer tools?
🏭 Guided activity
We have surely already encountered some error messages. Error messages are very useful. Let’s look closely at some of the ones already seen. What do they try to tell us? Do they hint at where the problem might be? What part of the error message could be useful to copy-paste into a web search enginer to try to solve the problem?🏭 Guided activity
We started with the small “hello world” program. It is famous, and Soon+Cox book talks about it, as do many other sources. Consider other whether areas of life, where new learners are given some example which has canonical status. List some.Exploration of breaking the web
- Read Nick Montfort. 2022. Explorative Programming for the Arts and Humanities chapter 1. Introduction
- 1.2 Exploration versus Exploitation
- 1.5 Programming Breakthroughs
- 1.7 Free Software and No-Cost Software
- 1.8 Programming and Exploring Together
- 1.9 Program as You Go, Testing Yourself
- Break the web by following the diagram below. Start from “find a website”
Diagram by Mace Ojala (CC BY-NC-SA) Here is a little program you can try
document.querySelectorAll('p').forEach(element => element.innerText = "medium is the massage");Try different values for HTML tag
p(a,h2,h3,h4) and string"medium is the massage". At the end of your program, write a little comment where you document what you thought about the website, and what you decided to do./* I thought that it would be better if this page had social media metrics removed because numbers tend to be taken too seriously (Porter 1995). */Your program might not work since we are just starting (and that’s fine), but it’s important that your try! Take screenshot of what you tried to do.
[!tip] PS. It does not need to work
But take screenshots nevertheless.
-
-
-
In which we take what we have learned so far, venture out to the web, and cause some chaos.
Core concept: Objects
An object represents a-thing-in-the-world. Let’s continue with websites
Diagram by Mace Ojala (CC BY-NC-SA) Objects have properties and methods. Objects are collections of those (and almost nothing more)
object = { property1: value1, property2: value2, ... }What’s the point? 🤔❓
Types and the type/token distinction is a classic topic in Philosophy. (Depending on your position), the type itself is abstract, but however shared with all the concrete objects of that type. Many objects have the same type, and we can operate on all of them if we can operate on the type;.
- any array can be sorted
- any paragraph can be made green
- any button can be clicked
- pixels of any image can be manipulated
- any post can be liked
- any user can be followed
- any cookie can be sold
- any email has sender, recipient, date and subject
- …
Objects have properties and methods
object.property; // Getting object.property = value; // Setting object.method(); // Calling a method without arguments object.method(argument); // Calling a method with argumentsEarlier we already set the
innerTextproperty of an HTMLp(=paragraph) objectinnerText = "Hello world"And called
logmethod of theconsoleobjectconsole.log("Hello world!")Programming is basically all about organizing statements like the above to manipulate objects, their properties and their methods in some interesting and relevant way.
Some simple JavaScript objects types
value type “Hello world!” String 4 Number [‘cat’, ‘mouse’, ‘lizard’] Array ⋮ ⋮ 🏭 Guided activity
What else you could imagine represented as objects?Beyond simple types, when we surf the web, one very complex object we manipulate is
document. It represents the current webpage we have loaded in the browser. You can read more e.g. in Ulrich Kaiser, Ilka-Mestemacher and Theresa Ulbricht’s Webtechnologie (1)🏭 Guided activity
Read Montfort chapter 3 Modifying a Program and add more words to https://nickm.com/memslam/stochastic_texts.html, which is a version of Theo Lutz’s Stochastische Texte (1959).Selecting elements of document
🏭 Guided activity
Input a “CSS selector”, return the first matching element.document.querySelector('.btn').click() // querySelector selects the 1st matchNow let’s select all the elements of a type, and do something for each.
document.querySelectorAll('img').forEach(image => { a_twist = "rotate(0.5turn)"; image.style.transform = a_twist; })🏭 Guided activity
What happened? What would be next, small steps?Different twist for each image
document.querySelectorAll('img').forEach(image => { a_twist = "rotate(" + Math.random() + "turn)"; image.style.transform = a_twist; })Setting element’s contents
e.innerText = "Hello world!"Hiding elements by setting
HTMLElement.hidden, after selecting them with from the document.🏭 Guided activity
A basic ad blocker works like the above code. Who is using an ad blocker? Discuss what do you think about your ad blocker, and and blockers in general?🏭 Guided activity
Select a media player on a website with audio or video files, and manipulate it’s playback speed. The players will beaudioorvideoobjects.Exploration of breaking the web
Same as last time, but with more feeling! This time Work with a friend; use https://www.w3schools.com/js for help.
Diagram by Mace Ojala (CC BY-NC-SA)
-
-
-
In which we look at the humble list, and consider the proposition that everything is a list, no more no less. If this is so, what are it’s implications? What can or could we then do?
Arrays
An example list
[!quote] Jorge Luis Borges (1942) The Analytical Language of John Wilkins. These ambiguities, redundancies and deficiencies remind us of those which doctor Franz Kuhn attributes to a certain Chinese encyclopaedia entitled ‘Celestial Empire of Benevolent Knowledge’. In its remote pages it is written that the animals are divided into: (a) belonging to the emperor, (b) embalmed, (c) tame, (d) sucking pigs, (e) sirens, (f) fabulous, (g) stray dogs, (h ) included in the present classification, (i) frenzied, (j) innumerable, (k) drawn with a very fine camelhair brush, (l) et cetera, (m) having just broken the water pitcher, (n) that from a long way off look like flies.
Liam Cole Young’s book 2017 List Cultures: Knowledge and Poetics from Mesopotamia to Buzzfeed discusses lists in depth.
🏭 Guided activity
What characterizes a list, and how do you know you are looking at one? What properties does a list have? What’s a good list? Discuss what you have done with lists this week? What are some of the most interesting / boring lists you know about? What would you like to do with them?In JavaScript syntax
[element, element, ...] ╙╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╨╌╌╌╌ Square brackets surround the array. ╙╌╌╌╌╌╌╌╌╨╌╌╌╌╌╌╌╌╌ Commas separate the elements.Examples
A webpage is a kind of a list, here is a list of images on a University webpage…
Considering the two-dimensionality (width and height) of the screen, we could alternatively conceptualize the above as a list of 3 rows, each with a list of 2 images – an array of arrays.
[3, 12, 50, 3] // an array of numbers [[3, 12],[50, 3]] // an array of array of numbers ["belonging to the emperor", "embalmed", "tame", "suckling pigs"] // an array of strings plants = [] // an empty arrayAssigning an array to a variable.
animals = ["belonging to the emperor", "embalmed", "tame", "suckling pigs"]To assign an array to variables is to store data in computer memory, and later manipulate it there. See Variables (pp. 60-62) and Why use variables? (p. 62) in Soon+Cox Æsthetic Programming.
Use whitespace for readability of arrays. Example list of animals according to the Celestial Empire of Benevolent Knowledge (from Borges 1942).
animals = ["belonging to the emperor", "embalmed", "tame", "sucking pigs", "sirens", "fabulous", "stray dogs", "included in the present classification", "frenzied", "innumerable", "drawn with a very fine camelhair brush", "et cetera", "having just broken the water pitcher", "that from a long way off look like flies"]Arrays are useful, here are some typical array operations.
animals[5] // "indexing" animals[5] = "sirens" // Replace 6th animal with lizard animals.sort() animals.length // How many animals are there? animals.includes("sirens") // A question, returns true or false animals.push("sirens") // Add to end of array. animals.pop() // Take from end of array. animals.forEach(animal => { // one animal at a time... action // ...first take this action another_action // then take this action... })🏭 Guided activity
See JavaScriptArrayreference online.Splitting a string to an array
"belonging to the emperor,embalmed,tame,suckling pigs".split(',')Imagine e.g. splitting a book (=a very big string) into list of sections, a paragraph into list of sentences, or sentence to list of words, a word into a list of characters…
The reverse of
String.split()isArray.join().array.join(separator)animals = "belonging to the emperor,embalmed,tame,suckling pigs".split(',') animals.join(";")[!tip] Remember
arrayis just a strange word for a list.🏭 Guided activity
Discuss this thesis: Internet is nothing but a big list.Iteration over an array
- “Do the same thing many times” (for each item in an array)
- “Looping” (over an array)
- “Algorithm”
In Javascript syntax
Array.forEach(element => {action})document.querySelectorAll('img').forEach(photo => { a_wiggle = "rotate(" + Math.random() + "turn)"; photo.style.transform = a_wiggle; })🏭 Guided activity
Aah cookie popup, a familiar trope on the internet! Observe this familiar item from the internet, the cookie popup! Go to website and look at it’s cookies:document.cookie[!tip] “Array” is a strange word for “list”. Array is one of many types of collections, or more generally data structures.
🏭 Guided activity
Discuss what “data structures” you might have heard about or could imagine. What does “data structure” bring to mind?Exploration of arrays (lists)
- Read the preface of Liam Cole Young. 2017. List Cultures. Knowledge and Poetics from Mesopotamia to BuzzFeed.
- Make a list of lists in that chapter.
- In Javascript, copypaste the chapter from PDF into variable called
preface.- Using Javascript, explore the chapter.
- How many words? How many commas? What’s the longest sentence? Add a new sentence. Sort the sentences etc…
[!tip] - Remove newlines when copypasting into a string. - Consult the string and
Arraydocumentation for interesting methods.
-
-
-
In which we take a list of things and perform an action for each of them.
Exploring Young’s preface using JS
🏭 Guided activity
What did you google?preface.split(' ').lengthpreface.split(',')[0]
// First, split the preface to sentences. sentences = preface.split('. ') // Second create an empty container for sentence lengths. sentence_lengths = []; // Third, get the length of each sentence and add it to collection. sentences.forEach(sentence => { len = sentence.length; sentence_lengths.push(len); }) // Finally, print the number of "w"s each sentence is long. sentence_lengths.forEach(len => { bar = "w".repeat(len); console.log(bar); });🏭 Guided activity
What characterizes a list?The comma:
,It looks kind of like a dot
.but which is falling. ,. What else might be falling?
Photo by Mace Ojala (CC BY-NC-SA)
Read the following code aloud by saying all the words which are familiar from English language.
- Say
autumn = []as “let autumn be the empty list” - Say
"=="as “equals”
autumn = []; preface.split("").forEach(letter => { if (letter == ",") { autumn.push("🍂") } else { autumn.push("🍃") } }) forest = autumn.join("") console.log(forest)It is an autumn simulator! Observe a new, important concept: the
if/elseconditional.🏭 Guided activity
What variation of the above program could you do for another text that Young’s preface? Try an email, your thesis, or a transcript of a famous speech.🏭 Guided activity
Discuss what is a list, according to Young?Further into the introduction chapter, Young’s introduces lists as cultural techniques, Kulturtechnik (Siegert, Krämer etc.)
- How to explain this persistence?
- What can its varying historical functions teach us about the list’s ability to survive shifts in ways of knowing?
- By collecting and materializing information, do lists create fields of knowledge?
- How do they structure the way data and knowledge circulate?
- What are the ethics of listing, a technique that has been complicit in the administration of human populations and in the ‘disenchantment’ of the modern world?
- Does list-making offer opportunities for challenging dominant systems of classification or ways of knowing?
- What is the role of the list in digital media environments, and in human artistic expression
Young moves from “what lists are?” to “what lists do?” (pp. 16-17). A media practice question!
[!tip] Check out the rest of Young’s work about lists
Booleans: true and false
Above we encountered the equality test
\==, as well if/else branching. The binary logic oftrueandfalseis possibly the most quintessential idea of the digital, and of computer and computer programming. True and false are often represented with1and0.document.querySelector('video').loop = true;animals.includes('sirens');The two booleans values are used to make decisions, and it is the essence of computer control and decision making… and not only in computers. The values are combined with logical operations or, and and not. All of this talk about truth, falsehood, and, or and not is perfectly familiar from everyday speak and thought, although more loosely applied. Informal logic is perfectly familiar from the everyday, and a truly classic topic in Philosophy! 💕 We can connect different logical value with “and” (
&&), “or” (||), and “not”.operator what’ the result? true or false true and false not true Conditional execution
“Control flow” of a program, “branching” based on decisions in familiar, if-else logic. In this are or programming, reading code aloud can really help understanding.
in JavaScriptS syntax
if (condition) { do_this; } else { do_that; }The
conditioncan be a lot of things which can be expressed as eithertrueorfalse.Informally
if (tired) { // tired is a boolean; either true or false sleep; } else { make_techno_on_synthesizer; }
Diagram by Mace Ojala (CC BY-NC-SA) A special case: by default do nothing
if (tired) { sleep; }
Diagram by Mace Ojala (CC BY-NC-SA) Examples of conditional execution
animals = ["belonging to the emperor", "embalmed", "tame", "suckling pigs"]Example 1. Branching
if (animals.length > 15) { console.log("Oi it's crowded here!"); } else { animals.push("sirens"); }Example 2. Empty
elseif (! animals.includes("sirens")) { animals.push("sirens"); }Example 3. A while loop
while (animals.length <= 15) { animals.push("sirens"); }Two kinds of loops are the for loop and the while loop.
Example 4. A coin flip
// Random comparator function function random_choice(a, b) { random_number = Math.random(); if (random_number < 0.5) { return -1; } else { return 1; } }chaos = animals.sort(random_choice) console.log(chaos)Actually randomness is hard, but this is sufficient for us now.
On a Moodle page
container = document.querySelector('.section').parentNode; Array.from(document.querySelectorAll('.section')).sort(random_choice).forEach(a => { container.appendChild(a) })On your email
inbox = document.querySelector('#messagelist > tbody'); Array.from(inbox.children).sort(random_choice).forEach(email => { inbox.appendChild(email) });On Instagram
feed = document.querySelector('article').parentNode; Array.from(feed.children).sort(random_choice).forEach(post => { feed.appendChild(post); });🏭 Guided activity
Discuss where you encounter sorting on the web. What are the items being sorted, and by which criteria are they sorted. Can you influence it? How would you like them sorted? Could you describe it algorithmically?Exploration of conditional execution
- Read Chapter 5 “Logistics: Listicles, Algorithms, and Real Time” of Liam Cole Young. 2017. List Cultures. Knowledge and Poetics from Mesopotamia to BuzzFeed
- Prepare for Show and Tell about your exploration.
-
-
-
In which we put ourselves at stake and show other what we have explored so far.
At the end of this OER, look at all the programs created so far. Many of them don’t work, but some do, and many kind-of work. Show some of them, no matter how working, to someone. Explain to them what you were trying to do, why do you think it works or doesn’t. What did you learn from making each of them?
It is worth acknowledging what you have accomplished so far: we know how to run code, collect data in a list, iterate over them, manipulate different kinds of digital objects familiar from the web (eg. images, text), and we have ran conditional, branching code 🎉
If you have enjoyed this open educational resource (OER) or have found something for your teaching, studies, or general inspication, it would be great to hear from you! Comments, critique, and other discussion is also welcome of course, you email me at mace.ojala@ruhr-uni-bochum.de.
Happy hacking
-