User:Sevgi/Special Issue 26/Quilting p: Difference between revisions

Revision as of 18:10, 2 March 2025

This is a quilting extension project page started with Scratch.

TINAAAA >> I am adding my process here so they're something new for Monday!! ill send you the things I made in a bit

~~scan books and upload to bootleg lib~~

Web extention(?)
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:

@@ Line 380: / Line 380: @@
 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: