הגעתי לסדנה ב-8:50, וכל הגיקים האחרים בסדנה כבר היו! ישבנו באולם עם שולחנות עץ עגולים. הניגוד בין המראה העתיק של האולם ספון העץ, לבין השולחנות עמוסי הלפטופים היה די משעשע… למרבה ההפתעה והשמחה היה מקום בשולחן הקרוב ביותר למרצה בדיוק מול המרצה! לא היו בעיות WiFi בכלל, כנראה בגלל היותנו מעטים (בסביבות 50 איש). גם היו מלא שקעי חשמל מתחת לשולחן, מה שאיפשר לי להיות רגועה לגבי התפקוד של הנטבוק היום (למרות שהוא תפקד נ-ה-ד-ר במשך כל הכנס).
המרצה הוא אנדרו קלארק, והוא חמוד ביותר. הוא פתח ואמר שאמנם זו סדנה, אבל בניגוד לסדנאות אחרות שבהן רוב הזמן כותבים קוד ומתנסים בדברים, הוא מתכוון בעיקר להרצות, מפני שלטענתו, קוד אפשר לכתוב תמיד, אבל לשמוע את זה משיש לו לומר – זה ההזדמנות היחידה. לדעתי זה מאד יפה מצידו, מפני שלהרצות במשך 8 שעות נראה לי הרבה יותר קשה מאשר להעביר סדנה שבה חלק מהמזן אתה רק עובד בין המשתתפים ועוזר להם פה ושם.
מאחר שזו היתה סדנה של יום שלם, לא אוכל לסכם את כולה פה. במקום זאת רק אביא נקודות מעניינות שהוא העלה, לא תמיד עם קשר ביניהן 🙂 .
הוא התחיל את ההרצאה באמירה שאנחנו עדיין ממציאים דברים תוך כדי, כמו בתחילת ימי האינטרנט. דברים כל הזמן משתנים, למשל, הפרק האחרון של הספר שלו כבר לא רלוונטי. איך שחשבנו אפילו ב-2010 כבר לא נכון – חשבנו על עיצוב לדסקטופ קודם, והסתרה שלהם ב-display:none במכשירים קטנים.
ב-6 השנים האחרונות היה קצת משעמם ב-CSS, כי כבר תיקנו הכל. לא התרגשנו מדברים חדשים. ופתאום CSS נהיה מעניין, ומסובך. וכרגע הדבר הכי מעניין הוא פריסה (layout). אפשר לעשות דברים שאי אפשר היה לעשות קודם: float ו-position לא נועדו לפריסה, אלא שומשו לשם כך בתור hack.
בעיות שהיו לנו בשנים האחרונות: מרכוז אנכי (מתגברים על זה עם hack-ים); נפילה של float_ים; השוואת גבהים של אזורים סמוכים.
היו media query כבר ב-CSS2, אבל לא הכל רלוונטי. ב-CSS3 יש מאפיינים חדשים. device-height יכול להיות מעניין, למסכים שהם רחבים אך נמוכים. גם aspect-ratio יכול להיות מעניין – האם נראה להגיש עיצוב שונה בין יחס 3:4 ליחס 9:16.
cssmediaqueries.com אומר לך אילו medua query נתמך ע”י המכשיר שלך. mediaqueriestest עושה משהו דומה. גם mqtest
פעם היינו תוחמים את העיצובים שלנו בין רזולוציות שונות (כותבים media query של min-width ו-max-width), אבל אז מפספסים את הירושה של CSS. לכן עכשיו תוחמים רק ב-min-width, וזה מאפשר לעיצוב לרשת הגדרות CSS שנתנו לרזולוציות גבוהות יותר.
פעם היינו חושבים על גדלי המסכים, בודקים מה נכנס בהם, ומגדירים בהתאם את ה-break point של ה-media query. אבל הנכון יותר הוא לחשוב על הרוחב של התוכן שלך, לראות מתי הוא צריך להשתנות, ולתת את ה-break point לפי זה. ואז ה-media query לא מותאמים למכשירים ספציפיים, אלא לרוחב של התוכן. יש כלים שעוזרים לעשות את זה – responsivepx.com ו- whatsmybrowsersize.com.
הוא דיבר על 3 טכניקות לפריסה בדף (layout) :
- display: table (לא מדובר על תגית table הידועה לשמצה, אלא במאפיין CSS לגיטימי לחלוטין שנותן מאפיינים טבלאיים לתוכן).
- multi column layout.( לא נתמך באקספלורר)
- flexbox. פותר מאד בקלות את בעיות הריווחים בין אלמנטים. לדעתו תמיד כדאי להשתמש ב-flexbox, כי display table הוא סוג של hack.
אנדרו אוהב להכניס easter egg באתר שלו. בא לו לשים משהו משונה ברוחב מוזר, בשביל להתנקם בגיקים שמשנים את גודל החלון….
בכרום יש אפשרות להתנסות בכל מיני מאפיינים ניסויים של CSS. הדברים הניסויים האלה נועדו לנו כמפתחים להביע את דעתנו על מאפיינים חדשים, ועל הרצונות שלנו בתחום פיתוח האינטרנט, במקום לתת לאנשים שהם לא מפתחים – מפתחי דפדפנים – לקבוע מה אפשר יהיה לעשות באינטרנט. יכול להיות שנעבוד על דברים שלעולם לא יהיו בפרדוקשן, אבל זו הדרך שלנו להשפיע.
הוא סיים בכל מיני אנקדוטות מהעבודה שלו. סיפר על kuler שנועד כדי ליצור פלטת צבעים מתמונה. אנדרו מספר שלאחד האתרים שלהם הם לקחו צבעים מתוך הסרט “הוגו” שיש בו צבעוניות מדהימה.