User:Kiara/Research/workshops.log/XPUB Magical Webring: Difference between revisions

Latest revision as of 15:30, 20 November 2025

Research Contents
General page
— Notes ——— Prototypes ——— Try Out Nights
— Project Proposal ——— Drafts ——— Final
— Thesis Outline ——— Drafts ——— Final
— (more or less) Rapid Prototypes ——— WebSpell Prototypes ——— Workshops

@ wdka - 03-11-2025
with Charlie and the xpub crew

A bit of context

The magic is about caring, sharing, feeling, connecting.
The web is about caring, sharing, connecting and sometimes feeling, to some extent.

During a conversation on this matter with Doriane, we raised a few ideas that allow to explain those implicit yet existing similarities and links the magic and the web share. Here is an edited extract of those ideas:

A webring is the perfect depictions of decentralization: it is trans-website. The webring doesn't exist in a website but cross-website which makes it less tangible so then more magic: it exist trans-website + belongs to no one = a possibility for (re)appropriation/remix/etc.; the magic happens between the websites; we use the term "ring" but there is no ring the ring is a conceptual magical shape^[1].
DIWO (do it with others) is a good example of magical practice: physical gathering, ritual, to make up for the inaccessibility of dev/programming tutorials >> shoulder2shoulder against crypto-dev
About declarativeness:
- The magic is declarative: formulas, incantations, "manifesting" (formulating intention): by saying repetitively something it becomes real/true/alive/comes into existence
- The web is declarative
  - The CSS selector *:not(:focus):hover is an incantation that might be super powerful on the web and contains multiple intentions
  - Web extensions a "web fabulation": modifying a website in one go (= metamorphosis), through simple CSS formulas is both magic and hacking

From those ideas, that gained the ability to be voiced in reference to this post by Miriam Suzanne (picture), I developed this workshop. It thus relies on webrings, countering systems and (web) inaccessibility, indie web principles (accessibility, inclusivity, hand-coding, light websites, personal websites, etc.^[2]), shoulder2shoulder, shape-shifting.

After that discussion, I sought to expand on those topics and came up with some interesting concepts:

The web is a magical entity as a whole, both as a space and in what-it-is-made-of:
- The web, a magical space
  - A network of hyperlinks, connecting and sharing in a back and forth relationship to one another
  - Blogs, Tumblr and to a lesser extent forums are online bubbles where a lot of magic happens: sharing, feeling, building community, folklore and decentralization
  - CSS as a ritual, CSS as a spell
- The web, magically built
  - The CSS selectors :hover | :focus | :not() | :has() | class name | id name | animation | :visited all invoke actions or inaction, bear intention and have a strong declarative power
  - Using z-index with a crazy value to invoke a special entity of the absolute positioning
  - Everything is a system and we are the hackers
  - The content of a website lies in the <body> (physical), the information about the website is in the <head> (spiritual)

sheezus, what's the workshop about already?!

✨ The aim of the workshop is to create a small magical webring. ✨
In order to do so, you may team up or work alone, at your own preference. We will each work on a webpage of our own choice, the theme is completely yours to choose.
Preferably, you will only work with HTML and CSS, but JS is not forbidden, as long as it is not used to generate the entire HTML (sorry Fred).

In the spirit of the web as a magical entity (space and functioning) described above, embrace the magic of the web and the magic within you and let them flow.

The webring thus created will live on cerealbox and act as an XPUB ritual.

Workflow

Create a folder dedicated to the webring. It can be a subfolder in an already existing folder where you keep all your xpub code or wherever you want. Ultimately, the folder containing your webring workshop code will be uploaded to cerealbox.
Your folder should contain at least index.html and style.css files.
✨ Make your page ✨
Somewhere in your code you will have to integrate this piece of code in order to make the webring work:

<div id="xpubRing"></div>
<script type="text/javascript" src="https://hub.xpub.nl/cerealbox/~kiara/magic-webring/webring.js"></script>

In your <head>, insert this:

<link rel="stylesheet" href="https://hub.xpub.nl/cerealbox/~kiara/magic-webring/webring-styles.css">

Upload your folder into cerealbox:
- Navigate to my folder: kiara/magic-webring
- Upload your folder into it, the folder should have the name(s) of the people who made it (eg: name1_name2) so that the url to the folder looks like
  https://xpub.nl/cerealbox/kiara/magic-webring/name1_name2
Once all the folders are uploaded, I will retrieve the urls, put them in the script and we will take a tour through the ring together!

Structure sumup once uploaded to cerealbox:

~/kiara/magic-webring
   index.html
   style.css
   webring.js
   name1_name2 (your folder)
     index.html
     style.css
     whatever additional folder you might need (imgs, fonts, etc.)

Be bold,
Be yourself,
Have fun!

References

Webring list
Roos Groothuizen Code-a-thon
CSS JOY Webring

Result

The result of the workshop is at https://hub.xpub.nl/cerealbox/~kiara/magic-webring/index.html

↑ Magic circles; The Ring (movie, paranormal); Planets; Cyclic theories and rituals; etc.
↑ I redirect you to this website if you want to know more

[1] Magic circles; The Ring (movie, paranormal); Planets; Cyclic theories and rituals; etc.

[2] I redirect you to this website if you want to know more

[1]

[2]

@@ Line 6: / Line 6: @@
 |-
 | [[../../notes.md|— Notes]]
-[[../../notes.md/Prototypes|——— Prototypes]]
+[[../../notes.md/Prototypes|——— Prototypes]]<br>
+[[../../Try Out Nights|——— Try Out Nights]]
 |-
 | — Project Proposal
 [[../../draft_project_proposal|——— Drafts]]<br>
-<!-- [[../../project_proposal|——— Final]] -->
+[[../../project_proposal|——— Final]]
 |-
 | — Thesis Outline
 [[../../draft_thesis_outline|——— Drafts]]<br>
-<!-- [[../../thesis_outline|——— Final]] -->
+[[../../thesis_outline|——— Final]]
 |-
-| (more or less) Rapid Prototypes
+| — (more or less) Rapid Prototypes
 [[../../WebSpell/Prototypes|——— WebSpell Prototypes]]<br>
-[[../../workshop.log/XPUB_Magical_Ring|——— Workshop: XPUB magical webring]]
+[[../../workshops.log|——— Workshops]]
 |}
@@ Line 33: / Line 34: @@
 During a conversation on this matter with Doriane, we raised a few ideas that allow to explain those implicit yet existing similarities and links the magic and the web share. Here is an edited extract of those ideas:
-* A webring is the perfect depictions of decentralization: it is trans-website. The webring doesn't exist in a website but cross-website which makes it less tangible so then more magic: it exist trans-website + belongs to no one = a possibility for (re)appropriation/remix/etc.; the magic happens between the websites; we use the term "ring" but there is no ring the ring is a conceptual magical shape.
+* A webring is the perfect depictions of decentralization: it is trans-website. The webring doesn't exist in a website but cross-website which makes it less tangible so then more magic: it exist trans-website + belongs to no one = a possibility for (re)appropriation/remix/etc.; the magic happens between the websites; we use the term "ring" but there is no ring the ring is a conceptual magical shape<ref>Magic circles; ''The Ring'' (movie, paranormal); Planets; Cyclic theories and rituals; etc.</ref>.
-* DIWO is a good example of magical practice: physical gathering, ritual, to make up for the inaccessibility of dev/programming tutorials >> shoulder2shoulder against crypto-dev
+* DIWO (do it with others) is a good example of magical practice: physical gathering, ritual, to make up for the inaccessibility of dev/programming tutorials >> shoulder2shoulder against crypto-dev
 * About declarativeness:
 ** The magic is declarative: formulas, incantations, "manifesting" (formulating intention): by saying repetitively something it becomes real/true/alive/comes into existence
 ** The web is declarative
-*** The CSS selector <code>*:not(:focus):hover</code> is an incantation that might be super powerful on the web and contains multiple intentions
+*** The CSS selector <code style="font-size: 13px;">*:not(:focus):hover</code> is an incantation that might be super powerful on the web and contains multiple intentions
 *** Web extensions a "web fabulation": modifying a website in one go (= metamorphosis), through simple CSS formulas is both magic and hacking
@@ Line 45: / Line 46: @@
 [[File:Css-rituals.png|frameless|right|400px]]
 From those ideas, that gained the ability to be voiced in reference to this post by Miriam Suzanne (picture), I developed this workshop.
