add snark; platform updates

resen/0/index.html

@@ -46,7 +46,7 @@
         "<a href="#disappearance/" onclick="open_internal_link(this)">היעלמות</a>" של רותם עטר פועל גם הוא לגלם את השבר דרך החומר של השפה. חומר הגלם של העבודה הזו הוא טקסט עיוני וחסר ייחוד - תיאור עובדתי של ההיסטוריה והגאוגרפיה של קיבוץ בארי כפי שהוא מופיע באתר הקיבוץ. הטקסט הזה נעשה לזירת ההתרחשות של השעות המוקדמות של בוקר שבעה באוקטובר. באמצעות סדרת השמטות אותיות שיטתית והולכת ומתגברת באינטנסיביות שלה, יוצרת עטר טקסט שהולך ונעשה קשה לקריאה במובן הפיזי הפשוט ביותר ודרך זה גם במובן מהותי. בבד בבד, ככל שהטקסט מתפשט מנהירותו הוא נעשה לאובייקט חזותי ומוזיקלי הנוגע באופן אחר, ישיר ומכאיב, בממשות של ההרס, ההשחתה וההתפרקות של המרקם הבסיסי ביותר, של השפה ושל המציאות. בסיסי כל כך שהיתכנותה של התפרקותו הקיצונית כל כך לא עלתה כלל על הדעת עד אותן שעות בוקר ראשונות.
     </p>
     <p>
-        העבודה "<a href="#down/" onclick="open_internal_link(this)">רע</a>" מייצרת גם היא, באופן אחר אבל באמצעים חומריים לא פחות, טקסט קשה לקריאה, פשוטו כמשמעו. חומר הגלם שלה הוא שיר קצרצר של המשורר האמריקאי בן דור הביט ריצ'רד בראוטיגן (בתרגומו של יהודה ויזן). השיר של בראוטיגן עוסק בכתיבה (ובאקסטנציה, גם בקריאה) כמשקל נגד ומפלט מתחושות של דיכאון, חוסר משמעות ושאר גילויים של "להרגיש רע". באמצעות מניפולציה על האופנים שבהם אנחנו מורגלים לקרוא טקסט ברשת, יוצרת "רע" מצב דברים שבמסגרתו הפעולה הפשוטה של קריאת הטקסט דורשת מאמץ פיזי ומנטלי לא מבוטל. הנחמה והמפלט שמציעה השירה נעשית, על ידי הפיכת הפעולה הטריוויאלית של הקריאה למאומצת ובלתי מובנת מאליה, לאלמנט מייסר בפני עצמו.
+        העבודה "<a href="#down/" onclick="open_internal_link(this)">רע</a>" מייצרת גם היא, באופן אחר אבל באמצעים חומריים לא פחות, טקסט קשה לקריאה, פשוטו כמשמעו. חומר הגלם שלה הוא שיר קצרצר של המשורר האמריקאי בן דור הביט ריצ'רד בראוטיגן (בתרגומו של יהודה ויזן). השיר של בראוטיגן עוסק בכתיבה (ובאקסטנצייה, גם בקריאה) כמשקל נגד ומפלט מתחושות של דיכאון, חוסר משמעות ושאר גילויים של "להרגיש רע". באמצעות מניפולציה על האופנים שבהם אנחנו מורגלים לקרוא טקסט ברשת, יוצרת "רע" מצב דברים שבמסגרתו הפעולה הפשוטה של קריאת הטקסט דורשת מאמץ פיזי ומנטלי לא מבוטל. הנחמה והמפלט שמציעה השירה נעשית, על ידי הפיכת הפעולה הטריוויאלית של הקריאה למאומצת ובלתי מובנת מאליה, לאלמנט מייסר בפני עצמו.
     </p>
     <p>
         הסיפור הקצר של איטאלו קאלווינו "<a href="#tribe/" onclick="open_internal_link(this)">השבט הנושא את עיניו השמיימה</a>" המובא כאן לראשונה בעברית (בתרגומו של יהונתן פיין), נכתב בעיצומה של המלחמה הקרה תחת הרושם העז של טכנולוגיה שהייתה חדשה בימים ההם:  טילים בליסטיים בין-יבשתיים ובאופן אירוני שבה לקדמת התודעה הקולקטיבית שלנו ממש בימים האחרונים עם המתקפה של איראן על ישראל. זה סיפור שהוא הרהור תמציתי ומלא ברק אודות המרחב ההשלכתי הפנטסטי שמשיחיות, אימה, פרובינציאליות ושאיפות גדולה משמשות בו בערבוביה. הרלוונטיות הכמעט בוטה שלו לימינו נשלחת (ממש כמו הטילים המוזכרים בו) משנת כתיבתו, לפני כמעט שבעה עשורים, וחולפת בשמי ימינו.

