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

From XPUB & Lens-Based wiki
Line 107: Line 107:
[https://cs.sjoy.lol/ CSS JOY Webring]<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.html


----
----

Revision as of 21:50, 4 November 2025

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
  • 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.html

  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
Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=User:Kiara/Research/workshops.log/XPUB_Magical_Webring&oldid=313572"