ملخص مباشر لـ web.dev

ملخص لأهم الأخبار والتحديثات التي تم الإعلان عنها خلال فعالية المنتدى عبر الإنترنت التي تستمر لمدة 3 أيام، وتذكير بشأن الأحداث الإقليمية المقبلة.

لقد اختتمنا للتو فعالية web.dev LIVE التي تستمر لمدة ثلاثة أيام والتي اجتمع فيها بعض أفراد منتدى الويب على الإنترنت للتحدث عن حالة تطوير الويب. بدأنا كل يوم في منطقة زمنية مختلفة، وقد شارك موظفو Google جولة من آخر الأخبار والمعلومات والنصائح بغرض مساعدة المطورين من خلال الأدوات والإرشادات التي تساعد في الحفاظ على ثبات شبكة الإنترنت وقوتها وتسهيل إمكانية الوصول إليها.

إذا فاتك بعض الوقت من البث المباشر، يتم تسجيل كل الجلسات وسيكون بإمكانك مشاهدتها على YouTube. لدينا أيضًا فعاليات إقليمية قادمة حول العالم يتم تنظيمها من قِبل Google Developer Groups، وستقدّم جلسات معمّقة حول المواضيع التي تناولناها أثناء حدث web.dev LIVE.

لِنستعرض بعض الأخبار والتحديثات التي تمت مشاركتها على مدار الأيام الثلاثة.

مؤشرات أداء الويب

أعلن فريق Chrome عن إطلاق مبادرة مؤشرات أداء الويب لتوفير إرشادات ومقاييس وأدوات موحّدة لمساعدة المطوّرين في تقديم تجارب رائعة للمستخدمين على الويب. وأعلن فريق "بحث Google" مؤخرًا أنّه سيقيّم تجربة الصفحة كمعيار للترتيب، وسيتم وضع مقاييس مؤشرات الويب الأساسية كأساس لها.

إنّ الركائز الثلاث لمؤشرات أداء الويب الأساسية لعام 2020 هي تحميل محتوى الصفحة والتفاعل معه والثبات البصري لمحتوى الصفحة، وتستند هذه الركائز إلى المقاييس التالية:

صورة توضيحية لمؤشرات أداء الويب الأساسية

في web.dev LIVE، شاركنا أفضل الممارسات حول كيفية تحسين مؤشرات الويب الأساسية وكيفية استخدام أدوات مطوّري البرامج في Chrome لاستكشاف القيم الأساسية لموقعك الإلكتروني. شاركنا أيضًا الكثير من المحادثات الأخرى المتعلّقة بالأداء والتي يمكنك الاطّلاع عليها على web.dev/live ضمن الجدول الزمني لليوم الأول.

tooling.report

قد يشكّل تطوير منصة على نطاق واسع شبكة الإنترنت تحدّيًا كبيرًا. غالبًا ما تكون أدوات الإنشاء هي أساس مشروع تطوير الويب الخاص بك، حيث تؤدي دورًا رئيسيًا في التعامل مع دورة حياة المطوّر والمنتج.

لقد لاحظنا جميعًا صعوبة في إنشاء ملفات إعداد، لذا أنشأنا tooling.report لمساعدة مطوّري البرامج على الويب ومؤلفي الأدوات في التغلّب على مدى تعقيد محتوى الويب. إنه موقع ويب يساعدك في اختيار أداة التصميم المناسبة لمشروعك التالي، أو تحديد ما إذا كان الانتقال من أداة إلى أخرى يستحق ذلك، أو اكتشف كيفية دمج أفضل الممارسات في تهيئة الأدوات وقاعدة التعليمات البرمجية.

لقد صمّمنا مجموعة من الاختبارات لتحديد أدوات الإصدار التي تتيح لك اتّباع أفضل الممارسات الخاصة بتطوير الويب. لقد عملنا مع مؤلفي أداة الإنشاء للتأكد من استخدامنا لأدواتهم بشكل صحيح وتمثيلهم بشكل عادل.

لقطة شاشة لواجهة مستخدم tooling.report

