מידע על לוח הבקרה של פלטפורמת האינטרנט ואיך אפשר להריץ שאילתות על ממשק ה-API ל-HTTP כדי לקבל נתונים על תכונות שהגיעו ל-Baseline, וכך ליצור כלים לתהליך הפיתוח.

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

אירועים שונים ב-Baseline במהלך פברואר 2025.

ruby-align הוא עכשיו חלק מ-Baseline

תאריך פרסום: 20 בפברואר 2025 הורדה מהימנה של מודלים גדולים של AI היא משימה מאתגרת. אם החיבור של המשתמשים לאינטרנט יתנתק או שהם ייסגרו את האתר או את אפליקציית האינטרנט, הם יאבדו את קובצי המודלים שהורדתם חלקית, ויאלצו להתחיל מחדש כשהם יחזרו לדף. שימוש

מידע נוסף על רמז למשאב rel=prefetch ואיך להשתמש בו.

כך מזהים ומתקנים שינויים בפריסה.

המדד Cumulative Layout Shift (CLS) מאפשר לכמת את התדירות שבה המשתמשים חווים שינויים פתאומיים בתוכן הדף. במדריך הזה, נעסוק באופטימיזציה של סיבות נפוצות ל-CLS, כמו תמונות ומסגרות iframe ללא מאפיינים או תוכן דינמי.

התכונות scrollbar-color ו-scrollbar-gutter ב-CSS זמינות עכשיו בכל מנועי הדפדפנים העיקריים, כך שהן נכללות ב-Baseline Newly available.

במהדורה הראשונה של 'נתונים בסיסיים', נסקור את האירועים שקרו ב-Baseline ב-Google ובקהילת מפתחי האינטרנט בינואר 2025.

אופטימיזציות של WebAssembly Garbage Collection ו-Wasm tail call זמינות עכשיו בכל מנועי הדפדפנים העיקריים, כך שהן נכללות ב-Baseline Newly available.

בפוסט הזה מוצג המדד Largest Contentful Paint (LCP) ומסביר איך למדוד אותו

Promise.try זמין עכשיו בכל מנועי הדפדפנים העיקריים, כך שהוא נכלל ב-Baseline Newly available.

תיאור קצר

תאריך פרסום: 13 בינואר 2024 זהו החלק הראשון בסדרה בת שלושה חלקים בנושא מודלים שפועלים ברמת הטקסט (LLM) ו-chatbots. חלק 2 בנושא יצירת צ'אטבוט באמצעות WebLLM וחלק 3 בנושא שימוש ב-Prompt API כבר זמינים. מודלים גדולים של שפה (LLM) הופכים לרכיב חשוב

תאריך פרסום: 13 בינואר 2024 יש כל כך הרבה פרויקטים מדהימים שאפשר ליצור באמצעות AI, עם מודלים קלאסיים של למידת מכונה ומודלים חדשים יותר של שפה גדולה (LLM). בעזרת מודלים LLM, מחשבים יכולים ליצור תוכן חדש, לכתוב סיכומים, לנתח טקסט כדי לזהות את מצב הרוח

אמרו לך "לא לחסום את השרשור הראשי" וגם "לקטע את המשימות הארוכות". אבל מה המשמעות של כל הפעולות האלה?

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

מערך נתונים של תכונות אינטרנט, לוח הבקרה של סטטוס פלטפורמת האינטרנט, ווידג'ט של סטטוס בסיס ועוד. נתונים היסטוריים של Baseline ב-2024.

בפוסט הזה נסביר על טעינת פריטים בזמן אמת (lazy loading) ועל האפשרויות הזמינות לטעינת פריטים בזמן אמת של סרטונים.

טעינה מראש של מודול מאפשרת לטעון מודולים של JavaScript מראש באופן מוצהר.

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

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

בפוסט הזה מתוארים המדד 'זמן חסימה כולל' (TBT) והסבר על אופן המדידה שלו.

