Notes during class SI26

20th of January 2025

• interactive behaviour being invented for the browser.
• Showing a lot of stuff that is hidden by default: script { display: none
• Clip path: what draws the shape through coordinates
• gsap.com
• Interpolation
• Repainting: changing the look of the page
• Reflow - look up definition
• webkit- is a browser engine, every browser has a render engine (browser engine) that renders css declaration (text) into visual, pixel (chromes render engine is called -webkit-, other browsers like brave use chromes render engine too, that means that a CSS property is interpreted exactly the same) there are only a few notable browser engines, webkit (chrome, safari) and gecko (mozilla)
• webkit- used in CSS is a prefix this is added when properties are not in the standard yet (but are in the browser engine) -> by the time W3C decides to take it into the standard, you can use property without prefix (for retro compatibility, property with prefix will still be working)
• every browser engine has its own prefix: firefox has -moz-
• Martina: css companion page with a text by Imre: she used CSS property clip-path to create an animation between shapes. shapes are made from a path with anchor points (polygon), but clip path can also be used with url(.svg)
• interpolation with CSS happens not so much by algorithm but you have to manually add or remove points to have a  transition between shapes (but there are libraries that have smarter algorithms, like GSAP https://gsap.com/)
• repaint event happens when a page has to reload what was already there (often happens with image loading), you ideally want to have everything loading on one first page load
• https://pad.xpub.nl/p/declarative-companions
• https://four.otherti.me/s/

- https://otherti.me/

Display:

• "Display" describes if and/or how an element appears on the site relatively to other elements. This can be used to arrange or lay out more than one element at once. We usually use one display keyword per element (or group of elements), and different keywords can coexist on the same page.
• Constraints
• The formatting of the information that is being communicated
• Doriane was talking about/ asking about our preferred social media platforms. She described how these platforms are used locally, you can view them on the map/ see where they are mostly used and said that “Tools are culturally situated”.
• https://lurk.org/
• Mastodon
• https://sunny.garden/explore/tags
• https://nettime.org/
• Dina kelberman, I’m google

13th of January 2025

• CSS giving up its control - given the context of the execution.
• Visual and gestural approach to CSS.
• Designing with web standards is more natural to describe than actually executing it.
• Styling context in order to produce content.
• Designing with language.

Note to keep in mind: document anything which reminds you of display, position, block, line and grid.

Prototyping

21st of January 2025

Pen plotting part 2

• Plotting but with modern software:
• Graphic design metaphors: the brush, eraser. Metaphors within the program. How can contemporary design software export svg to hpgl
• In inkscape: Path ->save as, drawing one hpgl
• 1016x1016 (resolution)

14th of January 2025

PostScript

Claudio's drawing explaining how postscript works from top to bottom

• Taking on a media archaeology approach: dissecting different languages from different times.
• Every time we print something, we are dealing with this history everyday.
• Business entangled with printing practices.
• 'font fixing magicians'
• 300dpi - the pixels started to be recognised with the naked eye. We started to notice the mistakes in font printing.
• hand tuning bitmap pixels/ bitmapped terminals

During this session, I discovered the power of tilde within the terminal, and I love it!

7th January 2025

Pen plotting!

• https://pzwiki.wdka.nl/mediadesign/Pen_plotters
• https://www.isoplotec.co.jp/HPGL/eHPGL.htm
• Archaeological approach to the pen plotter - working hands on - to have a look at all the commands, how they operate.
• In the sense of working from the ‘artefact’ and discover how it worked and how it was.

Methods

22nd January 2025

Discussing Tactical Design (part 2) Group 1 question:

• Critical design: creating an artefact that causes the conversation, the core is to identify the issue and create work for it. Self reflective, reflective of its own doing. An occupied term.
• Tactical design: design for direct action, counter-acting, reacting to already existing design. Hacking into. .In order to create a tactical design, you have to be critical.*Critical perspective to certain work, they intervene within the system (in reference to the examples Fred mentioned in class).
• Knowledge about these terms can be based on context (in class we talked about how Elena, Claudio and myself didn’t have much open discussion about this in class, we only knew mostly of graphic design).