A Digital Garden

A Digital Garden

Coding Workshop, HBK Braunschweig, October 2023
About

A garden is a place between wilderness and order. A place where both flowers and weeds grow and where new connections take root.

Since the early days of the internet, the garden has been a popular metaphor for concepts of the digital world: Between dense jungle and rigid structure lies the “Hypertext Garden” [Mark Bernstein, 1998], which invites exploration but also helps navigating through its different paths. The shortest path does not always have to be the best.
“Digital gardening” can also be a way of building personal knowledge and new connections in a digital space – between chaos and cultivation. “[Digital] Gardens present information in a richly linked landscape that grows slowly over time”, as Maggie Appleton describes it in [A Brief History & Ethos of the Digital Garden, 2020].

In this workshop we will explore the metaphor of the digital garden by coding our own plants with HTML and CSS. The workshop will consist of an introduction to the basics of HTML / CSS, different inputs, coding sessions and consultations. Individually or in groups you will grow code and plants, which we will publish at the end in a common digital garden. No coding knowledge is required. Students without coding experience are especially encouraged to participate. There will be different entry points for different experience levels.

A workshop at HBK Braunschweig by Katharina Nejdl and Luise Hoffmann. This workshop is sponsored by the HBK Braunschweig Gleichstellungsbüro.
Assignment

Workshop: 09.–12.10. | 10–18:00
Deadline / Upload: 12.10. 12:00
Presentation & Brunch: 12.10. 13:00–16:00

Code a plant* in HTML & CSS.

* or grow a garden
Where to start

Depending on your experience and preference, there are different points to start from:

  1. HTML Boilerplate
    if you want to start an entry from scratch, start with an empty HTML / CSS file
    [Github: HTML Boilerplate]
    [Codesandbox: HTML Boilerplate]

  2. Starter Kits
    if you want to start from modifying existing code, choose one of the coding starter kits
    [Github: All Starter Kits]
    [Codesandbox: 01. Hypertext Garden / HTML]
    [Codesandbox: 02. CSS Thistle / CSS I]
    [Codesandbox: 03. Growing Animations / CSS II]
    [Codesandbox: 04. Growing Media Queries / CSS II]
    [Codesandbox: 05. Growing SVGs / CSS II]
Research
Digital Garden
A Brief History & Ethos of the Digital Garden – Maggie Appleton
Hypertext Gardens – Mark Bernstein
On the Necessity of Gardening
On the Necessity of Gardening – An ABC of Art, Botany and Cultivation
Botanical Revolution – Centraal Museum
Botany and Art
Flowers Forever / [Audioguide]
The Botanical Mind: Art, Mysticism and The Cosmic Tree
Botany and Colonialism
From the shadow of Maria Sibylla Merian
The Coloniality of Planting
Contact
  1. Sign-Up for Coding Support / Consultations
    consultations in case you need support with a coding problem or want to talk about your concept a bit longer
    GoogleDoc
  2. Dropbox
    this is where we share files / you can find the starter kits here
    Dropbox
  3. Contact
    Katharina Nejdl
    katharina.nejdl@googlemail.com

[Typeface: Dark Academia by Céline Hurka]
Monday
Schedule subject to change, depending on group vibe. We can also agree on shorter days or cut some inputs. Let’s discuss!
10:00–12:30
10:00–11:00 | Intro
  • Course-Info
  • Topic-Info
  • Getting to know each other (on paper / in the room)

Theory
Between complete wilderness and rigid structure lies the hypertext garden, which invites exploration but also helps navigation with various paths.
„The shortest path is not always the best.“
Hypertext Gardens – Mark Bernstein
„[Digital] Gardens present information in a richly linked landscape that grows slowly over time.“ (via Appleton)
„Every walk through the garden creates new paths, new meanings, and when we add things to the garden we add them in a way that allows many future, unpredicted relationships.“
The Garden and the Stream – Mike Caulfield
„Gardens are never finished, they're constantly growing, evolving, and changing. […] [They] are imperfect by design [and show] the perfect balance of chaos and cultivation. […] Gardening is about claiming a small patch of the web for yourself […].“
A Brief History & Ethos of the Digital Garden – Maggie Appleton
11:00–11:30 | Setup

  1. open folder in VS Code
  2. create index.html
    → write / select HTML5 structure
  3. open HTML page in browser
  4. edit, save & reload
11:30–12:30 | Input: Hypertext Garden [HTML]
Showcases
When all of my friends are on at once
Sebastian Ly Serena

Starterkit
[Codesandbox: 01. Hypertext Garden / HTML]

Exercise: Hypertext Garden
  • Describe your own imaginative garden. Where is the entrance? Which paths can you take? Create at least one hyperlink that links to a new page.

