אתר ששוקל פחות מ-1KB – מחבר מאמר זה השיק מועדון אתרים בשם 1kB Club, המאתגר מפתחי אתרים לבנות אתרים שגודלם מתחת ל-1,024 בתים. המאמר מתאר כיצד המחבר בנה את אתר קורות החיים האישי שלו, ששוקל 920 בתים ומשתמש ב-HTML חוקי. המאמר חולק כמה “פריצות ערמומיות” שהכותב השתמש בהן כדי לחסוך ברוחב הפס, כולל דחיסת ה-HTML, שימוש בסמל ריק, לא כולל מטא תגיות מיותרות, וביטול תגי ברירת מחדל וסגירה. המחבר השתמש גם בכתובות URL מותאמות אישית של href, שאפשרו ku לשמור בנתונים על ידי הכללת קישור תו בודד שהפנה משתמשים לדומיין המתאים. המאמר מסתיים בהזמנת קוראים לשתף את היצירות שלהם שנבנו מתחת ל-1kB.
איך לעצב מצב כהה מרנין – Superhuman, חברת פרודוקטיביות בדוא”ל, משתפת בפוסט בבלוג כיצד לעצב ערכות נושא אפלות קריאות, מאוזנות ומענגות. ערכות נושא כהות זכו לציפיות נרחבות בעיצוב האפליקציה, מכיוון שהן מפחיתות את עומס העיניים, קלות יותר לקריאה בתאורה חלשה ויכולות להפחית במידה ניכרת את צריכת הסוללה בהתאם למסך. עם זאת, קשה ליצור מצב כהה ומענג, ושימוש חוזר בצבעים או גוונים הפוכים יכולים להגביר את עומס העיניים ולהקשות על הקריאה באור נמוך. Superhuman ממליץ להכהות משטחים מרוחקים, לבחון מחדש את הניגודיות התפיסתית, להפחית בלוקים גדולים של צבע בהיר, להימנע משחור או לבן טהור ולהעמיק צבעים כדי לבנות נושאים כהים מוצלחים.
בדיקת מהירות אתר לפי תמונות – חברת Cloudinary מפתחת פתרונות לכל הנושא של אחסון תמונות באתר, ומספקת כלי אינטרנטי שמאפשר לבדוק את מהירות האתר כתלות בתמונות שיש באתר
Lorem Picsum הוא כלי המספק placeholder-ים של תמונה קלים לשימוש ומסוגננים. משתמשים יכולים להוסיף את גודל התמונה הרצוי (רוחב וגובה) אחרי כתובת האתר כדי לקבל תמונה אקראית. כדי לקבל תמונה מרובעת, משתמשים יכולים פשוט להוסיף את הגודל לכתובת האתר. אפשר גם לקבל תמונה ספציפית על ידי הוספת /id/{image} לתחילת כתובת האתר. כדי לקבל תמונה אקראית סטטית בכל פעם המבוססת על seed, משתמשים יכולים להוסיף /seed/{seed} לתחילת כתובת האתר. הכלי מציע גם אפשרויות לקבל תמונה בגווני אפור או מטושטשת על ידי הוספה של ?grayscale או ?blur לסוף כתובת האתר, בהתאמה. משתמשים יכולים להתאים את כמות הטשטוש על ידי מתן מספר בין 1 ל-10. כדי לקבל תמונות מרובות באותו גודל בדפדפן, משתמשים יכולים להוסיף את פרמטר השאילתה האקראי כדי למנוע מהתמונות להיות במטמון. אפשר גם לקבל רשימה של תמונות באמצעות ה-endpoint הזה: /v2/list, ולקבל מידע על תמונה ספציפית באמצעות ה-endpoint הזה: /id/{id}/info ו-/seed/{seed}/info.
ספריית קומפוננטות – גלריית הרכיבים, שמטרתה להיות נקודת התייחסות לכל מי שבונה ממשקי משתמש מבוססי רכיבים, היא מאגר עדכני של רכיבי ממשק המבוסס על דוגמאות מעולם מערכות העיצוב. יש שם רכיבים כגון אקורדיון, ציטוט, פירורי עוגה, ועוד.
ארבע דרכים להכללת קבצים ב-HTML: אחת, שתיים, שלוש (השיטה הרביעית נוגעת ל-SSG אז היא פחות מעניינת אותי)
שבעה מדדי מהירות שישפרו את ה-UX – מאמר זה דן ב-7 מדדי ביצועי אתרים חיוניים למעקב ולשיפור חווית המשתמש. המדדים כולליםLargest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Total Blocking Time (TBT), Interaction to Next Paint (INP), Time to First Byte (TTFB), מספר סקריפטים של צד שלישי ו-Time to Interactive (TTI). המאמר מסביר מדוע כל מדד חשוב ומספק טיפים להפחתת ציונים המשפיעים לרעה על חווית המשתמש. המאמר גם מזהיר מפני מעקב אחר מדדים נפוצים אך פגומים כמו השהיית קלט ראשון (FID), צבע ראשון משמעותי (FMP) וציון ביצועים (PS). לבסוף, המאמר מציע משאבים שיעזרו לבעלי אתרים לנקוט פעולה עם מדדי הביצועים שלהם ולשפר את חווית האינטרנט שלהם למבקרים.
מנתח גודל HTML – כלי שמנתח את גודל ה-HTML כדי לתפוס מנפחים כמו תמונות מוטבעות, hydration state גדול של React ושכפול קוד.
מנתח רמזים – Resource hints מאפשרים למפתחים לספר לדפדפן על משאבי רשת לפני שהם מתגלים באופן טבעי במהלך תהליך טעינת הדף. כלי זה בודק אם הם פועלים כראוי.
כלי פרונט אנד מובילים ב-2022 – לואי לאזריס ריכז רשימה של כלי פיתוח פרונט אנד פופולריים משנת 2022, החל ממרכזי מחוונים של ניהול בקוד פתוח כמו HopeUI ועד לפריימוורקי CSS הניתנים להתאמה אישית כמו Amigo CSS, Simple.css ו- Bamboo CSS. כלים נוספים כוללים מערכות עיצוב כמו Wanda, פלטפורמת הגופנים Bunny Fonts, גלריית תמונות שנוצרה מבינה מלאכותית Lorem Faces ורכיב ציר הזמן האינטראקטיבי TimelineJS. הרשימה מציגה גם את JSON Crack ככלי הפופולרי ביותר של השנה, כלי הדמיה לנתוני JSON. רבים מהכלים הם חינמיים וקוד פתוח, בעוד שלאחרים יש תוכניות תמחור משלהם.
אפקטים יפים של תנועה בעיצוב חוויית משתמש – תנועה בעיצוב UX היא חלק חשוב בעיצוב אתרים, שאפשר להשתמש בו כדי למשוך תשומת לב לפרטים ספציפיים, לשפר את חוויית המשתמש ולהוסיף משיכה אסתטית. ישנם 6 סוגים של אנימציית אינטרנט: hero animation, loading animation, accent animation, interactive animation, hover animation, ו-motion for special effects. דוגמאות להנפשות אלה נעות בין counter visuals המציגים את התקדמות טעינת הדף, להנפשת טעינה מרתקת ואמנותית, לתפריטים אינטראקטיביים עם צורות לחיצות ועוד. אנימציה יכולה לשמש גם כדי להוסיף כיף ושובבות לאינטראקציות, לספק משוב מיידי על פעולות המשתמש, וליצור קשרים רגשיים בין האתר לבין המבקרים בו.
תקצירי הקישורים נעשו בעזרת chatGPT, fredo.ai, וגוגל טרלנסלייט.
