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