See [W3school: HTML element references] for different HTML tags and their documentation.
Common Mistakes
  • unclosed elements
  • badly nested elements
  • unclosed attributes
  • you can check your HTML-code for errors here
  • did you save? is your live-server working?
  • try inspecting, googling or ask a friend
Cheat Sheet: HTML
[Video: Basics of HTML by Laurel Schwulst]
[Web Essentials: HTML / CSS Einführung]
[References: HTML elements]
[CodeAcademy: Learn HTML tutorial]
  • file setup
    • structure: html, body, main, nav, ...
    • head (meta, title, css), js
    • HTML boilerplate
  • syntax
    <tag> content </tag>
  • hypertext
    <a href="http://link.com" target="_blank"> This is the hyperspace. </a>
  • tags
    • meta
    • div
      <div> The most used tag. </div>
    • content / semantics





    • inline text semantics






    • lists



    • media



      <img src="img_girl.jpg" alt="Girl in a jacket">
    • forms
      input, button, textarea, progress, select








      <input id="cheese" name="cheese" type="checkbox">
      <label for="cheese">Do you like cheese?</label>

      <button>Click here</button>
      <textarea placeholder="<Type here>></textarea>
      <progress></progress>

      <label for="pet-select">Choose a pet:</label>
      <select id="pet-select">
        <option value="cat">cat</option>
        <option value="dog">dog</option>
      </select>
    • properties
      e.g. class, id, src, alt, href, target, type, checked, placeholder, contenteditable
      <tag class="className1 className2" id="idName"> content </tag>
13:30–15:30
13:30–14:30 | Input: CSS Thistle [CSS I]
Starterkit
[Codesandbox: 02. CSS Thistle / CSS I]

Exercise: Research CSS Properties
  1. Go to [CSS-TRICKS: CSS Properties].
  2. Pick one or more CSS properties, look at the documentation and try them out.
  3. Explain your favorite property to your neighbour.

Tip: Borders / Background-color
  1. Can you tell what size your elements take up? Guess.
  2. Give all items borders.
    * {
      borders: 1px solid black;
    }
  3. Give your elements different background-colors to differentiate them.
    div {
      background-color: red;
    }
  4. How good was your guess?

Common Mistakes
  • forgot colon : after css property, semicolon ; at end of line or closing curly bracket }
  • spelling mistake in property / attribute
    (e.g. colour instead of color )
  • wrong selector (e.g. .container instead of #container)
  • you can check your CSS-code for errors here
  • did you save? is your live-server working?
  • try inspecting, googling or ask a friend
Cheat Sheet: CSS I
[Video: Basics of CSS by Laurel Schwulst]
[References: CSS properties]
[CodeAcademy: Learn CSS tutorial]
  • HTML Recap
  • syntax
    div {
      color: red;
    }
  • where?
    • inline
    • inside style tag
    • external css file
  • .classes & #ids
    <div id="subtitle" class="text"> Some content inside. </div>
  • properties
    • color & size




      .container {
        width: 100px;
        width: 100%;
        width: 100vw;
      }
      .highlighted {
        background-color: red;
        background-color: rgb(100, 250, 0);
        background-color: rgba(100, 250, 0, 0.5);
        background-color: #0000FF;
      }
    • margin & padding


      body {
        margin: 0;
        padding: 10px 0;
        padding-left: 5px;
      }
    • border & shadows




      #left-container {
        border: 1px solid black;
      }
    • simple positioning




      #top {
        position: fixed;
        bottom: 0;
        right: 5px;
      }
    • text







      p {
        font-family: "Neue Haas Grotesk", Arial, Helvetica, sans-serif;
        font-size: 2em;
        text-align: justify;
        hyphens: auto;
        text-decoration: underline;
      }
    • :pseudo-classes

      div:hover {
        color: white;
        pointer: cursor;
      }
14:30–15:30 | Collective Coding
  • Individual Project
  • Coding Support / Consultations [Sign Up]
16:00–18:00
16:00–17:30 | Collective Coding
  • Individual Project
  • Coding Support / Consultations [Sign Up]
17:30–18:00 | Get Together
[Glossary Term: Weed]
[p. 175, On the Necessity of Gardening] [Rumiko Hagiwara, Weed, 2016, site-specific installation, title plate, weeds]

  • Mood
  • Favorite HTML / CSS elements
Tuesday
10:00–12:30
10:00–10:30 | Intro
Video
Showcases
Rafaël Rozendaal: Almost Calm

[More Websites by Rafaël Rozendaal]
Modell und Ruine
Modell und Ruine [Hoverstates]
Modell und Ruine [Web Archive]


