מרים סוזן היא סופרת, אומנית ומפתחת אתרים בדנוור, קולורדו, וכרגע היא עובדת על מפרטי CSS מרתקים כמו שאילתות קונטיינר ושכבות דירוג.
הפוסט הזה הוא חלק מ-designcember, מסיבה בנושא עיצוב אתרים, שהגיעה אליכם מ-web.dev.
מרים סוזן היא סופרת, אומנית ומפתחת אתרים בדנוור, קולורדו. היא מייסדת-שותפה של OddBird (סוכנות אינטרנט), כותבת בצוות של טריקים ל-CSS, חברה בצוות הליבה של Sass ומומחית מוזמנים מ-W3C בקבוצת העבודה של CSS. לאחרונה היא התמקדה בפיתוח תכונות CSS חדשות כמו שכבות דירוג, שאילתות בקונטיינר והיקף. אופליין, מרים היא סופרת, מחזאית ומוזיקאית שפורסמה. דיברנו על העבודה שלה עם Sass ועם CSS.
רייצ'ל: למדתי על העבודה שלך לראשונה ממסגרת הרשת Susy, מה גרם לך ליצור את זה?
מרים: ב-2008, הפריסה באינטרנט הייתה חוויה שונה מאוד. המפתחים עברו מפריסת טבלאות לרשתות סמנטיות יותר (אבל עדיין פרועות) לרשתות צפות. הייתה תנופה גדולה ב "מסגרות רשת" של 12 עמודות, שמהוות רשת אחידה בגודל 12 עמודות – בזכות רשת מוגדרת מראש (בדרך כלל סטטית) עם קבוצה של סיווגי CSS מוגדרים מראש. אם היית צריך משהו יותר מותאם אישית, היית לבד. היה ברור שהאתרים צריכים להגיב מהר יותר, אבל שאילתות מדיה עדיין לא היו זמינות והייתה כמות גדולה של בעיות תאימות בדפדפנים בנושא הצפות של נוזלים.
השתמשתי בגישת CSS Systems של נטלי דאון, שהייתה מתוחכמת בכתיבת התגובה גם לגודל הגופנים וגם לגודל אזור התצוגה, אבל התוסכלתי מכל הפריצות שחוזרות על עצמן למתמטיקה ולדפדפנים. באותו זמן, סאס התחיל לקבל תשומת לב והוא התאים בדיוק למה שהייתי צריך. הטיוטה הראשונה של Susy הייתה פשוטה מאוד: רק כמה מיקסים שיעשו את החישוב ויוסיפו את הפריצות שהייתי צריך. המטרה הייתה להיות מינימלית ולהכין פלט של הקוד החיוני בלבד. רשתות שניתן להתאים אישית לגמרי, ללא מחלקות מוגדרות מראש.
ריצ'ל: איך עברתם מעבודה על מעבד מידע מראש של CSS לעבודה על מפרטים של CSS? האם לדעתך העבודה על המעבד מראש הייתה רקע טוב לכתיבת מפרטים?
מרים: מניסיוני יש חפיפה רבה, ואני עדיין פעילה מאוד בשני הצדדים. אבל אני חושבת שזה בעיקר בזכות צוות סאס, בראשות נטלי וויזנבאום, שבוחן את העניין לטווח ארוך - בניסיון לפתח כלים שמשתלבים בצורה חלקה עם פיתוח תקנים באינטרנט. כאשר שוקלים את העתיד של התקנים הבסיסיים באינטרנט, חשוב לפרוץ אל מעבר לפתרונות "מוסמכים" לכולם ולרכוש את גמישות הפעולה שלכם לטווח הארוך.
איך אנחנו יכולים לפתח כלים שמכבדים את מגוון הצרכים והגישות של המפתחים, ועדיין מעודדים נגישות ומסייעים לשיקולים חשובים אחרים?
רייצ'ל: יש לנו הרבה דברים להכניס ל-CSS שמחליפים פונקציונליות שהייתה בדרך כלל חלק מ-Sass. האם יש סיבות ממשיות לשימוש במשהו כמו Sass?
מרים: כן, לחלק מהאנשים – אבל אין כאן תשובה אוניברסלית. ניקח לדוגמה משתנים. משתני Sass הם בעלי היקף מילוני ומעובדים בשרת, עם מבני נתונים מאורגנים כמו רשימות ואובייקטים, מניפולציית צבעים וכו'. זה מעולה ללוגיקה של מערכת לתכנון שלא צריכה לפעול בדפדפן.
למשתני CSS יש חפיפה מסוימת, הם יכולים גם לאחסן ערכים, אבל הם מספקים קבוצה שונה לגמרי של נקודות חוזק וחולשה מבוססות-דירוג. שירות Sass לא יכול לטפל במאפיינים מותאמים אישית, ו-CSS לא יכול לטפל באמת בנתונים מובְנים. שניהם שימושיים, ושניהם יעילים — אבל הצרכים הספציפיים שלך עשויים להשתנות.
אני חושב שזה נהדר כשאנשים יכולים להסיר כלים שהם כבר לא צריכים, ויכול להיות שבפרויקטים מסוימים לא יידרשו משתנים בצד השרת ובצד הלקוח. נהדר! אבל כל כך פשוט להניח שהמשמעות היא שהן זהות, והאחת פשוט מחליפה את השנייה. תמיד יהיו תרחישים לדוגמה שבהם לוגיקת עיצוב כלשהי תתרחש בצד השרת, וחלקם בצד הלקוח – אפילו אם אנחנו מגיעים לנקודה שבה השפות מספקות למעשה את אותן התכונות. מעבדי מידע מראש נשארים איתנו לאורך זמן.
רייצ'ל: האם יש משהו שהפתיע אתכם, מאחר שאתם מעורבים יותר ביצירת סטנדרטים, או משהו שלדעתכם אנשים לא מודעים לתהליך באופן כללי?
מרים: לפני שהתחלתי להיות מעורב, תהליך הסטנדרטים נראה כמו קופסה שחורה מסתורית וקסומה, ולא ידעתי למה לצפות. פחדתי שאולי לא יהיה לי מספיק ידע לגבי דפדפנים פנימיים כדי לתרום, אבל למעשה הם לא צריכים עוד מהנדסי דפדפן. הם זקוקים למפתחים ולמעצבים נוספים שבונים אתרים ואפליקציות ברחבי העולם.
הופתעתי לגלות שמעט מאוד מהאנשים המעורבים מתמקדים בעיקר בסטנדרטים, אך מעט מאוד מהם מפתחים או מעצבים אתרים בעיקר. ה-W3C מורכב מ'מתנדבים' מארגונים חברים (לרוב משלמים על ידי ארגונים כאלה, אבל לא כעבודה העיקרית שלהם), והחברות לא זולה. כך התלמידים לא יהיו מרוצים יותר ממעצבים ומפתחים יום-יומיים, ובמיוחד את אלה שעובדים בתחום העבודה של לקוחות בסוכנויות קטנות או פרילנסרים. התפקיד שלי כמומחה שהוזמן הוא התנדבות מלאה, תחביב יקר, אילו לא הייתי מוצא מחוץ למימון העבודה הזו.
במציאות, התהליך די פתוח וציבורי ויש צורך במעורבות של מפתחים – אבל תמיד יש כל כך הרבה שיחות שמתנהלות בו-זמנית וקשה למצוא את המיקום שלכם. במיוחד אם אלה לא העבודה שלך.
רייצ'ל: שאילתות לגבי קונטיינרים היו הגביע הקדוש של מפתחי אתרים במשך שנים רבות. אני מאוד נרגשת מהעובדה שאנחנו מקבלים אותם. נראה לי שהרבה אנשים חושבים על התועלת של שאילתות לגבי קונטיינרים – האם אתם חושבים שיש להם גם פוטנציאל ליצירתיות?
מרים: בהחלט, אבל אני לא רואה אותן בנפרד לגמרי. לכולנו יש זמן מוגבל, ואנחנו מנסים לכתוב קוד בר תחזוקה וביצועים טובים. כשקשה לבצע פעולה מעשית, סביר להניח שלא נהיה יצירתיים יותר במה שאפשר לעשות.
עדיין, תעשיית האינטרנט מתבססת כיום על אינטרסים תאגידיים גדולים, כך שהחששות העסקיים האלה תמיד מקבלים יותר זמן שידור מאשר אומני אינטרנט. ואני חושב שאנחנו מפסידים הרבה אם נתעלם מיצירתיות באינטרנט כתרחיש לדוגמה העיקרי של תכונות. שמחתי מאוד לראות כמה מחברי ה-CSS משחקים עם אב הטיפוס של שאילתת הקונטיינר. Jhey Tompkins יצר הדגמה חכמה ואינטראקטיבית במיוחד של תריסים ונציאניים של CSS כפרשנות על המם הישן אנטי-CSS. אני חושב שיש עוד הרבה מה לגלות בתחום הזה, ואני ממש מחכה לראות מה עוד אנשים ימציאו.
השיחה התמקדה גם בשאילתות שמבוססות על גודל, כתרחיש המקורי לדוגמה, אבל אני שמח לראות מה אנשים עושים עם שאילתות סגנון – היכולת לכתוב סגנונות מותנים על סמך הערך של מאפיין או משתנה CSS. זוהי תכונה עוצמתית במיוחד, שעד כה רובה לא נחקרה. לדעתי זה פותח עוד יותר הזדמנויות יצירתיות!
ריצ'ל: יש משהו שאנחנו לא יכולים לעשות (או שאנחנו מתכוונים לעשות בקרוב) ב-CSS שלדעתך יהיה מועיל?
מרים: אני מאוד מתרגשת לגבי מפרטים אחרים שעבדתי עליהם. שכבות-על יאפשרו למחברים שליטה רבה יותר על בעיות ספציפיות, וההיקף יעזור עם טירגוט מדויק יותר של בוררים. אבל שתי הבעיות קשורות לסוגיות ארכיטקטוניות ברמה גבוהה. האומן שבפנים נרגש יותר לגבי אפשרויות כמו מתגי CSS, דרך מוצהרת ליצור סגנונות אינטראקטיביים או 'צירי זמן' של מאגר, שמאפשרים לנו להעביר בצורה חלקה ערכים בין נקודות עצירה של מדיה או של קונטיינרים. יש לכך השלכות מעשיות מאוד לגבי טיפוגרפיה רספונסיבית, אבל גם יכולות להיפתח הרבה הזדמנויות יצירתיות ליצירת אומנות ואנימציה רספונסיביות.
רייצ'ל: מי עוד עושה כרגע עבודה מעניינת, מהנה או יצירתית באינטרנט?
מרים: אוי, קשה לי אפילו איך לענות על זה, יש כל כך הרבה אנשים שעושים עבודה יצירתית בתחומים כל כך שונים. אנחנו עובדים על הרבה תקנים מיוחדים בתחום ה-CSSWG וה-Open-UI, כולל חלק מהעבודה שלכם על פרגמנטציה. אבל הרבה פעמים אני שואבת את ההשראה מאומני אינטרנט ומהאופן שבו אנשים מטמיעים את הכלים האלה בסביבת הייצור, בדרכים שאינן קשורות ישירות למסחר. אנשים כמו ג'יי, לין פישר או יואן צ'ואן, או אנשים רבים אחרים שמרחיבים את הגבולות של טכנולוגיות אינטרנט שיכולות לעשות מבחינה חזותית ואינטראקטיבית. אפילו אנשים שעוסקים יותר בעבודה עסקית יכולים ללמוד הרבה מהטכניקות האומנותיות שלהם.
אני גם מעריך את אומנות האינטרנט הרעיונית יותר של אנשים כמו בן גרוסר, שדוחפת אותנו כל הזמן לשקול מחדש את מה שאנחנו רוצים לעשות באינטרנט, ובאופן ספציפי ברשתות החברתיות. לדוגמה, כדאי לבדוק את minus.social.
ריצ'ל: מרים לעקוב אחר העבודה של מרים על CSS באתר css.oddbird.net ולראות מה עוד היא עושה באתר שלה בכתובת miriam.codes וב-Twitter @TerribleMia.