משחקים בארגז החול

מי שמכיר אותי יודע שחול ואני לא ממש חברים טובים. אני מוכנה לסבול אותו בים (ורק שם. נסו פעם לחזור עם ילדים מהים בלי חול 😉 …). אז מה פתאום ארגז חול? כי זה התרגום בעברית, וכמו כל דבר אחר – באנגלית זה נשמע טוב יותר – sandbox. יש הרבה אתרים וכלים שמאפשרים לנו לנסות קטעי קוד, אבל החביב עלי ביותר הוא codepen. אני אוהבת לגשת לשם לנסות css של אלמנט בודד מתוך אתר שהסתבכתי איתו, או לנסות שם משהו חדש לגמרי. מאוד נוח לי הזיכוך שיש שם – אם אני צריכה div, זה כל מה שאני צריכה להכניס. כל המסביב (הגדרות html doc, head, body) נמצא שם בשבילי בלי שאצטרך להקליד אותו. ככה גם ב css – אני יכולה להוסיף בקלות normalize, פריפיקס – הכל בלחיצת כפתור.
אז מגרש משחקים יש לי, עכשיו חסר מה לעשות בו 🙂

לפני כמה חודשים נרשמתי לאתגר יומי ב-css. מעבר לתיוק המיילים שקיבלתי בתיקייה מיוחדת משלהם, לא עשיתי כלום. אז למה נרשמתי? כי איתגרתי את רותם מהקבוצה של css masters בפייסבוק והחלטתי לנסות גם. הבעיה הייתה שלא הייתי ממש פנויה, וגם לא התחברתי מספיק לעניין. אולי הלחץ שכל יום מקבלים מייל עם משימה שיתק אותי והניא אותי מלנסות. כך או כך – אחרי שבוע ביקשתי להסיר את עצמי מרשימת התפוצה וכל העניין פרח מזכרוני.

אלא שמתברר שלא לגמרי (כי אותו רותם התחיל להעלות תוצרי css מהאתגר). וכך, כשהתפנה לי קצת זמן החלטתי לעשות לי אתגר משלי – אחד שלא תלוי במיילים ממישהו אחר ושיהיה על משהו שקרוב ללבי – לָקַחַת תמונה וליצור את כולה רק באמצעות css. נכנסתי לאתר שבו אני מקבלת השראה לעיצובים שלי, הלוא הוא freepik.com, לחפש לי סט איורים ליצור ב-css. הייתי אז שבוע לפני החופשה המשפחתית שלנו, ולכן אין זה מקרי שבחרתי לי את התמונה הזאת:

 

 

