web.dev جمع بندی زنده

خلاصه ای از اخبار و به روز رسانی های مهمی که در طول رویداد اجتماعی آنلاین 3 روزه ما اعلام شد، و یادآوری در مورد رویدادهای منطقه ای آینده.

ما به تازگی رویداد سه روزه خود را به پایان رساندیم، web.dev LIVE ، که در آن برخی از جامعه وب گرد هم آمدند تا در مورد وضعیت توسعه وب صحبت کنند. ما هر روز را در یک منطقه زمانی منطقه‌ای مختلف شروع می‌کردیم و کارمندان Google دوری از به‌روزرسانی‌ها، اخبار و نکات را با روحیه کمک به توسعه‌دهندگان با ابزارها و راهنمایی‌ها برای پایدار، قدرتمند و در دسترس نگه داشتن وب به اشتراک گذاشتند.

اگر بخشی از پخش زنده را از دست دادید، همه جلسات ضبط شده و برای تماشای شما در YouTube در دسترس هستند. ما همچنین رویدادهای منطقه‌ای آینده را در سراسر جهان داریم که توسط گروه‌های توسعه‌دهنده Google سازماندهی شده‌اند و جلسات غواصی عمیقی را در مورد موضوعات مرتبط با آنچه در طول web.dev LIVE پوشش داده‌ایم ارائه می‌دهند.

بیایید به برخی از اخبار و به‌روزرسانی‌هایی که در این سه روز به اشتراک گذاشته شد، بپردازیم.

وب حیاتی

تیم Chrome ابتکار Web Vitals را برای ارائه راهنمایی‌ها، معیارها و ابزارهای یکپارچه برای کمک به توسعه‌دهندگان برای ارائه تجربیات کاربری عالی در وب اعلام کرد . تیم جستجوی گوگل نیز اخیراً اعلام کرده است که تجربه صفحه را به عنوان معیار رتبه‌بندی ارزیابی می‌کند و معیارهای Core Web Vitals را به عنوان پایه آن در نظر می‌گیرد.

سه ستون Core Web Vitals 2020 بارگذاری، تعامل و ثبات بصری محتوای صفحه است که با معیارهای زیر مشخص می شود:

• Largest Contentful Paint سرعت بارگذاری درک شده را اندازه گیری می کند و نقطه ای را در جدول زمانی بارگذاری صفحه مشخص می کند که احتمالاً محتوای اصلی صفحه بارگیری شده است.
• تأخیر ورودی اول میزان پاسخ‌دهی را اندازه‌گیری می‌کند و تجربه‌ای را که کاربران هنگام تلاش برای اولین بار تعامل با یک صفحه احساس می‌کنند، کمّی می‌کند.
• تغییر چیدمان تجمعی ثبات بصری را اندازه گیری می کند و میزان حرکت غیرمنتظره محتوای صفحه را کمیت می کند.

در web.dev LIVE، بهترین روش‌ها را در مورد نحوه بهینه‌سازی Core Web Vitals و نحوه استفاده از Chrome DevTools برای کشف مقادیر حیاتی سایت خود به اشتراک گذاشتیم. ما همچنین بسیاری از گفتگوهای مرتبط با عملکرد دیگر را به اشتراک گذاشتیم که می توانید آنها را در web.dev/live در برنامه روز اول بیابید.

ابزار.گزارش

توسعه برای پلتفرمی به گستردگی وب می تواند چالش برانگیز باشد. ابزارهای ساخت اغلب در قلب پروژه توسعه وب شما قرار دارند و نقش کلیدی در مدیریت چرخه عمر توسعه دهنده و محصول شما بر عهده می گیرند.

همه ما فایل‌های پیکربندی سخت‌افزاری را دیده‌ایم، بنابراین برای کمک به توسعه‌دهندگان وب و نویسندگان ابزار برای غلبه بر پیچیدگی وب، tooling.report را ساختیم. این وب‌سایتی است که به شما کمک می‌کند ابزار ساخت مناسب را برای پروژه بعدی خود انتخاب کنید، تصمیم بگیرید که آیا مهاجرت از یک ابزار به ابزار دیگر ارزشش را دارد یا نه، یا بفهمید که چگونه بهترین روش‌ها را در پیکربندی ابزار و پایه کد خود بگنجانید.

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

نسخه اولیه tooling.report شامل webpack v4، Rollup v2، Parcel v2 و Browserify with Gulp است که به نظر می‌رسد محبوب‌ترین ابزارهای ساخت در حال حاضر هستند. ما tooling.report را با انعطاف‌پذیری افزودن ابزارهای ساخت بیشتر و آزمایش‌های اضافی با کمک جامعه ساختیم.

اگر بهترین روشی را که باید آزمایش شود را از دست دادیم، لطفاً آن را در یک شماره GitHub پیشنهاد دهید . اگر می‌خواهید یک آزمایش بنویسید یا ابزار جدیدی را اضافه کنید که در مجموعه اولیه قرار نداده‌ایم، از مشارکت شما استقبال می‌کنیم!

