ברוכים הבאים למהדורה השנייה של Chrome Dev Insider, שבה אנחנו משתפים עדכונים לגבי מה שחדש ומעניין בקהילה וכאן ב-Chrome. זהו פרק חדש של סיפורים מבפנים על הגישה שלנו לעבודה שלנו, ומבט חטוף על חלק מהעדכונים החשובים ביותר שכדאי לשים לב אליהם.
שמי רייצ'ל אנדרו, מנהלת התוכן של 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, שכוללת תכונות מעניינות כמו שאילתות של קונטיינרים, רשת משנה ובודק Flexbox. המהדורות האחרונות של Firefox ו-Chrome כללו כמה תכונות ותיקונים מלהיבים — אני סוקר מדי חודש את הדברים החשובים בדפדפנים יציבים ובדפדפנים בגרסת בטא, בסדרת הפוסטים החדשה שלי בפלטפורמת האינטרנט.
סקופ פנימי: תמיכה במפתחים של ממשקי CSS וממשקי משתמש
שנת 2022 הייתה שנה מלהיבה בתכונות של שירותי CSS, ולכן חשבנו שזה זמן מתאים לקחת אתכם אל מאחורי הקלעים. נפגשתי עם Una Kravets, מנהלת DevRel של ממשק המשתמש באינטרנט ושל Devtools, ועם ניקול סאליבן, מנהלת המוצר שלנו לממשקי אינטרנט שמתמקדים בממשקי API של CSS ושל HTML, כדי לדבר על המסע של Chrome לתמיכה במפתחים של ממשק משתמש.
נתחיל עם שניכם. נשמח לשמוע קצת על עצמכם?
ניקול: אני מנהלת המוצר של ממשק המשתמש באינטרנט ב-Chrome. אני מתמקד במיוחד בממשקי API חדשים של CSS ושל HTML ובמפתחים ומעצבים שבונים ממשק משתמש. זה תחום מרגש, עם כמה ממשקי API חשובים שיוצאים כמו Container queries (שאילתות על קונטיינרים) Scope (אנחנו מקווים) וקצב אנכי (בתקווה).
Una: אני מובילה את צוותי הפיתוח והפיתוח של ממשק המשתמש באינטרנט. אנחנו מתמקדים בתמיכה במהנדסים של ממשק המשתמש בפלטפורמת האינטרנט ומוודאים שיש להם את הכלים הדרושים כדי להצליח. הכלים האלה כוללים ממשקי API של CSS ורכיבי HTML, וגם תכונות של כלי פיתוח, שמאפשרות לראות משוב ושינויים פעילים.
התמיכה של Chrome במפתחי ממשק משתמש הלכה וגדלה בשנים האחרונות. למה לדעתך לקח כל כך הרבה זמן להגיע לכאן? מה היו האתגרים הגדולים ביותר?
אנה: היינו צריכים לעשות משהו כדי להדגים עד כמה העבודה הזו הייתה חשובה ולמה היא צריכה לקבל עדיפות. התחלנו עם סקר MDN DNA בשנת 2019, שזיהה את ממשק המשתמש כחלק מהבעיות העיקריות בפלטפורמה. מאז, המשכנו להשתמש בנתונים כמדריך שלנו ל-MDN ולסקרי שביעות הרצון הפנימיים שלנו מהמפתחים. התוצאה של כל השינויים האלה היא שהצלחנו להבין יותר מנהיגות בתחום ולתעדף את מאמצי הפיתוח סביב כמה מתכונות הפיתוח המבוקשות ביותר בתחום ממשק המשתמש. היוזמות האלה מתמקדות גם ביוזמות כמו Compat 2021 ו-Interop 2022.
ניקול: בנוסף לקבלת עזרה מההנהלה, היינו צריכים גם למצוא את הדרך הנכונה להעביר את ממשקי ה-API האלה למפתחים. כשהצטרפתי ל-Chrome בפעם הראשונה, סידרתי את הבעיה בפרויקט בשם Layered APIs [ממשקי API בשכבות] (או בקיצור LAPIs). המטרה של ממשקי LAPI היא לספק למפתחים חוויה של שילוב רכיבים. אני עדיין חושב שזו הייתה תוצאה נהדרת לצלם אותה, אבל עשינו הרבה טעויות! התמקדנו קודם בהתראות לגבי השקה (Toast) וברשימה וירטואלית. כמעט בלתי אפשרי ליצור טוסטים, ורשימה וירטואלית היא אחד מהרכיבים שקשה ביותר לבצע. הכוונות שלנו היו טובות אבל לא עזרה למפתחים, אז סגרנו את הפרויקט. קשה ללמוד את הדרך הקשה, אבל כל טעות מזינה את התחייה של CSS ו-HTML המתרחשת כיום.
בואו נדבר קצת יותר על ממשקי LAPI. מה קרה שם?
ניקול: עבור ממשקי LAPI, ידענו שהאינטרנט זקוק לחוויית פיתוח של רכיבים בודדים שקרובה יותר לבניית ממשק משתמש מקורי. היה ברור שההמצאה מחדש של הגלגל מעכבת את המפתחים. לא הצלחתי לספור את מספר הכרטיסיות שרכשתי בקריירה שלי! עם זאת, ניסינו לפתור את הבעיה על ידי שליחת JavaScript באמצעות הדפדפן, שהייתה קשה מאוד. אף אחד לא שלח לפני כן JavaScript בדפדפן, ולא היה ברור איך הוא אמור לתקשר עם קוד C++ שמפעיל את מנוע העיבוד של הדפדפן. הקשבנו לספקי דפדפנים אחרים (תודה, Mozilla!) וחזרנו לגישה הזו כך שהצלחנו למצוא משהו הרבה יותר טוב עם Open UI. כשאנחנו מסתמכים על HTML ו-CSS, אנחנו מקבלים פתרונות גמישים והצהרתיים. מאחר שזו שאלה מוצהרת, אנחנו יכולים לשלב את הטמעת הנגישוּת בקלות בעזרת JavaScript. אני מאוד מתרגשת לקראת השלב הזה. אנחנו עובדים על תמיכה בתפריט בחירה, בחלון קופץ, בהסבר קצר, ניווט, אקורדיון, כרטיסיות, קרוסלה והחלפת מצב שהם למעשה תבניות עיצוב חיוניות של ממשק המשתמש.
אז למדנו הרבה. ואני יודעת שהיו יוזמות נוספות בתחום הזה, כמו CSS Houdini. מה הסיפור?
אונה: כן CSS Houdini הוא מקום נוסף שבו למדנו מהקהילה. יש המון תכונות שימושיות של Houdini, אבל הרבה מהן היו ברמה נמוכה מדי מכדי לקבל תמיכה נרחבת יותר ולקבל תמיכה רחבה יותר. הבנו שהטמעה של ממשקי API ברמה נמוכה לא בהכרח הפחיתה את הקושי למפתחים. במקום זאת, התמקדות בפתרונות ובצרכים ברמה גבוהה יותר עזרה לגייס תמיכה בדפדפנים שונים ואת יעדי הכניסה הנדרשים כדי להניע את המצב בתחום המערכת האקולוגית. אנחנו עוקבים כרגע אחרי ההתקדמות בכתובת https://ishoudinireadyyet.com/.
אם כבר מדברים על תמיכה בדפדפנים שונים, נראה שיוזמות כמו Interop 2022 וממשק משתמש פתוח מניבות תוצאות חיוביות ומשמעותיות לקהילה. מה שמעת ממפתחים?
אונה: אחת הבעיות המרכזיות שאנחנו שומעים ממפתחים היא "איך לעצב את אותו הדבר בכל הדפדפנים". כדי להתמודד עם האתגרים האלה עבדנו עם ספקי דפדפנים אחרים כדי לתעדף ולספק להם גישה לכמה מהתכונות המבוקשות ביותר למפתחים. והמשוב שקיבלנו מהקהילה היה חיובי ביותר. נוסף על כך, הודות למאמץ גדול של ארכיטקטורה מחדש בשם RenderingNG, אפשר להגיע לחלק מהתכונות האלה ברמה גבוהה יותר של ביצועים. המפתחים מתרגשים מכך שהתכונות האלה, שצפויות זמן רב, שכבר ביקשו במשך שנים, סוף סוף עובדים עליהן ומפנות את האתר לדפדפן אחר.
ניקול: אפשר ממש לראות את ההתרגשות בקהילה. אפשר לראות אותו ב-Twitter. :)
העבודה עם הסביבה העסקית התבררה כקריטית להצלחה שלנו, בהקלת חייהם של המפתחים. ברור לי שהצוות שלך עבד הרבה בשביל זה. רוצה לשתף כמה פרטים?
ניקול: ראשית, אני מתרגשת כל הזמן מהפרויקטים שמפתחים בונים באינטרנט. המפתחים בונים דברים מדהימים, מהספרייה הקטנה ביותר ועד למסגרות מלאות. זוהי קהילה מדהימה של יוצרים. בנוסף, Chrome מבצע כמה צעדים כדי לשפר את החיבור לפרויקטים האלה.
למשל, לפני כמה שנים התחלנו לעבוד עם מסגרות JavaScript כמו React ו-Angular. ומטא-מסגרות - לדוגמה, Next, Nuxt ו-Gatsby. בשנה שעברה התחלנו לעשות את אותו הדבר עם כלים ומסגרות בממשק המשתמש כמו Sass, Bootstrap ו-Material. אני מקווה שבשנה הבאה נוכל לשתף פעולה עם GreenSock וכלים אחרים שמקלים על חיי המפתחים. בדיוק ראיתי את קייסי אוואנס מ-GreenSock נואם בכנס Smashing Conference ועורר אותי התלהבות מהעבודה עם אנשים בתחום האנימציה.
אז איפה אנחנו רואים את ההזדמנות הגדולה ביותר לסביבה העסקית של ממשק המשתמש באינטרנט?
יונית: במונחים של הזדמנויות גדולות, אני מרגישה שאנחנו פשוט מוסיפים את מה שאפשר להתאים אישית באינטרנט. ממשקי API חדשים, כמו שאילתות קונטיינר ותכונות המדיה להעדפת משתמש ב-CSS, מגדירים מחדש את האופן שבו מפתחים רואים עיצוב רספונסיבי. אני גם נרגשת מחוויות העיצוב השיתופיות שמאפשרות למפתחים ולמעצבים לעבוד יחד עם המשתמשים שמבקרים באתרים שלהם.
וניקול, מה הדבר הבא בתוכנית של הצוות שלך?
ניקול: לא כל הניתוחים הופכים למשהו שאפשר לשלוח, אבל יש הרבה דברים שמלהיבים אותי עכשיו:
אך לא טיפלנו בעניין הראשון, אנחנו מאפשרים עיצוב רספונסיבי המבוסס על רכיבים. היא כוללת כלים לעיצוב מערכות צבע, כדי שהמעצבים יוכלו להגיב להעדפות המשתמשים כמו מצב כהה. לדוגמה, מרחב הצבעים OKLCH שומר על עקביות הבהירות בכל הגוונים. המעצבים יכולים לעבור מבחירת צבעים לעיצוב קשרים בין צבעים, מבלי להגיע ללוחות צבעים עבותים.
בנוסף, אנחנו עובדים על כמה מממשקי ה-API המבוקשים ביותר, כמו שאילתות קונטיינר, שכבות של מדורג, בורר הורה (:has), סגנונות בהיקף וקינון. המפתחים זקוקים להם כדי שיוכלו לבנות מערכות בעיצוב גמיש שמלאות ברכיבים לשימוש חוזר.
עוד מקום כיפי לגלילה עם אנימציות מקושרות. אני ממש אוהב את ההדגמה של סטיב גארדנר. יש לו גלילה חלקה וחמאה ואנימציות מטוס מגניבות שמופעלות בזמן הגלילה. אמנם אלה דברים כיפיים, אבל לפעמים קשה לתקן אותם, במיוחד כשצריך להביא בחשבון את הנגישות. לכן אנחנו מבצעים עכשיו בדיקת משתמשים לנגישות בתכונה הזו.
מה שהכי מעניין אותי באופן אישי הוא פקדים מובנים בממשק המשתמש באינטרנט. מפתחים ממשיכים לפתח את אותה קבוצת כרטיסיות שוב ושוב, אני חושב שהדפדפן יכול לעזור. בפתיחת ממשק המשתמש אנחנו עובדים על רכיבים כמו תפריט בחירה, חלון קופץ, הסבר קצר, כרטיסיות, ניווט, אקורדיון והחלפת מצב. אנחנו בוחנים איך לשפר נגישות בפרימיטיבים של הדפדפן כך שהאינטרנט יוכל, עם הזמן, להפוך לנגיש כברירת מחדל. לאחר מכן המפתחים יכולים להתמקד בבעיות המורכבות והמפורטות יותר, בעוד שדפדפנים יכולים לתמוך ביסודות, כמו הכרטיסייה 'איך עושים את הכרטיסיות'. נראה שיש לפרסם פוסט משלו, אז אעצור כאן!
לבסוף, נמשיך להשקיע בשיתוף פעולה בין דפדפנים. נהניתי לעבוד עם חברים ב-WebKit וב-Gecko כדי ליצור עקביות לחוויית המפתחים. שמענו את המפתחים בבירור – הם רוצים את זה!
אה, ואם עדיין לא עשיתם זאת, ה-Shared Element Transitions API של צוות האינטרנט בראש שקט עומד לשנות את האופן שבו אנשים מעצבים את האינטרנט. לא רק המעברים הקטנים והקלים האלה מאפשרים למעצבים לכוון את העיצובים שלהם במרחב הפיזי, אלא גם קלים. לג'ייק ארצ'יבלד יש הדגמה נהדרת.
אם הסטנדרטים מתאימים, אולי אפילו נבדוק קצב אנכי השנה! אנחנו מסוגלים להתבסס על LayoutNG, שמאפשרת גישה להמון תכונות.
תודה לשניכם. אין לי ספק שכל הקהילה, כמונו, נרגשת לראות את הקצב המחודש של שיפורים ותכונות חדשים שמגיעים לעולם ממשק המשתמש של האינטרנט. יש עדיין הרבה עבודה, אז איפה היית רוצה להתחיל את המסע?
Una: הסשן שלנו בנושא מה חדש בפלטפורמת האינטרנט בכנס I/O מציג את הדגשים העיקריים של רבות מהתכונות שנחנכו השנה. אדם ארגייל כתב גם מאמר מצוין על כל יעדי ה-CSS החדשים והעתידיים. באופן קבוע, אני אתמקד כרגע בגרסאות יציבות ורק אצטרך לשים לב לעבודות נוספות שעולות בקרוב. הסדרה המדהימה שלך בנושא חדשים בפלטפורמת האינטרנט היא סדרה נהדרת שכדאי לעקוב אחריה. הרשמה לניוזלטר של web.dev גם תעביר את התוכן הזה לתיבת הדואר הנכנס של המפתחים. בנוסף, מפתחים שרוצים להיות מעורבים ולעזור בכל זאת, הצטרפות לממשק המשתמש הפתוח היא אחת הדרכים הטובות ביותר לתמוך בעבודה הזו.
עדכונים עיקריים קרובים
אנחנו ממשיכים לפעול לפי המסורת שלנו, כדי להודיע לכם על שינוי שצפוי לחול עליכם בזמן שאתם יוצרים את חוויות הגלישה שלכם.
הגבלת הגיל המקסימלי לקובצי cookie ל-400 ימים
- העדכון: כשקובצי cookie מוגדרים עם מאפיין
Expires/Max-Ageמפורש, הערך יוגבל עכשיו ל-400 ימים בעתיד. בעבר לא הייתה הגבלה וקובצי cookie היו יכולים לפוג כבר אלפי שנים בעתיד. המגבלה הזו מיועדת למצוא איזון בין דפוסי שימוש נפוצים לבין שמירה על פרטיות המשתמשים. אתרים שנכנסים אליהם בתדירות גבוהה יותר מ-400 יום יכולים לרענן קובצי cookie כדי להבטיח את המשכיות השירות, והמשתמשים יכולים להיות בטוחים שקובצי cookie לא יישארו בדפדפן שלהם למשך אלפי שנים ללא שימוש. - לוח הזמנים המשוער: משלוח ב-Chrome 104 (יציב ב-2 באוגוסט 2022).
- קריאה לפעולה למפתחים: יכול להיות שמפתחים יצטרכו לרענן באופן יזום קובצי cookie בתדירות גבוהה יותר מאשר בעבר כשמשתמשים נכנסים לאתרים שלהם. אחרת, המשתמשים עשויים להתנתק 400 יום לאחר שקובץ ה-cookie הוגדר לראשונה.
אני מקווה שנהניתם לקרוא את המהדורה הזו של Chrome Dev Insider. אם פספסת, הנה הראשון. נשמח לספק לכם יותר ברבעון הבא.
בינתיים, נשמח לשמוע מה דעתכם על המהדורה הזו של Chrome Dev Insider, ומה נוכל לעשות כדי לשפר אותה.
מה דעתך על המהדורה הזו של Chrome Dev Insider? נשמח לקבל משוב.