אוסף של שיטות מומלצות שזיהינו ב-Chrome כגדולות ביותר לביצוע אופטימיזציה של ביצועי האתר ולשיפור מדדי הליבה לבדיקת חוויית המשתמש באתר

איך מודדים את מדדי Web Vitals של האתר בסביבה אמיתית ובסביבה מעבדתית

ערכים חיוניים לאתר תקין

מדריך מפורט המפרט איך לפצל את נתוני ה-LCP ולזהות תחומים עיקריים שצריך לשפר.

מאפיין ה-CSS content-visibility זמין עכשיו בגרסת Baseline.

המחקר והמתודולוגיה שעומדים בערכי הסף של דוח המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals)

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

במאמר הזה נסביר את סיפור המקור של Baseline, את המעורבות של Google ואת הבעלות על קבוצת הקהילה WebDX.

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

שיפרנו את ההטמעה של CSS בתוך CSS.

בפוסט הזה מוצג המדד 'השהיה לאחר קלט ראשוני' (FID) ומסביר איך למדוד אותו

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

איך משתמשים בכלים של Google כדי לבדוק את הקשר בין מדדי הליבה לבדיקת חוויית המשתמש באתר לבין ההכנסות מפרסום

איזו השפעה יש ל-@property על ביצועי ה-CSS?

פוסט זה דן במאפיין הטעינה ובאופן השימוש בו כדי לשלוט בטעינה של iframes.

יש אפשרויות רבות ושונות לאחסון נתונים בדפדפן. איזה מהם הכי מתאים לצרכים שלך?

מדריך אינטראקטיבי עם הוראות ליצירת שרת שמנהל מינויים להתראות ושולח בקשות לפרוטוקול דחיפה באינטרנט לשירות Push.

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

מה הופך Progressive Web App לטובה או לטובה?

קריטריונים להתאמה של Progressive Web App.

מה צריך לעשות כדי לשנות סמלים, קיצורי דרך, צבעים ומטא-נתונים אחרים בקובץ המניפסט של אפליקציית האינטרנט עבור ה-PWA.

המניפסט של אפליקציית אינטרנט הוא קובץ JSON פשוט שמגדיר לדפדפן איך אפליקציית האינטרנט צריכה להתנהג.

במאמר הזה מוסבר איך לפרוס CSP על סמך גיבובים או חד-פעמיים חד-פעמיים (hash) בסקריפט כהגנה לעומק מפני סקריפטים חוצי-אתרים.

המאמר הזה עוזר למפתחי אתרים לבחור את ממשק ה-API המתאים לחומרה בהתאם למכשיר נתון.

כך משתמשים בבקשות מקור קשורות כדי לאפשר שימוש חוזר במפתחות גישה באתרים שלכם.

בפוסט הזה מוסבר על מאפיין הטעינה ואיך אפשר להשתמש בו כדי לשלוט בטעינת תמונות.

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

מדדים מותאמים אישית מאפשרים לך למדוד ולבצע אופטימיזציה של היבטים ייחודיים לאתר שלך, ולבצע אופטימיזציה שלהם.

איך שולחים נתוני Web Vitals לנכסי Google Analytics 4 וייצאים את הנתונים לצורך ניתוח ב-BigQuery וב-Looker Studio

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

איך התראות לגבי קובצי cookie משפיעות על הביצועים, על מדידת הביצועים ועל חוויית המשתמש.

מפתחי אתרים יכולים להתאים אישית התראות בנושא מדיה ולהגיב לאירועים הקשורים למדיה, כמו חיפוש או מעקב אחר שינויים, באמצעות ה-Media Session API.

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

אפשר להשתמש במאפיין tabindex כדי להגדיר במפורש את מיקום הכרטיסייה של הרכיב.

בפוסט הזה מוצג המדד Time to First Byte (TTFB) שמסביר איך למדוד אותו.

בהדרכה הזו תלמדו איך להתאים את ההנחיות כדי להשיג את התוצאות המועדפות עליכם במודלים גדולים של שפה (LLM), במודלים שונים ובגדלים שונים של מודלים.

