דפדפנים תוספים ועוד

הגישה הראשונה שלי לדפדפן (נטסקייפ) הייתה אי שם בשנות ה-90. בהתחלה רק בעבודה של אמא שלי, ואח"כ גם בבית. אחר-כך אקספלורר דחק אותו הצידה ותפס נתח שוק די רחב של הדפדפנים לתקופה די ארוכה, אבל לא עוד. הרבה ביטים התגלגלו בשטף הטכנולוגיה והיום יש אינספור דפדפנים שבהם ניתן להשתמש אם כי ניתן בקלות להבחין ב-4-5 עיקריים: כרום, פיירפוקס, אדג', ספארי ואופרה (אין משמעות לסדר הופעה שלהם). מאמר מעניין ב-medium מעלה מחשבה אחרת בנוגע לחמשת הדפדפנים המובילים וחושף ממצאים מעניינים מאוד, כמו למשל שימוש רווח בדפדפן  UC Browser ששייך לקבוצת alibaba ויש לו נתח שוק גדול מאוד ב-… אסיה (מפליא, לא? 😉 )

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

עוד פוסט דומה על 4 דפדפנים שיכולים להחליף את כרום. את הלינק לפוסט קיבלתי מלאה שכתבה לי כך: "אחרי שלושת הראשונים חשבתי שזה טוב וחדשני, אבל אז הם שלפו את Edge בתור הדפדפן הרביעי. מה את אומרת? זה נורמלי?" קשה לי לומר מה אני חושבת, אכן – אדג'  הרבה יותר חדשני מאקספלורר אבי-אבותיו, אבל עדין אני לא בטוחה שאני רואה אותו כדפדפן העתיד.

תוספת (20.06.2017) עוד פוסט מעניין שקורא לנו להשתמש בעוד דפדפן מלבד כרום. מעניין לקרוא.

 

נתיב הדפדפנים שלי

