Course: Web is a bunch of lists, let's break it (OER)

General

Select activity The starting point is that which is most familiar ...
The starting point is that which is most familiar to us: the Web. The journey therefore starts in medias res, in the middle of things – we excavate very basic and generic operations such as of computer programs such as source code, looping and iteration, functions and how to use and define them, objects and basic data types from within the medium of the web. All programming is done in the browser developer console.

Further use as Open Educational Resource (OER) is encouraged: This work and its contents are – unless otherwise stated – licensed under the Creative Commons (CC) BY-NC 4.0. Please cite according to the TULLU rules as “Web is a bunch of lists, let's break it” by Mace Ojala, licensed under CC BY-NC 4.0. Other licensed content, works and works are excluded from the license (see https://moodle.ruhr-uni-bochum.de/course/view.php?id=54272).

Code exhibition

Check out a small code exhibition of programs made by students at Institut für Medienwissenschaft at Ruhr-University Bochum in 2022 and and 2023, accompanied by commentary.

Who this is aimed for

This OER is aimed for teachers, educators and learning facilitators who would like to take an explorative, playful and open-ended attitude towards conveying basics of programming, while keeping the meaning of the specific medium, the web, in view. This could be in media studies, the arts, digital design. It might be suitable as an introduction for web design, but is more exploratory than systematic. The course is poorly suited as a generic introduction to programming or software engineering. More straight-to-the-point, often at the cost of meaning and relatability, exist online.

Learning goals

Learn basics of JavaScript syntax.

Learn about the basic data structure Array.

Learn about iteration over a collection.

Learn how the internet, especially the user-side JS works.

Learn to appreciate web as a dynamic medium.

Learn basics use of the browser developer console.

Not start from tabula rasa, but rather from what is familiar.

How to adopt/adapt

Do as much of live-coding as possible, showing students your thinking and typing process in action.

Give students time to type the programs you live-code. This will take surprisingly much time and support, especially in the beginning. Some contemporary computers do necessarily indicate basic symbols such as { and } on the keyboard, and reading and typing is error-prone.

Introduce friction against copy-pasting. Typing code has bodily and experiential elements.

Replace websites used to explore with familiar, everyday websites.

Assign homework.

Review the homework in class, both readings especially codings. Relate everything to basic concepts such as arrays and iteration, and what is familiar to students e.g. lists and grid layouts, which are two-dimensional lists.

While pairwork is fine, I advocate learning elementary programming praxis individually. Computer use tends to be individualized – just look at the computer in front of you. Once basic capacities are in place, pairwork and teamwork can begin.

If pair up students, please do your utter best so that male students do not deprive others from the learning opportunity. Programming is highly gendered, as is breaking things – we have work to do.

Literature

This work builds on three books, first two of which capture an explorative, creative and reflexive attitude towards programming, and are aimed for creative programming rather than software engineering. The first book is Winnie Soon’s and Geoff Cox’ Æsthetic Programming. A Handbook of Software Studies which Winnie and Geoff have developed from their experience in teaching programming at Aarhus University. The second book is Nick Montford’s Exploratory Programming for the Arts and Humanities, the second edition of which was published in 2021 by MIT Press. It too draws from teaching experience. Both books are available for free as Open Access, and Winnie, Geoff and their published Open Humanities Press are very explicit about this point. I encourage you to study these books and enjoy the eloquence, and force of their writing. The third book this is built on is not a programming or software studies book at all, but Liam Cole Young’s 2017 List Cultures. Knowledge and Poetics from Mesopotamia to BuzzFeed. The book is indeed all about lists, and is a media studies excavation into the Kulturtechnik of lists, or Arrays as they are known in JavaScript. Liam’s book too is available as a free Open Access book via the publisher Amsterdam University Press. Thank you Winnie, Geoff, Nick and Liam for your work.

Background

[!note] Personal inspo Developer console is so fun. Also cultural techniques of lists are so interesting.

This OER is an outcome of a praxis seminar titled Programming for Media Studies at Ruhr University Bochum in 2022 and 2023, a beginner programming offered at the Institute for Media Studies. The seminar was ran twice before writing this OER. Like a play, the seminar was organized and paced as three “acts”, each ending with a show & tell in class to wrap up a topic. Each act is divided into a few “scenes”, which were two hour sessions in person. This specific OER covers the opening act of the seminar.