התחלתי עם מה שהיה נראה לי הכי פשוט – המשקפיים. בדיעבד, אחרי שעבדתי כבר על כמה אלמנטים מהתמונה, הבנתי שהיו דברים פשוטים יותר (כמו המזוודה), אבל המשקפיים היו ללא ספק התחלה נחמדה. בעבודה שלי על יצירת האיורים ניסיתי להמנע ככל האפשר מעודף div-ים והשתמשתי ככל האפשר בפסודו אלמנטים של before ו-after. בהתחלה ניסיתי לשמור על ערכים של גדלים דינאמיים (בדר"כ באחוזים), אבל איפשהו במהלך הדרך זה נהיה מייגע, במיוחד שלא היה לי איזה חזון (או צורך) לשינויי גודל. ככל שהתקדמתי עם האלמנטים כך גבר השימוש שלי בפיקסלים והשלמתי עם זה. פיקסלים זו לא מילה גסה, כי זה רק מִשחק במגרש משחקים ולא משהו ש"עולה לאוויר" ומשרת מכשירי קצה. היו לי מספיק אתגרים מסביב כך שהעדפתי להתרכז בהם ולא בשמירה על דינאמיות. לפני כמה ימים לאה שלחה לי לינק ל-codepen של אוטובוסים שנוצרו ב css והם רספונסיביים. כבר נתקלתי בו בעבר אבל לא הקדשתי לו יותר מדי מחשבה. עכשיו אני שומרת לי אותו לעתיד, אולי יום אחד אחזור ואהפוך את האלמנטים לרספונסיביים 🙂

אתגרים בדרך…

אתגר ראשון -css variables

אחרי שבחרתי בקלות את התמונה והתחלתי לעבוד על ה-css היה ברור לי שאני מנצלת את העבודה הפעם להתנסות ב-css variables, ולכן אני מכתירה אותם בתור האתגר הראשון. אני לא אפרט עליהם אבל מי שרוצים לקרוא או לצפות בצילום של הרצאות מעניינות, יכולים פה:

• פוסט הסבר מצויין של Una
• פוסט על למה צריך להיות אכפת לנו מ-css variables
• על ההבדל בין css variables לבין משתנים של פריפרוססורים.
• הרצאה מרתקת של Lea Verou על משתנים ב-css.
• על הכוח של משתני css
• שימוש במשתנים ליצירת אנימציה
• אחרון חביב- להשראה: אקורדיון שנוצר עם DIV אחד והרבה משתנים 🙂 אפשר גם לקרוא על תהליך העבודה.

אני לא חושבת שמיציתי את השימוש בהם או ביכולות שלהם, אבל בשביל התחלה זה היה נחמד מאוד.
אחד היתרונות שהתגלה בדיעבד בתמונה שבחרתי הוא הפלטה הצבעונית. לא היו הרבה צבעים וכך היה לי מאוד קל להשתמש במשתנים בשביל שמות הצבעים. הרבה יותר קל לזכור pink ו-dark-pink מאשר את הקוד ה-הקסאי שלהם 🙂 ביצירת גראדיאנטים ו-box-shadows מורכבים שבהם יש חזרה על ערך של מספר, שימוש ב-css-variables מאוד הקל עלי:

/* VARIABLES */
:root {
 /*colors:*/
 --very-dark-pink: #b2184e;
 --dark-pink: #ca325b;
 --pink: #e55171;
 --orange: #f68f19;
 --yellow: #fcbb21;
 --dark-blue: #139da7;
}
/*STYLE*/
background-image: linear-gradient(
 to bottom,
 var(--white) 50%,
 var(--dark-pink) 50%,
 var(--dark-pink) 65%,
 var(--pink) 65%,
 var(--pink) 100%
 );

שימוש נוסף שלמדתי תוך כדי תנועה היה האפשרות לתת למשתנה ערך חדש בתוך class. מה זאת אומרת? תחת :root הגדרתי את המשתנה --size ונתתי לו ערך של פיקסל 1. אבל הרבה אלמנטים שלי היו ריבועיים – זאת אומרת שהרוחב והגובה שלהם היה זהה – ולכן כדי להימנע מלחזור פעמיים על אותו מספר פיקסלים, או לעשות שינוי בשני מקומות, הגדרתי מחדש את size בתוך הגדרת אותו אלמנט (ההגדרה החדשה תקפה רק מקומית לקלאס הזה) ונתתי לגובה ולרוחב את size בתור ערך. ואם זה לא מובן – קטע הקוד הבא יבהיר את העניין:

/* VARIABLES */
:root {
--size: 1px;
}
/*STYLE*/
.lens:before {
....
 --size: 12px;
 width: var(--size);
 height: var(--size);
}

הערת שוליים (לא ממש קשורה למשתנים אבל קשורה בעקיפין לעניין החזרתיות) – היה חשוב לי לשמור על קוד מסודר וקל לתחזוקה (ולצערי לא תמיד עמדתי בזה). העדפתי להשתמש בהגדרה במקום אחד וירושה שלו במקום אחר. למשל box-shadow ו-border יורשים באופן דיפולטי את ה-color של ה-div. בדוגמה הבאה ניתן לראות איך בקלות אפשר לשנות את הצבע של כל ה-box-shadow-ים, כי box-shadowבעצם משתמש במה שמוגדר ב-color.

div{
color: var(--pink);
border: 1px solid;
/*long line and more work for maintaining*/
box-shadow: 10px 0 0 0 var(--pink), 40px 0 0 0, 70px 0 0 0 var(--pink);
/*short and maintainable*/
box-shadow: 10px 0 0 0, 40px 0 0 0, 70px 0 0 0;
}

 

אתגר שני – צורות

בעבודה שלי בשוטף, אני בדרך כלל לא נתקלת בצורך לייצר צורות בעזרת css. כן, יצא לי הרבה פעמים להגדיר border-radius: 50% כדי ליצור מעגל (במיוחד לתמונות), או ליצור משולשים שונים, אבל לא מעבר לכך. באיורים שיצרתי כמעט שלא היה איור שהיה מרובע פשוט. השתמשתי המון ב border-radius, לפעמים באחוזים לפעמים בפיקסלים. בחלק מהצורות הגדרתי ערך אחיד לכל הפינות ובאחרים ערך שונה לכל פינה. שכחתי כמה עשיר הנושא של border-radius. חזרתי 3 שנים אחורנית, נזכרת בעצמי צופה מוקסמת בהקלטה של  Lea Verou על The Humble Border-Radius. ממליצה בחום – גם אם עברו כמה שנים טובות מאז הכל שם עדיין רלוונטי (אולי חוץ מהפריפיקס 😉 )

מעבר לשימוש ב-border-radius השתמשתי הרבה במשולשים (לשם כך נעזרתי הרבה ב-CSS triangle generator). למדתי שאפשר ליצור טרפז גם על ידי שימוש במשולשים – אפשר לקרוא על זה פה – וגם על ידי שימוש ב-transform: perspective() rotateX(). אפשר לקרוא הסבר על כך פה.

בצורות מורכבות מדי, כמו המטוס בכרטיס טיסה הוורוד או האייקון של הגלובוס, ויתרתי מראש על יצירה ב-css והשתמשתי ב-inline svg.

 

אתגר שלישי – כמה שפחות div-ים

למה? בעצם אין ממש סיבה. ממילא כבר יצרתי פה משהו שלא נגיש בעליל ובלי שום משמעות סמנטית, אז למה להתקמצן? אני חושבת שזה טבוע בי, לא להוסיף "סתם" אלמנט html רק בשביל העיצוב כשאין לו משמעות סמנטית. ממילא before ו- after אהובים עלי, והאתגר ליצור כמה שפחות עיטופים היה נחמד. חלק מה-div-ים שהוספתי היו הכרחיים מכורח ריבוי האלמנטים שהייתי צריכה ליצור, וחלק מהעיטופים שיצרתי היו מיותרים, אבל הם פתרו לי את בעיית ה-z-index שנתקלתי בה. חשבתי שאני פחות או יותר שולטת בנושא, אבל טעיתי. ואם הייתי לגמרי מבינה מה הולך שם – הייתי מביאה הסבר חביב, אבל לצערי אני לא. מי מכם שרוצה – מוזמן לקרוא את הפוסט המצויין הזה על z-index. עוד פוסטים על הנושא מרכזת לאה כהן בפוסט על דברים שלא ידענו על z-index

טריק חביב שהשתמשתי בו כדי ליצור כמה אלמנטים בסלקטור אחד היה שימוש ב-box-shadow מרובה. למה הכוונה? box-shadow מקבל את הרוחב ו/או הגובה של האלמנט (תלוי לאן מסיטים אותו), זאת אומרת שאם האלמנט שלי ברוחב של 20 פיקסלים ואני מסיטה את ה-box-shadow ב-20 פיקסלים למטה – אני אקבל שכפול של האלמנט. ככה למשל יצרתי את הפסים של כרטיס הטיסה הוורוד.

.flying-ticket:before {
 width: 20px;
 height: 3px;
 color: var(--dark-pink);
 box-shadow: inset 0 4px 0 0, 0 5px 0 0, 
                   20px 5px 0 0, 0 10px 0 0, 
                   20px 10px 0 0, 63px 0px 0 0, 
                   63px 3px 0 0, 63px 6px 0 0, 
                   63px 9px 0 0;
}

גם כדי ליצור את ההברקה של המצלמה השתמשתי ב-box-shadow שקיבל את הצורה העיגולית שלו ופשוט הצמדתי אחד אחרי השני עם הסטות למעלה ושמאלה כדי ליצור צורה דומה למה שהיה באיור המקורי.

 

 

עוד אפשרות לחסוך אלמנטים ביצירת פסים היה השימוש ב-linear-gradient שיוצר פסים. ישנם 2 אופנים ליצור את הפסים החוזרים: אחד ע"י הגדרת גראדיאנט חוזר (ניתן לראות שימוש בחלק העליון של המצפן) והשני ע"י שימוש בהגדרת background-size ששולט על גודל ה"תמונה הראשונה" הלוא היא הערך הראשון של צבע בגראדיאנט, וה"תמונה השנייה"  – הצבע השני של הגראדיאנט (ניתן לראות דוגמה לשימוש בקווים המפרידים של כרטיס הטיסה הוורוד)

/*first option (used to make the vertical lines in the top part of the compass):*/
background-image: repeating-linear-gradient( to left,
                                             transparent, transparent 5px, 
                                             var(--very-dark-blue) 7px, var(--very-dark-blue) 8px);
/*second option (used to make the dashed lines in the airline ticket):*/
 background-image: linear-gradient( to bottom, var(--dark-pink) 50%, transparent 50% );
 background-size: 100% 8px;

 

אתגר רביעי – scss

לא התחלתי עם scss אלא עם css כי עדיין אני מרגישה איתו יותר נוח. אבל אחרי שסיימתי והפריע לי שדברים חזרו על עצמם עשיתי fork ל-pen שלי והעברתי את הכל ל-scss. הגדרתי נכון את השרשור של פסודו-אלמנטים ויצרתי mixin. אני מניחה שיש הרבה דברים שיכולתי לעשות כדי לקצר ולהיטיב את הקוד שלי עוד יותר, אבל גם זמן הוא מצרך יקר, והזמן הפנוי שלי תם ולכן לא המשכתי.

 

אתגר חמישי – כתיב

האתגר החמישי והאחרון, שלא ממש ראוי להיות אתגר – במיוחד לאור העובדה שלא ממש עמדתי בו – הוא כתיבה נכונה. לא לא, אני לא מתכוונת לסדר של המאפיינים, או לבחירת מאפיינים נכונים או שמות של קלאסים אלא ממש כתיבה נכונה – אחת כזאת בלי שגיאות. בעוונותיי, שגיאות כתיב או התפלקות אותיות מקלדת הן דבר שבשיגרה. אין ספור הודעות ששלחתי בסלאק או בווטסאפ כללו אין ספור טעויות מקלדת או 'שגיעוט קתיב' כמו שאומרים אצלנו. מצד שני, שם זה נסלח כי אפשר לשלוח מילה עם כוכבית ותיקון. ב-codepen אחד הפיצ'רים שהיו ממש חסרים לי הוא השלמה אוטומטית של מאפיינים. וכך קרה ששוב ושוב מאפיינים שכתבתי לא תפסו ורק בדיקות בכלי הבדיקה של הדפדפן העלו את התוצאה העגומה של מאפיין עם קו חוצה ומשולש אזהרה צהוב שצועק עלי – "זה לא מאפיין!!". בסופו של דבר עבדתי עם העורך של codepen ובמקביל כתבתי מאפיינים בהשלמה האוטומטית של ה Dev-tools של כרום. עקום קצת אולי, אבל כל פעם שמשהו לא נראה כמו שציפיתי שיהיה – זאת בדר"כ הייתה הסיבה. מה עושים?

• מפסיקים להשתמש במשלימים אוטומטיים ומתרגלים שוב ושוב כתיבה תקינה (אופציה זאת ירדה מהשולחן עוד לפני שסיימתי לכתוב אותה…).
• חיים עם זה, משלימים עם נטייה לאיות לא נכון, ואיזה מזל שיש משלימים אוטומטיים 😉

 

See the Pen SCSS Freepik icons by Rachel Bratt Tannenbaum (@rachelbt) on CodePen.

 

לאורך כל העבודה שלי על יישום האיורים נעזרתי המון בגוגל, השתמשתי בהרבה כלים שמייצרים קוד (משולשים, גראדיאנטים ועוד), הגעתי להרבה פתרונות בזכות שאלות שנשאלו ונענו ב Stack Overflow (כמו למשל כשחיפשתי דרך לייצר את הברק על העדשה של המצלמה נתקלתי בפתרון ליצירת חיוך). גם pen-ים שונים ב-codepen עזרו לי – כמו למשל ה-pen הזה ליצירת כדור פורח. תמיד השתדלתי לפתור כל אתגר לבד, אבל אחרי מיצוי, רשת האינטרנט הפורה אפעם לא הכזיבה 🙂

בשורה התחתונה – אין באמת צורך בכל האיורים ה-css-יים האלה. בטח תרימו גבה בהשתאות ותשאלו – אז למה בכלל עשית אותם? מכמה סיבות:

• הראשונה – היה לי כיף. וחשוב לעשות דברים בשביל הכיף!
• השנייה – האתגר.
• השלישית – גם אם אין משמעות "שימושית" למה שנעשה, יש משמעות לתרגול של מאפייני css שלא תמיד משתמשים בהם. יש חשיבות בניסוי ובחינה של מאפיינים חדשים וכאלה שלאו דווקא נתמכים בכל דפדפן. היה לי העונג להשתמש במשתני css, בפילטרים ובעוד מאפיינים, ללא הצורך לדאוג ל-fallback או לתאימות למכשירי קצה. מה שעבד בכרום שלי – מבחינתי תפס. מה שנחמד הוא שבאיזשהו שלב פתחתי את ה-codepen שלי גם בפיירפוקס וגם באייפון ולשמחתי הוא היה נראה לא רע בכלל.
• רביעית ואחרונה היי, יצא לי מזה פוסט – אז למה לא? 🙂

אפעם לא יצרתי כל כך הרבה div-ים ריקים מתוכן, אפעם לא העמדתי כל כך הרבה אלמנטים עם position: absolute, אפעם לא השתמשתי כל כל הרבה ב-rotate, ואפעם לא התעלמתי ממהירות טעינת העמוד. זה ממש כיף לעצור לרגע (או יותר נכון לכמה שעות כל יום במשך כמה ימים) ולעשות מה שמתחשק כדי לתרגל, כדי לאמץ את המוח בדברים אחרים. אני בטוחה שזה משפר את יכולות כתיבת הקוד.

ממליצה לכולכם בחום 🙂