5 کار جالب با DevTools AI Assistance

تاریخ انتشار: 21 اکتبر 2024

هفته گذشته ما یک پنل کاملاً جدید را به DevTools معرفی کردیم: کمک هوش مصنوعی می تواند به شما کمک کند مشکلات استایل با Gemini را مستقیماً در DevTools اشکال زدایی کنید.

کنجکاو هستید ببینید چه کاری می تواند انجام دهد؟ این 5 روش عالی را بررسی کنید که این ویژگی جدید می‌تواند ظاهر صفحه شما را آسان‌تر کند - از درک طرح‌بندی تا تعمیر هواپیما .

ضبط صفحه از نحوه کمک هوش مصنوعی به پیاده سازی افکت خیمه شب بازی با استفاده از انیمیشن های CSS

1. چیدمان ها را درک کنید

هنگام ساخت وب سایت، همیشه از صفر شروع نمی کنید. اغلب به اندازه کافی نیاز دارید که روی کدهای موجود بسازید که هیچ دانش قبلی در مورد آن ندارید - و در بدترین حالت هیچکس اطراف شما هم چنین چیزی را ندارد.

از هوش مصنوعی در مورد چیدمان یک عنصر بپرسید و درک کنید که چرا تا آخرین گره به شکلی نمایش داده می شود - و چرا این 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 را بدست آورید. دفعه بعد که در این موقعیت قرار گرفتید، مشکل خود را برای هوش مصنوعی توضیح دهید و اجازه دهید آن را برای شما مشخص کند.

کمک هوش مصنوعی کد موجود شما را بررسی می‌کند و آن را با آنچه می‌خواهید به دست آورید مقایسه می‌کند و راه‌حل‌های لازم را برای بررسی، اعمال و کپی کردن در پایگاه کدتان به شما پیشنهاد می‌کند.

3. مشاور دسترسی

ایجاد دسترسی و استفاده آسان وب سایت شما با فناوری کمکی بسیار مهم است. دسترسی را از ابتدای توسعه، به جای یک فکر بعدی در نظر بگیرید و هدف از آن پیروی از دستورالعمل های دسترسی به محتوای وب (WCAG) در طول فرآیند توسعه خود باشید.

از کمک هوش مصنوعی برای دریافت نکاتی در مورد اینکه کجا می‌توان یک <div> را با یک عنصر HTML معنایی‌تر جایگزین کرد، چگونه یک ویژگی aria-* اضافی می‌تواند مفید باشد یا چگونه کنتراست رنگ را بهبود می‌بخشد، استفاده کنید.

اعلان امتحان کنید

What about color contrast in this element?

4. آن را از آن خود کنید

گرایش‌ها می‌آیند و می‌روند: شیب‌ها، سایه‌ها و حاشیه‌های خشن و به دنبال آن طراحی مسطح وجود داشت و به عصر طراحی امروزی با رنگ‌های نئون روشن در پس‌زمینه‌های تیره می‌رفت.

دکمه های طراحی شده در بوت استرپ از نسخه 1 تا 5.
سبک های دکمه بوت استرپ در طول زمان، از نسخه 1 تا 5، از بالا به پایین.

اما آیا گاهی اوقات خسته کننده نیست که چیزهای یکنواخت در وب ظاهر شوند؟ اگر یکی از آن روزها برای شماست، شاید از کمک هوش مصنوعی بخواهید تا همه چیز را تغییر دهد و وب را دوباره کمی سرگرم کننده تر کند - مانند سواری در پارک موضوعی!

اعلان امتحان کنید

This element looks a little boring. Can you make it look like a pirates theme park ride?

5. مکانیک هواپیما شوید

توضیح مشکلات استایل، کمک به رفع آنها، مشاوره در مورد دسترسی و تغییر سبک های موجود - در حال حاضر مجموعه ای وجود دارد که کمک هوش مصنوعی می تواند از شما پشتیبانی کند - و حتی بیشتر! آیا می توانید باور کنید که کمک هوش مصنوعی حتی به شما در تعمیر هواپیما کمک می کند؟ بدون نیاز به تجربه قبلی، لباس‌هایتان را بپوشید و دست‌هایتان را در آشیانه ابزارهای توسعه‌دهنده Chrome کثیف کنید !

Chrome Devtools Hangar - یک زمین بازی تعاملی برای کمک به هوش مصنوعی.

و مطمئن شوید که تجربه خود را در ردیاب مسائل عمومی ما به ما اطلاع دهید!