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?

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

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

1. 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
2. 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.