[Glossary Term: Grafting]
[p. 54, On the Necessity of Gardening] [Tetsumi Kudo, Grafted Garden, 1971, installation]
[David Pfifferling, Form follows flowers, illustrations]
10:30–10:45 | Setup II
10:45–12:30 | Collective Coding
  • Individual Project
  • Coding Support / Consultations [Sign Up]
13:30–16:30
13:30–14:30 | Input: Growing Code [CSS II]
Starterkit
[Codesandbox: 03. Growing Animations / CSS II]
[Codesandbox: 04. Growing Media Queries / CSS II]
[Codesandbox: 05. Growing SVGs / CSS II]

Exercise: Growing code
  1. Let something grow or move in your garden through animation or hover states.

[Reference: CSS animations]
[Reference: Hover]
Cheat Sheet: CSS II
[References: A guide to flexbox]
[Game: Flexbox froggy]
[CodeAcademy: Learn indermediate CSS]
  • HTML / CSS Recap
  • media queries
    when the browser is smaller than 800px (mobile / tablet):
    @media screen and (max-width: 800px) {
      .element {
        font-size: 18px;
      }
    }
    when the browser is between 600px and 1200px wide (desktop):
    @media screen and (min-width: 600px) and (max-width: 1200px){
      .element {
        font-size: 25px;
      }
    }
    when the browser doesn’t support hove (mobile):
    @media (hover: none){
      .element:hover {
        color: inherit;
      }
    }
  • advanced positioning
  • css-variables
    :root {
      --gapS: 5px;
      --gapM: 10px;
      --gapL: 20px;

      --highlightColor: #0000FF;
    }

    .element{
      color: var(--highlightColor);
      margin: var(--gapS);
    }
  • display
    .element {
      display: block;
    }

    .hidden {
      display: none;
    }
    see also [Reference: Display & Visibility]
  • transformation





    .element {
      transform: translate(50%, 50%);
    }
    .element {
      transform: translate(50%, 50%) rotateX(-12deg);
    }
  • transition & animation
    .element {
      width: 200px;
      transition: width 0.3s ease;
    }

    .element:hover {
      width: 500px;
    }
    .element {
      width: 200px;
      color: red;
      transition: width 0.3s, color 0.5s;
    }

    .element:hover {
      width: 500px;
      color: blue;
    }
    see also [Reference: CSS animations]
14:30–15:00 | Green Sketching
Draw a quick sketch on paper for each of the prompts. [1 min for each round]

EN
  1. Sketch a plant.
  2. Sketch a plant using only rectangles.
  3. Sketch a plant made only of circles.
  4. What does the flower of your plant look like?
  5. Visualise the growth of your plant.
  6. How does the plant look withered?
  7. Sketch a detail of a plant, e.g. a cross-section or a plant under a microscope. microscope.
  8. What patterns does your plant have?
  9. What sounds does your plant make?
  10. In which garden does your plant live?

DE
  1. Skizziere eine Pflanze.
  2. Skizziere ein Pflanze nur aus Rechtecken.
  3. Skizziere eine Pflanze nur aus Kreisen.
  4. Wie sieht die Blüte deiner Pflanze aus?
  5. Visualisiere das Wachstum deiner Pflanze.
  6. Wie sieht die Pflanze verwelkt aus?
  7. Skizziere ein Detail einer Pflanze, z.B. ein Querschnitt oder eine Pflanze unter dem Mikroskop.
  8. Welche Muster hat deine Pflanze?
  9. Welche Geräusche macht deine Pflanze?
  10. In welchem Garten lebt deine Pflanze?

15:00–16:00 | Collective Coding
  • Individual Project
  • Coding Support / Consultations [Sign Up]
16:00–16:30 | Get Together
  • Mood
  • Show & Tell
17:00–18:00
17:00–18:00 | Public Lecture
Wednesday
10:00–12:30
10:00–10:30 | Intro
Video
Showcases
Painting with pure CSS


[Glossary Term: On Botany and Colonialism]
[p. 99, On the Necessity of Gardening] [From the shadow of Maria Sibylla Merian]

10:30–12:30 | Collective Coding
  • Individual Project
  • Coding Support / Consultations [Sign Up]
13:30–15:30
13:30–15:30 | Collective Coding
  • Individual Project
  • Coding Support / Consultations [Sign Up]
16:00–18:00
16:00–17:30 | Collective Coding
  • Individual Project
  • Coding Support / Consultations [Sign Up]
17:30–18:00 | Get Together
  • Mood
  • Show & Tell
  • Plan Presentation / Brunch
Thursday
All web experiments / projects should be uploaded by Thursday 12:00.
10:00–16:00
10:00–12:00 | Finish & Upload
12:30–13:00 | Brunch Preparations
  • Brunch Preparations
13:00–15:00 | Presentation & Brunch
  • Presentation
  • Brunch
15:00–15:30 | Feedback