אחרי-החגים שמח!

מאמר מומלץ של Kent C. Dodds על טעויות נפוצות בטסטים לאפליקציות ריאקט. 🧪

המאמר מביא כל טעות עם דוגמה, הסבר ורמת חשיבות, ומכסה די הרבה.

https://kentcdodds.com/blog/common-mistakes-with-react-testing-library

(תודה לדביר)

ספריה חמודה בריאקט שמאפשרת לסנכרן כמה croppers סביב נקודת מיקוד מסוימת 📸

https://www.npmjs.com/package/image-focus

(תודה לדניז)

כל שנה, כותבים מוכשרים מכל התחומים עושים מאמץ לפרסם מאמרים כל יום מתחילת דצמבר עד לכריסמס.
אמנם 24Ways האהוב כבר לא יפרסמו השנה תוכן אחרי 15 שנים ברצף, אבל הנה כמה Advent Calendars רלוונטיים סביב פיתוח Web שפעילים כרגע:

🔹 React Christmas (מאז 2017)
🔸 24 days of #JavaScriptmas (אתגרי פיתוח)
🔹 A11y Advent Calendar
🔸 Web Performance Calendar (מאז 2009)
🔹 PWA Advent
🔸 Festive Tech Calendar 2020 (הרצאות, לא רק פרונטאנד)

קריאה מהנה, חורף ממש טוב וחנוכה שמח! ❄️

טיפ CSS: אי אפשר לשלב 0 ללא יחידה בתוך css calc.
לדוגמה: calc(5px + 0px) תקין, אבל calc(5px + 0) לא

✍️ הדגמה כאן: https://codepen.io/RonnyO/pen/bGwrYoz

- מקור ב-spec
- הכלל length-zero-no-unit של stylelint שעשוי להטעות - מומלץ להקיף ב:
/* stylelint-disable length-zero-no-unit */

פיצ׳רים חדשים שצפויים להכנס ל-ES בשנה האזרחית הקרובה, כולל תוספות על Promise, String, Intl ועוד. אפילו Numeric Separators, שכבר כתבנו עליהם לפני חצי שנה, צפויים להיכנס:

https://dev.to/mlarocca/new-features-in-es2021-4e13

שתהיה לכם 2021 ממש טובה, מכולנו ב-Really Good 🎊🍻

אם עבדתם עם צבעים לאחרונה ב-Google Chrome, אולי שמתם לב שלפעמים צבעים כתובים אחרת 🧐

התחביר החדש ל-rgba למשל נראה ככה:

rgb(206 32 42 / 50%)

במקום

rgba(206, 32, 42, 0.5)

הסינטקס הזה נתמך היטב (למעט IE), והוא עקבי בסגנון שלו עם פורמטים חדשים כמו Lab, color(), LCH. אם אתם צריכים תאימות לאחור, כמובן שיש פלאגין של PostCSS לזה.

עוד על כל מה שהתחדש לגבי צבעים ב-CSS:
https://css-tricks.com/the-expanding-gamut-of-color-on-the-web/ 🎨

לרגל אירועי השבוע והחודש, יצרנו משהו קטן ועליז 🏳️‍🌈
שימוש בטקסט כמסכה, svg עם שילוב שקיפות, גרדיאנט מיוחד ואנימציה על background-position.

תציצו ב-codepen:
https://codepen.io/ReallyGood/pen/gOmNJVd?editors=1100 ✍️

כולם כבר הספיקו להעתיק את קלאבהאוס, ועדיין יש דברים מאוד יפים ויחודיים שהם עשו בממשק.

האינטראקציה הקטנה הזו עניינה אותנו, אז יצרנו אותה מחדש ל-Web.

Clubhouse Faux-Justified Interaction — Recreated by Really Good ✍️

מכולנו ב-Really Good, שתהיה לכם ולכן שנה ממש טובה 🍾

תכלה שנה ותקלותיה, תחל שנה ופיצ׳ריה 🍎🍯

שנה טובה! מאמר מאוד מעמיק של אדם ארגייל מצוות Google Chrome על בניה של רכיב קטן אבל ממזרי - כפתור מפוצל עם תפריט.

הכותב נכנס להצללות, אנימציות וכל הטאצ’ים הקטנים וגם לשיקולי נגישות, media queries ועוד - קריאה מומלצת, ויש גם גרסת וידאו.