בפוסט הזה מוצג המדד 'מאינטראקציה ועד הצגת התגובה' (INP) ומוסבר איך הוא עובד, איך למדוד אותו והצעות לשיפור.

description: הגדרת צבעים שמגיבים לערכת הצבעים שבה נעשה שימוש באמצעות הפונקציה light-dark() .

במדריך הזה, שמיועד למפתחי אתרים שרוצים ליהנות מהיתרונות של WebAssembly, נלמד איך להשתמש ב-Wasm כדי לבצע מיקור חוץ למשימות שדורשות מעבד (CPU) בעזרת דוגמה פועלת.

ב-CSS Grid, המאפיינים 'grid-template-columns' ו-'grid-template-rows' מאפשרים להגדיר שמות של שורות ולעקוב אחר מידות של עמודות ושורות ברשת, בהתאמה. תמיכה באינטרפולציה עבור המאפיינים האלה מאפשרת לפריסות רשת לעבור בצורה חלקה בין מצבים, במקום להצמיד באמצע האנימציה או המעבר.

איך שולטים במשחקי אינטרנט באמצעות Gamepad API.

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

גורמים מהימנים יכולים לקבוע מה מקור מפתח הגישה על ידי בדיקת AAGUID. אתם יכולים לקרוא איך פועל המנגנון הזה.

בעזרת הדוגמה של שפת צעצועים סינתטית שנקראת ExampleScript, תוכל ללמוד כיצד לכתוב ולבצע אופטימיזציה של מודולים של WebAssembly ב-JavaScript באמצעות ה-API של Binaryen.js.

צילום אודיו/וידאו הוא ה "גביע הקדוש" של פיתוח האינטרנט כבר זמן רב. במשך שנים רבות נאלצנו להסתמך על יישומי פלאגין לדפדפן ( Flash או Silverlight ) כדי לבצע את המשימה. בוא! HTML5 מציל את המצב. יכול להיות שזה לא ברור, אבל העלייה בשימוש ב-HTML5 הביאה

רכיב האינטרנט <model-viewer> מאפשר לך להשתמש במודלים תלת-ממדיים בדף אינטרנט באופן הצהרתי.

איך משתמשים ב-'userAuthentication' ב-WebAuthn

סיבות אפשריות לכך שבנתוני RUM מוצגים מספרים שונים של דוח המדדים הבסיסיים של חוויית המשתמש מ-CrUX.

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

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

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

מדריך ליסודות של IndexedDB.

שירות CSS מהימן, חזק ויציב עבור רצועת כלים שאפשר להשתמש בו היום.

במאמר הזה אנחנו מסבירים איך לבצע אופטימיזציה למדד Time to First Byte.

מה ההבדל בין מארח, אתר ומקור? מה זה eTLD+1? במאמר הזה נסביר על הנושא.

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

המשתמשים בודקים אם אתרים ואפליקציות לא פועלים כמו שצריך, לכן חשוב מאוד לבצע אופטימיזציה של ביצועי העיבוד!

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

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

במסמך הזה מוסבר איך להשתמש ב-OffscreenCanvas API כדי לשפר את הביצועים במהלך רינדור גרפיקה באפליקציית האינטרנט.

בפוסט הזה מוצג המדד 'הצגת תוכן ראשוני (FCP)' ומוסבר איך למדוד אותו

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

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

בפוסט הזה מוצג המדד Time to Interactive (TTI) ומסביר איך למדוד אותו

ממשק ה-API של העדיפות לשליפה מציין את העדיפות היחסית של המשאבים לדפדפן. היא יכולה לאפשר טעינה אופטימלית ולשפר את דוח המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals).

מידע על קבוצות פסאודו מחלקה מסוג :user-תקין ו-:user-לא חוקי, ואיך להשתמש בהן כדי לשפר את חוויית המשתמש בתהליך אימות הקלט.

