User:Kiara/Special Issue 26

Declarations

display

&&

position

Directed by ✿Doriane✿
General page: https://pzwiki.wdka.nl/mediadesign/SI26

Introduction

designing with a software = designing with gesture
designing in css = designing with words → can it be seen as literature?

I had been following Doriane and her work for a while. When I first heard about Declarations, I wanted to join every workshop, but couldn't...until she held one in Rotterdam in December!

I was super happy to finally be able to be part of that, the project speaks a lot to me. The topic of the workshop was CSS emails, it was super buggy but very funny and instructive.

During the workshop, we chatted and got to talk about the upcoming Special Issue this one, yes!!. I am very glad she is here this trimester to guide us.

The official extensive pad of the trimester

Exercise: Declarative Companions

We each chose an object to describe so someone else could interpret it in CSS.

• My declaration:

Sevgi's interpretation of my companion

It is a container that can be found in the kitchen.
we mostly put hot beverages in it, but it also sometimes welcomes instant noodles or soup.
It can be transparent, colourful, opaque.
It has a handle on the side and usually takes around 25ml of beverage.
It is often made of ceramics or glass and is smooth at least inside.
Its shape can vary: from tall and narrow to small and wide, but also kind of standard in height and width sometimes.
In spite of its common use, it often does not keep things warm for long (frustrating).

• Zuhui's declaration:

Interpretation of Zuhui's companion #1 (I didn't have the clear assignment, I improvised)

Interpretation of Zuhui's companion #2 (Once I got the clear assignment – it's better!)

Made of plastic, silicon(?) and digital gold(?)
Small enough to hide it in your palm, big enough to choke a sea animal.
Very thin and light, almost like air (you wouldn’t notice if you accidentally drop it).
It has a smooth surface at the moment, but the level of smoothness can vary on how much I use them.
Two sided, one side represents a beautiful blue-hue landscape of the Netherlands.
The other side has shiny hologram, very sunny orange background attached with thumbnail size of mugshot of a person.

Repo of all the interpretations made in the class

It was quite complex to determine what the objet was (it was a transport card...) but a very fun exercise to do! :D

Web Extensions

We are now messing around with scratch, a Firefox extension made by Doriane that allows to write CSS in a pad and link it in the extension so that every website you visit during the session takes that precise CSS.

A glimpse of our playground

Degridify

20-01-2025
with Chrissy, Wyn & Imre
The aim with degridify is to delete the display: grid; (or make it disappear) on any website. We had to start somewhere and decided to go with StackOverflow. That led us to be obligated to use their specific classes so we stuck to it.
Because of this, the tool is absolutely not universal and only works on StackOverflow. Ang yet, it doesn't really break the grid. It sure breaks the website though, the results are really fun. →

Here, the CSS pad we wrote

Specific Lens

03-02-2025 to 18-04-2025
with Chrissy

Chrissy and I started writing a script to highlight the displays and positions used on a web page. The script goes through every element in the HTML and checks their display and position properties. Base don that information, elements get assigned a corresponding class.
For example, an element having a display: block; and position: sticky; will get class= "display-grid position-sticky".
With the lovely help of Kim, and then Doriane to clean up the code, it is now working very nicely!!!
Since this is done inside of the scratch1.0 extension, we implemented the code in the extension's code.

Some flashy and blinding results of the experimentation:

• 
• 

Since it worked so well, we decided to keep pushing and kept on working on the Specific Lens. We are aiming to develop it as a proper Firefox extension.

In order to do this, we need it to be more polished and precise, refine the colour coding and think about documentation and goals.
The first step was to take it out of scratch and start working on it as an extension of its own.

New structure of the folder
🗀 icons
🗀 popup
main.js
manifest.json
README.md
specific-lens.css

Personal documentation of the project

• WHAT IT IS
• WHAT IT DOES
• HOW IT WORKS
• HOW IT IS MADE
• MY PART IN THE PROJECT
• WHAT I TAKE FROM IT

Dedicated wiki page: Specific Lens

Prototyping Classes

Build a Web Extension

04-02-2025
with Joseph

Today in Prototyping, Joseph showed us how to make an extension from scratch (not Doriane's tool, literally from zero).
Since we were working on an under construction theme, we got to a point where whe had lots of "under ..." statements. It made me want to push the joke further, so as we were making an extension to replace image files, I decided to go for an Evanescence theme (Going Under, that's the joke).
Here's the result on the XPUB website:

• 
• 

Dot Matrix Printing

11-03-2025 to 04-02-2025
with Manetta

Today is focused on Dot Matrix Printers. We are trying to print ASCII art!
The outcome of the day is a beautiful Dragon Zine <3

• 
• 

SuperVisual HyperZine

This whole Special Issue has been super visual - we are messing around with CSS declarations, so we also make lots of screenshots!
As the big nerds we are, we have a certain profound love for zines, thus we decided to work on a HyperZine, gathering all the screenshots we made during those 3 months, working on web extensions, tools and Nintendo 3DS websites.
The team is: Tessa, Chrissy, Eleni, Wyn and me.

Right now, we gathered almost all the screenshots, we will then use Jinja to produce an HTML document from those folders.

Personal documentation of the project

• WHAT IT IS
• WHAT IT DOES
• HOW IT WORKS
• HOW IT IS MADE
• MY PART IN THE PROJECT
• WHAT I TAKE FROM IT

Dedicated wiki page: Hyperzine