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

From XPUB & Lens-Based wiki
No edit summary
Line 327: Line 327:




Quilt-> CSS


=== Strip Quilt ===
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!!!
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:
[[File:Quilt2.png|left|frameless]]
'''stitch in the ditch'''

Revision as of 21:12, 1 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

on it <3

  • 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.


Screenshot 2025-02-06 at 11.58.45 AM.png


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








  • manifesting for a future like this:


Original 04f8f86e56b21785bb044ff096aa28f5.jpg













Web extension craze.png














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:

Quilt1.png





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:

Quilt1-1.png




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:

Quilt2.png


stitch in the ditch