איך מקבלי החלטות עסקיות ומשתמשים שאינם מפתחים יכולים לשפר את דוח המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals).

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

תת-רשת מאפשרת שיתוף ברשת, ומאפשרת לרשתות מקננות להתאים לאבות ולאחיות.

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

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

מחליטים מה צריך לבדוק ומה אפשר לשלול.

מחליטים מה לבדוק, מגדירים את מקרי הבדיקה וקובעים סדר עדיפויות.

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

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

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

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

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

כדאי לבדוק את המשאבים מדי פעם כדי לוודא שכל משאב עוזר לספק חוויית משתמש טובה יותר.

התוכנית mkbitmap C קוראת תמונה ומחילה עליה אחת או יותר מהפעולות הבאות, בסדר הבא: היפוך, סינון גבוה, התאמת קנה מידה וערכי סף. אפשר לשלוט בכל פעולה ולהפעיל או להשבית כל פעולה בנפרד. במאמר הזה נסביר איך ליצור mkbitmap ל-WebAssembly.

מבוא ל-WebAssembly (שנקרא לפעמים Wasm), פורמט הקוד הבינארי הנייד ופורמט הטקסט המתאים לתוכנות הפעלה, וממשקי תוכנה המאפשרים אינטראקציות בין תוכנות כאלה וסביבת המארח שלהן.

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

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

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

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

הסבר על חלק מהתכונות שכלולות ב-Baseline.

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

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

עיבוד HTML באמצעות JavaScript שונה מעיבוד HTML שנשלח על ידי השרת — והוא עשוי להשפיע על הביצועים. כדאי ללמוד על ההבדלים במדריך הזה ומה אפשר לעשות כדי לשמר את ביצועי הרינדור של האתר – במיוחד במקרים שבהם יש חששות לאינטראקציות.

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

גרסת WordPress המלאה שמופעלת על ידי PHP ופועלת אך ורק בדפדפן עם WebAssembly

בפוסט הזה מוצג המדד Cumulative Layout Shift (CLS) ומוסבר איך למדוד אותו.

תצוגה של כלים שזמינים עכשיו באינטרנט הודות ל-WebAssembly.

אפשר לשלוח אפליקציות מסוג Progressive Web App בחנויות אפליקציות כמו Android Play Store, Microsoft Store ועוד.

שיפור חוויית ניפוי הבאגים באינטרנט עם מפות מקור.

שירות CSS מהימן, חזק ויציב עבור רצועת כלים שאפשר להשתמש בו היום.

חישוב הסינוס, הקוסינוס, הטנגנס ועוד ב-CSS.

השיטה requestVideoFrameCallback() מאפשרת למחברי אינטרנט לרשום קריאה חוזרת (callback) שפועלת בשלבי העיבוד כאשר פריים חדש של וידאו נשלח אל המחבר.

אחד מתוך סדרת ראיונות עם חברים בתוכנית המומחים של Google Developers (GDE).

נלמד איך ליצור את אפקט הטקסט המנופח עם שינוי הדרגתי באמצעות מאפיינים מותאמים אישית ברמת ההיקף ו-background-clip. עוברים אל CodePen ויוצרים עט חדש. יוצרים את הרכיבים של ה-Markup לטקסט. נשתמש בכותרת עם המילה 'מהיר': לאחר מכן, נוסיף ל- body

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

איך הספר הנגלל קיבל חיים כדי לשתף טיפים וטריקים מהנים ומפחידים עם ה-Chrometober הזה.

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

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

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

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

איך מבצעים אופטימיזציה של גופני אינטרנט לשימוש בדוח ה-Web Vitals הבסיסיים.

אחד מתוך סדרת ראיונות עם חברים בתוכנית המומחים של Google Developers (GDE).

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

