Progress

first sketch

Simple structure

Using display: flex

Shrinking the browser window randomly removes words from the sentence, one by one, in correspondence with the reduced pixel count.
Expanding the window brings words back, also at random, reconstructing the sentence into a new structure each time—never quite the same as before.

do tigers melt like butter in the forest?

do tigers melt like in the forest?

do tigers melt in the forest?

do tigers melt the forest?

tigers melt the forest?

tigers melt the forest

melt the forest

melt forest

melt

Peekaboo

In our last Monday class discussion(SI26 WEEK2) on display: flex, we talked about its adaptability and how its mechanism resembles other design practices --like curtains or even a peacock’s majestic display.

Building on this, I started thinking about the game of Peekaboo.

As the face disappears and reappears, its expression constantly shifts(🙂→🤪→🤨→😆→🙄).

Similarly in my initial sketch of display:flex, the alignment of words in the sentence shifts as it disappears and reappears.

Expanding and shrinking the browser window can reveal, hide, reorder information, and creating compositions that change dynamically.

Do tigers melt like butter in the forest?

I want to try this exercise with a first sentence of question that I derived from a children’s book called The Story of Little Black Sambo published in UK 1899. Until not long ago, this book was quite popular in some countries like Korea and Japan and can still be found on bookshelves today. But for those familiar with it, it’s notoriously known for being blatantly racist due to its illustrations, its moronic backdrop, and the name of its characters.

Keeping this in mind, I find a kind of meta-ironic profundity in the story, completely independent of the author’s intention.

[more context to come]

How I want to develop it

I'm envisioning a kind of storybook that users can save the screens they like in the browser. once they're done, they can export them as a multi-paged pdf file containing all the screens they've saved in the browser. even print them out in the end.
Inspired by The House of Dust by Alison Knowles, I imagined adding random words as the browser window extends, rather than simply re-aligning previous words in the sentence as I did on my initial sketch.

This way, every time the user shrinks and then re-extends the browser window, a new word would subtly replace an old one--one at a time, gradually transforming the sentence with each interaction(of peekaboo).

Word-corresponding background illustration

Storybook in pdf

A button that allows users to save the current state of the browser window --not to the local computer, but within the browser itself.
Another button would then enable users to export these saved states as a PDF file, allowing them to print out each saved version of the browser window in chronological order.

To do

I should treat the continuously restructured sentences(the main prompter) not just as a block of text, but understand as a flexible, variable-based structure that logically aligns with CSS’s spatial and contextual interpretation.

The following analysis is needed:

identify the basic structure and elements of the sentence
define the possible combinatorial variables
structure these combinatory variables in a way that CSS can correspond
plus, I’d like to try incorporating the theatre metaphor from ‘Why CSS is so weird’ into the work:

regarding the browser window as a stage and apply the sentence analysis and structure accordingly.

identification
words	grammarly feature	semantic	stage role
do	auxiliary verb	check for action	??
tigers	noun	agenct	object
melt	verb	action	effect
like	preposition	comparison standard	condition modifier?
butter	noun	comparison target(object)	object
in	preposition	spatial relationship	positioning
the	determiner	-	-
forest	noun	context	backdrop
?	punctuation	sentence type	??

cambridge dictionary #grammar

drawing html/css structure

▲

the main prompter p id="sentence"
html

 <p id="sentence">
   <span class="do">do</span>
   <span class="tigers">tigers</span>
   <span class="melt">melt</span>
   <span class="like">like</span>
   <span class="butter">butter</span>
   <span class="in">in</span>
   <span class="the">the</span>
   <span class="forest">forest</span>
   <span class="?">?</span>
 </p>

css

#sentence {
    position: fixed;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    
    z-index: 999999999;
    text-align: center;
    font-size: 29px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    font-weight: bold;
    color:rgb(0, 0, 0);
    white-space: nowrap;
}

naked stage: div id="stage"
html

<div id="stage">
//all the children divs that goes onto the stage//
</div>

css

#stage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    z-index: -99999;
}