يشمل الإصدار الأولي من tooling.report حزمة Webpack v4 و Rollup v2 وParcel v2 وBrowserify with Gulp، والتي يبدو أنّها أكثر أدوات الإنشاء رواجًا في الوقت الحالي. لقد صمّمنا tooling.report بمرونة في إضافة المزيد من أدوات التصميم وإجراء اختبارات إضافية بمساعدة المنتدى.

إذا فاتتنا أفضل الممارسات التي ينبغي اختبارها، فيرجى اقتراحها في مشكلة GitHub. إذا كنت مستعدًا لكتابة اختبار أو إضافة أداة جديدة لم نضمّنها في المجموعة الأولية، نرحّب بك بالمساهمة.

في هذه الأثناء، يمكنك الاطّلاع على المزيد من المعلومات حول طريقتنا في إنشاء Tooling.report ومشاهدة الجلسة من web.dev LIVE.

الخصوصية والأمان على الويب

يؤمن Chrome بأهمية شبكة الويب المفتوحة التي تراعي خصوصية المستخدمين وتحافظ على حالات الاستخدام الرئيسية التي تجعل الويب يلبّي احتياجات الجميع.

في عام 2019، اقترح Chrome تعديلاً على معيار ملفات تعريف الارتباط لحصر ملفات تعريف الارتباط على سياقات الطرف الأول تلقائيًا وتشترط الإشارة بشكل صريح إلى ملفات تعريف الارتباط للسياقات التابعة لجهات خارجية. على وجه التحديد، يوفر هذا خط دفاع ضد هجمات تزوير طلب Cross-Site Site. ويتم حاليًا اعتماد الاقتراح في Chrome وFirefox وEdge وغيرها من المتصفحات.

وعلى الرغم من أنّ Chrome قرّر التراجع مؤقتًا عن هذه التغييرات في ظل انتشار فيروس كورونا المستجد (كوفيد-19)، ترى أيضًا هذه الأنواع من الهجمات تتزايد بشكلٍ تدريجي في ظل أزمة مزدهرة يكون فيها الأشخاص أكثر عرضة للخطر. إذًا، مع الإصدار الثابت 84 من Chrome (من منتصف شهر تموز (يوليو) 2020)، سيبدأ طرح التغييرات مرة أخرى على جميع إصدارات Chrome بدءًا من الإصدار 80 والإصدارات الأحدث. يمكنك الاطّلاع على إرشادات ملفات تعريف الارتباط في SameSite وكذلك جلسة web.dev LIVE لمزيد من المعلومات.

علاوة على ذلك، تحت إعلان مبادرة حماية الخصوصية، يقدّم Chrome عددًا من اقتراحات المعايير التي تهدف إلى دعم حالات الاستخدام التي تتيح للأشخاص تحقيق أرباحهم باستخدام النظام الأساسي للويب، والقيام بذلك بطريقة تحترم خصوصية المستخدم بشكل أفضل. يسعى Chrome بنشاط للحصول على ملاحظات بشأن هذه المقترحات، ويشارك في المنتديات المفتوحة التابعة لـ W3C لمناقشة المقترحات بالإضافة إلى تلك التي قدمتها الأطراف الأخرى. يمكنك الاطّلاع على مزيد من المعلومات حول هذه المبادرة في جلسة الأمان والخصوصية على الويب المفتوح.

أخيرًا، عند النظر إلى أمان المستخدم، أظهرت ثغرة Spectre ثغرة أمنية تعني أنّ رموزًا برمجية ضارة تعمل في إحدى عمليات المتصفح قد تتمكّن من قراءة أي بيانات مرتبطة بتلك العملية حتى لو كانت من أصل مختلف. يتمثل أحد إجراءات التخفيف في المتصفح في ذلك في عزل الموقع، أي وضع كل موقع في عملية منفصلة. شاهِد جلسة web.dev LIVE حول السياسات الجديدة لبرامج فتح المحتوى من عدة مصادر وأداة تضمين المحتوى (COOP وCOEP) لمعرفة مزيد من المعلومات.

إنشاء شبكة ويب باستخدام إمكانات فعّالة