נלמד איך ליצור מעמיס CSS מונפש עם מאפיינים מותאמים אישית ברמת ההיקף ועם animation-timing-function. עוברים אל CodePen ויוצרים עט חדש. יוצרים את ה-Markup של ה-Loader שלנו. שימו לב לשימוש במאפיינים מותאמים אישית בתוך שורה: אפשר גם להשתמש בגנרטור ( Pug )

במדריך הזה נסביר איך ליצור ניווט ראשי נגיש לאתר. אתם לומדים על HTML סמנטי, נגישות, ואיך השימוש במאפייני ARIA יכול לפעמים לגרום יותר נזק מתועלת.

פסאודו-בורר השימושי הזה של ה-CSS מאפשר לכם לבחור רכיבים מותאמים.

לבצע אופטימיזציה של תגים ומנהלי תגים לבדיקת Core Web Vitals.

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

סקירה של כמה דרכים שימושיות ויצירתיות לסגנן רשימה.

יתרונות השימוש בנכסים מותאמים אישית במערכות עיצוב ובספריות רכיבים.

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

בדיקה של מספר דרכים ליצירת אנימציה של גבול ב-CSS

ה-BBC משיק את HSTS עבור האתר שלו כדי לשפר את האבטחה והביצועים. אפשר לגלות מה זה אומר ואיך אפשר להיעזר ב-HSTS.

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

GDE אנריקה פרננדז גרה בנושא מיקור פתוח כ-NGO HelpDev.

מהי המשמעות של סיום התמיכה ב-Internet Explorer עבור הלקוחות והמפתחים ב-Maersk.com.

במשך זמן רב, נהניתי להכיר אותך.

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

ממשק ה-API של Web Audio מאפשר להשיג סנכרון AV באופן תקין.

אפשר להשתמש בצבעים מדורגים בעלי צורה חרוטית כדי ליצור אפקטים מעניינים, כמו הדוגמה הזו של גבול יפה. CodePen הזה, שנוצר על ידי Adam Argyle, ששותף במקור דרך הציוץ הזה ב-Twitter, מראה איך להשתמש ב שיפוע conic כדי ליצור גבול. Terry Mun השתמש ביצירתיות כדי

הסבר על ההחלטות שקשורות לשימוש בספרייה או ב-framework של JavaScript.

להבין את ההבדלים בין frameworks לבין ספריות בהקשר של סביבת JavaScript בצד הלקוח.

זיהוי שגיאות במהלך עבודה עם Fetch API.

עדכון לגבי Google Fonts CSS API – איך הוא עובד, איך להשתמש בו ואיך הוא יכול לספק ביעילות את גופני האינטרנט.

המשאב הזה יכול לעזור לך להתמצא במהירות במסוף.

ה-GOV.UK השמט את התלות ב-jQuery בממשק הקצה. לעולם לא תנחש מה קרה. (כן).

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

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

מעכשיו קל יותר לבנות אתרים באינטרנט.

איך למדוד את דוח ה-Web Vitals באמצעות הכלי הנוכחי לניתוח נתונים

מומחים של Google Developers באינטרנט שמפרטים איך תוכניות חונכות אפשרו להם להפוך למנהיגים.

שיתוף מדריך שימושי לגופנים משתנים, עם המון דוגמאות.

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

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

כאן אפשר לראות את המצב של כלי התמונות.

מידע על היקף ועל אופן הפעולה שלו ב-JavaScript.

סקירה כללית בסיסית על יצירת חלונות מודולריים (modal) בגודל מיני ומגה עם התאמה לצבע, תגובה דינמית ונגישות באמצעות הרכיב ‎.

איך מנפים באגים בשגיאות בהפעלת מדיה באינטרנט

אחד מתוך סדרת ראיונות עם חברים בתוכנית המומחים של Google Developers (GDE).

טעינה מיידית של תמונות בתוך אזור התצוגה הראשוני, תוך טעינה מדורגת של שאר התמונות, יכולה לשפר את מדדי Web Vitals תוך טעינה של פחות בייטים.

סקירה בסיסית של בניית סרגל טעינה נגיש ומותאם לצבע באמצעות הרכיב ''.

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

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

