{ Code snippets }

ארכיון קטעי קוד - Snippets

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

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

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

העלאה למדיה והצגה של תמונות webp

פורמט webp אשר מפותח על ידי גוגל נחשב לבעל קידוד יעיל שמתבטא בנפח קובץ קטן יותר בהשוואה ל jpeg. לכן אם לא תשתמשו בו תקבלו התראה ב Lighthouse שאומרת Serve images in next-gen formats. האמת שזה לא תמיד מדויק, במיוחד בתמונות בעלות רזולוציה גבוהה, אפשר

טעינה מוקדמת של פונטים, תמונות ועוד

אחד הדברים שגוגל יתריעו בבדיקה של Lighthouse הוא לבצע טעינה מוקדמת לנכסים שמשתמשים איתם בהמשך מה שנקרא Preload key. הדבר נגרם כשבן שלישי בשרשרת אמור להטען ועד שהוא לא יטען, טעינת הדף לא תושלם. דוגמה לזה היא פונט שמוגדר כ font-face ב css, עד שהקובץ

סידור עמודות רספונסיבי באלמנטור

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