Notes during class SI26
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
- 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
19th March 2025
Pippin Barr and Jaret Vadara talk:
Jarets practice
Double negatives, false positives and unreliable narrators
- Translations and mis-translations were in the air (during his time growing up, being surrounded in different cultures and religions).
- Uses photography and re-interpretation for him as a way to understand what is happening for him and in the image (using re-interpretation, historical fiction and sci-fi).
- Can juxtaposing different images or mediums conjure new ghosts?
- Skin as images and translated through media.
- Digital cameo = this works because the brain does not see it when viewing on a screen - vision | tech | violence
- computational modes of the brain
- images with authority/ haunting images
- method of removing a foreign body
- collecting things then figuring our what the dialogue will be
Pippins practice
- The artist is present (game): time is the main element in the game, you can't enter the game unless the museum is open in actual time.
- 'walking through the sanctified important hallways before Marina, asking is it work it to queue?'
- enforcing museum rules within the game
Methods class:
Hugo server thingy?
Making the medium itself apparent through the game
Pongs: interest in how things are made
The nothing suite: Making nothing out of all the game engines and seeing the nothingness
Snakisms: talked about the act of translation, even for us with different mediums in our backgrounds (still a work in progress)
Documentation, how do I keep track of my process? How to record it?
Donald schon - the reflective practitioner
Writing about the reflective practice could be a main component of the thesis
Capturing, remembering or holding onto the stuff you made, when you try to resurface this stuff in your practice, it could make you a better designer
The method for design materialisation:
- Version control: a way to keep track of your work
- Works with repositories, sharing it on dropbox so other people can collaborate too
- Interest: Version control for design reflection
- Keeping the process within the project, so leaving this folder in the repository
- Journaling through VS and making it public on GitHub (journal.md) - markdown
- Alongside the code itself, the process folder: it contains different documents, like a to-do list with commenting (why, why not, how did it feel, etc.), a process journal (sometimes it is mostly questions; it is also about emotions, anxieties, concerns; it is also about designing), a why (questioning the project, is it useful or the opposite? no decision yet
- Writing on cards - photographing them - put them into the repository- a bit of a drag but it has to be done
- To do lists, you can see the previous work that you crossed out, the shift in the work etc..
- Designing through writing, writing down what you’re making rather than drawing it
- Asking “why?” In your process, write it down and you can revisit it as you go along - it’s a way of reaffirming yourself
- Storage, what do we keep and should we keep everything? The Wiki as a form of documentation
- To be able to dig in into what people were thinking is exciting (reading through the journal process)
- Sourcetree: seeing the workflow through different visualisations
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).