חדש ב-Chrome 71

Pete LePage

ב-Chrome 71 הוספנו תמיכה ב:

ויש עוד הרבה!

קוראים לי Pete LePage. נצלול פנימה ונראה מה חדש למפתחים בגרסה 71 של Chrome.

יומן שינויים

זוהי רק רשימה חלקית של השינויים העיקריים. בקישורים שבהמשך מפורטים שינויים נוספים ב-Chrome 71.

הצגת זמנים יחסיים באמצעות Intl.RelativeTimeFormat()

צילום מסך של Twitter שבו מוצגת השעה היחסית של הפוסט האחרון

באפליקציות אינטרנט רבות נעשה שימוש בביטויים כמו 'אתמול', 'בעוד יומיים' או 'לפני שעה' כדי לציין מתי משהו קרה או עומד לקרות, במקום להציג את התאריך והשעה המלאים.

הצגת זמנים יחסיים הפכה לדבר נפוץ כל כך, שרוב הספריות הנפוצות של תאריכים/שעות מספקות פונקציות מותאמות לאזור כדי לטפל בזה בשבילנו. למעשה, ברוב האפליקציות לאינטרנט שאני יוצר, Moment JS היא אחת מהספריות הראשונות שאני מוסיף, במיוחד למטרה הזו.

בגרסה 71 של Chrome הוספנו את Intl.RelativeTimeFormat(), שמעבירה את העבודה למנוע JavaScript ומאפשרת עיצוב מקומי של זמני יחסיים. כך אנחנו יכולים לשפר את הביצועים במעט, ואנחנו צריכים את הספריות האלה כ-polyfill רק כשדפדפן עדיין לא תומך בממשקי ה-API החדשים.

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

השימוש בו פשוט: יוצרים מכונה חדשה ומציינים את האזור, ואז פשוט קוראים ל-format עם הזמן היחסי. פרטים מלאים זמינים במאמר של Mathias, The Intl.RelativeTimeFormat API.

ציון מיקום הקו התחתון בטקסט אנכי

טקסט אנכי עם קווים תחתונים לא עקביים

כשטקסט סיני או יפני מוצג בזרימה אנכית, המיקום של קו התחתון משתנה בדפדפנים השונים. הוא יכול להיות בצד ימין או בצד ימין.

ב-Chrome 71, המאפיין text-underline-position מקבל עכשיו את הערכים left או right כחלק מהמפרט של CSS3 לקישוט טקסט. במפרט של CSS3 לקישוט טקסט נוספו כמה מאפיינים חדשים שמאפשרים לציין פרטים כמו סוג הקו, הסגנון, הצבע והמיקום.


.left {
  text-underline-position: left;
}

.right {
  text-underline-position: right;
}

כדי להשתמש בסינתזת דיבור, צריך להפעיל את המשתמש

כולנו הופתענו כשנכנסנו לאתר והוא התחיל לדבר אלינו. מדיניות ההפעלה האוטומטית מונעת מאתרים להפעיל באופן אוטומטי קבצי אודיו או קבצי וידאו עם אודיו. בחלק מהאתרים ניסו לעקוף את הבעיה הזו באמצעות Speech Synthesis API.

החל מגרסה 71 של Chrome, כדי ש-Speech Synthesis API יפעל, נדרש עכשיו סוג כלשהו של הפעלה על ידי המשתמש בדף. כך הוא עומד בדרישות של מדיניות ההפעלה האוטומטית. אם תנסו להשתמש בו לפני שהמשתמש יוצר אינטראקציה עם הדף, תופיע שגיאה.

const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
  window.speechSynthesis.speak(utterance);
} catch (ex) {
  console.log('speechSynthesis not available', ex);
}

אין דבר גרוע יותר מאשר להיכנס לאתר ולהופתע, יחד עם הקולגות שנמצאים לידכם.

ועוד.

אלה רק כמה מהשינויים ב-Chrome 71 למפתחים, כמובן שיש עוד הרבה.

סרטונים מ-Chrome DevSummit

אם לא הצלחתם להגיע לכנס Chrome Dev Summit, או אם כן הצלחתם אבל לא צפיתם בכל ההרצאות, תוכלו לעיין בפלייליסט של Chrome Dev Summit 2018 בערוץ YouTube שלנו.

איווה ופיל פירטו כמה שיטות מגניבות לשימוש בקובצי שירות במאמר פיתוח אפליקציות מהירות ועמידות יותר באמצעות קובצי שירות.

מריקו וג'ייק דיברו על האופן שבו הם פיתחו את Squoosh במאמר אפליקציות אינטרנט מורכבות עם הרבה JS, בלי להאט.

בשיעורים בנושא מהירות: טכניקות מפתח לאתרים מהירים, Katie ו-Houssein שיתפו כמה שיטות מצוינות לשיפור הביצועים של האתר.

ג'ייק שמט את העוגה. יש גם הרבה סרטונים מעולים אחרים בפלייליסט של Chrome DevSummit 2018, אז כדאי לכם לצפות בהם.

להרשמה

רוצים להתעדכן בסרטונים שלנו? הירשמו לערוץ YouTube של מפתחי Chrome ותקבלו התראה באימייל בכל פעם שנעלה סרטון חדש.

קוראים לי פיט לייפ (Pete LePage), ואחרי שגרסת Chrome 72 תפורסם, אספר לכם מה חדש ב-Chrome.