I wanted a seminar which starts with playful encounter with what is at hand (the web), and quickly does something visual and thought provoking. The starting gesture is deconstruction of the web and perhaps even laughing at the authority it is presented with. The research aim of our project was to think about media praxis, and I wanted to resist outcome-oriented, project-based learning/programming with open-ended praxis and exploration.

This OER covers covers four teaching sessions and a show & tell where students given a chance to present their work in class. What you see here, is compilation of my presentation slides which I originally wrote in Markdown and presented via reveal.js. In the style of so-called “eat your own dogfood” aka dogfooding, a best(?) practice in software development and a gesture towards the wide applicability of these technologies and techniques, each slidedeck was therefore a small website made with HTML, CSS and JS the students could download and mess around with.

I am grateful for the students who took the seminars and explored software with me.

I hope this OER can help and inspire you and your students on the journey to learn programming, self-expression via code, and to think about code the as cultural medium.
Select activity Ankündigungen

Ankündigungen Forum

Scene 1. Tooling

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, and test and asdf. 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.

Cover of Soon+Cox’ Æsthetic Programming — Cover of Soon+Cox’ *Æsthetic Programming* (Image from book website, CC-BY-SA 2020)

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”

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.

Scene 2. Let’s break the web

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

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 arguments

Earlier we already set the innerText property of an HTML p (=paragraph) object

innerText = "Hello world"

And called log method of the console object

console.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.

1000 pages of source code (Photo by Mace Ojala)

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 match

Now 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 be audio or video objects.

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.

Scene 3. Arrays and iteration

Select activity In which we look at the humble list, and consider ...
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 array

Assigning 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 JavaScript Array reference 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() is Array.join().

array.join(separator)

animals = "belonging to the emperor,embalmed,tame,suckling pigs".split(',') animals.join(";")

[!tip] Remember array is 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 Array documentation for interesting methods.

Scene 4. Conditionality

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(' ').length
preface.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/else conditional.

🏭 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 of true and false is possibly the most quintessential idea of the digital, and of computer and computer programming. True and false are often represented with 1 and 0.

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
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 condition can be a lot of things which can be expressed as either true or false.

Informally

if (tired) { // tired is a boolean; either true or false
    sleep;
} else {
    make_techno_on_synthesizer;
}

A special case: by default do nothing

if (tired) {
    sleep;
}

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 `else`

if (! 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.

Scene 5. Show and Tell

Select activity In which we put ourselves at stake and show other ...

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

Topic outline

General

Code exhibition

Who this is aimed for

Learning goals

How to adopt/adapt

Literature

Background

Scene 1. Tooling

Hello world! 👋

What is programming?

Why program?

According to Nick Montfort in Exploratory Programming for the Arts and Humanities 2nd ed. 2021 (MIT Press)

According to Geoff Cox & Winnie Soon in Aesthetic Programming: A Handbook of Software Studies. Open Humanities Press. 2020 🔓

According to Code Week Germany

Hello all the worlds!

Praxis and exploration

Show and Tell

HTML, CSS, JS – name a more iconic trio

Three separate tasks

Developer tools UI tour

Exploration of breaking the web

Scene 2. Let’s break the web

Core concept: Objects

What’s the point? 🤔❓

Objects have properties and methods

Some simple JavaScript objects types

Selecting elements of document

Setting element’s contents

Exploration of breaking the web

Scene 3. Arrays and iteration

Arrays

In JavaScript syntax

Examples

Splitting a string to an array

Iteration over an array

In Javascript syntax

Exploration of arrays (lists)

Scene 4. Conditionality

Exploring Young’s preface using JS

Booleans: true and false

Conditional execution

in JavaScriptS syntax

Examples of conditional execution

Example 1. Branching

Example 2. Empty else

Example 3. A while loop

Example 4. A coin flip

On a Moodle page

On your email

On Instagram

Exploration of conditional execution

Scene 5. Show and Tell

Example 2. Empty `else`