ברוכים הבאים למהדורה השנייה של 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 Beta שכוללת תכונות מעניינות כמו Container Queries, subgrid וכלי לבדיקת flexbox. בגרסאות האחרונות של Firefox ו-Chrome יש מספר תיקונים ותכונות מעניינות. בכל חודש אני מפרסם את הדברים העיקריים בדפדפנים יציבים ובדפדפני בטא בסדרת הפוסטים new to the web platform.
מידע בלעדי: תמיכה במפתחי CSS וממשקי משתמש
שנת 2022 הייתה שנה מרתקת מבחינת תכונות CSS, ולכן חשבנו שזו הזדמנות טובה להציג לכם את מה שקורה מאחורי הקלעים. ישבתי לשיחה עם אונה קראבץ, מנהלת DevRel ל-Web UI ולכלי פיתוח, ועם ניקול סאליבן, מנהלת המוצר שלנו ל-Web UI שמתמקדת ב-API של CSS ו-HTML, כדי לדבר על הדרך שעבר Chrome עד לתמיכה במפתחי ממשקי משתמש.
נתחיל עם שניכם. נשמח לקבל עוד פרטים על עצמך.
ניקול: אני מנהלת המוצר של ממשק המשתמש באינטרנט ב-Chrome. ההתמקדות שלי היא בממשקי API חדשים של CSS ו-HTML, ובמפתחים ומעצבים שיוצרים ממשקי משתמש. זה תחום מרתק עם כמה ממשקי API חשובים מאוד שיוצאים לשוק, כמו Container Queries, Scope ו-(hopefully!) vertical rhythm.
אונה: אני מובילה את צוותי DevRel של ממשק המשתמש באינטרנט וכלי הפיתוח. אנחנו מתמקדים בתמיכה במהנדסי ממשקי משתמש בפלטפורמת האינטרנט, ומוודאים שיש להם את הכלים שהם צריכים כדי להצליח. זה כולל ממשקי API של CSS ורכיבי HTML, וגם תכונות של כלי פיתוח שמאפשרות לראות שינויים פעילים ומשוב.
התמיכה של Chrome במפתחי ממשקי משתמש התרחבה בשנים האחרונות. למה לדעתך לקח כל כך הרבה זמן להגיע לכאן? מה היו האתגרים הכי גדולים?
אונה: היינו צריכים להסביר למה העבודה הזו חשובה כל כך, ולמה צריך לתת לה עדיפות. התחלנו עם הסקר של MDN DNA בשנת 2019, שזיהה את ממשק המשתמש כאחד מנקודות הכאב העיקריות בפלטפורמה. מאז, אנחנו ממשיכים להשתמש בנתונים כדי להנחות אותנו ב-MDN ובסקרים הפנימיים שלנו בנושא שביעות רצון המפתחים. התוצאה של כל זה היא שהצלחנו לקבל תמיכה רחבה יותר מההנהלה, והצלחנו לתת עדיפות לעבודת הפיתוח סביב חלק מהתכונות המבוקשות ביותר למפתחים בתחום ממשק המשתמש, שגם מהוות את רוב המיקוד של יוזמות כמו Compat 2021 ו-Interop 2022.
ניקול: בנוסף להשגת הסכמה מההנהלה, היינו צריכים למצוא את הדרך הנכונה להעביר את ממשקי ה-API האלה למפתחים. כשנכנסתי לצוות של Chrome, עשיתי טעות בפרויקט שנקרא Layered APIs (או LAPIs בקיצור). מטרת ה-LAPI הייתה לספק למפתחים חוויה של רכיב שניתן להוסיף בקלות. אני עדיין חושב שזו הייתה תוצאה מצוינת לשאוף אליה, אבל עשינו הרבה טעויות! התמקדנו קודם בהודעות קופצות וברשימה וירטואלית. כמעט בלתי אפשרי להפוך הודעות טוסט לנגישות, ורשימה וירטואלית היא אחד הרכיבים שהכי קשה להגדיר בצורה נכונה. הכוונה שלנו הייתה טובה, אבל הפרויקט לא עזר למפתחים, אז סגרנו אותו. קשה ללמוד בדרך הקשה, אבל כל טעות תורמת לרנסנס של CSS ו-HTML שמתרחש עכשיו.
מידע נוסף על ממשקי LAPIs מה קרה שם?
ניקול: לגבי ממשקי ה-API של LAPIs, ידענו שצריך לספק למפתחים חוויה של רכיב מוכן להטמעה באינטרנט, שתהיה דומה יותר ליצירת ממשק משתמש מקורי. היה ברור שהצורך להמציא את הגלגל מחדש מעכב את המפתחים. אי אפשר לספור את מספר הכרטיסיות שיצרתי במהלך הקריירה שלי! עם זאת, ניסינו לפתור את הבעיה הזו על ידי שליחת JavaScript עם הדפדפן, וזה היה קשה מאוד. אף אחד לא שלח JavaScript בדפדפן לפני כן, ולא היה ברור איך הוא צריך ליצור אינטראקציה עם קוד C++ שמפעיל את מנוע העיבוד של הדפדפן. הקשבנו לספקי דפדפנים אחרים (תודה, Mozilla!) וזנחנו את הגישה הזו. כך הצלחנו למצוא פתרון הרבה יותר טוב עם Open UI. השימוש ב-HTML וב-CSS מאפשר לנו ליצור פתרונות גמישים ודקלרטיביים. הוא דקלרטיבי, ולכן אפשר לשלב בו נגישות בצורה שלא הייתה קלה כל כך עם JavaScript. אני מאוד מתרגש לקראת מה שצפוי. אנחנו עובדים על תמיכה ב-selectmenu, popup, tooltip, nav, accordion, tabs, carousel ו-toggle, שהם דפוסי עיצוב ממשק משתמש חשובים מאוד.
למדנו הרבה. ידוע לי שהיו יוזמות אחרות בתחום הזה, כמו CSS Houdini. מה הסיפור?
אונה: כן, CSS Houdini הוא עוד מקום שבו למדנו מהקהילה. יש הרבה תכונות שימושיות ב-Houdini, אבל רבות מהן היו ברמה נמוכה מדי ולא זכו לאימוץ ולתמיכה נרחבים. הבנו שהטמעה של ממשקי API ברמה נמוכה לא בהכרח מפחיתה את החיכוך עבור מפתחים. במקום זאת, התמקדות בפתרונות ובצרכים ברמה גבוהה יותר עזרה לנו להשיג תמיכה בדפדפנים שונים ולבצע את הנחיתות הנדרשות כדי להשפיע על הסביבה העסקית. אנחנו עוקבים אחרי ההתקדמות בכתובת https://ishoudinireadyyet.com/.
אם כבר מדברים על תמיכה בדפדפנים שונים, נראה שיוזמות כמו Interop 2022 ו-Open UI מניבות תוצאות חיוביות משמעותיות לקהילה. מה שומעים ממפתחים?
אונה: אחת הבעיות העיקריות שמפתחים מתלוננים עליהן היא ש "העיצוב לא נראה אותו דבר בכל הדפדפנים". כדי לפתור את הבעיה הזו, אנחנו עובדים עם ספקי דפדפנים אחרים כדי לתת עדיפות לכמה מהתכונות למפתחים שהכי מבוקשות ולהשיק אותן. המשוב שקיבלנו מהקהילה היה חיובי ברובו. בנוסף, באמצעות מאמץ גדול של שינוי הארכיטקטורה שנקרא RenderingNG, אפשר להטמיע חלק מהתכונות האלה בצורה יעילה הרבה יותר. המפתחים שמחים שאנחנו סוף סוף עובדים על התכונות האלה שהם חיכו להן במשך שנים, והן זמינות עכשיו בדפדפנים שונים.
ניקול: אפשר ממש להרגיש את ההתרגשות בקהילה. אפשר לראות אותו ב-Twitter. :)
העבודה עם המערכת האקולוגית הוכיחה את עצמה כקריטית לכל הצלחה שהשגנו בשיפור חייהם של המפתחים. אני יודע שהצוות שלך עבד שם קשה. רוצה לשתף כמה פרטים?
ניקול: קודם כל, אני כל הזמן מתפעלת מהפרויקטים שמפתחים יוצרים באינטרנט. ממסגרות קטנות ועד למסגרות מלאות, מפתחים בונים דברים מדהימים. זו קהילה נהדרת של יוצרים. בנוסף, אנחנו מבצעים ב-Chrome הרבה פעולות כדי לשפר את הקישור לפרויקטים האלה.
לדוגמה, לפני כמה שנים התחלנו לעבוד עם מסגרות JavaScript כמו React ו-Angular. ומסגרות-על – לדוגמה Next, Nuxt ו-Gatsby. בשנה שעברה התחלנו לעשות את אותו הדבר עם כלים ומסגרות של ממשקי משתמש כמו Sass, Bootstrap ו-Material. אני מקווה שבשנה הקרובה נוכל לשתף פעולה עם GreenSock ועם כלים אחרים שמקלים על חיי המפתחים. הרגע ראיתי את קאסי אוונס מ-GreenSock מדברת בכנס Smashing, וזה גרם לי להתרגש מאוד מהאפשרות לעבוד עם אנשים בתחום האנימציה.
אז איפה אנחנו רואים את ההזדמנות הכי גדולה לסביבה העסקית של ממשקי משתמש באינטרנט?
אונה: כשמדובר בהזדמנויות גדולות, נראה לי שאנחנו רק מתחילים להבין מה אפשר לעשות כדי להתאים אישית את חוויית המשתמש באתרים. ממשקי API חדשים כמו שאילתות מאגר ותכונות המדיה של העדפות המשתמש ב-CSS מגדירים מחדש את האופן שבו מפתחים תופסים עיצוב רספונסיבי. בנוסף, אני מתרגש מהחוויות העיצוביות השיתופיות שמאפשרות למפתחים ולמעצבים לעבוד יחד עם המשתמשים שמבקרים באתרים שלהם.
ניקול, מה השלב הבא בתוכנית הפיתוח של הצוות שלך?
ניקול: לא כל ניתוח נתונים הופך למוצר שאפשר לשווק, אבל יש הרבה דברים שאני מאוד מתלהבת מהם כרגע:
אונה הזכירה את הדבר הראשון, אנחנו מאפשרים עיצוב רספונסיבי שמבוסס על רכיבים. הוא כולל כלים לעיצוב מערכות צבעים, כדי שמעצבים יוכלו להתאים את העיצוב להעדפות המשתמשים, כמו מצב כהה. לדוגמה, במרחב הצבעים OKLCH הבהירות נשארת עקבית בכל הגוונים. מעצבים יכולים לעבור מבחירת צבעים לעיצוב קשרים בין צבעים, בלי שהפלטות ייראו עכורות.
אנחנו עובדים גם על חלק מממשקי ה-API המבוקשים ביותר, כמו שאילתות של מאגרי תגים, שכבות מדורגות, סלקטור של רכיב אב (:has), סגנונות בהיקף וקינון. המפתחים צריכים את זה כדי לבנות מערכות עיצוב גמישות שמלאות ברכיבים לשימוש חוזר.
אנימציות מקושרות בגלילה הן תחום נוסף שכיף להתנסות בו. אהבתי מאוד את ההדגמה של סטיב גרדנר. הגלילה חלקה מאוד ויש אנימציות מגניבות של מטוסים שמופעלות כשגוללים. האפקטים האלה מהנים, אבל יכול להיות קשה להשתמש בהם בצורה נכונה, במיוחד כשחושבים על נגישות. לכן אנחנו עורכים עכשיו בדיקות משתמשים כדי לבדוק את הנגישות של התכונה.
הדבר שהכי מרגש אותי באופן אישי הוא אמצעי הבקרה המובנים בממשק המשתמש באינטרנט. מפתחים ממשיכים לבנות את אותו סט כרטיסיות שוב ושוב, ואני חושב שהדפדפן יכול לעזור. ב-Open UI אנחנו עובדים על רכיבים כמו selectmenu, popup, tooltip, tabs, nav, accordion ו-toggle. אנחנו בודקים איך אפשר לשלב נגישות ברכיבי הבסיס האלה של הדפדפן, כדי שהאינטרנט יהיה נגיש כברירת מחדל לאורך זמן. כך המפתחים יכולים להתמקד בבעיות מורכבות יותר, בעוד שהדפדפן תומך בפעולות בסיסיות כמו מעבר בין כרטיסיות. כנראה שצריך פוסט נפרד בשביל זה, אז אסיים כאן בינתיים.
לבסוף, נמשיך להשקיע בתאימות בין דפדפנים. העבודה עם אנשי WebKit ו-Gecko הייתה נהדרת, והיא אפשרה לנו ליצור חוויית פיתוח עקבית. שמענו מהמפתחים שהם רוצים את זה, והבנו את זה היטב.
ואם עוד לא יצא לכם, כדאי לכם להכיר את Shared Element Transitions API של צוות Seamless Web. הוא הולך לשנות את הדרך שבה אנשים מעצבים אתרים. כל המעברים הקטנים והעדינים האלה, שמאפשרים למעצבים למקם את העיצובים שלהם במרחב הפיזי, יהיו לא רק אפשריים אלא גם קלים. יש הדגמה מצוינת של Jake Archibald.
אם הכל ילך כשורה, יכול להיות שאפילו נבדוק את הקצב האנכי השנה! אנחנו יכולים להשתמש ב-LayoutNG כדי להוסיף הרבה תכונות.
תודה לשניכם. אנחנו בטוחים שכל הקהילה, כמונו, מתרגשת לראות את קצב השיפורים והתכונות החדשים שמגיעים לעולם ממשקי האינטרנט. יש עוד הרבה מה להבין, אז איפה כדאי להתחיל את המסע?
Una: בסשן What's new for the web platform ב-I/O מוצגים רגעי השיא של הרבה מהתכונות שיושקו השנה. אדם ארגייל כתב גם מאמר מצוין על כל דפי הנחיתה החדשים והקרובים של CSS. בשלב הזה, כדאי להתמקד בגרסאות יציבות ולהיות מודעים לעבודה הנוספת שמתבצעת. הסדרה המדהימה שלך חדשות פלטפורמת ווב היא מקור מצוין למידע בנושא. ההרשמה לניוזלטר של web.dev תאפשר למפתחים לקבל את התוכן הזה ישירות לתיבת הדואר הנכנס. מפתחים שרוצים להצטרף ולעזור בכל התהליך הזה יכולים להצטרף ל-Open UI. זו אחת הדרכים הטובות ביותר לתמוך בעבודה הזו.
עדכונים חשובים שצפויים בקרוב
אנחנו ממשיכים במסורת שלנו ורוצים לעדכן אתכם לגבי שינוי שעומד לקרות, שכדאי לכם לקחת בחשבון כשאתם יוצרים חוויות גלישה באתרים.
הגבלת הערך max-age של קובצי Cookie ל-400 ימים
- העדכון: כשמגדירים קובצי Cookie עם מאפיין
Expires/Max-Ageמפורש, הערך שלהם יהיה מוגבל ל-400 ימים לכל היותר בעתיד. בעבר לא הייתה הגבלה, ותוקף קובצי ה-Cookie יכול היה לפוג בעוד אלפי שנים. המטרה של המגבלה הזו היא ליצור איזון בין דפוסי שימוש נפוצים לבין שמירה על פרטיות המשתמשים. בכל אתר שמתבצע בו ביקור בתדירות גבוהה יותר מכל 400 ימים, קובצי ה-Cookie מתעדכנים כדי להבטיח את המשכיות של השירות, והמשתמשים יכולים להיות בטוחים שקובצי ה-Cookie לא יישארו בדפדפן שלהם במשך אלפי שנים בלי שימוש. - ציר זמן משוער: השקת התכונה ב-Chrome 104 (גרסה יציבה ב-2 באוגוסט 2022).
- קריאה לפעולה למפתחים: יכול להיות שמפתחים יצטרכו לרענן באופן יזום את קובצי ה-Cookie בתדירות גבוהה יותר מבעבר כשמשתמשים מבקרים באתרים שלהם. אחרת, יכול להיות שהמשתמשים יצאו מהחשבון 400 ימים אחרי שהוגדר קובץ ה-Cookie.
מקווה שנהניתם לקרוא את המהדורה הזו של Chrome Dev Insider. אם פספסתם, הנה הראשון. נשמח לספק לך מידע נוסף ברבעון הבא.
עד אז, נשמח לשמוע מה דעתך על המהדורה הזו של Chrome Dev Insider ומה אפשר לעשות כדי לשפר אותה.
מה דעתך על המהדורה הזו של The Chrome Dev Insider? נשמח לקבל משוב.