what goes onto the stage (child divs of id="stage")
html
using both data-* selector and class to target better in css and javascript

<div data-space="forest" class="forest"> //or, data-object="forest" for the occasion when forest becomes an object//
  <div data-object="celestial" class="celestial"></div>
  <div data-object="tigers" class="tigers"></div>
  <div data-object="butter" class="butter"></div>
  <div data-effect="melt" class="melt"></div>
</div>

css data-*selector

[data-space="forest"] {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    z-index: -99998;
    background-color: green;
}
[data-object="forest"] {
    width: 300px;
    height: 300px;
    margin: auto;
    /*margin-top: 50%;*/
    background-color: green;
}
[data-object="celestial"]{

}

[data-object="tiger"]{

}

[data-object="butter"]{

}

[data-effect="melt"]{

}

css .hide[data-*] for javascript to target

.hide[data-space]{
  background-color: transparent;
  background-image: none;
}
.hide[data-object]{
  display:none;
}
.hide[data-effect]{

}

javascript part 1

I made the first sketch by using an ai chatbot but I want to write javascript without it from the beginning. As Fred recommended, write down what needs to be done step by step and try to translate the logic into javascript language.

1. I need two repositories(variables) to store the words, one repository that is shown on the screen, and the other repository to store the removed words from the screen

↳ store all span element in a variable (I'm using span under p tag only for the words).

document.querySelectorAll()

const words = document.querySelectorAll("span");

↳ apparently, "The querySelectorAll() method returns a static NodeList." it may look like an array but it's not an array, can't use array methods if I keep it like this.

Although NodeList is not an Array, it is possible to iterate over it with forEach(). It can also be converted to a real Array using Array.from().

nodelist mdn

array mdn
array w3c
array methods w3c

const words = Array.from(document.querySelectorAll("span"));

2. make another variable to store the (randomly)removed words.

↳ so that I can bring them back(randomly) whenever the screen size increases.

let removedWords = [];

3. make javascript aware of the browser screen size changes, so the words respond accodringly.

↳ the words should disappear when the screen size decreases and reappear when it increases.

↳ look up window.innerWidth, I'm only going to decrease and increase the width.

↳ need a variable to save the innerWidth property

↳ look up "resize" function in window.addEventListner()

↳ need both prevWidth and currWidth variables for javascript to calculate screen size difference(widthChange).

↳ also look up Math.- methods. need to calculate the width difference.

↳ to math method to function, I need the innerWidth(prevWidth, currWidth) output into text.

window.innerWidth
(checkout Demo code on the page, super nice example with "resize"eventlistener)
"innerWidth returns the interior width of the window in pixels (that is, the width of the window's layout viewport)."
element.clientWidth, (interesting)

window.addEventListener()
(look for more syntax examples especially the ones using true/fase or if/else)
"resize" example
mdn onresize (much simpler)

mdn textContent
w3c textContent
Math.*
Math.absolute
("The math. abs() method accepts a single integer data type parameter
and returns the number's absolute value, or positive value, without using the negative sign.")

two ways to resize event

window.onresize = (peekaBoo) => {

};

/////////////////////or//////////////////////

window.addEventListener("resize", () => {

})

/////////////////////or//////////////////////

window.addEventListener("resize", peekaBoo);

function peekaBoo () {

}

4. make two different functions, one for removing random words as the screen size decreases, and the other for bringing back random words as the screen size increases. it has to work with resize window.eventListener"resize".

↳ when removing words, cap the minimal amount of word to at least 1, so the screen doesn't remove all the words.

↳ if word > 1, keep on removing the words, but if the word is == 1, then stop removing the words, and start bring the words back as the screen increases.

Resource

▲

Javascript

window.addEventListener "resize" w3c

Targeting

Word combination algorithm

look for Permutation function
- Step-by-Step Guide to Array Permutation Using Recursion in JavaScript

Storybook in pdf

recommended by Joseph

try html2canvas for taking screenshot of the browser
look for javascript: Window: localStorage property for storage. (this one stores locally, but try it anyway)