يريد Chrome أن يكون لك مطلق الحرية في إنشاء تطبيقات الويب الأعلى جودةً والتي تتيح لك أكبر قدر من الوصول إلى المستخدمين عبر الأجهزة. من خلال الجمع بين قابلية تثبيت تطبيقات الويب التقدّمية (PWA) وقابلية تثبيتها من خلال مشروع القدرات (Project Fugu)، يركِّز Chrome على ثلاثة عوامل لسد الفجوة بين التطبيقات الخاصة بالنظام الأساسي والويب، لمساعدتك في إنشاء تجارب رائعة وتقديمها.

بدايةً، تعمل فِرق Chrome بجد لمنح مطوّري الويب والمستخدمين مزيدًا من التحكّم في تجربة التثبيت، وإضافة إعلان ترويجي للتثبيت إلى المربّع المتعدد الاستخدامات، وغير ذلك الكثير. على الرغم من انتشار الويب في كل مكان، إلا أنه لا يزال من المهم لبعض الشركات أن تمتلك تطبيقاتها في المتجر. ولالمساعدة، أطلق Chrome أداة Bubblewrap، وهي مكتبة وواجهة سطر مشاركات لتسهيل عملية نقل تطبيق الويب التقدّمي (PWA) إلى "متجر Play". في الواقع، يستخدم PWABuilder.com الآن Bubblewrap. ببضع نقرات فقط بالماوس، يمكنك إنشاء ملف APK وتحميل تطبيق الويب التقدّمي الخاص بك إلى "متجر Play" طالما أنك تستوفي المعايير.

ثانيًا، يوفّر Chrome تكاملاً أكبر مع نظام التشغيل، مثل إمكانية مشاركة صورة أو أغنية أو أي محتوى آخر من خلال استدعاء خدمة المشاركة على مستوى النظام باستخدام Web Share API، أو القدرة على تلقّي المحتوى عند مشاركته من تطبيق آخر مثبَّت. ويمكنك إبقاء المستخدمين على اطّلاع بكل جديد، أو إعلامهم بذلك سريعًا من خلال شارات التطبيقات. أصبح من الأسهل على المستخدمين الآن بدء إجراء بسرعة باستخدام اختصارات التطبيقات التي ستتوفر في Chrome 84 (منتصف تموز (يوليو) 2020).

وأخيرًا، يعمل Chrome على إمكانات جديدة تتيح سيناريوهات جديدة لم تكن ممكنة من قبل، مثل المحرّرين الذين يقرأون الملفات ويكتبونها في نظام الملفات المحلي لدى المستخدم، أو يحصلون على قائمة بالخطوط المثبّتة محليًا حتى يتمكّن المستخدمون من استخدامها في تصميماتهم.

خلال بث web.dev LIVE، تحدثنا عن الكثير من الإمكانات والميزات الأخرى التي يمكنها أن توفّر لك التجربة نفسها، وذلك بالإمكانات نفسها التي توفّرها التطبيقات الخاصة بالنظام الأساسي. يمكنك الاطّلاع على جميع الجلسات على web.dev/live في الجدول الزمني لليوم الثاني.

الميزات الجديدة في "أدوات مطوري البرامج في Chrome" وLighthouse 6.0

أدوات مطوري البرامج في Chrome: علامة تبويب "المشاكل" الجديدة ومحاكي أوجه قصور الألوان ودعم "مؤشرات أداء الويب"

من أهم ميزات "أدوات مطوري البرامج في Chrome" قدرتها على رصد المشاكل على صفحة الويب وجذب انتباه المطوّرين إليها. هذا الأمر أكثر أهمية الآن لأننا ننتقل إلى المرحلة التالية من شبكة الويب التي تركّز على الخصوصية أولاً. للحدّ من إرهاق الإشعارات والفوضى في وحدة التحكّم، أطلقت "أدوات مطوري البرامج في Chrome" علامة تبويب "المشاكل" التي تركّز على ثلاثة أنواع من المشاكل الملحّة التي تبدأ بها: مشاكل ملفات تعريف الارتباط والمحتوى المختلَط ومشاكل بروتوكول أمان طبقة النقل (COEP). ما عليك سوى مشاهدة جلسة web.dev LIVE حول العثور على المشاكل في علامة التبويب "المشاكل وإصلاحها" للبدء.

لقطة شاشة لعلامة التبويب "المشاكل"

