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

מרכוז ב-CSS

פעם היינו ממרכזים כך: היינו שואלים את עצמנו מלא שאלות: האם המירכוז הוא אופקי או אנכי, האם האלמנט הוא inlie או block, כמה שורות זה, האם אנחנו יודעים את הגובה, וכד’. ואז משתמשים בכל מיני מאפיינים לא קשורים כמו margin או padding או absolute poistion. אבל היום עם grid ו-flexbox אפשר למרכז בצורה הרבה יותר פשוטה, ועם מאפיינים ייעודיים: align-items, justify-content (שינהם של פלקס) ו-place-items (גריד). ב-codepen יש דוגמה חמודה של מרכוז במרכז הדף בעזרת grid ב-3 שורות בלבד. ורחלי תרמה לנו בתגובתה דרך קלה נוספת למרכז בעזרת grid או flex.

placeholder בשדות טקסט

בסמשינג מגזין פורסם פוסט עם מלא סיבות מעניינות למה לא להשתמש ב-placeholder בשדות טקסט.

מתברר שיש למאפיין הזה כל מיני בעיות (שלא חשבתי עליהן אף פעם). הנה רשימה חלקית:

1. הם לא ניתנים לתרגום (למשל כשמבקשים מדפדפן לתרגם את העמוד, הוא לא יתרגם את ה-placeholder-ים)
2. הרבה פעמים משתמשים ב-placeholder במקום ב-label, אבל זו לא באמת החלפה ראויה כי ב-label אמורים להיות הסברים על שדה הטקסט, וגם הצמדה של label לשדה טקסט שלו.
3. אחרי שמתחילים להקליד, נעלם ה-placeholder, וכך אם רוצים להיזכר מה היה כתוב שם (למשל לפעמים מופיע שם פורמט תאריך) – אי אפשר.
4. מי שלא אוריין מחשבים, לא יבין שזה רק טקסט זמני ויחשוב שהשדה כבר מלא
5. ועוד: נגישות, זמן הופעה, ועוד.

הפתרון המוצע הוא להזיז את המיקום של ה-placeholder למעל שדה הטקסט, או לא להשתמש בו כלל. אני ממליצה לקרוא את המאמר – הוא לא ארוך, ומציע פתרונות מעניינים, כולל הקוד הדרוש לביצועם.

תוספת מה-18/11/19: פוסט עם טענות ופתרונות דומים מאוד.

צורות מצויירות ע”י Gradient-ים ב-CSS

לפני כמה שנים רחלי כתבה על שימוש ב-box-shadow כדי לצייר עוד ועוד קופסאות מסביב לאלמנט. עכשיו ב-css tricks יש מאמר שמראה איך עושים דבר אפילו יותר משוכלל: ציורי צורות עם גרדיאנטים ב-background-image: מעגלים חופפים חלקית, מצולעים בתוך מסגרת, חצאי מעגלים בתוך מסגרת, ואפילו – מטרייה!

בתוך מוחו של קריס קויר, מתכנת פרונט אנד

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

מתי דפדפנים טוענים תמונות – תלוי איזה דפדפן

מתי דפדפנים טוענים תמונות? האם יש הבדל אם תמונה היא ברקע (background-image) או בחזית (תגית img)? האם כל הדפדפנים מתנהגים באותו אופן? מאמר מעניין בנושא טעינת תמונות.

המחבר פותח בשתי ציפיות לגבי תמונות רקע:

1. הדפדפן אינו מוריד (אינו יכול להוריד) תמונת רקע (background-image) עד שיידע שהוא צריך אותה, כלומר לא לפני שנבנה ה-CSSOM.
2. הדפדפן לא יוריד תמונת רקע שמוחלת על אלמנט שאינו מוצג (כלומר ב-display: none).

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

הוא המשיך עם שתי ציפיות לגבי תמונות בתגית img:

1.  הדפדפן יוריד תמונת img בלי קשר לבניית CSSOM
2. כתוצאה מכך, דפדפן יוריד תמונה שתתברר כמוסתרת (כלומר ב-display: none).

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

שווה עיון.