SI26: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
No edit summary
 
(69 intermediate revisions by 12 users not shown)
Line 1: Line 1:
(testing iframe compatibility with the wiki below)
{{Iframe|src=https://practices.tools|width=400|height=500|style=float:right}}


<iframe src="https://practices.tools" frameborder="0" width="320" height="320" ></iframe>
==Declarations==


==Declarations==
dans ce wrkshop nous avons fait la recette d'[[Oyaki Maîs]]
 
[[File:Declarations.png | 400px | thumb | right | A representation of the declarative layer of CSS that mediate our daily interaction with technology]]


Declarations is an ongoing trans-disciplinary artistic research project into the poetic materiality of the CSS web-standard and its echoes on design and artistic practices.
Declarations is an ongoing trans-disciplinary artistic research project into the poetic materiality of the CSS web-standard and its echoes on design and artistic practices.
Line 9: Line 11:
A [https://declarations.style/pages/about.html presentation of the declarations research project], with quotes and some illustrations of how the research is looking at declarative web-languages. It is important to read the first and second part (what is CSS, and the research questions).
A [https://declarations.style/pages/about.html presentation of the declarations research project], with quotes and some illustrations of how the research is looking at declarative web-languages. It is important to read the first and second part (what is CSS, and the research questions).


We will watch the video essay by Miriam Suzanne [Why is CSS so weird https://www.youtube.com/watch?v=aHUtMbJw8iA&abchannel=MozillaDeveloper] as an important starting point to untangle some questions of the research together.
We will watch the video essay by Miriam Suzanne [https://www.youtube.com/watch?v=aHUtMbJw8iA&abchannel=MozillaDeveloper Why is CSS so weird] as an starting point to untangle some questions of the research together.


An [https://declarations.style/observatory.html evolving selection of declarations experiment], Doriane will present some of those progressively through the sessions.
So far what is CSS:


==Special issue: <code>display</code> and <code>position</code>==
* if HTML is the structure of the house, '''CSS is interior design (paints, textiles, flooring, etc.)''', how we feel in a room? (laurel's pdf)
* as an interface, CSS is the '''infinitessimely thin shared boundary that mediate our relation with the web''', that is very close to us, individuals, in the vaste ecosystem of the web, also called front-end. (doriane's scheme)
* as a declarative language, CSS is giving up control and designing in a device-agnostic manner for unknown canvases, '''similarly to a script for theater piece''', that will always be re-interpeted in its context of execution (miriam video)


In the context this XPUB special issue, Declarations will focus on something quite specific.
An [https://declarations.style/observatory.html evolving selection of declarations experiment], Doriane will present some of those progressively through the sessions.
The idea is to take a specific angle on the learning of CSS: to be linguists at the same time than learning the language. The special issue is structured in 3 chapters:


1. exploring the linguistic aspect of web-languages
==Reader==
2. investigating & documenting cultural uses of specific CSS properties
3. speculation as a tool to think about it differently


Two CSS property have been choosing in that regard: <code>display</code> and <code>position</code>.
A selection of references to go further.
They are interesting because they show how CSS is a language, notably by the use of non-numeric value and keyword with meaning. They also both have been subject to many change in the standard: unfolding a whole cultural history of the web that lies in the words it uses.


By reading the standard it appears that this is a rather complex propeties, what does it mean for certain things to be block and other the be inline? what does it mean to be inline-block?
{| class="wikitable"
What does the words **block and inline** means? how where they chosen? by who?
|-
How are they implemented, what complexities or differences are often unseen in those processes?
! Author !! Title !! Year
|-
| Nolwenn Maudet || Tactical Design || 2023
|-
| J. R. CARPENTER || [http://luckysoap.com/statements/handmadeweb.html A Handmade Web] || 2015
|-
| Zach Mandeville || [https://coolguy.website/basic-html-competency-is-the-new-punk-folk-explosion/ Basic HTML Competency Is the New Punk Folk Explosion!] || 2016
|-
| Laurel Schwulst || [https://thecreativeindependent.com/essays/laurel-schwulst-my-website-is-a-shifting-house-next-to-a-river-of-knowledge-what-could-yours-be/ My website is a shifting house next to a river of knowledge. What could yours be?] || 2018
|-
| Femke Snelting || [https://constantvzw.org/verlag/spip.php?page=article&id_article=101&mot_filtre=5&id_lang=0# Dividing & Sharing] || 2008
|-
| Frank Chimero || [https://frankchimero.com/blog/2015/the-webs-grain/ The web's grain] || 2015
|-
| Olia Lialina || [http://art.teleportacia.org/observation/vernacular/ A Vernacular Web 1,2,3] || 2005, 207, 2010
|-
| John Allsopp || [https://alistapart.com/article/dao/ A Dao of Web Design] || 2000
|}


==Standard means blurry and frictions==
==Special issue: <code>display</code> and <code>position</code>==


CSS is a standard, meaning its edges are blurry. CSS is a standard maintained by the W3C (the World Wide Web Consortium). At its core, CSS is a set of recommendations, suggesting how things should be interpreted. Coming from dreams of accessibility and openness, it leaves the freedom to each software to follow or deviate from the standard.  
In the context this XPUB special issue, Declarations will focus on something quite specific.
History -- notably the "the browser wars" - showed that there are divergences about which logic should dictate its evolution. Preferences of default styling, properties considered superfluous and thus removed (haikon lee CSS region), or unofficial ones forced in the standard. Knowing whether it makes sense to use a properties has became its own science, culminating in the well-named website Can I use. Technical decisions lead to cultural impact. We can only imagine how the choices of what makes it to the CSS standard could have redefined our attention to various visual elements, its impacts on our lives expanding far outside of the screens space. Therefore it seems fundamental for Declarations to ask what are the power dynamics, as well cultural positioning, at play in the CSS standard? Who are the actors of this political ecosystem and what are their motivations?
The idea is to take a weird angle on the learning of CSS: to be linguists at the same time than learning the language.


One the desire of Declarations is to create a corpus and network of meaningfull CSS artistic practices as a tool to enter in conversation with the standard itself. Through transdisciplinarity, it tries to not only speak from a designer or publisher POV, but look at the work of artists, amateur, people with literary background, cultural studies, poets and hackers. The research wishes to enter in conversation with W3C people, and maybe have **a seat at their table**, but from a different perspective: one that is not only motivated by the technics of certain properties but also by **the meaning of the words**.
The special issue is structured in 3 chapters:


==Prescriptive and descriptive==
# exploring the linguistic aspect of web-languages
# investigating & documenting cultural uses of specific CSS properties
# speculation as a tool to think about it differently


{{Blockquote
Two CSS property have been choosing in that regard: <code>display</code> and <code>position</code>.
|text=Linguistic prescription is the establishment of rules defining preferred usage of language, including rules of spelling, pronunciation, vocabulary, morphology, syntax, and semantics. Linguistic prescriptivism may aim to establish a standard language, teach what a particular society or sector of a society perceives as a correct or proper form, or advise on effective and stylistically apt communication.  
They are interesting because they show how CSS is a language, notably by the use of non-numeric value and keyword with meaning. They also both have been subject to many change in the standard: unfolding a whole cultural history of the web that lies in the words it uses.
If usage preferences are conservative, prescription might appear resistant to language change; if radical, it may produce neologisms. Such prescription may be motivated by attempts to improve the consistency of language to make it more "logical"; to improve the rhetorical effectiveness of speakers; to align with the prescriber's aesthetics or personal preference; to impose linguistic purity on a language by removing foreign influences; or to avoid causing offense (i.e. for etiquette or political correctness).


Prescriptive approaches to language are often contrasted with the descriptive approach of academic linguistics, which observes and records how language is actually used (while avoiding passing judgment). The basis of linguistic research is text (corpus) analysis and field study, both of which are descriptive activities. Description may also include researchers' observations of their own language usage. In the Eastern European linguistic tradition, the discipline dealing with standard language cultivation and prescription is known as "language culture" or "speech culture".
By reading the standard it appears that this is a rather complex properties. For example for display we can ask ourselves:


|author=Wikipedia, Linguistic prescription
* What does it mean for certain things to be block and other the be inline? what does it mean to be inline-block?
}}
* How and why where table, flex and grid invented? Do we need more? What are the motivations and by who was it done?
* How are they implemented, what complexities or differences are often unseen in those processes?
* What does the words "block" and "line" means outside of CSS but through design history?


During the special issue, we will not only learn to make webpage with CSS, but also look at both:
The subject of [[SI26: CSS linguistics | becoming CSS linguists]] will be introduced and expended in its dedicated page .


* prescriptive side of CSS: the standard by the W3C, and its evolution
==Chapt.1 Words are events, they do things, change things (Entering CSS linguistics)==
* descriptive side of CSS: the cultural use of CSS by amateur & designer over the evolution of the web


==Inline-block fable==
[[File:Words.png | 400px | thumb | right | Words are events, they do things, change things. They transform both speaker and hearer; they feed energy back and forth and amplify it. They feed understanding or emotion back and forth and amplify it. — Ursula K. Le Guin, The Wave in the Mind: Talks and Essays on the Writer, the Reader and the Imagination ]]


A little fable that show the linguistic nature of the CSS web-language in a curious way is the one of <code>inline-block</code>.
===Monday 6 January===


It can be easy for an educated web-developer to describe what is <code>display: block;</code>: well, they are big block that take all width, they stack vertically and take only the necessary height they need. Same apply for <code>display: inline;</code>: well, they are lines of text, going from left to right or right to left, and whenever there is no space left to write the next character, it flows to the next line.
morning:
But let's try to explain with the same simple language what is <code>display: inline-block;</code>? Much harder.


However, that doesn't prevent us to use it. In fact, the same educated web-developer might know exactly when and where to use it in order to produce a desired result in terms of design, because they saw it in use by other and learn with instinct and try and error how and when to use it. It is very similar to how we learn to use natural language: we hear people say some words, and at some point we can use them in sentences, but that doesn't mean we can define them as one would do in a dictionnary, or as an ethymologist, or as a linguist. Our instinctive but limited understanding of inline-block highlight to me how CSS is really a language that we "speak" and "learned" by using-making the web.
* A [https://declarations.style/pages/about.html presentation of the declarations research project], with quotes and some illustrations of how the research is looking at declarative web-languages. It is important to read the first and second part (what is CSS, and the research questions).
* We will watch the video essay by Miriam Suzanne [https://www.youtube.com/watch?v=aHUtMbJw8iA&abchannel=MozillaDeveloper Why is CSS so weird] as an starting point to untangle some questions of the research together.


In the special issue we will try to deconstruct this instinct and take the role of linguist. We will ask ourselves: "Wait, what does inline-block actually mean?".
afternoon:  


==Reader==
a first declarative warmup exercise [[SI26 Declarative companions | Declarative companion]].


A selection of references to go further.
===Monday 13 January===
 
{| class="wikitable"
|+ Caption text
|-
! Header text !! Header text !! Header text
|-
| Example || Example || Example
|-
| Example || Example || Example
|-
| Example || Example || Example
|}


* Nolwenn Maudet, Tactical Design (link to come, the english translation will be published through the research website https://declarations.style)
morning:
* J. R. CARPENTER, A Handmade Web http://luckysoap.com/statements/handmadeweb.html
* Zach Mandeville, Basic HTML Competency ... https://coolguy.website/basic-html-competency-is-the-new-punk-folk-explosion/
* Laurel Schwultz, My website ... https://thecreativeindependent.com/essays/laurel-schwulst-my-website-is-a-shifting-house-next-to-a-river-of-knowledge-what-could-yours-be/
* Femke Snelting, Dividing & Sharing https://constantvzw.org/verlag/spip.php?page=article&id_article=101&mot_filtre=5&id_lang=0#
* Frank CHimero, The web's grain https://frankchimero.com/blog/2015/the-webs-grain/
* Olia Lialina, A Vernacular Web 1,2,3 http://art.teleportacia.org/observation/vernacular/
* John Allsopp, A Dao of Web Design https://alistapart.com/article/dao/


==Chapt.1 Words are events, they do things, change things (Entering CSS linguistics)==
* sharing moment about the Declarative companions made last time.
* presentation of the special issue, through [[SI26: CSS linguistics | becoming CSS linguists]]
* meeting [[SI26 Display | Display]] and [[SI26 Position | Position]], the two CSS properties we are going to dive in


===Monday 6 January===
afternoon:


morning: presentation of declarations and of the special issue.
* trying to complete the prompt for both Display and Position


afternoon: a first exerice [Declarative companion](https://declarations.style/declarative-companion-le75-graphic-design.html) but in group to share knwoledge, on a pad, using octomode.
===Monday 20 January===
 
===Monday 13 January===


todo:
todo:


* small page that present display, and position, i will need iframes to start them!
* ✓ read Tactical Design, Nolwenn maudet
* space to drop lot of images?
 
morning


* sharing moment about the **Declarative companions** made last time.
morning:
* css story of the day (Doriane pick one thing from the observatory and tell a story about it)
* meeting: `display` and `position`, the two properties we are going to look at.
    * outside of CSS what does those words means to you in graphic design?
    * outside of graphic design what does those words means to you?
* starting a media collection (nextcloud or wiki ?), to drop images of thing that echoes with the words: display, block, inline, flow, root, outer-inner, position, static, sticky, fixed, absolute, relative, inherit, initial.
* browsing exercice: go through website we know and try to pick up interesting example of all those uses, through the inspector and screenshoting
* starting reading the standard page


looking at the practice of arpentage (land surveying in EN)
(Notes are being taken on our main pad, https://pad.xpub.nl/p/declarative-companions)


Put forward from lower class worker desiring knowledge, but without academic background, splitting complex text between participants to only read 1 para then explain in simplest possible language to others. Creating diagonal reading / sensible (collective) understanding. Use for reading!
* second round of presentation on declarative companions
* collective sharing moment on display and position
* introduction to browser extension, the tactical interest of browser extension, and how they work
* install [https://declarations.style/scratch.html Scratch] together


===Monday 20 January===
afternoon:


todo:
* making extensions
* to read for that day: Nolwenn maudet - tactical design translation
 
* css story of the day (Doriane pick one thing from the observatory and tell a story about it)
* introduction to browser extension, the tactical interest of browser extension, how do they work concretly
* **using CSS to reveal CSS, by styling element differently according to which property they are using**. making of the "lens" extension: when extension is activated it reveal in a graphical way the `display` and `position` properties on every website (ex: all element using `display: flex;` have a cyan outline, and we get information when hovering them)


==Chapt.2 Every language has a grain (CSS Deep dive in ethymology & cultural usages)==
==Chapt.2 Every language has a grain (CSS Deep dive in ethymology & cultural usages)==


from now on, we'll be dividing in two groups: one group focusing on `display` and `position`.
Proposal was to divide in two groups: one group focusing on `display` and `position`.
groups will have moment to share back to the rest of the students their research progress.
groups will have moment to share back to the rest of the students their research progress.
But through the previous sessions together, differents individual/group projects appeared, it was judged more interesting to pursue those diverse initiatives than to force it into a more theoretical research on web-standard.


===Monday 27 January===
===Monday 27 January===
Line 140: Line 129:
===Monday 3 February===
===Monday 3 February===


morning
morning  
 
* sharing of the Berlin workshop
* introducing the various declarations references text, in order to be read in smaller group through Lidya' writing / methodology class
* sharing of the position property, see pad: https://pad.xpub.nl/p/declarative-companions
* a moment to slowly gather our notes on position and display so far
 
morning/afternoon
 
* finished the declarative companions
* pursuing websites fabulations (browser extensions)
** accumulative cascade
** revealing the <head> or other invisible tags
** specific lens for display / position
** some aesthetic swap (manually translating styles from one website to another)
* other projects appearing
** iframe quilting
** "the tiger ... in the forest"
** a website made for the nintendo 3Ds
 
<!--
 
starting the narrative posters/zine in subgroups,
collectively write a list/protocols for the poster
 
* some text of an intuitive/metaphorical understanding of it?
* an anatomy of its syntax, together with its associated other CSS property?
* element that have it by default?
* a timeline?
* some text from the standard specification?
* some text from the css groups discussion?
* some classic examples? (website uses)
* some punk examples? (using it in weird ways, drawings/articulations)
* some non-CSS examples? (in graphic design history)
* some non-flat-design examples? (metaphors or objects)


* css story of the day (Doriane pick one thing from the observatory and tell a story about it)
grouping in
* starting the arpentage (collective reading) of the W3C standard draft for `display` and `position`


afternoon
* display
** block/inline/inline-block
** table
** grid
** flex
* position
** relative/absolute
** sticky/fixed


* using the [Scratch extension](https://declarations.style/scratch.html), to restyle collectively the standard pages
-->
* slowly going forward a web2print zine of restyled standard pages


===Monday 10 February===
===Monday 10 February===
Line 154: Line 182:
morning
morning


* css story of the day (Doriane pick one thing from the observatory and tell a story about it)
* we planned in a advance a sharing moment of a discussion that had been had internally between the students about what they want do produce from that special issue
* continuing the arpentage (collective reading) of the W3C standard draft for `display` and `position`
* the following tracks came out


afternoon
==== HYPERVISUAL SUPER ZINE ====


* using the [Scratch extension](https://declarations.style/scratch.html), to restyle collectively the standard pages
a zine of screenshots of modified website, like a documentary of lots of CSS tweaking. Screenshots started to be taken on everybody's computer as soon as we started to play with web-extensions. There is a folder here: https://cloud.nubo.coop/s/6oX4DCWjMLHsjxn, to collect those screenshot.
* do we have a zine?


===Monday 17 February===
* by taking a lot of screenshots in the process of editing CSS, extension aren't a fix thing, but a process of manual bending and tweaking, always changing.
* a screenshot shouldn't pretend to be a website, it's a fixed image, a situated recording that stays
* once freed from the "objective, representative" goal of screenshot, they can become more creative: very zoomed in, a photo of the screen itself, or of a beamed website on a wall, etc...
* an additionnal idea was to print parts on transparent paper (snippets of codes?)
 
==== QUILTING WEBRING ====
 
after a discussion on what's a webring, there was a wish to create web-mazes.
it sounded an opportunity for iframe quilting.
we would make a page that visualize the webring through CSS iframe quilting.
 
* https://tedium.co/2020/11/20/webring-history/
* https://foldoc.org/europa.html
* https://thehtml.review/03/ this but with iframes Wiki page:
* [[User:Sevgi/Special Issue 26/Quilting p]]


* what is a block in language/graphic design? what is a line in language/graphic design?
==== TIGER POEM ====
* can we trace the history of certain of those words? how does `sticky` came to be? how does `flex` or `grid` came to be? (there are interesting stories there)


==Chapt.3 I live in a different home everyday (Fabulating CSS standard evolution) ==
a generative story book but both css and html are the book, it changes dynamically when you resize the page.<br>
↘︎ '''[[User:Zuhui/SI26/Storybook |its wiki page]]'''


===Monday 3 March===
==== RE: poetry ====


===Monday 10 March===
A collection of poetical sounding email subject from the w3c mailing list. To be turned in a fanzine?
W3C Mailing List Archive (search) https://www.w3.org/Search/Mail/Public/search
collect here: https://pad.xpub.nl/p/re_poetry


===Monday 17 March===
==== Timeline ====


===Monday 24 March===
We started a (rather informal) timeline of events around the creation of css properties we researched ... some interesting moments from the mailing list. this could be one timeline per 'Display' and one per 'Block' or even more specific e.g. a timeline only focused on 'sticky'.


We figured out a format for the timeline to be able to encode event collaboratively on a pad (using YAML)
TIMELINE LINK : https://pad.xpub.nl/p/timeline


==== Alternative Browsers (Nintendo 3DS, kindle) ====
[[File:Nintendo3DS.png|right|frameless|200x200px]]
[[SI26 3DS-Zine|'''<big>☺ SI26 3DS-Zine ☺</big>''']] 


==Chapt.1 Parallel sessions==
Nintendo 3DS, kindle, PSP
https://pad.xpub.nl/p/SI26_nintendo_DS-3DS
https://pad.xpub.nl/p/3DS_Browser_Investigation


===Tuesday 7 January, with Joseph===
Making a website that is only Nintendo 3DS accessible, after seeing a message from facebook saying: "Sorry, this browser is not longer supported."


===Tuesday 14 January, with Manetta===
Making an acid test, to figure out what works and what doesn't work on the Nintendo 3DS in terms of CSS, but also 3D images, and other functionalities?
Being able to compare it with the kindle?
There is a question of scope that is important to understand when something doesn't work, is it CSS2 (official support documentation)? webkit? netfront? netfront for the nintendo 3DS? the device itself?


===Wednesday 15 January, Methods with Lídia===
One of the possible outcome will be to create website(s) that are only readable through the 3DS browser by reverse engineering the CSS2 functionalities as well as the netfront browser's specificities, such as the pre-defined font, positions, units etc..


===Tuesday 21 January, with Joseph===
====write poetry====
idk if this is an extra project for the SI26 event or just for myself to try 🙃… <br>
https://pzwiki.wdka.nl/mediadesign/User:Chrissy/projects/write_poetry


===Wednesday 22 January, Methods with Lídia===
====CSS drawing and soundboard====
An interactive web installation where stretching the webpage dynamically transforms facial feature positions, generated audio synthesis, and poetry content(ideally).
https://pzwiki.wdka.nl/mediadesign/User:Wyn/Special_Issue_26#From_Physiognomy_to_CSS_Grid


==Chapt.2 Parallel sessions==
===Monday 17 February===


===Tuesday 28 January, with Manetta===
we took the full day to continue the different workshop started last time with two new tracks


===Tuesday 4 February, with Joseph ===
==== FRACTAL DOM ====


===Wednesday 5 February, Methods with Lídia===
from experimental with fractal in different programming languages, came the challenge to do fractal with html/css.
what would be a web-fractal? you can do it with canvas and javascript, but the DOM of an HTML document already is a tree (with nesting acting as node and branches). if you generate a fractal just by inserting div into div, it's appearance is a matter of CSS. by making each div into a single line, with it's child possitionned relatively at one side of the line and with an angle, we find back the "usual" representation of fractals.


===Tuesday 11 February, with Manetta ===
would it be possible to generate such trees but following the structure of existing website?


nb: ''ONLINE OPEN DAY 10-11 (Joseph?), 17-18 (Manetta?)''
https://pzwiki.wdka.nl/mediadesign/User:Shoebby/Webby_Sprouts


===Tuesday 18 February, with Joseph===
==== Scrapping the standard ====


===Wednesday 19 February, Methods with Lídia===
A tentative to scrap implementation of CSS property by crawling the standard draft pages. [[A css who done it]]


==Chapt.3 Parallel session ==
==== Inspector Extensions ====
A bundle of browser extensions investigating different website meta data
[[User:Kim/Special Issue 26/Inspector Extensions]]


===Tuesday 4 March, with Joseph===
==== Specific Lens ====
A browser extension to highlight the display and position values used on the various elements of a webpage.<br>
https://pzwiki.wdka.nl/mediadesign/Specific_Lens


===Wednesday 5 March, Methods with Lídia===
==Chapt.3 I live in a different home everyday (Fabulating CSS standard evolution) ==


===Tuesday 11 March, with Joseph===
===Monday 3 March===


===Tuesday 18 March, with Joseph===
===Monday 10 March===


===Wednesday 19 March, Methods with Lídia===
===Monday 17 March===


===Tuesday 25 March, with Manetta ===
===Monday 24 March===

Latest revision as of 12:17, 16 June 2025



Declarations

dans ce wrkshop nous avons fait la recette d'Oyaki Maîs

A representation of the declarative layer of CSS that mediate our daily interaction with technology

Declarations is an ongoing trans-disciplinary artistic research project into the poetic materiality of the CSS web-standard and its echoes on design and artistic practices.

A presentation of the declarations research project, with quotes and some illustrations of how the research is looking at declarative web-languages. It is important to read the first and second part (what is CSS, and the research questions).

We will watch the video essay by Miriam Suzanne Why is CSS so weird as an starting point to untangle some questions of the research together.

So far what is CSS:

  • if HTML is the structure of the house, CSS is interior design (paints, textiles, flooring, etc.), how we feel in a room? (laurel's pdf)
  • as an interface, CSS is the infinitessimely thin shared boundary that mediate our relation with the web, that is very close to us, individuals, in the vaste ecosystem of the web, also called front-end. (doriane's scheme)
  • as a declarative language, CSS is giving up control and designing in a device-agnostic manner for unknown canvases, similarly to a script for theater piece, that will always be re-interpeted in its context of execution (miriam video)

An evolving selection of declarations experiment, Doriane will present some of those progressively through the sessions.

Reader

A selection of references to go further.

Author Title Year
Nolwenn Maudet Tactical Design 2023
J. R. CARPENTER A Handmade Web 2015
Zach Mandeville Basic HTML Competency Is the New Punk Folk Explosion! 2016
Laurel Schwulst My website is a shifting house next to a river of knowledge. What could yours be? 2018
Femke Snelting Dividing & Sharing 2008
Frank Chimero The web's grain 2015
Olia Lialina A Vernacular Web 1,2,3 2005, 207, 2010
John Allsopp A Dao of Web Design 2000

Special issue: display and position

In the context this XPUB special issue, Declarations will focus on something quite specific. The idea is to take a weird angle on the learning of CSS: to be linguists at the same time than learning the language.

The special issue is structured in 3 chapters:

  1. exploring the linguistic aspect of web-languages
  2. investigating & documenting cultural uses of specific CSS properties
  3. speculation as a tool to think about it differently

Two CSS property have been choosing in that regard: display and position. They are interesting because they show how CSS is a language, notably by the use of non-numeric value and keyword with meaning. They also both have been subject to many change in the standard: unfolding a whole cultural history of the web that lies in the words it uses.

By reading the standard it appears that this is a rather complex properties. For example for display we can ask ourselves:

  • What does it mean for certain things to be block and other the be inline? what does it mean to be inline-block?
  • How and why where table, flex and grid invented? Do we need more? What are the motivations and by who was it done?
  • How are they implemented, what complexities or differences are often unseen in those processes?
  • What does the words "block" and "line" means outside of CSS but through design history?

The subject of becoming CSS linguists will be introduced and expended in its dedicated page .

Chapt.1 Words are events, they do things, change things (Entering CSS linguistics)

Words are events, they do things, change things. They transform both speaker and hearer; they feed energy back and forth and amplify it. They feed understanding or emotion back and forth and amplify it. — Ursula K. Le Guin, The Wave in the Mind: Talks and Essays on the Writer, the Reader and the Imagination

Monday 6 January

morning:

  • A presentation of the declarations research project, with quotes and some illustrations of how the research is looking at declarative web-languages. It is important to read the first and second part (what is CSS, and the research questions).
  • We will watch the video essay by Miriam Suzanne Why is CSS so weird as an starting point to untangle some questions of the research together.

afternoon:

a first declarative warmup exercise Declarative companion.

Monday 13 January

morning:

  • sharing moment about the Declarative companions made last time.
  • presentation of the special issue, through becoming CSS linguists
  • meeting Display and Position, the two CSS properties we are going to dive in

afternoon:

  • trying to complete the prompt for both Display and Position

Monday 20 January

todo:

  • ✓ read Tactical Design, Nolwenn maudet

morning:

(Notes are being taken on our main pad, https://pad.xpub.nl/p/declarative-companions)

  • second round of presentation on declarative companions
  • collective sharing moment on display and position
  • introduction to browser extension, the tactical interest of browser extension, and how they work
  • install Scratch together

afternoon:

  • making extensions

Chapt.2 Every language has a grain (CSS Deep dive in ethymology & cultural usages)

Proposal was to divide in two groups: one group focusing on `display` and `position`. groups will have moment to share back to the rest of the students their research progress. But through the previous sessions together, differents individual/group projects appeared, it was judged more interesting to pursue those diverse initiatives than to force it into a more theoretical research on web-standard.

Monday 27 January

No Class Meeting

Doriane in Berlin for a Declarations workshop

Monday 3 February

morning

  • sharing of the Berlin workshop
  • introducing the various declarations references text, in order to be read in smaller group through Lidya' writing / methodology class
  • sharing of the position property, see pad: https://pad.xpub.nl/p/declarative-companions
  • a moment to slowly gather our notes on position and display so far

morning/afternoon

  • finished the declarative companions
  • pursuing websites fabulations (browser extensions)
    • accumulative cascade
    • revealing the <head> or other invisible tags
    • specific lens for display / position
    • some aesthetic swap (manually translating styles from one website to another)
  • other projects appearing
    • iframe quilting
    • "the tiger ... in the forest"
    • a website made for the nintendo 3Ds


Monday 10 February

morning

  • we planned in a advance a sharing moment of a discussion that had been had internally between the students about what they want do produce from that special issue
  • the following tracks came out

HYPERVISUAL SUPER ZINE

a zine of screenshots of modified website, like a documentary of lots of CSS tweaking. Screenshots started to be taken on everybody's computer as soon as we started to play with web-extensions. There is a folder here: https://cloud.nubo.coop/s/6oX4DCWjMLHsjxn, to collect those screenshot.

  • by taking a lot of screenshots in the process of editing CSS, extension aren't a fix thing, but a process of manual bending and tweaking, always changing.
  • a screenshot shouldn't pretend to be a website, it's a fixed image, a situated recording that stays
  • once freed from the "objective, representative" goal of screenshot, they can become more creative: very zoomed in, a photo of the screen itself, or of a beamed website on a wall, etc...
  • an additionnal idea was to print parts on transparent paper (snippets of codes?)

QUILTING WEBRING

after a discussion on what's a webring, there was a wish to create web-mazes. it sounded an opportunity for iframe quilting. we would make a page that visualize the webring through CSS iframe quilting.

TIGER POEM

a generative story book but both css and html are the book, it changes dynamically when you resize the page.
↘︎ its wiki page

RE: poetry

A collection of poetical sounding email subject from the w3c mailing list. To be turned in a fanzine? W3C Mailing List Archive (search) https://www.w3.org/Search/Mail/Public/search collect here: https://pad.xpub.nl/p/re_poetry

Timeline

We started a (rather informal) timeline of events around the creation of css properties we researched ... some interesting moments from the mailing list. this could be one timeline per 'Display' and one per 'Block' or even more specific e.g. a timeline only focused on 'sticky'.

We figured out a format for the timeline to be able to encode event collaboratively on a pad (using YAML) TIMELINE LINK : https://pad.xpub.nl/p/timeline

Alternative Browsers (Nintendo 3DS, kindle)

Nintendo3DS.png

☺ SI26 3DS-Zine ☺

Nintendo 3DS, kindle, PSP https://pad.xpub.nl/p/SI26_nintendo_DS-3DS https://pad.xpub.nl/p/3DS_Browser_Investigation

Making a website that is only Nintendo 3DS accessible, after seeing a message from facebook saying: "Sorry, this browser is not longer supported."

Making an acid test, to figure out what works and what doesn't work on the Nintendo 3DS in terms of CSS, but also 3D images, and other functionalities? Being able to compare it with the kindle? There is a question of scope that is important to understand when something doesn't work, is it CSS2 (official support documentation)? webkit? netfront? netfront for the nintendo 3DS? the device itself?

One of the possible outcome will be to create website(s) that are only readable through the 3DS browser by reverse engineering the CSS2 functionalities as well as the netfront browser's specificities, such as the pre-defined font, positions, units etc..

write poetry

idk if this is an extra project for the SI26 event or just for myself to try 🙃…
https://pzwiki.wdka.nl/mediadesign/User:Chrissy/projects/write_poetry

CSS drawing and soundboard

An interactive web installation where stretching the webpage dynamically transforms facial feature positions, generated audio synthesis, and poetry content(ideally). https://pzwiki.wdka.nl/mediadesign/User:Wyn/Special_Issue_26#From_Physiognomy_to_CSS_Grid

Monday 17 February

we took the full day to continue the different workshop started last time with two new tracks

FRACTAL DOM

from experimental with fractal in different programming languages, came the challenge to do fractal with html/css. what would be a web-fractal? you can do it with canvas and javascript, but the DOM of an HTML document already is a tree (with nesting acting as node and branches). if you generate a fractal just by inserting div into div, it's appearance is a matter of CSS. by making each div into a single line, with it's child possitionned relatively at one side of the line and with an angle, we find back the "usual" representation of fractals.

would it be possible to generate such trees but following the structure of existing website?

https://pzwiki.wdka.nl/mediadesign/User:Shoebby/Webby_Sprouts

Scrapping the standard

A tentative to scrap implementation of CSS property by crawling the standard draft pages. A css who done it

Inspector Extensions

A bundle of browser extensions investigating different website meta data User:Kim/Special Issue 26/Inspector Extensions

Specific Lens

A browser extension to highlight the display and position values used on the various elements of a webpage.
https://pzwiki.wdka.nl/mediadesign/Specific_Lens

Chapt.3 I live in a different home everyday (Fabulating CSS standard evolution)

Monday 3 March

Monday 10 March

Monday 17 March

Monday 24 March

Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=SI26&oldid=302369"