מרים סוזן היא סופרת, אומנית ומפתחת אתרים בדנוור, קולורדו, והיא עובדת כרגע על מפרטי CSS מעניינים כמו Container Queries ו-Cascade Layers.
הפוסט הזה הוא חלק מ-Designcember. חגיגה של עיצוב אתרים, בחסות web.dev.
מרים סוזן היא סופרת, אומנית ומפתחת אתרים בדנבר, קולורדו. היא שותפה מייסדת ב-OddBird (סוכנות אינטרנט), כתבת ב-CSS Tricks, חברה בצוות הליבה של Sass ומומחית מוזמנת ב-W3C בצוות העבודה של CSS. לאחרונה היא התמקדה בפיתוח תכונות חדשות של CSS כמו Cascade Layers, Container Queries ו-Scope. במצב אופליין, מיריאם היא סופרת, מחזאית ומוזיקאית שספריה ומחזותיה פורסמו. דיברנו על העבודה שלה עם Sass ו-CSS.
רייצ'ל: שמעתי על העבודה שלך לראשונה בגלל מסגרת הרשת Susy. מה הוביל אותך ליצור אותה?
מרים: בשנת 2008, הפריסה באינטרנט הייתה שונה מאוד. מפתחים עברו מפריסת טבלה לרשתות צפות סמנטיות יותר (אבל עדיין לא מושלמות). היה ביקוש רב ל'מסגרות רשת' של 12 עמודות שמתאימות לכל האתרים – מסגרות שמספקות רשת מוגדרת מראש (בדרך כלל סטטית) עם קבוצה של מחלקות CSS מוגדרות מראש. אם הייתם צריכים משהו יותר מותאם אישית, הייתם צריכים להסתדר לבד. היה ברור שצריך לשפר את ההיענות של אתרים, אבל עדיין לא היו זמינות שאילתות מדיה, והיו הרבה בעיות תאימות בדפדפנים בנוגע למיקומים צפים.
השתמשתי בגישה של מערכות CSS של נטלי דאון, שהייתה חכמה מבחינת התגובה לגודל הגופן ולגודל חלון התצוגה, אבל התסכול שלי נבע מכל החישובים החוזרים ומהפריצות לדפדפן שנדרשו. במקביל, Sass התחיל לצבור פופולריות, והוא התאים בדיוק למה שהייתי צריך. הטיוטה הראשונה של Susy הייתה פשוטה מאוד: רק כמה mixins לביצוע החישובים ולהוספת הפתרונות הזמניים שהייתי צריך. המטרה הייתה ליצור קוד מינימלי, שכולל רק את הקוד החיוני. רשתות שניתנות להתאמה אישית מלאה, ללא הגדרות מראש.
רייצ'ל: איך עברת מעבודה על מעבד מקדים של CSS לעבודה על מפרטים של CSS? האם לדעתך העבודה על מעבד מקדים הייתה רקע טוב לכתיבת מפרטים?
מרים: מניסיוני, יש הרבה חפיפה בין שני התחומים, ואני עדיין פעילה מאוד בשניהם. אבל אני חושב שזה קורה בעיקר בזכות צוות Sass, בראשות נטלי וייזנבאום, שמתמקד בטווח הארוך ומנסה לפתח כלים שמשתלבים בצורה חלקה עם פיתוח תקני אינטרנט. כשחושבים על העתיד של תקני ליבה באינטרנט, חשוב לצאת מנקודת הנחה שאין פתרון אחד שמתאים לכולם, ולבנות פתרונות גמישים לטווח ארוך.
איך אפשר ליצור כלים שמכבדים את המגוון של הצרכים והגישות של המפתחים, ועדיין מעודדים ומאפשרים נגישות ושיקולים חשובים אחרים?
רייצ'ל: יש לנו הרבה דברים חדשים ב-CSS, שבעצם מחליפים פונקציונליות שהייתה באופן מסורתי חלק מ-Sass. האם יש סיבות טובות להמשיך להשתמש במשהו כמו Sass?
מרים: כן, אצל חלק מהאנשים – אבל אין כאן תשובה אוניברסלית. ניקח לדוגמה משתנים. משתני Sass הם בעלי היקף לקסיקלי, והם עוברים קומפילציה בשרת, עם מבני נתונים מאורגנים כמו רשימות ואובייקטים, מניפולציה של צבעים וכו'. זה מצוין ללוגיקה של מערכת עיצוב שלא צריכה לפעול בדפדפן.
יש חפיפה מסוימת בין משתני CSS לבין משתני Sass, כי גם הם יכולים לאחסן ערכים, אבל הם מספקים קבוצה שונה לחלוטין של יתרונות וחסרונות שמבוססים על קסקדה. Sass לא יכול לטפל במאפיינים בהתאמה אישית, ו-CSS לא יכול לטפל בנתונים מובְנים. שני הכלים שימושיים ומתקדמים, אבל יכול להיות שהצרכים הספציפיים שלכם שונים.
אני חושב שזה מצוין שאנשים יכולים להפסיק להשתמש בכלים שהם כבר לא צריכים, ויכול להיות שבחלק מהפרויקטים לא צריך גם משתנים בצד השרת וגם משתנים בצד הלקוח. נהדר! אבל אי אפשר להניח שהם זהים, ושאחד פשוט מחליף את השני. תמיד יהיו תרחישי שימוש שבהם חלק מהלוגיקה של העיצוב תתבצע בצד השרת וחלק בצד הלקוח – גם אם נגיע למצב שבו השפות מספקות בעצם את אותן תכונות. מעבדים מקדימים הם חלק בלתי נפרד מהעתיד שלנו.
רייצ'ל: האם יש משהו שהפתיע אותך כשהתחלת להיות מעורב יותר בעבודה על יצירת תקנים, או משהו שלדעתך אנשים בדרך כלל לא מודעים לו לגבי התהליך?
מרים: לפני שהתחלתי להשתתף בתהליך, הוא נראה לי כמו קופסה שחורה מסתורית וקסומה, ולא ידעתי למה לצפות. חששתי שלא יהיה לי מספיק ידע על המבנה הפנימי של הדפדפן כדי לתרום, אבל המציאות היא שלא צריך עוד מהנדסי דפדפן. הם צריכים עוד מפתחים ומעצבים שיוצרים אתרים ואפליקציות.
הופתעתי לגלות שרק מעט מהאנשים שמעורבים בתחום מתמקדים בעיקר בתקנים, אבל גם רק מעט מהם מתמקדים בעיקר בפיתוח או בעיצוב של אתרים. ה-W3C מורכב מ'מתנדבים' מארגונים חברים (לרוב הם מקבלים תשלום מהארגונים האלה, אבל זה לא התפקיד העיקרי שלהם), והחברות לא זולה. ההטיה הזו מרחיקה את המשתתפים ממעצבים ומפתחים שעובדים על בסיס יומיומי, במיוחד את אלה שעובדים עם לקוחות בסוכנויות קטנות או כפרילנסרים. התפקיד שלי כמומחה מוזמן הוא לגמרי בהתנדבות, תחביב יקר, אם לא הייתי מוצא מימון חיצוני לעבודה הזו.
בפועל, התהליך פתוח וציבורי למדי ודורש מעורבות של מפתחים – אבל תמיד מתנהלות כל כך הרבה שיחות בו-זמנית, כך שקשה למצוא את המקום שלכם. במיוחד אם זה לא העיסוק העיקרי שלכם.
רייצ'ל: שאילתות של קונטיינרים היו במשך שנים רבות הגביע הקדוש של הרבה מפתחי אתרים. אני מאוד שמח שאנחנו מקבלים אותם. נדמה לי שהרבה אנשים חושבים על התועלת של שאילתות קונטיינר. לדעתך יש להן פוטנציאל לעורר יותר יצירתיות?
מרים: בהחלט, אבל אני לא רואה אותם כדברים נפרדים לגמרי. לכולנו יש זמן מוגבל, ואנחנו מנסים לכתוב קוד שקל לתחזק ושפועל בצורה יעילה. כשקשה לעשות משהו בפועל, אנחנו פחות נוטים להיות יצירתיים לגבי מה שאפשר לעשות.
עם זאת, תעשיית האינטרנט נשלטת כיום על ידי אינטרסים תאגידיים גדולים, ולכן הדאגות העסקיות האלה תמיד מקבלות יותר זמן שידור מאשר אמני אינטרנט. ואני חושב שאנחנו מפסידים הרבה אם אנחנו מתעלמים מיצירתיות באינטרנט כתרחיש שימוש עיקרי בתכונות. התרגשתי מאוד לראות כמה אמני CSS משחקים עם אב הטיפוס של שאילתת המאגר. Jhey Tompkins יצר הדגמה אינטראקטיבית חכמה במיוחד של תריסי ונציה ב-CSS כפרשנות למים הישן נגד CSS. אני חושב שיש עוד הרבה מה לגלות בתחום הזה, ומחכה לראות אילו רעיונות נוספים יעלו לאנשים.
השיחה התמקדה גם בשאילתות שמבוססות על גודל, כמו במקרה השימוש המקורי, אבל אני מתרגש לראות מה אנשים יעשו עם שאילתות סגנון – היכולת לכתוב סגנונות מותנים על סמך הערך של מאפיין או משתנה CSS. זו תכונה עוצמתית מאוד, ועדיין לא מיצינו את כל האפשרויות שלה. אני חושב שזה פותח עוד יותר הזדמנויות יצירתיות!
Rachel: Is there anything that we can’t do (or have an upcoming way to do) in CSS that you think would be useful?
מרים: אני מאוד מתרגשת לגבי כמה מפרטים אחרים שעבדתי עליהם. שכבות מדורגות יאפשרו למפתחים לשלוט יותר בבעיות של ספציפיות, והתכונה Scope אמורה לעזור בטירגוט סלקטורים מדויק יותר. אבל שני אלה הם נושאים שקשורים לארכיטקטורה ברמה גבוהה. האומן שבי מתלהב יותר מדברים כמו מתגי CSS, דרך הצהרתית ליצירת סגנונות אינטראקטיביים, או 'ציר זמן' של קונטיינר, שמאפשר לנו להעביר ערכים בצורה חלקה בין נקודות עצירה של מדיה או קונטיינר. יש לכך השלכות מעשיות מאוד על טיפוגרפיה רספונסיבית, אבל זה גם יפתח הרבה הזדמנויות יצירתיות לאומנות ולאנימציה רספונסיביות.
רייצ'ל: מי עוד עושה עכשיו עבודה מעניינת, כיפית או יצירתית באינטרנט?
מרים: אני לא בטוחה איך לענות על זה, יש כל כך הרבה אנשים שעוסקים בעבודה יצירתית בתחומים שונים. יש הרבה עבודות מרתקות על תקנים שנמצאות בתהליך, גם ב-CSSWG וגם ב-Open-UI, כולל חלק מהעבודה שלך על פיצול. אבל לרוב אני מקבל השראה מאומנים באינטרנט, ומהאופן שבו אנשים משתמשים בכלים האלה ליצירת תוכן, בדרכים שלא קשורות ישירות למסחר. אנשים כמו Jhey, Lynn Fisher, Yuan Chuan ועוד רבים אחרים שפורצים את גבולות היכולות של טכנולוגיות האינטרנט מבחינה ויזואלית ואינטראקטיבית. גם אנשים שעוסקים בעבודה עסקית יותר יכולים ללמוד הרבה מהטכניקות האומנותיות שלהם.
אני גם מעריך את האומנות האינטרנטית הקונספטואלית יותר של אנשים כמו בן גרוסר, שממשיך לדחוף אותנו לחשוב מחדש על מה שאנחנו רוצים מהאינטרנט, ומהרשתות החברתיות בפרט. לדוגמה, כדאי לבדוק את minus.social החדש שלו.
רייצ'ל: אפשר להתעדכן בעבודה של מרים על שירות CSS בכתובת css.oddbird.net ולגלות מה עוד היא עושה באתר שלה miriam.codes ובטוויטר @TerribleMia.