در عین حال، می‌توانید در مورد رویکرد ما برای ایجاد tooling.report بیشتر بخوانید و جلسه ما را از web.dev LIVE تماشا کنید.

حریم خصوصی و امنیت در وب

Chrome به یک وب باز معتقد است که به حریم خصوصی کاربران احترام می گذارد و موارد استفاده کلیدی را حفظ می کند که باعث می شود وب برای همه کار کند.

در سال 2019، کروم به‌روزرسانی استاندارد کوکی‌ها را پیشنهاد کرد تا کوکی‌ها را به‌طور پیش‌فرض به زمینه‌های شخص اول محدود کند و کوکی‌ها را برای زمینه‌های شخص ثالث به‌صراحت علامت‌گذاری کند. به طور خاص، این یک خط دفاعی در برابر حملات جعل درخواست Cross-Site فراهم می کند. این پیشنهاد اکنون توسط مرورگرهای کروم، فایرفاکس، اج و سایر مرورگرها پذیرفته شده است.

در حالی که کروم تصمیم گرفت موقتاً این تغییرات را با توجه به COVID-19 لغو کند ، متأسفانه، در طول یک بحران که افراد آسیب‌پذیرترین هستند، شاهد افزایش این نوع حملات نیز هستید. بنابراین، با انتشار Chrome 84 Stable (اواسط ژوئیه 2020)، تغییرات مجدداً در تمام نسخه های Chrome از 80 به بالا اعمال می شوند. برای کسب اطلاعات بیشتر ، راهنمای کوکی‌های SameSite و همچنین جلسه web.dev LIVE را بررسی کنید.

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

در نهایت، با نگاهی به امنیت کاربر، Spectre یک آسیب‌پذیری بود که به این معنی بود که کد مخربی که در یک فرآیند مرورگر اجرا می‌شود، ممکن است بتواند هر داده مرتبط با آن فرآیند را بخواند، حتی اگر از مبدا دیگری باشد. یکی از کاهش دهنده های مرورگر برای این کار، جداسازی سایت است، یعنی قرار دادن هر سایت در یک فرآیند جداگانه. برای کسب اطلاعات بیشتر، جلسه web.dev LIVE را در مورد خط‌مشی‌های جدید بازکننده و جاسازی Cross-Origin (COOP و COEP) تماشا کنید.

ساخت وب با قابلیت های قدرتمند

Chrome از شما می‌خواهد که در ایجاد برنامه‌های وب با بالاترین کیفیت که بیشترین دسترسی را به کاربران در دستگاه‌ها می‌دهد، آزاد باشید. Chrome با ترکیب قابلیت نصب و قابلیت اطمینان PWAها، با پروژه قابلیت‌ها (Project Fugu)، روی سه چیز تمرکز می‌کند تا شکاف بین برنامه‌های مخصوص پلتفرم و وب را کاهش دهد و به شما کمک کند تجربیات عالی بسازید و ارائه دهید.

اول، تیم‌های Chrome سخت کار کرده‌اند تا به توسعه‌دهندگان وب و کاربران کنترل بیشتری بر تجربه نصب ، اضافه کردن یک تبلیغ نصب به omnibox و موارد دیگر بدهند. علیرغم فراگیر بودن وب، هنوز هم برای برخی از کسب و کارها مهم است که برنامه خود را در فروشگاه داشته باشند. برای کمک، Chrome Bubblewrap را راه‌اندازی کرد، یک کتابخانه و CLI که ورود PWA شما به Play Store را بی‌اهمیت می‌کند. در واقع، PWABuilder.com اکنون از Bubblewrap در زیر کاپوت استفاده می کند. تنها با چند کلیک ماوس، می‌توانید یک APK ایجاد کنید و PWA خود را در Play Store آپلود کنید، البته تا زمانی که معیارها را رعایت کنید.

دوم، Chrome یکپارچه‌سازی دقیق‌تر با سیستم‌عامل فراهم می‌کند، مانند امکان اشتراک‌گذاری عکس، آهنگ، یا هر چیز دیگری با فراخوانی سرویس اشتراک‌گذاری در سطح سیستم با Web Share API ، یا امکان دریافت محتوا هنگام اشتراک‌گذاری از یک دیگر برنامه نصب شده می‌توانید کاربران را به‌روز نگه دارید، یا به‌طور نامحسوس از فعالیت‌های جدید با نشان برنامه به آنها اطلاع دهید. همچنین، اکنون برای کاربران آسان‌تر است که به سرعت یک اقدام را با استفاده از میانبرهای برنامه شروع کنند، که در Chrome 84 (اواسط ژوئیه 2020) قرار می‌گیرد.

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

