ברוכים הבאים למהדורה השנייה של Chrome Dev Insider, שבה אנחנו משתפים עדכונים על מה שחדש ומעניין בקהילת הפיתוח וב-Chrome. זהו פרק חדש של 'סיפורים מבפנים', שבו אנחנו מספרים איך אנחנו מתקרבים לעבודה שלנו, ומציגים סקירה מהירה של חלק מהעדכונים החשובים ביותר שכדאי לשים לב אליהם.
שמי Rachel Andrew ואני מנהלת התוכן של web.dev ושל developer.chrome.com, כחלק מצוות קשרי המפתחים של Chrome. אני עובד באינטרנט כבר יותר מעשרים שנה, עם התמקדות בתקני אינטרנט פתוחים וב-CSS. אני חבר בקבוצת העבודה של CSS.
לפני חודשיים סיימנו את כנס Google I/O, שבו שיתפנו כמה מהעדכונים החשובים ביותר לגבי האופן שבו אנחנו תומכים במפתחים כדי שהאינטרנט יהיה מהיר וחזק יותר, תוך שמירה על המידע של המשתמשים בטוח ופרטי.
אחד הדברים הבולטים (ושמחנו שהקהילה שמה לב אליו!) הוא כמות העבודה העצומה שהצוות משקיע כדי לתמוך בתכונות נוספות של CSS ושל ממשק משתמש באינטרנט. במהדורה הזו של Chrome Dev Insider ניקח אתכם אל מאחורי הקלעים כדי להראות לכם מי עומד מאחורי העבודה הזו, איך אנחנו פועלים כדי לתמוך במפתחי CSS ובמפתחי ממשק משתמש, ומה צפוי בעתיד. לכן אני שמח מאוד לארח את המהדורה הזו של Insider.
בחדשות
בChrome Dev Insider הראשון, שיתפנו כמה עדכונים לגבי יוזמות Compat 2021 ו-Interop 2022, שבהן ספקי דפדפנים וגורמים בסביבה העסקית עובדים בשיתוף כדי להוסיף לאינטרנט תכונות נוספות שנתמכות בכל הדפדפנים. התוכנית מתמקדת ב-CSS כי חוסר תאימות לדפדפנים הוא אחד מהאתגרים הגדולים ביותר למפתחי CSS.
יכול להיות שזה לא חדשות לרוב האנשים, אבל אנחנו שמחים לראות את ההתקדמות שכבר השגנו בדפדפנים השונים.
בתחילת החודש שעבר הכרזנו על גרסה חדשה של Safari – Safari 16.0 Beta – שכוללת תכונות מעניינות כמו שאילתות מאגר, תת-רשת וכלי לבדיקת flexbox. הגרסאות האחרונות של Firefox ו-Chrome כללו מספר תכונות ותיקונים מעניינים. בכל חודש אני עוסק בדברים העיקריים בדפדפנים היציבים ובגרסאות הבטא בסדרת הפוסטים שלי בנושא חדש בפלטפורמת האינטרנט.
מידע מהימן: תמיכה במפתחי CSS ובמפתחי ממשק משתמש
שנת 2022 הייתה שנה מרגשת במיוחד מבחינת תכונות CSS, וחשבנו שזו הזדמנות טובה להציג לכם את הדברים מאחורי הקלעים. שוחחתי עם Una Kravets, מנהלת פיתוח קהילת המפתחים של ממשק המשתמש באינטרנט וכלי הפיתוח, ועם Nicole Sullivan, מנהלת המוצר של ממשק המשתמש באינטרנט שמתמקדת ב-CSS וב-HTML API, על התהליך שבו Chrome עבר תמיכה במפתחי ממשק משתמש.
נתחיל איתך. נשמח לקבל עוד פרטים עליך ועל העסק שלך.
ניקול: אני מנהלת המוצר של ממשק המשתמש באינטרנט ב-Chrome. אני מתמקדת במיוחד בממשקי API חדשים של CSS ו-HTML, ובמפתחים ובמעצבים שמפתחים ממשקי משתמש. זה תחום מרגש עם ממשקי API חשובים מאוד שיושקו בקרוב, כמו שאילתות בקונטיינרים, היקף ו (בתקווה!) קצב אנכי.
Una: אני מנהלת את צוותי DevRel של ממשק המשתמש באינטרנט ושל כלי הפיתוח. אנחנו מתמקדים בתמיכה במהנדסי ממשק משתמש בפלטפורמת האינטרנט, ומוודאים שיש להם את הכלים הנחוצים להצלחה. הנתונים האלה כוללים ממשקי API של CSS ורכיבי HTML, יחד עם תכונות של DevTools שבעזרתן אפשר לראות שינויים פעילים ומשוב.
בשנים האחרונות התחזקה התמיכה של Chrome למפתחי ממשק משתמש. למה לדעתך זה לקח כל כך הרבה זמן? מהם האתגרים הגדולים ביותר?
Una: נדרשו לנו כמה ניסיונות כדי להוכיח עד כמה העבודה הזו חשובה ולמה היא צריכה להיות בעדיפות גבוהה. התחלנו בסקר DNA של MDN ב-2019, שבו זיהינו את ממשק המשתמש כאחד מנקודות החולשה העיקריות בפלטפורמה. מאז, אנחנו ממשיכים להשתמש בנתונים כמדריך ב-MDN ובסקרים הפנימיים שלנו לגבי שביעות הרצון של המפתחים. כתוצאה מכל זה, הצלחנו לקבל תמיכה עמוקה יותר מההנהלה, ולתעדף את עבודת ההנדסה סביב חלק מהתכונות הנפוצות ביותר שפותחו למפתחים בתחום ממשק המשתמש, וגם הן מהוות את עיקר המיקוד ביוזמות כמו Compat 2021 ו-Interop 2022.
ניקול: בנוסף לקבלת אישור מההנהלה, היינו צריכים גם למצוא את הדרך הנכונה להעביר את ממשקי ה-API האלה למפתחים. כשהצטרפתי ל-Chrome בפעם הראשונה, עשיתי טעות בפרויקט שנקרא Layered APIs (או LAPIs בקיצור). LAPIs נועדו לספק למפתחים חוויית שימוש ברכיבים שאפשר להוסיף בקלות. עדיין לדעתי זו הייתה תוצאה נהדרת שאפשר לשאוף אליה, אבל עשינו הרבה טעויות! התחלנו להתמקד בהתראות טוסט וברשימת פריטים וירטואלית. כמעט בלתי אפשרי להפוך הודעות טוסט לנגישות, ורשימת פריטים וירטואלית היא אחד מהרכיבים הקשים ביותר להגיע אליהם. הכוונות שלנו היו טובות, אבל הפרויקט לא עזר למפתחים, ולכן הוצאנו אותו משימוש. קשה ללמוד בדרך הקשה, אבל כל טעות תורמת לתנועת הרנסנס של CSS ו-HTML שמתרחשת עכשיו.
נרחיב עוד קצת על ממשקי LAPI. מה קרה שם?
ניקול: לגבי ממשקי LAPI, ידענו שהאינטרנט זקוק לחוויית פיתוח של רכיבים שאפשר להוסיף לקוד, שתהיה קרובה יותר ליצירת ממשק משתמש מקורי. ברור היה שהמצאה מחדש של גלגלים היא חסם למפתחים. אי אפשר לספור את מספר הכרטיסיות שיצרתי במהלך הקריירה שלי! עם זאת, ניסינו לפתור את הבעיה על ידי שליחת JavaScript עם הדפדפן, וזה היה קשה מאוד. אף אחד לא שלח JavaScript בדפדפן לפני כן, ולא היה ברור איך הוא צריך לקיים אינטראקציה עם קוד ה-C++ שמפעיל את מנוע הרינדור של הדפדפן. הקשבנו ליצרני דפדפנים אחרים (תודה, Mozilla!) ווויתרנו על הגישה הזו, וכך הצלחנו למצוא משהו הרבה יותר טוב עם Open UI. כשמשתמשים ב-HTML וב-CSS, מקבלים פתרונות גמישים ומוצהרים. בגלל שהשפה היא אופרטיבית, אנחנו יכולים להטמיע נגישות בצורה שלא הייתה קלה באותה מידה באמצעות JavaScript. אני מאוד מתרגש מהכיוון שאליו זה הולך. אנחנו עובדים על תמיכה בתפריט נפתח, בחלון קופץ, בתיאור כללי, בתפריט ניווט, בחלונית מתקפלת, בכרטיסיות, בקרוסלה ובמתג, שהם דפוסי עיצוב חיוניים לממשק המשתמש.
למדנו המון. וידוע לי שקיימות יוזמות נוספות בתחום הזה, כמו CSS Houdini. מה הסיפור?
Una: כן, CSS Houdini הוא מקום נוסף שבו למדנו מהקהילה. יש המון תכונות שימושיות ב-Houdini, אבל רבות מהן היו ברמה נמוכה מדי כדי לקבל תמיכה ושימוש נרחב יותר. הבנו שהטמעת ממשקי API ברמה נמוכה לא בהכרח מפחיתה את החיכוך של המפתחים. במקום זאת, התמקדות בצרכים ובפתרונות ברמה גבוהה יותר עזרה לנו לקבל תמיכה בדפדפנים שונים ולייצר את דפי הנחיתה הנדרשים כדי לשפר את הסביבה העסקית. אנחנו עוקבים אחרי ההתקדמות בכתובת https://ishoudinireadyyet.com/.
לגבי תמיכה בדפדפנים שונים, נראה שתוכניות כמו Interop 2022 ו-Open UI מניבות תוצאות חיוביות משמעותיות לקהילה. מה המפתחים אומרים?
Una: אחת מנקודות החולשה העיקריות שאנחנו שומעים מהמפתחים היא "עיצוב שעובד באותה צורה בכל הדפדפנים". כדי לטפל בבעיה הזו, עבדנו עם ספקי דפדפנים אחרים כדי לתת עדיפות לחלק מהתכונות הנפוצות ביותר שפותחו למפתחים ולהוסיף אותן לדפדפן. והמשוב שקיבלנו מהקהילה היה חיובי מאוד. בנוסף, בעזרת מאמץ נרחב לשינוי הארכיטקטורה שנקרא RenderingNG, הפכנו את חלק מהתכונות האלה ליעילות יותר. המפתחים שמחים שאנחנו עובדים על התכונות האלה, שהם מבקשים כבר שנים, ושהן יושקו לבסוף בדפדפנים שונים.
ניקול: אפשר ממש לחוש את ההתלהבות בקרב הקהילה. אפשר לראות אותו ב-Twitter. :)
העבודה עם הסביבה העסקית הוכיחה את עצמה כקריטית לכל הצלחה שהשגנו ביצירת סביבה קלה יותר למפתחים. ברור לי שהצוות שלך השקיע שם הרבה עבודה. רוצה לשתף פרטים?
ניקול: קודם כול, אני תמיד מתפעלת מהפרויקטים שמפתחים יוצרים באינטרנט. מספרייה קטנה ועד למסגרות מלאות, מפתחים יוצרים דברים מדהימים. זו קהילה נהדרת של יוצרים. בנוסף, אנחנו מבצעים ב-Chrome כמה פעולות כדי לחזק את הקשר לפרויקטים האלה.
לדוגמה, לפני כמה שנים התחלנו לעבוד עם מסגרות JavaScript כמו React ו-Angular. וגם מסגרות מטא – למשל Next, Nuxt ו-Gatsby. בשנה שעברה התחלנו לעשות את אותו הדבר עם כלים ותבניות של ממשק משתמש, כמו Sass, Bootstrap ו-Material. אני מקווה שבשנה הקרובה נוכל לשתף פעולה עם GreenSock ועם כלים אחרים שיקלו על החיים של המפתחים. ראיתי את קאסי אוונס מ-GreenSock מדבר בכנס Smashing, והוא עורר בי התלהבות רבה מהעבודה עם אנשים בתחום האנימציה.
אז איפה אנחנו רואים את ההזדמנות הגדולה ביותר לסביבת ה-UI של האינטרנט?
Una: מבחינת הזדמנויות גדולות, נראה שאנחנו רק מתחילים להבין מה אפשר לעשות עם חוויות אינטרנט בהתאמה אישית. ממשקי API חדשים כמו שאילתות מאגר ותכונות המדיה של העדפות המשתמש ב-CSS מגדירים מחדש את האופן שבו מפתחים מתייחסים לעיצוב רספונסיבי. אני גם מתרגש מהחוויות של עיצוב שיתופי שמאפשרות למפתחים ולמעצבים לעבוד בשיתוף פעולה עם המשתמשים שמבקרים באתרים שלהם.
Nicole, מה השלב הבא בתוכנית העבודה של הצוות שלך?
ניקול: לא כל הניתוחים הופכים למשהו שאפשר לשלוח, אבל יש הרבה דברים שאני מתלהבת מהם כרגע:
Una התייחסה לעניין הראשון – אנחנו מאפשרים עיצוב רספונסיבי שמבוסס על רכיבים. הוא כולל כלים לעיצוב מערכות צבעים, כדי שהמעצבים יוכלו להגיב להעדפות המשתמשים, כמו מצב כהה. לדוגמה, מרחב הצבעים OKLCH שומר על עקביות הבהירות בין הגוונים. מעצבים יכולים לעבור מבחירת צבעים לעיצוב של קשרים בין צבעים, בלי להגיע לצבעים מעורבים ומעורפלים.
אנחנו עובדים גם על חלק מממשקי ה-API הנפוצים ביותר, כמו שאילתות מאגר, שכבות מדורגות, בורר הורה (:has), סגנונות ברמת ההיקף ועיצוב בתצוגת עץ. המפתחים זקוקים לרכיבים האלה כדי ליצור מערכות עיצוב גמישות עם רכיבים לשימוש חוזר.
גלילה של אנימציות מקושרות היא תחום נוסף שכיף לשחק בו. הדגמה של Steve Gardner ממש מוצלח. הוא כולל גלילה חלקה במיוחד ואנימציות מטוסים מגניבות שמופעלות בזמן הגלילה. יצירת מודעות כאלה היא מהנה, אבל יכול להיות קשה לעשות זאת בצורה נכונה, במיוחד אם רוצים שהן יהיו נגישות. לכן אנחנו עורכים עכשיו בדיקות משתמשים כדי לבדוק את הנגישות של התכונה.
מה שמרגש אותי הכי הרבה הוא אמצעי הבקרה המובנים בממשק המשתמש של האינטרנט. מפתחים יוצרים שוב ושוב את אותו סט כרטיסיות, לדעתי הדפדפן יכול לעזור. ב-Open UI אנחנו עובדים על רכיבים כמו תפריט בחירה, חלון קופץ, תווית עזרה, כרטיסיות, ניווט, רכיב מתקפל ומתג החלפת מצב. אנחנו בודקים איך אפשר לשלב נגישות ברכיבים הבסיסיים האלה של הדפדפן, כדי שהאינטרנט יוכל להיות נגיש כברירת מחדל עם הזמן. כך המפתחים יכולים להתמקד בבעיות מורכבות יותר, בעוד שהדפדפן יכול לתמוך בבעיות בסיסיות כמו לחיצה על Tab כדי לעבור לכרטיסייה. כנראה שצריך לכתוב על זה פוסט נפרד, אז אשאיר את זה כאן בינתיים.
לבסוף, נמשיך להשקיע ביכולת הפעולה ההדדית בין הדפדפנים. נהנינו לעבוד עם הצוותים של WebKit ו-Gecko כדי לשמור על עקביות בחוויית המפתחים. המפתחים הביעו בבירור את הרצון שלהם בכך.
אה, ואם עדיין לא בדקתם, Shared Element Transitions API של צוות Seamless Web ישנה את האופן שבו אנשים מעצבים לאינטרנט. כל המעברים הקטנים והעדינים שמאפשרים למעצבים לכוונן את העיצובים שלהם במרחב הפיזי לא רק יהיו אפשריים, אלא גם קלים. קיימת הדגמה נהדרת של ג'ייק ארקדיל (Jake Archibald).
אם הסטנדרטים יתקבלו, יכול להיות שנבחן גם את האפשרות של קצב אנכי השנה. אנחנו יכולים לבנות על גבי LayoutNG, שמאפשר לנו להשתמש בהרבה תכונות.
תודה לשניכם. אני בטוח שכל הקהילה, כמונו, מתרגשת לראות את הקצב המחודש של השיפורים והתכונות שמגיעים לממשק המשתמש באינטרנט. עדיין יש הרבה מה ללמוד, אז איפה לדעתך כדאי להתחיל את המסע?
Una: בסשן מה חדש בפלטפורמת האינטרנט ב-I/O נסקור את עיקרי התכונות שאנחנו משיקים השנה. אדם ארג'יל (Adam Argyle) כתב גם מאמר מצוין על כל דפי הנחיתה החדשים והמתקרבים של CSS. כרגע, מומלץ להתמקד בגרסאות יציבות ולהיות מודעים לעבודות האחרות שבדרך. הסדרה המעולה שלך חדשות פלטפורמת האינטרנט היא מקום מצוין לקבלת מידע בנושא. ההרשמה לניוזלטר של web.dev תאפשר לכם לקבל את התוכן הזה גם לתיבת הדואר הנכנס שלכם. למפתחים שרוצים להצטרף ולעזור בכל זה, הצטרפות ל-Open UI היא אחת הדרכים הטובות ביותר לתמוך בעבודה הזו.
עדכונים עיקריים שיושקו בקרוב
אנחנו ממשיכים במסורת שלנו ומעדכנים אתכם על שינוי שעומד להתרחש בקרוב, שחשוב לזכור כשאתם יוצרים את חוויות המשתמש באינטרנט.
הגבלת max-age של קובצי cookie ל-400 ימים
- העדכון: כשקובצי cookie מוגדרים עם מאפיין
Expires/Max-Ageמפורש, הערך יוגבל עכשיו ל-400 יום לכל היותר בעתיד. בעבר לא הייתה הגבלה, ותוקף קובצי ה-cookie היה יכול לפוג אלפי שנים בעתיד. המטרה של המגבלה הזו היא לשמור על איזון בין דפוסי שימוש נפוצים לבין שמירה על פרטיות המשתמשים. בכל אתר שבו מתבצעים ביקורים בתדירות גבוהה יותר מכל 400 יום, אפשר לרענן את קובצי ה-cookie כדי להבטיח את המשכיות השירות. המשתמשים יכולים להיות בטוחים שקובצי ה-cookie לא יישארו בדפדפן שלהם במשך אלפי שנים בלי שייעשה בהם שימוש. - לוח זמנים משוער: הגרסה תשוחרר ב-Chrome 104 (גרסה יציבה ב-2 באוגוסט 2022).
- קריאה לפעולה למפתחים: יכול להיות שמפתחים יצטרכו לרענן קובצי cookie באופן יזום בתדירות גבוהה יותר מבעבר כשמשתמשים ייכנסו לאתרים שלהם. אחרת, יכול להיות שהמשתמשים יוצאו מהחשבון 400 יום אחרי שהקובץ הוגדר לראשונה.
אני מקווה שנהנית מהמהדורה הזו של Chrome Dev Insider. אם פספסתם, הנה הראשון. אנחנו מתכננים להוסיף עוד תכונות ברבעון הבא.
עד אז, נשמח לשמוע מה דעתך על המהדורה הזו של Chrome Dev Insider ומה נוכל לעשות כדי לשפר אותה.
מה חשבתם על המהדורה הזו של Chrome Dev Insider? נשמח לקבל ממך משוב.