הפוסט הזה, שעניינו פרונט-אנד, מביא קישורים בנושאי HTML, תמונות, ודברים שקשורים ל-CSS ו-JavaScript שלא שייכים רק לאחד מהם. תהנו!
מדי פעם מבקשים ממני קוראים שהקישורים בפוסטים ייפתחו בטאב חדש, כדי שהם יוכלו להמשיך לקרוא את הפוסט גם אחרי הלחיצה על הקישור. אז מלבד העובדה שזה נחשב לא נגיש (כי למשתמש אין שליטה על זה), גיליתי שזו גם עלולה להיות פירצת אבטחה, כי לטאב שנפתח יש גישה לטאב של האתר שלי, שממנו נפתח הטאב שלו, והוא עלול, בקונסטלציה מסוימת, להזיק לי. אבל למרבה השמחה וורדפרס מכניס לתגית הקישור מאפיינים שמונעים את הנזקים האלה – noreferrer ו-noopener. ועם זאת, אני ממליצה על קראית הפוסט הזה, שמתאר בפירוט מה כל כך רע בפתיחת קישורים בחלון חדש. גם קריס פרדיננדי מדבר על זה, ומפנה לעוד שני פוסטים בעניין.
הידעתם שלכל סרטון ביוטיוב של יש תמונת ברירת מחדל שאפשר להציג? בפוסט הזה, מחבר התוסף של הדפסת הבלוג מספר איך הוא התמודד עם סרטונים בגרסה המודפסת על ידי החלפת הסרטון בתמונת ברירת המחדל שלו. מבנה הכתובת של התמונה הוא קבוע, ומה שמשתמנה הוא המזהה, שהוא בעצם אותו מזהה של הסרטון.
איך לקרוא את דיאגרמת המפל של Web Page Test. ועוד פוסט כזה. והפוסט הזה משווה בין GTmetrix ל-PageSpeed Insights -לPingdom Tools ל-WebPageTest. וזה פוסט שמנתח תוצאות של בדיקת מהירות אתר ב-Web Page Test. מכינה אתכם מראש: זה פוסט ארוך מאוד.
(עדכון 16/11/2020) ועדיין בעניין בדיקת ביצועים: איך לבדוק את ביצועי יוטיוב עם Dev Tools. ומתוך התיעוד של גוגל: איך לנתח ביצועים באמצעות פיצ’רים ב-Dev Tools. ואתר נוסף לבדיקת ביצועים: Measue.
טיעונים עסקיים למה כדאי לוותר על תמיכה ב-IE. בין הטיעונים: הדפדפן הזה מת (מיקרוסופט עברה ל-Edge); יש הרבה חידושים בפיתוח אינטרנט מאז שמיקרוסופט הוציאה את IE משימוש ב-2015 ואי אפשר להשתמש בהם בו; תמיכה בו מצריכה מאמץ גדול; חברות גדולות כבר הפסיקו לתמוך בו; יש בו בעיות ביצועים; ועוד.
מחוון סיסמה מגניב – מראה על אילו מתנאי הסיסמה ענית בבחירת הסיסמה, בצורה גרפית משעשעת.
איך (ולמה) ליצור הערות שוליים סמנטיות(!) באתר.
לא תמיד כיווץ תמונות עוזר לביצועי דף טובים יותר.
חושבים שיש לכם עין עיצובית טובה? המשחק הזה מראה נקודה בתוך צורה, וצריכים להחליט אם הנקודה היא בדיוק באמצע. יש 10 שלבים, ואני בדרך כלל לא עוברת את השלב הרביעי… לא קל. או שאין לי עין של מעצבת (הפתעה).
זוכרים שפעם דיברנו על אלמנטי HTML נשכחים, וביניהם אלמנט ה-details שאפשר להשתמש בו למימוש אקורדיון? אז הפוסט הזה מסביר למה ה-details הוא פחות טוב למימוש הזה…
גדלי מסך לפי פיקסלים, ואילו מכשירים יש בגדלים אלה. וצבעוני!