תאריך פרסום: 21 באוקטובר 2024
בשבוע שעבר הוספנו ל-DevTools חלונית חדשה לגמרי: הסיוע של AI יכול לעזור לכם לנפות באגים בבעיות של עיצוב באמצעות Gemini ישירות ב-DevTools.
רוצים לדעת מה אפשר לעשות איתו? ריכזנו כאן 5 דרכים נהדרות שבהן התכונה החדשה הזו יכולה לעזור לכם לעצב את הדף בקלות – החל מהבנת הפריסות ועד תיקון מטוסים.
1. הסבר על פריסות
כשאתם בונים אתרים, לא תמיד אתם מתחילים מאפס. לעתים קרובות צריך לבנות על קוד קיים שאין לכם ידע קודם לגביו, ובמקרה הגרוע גם לאף אחד בסביבה שלכם אין ידע כזה.
תוכלו לשאול את ה-AI על הפריסה של רכיב מסוים ולהבין למה הוא מוצג בצורה הזו, עד הצומת האחרון – ולמה הרכיב הזה כולל את הערך overflow: hidden;. 👀
הנחיה לניסיון
Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.
2. תכנות בצוות
בשלב הזה, CSS הוא כלי חזק מאוד. עם כל כך הרבה אפשרויות, מותר להתבלבל לפעמים: האם זה align-items שדרוש לי? או justify-items? או justify-self או align-content?
לפעמים אתם יודעים בדיוק מה אתם רוצים לעשות, אבל אתם לא מצליחים למצוא את הקבוצה הנכונה של מאפייני CSS. בפעם הבאה שתמצאו את עצמכם במצב כזה, תוכלו להסביר את הבעיה ל-AI ולתת לו לפתור אותה.
הסיוע של ה-AI יבדוק את הקוד הקיים וישתווה למה שאתם מנסים להשיג. הוא יציע את התיקונים הנדרשים, שתצטרכו לבדוק, להחיל ולהעתיק לקוד הבסיסי.
3. יועץ נגישות
חשוב שהאתר יהיה נגיש וקל לשימוש באמצעות טכנולוגיה מסייעת. כדאי להביא בחשבון את הנגישות כבר מתחילת הפיתוח, ולא כרעיון שנוסף בשלב מאוחר יותר. בנוסף, כדאי לפעול בהתאם להנחיות הנגישות של תוכן אינטרנט (WCAG) לאורך כל תהליך הפיתוח.
אתם יכולים להשתמש בעזרה מ-AI כדי לקבל טיפים לגבי מקומות שבהם אפשר להחליף את <div> ברכיב HTML סמנטי יותר, איך מאפיין aria-* נוסף יכול לעזור או איך לשפר את ניגודיות הצבעים.
הנחיה לניסיון
What about color contrast in this element?
4. המכשיר מחכה לטאץ' האישי שלך
מגמות מגיעות וחולפות: היו טרנדים של צבעים כהים, צללים וגבולות חדים, ואחריהם טרנדים של עיצוב שטוח, ועכשיו אנחנו נמצאים בעידן של עיצוב עם צבעים בהירים של ניאון על רקעים כהים.
אבל לפעמים זה מעייף לראות איך הדברים נראים אחידים באינטרנט. אם זהו אחד מהימים האלה, אולי כדאי לבקש מה-AI Assistant לשנות את המצב ולגרום לגלישה באינטרנט להיות קצת יותר מהנה – כמו נסיעה ברכבת הרים בפארק שעשועים!
הנחיה לניסיון
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. איך להיות מכונאי של כלי טייס
הסבר על בעיות בעיצוב, עזרה בפתרון הבעיות, ייעוץ בנושא נגישות ושינוי של סגנונות קיימים – כבר יש הרבה דברים שאפשר לקבל עזרה מה-AI, ועוד הרבה יותר! אתם יכולים להאמין שעזרה מ-AI יכולה לעזור לכם לתקן מטוסים? אין צורך בניסיון קודם. פשוט מלכלכים את הידיים במחסן של כלי הפיתוח של Chrome.
חשוב גם לשלוח לנו משוב על החוויה שלכם באתר הציבורי למעקב אחר בעיות.