User:Kiara/Research/workshops.log/XPUB Magical Webring

From XPUB & Lens-Based wiki
Research Contents
General page
— Notes

——— Prototypes

— Project Proposal

——— Drafts

— Thesis Outline

——— Drafts

— (more or less) Rapid Prototypes

——— WebSpell Prototypes
——— Workshop: XPUB magical webring

@ 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


Css-rituals.png

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
  1. Create a folder dedicated to the webring. It can be in an already existing folder where you keep all your xpub code or wherever you want. Ultimately, the folder containing your code will be uploaded to cerealbox.
  2. Your folder should contain at least index.html and style.css files.
  3. ✨ Make your page ✨
  4. Somewhere in your code you will have to integrate this piece of code in order to make the webring work.
    1. code will be here
  5. Upload your folder into cerealbox:
    1. Navigate to my folder: kiara/magic-webring
    2. 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
  6. 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!


Be bold,
Be yourself,
Have fun!

References

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



  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