רשימות node-ים סטטיות ודינמיות – הפוסט דן בהבדל בין רשימות NodeLists סטטיות וחיות ו-HTMLCollections ב-JavaScript ונילה.
NodeLists ו-HTMLCollections הם שניהם אוספים של רכיבי DOM, אך שונים באופן שבו הם נוצרים ומתעדכנים. NodeLists נוצרות באמצעות שיטת querySelectorAll() והן סטטיות, כלומר אינן מתעדכנות אוטומטית אם ה-DOM משתנה. מצד שני, HTMLCollections נוצרים באמצעות מאפיינים כמו document.links או document.forms, והם חיים, כלומר הם מתעדכנים אוטומטית כאשר ה-DOM משתנה.
המאמר ממשיך ומסביר שלמרות ש-HTMLCollections נוחים כי הם מתעדכנים אוטומטית, הם יכולים להיות גם בעייתיים כי הם עלולים להשתנות באופן בלתי צפוי ולגרום לבאגים בקוד שלך. לעומת זאת, NodeLists יותר צפויים מכיוון שהם סטטיים ולא ישתנו אלא אם תעדכן אותם במפורש.
בסך הכל, חשוב להבין את ההבדלים בין שני סוגי האוספים הללו כדי לבחור את המתאים ביותר לצורך שלך.
הבטחות JS – ה]פוסט דן בהבטחות JavaScript, שהן דרך לטפל בפעולות אסינכרוניות ב-JavaScript.
הבטחות (promises) הן אובייקטים המייצגים ערך שאולי עדיין לא יהיה זמין, אך יקבל ערך בשלב מסוים בעתיד. כאשר יוצרים הבטחה, מעבירים פונקציה (המכונה פונקציית executor) המגדירה את המשימה שתבוצע באופן אסינכרוני. אובייקט ההבטחה המוחזר על ידי פונקציית המשימה יהיה באחד משלושת המצבים: בהמתנה, התקיים או נדחה.
כאשר הבטחה מתקיימת, זה אומר שהערך שהיא מייצגת זמין, והמתודה then() של ההבטחה נקראת עם הערך שהתקבל. אם ההבטחה נדחתה, זה אומר שהייתה שגיאה, ומתודת ה-catch() של ה-Promise נקראת עם סיבת הדחייה.
המאמר דן גם ב-Promise chaining, שהיא דרך לשרשר פעולות א-סינכרוניות מרובות יחד בשיטת then() . כאשר משרשרים יחד הבטחות, אפשר להעביר את התוצאה של הבטחה אחת להבטחה הבאה בשרשרת, מה שמאפשר לבצע מספר פעולות ברצף.
בסך הכל, הבטחות הן כלי רב עוצמה לטיפול בפעולות אסינכרוניות ב-JavaScript, והן נמצאות בשימוש נרחב בפיתוח אינטרנט מודרני. הבנת הבטחות חיונית לבניית יישומי אינטרנט חזקים וניתנים להרחבה.
ויזואליזציה של לולאת האירועים ב-JS – המאמר מסביר את ה-JavaScript Event Loop, שהוא מנגנון המשמש את JavaScript לניהול פעולות א-סינכרוניות ולטפל באירועים.
לולאת האירועים היא לולאה שבודקת כל הזמן את מחסנית הקריאות ואת תור ההודעות. מחסנית הקריאות היא מבנה נתונים שעוקב אחר הפונקציות שמתבצעות כעת. כאשר פונקציה נקראת, היא מתווספת לראש מחסנית הקריאות. כאשר הפונקציה מסתיימת, היא מוסרת ממחסנית הקריאות.
תור ההודעות הוא מבנה נתונים המאחסן הודעות או אירועים הממתינים לעיבוד. כאשר מתבצעת פעולה אסינכרונית, היא מתווספת לתור ההודעות יחד עם פונקציית התקשרות חוזרת. כאשר ערימת הקריאות ריקה, תור ההודעות נבדק. אם יש הודעות ממתינות בתור, ה-Event Loop לוקח את ההודעה הראשונה ואת פונקציית ההתקשרות חזרה המשויכת לה ומוסיף אותה לערימת השיחות.
הפוסט מסביר את פעולת ה-setTimeout() שבעצם מחבר בין התור לבין המחסנית. יש בפוסט הרבה איורי הדגמה, וגם הדגמות קוד. המאמר מספק הסבר ברור וויזואלי של לולאת האירועים, מה שמקל על ההבנה למתחילים.
event delegation – המאמר שסיפקת דן בהאצלת אירועים ב-JavaScript ומתי להשתמש בו.
האצלת אירועים היא טכניקה שבה במקום לצרף מאזין אירועים לכל אלמנט בודד, אתה מצרף מאזין אירועים בודד לאלמנט אב ומטפל באירועים על האלמנטים הצאצאים שלו באמצעות הצפת האירועים (bubble).
האצלת אירועים יכולה להיות שימושית בתרחישים שבהם יש לך מספר רב של אלמנטים שצריכים מאזינים לאירועים. במקום להוסיף מאזין אירועים לכל אלמנט בודד, אתה יכול להוסיף מאזין אירועים בודד לאלמנט אב ולטפל באירועים על כל האלמנטים הצאצאים שלו.
האצלת אירועים שימושית גם כאשר אתה צריך לטפל באירועים באלמנטים שנוצרו או הוסרו באופן דינמי מה-DOM. מכיוון שאינך צריך להוסיף מאזין אירועים לכל רכיב בודד, אינך צריך לדאוג לגבי הוספה או הסרה של מאזיני אירועים כאשר אלמנטים מתווספים או מוסרים מה-DOM. יתרון נוסף הוא חיסכון בזיכרון, מאחר שכל מאזין אירועים צורך זיכרון של הדפדפן.
בסך הכל, האצלת אירועים היא טכניקה רבת עוצמה ב-JavaScript ויכולה לעזור לך לכתוב קוד יעיל וניתן להרחבה יותר. חשוב להבין מתי להשתמש בו ומתי לא להשתמש בו כדי להבטיח שהקוד שלך יפעל בצורה חלקה ויעילה.
בין לאומיות נוסח JS – האתר Intl Explorer הוא כלי להתנסות בממשק API של ECMAScript Internationalization. ה-API זמין תחת מרחב השמות Intl ב-JavaScript ומספק השוואת מחרוזות מותאמת לשפה, עיצוב מספרים ועיצוב תאריך ושעה.
Closure-ים ושימוש פרקטי בהם – סגירה (closure) היא תכונה ב-JavaScript המאפשרת לפונקציה לזכור את המשתנים והפונקציות שהיו בתחום (scope) שלה כאשר היא נוצרה, גם אם המשתנים והפונקציות הללו כבר אינם בתחום. זה אפשרי מכיוון שסגירה “סוגרת” את המשתנים והפונקציות בתחומה, ויוצרת התייחסות אליהם שניתן לגשת אליה גם לאחר סיום ביצוע הפונקציה המקורית.
המאמר ממשיך ומסביר כיצד ניתן להשתמש בסגירות בתרחישים מעשיים, כגון יצירת משתנים ופונקציות פרטיות. על ידי יצירת סגירה סביב פונקציה, ניתן ליצור משתנים ופונקציות שנגישים רק בתוך התחום, ולא מבחוץ. זה יכול לעזור למנוע התנגשויות שמות ולשפר את ארגון הקוד.
ניתן להשתמש בסגירות גם ליצירת פונקציות המחזירות פונקציות אחרות. על ידי החזרת פונקציה מפונקציה אחרת, ניתן ליצור פונקציה ניתנת לשימוש חוזר שניתן להתאים אישית על סמך הפרמטרים שהועברו אליה.
הפוסט לא ארוך, והוא מלווה בדוגמאות קוד מוסברות היטב.
10 קיצורי דרך מדהימים ב-JS – המאמר דן ב-10 טכניקות קיצור של JavaScript שיכולות לעזור לפשט את הקוד ולהפוך אותו לתמציתי יותר.
Ternary Operators: האופרטור השלישוני הוא דרך קיצור לכתיבת משפט if/else בשורת קוד אחת. נדרשים שלושה אופרנדים: תנאי, ערך מוחזר אם התנאי מתקיים, וערך מוחזר אם התנאי אינו מתקיים.
Nullish Coalescing: אופרטור האיחוד הריק (??) הוא דרך קיצור לבדוק אם ערך הוא ריק או לא מוגדר ולספק ערך ברירת מחדל אם כן.
Optional Chaining: אופרטור השרשור האופציונלי (?.) הוא דרך קצרה לבדוק אם קיים מאפיין באובייקט לפני הגישה אליו. זה יכול לעזור במניעת שגיאות שנגרמות מניסיון לגשת למאפיין שאינו קיים.
Arrow Functions: פונקציות חץ מספקות דרך קצרה לכתיבת ביטויי פונקציה. הם יכולים לעזור להפוך את הקוד לתמציתי יותר וקל יותר לקריאה.
Template Literals: דרך מקוצרת לשרשור מחרוזות ב-JavaScript. ה-Template Literals יכולים לכלול משתנים וביטויים בתוך מחרוזת מילולית, מה שמקל על יצירת מחרוזות דינמיות.
Object Property Shorthand: קיצור מאפיין אובייקט הוא דרך קיצור להגדרת מאפייני אובייקט. אם למפתח ולערך של מאפיין אובייקט יש אותו שם, ניתן להשמיט את הערך ו-JavaScript יצור אוטומטית מאפיין עם אותו שם וערך.
Spread Operator: אופרטור ההתפשטות (…) הוא דרך קצרה לפיזור האלמנטים של מערך או אובייקט. ניתן להשתמש בו כדי להעתיק מערכים, למזג מערכים או להוסיף אלמנטים למערך.
Destructuring: ביטול מבנה הוא דרך מקוצרת לחילוץ ערכים ממערכים ואובייקטים. נועד להפוך את הקוד לקריא יותר.
For…of Loops: לולאה מסוג for…of היא דרך מקוצרת לעבור בלולאה על אלמנטים של מערך. זה יכול לעזור להפוך את הקוד לתמציתי וקריא יותר.
Shorthand Property Methods: מתודות מאפיין הן דרך מקוצרת להגדרת מתודות באובייקט. אם למפתח ולערך של מאפיין אובייקט יש אותו שם, ניתן להשמיט את מילת המפתח והנקודתיים של הפונקציה, ו-JavaScript יצור אוטומטית מתודה עם אותו שם וערך.
בסך הכל, טכניקות הקיצור הללו יכולות לעזור להפוך את קוד JavaScript לתמציתי, קריא ויעיל יותר. עם זאת, חשוב להשתמש בהם בתבונה ולא להקריב את הקריאה למען הקיצור.
הסבר על promises כאילו שאנחנו בני 5 – הפוסט מביא את השיר על ג’ק וג’יל (Jack and Jill went up the hill) כמשל, ואז מראה איך ה-promise הוא נמשל.
איך לבנות UI מ-JS יציב – מאמר זה מדבר על איך לבנות ממשקי משתמש עמידים ב-JavaScript. ממשק משתמש גמיש הוא כזה שמסוגל להתמודד עם שגיאות או חריגים בלתי צפויים, ולהמשיך לתפקד כראוי עבור המשתמש.
המאמר מספק מספר טיפים לבניית ממשקי משתמש עמידים, כולל: מתן התייחסות שונה לדגיאות לפי רמת הההשבתה שלהן את המשתמש; העדפה של מניעה על פני פתרון; ועוד סוגיות של טיפול בשגיאות על ידי המפתחים.
שרשרת ההבטחה של JS – הפוסט שכותרתו “שרשרת ההבטחות של JavaScript: אמנות הטיפול בהבטחות” דן כיצד לעבוד עם הבטחות ב-JavaScript, במיוחד עם השרשור של הבטחות.
המאמר מתחיל במתן מבוא קצר להבטחות ולמה הן שימושיות בתכנות אסינכרוני. לאחר מכן הוא ממשיך לדון כיצד ניתן לשרשר הבטחות יחדיו כדי ליצור רצף של פעולות אסינכרוניות שיש לבצע בסדר מסוים.
לאחר מכן, המחבר מספק מספר דוגמאות כיצד ניתן לשרשר הבטחות יחד באמצעות שיטת .then() . הם גם מסבירים כיצד לטפל בשגיאות בשרשרת ה-Promise באמצעות שיטת .catch() . הפוסט מביא חמישה טיפים לעבודה נכונה עם הבטחות, וגם מביא דוגמת קוד מההתחלה ועד הסוף.
מה זה serverless – המאמר “מהו ללא שרת?” מאת Chris Ferdinandi באתר gomakethings.com מספק מבוא למושג מחשוב ללא שרת וליתרונותיו.
המחבר מתחיל בהסבר שמחשוב ללא שרתים הוא דרך לבנות ולהפעיל יישומים ושירותים ללא צורך בניהול התשתית או השרתים המארחים אותם. הוא מפרט כמה פרטים טכניים חשובים: ספקים שונים תומכים בשפות שונות; פונקציות ללא שרת רצות רק כשהן נדרשות; פונקציות ללא שרת הן stateless; וספקים רבים מספקים גם שירותי DB. הפרט הכי חושב הוא: גם ב-serverless יש שרת – השרות נקרא כך משום שזו חוויית המשתמש, שבה הוא לא צריך לחשוב על השרת.
*
בפוסט הזה נעזרתי ב-chatGPT 3, ואומנם היה בזה עזר מסוים, אבל היו מקומות שהם הוא המציא מידע שלא היה קיים בפוסט, ובאתר Intl Explorer צ’טג’יפיטי חשב שזה אתר נסיעות, והסביר לי שיש בו פרטי טיסה, מלונות, השכרת מכונית, אטרקציות ועוד. נעזרתי גם ב-Google Translate וגם שם כצפוי הייתי צריכה לערוך תיקונים מסוימים.