resen/down/script.js

@@ -1,5 +1,6 @@
 let down = false
-let bg_pos_dx = bg_pos_dy = last_dx = last_dy = 0
+let bg_pos_dx, bg_pos_dy, last_dx, last_dy
+bg_pos_dx = bg_pos_dy = last_dx = last_dy = 0
 let origin_x, origin_y
 
 document.addEventListener('pointerdown', e => {

resen/imagine/index.html

@@ -24,7 +24,7 @@ <h4>אוסף בקשות ליצירת תמונה שנשלחו על ידי אנש
     <p>אימא אוחזת בזרועותיה ילד שאוחז בידו של חייל ישראלי שאוחז ביד של גבר חרדי אוחז ביד של אישה וכלב הולכים יד ביד, כולם עם הגב אלינו, הולכים לכיוון אופק, שקיעה יפה בשמיים עם כמה ענני סתיו והצג רק את פני הילד על ידיה של האם מוארות באותו אור כמו השמש השוקעת</p>
     <p>נערה פלסטינית צעירה עומדת בביטחון בגבול החדש בין ישראל-עזה שדומה כעת לכניסה לקניון יוקרתי. היא בתלבושת בסגנון בריטי של שנות ה-60, כולל שמלה עד הברך, מעיל מסוגנן וכובע מעוטר בסרט המושלם על ידי ארנק קטן. השיער שלה מעוצב בקפידה, משדר חן. הגבול שמסביב נוצץ עם עיטורים מפוארים, שטיח אדום המוביל אל הכניסה, תחת שמיים שלווים ובהירים. האווירה סוריאליסטית אך אלגנטית. איור, אומנות דיגיטלית</p>
     <p>יצירת אומנות בולטת, טעונה רגשית, המייצגת תקווה, חוסן, ואת הרוח הבלתי ניתנת לניתוק של העם הפלסטיני. שלב את הצבעים העזים והמרקמים העשירים של ציור שמן עם תיאור מציאותי של האלמנטים הבאים: אישה פלסטינית לובשת שמלה מסורתית, עומדת בין הריסות עיר שסועת מלחמה, אוחזת בפנס מואר המטיל זוהר חם ומזמין. עצי זית ברקע, כל עץ נושא עלים ירוקים ותוססים והיסטוריה המשתרעת דורות אחורה. שמיים תוססים ומופשטים שעוברים בצורה חלקה מלילה עמוק וזרוע כוכבים ליום בהיר ואור שמש, המסמלים את התקווה המתמשכת לעתיד טוב יותר. פניה של האישה צריכות להקרין כוח, נחישות ותחושת אחדות הלוכדים את חוסנו של העם הפלסטיני. בחזית, צוֹר פסיפס של פיסות מנותצות מדגל פלסטין שמתמזג אט אט לפסיפס של יוני שלום במעוף, המסמל את הרצון להרמוניה ולחופש. יצירת האומנות הזו צריכה לעורר תחושה של סולידריות, התמדה ותקווה בלתי מעורערת למחר בהיר יותר לפלסטין. משחק הגומלין בין ריאליזם לציור שמן מופשט צריך להדגיש את כוחה של הרוח האנושית ואת היופי שעלול להיווצר ממצוקה</p>
-    <p>ישראל וחמאס בשלום ובהרמוניה, נושא כולל: תאר את ישראל וחמאס בדו קיום בשלום בסביבה הרמונית. איכות: מקסימום, רמות פירוט: מתקדם, סגנון: קולנועי, תיאור מפורט: רקע: הצגת נוף אורבני שבו הבניינים של תל אביב משתלבים בצורה חלקה עם הארכיטקטורה האופיינית של עזה. האופק נגוע בגוונים הזהובים של השקיעה, משליך זוהר חם על הסצנה. חזית: משמאל נראית קבוצת ילדים ישראלים ופלסטינים משחקים יחד עם כדור, צוחקים וחולקים רגע משמח. מימין, חקלאים, ישראלים ופלסטינים כאחד, עובדים יחד בשדה מוריק, קוטפים פירות וחולקים כלים וסיפורים. מרכז התמונה: שולחן ארוך עם נציגים משני הצדדים (ישראל וחמאס) יושבים יחדיו. הם בדיון, חולקים אוכל ותה, באווירה של כבוד הדדי. מעל השולחן עפה יונה לבנה עם ענף זית במקורה המסמל שלום. פרטים: שלב אלמנטים קטנים המציגים את התרבות משני הצדדים: מוזיקה, אומנות, ספרות ועוד. אולי מוזיקאי ברקע מנגן על עוד (כלי מסורתי), בעוד אחר מנגן בכינור. על השולחנות מסביב, הראה אנשים ממגוון גילאים, מגדרים ומקצועות המקיימים אינטראקציה, לומדים זה מזה ומשתפים פעולה בפעילויות שונות. צבע ותאורה: השתמש בפלטת צבעים עשירה ורוויה כדי להעניק תחושה קולנועית. אור השקיעה יוצר צללים רכים, מוסיף עומק לסצנה ומדגיש את פניהם של אנשים</p>
+    <p>ישראל וחמאס בשלום ובהרמוניה, נושא כולל: תאר את ישראל וחמאס בדו קיום בשלום בסביבה הרמונית. איכות: מקסימום, רמות פירוט: מתקדם, סגנון: קולנועי, תיאור מפורט: רקע: הצגת נוף אורבני שבו הבניינים של תל אביב משתלבים בצורה חלקה עם הארכיטקטורה האופיינית של עזה. האופק נגוע בגוונים הזהובים של השקיעה, משליך זוהר חם על הסצנה. חזית: משמאל נראית קבוצת ילדים ישראלים ופלסטינים משחקים יחד עם כדור, צוחקים וחולקים רגע משמח. מימין, חקלאים, ישראלים ופלסטינים כאחד, עובדים יחד בשדה מוריק, קוטפים פירות וחולקים כלים וסיפורים. מרכז התמונה: שולחן ארוך עם נציגים משני הצדדים (ישראל וחמאס) יושבים יחדיו. הם בדיון, חולקים אוכל ותה, באווירה של כבוד הדדי. מעל השולחן עפה יונה לבנה עם ענף זית במקורה המסמל שלום. פרטים: שלב אלמנטים קטנים המציגים את התרבות משני הצדדים: מוזיקה, אומנות, ספרות ועוד. אולי מוזיקאי ברקע מנגן על עוד (כלי מסורתי), בעוד אחר מנגן בכינור. על השולחנות מסביב, הראה אנשים ממגוון גילאים, מגדרים ומקצועות המקיימים אינטראקצייה, לומדים זה מזה ומשתפים פעולה בפעילויות שונות. צבע ותאורה: השתמש בפלטת צבעים עשירה ורוויה כדי להעניק תחושה קולנועית. אור השקיעה יוצר צללים רכים, מוסיף עומק לסצנה ומדגיש את פניהם של אנשים</p>
 
     <h4 dir="ltr">A collection of requests for AI-Generated photos made to Midjourney by unknown people during the 2023 Israel-Hamas war</h4>
     <p dir="ltr">A beautiful watercolor oil painting of an israeli holy soldier dressed as a royal goddess</p>

resen/pages.js

@@ -1,15 +1,17 @@
-// Copyright 2023 by Eyal Yehowa Gruss, licensed under CC BY 4.0
+// Copyright 2023-2024 by Eyal Yehowa Gruss, licensed under CC BY 4.0
 // Please attribute by linking to a version of this file [e.g. as done in make_footer()], containing these comments
 
 
 const pages = {
     "/": {title: "רֶסֶן", alt: "Resen", author: "resen", logo: "media/resen.svg", skip: true},
     "open-call-kmeot/": {title: "קול קורא: קמעות", alt: "Open call: Amulets", author: "resen"},
 
+    "snark/": {title: "כרחש אבמ\"ח וכרחש אדו\"ש", alt: "ABMḤ snark and ADWŠ", kw: [1, "2d 3d", "combinatorial", "interactive", "new constraint", "pangram", "software", "sound", "visual"]},
+
     "0/": {title: "פתח דבר לגיליון אפס – מלחמה", alt: "Foreward to Issue 0 – War", author: "alexbenari", kw: [0]},
     "imagine/": {title: "דמיין", alt: "Imagine", author: "liorzalmanson", kw: [0, "poem"]},
     "cent/": {title: "מתוך מאה תמונות מלחמה", alt: "From One hundred visions of war", author: "julienvocance", translator: "rotematar", kw: [0, "poem", "translation"]},
-    "petri/": {title: "פואטיקת פטרי פטריוטית", alt: "Patriotic Petri Poetry", author: "eyalgruss", kw: [0, "live code", "poem", "software", "visual"]},
+    "petri/": {title: "פואטיקת פטרי פטריוטית", alt: "Patriotic Petri Poetry", author: "eyalgruss", kw: [0, "generative", "live code", "poem", "software", "visual"]},
     "exceeding/": {title: "מעֵבר לַשלם", alt: "Exceeding the entirety", author: ["mikamilgrom", "avimilgrom"], kw: [0, "live code", "visual"]},
     "things/": {title: "קורים עכשיו דברים עם השפה", alt: "Things are happening now with the language", author: "noashaham", kw: [0, "poem"]},
     "systems/": {title: "מערכות", alt: "Systems", author: "noashaham", kw: [0, "poem"]},
@@ -83,6 +85,7 @@ const default_rows_first = true
 const default_reorder_contents = true
 
 const kw_labels = {
+    1: "א – קמעות",
     0: "אפס – מלחמה",
     "2d 3d": "רב־ממדי",
     "biblical": "תורני",
@@ -91,6 +94,7 @@ const kw_labels = {
     "combined forms": "שילוב אילוצים",
     "data available": "נתונים להורדה",
     "discourse": "שיח באילוצים",
+    "generative": "מחולל",
     "hebrew cheatery": "מִרמת העברית",
     "interactive": "אינטראקטיבי",
     "live code": "קוד חי",
@@ -211,17 +215,22 @@ function make_link(url, label, cls, title, new_tab=false, force_new_tab_for_mail
 
 
 function get_set_titles(page, lang, elem) {
+    page ??= get_page()
     lang ??= get_lang()
     const titles = {label: pages[page]?.title ?? page.split('/')[0], alt: ''}
+    if (titles.label.match(/\p{P}$/u))
+        titles.label = '⁨' + titles.label
     if (pages[page]?.alt) {
         titles.alt = pages[page].alt
+        if (titles.alt.match(/\p{P}$/u))
+            titles.alt = '⁨' + titles.alt
         if (lang)
             [titles.label, titles.alt] = [titles.alt, titles.label]
     }
     if (elem) {
         if (page != null) {
             const suffix = elem.title.match(/\[.*/)
-            if (suffix) {
+            if (suffix) {  // keyboard shortcut
                 titles.label += ' ' + suffix
                 titles.alt += ' ' + suffix
             }
@@ -407,12 +416,8 @@ function get_width(text, elem, units='em') {  // Note: If the font has not compl
 function set_next_prev_page(page, next, prev, lang, url_kw) {
     const list = Object.keys(pages).filter(p => !pages[p].skip && (!url_kw || pages[p].kw?.map(sanitize).includes(url_kw)))
     const index = list.indexOf(page)
-    let next_page = ''
-    let prev_page = ''
-    if (list.length) {
-        next_page = list[(index+1) % list.length]
-        prev_page = list[(Math.max(index, 0)-1+list.length) % list.length]
-    }
+    const next_page = list[(index+1) % list.length] ?? ''
+    const prev_page = list[(Math.max(index, 0)-1+list.length) % list.length] ?? ''
     update_href(next, page2url(next_page, lang, null, url_kw), 'next')
     get_set_titles(next_page, lang, next)
     update_href(prev, page2url(prev_page, lang, null, url_kw), 'prev')
@@ -537,7 +542,8 @@ function make_header(reorder_contents=default_reorder_contents, new_tab_for_soci
             }
 
             button.innerHTML = label
-            button.title = `[pages=${all_keywords_stats[kw].count} info=${(all_keywords_stats[kw].info * 100).toFixed(1)}%] ${alt}`.trim()
+            button.dir = 'ltr'  // For left alignment of the multi-line title
+            button.title = `${alt}\npages=${all_keywords_stats[kw].count}\ninfo=${(all_keywords_stats[kw].info * 100).toFixed(1)}%`.trim()
             if (page == '/')
                 button.onclick = kw_handler
             else {
@@ -586,7 +592,7 @@ function make_header(reorder_contents=default_reorder_contents, new_tab_for_soci
 
 
     if (desc.length) {
-        meta = document.createElement('meta')
+        const meta = document.createElement('meta')
         meta.name = 'description'
         meta.content = desc.join(', ')
         document.head.appendChild(meta)
@@ -712,21 +718,27 @@ function make_footer(copyright_url=default_copyright_url, copyright_label=defaul
 }
 
 
-function textarea_writeln(textarea, line='') {
+function textarea_writeln(textarea, line='', chars_for_reset=500000) {
     if (typeof textarea == 'undefined')
         return
     const selection_start = textarea.selectionStart
     const selection_end = textarea.selectionEnd
-    const should_scroll = textarea.scrollTop + 1 >= textarea.scrollHeight - textarea.clientHeight && selection_start == selection_end
+    const should_scroll = (textarea.scrollTop + 1 >= textarea.scrollHeight - textarea.clientHeight || textarea.clientHeight != textarea.dataset.height || textarea.clientWidth != textarea.dataset.width) && selection_start == selection_end
+    if (!line && textarea.value.length > chars_for_reset) {
+        should_scroll = true
+        textarea.value = textarea.value.match(/(^|\n)\n/) ? textarea.value.split(/(^|\n)(?=\n)/).pop() : ''
+    }
     textarea.value += line + '\n'
-    if (should_scroll)
+    if (should_scroll) {
         textarea.scrollTop = textarea.scrollHeight
-    else if (selection_start != selection_end)
+        textarea.dataset.height = textarea.clientHeight
+        textarea.dataset.width = textarea.clientWidth
+    } else if (selection_start != selection_end)
         textarea.setSelectionRange(selection_start, selection_end)  // Needed to restore the selection after value change. Note: In Firefox this will scroll the selection into view
 }
 
 
-function show_cursor(elem) {
+function show_hide_cursor(elem) {
     elem.classList.remove('show_cursor')
     elem.offsetWidth  // Restart animation, see: https://css-tricks.com/restart-css-animation/
     elem.classList.add('show_cursor')

resen/petri/index.html

@@ -133,11 +133,9 @@
     </p>
 
     <br>
-    <div class="petri" oncontextmenu="toggle_fullscreen(event)"></div>
+    <div class="petri" id="petri" oncontextmenu="toggle_fullscreen(event)" onmousemove="show_hide_cursor(this)"></div>
 
-    <textarea id="poem" dir="auto" readonly rows="15" spellcheck="false">
-
-</textarea>  <!-- Initial newline -->
+    <textarea id="poem" autocomplete="off" dir="auto" readonly rows="15" spellcheck="false"></textarea>
     <div class="refs">
         <blockquote>Susan Stepney, <a href="https://susan-stepney.blogspot.com/2012/12/ode-to-petri-net.html">ODE to a Petri net</a> (2012).</blockquote>
         <blockquote>Owen Lynch, <a href="https://owenlynch.org/posts/2019-12-13-petri-nets-in-action/">Petri Nets in Action</a> (2019).</blockquote>