👉 Building a split-button component

מנסיון, גם לנו יצא לבנות בדיוק כזה ברמה דומה.

טיפ קטן על JSDoc. גם אם אתם לא משתמשים בפורמט התיעוד בדרך כלל, הוא מועיל גם בנקודות ספציפיות, כמו deprecation. הסרטון מדגים איך זה שימושי ונוח ב-VS Code

https://www.youtube.com/watch?v=8dkkyCwbUFM

נרגשים לקבל מרן בר זיק את סדרת ספרי הפיתוח המצוינים שלו, ששמחנו לתמוך בהוצאתה בהדסטארט ולכתוב עבור הספר הראשון פרק (ממש טוב) על Best Practices. ☺️

הספרים כבר עזרו לאלפי מפתחים ומפתחות! הם מומלצים בחום לכל מי שרוצה להיכנס לעולם המהנה והמאתגר של פיתוח Web, כתובים בשפה פשוטה וברורה ונותנים בסיס מצוין להתחיל ממנו.

עוד פרטים כאן: https://hebdevbook.com

לפעמים אנחנו נתקלים בבאג או חוסר בחבילת npm מסוימת, ואין ברירה אלא לתקן אותה עצמאית, אפילו זמנית. דרך המלך היא לייצר פורק ולתקן שם, אבל קל לפספס אם בהמשך הדרך נכנסו שינויים לחבילה המקורית, שאולי מתנגשים או מייתרים את השינוי שלנו. השבוע השתמשנו בפתרון יצירתי אחר, בשם Patch Package.

בגדול, עושים את השינוי ישירות בתוך node_modules, מריצים פקודה ומקבלים קובץ patch שמתאר את השינויים המדויקים שיישמתם. לסיום מוסיפים סקריפט ל-postinstall שידאג להחיל את השינויים שב-patch אחרי כל התקנה, כולל ב-CI, ואף לעדכן אתכם אם השורות הרלוונטיות השתנו וכדאי לבדוק האם השינוי עדיין נחוץ ותקין. עובד נהדר ושווה להכיר

https://www.npmjs.com/package/patch-package

מאמר מצוין על חשיבה קדימה וכתיבת CSS בצורה "מתגוננת". מפרט המון שיקולים שמגיעים לנו כמפתחים מנוסים באופן טבעי ועדיין חלקם מחדשים ויצירתיים. קריאה מומלצת 👇

https://ishadeed.com/article/defensive-css/

חגגנו השבוע מרחוק עשור לרילי גוד 🎂

ההתרגשות גדולה, האנשים והעבודה נהדרים ואנחנו נהנים מכל רגע. תודה לכולכם, יאללה לעשור השני 🥳

חדש ב-Google Docs - תמיכה מובנית ב-Code Blocks!
במקום להרכיב אותם בצורה ידנית ובלי Syntac Highlighting או להשתמש בתוספים או שירותי צד שלישי, עכשיו אפשר פשוט להוסיף בלוקים של קוד למסמכים.

https://workspaceupdates.googleblog.com/2022/12/format-display-code-google-docs.html 📘

ואם זה לא מספיק קל בשבילכם, תדליקו מצב Mardown כדי להוסיף אותם עם שלושה backticks

את GitHub Copilot כבר הכרתם (אנחנו מקווים), עם התוסף הנפרד של צ׳אט תוכלו גם לדבר איתו.

כמו ChatGPT, הוא מבוסס על GPT-4 (וזול יותר ממנו, כלול במנוי של קופיילוט), ומחובר טוב יותר לתוך סביבת הפיתוח שלכם. מומלץ בחום ✨

https://www.youtube.com/watch?v=3surPGP7_4o

מתקינים מכאן:
https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat

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

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

https://www.warp.dev/

(גם זה מתוך שיחת “Coding With Machines” שנערכה אצלנו במשרד לא מזמן. היו שם עשרות לינקים והמלצות, נשלח פה רק חלק קטן)

יום האישה שמח, מכולנו ב-Really Good! 💪
אין זמן מתאים מזה לספר לכן על וובינר נוסף של "נשים בפרונט״ בהובלת נופר ברנס, עבור כל מי שחשבה או שוקלת להצטרף לתחום הפרונטאנד.

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

(תמונת ארכיון להמחשה)