כשמילה שמורה חוזרת על עצמה, פונקציות חץ, דברים שנלמדים באופן בלתי צפוי, ועוד ממתקי פרונט אנד

 JavaScript

• רנדומליות ב-CSS עם JS – כשעושים מספרים רנדומליים ב-CSS (למשל nth-child רנדומלי, או אורך הרצה של אנימציה), זה נשאר סטטי אחרי ההגדרה הראשונה. ואם רוצים שהמספר הרנדומלי ישתנה באופן דינמי? בשביל זה כבר צריך JS. כשהעברתי לרחלי את הפוסט הזה לקריאה לפני פרסום (כמו שאני נוהגת לעשות עם רוב הפוסטים שלי) היא הוסיפה את הדגש הבא: מה שיפה בזה זה שיש אפשרות לעשות מניפולציה על ה CSS עם JS בזכות שימוש ב css variables. ועצם השימוש ב JS לא דורס או משנה את ה CSS אלא מעשיר אותו! אחת היכולות הגדולות של css variables היא שניתן להגדיר דברים ב CSS, ואח”כ לעבד אותם או להרחיב את השימוש באנימציות וכו’ על ידי JS. בהרצאה של לאה ורו היא מציינת את זה שזה מציין במקרה שיש צוות אחד שאחראי על ה JS, ומי שמטפל ב-CSS לא נוגע ב-JS אז התקשורת ביניהם קלה יותר, רק אחד מעביר לשני את השמות ובעצם לא נוגעים אחד לשני בקבצים.
• איך לכתוב JS נגיש – מאמר יפה על איך אפשר לעשות זאת, כולל דוגמאות.
• איך לעשות מניפילציות על ה-DOM בלי jQuery – איך לקבל אלמנט מסוים, או קבוצת אלמנטים, איך לעבור בין אחים ובין ילדים, לשנות קלאסים, לגעת במאפיינים של אלמנטים, ועוד ועוד, ללא נגיעה ב-jQuery.
• דברים מעניינים קורים כשמשתמשים במלים שמורות כמה פעמים ברציפות ב-JS, למשל let let.
• שני מאמרים של ג’יימס סינקלר על JS – אחד מראה את הלוגיקה ב-map, reduce ו-filter בכך שהם מצמצמים את הצורך בלולאות, והשני מראה איך לוותר על if-ים. שניהם מעניינים ולא ארוכים.
• סקריפט מדליק בטוויטר – סיפור (קצר) על XSS בטוויטר.
• אני לא מתעייפת מלקרוא שוב ושוב על פונקציות, אופרטורים ומילות מפתח ב-JS. לכן נהניתי מאוד מהפוסט הזה על חידושים שכאלה ב-es6. וגם הפוסט הזה מדבר על חידושים ב-es6 (שמתברר שבינתיים שינו לו את השם ל-es2015). ובפוסט הזה מוסברות פונקציות חץ. אני ממש מכורה למאמרים האלה כשהם מסבירים דברים בצורה קצרה, מעניינת וברורה, ועם מלא דוגמאות.
• וגם הסברים על callback הם מעניינים, במיוחד כשמסבירים אותם יפה, כמו כאן.
• אוסף ספריות פרונט אנד (גם JS וגם CSS), עם אפשרות חיפוש באוסף.
• web components – הסבר יפה מה זה, למה זה טוב, איך זה עובד. כתוב בצורה קלילה.
• shorthand coding – קיצורי קוד ב-JS – הפשוטים שבהם הם שימוש ב-Ternary Operator או ב- ||, המתקדמים יותר מדברים על הגדרת מאפייני אובייקט ועוד דברים מגניבים שאפשר לעשות באובייקטים ובפונקציות. שווה לפחות הצצה, ואולי אפילו קריאה. כתוב די תמציתי.
• קורס קצר בניהול זכרון עם תמונות אילוסטרציה. גם מעניין וגם לא קשה (נועד גם למי שכבר יודע).
• האתר CodeFights יצר קטגוריה שבה הוא פותר שאלות JavaScript ששואלים בראיונות. הפתרונות מלווים כמובן בהסברים ובגרפים במקרה הצורך. לגזור ולשמור.
• ורק שאלות (אבל טובות) שעשויות להישאל בראיון פונט-אנד.
• סקירה של הפריימוורקים השונים (Ember, React, Angular), האבולוציה של כל אחת מהן, ומהן החוזקות והחולשות של כל אחת.

css

• כשאספתי חומרים לפוסט הזה הצטברו אצלי הרבה קישורים בנושא ה-grid – מאפיין ה-CSS. כשדיברתי על זה עם רחלי התברר שגם היא אוספת קישורים בנושא, והחליטה לכתוב פוסט שמאגד אותם. כדרכה, הפוסט כתוב ברהיטות ומשאיר אותנו עם חשק להתנסות. תהנו!
• מאמר של מישהו שבנה תשבץ – כולל בדיקת הקלט! – ב-CSS בלבד.
• הרצאה קצרה ומעניינת על מקומם של CSS ו-JS אחד ביחס לשני – כמו שני גיבורי על.
• כמה טכניקות לעשות דברים באמצעות CSS:
  • הצגת שגיאות HTML בעזרת CSS.
  • איך לגרום לאלמנטים לחרוג מהתוכן באמצעות not.
  • שימוש ב-transtions לאנימציות מלאות חיים, ולמעברי עכבר מגניבים.
  • רשימות עם unicode – יש שם רעיונות לסמלים מדליקים!
• משחק flexbox – צריך להגן על הטריטוריה מפני אויבים, ע”י הצבת מגדלי השמירה באמצעות flex.
• 11 דברים שאיש אחד למד מה-spec של flex – כתוב מעולה.

כל מיני פרונט-אנד

• אוסף קטעי קוד של אלמנטי FrontEnd חינמיים (טפסים, תפריטים, גלריות, המבורגרים ועוד).
• מיניפיקציה של CSS על סטרואידים – איש אחד החליט להריץ כמה מיניפיקציות זו אחרי זו על קבצי CSS, ותיעד את הניסוי ואת תוצאותיו.
• spec חדש ל-HTML5 שהייחוד שלו הוא שהוא נועד לפיתוח בעזרת מתכנתים. נשמע מעניין.
• כללים טובים לשימוש בפרויקטים בשלל תחומי תכנות – git, javascript, ועוד. לכל כלל יש הסבר קצר וברור שנעים לקרוא.
• MDN עובדים על חידוש דפי התיעוד של CSS ו-JS – במקום שתהיינה בכל ערך רק דוגמאות סטטיות, הם מכניסים עורך שיכול להריץ קטעי JS או CSS. הם עושים a/b testing עם זה, כך שכשאתם נכנים לדף תיעוד, יש סיכוי של 50% שתתקלו בעורך. אם אתם רוצים לודא שתקבלו עורך, תוודא שהערך של ה-query parameter הוא v=b.
  במסגרת העיצוב מחדש הם גם מפנים עוד מקום לדוגמאות.
  ודבר אחרון מבית מוזילה – 9 דברים שלא ידעת על Firefox Dev Tools.