הפעם הראשונה שנחשפתי ל-css  היה דרך התוסף firebug לדפדפן פיירפוקס שהחליף את אקספלורר כדפדפן מועדף בעבודה (מהלך אסטרטגי מעולה שהוביל סרג' קרול כשעבד באורט). לא עוד עבודה על אקספלורר אלא בפיירפוקס  – דפדפן מתקדם – ורק אחרי זה התאמות לאקספלורר. firebug היה מעולה ואיפשר שליטה על התיקונים שהעברתי (בתור מעצבת) למפתחים. לא עוד הערות סתומות כמו למשל: "תיבת החיפוש יושבת לא במקום" אלא הוראות הרבה יותר מופרטות ומעשיות כמו למשל – "תני margin-left: 20px במקום 10 לתיבת ה-input של החיפוש". הגישה לשליטה על העיצוב היא זו שסללה לי את הדרך למעבר ממעצבת למתכנתת.

את firebug זנחתי כשהתחלתי לעבוד על scss בגלל שהוא הציג את מספר השורה בקובץ style ולא בקבצי ה-scss השונים. המעבר לשימוש בכלי ה-inspect של פיירפוקס היה יום של מאמץ ועקומת למידה קלה, אבל היתרונות שלו עולים על ה-firebug המוכר. לאחרונה הודיעו firebug על הפסקת הפיתוח והם ממליצים לעבור להשתמש בכלי ה-Firefox DevTools.

היום כשאני עובדת על css, אני אוהבת לעבוד על פיירפוקס וכרום במקביל. כל אחד והיתרונות שלו, והיתרון הגדול ביותר בעבודה במקביל היא לעלות על שינויים ואי התאמה תוך כדי עבודה ולא אחרי הכל. היה אידיאלי אולי לעבוד גם במקביל על אדג', אבל אעפס, משהו בעבודה עם ה dev-tools שלו לא זורם…. אגב אדג', אפשר לקרוא פה על חידושים באדג' והיכולות שלו.

כמה מילים על מוזילה-פיירפוקס

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

בתחילת השנה (2017)  מוזילה החליפה את הלוגו שלה. הרבה באזז היה סביב זה. ומגזין wired הוציא סיכום של הלוגו על שלל שימושיו. אפשר לקרוא פה דעה קצת פחות מחמיאה.

בשנת 2014 פיירפוקס יצאו עם גרסה למפתחים. התקנתי (לא זוכרת באיזה שנה, אם כי לא ב-2014), ניסיתי אבל לא עפתי על היתרונות שלו. עם השנים אני חושבת שהפיצ'רים די זלגו מדפדפן המיועד למפתחים לדפדפן ה"רגיל" ואין היום (למיטב ידיעתי) יתרון לדפדפן למפתחים. אבל, כשיצאה הגרסה למפתחים, מוזילה השיקו אתר המדגים את היכולות ואופן השימוש בכלי ה-dev-tools. שווה להעיף מבט על הדוגמאות המובאות שם ועל אתגר ה-dev-tools.

מפתחים ודפדפנים

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

• פוסט של css-tricks על טיפים ל-debugging
• קורה לפעמים שמנסים לתפוס אלמנט ב-HTML אבל לא מצליחים לתפוס אותו כדי לשנות לו את ה-css, בגלל שהמצב שלו משתנה ב-js. פוסט מעולה של css-tricks עם פתרון ממש נחמד לעניין.
• סרטון you-tube על שימושים שונים ל console.log
• עוד סרטון – על חידושים בכרום 58'
• שני תוספי כרום לעבודה: Smart CSS viewer -מיועד למעצבים לבדיקה של מאפייני css של אובייקט בעמוד, ו-Finch תוסף שמאפשר שמירה של קוד css שנכתב בחלון ה-inspect.

בכמה קבוצות פייסבוק שאני שותפה בהם עולות 2 שאלות על  דפדפנים. האחת – באיזה כלי אתם משתמשים לבדיקת הקוד מול העיצוב, והשניה על תאימות דפדפנים. נתחיל מהראשונה. פעם, כשלא היה "מובייל" החיים היו קלים, כיווָנו למכנה המשותף הנמוך – מסך של 960 פיקסלים וכל מה שמֵעבר קיבל שוליים. פיקסל פרפקט היה ללא ספק כלל מרכזי במשחק. היום אני חושבת שקצת קשה להתייחס לפיקסל פרפקט בפשטות שכזאת. העיצוב פלואידי (נזיל), כלומר אם נניח יש עיצוב לרזולוציה של 320px, מה קורה אפילו בשינוי הקטנטן ביותר של 360px רוחב? איך אפשר למדוד פה את ההצמדה לפיקסל בקובץ ה-PSD? התשובה בגוף השאלה, כמו ששימוש בפיקסלים הולך ודועך ואנחנו עוברים להשתמש במידות דינאמיות יותר (%, vw, em, rem), ככה גם העיצוב והיישום שלו. שלא תבינו לא נכון, אין פה מבחינתי ויתור על ההקפדה על היישורים, על ההתאמה ככל האפשר לקבצי העיצוב, אבל כן יש פה מקום לחשיבה על נזילות, על שמירה על פרופורציות אחידוֹת וחישוב אחוזים ולא היצמדות לקובץ עיצוב סטטי. (בהקשר הזה לדעתי זאת הסיבה שאם מי שכותב את ה-css בא מרקע של עיצוב – העבודה קלה לו יותר והמוצר הסופי מרוויח מהעניין, אבל זה ממש בהערת שוליים כי א. זה לא נושא הפוסט ו-ב. זה נושא לפוסט בפני עצמו).

יחד עם כל זאת, אני חסידה גדולה של צילום מסך של אזורים בודדים שאני עובדת עליהם והשוואתם על גבי מסמכי ה-PSD. כן, זה נשמע אולי עבודה שחורה אבל אלוהים נמצא בפרטים הקטנים (או בצילומי המסך). למי שלא בענייני צילום מסך ושימוש בפוטושופ, באחת הקבוצות (הו, הסניליות – לא זוכרת איזה ולא זוכרת מי…) המליצו על התוסף לכרום PixelPerfect תוסף נחמד מאוד שמוסיף קובץ עיצוב מתחת לאתר שעובדים עליו, ומאפשר העלאה של כמה קבצים לכמה רזולוציות.

לגבי השאלה השניה על תאימות דפדפנים לצערי אין לי מספיק תובנות לעניין. ניסינו לעבוד עם browserstack אבל העניין נזנח, עבדנו תקופה קצרה עם ממשק שמציג צילומי מסך של האתר במסכים שונים וזה גם לא ממש ענה על הצורך. לחלופין התקנו virtual-machine שנתן מענה לבדיקות על אקספלורר ישן אבל אני לא יכולה לומר שפיצחנו את העניין ושיש לי פתרון לבדיקות לתאימות דפדפנים ומכשירים. פה יש פוסט שמציג 7 כלים לבדיקות. מוזמנים לנסות ולהמליץ. Sizzy הוא כלי נוסף שלא מבושל מספיק – אבל אם ימישכו לפתח אותו יהיה מעולה. כרגע הוא רק מציג את האתר ברזולוציות שונות של המכשירים שונים (שזה נחמד אבל לא מספיק, כמו יש עוד הרבה), ליד כל מכשיר יש כפתור להגדרות שעדיין לא פעיל, אם התפקוד שלו יהיה מה שאני חולמת עליו: הגדרת מערכת הפעלה ודפדפן, אז יהיה על מה לדבר. ימים יגידו.

 

מחשבות על דפדפנים וסמארטפונים

עם כל האהבה שלי לפיירפוקס וכרום בנייד שלי, למרות שמותקנים עליו שלל הדפדפנים (פיירפוקס, כרום ואופרה) 99% מהפעמים אני גולשת בספארי. משהו שם זורם לי טוב, ומבחינתי זאת עוד דרך לעשות QA.

אם פעם אקספלורר נחשב הכבשה השחורה שמצריכה התאמות, היום אקספלורר לגמרי זורם לעומת כל מיני דפדפני נייטיב של סמסונג או LG שלמרבה ההפתעה (או שלא) תופסים נתח שוק לא מבוטל. אז מה עושים? שאלה טובה שכל פעם עולה אצלנו מחדש. איך מִתגברים על בליל המכשירים, מערכות ההפעלה, הגרסאות ועוד? אין לי ממש תשובה. מכוונים למכנה המשותף הרחב ביותר ואל 80% מהמשתמשים. כותבים קוד חדשני עם תמיכה אחורה לדפדפנים ישנים ומאתגרים.
לפחות בארץ אין בכלל אחוזי שימוש באופרה מיני (לפי סטטיסטיקות של Stat Counter, וגם לפי clicky) אבל אם מעניין אתכם על התמודדות איתו, ל Chen Hui Jing יש פוסט מעניין על אופרה מיני.(תודה ללאה על הלינק).

לא פשוט, אבל ללא ספק – מאתגר 🙂

 

נ.ב.

עוד כמה לינקים שכולם בטח מכירים אבל מתאימים לרוח הפוסט:

• כמובן שאפשר לבדוק בקלות באיזה דפדפן אני משתמש כרגע ואפשר גם לבדוק מה זה אומר עליכם.
• אמנם ישן – אבל איך אפשר בלי זה בפוסט על דפדפנים 🙂
• ועוד 9 בדיחות על חשבון אקספלורר