לעשות media-queries ב-CSS אנחנו כבר יודעים. אבל לפעמים עולה הצורך להריץ קוד JavaScript שונה ברזולוציות נמוכות יותר. לשם כך יש breakepoint-ים. המאמר הזה מדבר על דרך אחת לממש אותם. חוץ מזה, ישנה הפונקציה ()window.matchMedia
שנועדה לכך במיוחד ונתמכת באופן די נרחב. ומה עם innerWidth? מתברר שבהשוואת ביצועים, matchMedia
עדיפה.
בד”כ אני לא אוהבת מאמרי “כך תתכוננו לראיונות עבודה”, אבל המאמר הזה, על אף שהוא קרוי כך, למעשה מדבר על קונספטים שונים של JavaScript ומה כדאי לדעת עליהם.
יש מלא מאמרים שמסכמים את התכונות החדשות של ES6. סמשינג מגזין, כדרכו, מסביר בצורה ברורה ונעימה כמה מהתכונות הללו (let, פונקציות חץ,Template Literal ועוד). מאמר אחר, נוח במיוחד לקריאה, מסכם את EC6 עם 350 (!) בולטים. לי אישית קל יותר לרפרף ככה, והדברים המעניינים באמת, קופצים לי לעיניים.
פנייה ל-DOM מתוך JavaScript היא די פשוטה. יש פונקציות בסיסיות: getElementsByTagName()
, getElementById()
, el.appendChild()
, querySelector()
, ועוד. ב-DevConf 2015 היתה הרצאה של לואיס לאזאריס – האיש מאחורי Web Tools Weekly – על פונקציות DOM פחות מוכרות, כגון insertAdjacentHTML()
, getBoundingClientRect()
, ועוד פונקציות מגניבות שלא הכרתי. הקישור הוא לשקפים שלו, ומתחתם יש רשימה של כל הפונקציות המוזכרות בהרצאה עם קישורים ל-MDN, וכמו”כ קישורים לקריאה נוספת. מומלץ!
האם להשתמש ב-let, const או var ב-ES6? מאמר קצר וברור על היתרונות של כל אחד מהם (למעט var, שבו המחבר לא להשתמש כלל…).
ועוד מאמר קצר אך מעניין על סוגים שונים של רנדומליות ב-JavaScript.
לגבי JS רספונסיבי, מגניב והכול אבל מה רע ב־window.innerWidth?
שאלתך הזכירה לי ששכחתי לציין דרך נוספת למימוש media query, שהיא windw.matchMedia. עדכנתי את הפוסט, והוספתי קישור להשוואה בין הדרך הזאת לבין window.innerWidth…
לא הכרתי את matchMedia. למדתי היום משהו חדש ושימושי.
יש! שמחתי לערוך את ההיכרות ביניכם 🙂
ומאמר מבית sitePoint על matchMedia, נכון ל-2018.
https://www.sitepoint.com/javascript-media-queries