-It thus relies on webrings, countering systems and (web) inaccessibility, indie web principles (accessibility, inclusivity, hand-coding, light websites, personal websites, etc.<ref>I redirect you to [https://indieweb.guide/what-is-indieweb/ this website] if you want to know more</ref>), shoulder2shoulder, shape-shifting.
+It thus relies on webrings, countering systems and (web) inaccessibility, indie web principles (accessibility, inclusivity, hand-coding, light websites, personal websites, etc.<ref>I redirect you to [https://indieweb.guide this website] if you want to know more</ref>), shoulder2shoulder, shape-shifting.
 After that discussion, I sought to expand on those topics and came up with some interesting concepts:
@@ Line 54: / Line 55: @@
 *** CSS as a ritual, CSS as a spell
 ** The web, magically built
-*** The CSS selectors <code>:hover | :focus | :not() | :has() | class name | id name | animation | :visited</code> all invoke actions or inaction, bear intention and have a strong declarative power
+*** The CSS selectors <code style="font-size: 13px;">:hover | :focus | :not() | :has() | class name | id name | animation | :visited</code> all invoke actions or inaction, bear intention and have a strong declarative power
-*** Using <code>z-index</code> with a crazy value to invoke a special entity of the absolute positioning
+*** Using <code style="font-size: 13px;">z-index</code> with a crazy value to invoke a special entity of the absolute positioning
 *** Everything is a system and we are the hackers
-*** The content of a website lies in the <code>&lt;body&gt;</code> (physical), the information about the website is in the<code>&lt;head&gt;</code> (spiritual)
+*** The content of a website lies in the <code style="font-size: 12.2px;">&lt;body&gt;</code> (physical), the information about the website is in the <code style="font-size: 13px;">&lt;head&gt;</code> (spiritual)
 ==== sheezus, what's the workshop about already?! ====
@@ Line 66: / Line 67: @@
 In the spirit of ''the web as a magical entity (space and functioning)'' described above, embrace the magic of the web and the magic within you and let them flow.
-The webring thus created will live on cerealbox and act as a(n XPUB themed/related) ritual.
+The webring thus created will live on cerealbox and act as an XPUB ritual.
-Somewhere in your code you will have to integrate this piece of code in order to make the webring work.
+===== Workflow =====
- code will be here
+* Create a folder dedicated to the webring. It can be a subfolder in an already existing folder where you keep all your xpub code or wherever you want. Ultimately, the folder containing your webring workshop code will be uploaded to cerealbox.
+* Your folder should contain at least <code>index.html</code> and <code>style.css</code> files.
+* ✨ Make your page ✨
+* Somewhere in your code you will have to integrate this piece of code in order to make the webring work:
+<syntaxhighlight lang="html">
+<div id="xpubRing"></div>
+<script type="text/javascript" src="https://hub.xpub.nl/cerealbox/~kiara/magic-webring/webring.js"></script>
+</syntaxhighlight>
+* In your <code>&lt;head&gt;</code>, insert this:
+<syntaxhighlight lang="css">
+<link rel="stylesheet" href="https://hub.xpub.nl/cerealbox/~kiara/magic-webring/webring-styles.css">
+</syntaxhighlight>
+* Upload your folder into cerealbox:
+** Navigate to my folder: <code>kiara/magic-webring</code>
+** Upload your folder into it, the folder should have the name(s) of the people who made it (eg: name1_name2) so that the url to the folder looks like<br> <code><nowiki>https://xpub.nl/cerealbox/kiara/magic-webring/name1_name2</nowiki></code>
+* Once all the folders are uploaded, I will retrieve the urls, put them in the script and we will take a tour through the ring together!
+'''Structure sumup once uploaded to cerealbox:'''<br>
+ ~/kiara/magic-webring
+    <span style="opacity: 0.6;">index.html</span>
+    <span style="opacity: 0.6;">style.css</span>
+    <span style="opacity: 0.6;">webring.js</span>
+    name1_name2 (your folder)
+      <span style="opacity: 0.6;">index.html</span>
+      <span style="opacity: 0.6;">style.css</span>
+      whatever additional folder you might need (imgs, fonts, etc.)
+<div style="font-size: 18px; font-weight: bold; font-style: italic; font-family: Liberation Serif; border: dashed 3px lavender; padding: 0px 20px; width: fit-content;">
 Be bold,<br>
 Be yourself,<br>
 Have fun!
+</div>
+==== References ====
+[https://brisray.com/web/webring-list.htm Webring list]<br>
+[https://rg-mage.neocities.org/code-a-thon Roos Groothuizen Code-a-thon]<br>
+[https://cs.sjoy.lol/ CSS JOY Webring]<br>
+==== Result ====
+The result of the workshop is at https://hub.xpub.nl/cerealbox/~kiara/magic-webring/index.html
+----
 <references />
 </div>
 </div> <!-- this is the end of the page -->