View source for User:Youjung/SI29: Gossips

= Workshop: Our Digital Home =
Documentation: [[SI29/Our Digital Home|Our Digital Home]]
<div style="display: flex;">[[File:Our Digital Home.png|thumb|313x313px]]</div>

= SI29: Gossiping at the Intersection of Crafts and Resistances =
[[File:Untangling the web.png|thumb|256x256px|TMUX session: untangling_the_web output using Fanzine]]
[[SI29: Gossiping at the Intersection of Crafts and Resistances#Webpage writing exercice|SI29 Overview Wiki Page]] | [https://hub.xpub.nl/sergio/SI29/intro/youjung/youjung.html SI29 Personal Webpage]

=== [[Serving Gossips|1. TMUX Collaborative terminal session]] ===

* '''Date:''' 19/01/26
* '''Guest:''' [https://czkaa.github.io/ Kaa]
* '''Group:''' Barbara, Ema, Tommi, Youjung
* '''Theme:''' Network using terminal command: curl, ping, traceroute
TMUX enables to simultaneously write terminal commands through ssh. It was interesting to see these terminal log can turn into a collective zine using the tool Fanzine made by Kaa. The contrast between terminal screen and simultaneity was fun to see. 

Also Kaa's [https://wiki.digitalcare.noho.st/index.php?title=Main_Page#25/01_Server_Charms%22 Server Charms] workshop seemed fun. Would love to participate!
<br>
<br>

=== [[Gossiping in and around a Datacenter|2. Visit to Van Nelle Fabriek Data Center]] ===

* '''Date''': 26/01/26
* '''Guest''': Anti, Marloes

Van Nelle Fabriek Data Center, tour by Remco<div style="display: flex;">
[[File:D7001741-ECDA-484E-A83A-F3FAD6B2F6F5 1 105 c.jpg|alt=Van Nelle Fabriek Data Center|thumb|Van Nelle Fabriek Data Center]]
[[File:BE9F8F58-6857-4B53-9FCF-529AB7408C20 1 105 c.jpg|alt=Penitentiaire Inrichting 'De Schie'|thumb|DONT CALL ME BABY I AM GREATER THAN YOU THINK by Roos Schneijderberg, Penitentiaire Inrichting 'De Schie' and Jumbo truck]]
[[File:Fanzine making from the data center.jpg|alt=Collective fanzine making|thumb|Collective fanzine making]]
</div>

=== 3. Open Session: CSS Party ===
CSS exercise : [https://cards.declarations.style/ cards.declarations.style] pick 3 cards and make a website, we got sticky, pattern gradient and columns. I made a html and css file using the text I recently read "The Californian Ideology". You can find the website [https://hub.xpub.nl/sergio/SI29/cards-declarations/youjung/ here]. 

Also the website Doriane made for permacomputing was also super nice. I loved the fact that she used the color scheme from Pokemon gameboy edition. The website also supports booklet version of the web, it is not automatically updated according to the changes but this also aligns with the permacomputing idea of having only the necessary functions.  

Also Dorian showed how to hack displaying the css code. And the website style changes according to the changes of the code.  
 style {display: block;}
 contenteditable: True;

<div style="display: flex;">
[[File:Screenshot 2026-02-02 at 10.30.10.png|alt=3 cards: sticky, pattern gradient, columns|thumb|3 cards: sticky, pattern gradient, columns]]
[[File:Screenshot 2026-02-03 at 11.51.31.png|alt=css exercise output|thumb|css exercise output]]
</div>

=== [[Web Hosting on Smartphones|4. Web Hosting on Smartphones]] ===
Used Termux API to ssh to a phone. I need an android phone...

* [https://wiki.termux.dev/wiki/Main_Page Termux Wiki]
* [https://wiki.comphost.club/ Wiki Comphost]<div style="display: flex;">
[[File:Terminalonphone.gif|frameless|444x444px]]
[[File:Termuxtorch.gif|frameless|444x444px]]
[[File:ChangingWallpaper.gif|frameless|444x444px]]

=Prototyping =

===1. Collective Bash Scripting On Server===
Inspired from Kaa's workship with TMUX and Fanzine, I thought about printing a directory on the server. Directory itself becomes a html file using a bash script. For example, if someone uploads an image or txt, these file will automatically be stitched and added to a collective zine. Also thought about including the metadata of the file. The metadata can be file size, owner, permission, modified date etc. Since I've been working on web2print zine making for AMRO26 and Extraterrestrial zine fair([[Paged.js|Documentation on zine-making]]), this prototyping will be a continuation. 

'''Questions to think about'''

*What kind of meaning or value can stitching these files bring?
*Also am I interested in the file content or the metadata and interaction within the server?

==== '''Stitching HTML Files Using Bash Script''' ====
 cat head.html > final.html 
 ls -la >> final.html
 tree >> final.html
 cat feet.html >> final.html
 weasyprint final.html -s stylesheet.css final.pdf

==== '''Meta Data Stitching''' ====
Date: 26/01/26

Stitching files together in 1 html file and printing meta data on paper. What kind of meaning can metadata have? Does it become more intimate when it is printed on a piece of paper? <div style="display: flex;">
 <pre> echo "<pre>" >> output.html
 date >> output.html
 pwd >> output.html
 whoami >> output.html
 echo "<br>[Tree]" >> output.html
 tree >> output.html
 ls -lh >> output.html
 echo "<br>[Differences]" >> output.html
 diff youjung luca >> output.html
 diff leassets daan >> output.html
 echo "<pre>" >> output.html
 
 weasyprint output.html -s output.css output.pdf</pre>

[[File:Metadata stitching.png|alt=output.pdf|thumb|output.pdf]]
</div>
==== '''File Systems and File Forest''' ====
Date: 27/01/26 | [[Exploring our file systems|Wiki]], [https://pad.xpub.nl/p/SI29-prototyping-week-3 Pad][[File:Screenshot 2026-02-05 at 22.33.20.png|alt=youjung's family album tree html|thumb|[https://hub.xpub.nl/sergio/SI29/file-sharing/forest/youjungtree.html youjung's family album tree html]]]During prototyping class we looked on file systems and went through file navigation commands.

Using <code>tree</code> command we made a html file that lists meaningful file to you. 
I used our family's icloud files that contained all the scanned family photos from the late 2th century. The files are organized in chronological order and my sister and I made this directory when she moved out to get married.
* <code>clear</code>, <code>history</code>, <code>cal</code> calendar
* <code>man history</code> manual
* <code>ctrl + r</code> command history
* <code>ctrl + c</code> stop
* <code>cat</code> view file content
* <code>sudo tail -f syslog</code> view system log real time
* <code>cd /var/log/nginx</code> -> <code>sudo tail -f access.log</code> view server log
* <code>cd enter</code> home folder
* <code>cd /</code> root folder
* <code>find .</code> list all files(loads a lot of files!!)
* <code>find . | grep "\.pdf$"</code> .pdf로 끝나는 확장자만 남김
* <code>tree . -L 1 -H ./ > mytree.html</code>

=== '''2. Server Campfire and File Sharing'''===
[[Campfire|Campfire Prototyping Documentation]]

===='''Ideas on prototyping offline server'''====
Date: 03/02/26

Local first file sharing: I'm curious if it is possible to set up a Raspberry Pi where people can gather around and share files like a camp fire. Without any internet connections, these files will be only saved in this device. And the only way to open or see this file is the printer. Last week we saw how many files we had in our computers. How many of them are valuable and meaningful to us? And what are the files do we want to share but also keep it private? For me it would be image files of our family photos and my pdf portfolio.
[[File:Screenshot 2026-02-08 at 20.31.28.png|alt=Server Charm from Lea|thumb|228x228px|Server Charm from Lea]]

===='''Using ESP32 for limited file sharing'''====
Extending from Lea's workshop from server charm, I thought of setting a cozy camp fire file sharing session. People would gather around the server, connect to wifi and share message and image together. I borrowed the micro controller Lea made from Kaa's Server Charm Workshop. It is MakerGO ESP32 C3 SuperMini and has very limited storage. I tried adding image uploading function to it. But as the storage is very limited... the page crashed whenever I tried to click upload image button. I just uploaded the Guestbook page from the Server-Charms workshop following this [https://codeberg.org/StrangeGirlMurph/Server-Charms/src/branch/main/Manual.pdf manual].  

You can connect to the wifi or type the IP address to access it. It is interesting to me because it is local and a physical presence of this object feels more intimate than sharing a link to a website. Also the decoration Lea made is so cute. I am becoming more intrigued to work on these physical devices.   

===='''Using Raspberry Pi 4b for file sharing'''====
Tommi borrowed me Raspberry Pi 4b. Managed to connect to eduroam and install nginx. WHAT NOW?
<div style="display: flex;">
[[File:9FA5575E-63BB-4952-B5AF-195D6D9A78F3 4 5005 c.jpg|alt=raspberry pi device|thumb|raspberry pi!|266x266px]]
[[File:DD88614A-DAA7-4E7A-904B-E7186319FC76 4 5005 c.jpg|alt=raspberry pi on the screen|thumb|raspberry pi!|267x267px]]
</div>
[[File:Screenshot 2026-02-11 at 22.07.39.png|alt=XTRA NICE Gallery|thumb|XTRA NICE Gallery]]

=== [[Gallery prototype|3. Collective Gallery using Python and Jinja]] ===
Generating HTML + CSS with Python + Jinja

This is a prototype to generate web pages based on a collection of files stored on your computer or a shared server.

'''Output''': [https://hub.xpub.nl/sergio/SI29/file-sharing/xtra-nice/ xtra-nice], according to the editor of the file, border color changes

'''Python Libraries''': 

* [https://jinja.palletsprojects.com/en/stable/templates/ Jinja]  similar to Liquid!
* [https://docs.python.org/3/library/datetime.html pythontime] for bring meta-data from files

===== Set up =====
 uv init <filename>
 uv run main.py

===== main.py =====
 import os
 import pwd
 from datetime import datetime
 from jinja2 import Template
 
 def main():
     assets = os.listdir("assets")
     assets_with_meta = []
 
     for asset in assets:
         # load stats from the file
         stat = os.stat("assets/" + asset)
         timestamp = os.path.getmtime("assets/" + asset)
         last_modified = datetime.fromtimestamp(stat.st_mtime).strftime(
             "%m/%d/%Y, %H:%M:%S"
         )
         user = pwd.getpwuid(stat.st_uid).pw_name
 
         # pack everything in a dictionary
         asset_with_meta = {
             "last_modified": last_modified,
             "file": "assets/" + asset,
             "user": user,
         }
         assets_with_meta.append(asset_with_meta)
 
     with open("template.html", "r") as f:
         template_html = f.read()
 
     template_jinja = Template(template_html)
     output = template_jinja.render(title="XTRA GALLERY", assets=assets_with_meta)
 
     with open("index.html", "w") as f:
         f.write(output)
 
 if __name__ == "__main__":
     main()

===== template.html =====
 <nowiki><style>
     body {
         background-color: lemonchiffon;
         color: saddlebrown;
     }
 
     img {
         max-width: 240px;
         margin-bottom: 8px;
     }
     .grid {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
     }
     .img_box {
         display: flex;
         flex-direction: column;
         margin-bottom: 36px;
         align-items: center;
     }
     .youjungnoh {
         border: 2px solid lawngreen;
     }
 </style></nowiki>
 
 <nowiki><h1>{{ title }}</nowiki><nowiki></h1></nowiki>
 <nowiki><div class="grid">
     {% for asset in assets%}
     <div class="img_box">
         <img class="{{asset.user}}" src="{{asset.file}}" /></nowiki>
 <nowiki> </nowiki>       <nowiki>{{asset.last_modified}}</nowiki> - <nowiki>{{asset.user}}</nowiki>
 <nowiki> </nowiki>   <nowiki></div></nowiki>
 <nowiki> </nowiki>   {% endfor %}
 <nowiki></div></nowiki>
=Methods=

===1. Practice and Scalability ===

* Date: 04/02/26
* Group: Lea, Sibyl, Youjung

We interviewed each other on our practice and how we plan to scale them. We decided to make a small zine out of it. [[Practice and Scalability|Here]] is the documentation page.

=== 2. Auto-Ethnography ===

* Date: 11/03/26
* Editorial Group: Daan, Lea, Youjung
* Source (a.o.): Autoethnography, T. Adams, C. Ellis and S. Holman Jones (2018).

'''Keywords on each other's practice'''

* Youjung's practice: drawing, coding, committing / organizing, minimal (noise-less), (everyday life) poetics
* Dann's practice: walking, (weird) sounds, drawing, urban / playful, (looking from) underground, small things, considerate, grunge, DIY
* Lea's practice: fermentation, drawing, writing, open-source/alternative tools, silent resistance / communal/collective, experimental, ever-learning

'''Exercise on auto-ethnography'''

Task: Write a short text based on these keywords about your (current) practice, include images, recordings or other media.

* Keywords
** playful, interactivity, ambivalence, poetic, depiction, digital environment, reflection, cuteness(?)
* What have you been making
** interactive text adventure game combined with pen-plotters
** python script that generates random poetry
** websites
** experiences that re-interprets digital experience
** drawings & illustrations
** zine made with weasyprint and paged.js
** graphs made of graphviz
* How you did it (method)
** combining other's practices and expertise
** conversation and collective decision making
** finding collective ways to make things
** finding lines of code and solutions with some assistance from AI
** obtain ideas from essays read during class (e.g. carrier bag theory)
** attending workshops and borrowing other practitioner's methods and tools
** start making things that seems interesting and fun
** questioning the obvious(scalability, efficiency, seamless experience)
* Why do you do this (motivation)
** to take fun serious
** curiosity on learning new tools, skills, methods and thoughts
** to make things more intentional and meaningful not for the sake of production
** spark nice conversations
* What other artists/writers/makers/etc. you feel your work relates to
** [https://chia.design/ Chia Amisola] - designer, developer, artist, writer
** [https://docs.google.com/spreadsheets/d/18JuDISe8bBnW93Dxf6gLopYb0q4KoPE7FEaIRBwr2eI/edit?gid=1479971176#gid=1479971176 Yehwan Song] - artist, programmer, designer
** [https://docs.google.com/spreadsheets/d/18JuDISe8bBnW93Dxf6gLopYb0q4KoPE7FEaIRBwr2eI/edit?gid=1479971176#gid=1479971176 Elliott Cost] - designer, developer
** [https://laurelschwulst.com/ Laurel Schwulst] - designer, writer, artist
** [https://alecsi.com/ Alexis Jamet] - designer, illustrator

=== 3. Description ===
Youjung 유정 (1) works at the intersection of graphic design, illustration and coding. (2) takes a crafty approach, layering textures and meanings. (3) is interested in taking fun seriously and conducting an open-ended research on digital platform culture. (3) 's work has taken form from branding, packaging, infographics to websites, zines and illustration (4) is currently studying Experimental Publishing at Piet Zwart Institute, Rotterdam NL. (5) is from Seoul, South Korea. 

Youjung is a designer, illustrator and coder. Her works take a crafty approach, layering textures and meanings. She is interested in playful aspect of digital tools and currently conducting an open-ended research into digital culture. Her work spans branding, packaging, and infographics to websites, zines, and illustrations. She is from Seoul, South Korea and is currently studying Experimental Publishing at Piet Zwart Institute, Rotterdam.
----