‏گوگل کدهای قدیمی AI رو با یه اسکیل شکار می‌کنه

مدل‌های زبانی وقتی کد فرانت‌اند می‌نویسن، معمولا کدی رو تحویل می‌دن که تو سال ۲۰۲۱ بهترین روش بوده، چون داده‌ی آموزشیشون همون‌قدر قدیمیه. اسکیل modern-web-guidance گوگل کروم دقیقا برای همین ساخته شده؛ نه لینتره نه ابزار کدزنی، بلکه یه ایندکس جست‌وجو روی یه‌سری راهنمای دست‌چین‌شده‌ست که قبل از نوشتن HTML/CSS/جاوااسکریپت بهش سر می‌زنی تا الگویی که استفاده می‌کنی همون الگوی روزه باشه.

نویسنده این اسکیل رو رو فرانت‌اند ری‌اکت یه ابزار داخلی امتحان کرده؛ یه اپ Vite + React با فرم‌های زیاد. مهم‌ترین یافته درباره‌ی دارک‌مود بود: فایل theme.css فقط رنگ‌های هاردکد شده داشت، بدون color-scheme یا prefers-color-scheme. راهنمای برگشتی گفته بود گذاشتن color-scheme: light dark روی :root یه خط اجباریه، چون بدونش حتی یه پالت دارک دستی هم اسکرول‌بار و کنترل‌های فرم رو تو حالت روشن نگه می‌داره و همون فلاش سفید معروف موقع لود رو ایجاد می‌کنه.

یافته‌ی دوم درباره‌ی فرم‌ها بود: هیچ‌کدوم از ورودی‌های اپ تو تگ form نبودن، فقط یه input کنار یه دکمه‌ی type="button". این یعنی زدن Enter تو فیلد هیچ کاری نمی‌کنه. راهنما پیشنهاد داد ورودی و دکمه تو یه form بسته‌بندی بشن و دکمه type="submit" بشه. یافته‌ی سوم هم به زمان‌بندی اعتبارسنجی مربوط بود: به‌جای خطا دادن هنگام تایپ، راهنما توصیه کرد خطا رو موقع blur نشون بده و رو input پاکش کنه، دقیقا همون کاری که pseudo-class جدید :user-invalid مجانی انجامش می‌ده.

به گفته‌ی نویسنده، بزرگ‌ترین نقطه‌قوت اسکیل اینه که توصیه‌هاش رو به تاریخ Baseline (یعنی از کی یه قابلیت وب رو همه‌ی مرورگرهای اصلی پشتیبانی می‌کنن) گره می‌زنه، پس تصمیم «این ویژگی امنه یا نه» به یه مقایسه‌ی تاریخ ساده تبدیل می‌شه. اما محدودیت اصلیش اینه که خودش کد رو نمی‌خونه؛ باید یه آدم یا ایجنت کد رو بگرده، الگوی مشکوک رو پیدا کنه و بعد از اسکیل بپرسه. نتیجه‌ی نویسنده اینه که این ابزار بیشتر یه استاندارد مرجعه تا یه ابزار اجرایی، و بهترین زمان استفاده ازش دقیقا لحظه‌ی قبل از نوشتن کامپوننته، نه یه ممیزی بعد از اتمام کار.

نکات کلیدی:

• راهنمای دارک‌مود می‌گه گذاشتن color-scheme: light dark روی :root اجباریه، وگرنه اسکرول‌بار و فرم‌ها تو حالت روشن گیر می‌کنن
• فرم‌های بدون تگ form باعث می‌شن Enter تو فیلد کار نکنه؛ راه‌حل، بسته‌بندی تو form و گذاشتن type="submit" روی دکمه‌ست
• اعتبارسنجی بهتره رو blur نشون داده بشه نه رو input، با کمک pseudo-class جدید :user-invalid
• توصیه‌ها به تاریخ Baseline گره خوردن، ولی خود اسکیل کد رو نمی‌خونه و به یه آدم یا ایجنت برای پیدا کردن الگوهای مشکوک نیاز داره