بالإضافة إلى ذلك، ولأنّ مؤشرات أداء الويب الأساسية أصبحت واحدة من أهم مجموعات المقاييس التي يجب أن يتتبّعها مطوِّرو البرامج على الويب وقياسها، تسعى أدوات مطوّري البرامج إلى ضمان قدرة المطوّرين على تتبّع مستوى أدائهم بسهولة وفقًا لهذه الحدود. أصبحت هذه المقاييس الثلاثة الآن في لوحة "الأداء" في "أدوات مطوري البرامج في Chrome"

وأخيرًا، وفي ظل تركيز عدد متزايد من المطوّرين على تسهيل الاستخدام، قدّمت DevTools أيضًا محاكيًا لأوجه قصور الألوان يتيح للمطوّرين محاكاة الرؤية غير الواضحة والأنواع الأخرى من قصور الرؤية. يمكنك الاطّلاع على المزيد من المعلومات حول هذه الميزة والعديد من الميزات الأخرى في جلسة الميزات الجديدة في "أدوات مطوري البرامج".

لقطة شاشة لمحاكي قصور في الرؤية.

Lighthouse 6.0: مقاييس جديدة وقياسات الميزات الاختبارية في "مؤشرات أداء الويب الأساسية" ونتيجة أداء معدّلة وعمليات تدقيق جديدة

Lighthouse هي أداة مبرمَجة ومفتوحة المصدر تساعد المطوّرين في تحسين أداء مواقعهم الإلكترونية. ركّز فريق Lighthouse، في أحدث إصدار منه، على تقديم إحصاءات استنادًا إلى المقاييس التي تمنحك رؤية متوازنة لجودة تجربة المستخدم مقابل الأبعاد المهمة.

ولضمان اتّساق المحتوى، أضافت أداة Lighthouse الدعم إلى مؤشرات أداء الويب الأساسية كالآتي: LCP وTBT (وهو وكيل لـ FID لأنّ Lighthouse عبارة عن أداة اختبارية ولا يمكن قياس مقياس FID إلا على مستوى المجال) وCLS. أزالت أداة Lighthouse أيضًا ثلاثة مقاييس قديمة: سرعة عرض أوّل محتوى مفيد على الصفحة ووحدة المعالجة المركزية الأولى غير نشِطة والحد الأقصى المحتمل لمهلة مهلة الاستجابة الأولى. ويرجع سبب عمليات الإزالة هذه إلى اعتبارات، مثل تغيّر المقاييس والمقاييس الأحدث التي تقدّم انعكاسات أفضل لجزء تجربة المستخدم الذي تحاول أداة Lighthouse قياسه. بالإضافة إلى ذلك، أجرت أداة Lighthouse بعض التعديلات على مقدار عوامل كل مقياس في نتيجة الأداء الإجمالية استنادًا إلى ملاحظات المستخدمين.

أضافت أداة Lighthouse أيضًا آلة حاسبة للنتائج لمساعدتك في الاطّلاع على نتيجة أدائك، من خلال تقديم مقارنة بين نتائج الإصدارين 5 و6. عند إجراء تدقيق باستخدام Lighthouse 6.0، يأتي التقرير مع رابط للآلة الحاسبة مع تعبئة نتائجك.

أخيرًا، أضافت أداة Lighthouse مجموعة من عمليات التدقيق الجديدة، مع التركيز على تحليل JavaScript وتسهيل الاستخدام.

قائمة بعمليات التدقيق الجديدة.

يمكنك الاطّلاع على المزيد من المعلومات من خلال مشاهدة جلسة الميزات الجديدة في أدوات السرعة.

مزيد من المعلومات

شكرًا لكل من انضم إلينا في المنتدى لمناقشة الفرص والتحديات التي تواجه منصة الويب.

لخصت هذه المشاركة بعض أبرز اللحظات في الحدث، ولكن كان هناك المزيد. احرص على الاطّلاع على جميع الجلسات والاشتراك في نشرة web.dev الإخبارية إذا أردت الاطّلاع على المزيد من المحتوى في بريدك الوارد مباشرةً. يمكنك أيضًا الانتقال إلى قسم الأحداث الإقليمية على web.dev/live للعثور على فعالية قادمة للمنتدى في منطقتك الزمنية.