User:Sevgi/Special Issue 26/Quilting p

This is the logbook of : Quilting <p> is a project inspired by the Reflections on Quiltmaking’s Future blogpost posted on February 2010, published almost exactly 15 years ago. Martina and I started thinking and talking about making rectangular textile like shapes out of HTML elements and made some sketches using Scratch. Which made us look more into patterns and traditions of quilting, how to digitise and translate something so handmade through generations into a web experience?

• scan books and upload to bootleg lib

• Web extention(?) this a no
• WEEKLY GOAL: each one of us make 2 patterns with frames,
• we start the css/quilting glossary

• VERY IMPORTANT: quilt! heheheheh, we should find a nice tutorial and set a date to experiment? we can use our hair straighteners as iron hehe

WHAT

We want to start by getting a good understanding of quilting. Plan is to make a small quilt and read Many Hands Make a Quilt: Short Histories of Radical Quilting by Jess Bailey. We couldn't find an online source for it so we bought it, we will scan and add it to the bootleg library.

A quilt is a record of time through scrapped fabrics and cloths. When they come together they make a visual archival of what has been worn and thrown out. Without the present to look back at it, it is not as meaningful. There should be an anchor in time to make a loopback insightful.

HOW

ARCHIVAL PROCESS

books:

Stitching Freedom

A quilted alphabet

links, refs, etc.

• https://hub.xpub.nl/bootleglibrary/book/895

• Codes for quilting

• 500 patch design contest - the * quilting * bee

A pixel trading club where people could build a colourful internet quilt and make new friends <3

• manifesting for a future like this:

• Podcast of Isabella Rosner : https://sewwhatpodcast.com/

• some of our quilting extension browser screenshots (we went crazy with this and it was beautiful)

OG Web extension

https://pad.xpub.nl/p/sevgiandmartinaspad-scram

• first quilt testing
• web extension : look into the local storage thing....... ://////
• maybe we can first develop a .css extension to see what can websites look like as quilts themselves. maybe put linguistics and story into the css like what properties could stitch together, what is the position they should take? what makes poetic sense to come together? Should a header <h1,h2,h3> be a horizontal solid line and text just become dots? (we could do this with the .js file Joseph showed us?) Anyway! much to think abo

10th February Prototyping session updates:

