تاریخ انتشار: ۱۰ نوامبر ۲۰۲۶
در این عصر جدید توسعه وب مبتنی بر مأمور، توسعه‌دهندگان انتظار دارند مأموران کدنویسی آن‌ها در ساختن برای وب متخصص باشند. و اگرچه جدیدترین مدل‌های کدنویسی پیشرفته بسیار توانمند هستند و معمولاً می‌توانند چیزی تولید کنند که کار کند، اما اگر از یک کارشناس توسعه وب بخواهید کد تولیدشده با هوش مصنوعی را بررسی کند، تقریباً همیشه می‌تواند راه‌هایی برای سریع‌تر، دردسترس‌تر، یا ایمن‌تر کردن کد پیدا کند.
Chrome سرمایه‌گذاری زیادی روی آینده توسعه وب مبتنی بر عامل می‌کند و برای رفع این چالش، در ماه مه در Google I/O پیش‌نمایش اولیه راهنمای وب نوین را معرفی کردیم. «راهنمای وب نوین» مجموعه‌ای از مهارت‌ها است که تخصص پلاتفرم وب، روال‌های مطلوب، و داده‌های سازگاری مرورگر را مستقیماً در عامل‌های کدنویسی شما جاسازی می‌کند.
امروز با خوشحالی انتشار نسخه پایدار ۱.۰ «راهنمای وب نوین» را اعلام می‌کنیم که شامل موارد زیر است:
- گردش کار نوسازی جدید که پایگاه کد موجود شما را اسکن می‌کند تا به عامل شما کمک کند فرصت‌های نوسازی ایمن را پیدا کند.
- پایگاه داده راهنمای گسترش‌یافته که صدها شکاف دانش هوش مصنوعی تأییدشده را با راه‌حل‌های تأییدشده توسط کارشناسان و سازگار با مرورگرهای مختلف هدف قرار می‌دهد.
- بازبینی عمیق‌تر کارشناسان انسانی برای هر راهنما، ازجمله تأیید نهایی ازسوی رهبران فنی حوزه محتوا و بازبینی اختصاصی دسترس‌پذیری در راهنماهای سَمت کاربر ما.
- پوشش ارزیابی کامل در همه راهنماهای ما با داشبورد ارزیابی عمومی که بهبودهای قابل‌اندازه‌گیری را درمقایسه با عوامل بدون «راهنمای وب نوین» نشان می‌دهد.
با نسخه ۱.۰، همچنین خوشحالیم که اعلام کنیم «راهنمای وب نوین» درحال تبدیل شدن به تلاشی بین‌مرورگری است و Firefox و Edge به Chrome می‌پیوندند تا از سازگاری بین‌مرورگری پشتیبانی کنند، آن را بهبود بخشند، و در این پروژه مشارکت کنند. با تکیه بر کار مشترکمان با Baseline، هدف ما این است که مطمئن شویم هرکسی که با عامل کدنویسی می‌کند بتواند از قدرت و قابلیت‌های پلاتفرم وب مدرن به‌طور کامل بهره‌مند شود.
صرف‌نظر از اینکه از چه مدل‌ها یا زیرساخت‌های عاملی استفاده می‌کنید، اگر برای وب می‌سازید، «راهنمای وب نوین» به گردش کار عاملی شما تعلق دارد.
برای نصب «راهنمای وب نوین»، این فرمان را از فهرست راهنمای پروژه‌تان اجرا کنید:
npx modern-web-guidance@latest install
یا اگر قبلاً نسخه قدیمی‌تری را نصب کرده‌اید، می‌توانید با اجرای دستور زیر به نسخه ۱.۰ به‌روزرسانی کنید:
npx modern-web-guidance@latest update
برای دستورالعمل‌های نصب بیشتر یا کسب اطلاعات بیشتر، اسناد «راهنمای وب نوین» را بررسی کنید یا این ویدیو را برای مروری کوتاه تماشا کنید:
چرا توسعه‌دهندگان و کسب‌وکارها باید از «راهنمای وب نوین» استفاده کنند
غیرقابل‌انکار است که عامل‌های کدنویسی به توسعه‌دهندگان کمک کرده‌اند تا سریع‌تر از همیشه کد بنویسند. اما در دنیایی که همه از عامل‌های کدنویسی استفاده می‌کنند، سرعت دیگر یک مزیت رقابتی نیست.
این روزها، تمایز قائل شدن بین عوامل اساسی مانند قابلیت استفاده و کیفیت تجربه از هر زمان دیگری مهم‌تر است. در اینجا چند روشی که «راهنمای وب نوین» می‌تواند کمک کند آورده شده است:
تقویت روال‌های مطلوبی که مدل‌ها اغلب ازدست می‌دهند
اگرچه مدل‌های کدنویسی پیشرو درک خوبی از بسیاری از روال‌های مطلوب دارند، ارزیابی‌های ما نشان می‌دهد که هنوز در چند زمینه مهم کاستی‌هایی دارند، ازجمله:
- دسترس‌پذیری: مدیریت غیرفعال و تمرکز صفحه‌کلید، پشتیبانی از کاهش حرکت، و اعتبارسنجی فرم دردسترس.
- تجربه کاربری: اشاره‌های تند کشیدن و لمس کردن، انتقال‌های کادر گفتگو و پاپ‌اور، و پیاده‌سازی‌های زمینه روشن/تیره.
- عملکرد: زمان‌بندی تکلیف رشته اصلی، جداسازی پردازش خارج‌از صفحه، و جلوگیری از تغییر چیدمان.
- امنیت: پاک‌سازی ایمن HTML، «خط‌مشی‌های امنیتی محتوا» سخت‌گیرانه، و مدیریت اطلاعات کاربری گذرکلید.
رعایت روال‌های مطلوب دسترس‌پذیری به‌ویژه از این جهت مهم است که اشتباهاتی مثل ARIA بد می‌تواند دسترس‌پذیری صفحه را از نداشتن ARIA هم کمتر کند. برای نسخه ۱.۰، راهنماهای سَمت کاربر ما توسط کارشناسان دسترس‌پذیری که هر روز به آن‌ها متکی هستند، با فناوری‌های حمایتی واقعی بررسی و آزمایش شدند.
استفاده از بهترین ویژگی وب برای کار
مدل‌های هوش مصنوعی در یافتن نحوه عملکرد چیزی با جاوا اسکریپت بسیار خوب هستند، اما در بسیاری از موارد، ویژگی‌های HTML یا CSS وجود دارند که می‌توانند همان کار را با کد بسیار کمتری انجام دهند. و چون توسط مرورگر مدیریت می‌شوند، معمولاً عملکرد بهتری دارند و با امکانات دسترس‌پذیری همراه هستند. برای مثال:
- ویژگی‌هایی برای پویانمایی کردن کادرهای گفتگو و منوهای بالاپر
- ویژگی‌هایی برای بهبود تعامل‌های مبتنی بر پیمایش و تند کشیدن
- میاناهای برنامه‌سازی کاربردی بهتر برای گذارهای صفحه روان و سیال
ویژگی‌های جدید همچنین می‌توانند تجربه سایت را به روش‌هایی که برای کاربران مهم است بهبود بخشند. برای مثال:
- گذرکلیدها و WebAuthn: برای تجربه‌های ورود به سیستم سریع‌تر و ایمن‌تر
- تکمیل خودکار: برای بهبود جریان‌های تسویه‌حساب (به‌ویژه در تلفن همراه) که اغلب هنگام استفاده از کنترل‌های فرم سفارشی مبتنی بر جاوا اسکریپت با شکست مواجه می‌شوند
«راهنمای وب نوین» به‌گونه‌ای طراحی شده است که براساس الزامات پشتیبانی مرورگر شما، بهترین ویژگی را برای کار توصیه کند. راهنماهای آن دارای داده‌های سازگاری Baseline و مرورگر جاسازی‌شده هستند، بنابراین می‌تواند توصیه‌های خود را با نیازهای پروژه شما تطبیق دهد.
پایگاه کدتان را اسکن کنید و فرصت‌های مدرن‌سازی را پیدا کنید
بیشتر توسعه‌های وب در پروژه‌های کاملاً جدید اتفاق نمی‌افتد. این اتفاق در پایگاه‌های کد موجود رخ می‌دهد که سال‌ها راه‌حل‌های موقت قدیمی، وابستگی‌های غیرضروری، و شبیه‌سازهای مرورگر که دیگر موردنیاز نیستند در آن‌ها انباشته شده است.
نسخه ۱.۰ گردش کار نوسازی جدیدی را اضافه می‌کند که می‌تواند HTML، CSS، جاوا اسکریپت، و package.json موجود شما را تجزیه‌وتحلیل کند تا فرصت‌های ارتقای ایمن را پیدا کند و سپس نماینده شما را در اعمال تغییرات راهنمایی کند.
/modern-web-guidance Modernize the code in this directory
در این نسخه اول، گردش کار مدرن‌سازی از تجزیه‌وتحلیل ایستا برای بررسی مجموعه محدودی از الگوها استفاده می‌کند. تصمیم گرفتیم با دامنه محدودی شروع کنیم که نتایج قابل‌پیش‌بینی به‌همراه داشته باشد و سپس آن را گسترش دهیم. به‌مرور زمان، قصد داریم حوزه‌های بسیار بیشتری را پوشش دهیم، ازجمله ممیزی‌های عاملی که در آن عامل شما مستقیماً درباره کدتان استدلال می‌کند، به‌جای اینکه فقط الگوهای شناخته‌شده را مطابقت دهد.
با تکامل پلاتفرم وب، به‌روز بمانید
پلاتفرم وب هدفی درحال حرکت است. ویژگی‌های جدید در هر نقطه عطف در مرورگرها ارائه می‌شوند و ویژگی‌های موجود که شاید قبلاً نمی‌توانستید از آن‌ها استفاده کنید، با هر نسخه جدید مرورگر به Baseline تبدیل می‌شوند.
ازآنجایی‌که «راهنمای وب نوین» براساس داده‌های سازگاری Baseline ساخته شده است و توصیه‌های آن توسط مهندسان مرورگر، کارشناسان استانداردهای وب، و متخصصان دسترس‌پذیری نگهداری می‌شود، این توصیه‌ها همراه با خود پلاتفرم تکامل می‌یابند و اکنون پروژه شما نیز می‌تواند همین کار را انجام دهد.
با ویژگی‌های جدید وب و روال‌های مطلوب آشنا شوید
درحالی‌که «راهنمای وب نوین» در درجه اول به‌عنوان ابزاری برای عامل‌ها ساخته شده است، چیزی که از بسیاری از توسعه‌دهندگان شنیده‌ایم این است که آن‌ها درواقع این راهنما را به‌خودی‌خود به‌عنوان یک منبع یادگیری بسیار مفید یافته‌اند.
حتی در این عصر کدنویسی عامل‌گرا، ایجاد تخصص در دامنه همچنان ارزشمند است. و «راهنمای وب نوین» می‌تواند به شما در انجام این کار کمک کند: چه با خواندن خود راهنماها، یا بااستفاده از CLI برای جستجوی موارد استفاده و کشف تکنیک‌های جدیدی که ممکن است به پروژه شما مربوط باشد.
جفت کردن «راهنمای وب نوین» با Chrome DevTools برای عامل‌ها
در توسعه وب عامل‌گرا، نوشتن کد فقط بخشی از گردش کار است. همچنین باید آن کد را اجرا کنید تا مطمئن شوید طبق انتظار کار می‌کند. به همین دلیل است که به توسعه‌دهندگان توصیه می‌کنیم از «راهنمای وب نوین» همراه با Chrome DevTools برای عامل‌ها استفاده کنند.
- راهنمای وب نوین به عامل شما تخصص لازم را برای نوشتن کد طبق روال‌های مطلوب نوین می‌دهد.
- Chrome DevTools برای عامل‌ها به عامل شما رؤیت‌پذیری زمان اجرا می‌دهد تا بتواند آن کد را در طیف گسترده‌ای از قابلیت‌های دستگاه، اولویت‌های کاربر، و شرایط شبکه درستی‌سنجی، اشکال‌زدایی، و بهینه‌سازی کند.
این موارد باهم به نماینده شما کمک می‌کند تا در نوبت‌های کمتری به راه‌حل بهتری برسد. در ادامه چند نمونه از نحوه استفاده هم‌زمان از این ابزارها برای به‌حداکثر رساندن اثربخشی آورده شده است:
بهینه‌سازی کنید تا به هدف عملکردتان برسید
«راهنمای وب نوین» می‌تواند به نماینده شما آموزش دهد که چگونه به‌طور مؤثر کارهای جاوا اسکریپت طولانی‌مدت را که رشته اصلی را مسدود می‌کنند تقسیم کند، اما نمی‌تواند کد شما را آزمایش کند تا ببیند آن کارهای جاوا اسکریپت واقعاً چه مدت رشته اصلی را مسدود می‌کنند.
با Chrome DevTools برای عامل‌ها، می‌توانید ردیابی عملکرد را در یک CPU شبیه‌سازی‌شده ضعیف اجرا کنید تا ببینید آیا مشکلی دارید یا نه، و سپس از توصیه‌های عملکردی «راهنمای وب نوین» برای تکرار استفاده کنید تا زمانی که کد شما هرگز رشته اصلی را برای بیش‌از ۵۰ میلی‌ثانیه مسدود نکند (بنابراین به INP ضعیف کمک نمی‌کند).
آزمایش و پالایش پویانمایی‌ها
«راهنمای وب نوین» می‌تواند به عامل شما نشان دهد که چگونه ویژگی‌هایی مانند کادرهای گفتگوی مدال، نکته‌ابزارها، و منوهای پاپ‌اور را به‌درستی و با عملکرد بالا پویانمایی کند، اما حتی با این راهنمایی، همچنان باید تأیید کنید که پویانمایی‌ها واقعاً کار می‌کنند و هنگام استفاده در بافت برنامه کامل شما ظاهر خوبی دارند.
Chrome DevTools برای عامل‌ها می‌تواند کد شما را اجرا کند، با صفحه تعامل برقرار کند، و از پویانمایی درحال اجرا ضبط صفحه بگیرد. سپس می‌تواند ضبط را مطالعه کند تا مطمئن شود که پویانمایی اجرا می‌شود و با سبک و حس بقیه سایت مطابقت دارد.
همچنین می‌توانید از Chrome DevTools برای عامل‌ها استفاده کنید تا تأیید کنید که وقتی prefers-reduced-motion تنظیم شده است، مؤلفه به اولویت‌های کاربر احترام می‌گذارد.
نماهای حافظه نهان بدون نشت حافظه
«راهنمای وب نوین» می‌تواند به عامل شما آموزش دهد که چگونه با رندر کردن و ذخیره کردن نماها در حافظه نهان، انتقال‌های SPA را فوری جلوه دهد و درعین‌حال آن‌ها را به‌درستی از درخت دسترس‌پذیری پنهان کند.
اما هنگام انجام این کار، مهم است که مطمئن شوید نماهای استفاده‌نشده را به‌درستی پاک می‌کنید تا اگر کاربر برای مدت طولانی در صفحه بماند، حافظه نشت نکند. Chrome DevTools برای عامل‌ها ابزارهای اشکال‌زدایی حافظه دارد، بنابراین عامل شما می‌تواند مطمئن شود که استفاده از حافظه بدون محدودیت افزایش نمی‌یابد.
برای بررسی دقیق‌تر نحوه استفاده هم‌زمان از «راهنمای وب نوین» و Chrome DevTools برای عامل‌ها، این ویدیو را ببینید:
داستان های موفقیت
تیم‌های مهندسی در سراسر جهان درحال‌حاضر از «راهنمای وب نوین» و Chrome DevTools برای عامل‌ها استفاده می‌کنند تا کیفیت کد را بهبود بخشند، سرعت تحویل را افزایش دهند، و گلوگاه‌های اشکال‌زدایی دستی را حذف کنند:
Pensionbazaar و Policybazaar
Pensionbazaar، پلاتفرم جدید برنامه‌ریزی بازنشستگی که توسط شرکت فناوری مالی هندی Paisabazaar راه‌اندازی شده است، «راهنمای وب نوین» را با Chrome DevTools برای عامل‌ها جفت کرد تا صفحه‌های جدید بسازد و درستی‌سنجی کند، زمان تکمیل را بیش‌از ۹۰٪ (از حدود چهار روز به چند ساعت) کاهش دهد، و اشکالات میانای کاربر را در صفحه‌های جدید بیش‌از ۹۰٪ کاهش دهد. پلاتفرم خواهر آن، Policybazaar، یکی از پلاتفرم‌های پیشرو بیمه در هند با بیش‌از ۹۷ میلیون مشتری ثبت‌شده، از Chrome DevTools برای عامل‌ها استفاده کرد تا ممیزی‌های عملکرد را در حدود ۳۰ صفحه مقصد پربازدید خودکار کند و تلاش‌های ممیزی دستی را تا ٪۹۲ کاهش دهد:
«برای Pensionbazaar، اولویت ما ساختن کد باکیفیت از روز اول بود تا بعداً از بدهی فنی اجتناب کنیم. «راهنمای وب نوین» عامل کدنویسی ما را هدایت کرد تا استانداردهای وب نوین و روال‌های مطلوب عملکرد را اتخاذ کند و درعین‌حال اهداف سازگاری مرورگر خاص ما را رعایت کند. این کار بازبینی کد فرانت‌اند ما را به‌طور قابل‌توجهی آسان‌تر و سریع‌تر کرد و درنهایت زمان چرخه توسعه ما را بهبود بخشید.»
—آمان سونی، مدیر مهندسی، Policybazaar
WeTV
WeTV، پلاتفرم بین‌المللی جاری‌سازی ویدیو Tencent، یک عامل کدنویسی هوش مصنوعی به خط لوله CI/CD خود اضافه کرد که از Chrome DevTools برای عامل‌ها برای تشخیص پس‌رفت‌های عملکرد و از «راهنمای وب نوین» برای رفع آن‌ها بااستفاده از ویژگی‌های پلاتفرم وب نوین استفاده می‌کند. اکنون این نماینده به‌طور خودکار ٪۹۰ از بررسی‌های عملکرد ناموفق را تشخیص می‌دهد و حل می‌کند، و زمان اشکال‌زدایی و حل مشکل را تا ٪۸۷ کاهش می‌دهد (از چهار ساعت به ۳۰ دقیقه، شامل ارزیابی دستی):
«نتایج هم ازنظر سرعت و هم ازنظر کیفیت بسیار مؤثر بوده است. بینش‌های تحلیلی تشخیصی ارائه‌شده توسط Chrome DevTools برای عامل‌ها و «راهنمای وب نوین» مراجع قابل‌اعتمادی برای رفع مشکلات پیچیده چیدمان دراختیار ما قرار داد. ما پس‌از هر اصلاح، درستی‌سنجی دقیقی انجام می‌دهیم و نرخ موفقیت و پایداری فعلی اطمینان ما را به انتشار به‌طور قابل‌توجهی بهبود بخشیده است.»
—یانگجی ژنگ، مدیر مهندسی، WeTV (Tencent)
یادداشت ناموفق
note inc.، یکی از بزرگ‌ترین پلاتفرم‌های رسانه‌ای و سازندگان محتوا در ژاپن با بیش‌از ۹۰ میلیون کاربر فعال ماهانه، از «راهنمای وب نوین» در کنار سیستم طراحی داخلی خود استفاده کرد تا بخشی از تلاش‌های مداوم خود برای نوسازی فرانت‌اند Next.js را پیش ببرد. درطول ارزیابی ۱۸۰ اجرا در پایگاه کد تولید، «راهنمای وب نوین» با هدایت کردن عامل‌ها به استفاده از ویژگی‌های CSS و HTML بومی به‌جای جاوا اسکریپت سفارشی برای پویانمایی‌های پیمایش، نکته‌ابزارها، و آکاردئون‌ها، نرخ قبولی در بررسی‌های وب نوین را از ۶۱٪ به ۹۴٪ افزایش داد. همچنین اولویت‌بندی مناسب تصویر LCP را تا ٪۲۸ در ۴۳۱ درخواست ادغام‌شده افزایش داد:
«مأموریت ما در note این است که «شروع کنید و به خلق کردن ادامه دهید»، بنابراین پلاتفرم ما باید برای هر محتواساز و خواننده‌ای سریع و دردسترس باقی بماند. با افزایش کدهایی که بااستفاده از عامل‌های کدنویسی هوش مصنوعی نوشته می‌شوند، «راهنمای وب نوین» به آن‌ها کمک می‌کند به‌جای استفاده از الگوهای قدیمی جاوا اسکریپت، به راه‌حل‌های نوین و مبتنی بر استانداردها دست یابند. همچنین جزئیاتی را که به‌راحتی ممکن است نادیده گرفته شوند، مانند اولویت بارگیری تصویر و دسترس‌پذیری فرم، مشخص می‌کند. این ویژگی در ترکیب با سیستم طراحی ما به ما امکان می‌دهد تا ضمن حفظ ثبات واسط کاربر، به بهبود Keep Note ادامه دهیم.»
—تاکهیکو ایتاباشی، معاون فناوری، note inc.
MetaMask
MetaMask، یک پلاتفرم مالی خودحضانتی با بیش‌از ۱۰۰ میلیون بارگیری در حدود ۱۹۰ کشور، «راهنمای وب نوین» را به‌عنوان یک روبات بازبینی خودکارشده در هر درخواست واکشی برای افزونه مرورگر متن‌باز خود اجرا می‌کند که تنها با یک پیام‌واره سه‌خطی پیکربندی شده است. در پنج هفته اول، این ربات تقریباً ۴۸۰ درخواست واکشی را بررسی کرد و درباره ۶۴ مورد از آن‌ها نظر داد، که باعث شد مهندسان ۴۳ یافته (عمدتاً مشکلات مربوط به دسترس‌پذیری، معناشناسی HTML، و فرم‌ها که خطایاب‌های نحوی آن‌ها را شناسایی نمی‌کنند) را با میانه زمانی ۱۵ دقیقه از زمان نظر تا رفع مشکل برطرف کنند:
«مرورها واقعاً مفید هستند. آن‌ها به ما کمک کرده‌اند تا میاناهای برنامه‌سازی کاربردی مدرن مانند Interest invokers و Popover API را شناسایی کنیم و مهندسان ما با آن‌ها آشنا شوند. این کار زمان بررسی روابط عمومی را افزایش نداده است، بلکه احتمالاً آن را کاهش داده است. اگر MWG این مشکلات را شناسایی نمی‌کرد، برای شناسایی آن‌ها به فرد بازبینی نیاز بود که با این تکنیک‌های وب مدرن آشنا باشد.»
—فرانسیس نپوموسنو، مهندس تجربه کاربری، MetaMask
پشتیبانی از بوم‌سازگان و انجمن
«راهنمای وب نوین» به‌عنوان یک ابتکار در Chrome آغاز شد، اما رسیدن به این نقطه عطف ۱.۰ نتیجه تلاش مشترک با کارشناسان متعددی در سراسر جامعه وب بود.
از رهبران فنی حوزه محتوا که بر هر حوزه پلاتفرم وب نظارت می‌کنند، شرکای مرورگر ما در Firefox و Edge، کارشناسان مستقل استانداردهای وب و دسترس‌پذیری که راهنماها را تألیف و آزمایش کردند، و همه مشارکت‌کنندگان متن‌باز در GitHub که به شکل‌گیری این نسخه کمک کردند سپاس‌گزاریم!
اگر متوجه شدید که عامل‌های کدنویسی درباره وب اطلاعات کافی ندارند یا می‌خواهید به بهبود راهنمای موجود کمک کنید، برای مشارکت کردن به راهنمای مشارکت مراجعه کنید.
شروع به کار با «راهنمای وب نوین»
برای افزودن «راهنمای وب نوین» به پروژه‌تان، نصب‌کننده CLI را از فهرست راهنمای پروژه‌تان اجرا کنید:
npx modern-web-guidance@latest install
یا اگر قبلاً نسخه قدیمی‌تری را نصب کرده‌اید، می‌توانید با اجرای دستور زیر به نسخه ۱.۰ به‌روزرسانی کنید:
npx modern-web-guidance@latest update
علاوه‌بر CLI، می‌توانید «راهنمای وب نوین» را مستقیماً ازطریق اکثر بازارهای افزایه عامل کدنویسی محبوب، ازجمله Claude Code، Codex، Cursor، Antigravity، Copilot، WebStorm، Kimi Code، و Grok Build نصب و به‌روزرسانی کنید.
برای کسب اطلاعات بیشتر، این منابع را بررسی کنید: