משחקי CSS ו-JS – באחד הניוזלטרים של סמשינג מגזין, יוחד הנושא למשחקי פרונט-אנד שונים שיכולים לעזור ללמוד CSS, JavaScript ו- Flexbox בדרך מהנה. המשחקים כוללים את JSRobot, Elevator Saga, Screeps, Flexbox Froggy, Flexbox Zombies, Flexbox Defense, Grid Garden, CSS Diner, CSSBattle ו-Service Workies. בנוסף, הוא מזכיר את CodinGame, פלטפורמה המציעה משחקים ואתגרים בחינם ליותר מ-25 שפות וקהילה שבה חובבי קידוד יכולים ללמוד אחד מהשני במשחקי תכנות מרובי משתתפים ובתחרויות בינלאומיות.
מה מטריקות הביצועים החשובות – פוסט של קריס פרדיננדי שמדבר על מונחים של מדדי ביצועי אינטרנט: המדדים החשובים ברמת הדף הם First Byte, Start Render ו- First Contentful Paint. גודל הקובץ הכולל לאחר צמצום ו-gzipping גם הוא חשוב, עם יעד של 14kb. המדד הכי פחות חשוב הוא כמה זמן לוקח לאתר לסיים את הטעינה. כדי למדוד ביצועים, ניתן להשתמש WebPageTest.org ולבחור “כבל” עבור החיבור ו”תצוגה ראשונה ותצוגה חוזרת” תחת תצוגה חוזרת. מומלץ גם לבדוק עם 3G מהיר או 3G איטי כדי לבדוק את החוויה בנייד, ולבחור מיקומים שונים כדי לבדוק השפעה גלובלית.
בודק אם אפשר להכליל אלמנט HTML אחד בשני – כלי פשוט עם שני שדות טקסט – באחד מכניסים את תגית ההורה ובשני את התגית שרוצים שיכיל בתוכו, ומקבלים תשובה ברורה אם זה חוקי. מעבר לזה מקבלים עוד מידע על כל תגית.
המדריך לכפתור – עמוד נחמד שמציג HTML-ים אפשריים לתצוגת כפתור, מפרט מי מהם חוקי ומי לא, ולמה.
סודות devtools שלא צריכים להיות סודות – המאמר מדבר על המאפיינים והמתודות השונים של כלי המסוף בכלי הפיתוח של הדפדפן. הוא דן בבעיות בשימוש ב-console.log() ומציע דרכים טובות יותר לאתר באגים בסקריפטים. הוא מכסה את אפשרויות הסינון הזמינות, באמצעות סוגריים מסולסלים כדי לרשום הן את השם והן את הערך של משתנים, שימוש בהודעות warn, info ו-error, הצגת שגיאות ו-assertions, מעקב אחר המקור של משהו, קיבוץ הודעות console, הצגה וסינון של מידע רב ב-console כטבלאות, ושימוש בכלי עזר ל-console כגון $() ו-$$(). בנוסף, הוא מדבר על live expressions ו-logpoints, שהן דרכים לרשום מידע מבלי לשנות את הקוד שלך או להגדיר breakpoint ולרשום ללוג מבלי לשבור את ביצוע הקוד.
משאבים למפתחי FED – זהו פוסט המספק רשימה של משאבים למפתחי frontend בשנת 2022. המחבר כולל משאבים עבור JavaScript, TypeScript, CSS, HTML ונגישות, בין היתר. הפוסט מדגיש את החשיבות של ידיעת JavaScript והבנת היסודות שלה. המחבר מציע גם להשתמש TypeScript ומספק רשימה של משאבים כדי ללמוד את זה. הפוסט גם מדגיש את המשמעות של HTML סמנטי ומספק משאבים ללמוד אותו. לבסוף, המחבר ממליץ למפתחי frontend להתמקד בשיפור כישורי הנגישות שלהם, ומספק משאבים לכך.
כלי אונליין קטנים למעצבי אינטרנט – speckyboy אגר בפוסט הזה המון כלים קטנים שמסייעים לחייו של מעצב. הכלים מחולקים ליותר מ-15 קטגוריות, ובהן כלי Layout של CSS, כלים שמייצרים גרדיאנטים, כלי אנימציה, כלי SVG, ועוד רבים וטובים. בסך הכול יש שם 75 כלים מכלים שונים.
איך להתחיל רשימה עם מספר שונה מ-1 – בפוסט קצר מראה קריס פרדיננדי איך להוסיף את המאפיין start לתגית ol כדי לציין מאיזה מספר להתחיל את הרשימה
Can I devTools? – רשימה של כל הטאבים שיש ב-Dev Tools ומה כל אחד מהם מאפשר
איך לעשות אתר RTL – ערבית, עברית ופרסית הן שפות כתיבת RTL הנפוצות ביותר כיום. בעת יצירת אתר רב לשוני עם שפות LTR ו- RTL, ישנם שלושה דברים שכדאי לזכור. ראשית, להגדיר את כיוון הטקסט באמצעות התכונה HTML dir או מאפיין כיוון CSS. שנית, להשתמש במאפיינים לוגיים של CSS במקום שמאל / ימין או למעלה / למטה כדי למנוע בעיות בעת שינוי האתר מ- LTR ל- RTL. לבסוף, להשתמש בטווחי Unicode כדי לציין את טווח התווים שישמש מתוך גופן המוגדר על-ידי @font-face, ולוודא שהגופן נטען רק בעת הצורך.
כלים חזקים לאופטימיזציית תמונות – במאמר זה בסמשינג מגזין, המחבר עובר על כלים שונים להקטנת גודל התמונות באתר. המחבר מציין כלים כגון WebUtils Bulk Image Compress, Compressor.io, Imagecompresser.com, AnyWebP, Compressimage.io, JPEG.rocks, Compressor.js, Squoosh, SVGOMG ו- Optimizilla. המחבר מסביר בקצרה את התכונות והמגבלות של כל כלי.
*בפוסט הזה נעזרתי ב-ChatGPT וב-Google Translate