• During this session with Dorianne, Sevgi and I explored the possibilities of using iframes to replicate a quilt effect on an html page. An iframe is an html element which loads into another HTML page, within it.
• First we wanted to learn how iframes generally work, so we made a very simple 'quilt'. You can check it out here. This was great and ok, but we wanted to change how the iframe looks! We wanted to change the CSS elements of each iframe and remove text, leaving only shapes to form a pattern. Sevgi experimented a bit and found out that only pages under the same domain could be edited, which is a shame :(
• We chatted with Dorianne about this issue and she explained that iframes are really impossible to edit, which made us sad but! Dorianne came up with a great idea to use dashed lines to replicate stitch work. She also told us of ways to use transparency to juxtapose iframes on each other. Dorianne also suggested to made different sized iframes, replicating the idea of up-cycling with patchwork - similarly to how CSS also presents certain limitations when designing for the web.

17th February:

We pulled the History web extension from the chrome extension lib examples and changed it to have frames instead of links.

function buildPopupDom(divName, data) {
  let popupDiv = document.getElementById(divName);

  let ul = document.createElement('ul');
  popupDiv.appendChild(ul);

  for (let i = 0, ie = data.length; i < ie; ++i) {
//this used to be 'a'
    let a = document.createElement('iframe');
//this used to be 'href'
    a.src = data[i];
    a.appendChild(document.createTextNode(data[i]));
    a.addEventListener('click', onAnchorClick);

    let li = document.createElement('li');
    li.appendChild(a);

    ul.appendChild(li);
  }
}

iframe code:

 <!DOCTYPE html> <html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" type="text/css" href="iframe.css" />
   <title>Martina Farrugia</title>
 </head>
 <body>
   <iframe
      src="https://pzwiki.wdka.nl/mediadesign/Main_Page"
      scrolling="no"
      title="Wiki"
    ></iframe>
   <iframe
      src="https://pzwiki.wdka.nl/mediadesign/Calendars:Networked_Media_Calendar"
      title="calender"
    ></iframe> 
<iframe
      src="https://pzwiki.wdka.nl/mediadesign/Main_Page"
      title="Wiki"
    ></iframe>
 </body>
</html>

*{
box-sizing: border-box;
} 
iframe {

 width: 300px;
 height: 300px;
 border: 5px dashed rgb(255, 0, 0);
 padding: -20em;
 background-color: aqua;
 color: aqua;
 mix-blend-mode: exclusion;
}

iframe.transparent {
opacity: 0.5;
}

body {
 background-color: rgb(17, 40, 253);
 row-gap: -3em;

}
iframe {

 width: 300px;
 height: 300px;
 border: 5px dashed rgb(255, 0, 0);
 padding: -20em;
 background-color: aqua;
 color: aqua;
 mix-blend-mode: exclusion;
}
iframe.transparent {
opacity: 0.5;
}
body {
 background-color: rgb(17, 40, 253);
 row-gap: -3em;
}

We found the Beastify extension and we want to compile the codes of this one and history extension together.

Beastify makes the entire web page into a tiny transparent square and replaces it with pics of a frog or a snake.

We also want to put buttons an option on the quilt page to translate stitches into css declarations.

Martina wants to make it so that there is a glossary with css and accompanying quilt type. Animated maybe?

Notes from Doriane:

some elements and declarations cannot be translated into textiles coming together,

allow things to not translate,

what are compositions that cannot be replicated outside of the web.

why is the transition arrow entail> I sit a graphical translation, association(?) word play[like the titanic :float:none thing...], ways of doing,

measurements and how does that work for web vs. textiles. Consider where the arrow points: web to textile or textile to web?

What's CORS?

what does CORS(cross origin requests) mean in textile and in stitching?

Could the iframe pattern repaeat to make a bigger pattern? WEEKLY GOAL:

WEEKLY GOAL:

3-4 pattern html pages,start of the translation table

border radius

L >from the alphabet quilt

https://rhizome.org/editorial/2020/may/13/curating-online-exhibitions-pt-1/

https://san-serriffe.com/product/cory-arcangel-and-stine-janvin-identity-pitches/

https://monoskop.org/images/9/91/Lialina_Olia_Espenschied_Dragan_eds_Digital_Folklore_2009.pdf

digital ->physical

Jacquard Machine being the root of computers

What next:

We think about the translation/transition from Digital to Physical, Textile to Patchwork, Quilting to CSS.

Quilting to CSS

Here the wherever the arrow points determines where do we stem from, what does it correspond to as CSS when we think about stitching?

Does it mean {margin:0,padding:0}-property- or does it mean{border:dashed red 1px}-graphical- margin?

Quilting acts as the material aspect of this table

quilting	CSS
Cut fabric	--->Overflow:hidden(Arrow is Practical)

Textile to Patchwork

Here textiles come together one way or another and become something bigger, something different, something colorful and something re-purposed, re-made.

Quilting is the process that makes the textiles come together.

textile	patchwork
iframes	web ring

Digital to Physical

What does it mean to translate something existing in a digital space into physicality or vice versa?

…popularize a conservative view on digital culture. When computers are continuously explained with cars, networks with highways, search engines with the human brain, even Email with classical postal service, the actual properties and possibilities of the computer are lost.[16]

physical	digital
looms--->	computers
^^^quilting	←WEB↲

Log Cabin Quilt

quilting daily blog post

log cabin is made with equally wide stripes which are then stitched together. First "log" will be laid horizontally, then stitched to a vertical one at the top. Then the process visually repeats down to bottom. When stitching first the centre square is done, then the surrounding logs will be added on. :

https://www.youtube.com/watch?v=pzncJHhkQow

When I was making the log quilt, I had a different sort of itiration of the log cabin in mind. Variation in log cabin happens often since it is a basic pattern. In the blog post there is an exmaple of Courthouse Steps which has a community variation here : variation 2

I first sketched the quilt:

Using this guide I tried to make the grid happen : https://css-tricks.com/snippets/css/complete-guide-grid/

Didn't happen and then I thought there is probably an app for this: https://cssgrid-generator.netlify.app/

(I used this but it didn't really work until I adjusted sizes.)

my log cabin:

Quilt-> CSS

log ->(contextually) row

log->(contextually) column

pattern->(visually) grid

CSS->Quilt

fr->(measurement) Jelly Roll

https://www.w3.org/TR/css3-grid-layout/#fr-unit

fr is : 'a fraction of the leftover space in the grid container'

Jelly Roll is: a pre-measured(2,5 inch) strip for easier quilt making

in css fr represents a flex measurement that has no pre-determined size and fills up the space left form other items placed in the gird whereas a Jelly Roll has to be pre-measured.

Stripe/Jelly Roll Quilt

starter quilt, my first as well!!!

I didn't know what jelly roll was I just started making stripes and panicking. It was fun. I improvised the quilting lines. I preferred to go rogue and make diamonds with the help of a duct tape. It went alright and at the end I messed up the binding but still loved how it turned out.

Here is my digital example:

Here I made the div containing iframes to have; display:flex and justify-content: center;

I made it so that the borders have border-width: thin; to ensure the stitching is machine made.

First tutorials I followed were of Melanie Ham's so I also made it so that they all have an outline like how she creates a double line for each square of her quilt. outline: 1px dashed lime; outline-offset: 4px;

I used lime because I used lime colored thread for all my quilts.

stitch in the ditch

Spaced out patchwork test:

- Martina typing-

So my initial test during the holidays was to find a better way to edit our tests we did during our last week before the break:

I'm really enjoying the mix-blend-mode: exclusion, so I started to play around with the opacity of the iframes. With this example, the iframes are a bit more scattered, mostly testing around the idea of juxtaposing the iframes ontop of each other, changing their sizes and including rotations.

With the other example, I experimented with rotation. I was not too convinced with this example, but I thought it would be interesting to use rotate for any patches to fill in gaps, similarly to strips of fabric that fill in the gaps of bigger patches.

To edit the iframes individually, I had to use the :nth-child() syntax. I never used this before in css, it took sometime to figure out, especially with linking each iframe to its assigned css edit. A helpful read was: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Other helpful resources:

https://developer.mozilla.org/en-US/docs/Web/CSS/border-style to create different borders for the patches, to make them look unique from one another.

Screen-sized quilting test:

For this example, I wanted to challenge myself and create custom sized patches that would fill up the size of my laptop screen. I took the base of the previous code as a skeleton and started to add more :nth-child() links:

This example took a lot of testing with where each patch is placed, I spent a bit of time playing around with the percentages of the top, left, width, height, it also got trickier the more iframes I put in, in total there were 11 iframes in this sketch.

In the second row, there are two iframes overlapping on each other, and they both work!!! especially with the transparency edit, it's nice to see the 'negative' of the image overlapping with the iframe below.

I added small patches to fill in between the gaps of the larger iframes, I kept thinking about see-through fabrics and how they would look like juxtaposed over other fabrics below it.

Issues to fix:

• I need to find a way to edit the border of each iframe individually, specifically its shape. For some reason, the border radius is applied to all of the iframes, when I try to edit each borders shape individually, it still does not work. Although, changing the borders dashed, dotted and px individually does work!

3.03.2025

-What do we need for the webring?

-bunch of background images being put tohgether

-everybody brings a background image? we decide on a protocol for everyone to bring a certain textile or image? printing on the textile itself

http://tilde.club/~olialia/640x480/

-categories that make the textiles come together?

web 'themed' ? - Doriane suggest: what is the most web themed textile you own?

04.03.2025

We decided with Martina to host a workshop with XPUB students to make a community quilt.

We want to ask participants to choose a website they want to recreate as a piece of textile.

We will ask them to bring scrap textiles if they have some or collect left-behind-trash-from-the-street pieces of fabric/strings and use them as the basis of the quilt. We will also provide scraps along with:

-scissors

-needle/thread

-paper/pencil for sketching

-scraps.

We will have the workshop prior to the event so we can have a hanging quilt at the event.

We might host 2 slots of workshops for better participation.

Today we are going to:

-glossary?

-maybe write some text for an invitation to the workshop and what the workshop will consist of

Ask next week

-What goes on the webring??

- what is the budget?

06.03.2025

Meeting up together to make a very small quilt/ attach our patches together

Before Sevgi arrived at our studio, I took the opportunity to make some patches before we quilt. I made two patches, not really planning the process but letting the thread-like structures guide me:

When Sevgi arrived, we shared our patches and planned how we will quilt our pieces together. Sevgi helped me with the sewing machine, I haven't sewed in a while and it was so much fun!! We started to notice that our quilt started to look like the first web extension we had initially made:

After we sewed our tiny quilt, we made a list of next steps:

• We will think of a website we want to recreate as a patch, we want to follow the same size as a 13inch laptop screen. This exercise will help us to visualise but also think of materials that could replicate the website through quilting.
• Brainstorm for a small introduction for our workshop
• Gather supplies for our workshop
• Finalise our patches to show as examples for the workshop

• 
  While making the patchwork and quilt, we followed the guide from Melanie Ham's youtube tutorials. These videos were so helpful, below are a few notes from each video (there's five parts):

Part 1

• Quilt top assembling for a patchwork quilt
• She mentions a solid block, which helps to move the cube patchwork around. This reminded me of solid shapes in css, moving them around with different coordinates.
• Chain piecing: continuous sewing of columns

Part 2

Basting: inbetween layer of top and back.

The border and background: reminded me of the many layers within css shape elements

Part 3

• Walking foot: a tool to use to sew multiple layers for your sewing machine.
• Seam line: dashed border(?)
• inner seam/ side seams

Part 4

• trimmings at bottom
• 90 degree angles as points of guidance (reminded me of the rotate function I used with the iframes)
• "strips to bind"

10.03.2025

Notes from Mondays presentation feedback session with Simon, Dorianne and Manetta

• the table of definitions should be two-way and it should not be so scientific. "it can be a mess" - we should see it as a guide to find a way to talk about these different translations back and forth, keeping the ambiguity there.
• a workshop using pre-decided sizes for quilting
• Manetta asked about the relation with quilting and css, to think more about it
• Dorianne: translation should be ambiguous and not formal, there is a naive perspective. There is an aesthetical and visual approach of comparing the website to quilt squares and rectangles.
• Manetta asked about how we worked with iframes and what websites we decided to put in.
• Simon proposes if the quilting itself is a composition tool or a social event.
• Webring is also a pre-text to a social link
• construction of webpages through the workshop
• leftover fabric = personal history (how to personalise our links?)
• webring = how to involve it with online quilt? still a bit unclear
• Manettas feedback: a bit dizzy, with the overlapping of iframes, webring does not have to be focused on as it could be secondary, focus on quilting and think of a way to translate Lexie's bag of scraps.
• Could the event be societal or focus simple on showing the process of quilting.
• Overall feedback: simplify but don't stop questioning. For the event, we don't need something physical - could be a workshop. Societal event as web quilting.

Simons notes from the pad:

quilting

manetta: how did you come to quilting? and the connection to CSS?

article on quilting and web developments

social aspect of quilting - is it important?

an iframe shows a vignette, but it also excludes the rest of a webpage - maybe it is not only about the things included, but also what is excluded?

a scrap is something that is discarded, thrown away

11.03.2025

Further steps:

RESEARCH:

- What does the Quilting Infrastructures entail and how did the special issue approach the digitising quilting?

- how do we merge assets digitally?

- How does the handing a piece of fabric over translate digitally?

-- is this an archival investigation? - Martina's mom's patch book

- how do we share scraps? who do we share it with? cloud+server discussion can come in here

Kim's project looks into discarded codes in the HTML files!

maybe we can define what a digital scrap is? What is being used and left behind? What dies online? What does it mean that something becomes obsolete digitally?

How does inheritance/legacy/what do we leave behind digitally what do we leave for the future?

Martina had an xPUB dream where she goes to the lawyer of someone who died to collect inheritance, and she has inherited a domain name.....

We should have chapters where we collect our research under like: ARCHIVING/HERITAGE, SCRAPS/REUSING DIGITAL MEDIA?/ELEMENTS?/ARTIFACTS?, CLOUDS/SERVERS DIGITAL SPACES OF COLLECTING/CONNECTING(in a way that related to webrings, like how the connection in websites are made, how personal servers are a part of archiving and then they become connected and become web-rings-quilts, etc.)

Presentation during the event:

Communal? Visual? Workshop? Website?

We decided to publish our research. We want to make a patchwork documentation object.

Website: what does the iframe quilt include? We could make an input bar that collects websites and every visitor can contribute? If they contribute with a google.com kind of website then there would be CORS or loading issues?

how do we document our process in a way that we can have it published?

Ready for the event:

Documentation of Research & Process

Quilt from the workshop?

Website?