תאריך פרסום: 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 כדי לשדרג את המצב ולהפוך את האינטרנט שוב לכיפית, למשל בטיול בפארק שעשועים!
הנחיה לניסיון
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. איך להיות מכונאי של כלי טייס
הסבר על בעיות עיצוב, עזרה בתיקון שלהן, ייעוץ בנושא נגישות ושינוי סגנונות קיימים – כבר יש מגוון רחב של כלים שבעזרתם AI יכול לעזור לכם – ויש עוד יותר! האם ידעתם שאפשר להיעזר ב-AI גם כדי לתקן מטוסים? לא נדרש ניסיון קודם, עכשיו אפשר לענוד את התמונה הכללית ולכלך את הידיים בהאנגר של כלי הפיתוח!
חשוב גם לספר לנו על החוויה שלכם באתר הציבורי למעקב אחר בעיות.