סקירה בסיסית שמסבירה איך לבנות סמל אתר מותאם.

כאן אפשר ללמוד איך לעבד גרפיקה דו-ממדית בלוח הציור באינטרנט מ-WebAssembly עם Emscripten.

אם תשכחו את הכותרת 'cache-Control' או שימוש לרעה בה, אתם עלולים לפגוע באבטחת האתר ובפרטיות המשתמשים. קבלת המלצות לאתרים שמניבים ערך גבוה.

ערכים חיוניים לאתר תקין

כאן מוסבר איך בוצעה העברה של gPhoto2 אל WebAssembly כדי לשלוט במצלמות חיצוניות ב-USB מאפליקציית אינטרנט.

שימוש ב-Network Error Logging (NEL) כדי לאסוף שגיאות רשת בצד הלקוח.

איך משתמשים בתכונות החדשות ביותר של WebAssembly תוך תמיכה במשתמשים בכל הדפדפנים.

איך משתמשים בממשקי WebAssembly וב-Fugu API כדי להעביר לאינטרנט קוד שמקיים אינטראקציה עם מכשירים חיצוניים.

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

איך מטמיעים קוד JavaScript בספריית WebAssembly כדי לתקשר עם אנשים מבחוץ.

Oculus Quest 2 היא משקפי מציאות מדומה (VR) שנוצרו על ידי Oculus, מחלקה של Meta. המפתחים יכולים עכשיו ליצור ולהפיץ אפליקציות מסוג Progressive Web App (PWA) בדו-ממד ובתלת-ממד ומנצלים את היתרונות של תכונת ריבוי המשימות של Oculus Quest 2&#39. במאמר הזה נסביר את החוויה ואיך ליצור, להתקין ממקור לא ידוע את ה-PWA ולבדוק אותו ב-Oculus Quest 2.

הצצה לתהליך ולכלים ששימשו ליצירת החוויה בסגנון לוח השנה של Designcember.

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

במשך תקופה ארוכה יותר, היה צורך להיעזר בפתרונות ובספריות כדי ליצור עותק עמוק של ערך JavaScript. הפלטפורמה כוללת עכשיו את 'structuredClone()', פונקציה מובנית להעתקה עמוקה.

סקירה בסיסית של בניית רכיב מודעה גמיש ונגיש.

אנו מכריזים על המימון של ממשק המשתמש של Chrome, שנועד לספק מענקים לאנשים שעובדים על כלי עיצוב, CSS ו-HTML.

סקירה בסיסית על בניית תפריט משחק תלת-ממדי רספונסיבי ונגיש.

סיכום של כל ההודעות העיקריות מכנס המפתחים של Chrome לשנת 2021, עם קישורים למידע נוסף.

כדאי לעיין במידע העדכני ביותר ב-PageSpeed Insights כדי לבצע אופטימיזציה ולשפר את האיכות של הדף והאתר.

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

כדאי לנסות את Lighthouse API חדש כדי למדוד ביצועים ושיטות מומלצות לכל אורך התהליך של המשתמש.

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

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

במדריך זה תלמדו את היסודות של השימוש בממשקי ה-API של הניווט ותזמון המשאבים כדי להעריך את ביצועי הטעינה בשדה.

המטרה של Sanitizer API החדש היא ליצור מעבד חזק למחרוזות שרירותיות להוספה בטוחה של מחרוזות בדף. מאמר זה מציג את ה-API ומסביר את השימוש בו.

במסמך הזה מפורטות שיטות מומלצות לביצועים שאפשר להשתמש בהן לטעינת הטמעות של צד שלישי, טכניקות טעינה יעילות והכלי Layout Shift Terminator שעוזר לצמצם את השינויים בפריסה של הטמעות פופולריות.

תשובות לשאלות נפוצות בנושא שירותי SPA, דוח המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) ועל התוכנית של Google לטפל במגבלות הנוכחיות של המדידה.