در طول web.dev LIVE، ما در مورد بسیاری از قابلیت‌ها و ویژگی‌های دیگر صحبت کردیم که می‌توانند به شما امکان ارائه تجربه مشابه، با همان قابلیت‌ها، برنامه‌های پلتفرم خاص را بدهند. همه جلسات را در web.dev/live در برنامه روز دوم ببینید.

موارد جدید در Chrome DevTools و Lighthouse 6.0

Chrome Devtools: برگه Issues جدید، شبیه ساز کمبود رنگ و پشتیبانی Web Vitals

یکی از قدرتمندترین ویژگی‌های Chrome DevTools توانایی آن در شناسایی مشکلات در یک صفحه وب و جلب توجه توسعه‌دهنده آن است. هنگامی که ما به مرحله بعدی یک وب برای حفظ حریم خصوصی می رویم، این بسیار مناسب است. برای کاهش خستگی اعلان‌ها و به هم ریختگی در کنسول، Chrome DevTools برگه Issues را راه‌اندازی کرد که برای شروع بر روی سه نوع مشکل مهم تمرکز دارد: مشکلات کوکی ، محتوای مختلط ، و مشکلات COEP . برای شروع، جلسه web.dev LIVE را در مورد یافتن و رفع مشکلات برگه Issues تماشا کنید.

علاوه بر این، با تبدیل شدن Core Web Vitals به یکی از حیاتی‌ترین مجموعه‌های معیار برای توسعه‌دهندگان وب برای ردیابی و اندازه‌گیری، DevTools می‌خواهد اطمینان حاصل کند که توسعه‌دهندگان به راحتی می‌توانند عملکرد خود را در برابر این آستانه‌ها پیگیری کنند. بنابراین این سه معیار اکنون در پانل عملکرد Chrome DevTools هستند.

و در نهایت، با افزایش تعداد توسعه دهندگانی که روی دسترسی تمرکز می کنند، DevTools همچنین یک شبیه ساز نقص دید رنگی را معرفی کرد که به توسعه دهندگان اجازه می دهد تا از دید تاری و انواع دیگر کمبودهای بینایی تقلید کنند. می‌توانید درباره این ویژگی و بسیاری از ویژگی‌های دیگر در جلسه What's new in DevTools اطلاعات بیشتری کسب کنید.

Lighthouse 6.0: معیارهای جدید، اندازه گیری های آزمایشگاهی Core Web Vitals، امتیاز عملکرد به روز شده، و ممیزی های جدید

Lighthouse یک ابزار خودکار منبع باز است که به توسعه دهندگان کمک می کند تا عملکرد سایت خود را بهبود بخشند. در آخرین نسخه خود، تیم Lighthouse بر روی ارائه بینش های مبتنی بر معیارهایی تمرکز کرد که به شما دید متعادلی از کیفیت تجربه کاربری شما در برابر ابعاد بحرانی می دهد.

برای اطمینان از ثبات، لایت‌هاوس پشتیبانی از Core Web Vitals اضافه کرد: LCP ، TBT (پراکسی برای FID زیرا Lighthouse یک ابزار آزمایشگاهی است و FID فقط در میدان اندازه‌گیری می‌شود) و CLS . Lighthouse همچنین سه معیار قدیمی را حذف کرد: First Meaningful Paint ، First CPU Idle و Max Potential FID . این حذف ها به دلیل ملاحظاتی مانند تغییرپذیری متریک و معیارهای جدیدتر است که بازتاب بهتری از بخشی از تجربه کاربر را ارائه می دهد که Lighthouse سعی دارد اندازه گیری کند. علاوه بر این، لایت‌هاوس همچنین تنظیماتی را در میزان فاکتورهای هر متریک در امتیاز عملکرد کلی بر اساس بازخورد کاربران انجام داد.

لایت هاوس همچنین یک ماشین حساب امتیازدهی را اضافه کرده است تا با ارائه مقایسه بین نمرات نسخه 5 و 6 به شما کمک کند امتیاز عملکرد خود را کشف کنید. هنگامی که با Lighthouse 6.0 ممیزی را اجرا می کنید، این گزارش با پیوندی به ماشین حساب همراه با نتایج شما همراه است.

و در نهایت، لایت هاوس دسته ای از ممیزی های جدید را با تمرکز بر تجزیه و تحلیل جاوا اسکریپت و قابلیت دسترسی اضافه کرد.

با تماشای جلسه ابزارهای سرعت جدید چه خبر است، بیشتر بیاموزید.

بیشتر بدانید

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

این پست برخی از نکات برجسته این رویداد را خلاصه کرد، اما موارد بسیار بیشتری وجود داشت. اگر می‌خواهید محتوای بیشتری مستقیماً به صندوق ورودی خود وارد شود، مطمئن شوید که همه جلسات را بررسی کرده و در خبرنامه web.dev مشترک شوید . و از بخش رویدادهای منطقه ای در web.dev/live دیدن کنید تا یک رویداد اجتماعی آینده را در منطقه زمانی خود بیابید!