لقد استخدمت الويب لمدة يوم مع إيقاف تشغيل JavaScript

هذه المقالة هي جزء من سلسلة أحاول فيها استخدام الويب تحت قيود مختلفة ، وتمثل مجموعة سكانية معينة للمستخدم. آمل أن أرفع من شأن الصعوبات التي يواجهها أناس حقيقيون ، والتي يمكن تجنبها إذا صممنا وطورنا بطريقة تتعاطف مع احتياجاتهم. هذا الأسبوع ، أقوم بتعطيل JavaScript.

لماذا مسائل noscript

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

قد يكون لديك الكثير من المحتوى المفيد داخل علامات noscript الخاصة بك ، ولكن إذا كنت أستخدم متصفحًا يدعم JavaScript ، فلن أرى أيًا من ذلك - سأكون عالقًا في انتظار تنزيل تجربة JS. عندما أشير إلى تجربة "noscript" ، أعني عمومًا تجربة استخدام صفحة الويب بدون JavaScript ، بدلاً من الاستخدام الصريح للعلامة.

إذن ، من يهتم بالمستخدمين الذين ليس لديهم JavaScript؟ هل هؤلاء المستخدمين noscript موجودون حتى الآن؟

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

لقد تم تذكير هذا الاقتباس من قبل Jake Archibald:

"جميع المستخدمين ليسوا من JS أثناء تنزيلهم لـ JS."

فكر في هؤلاء المستخدمين الذين تم تمكين JavaScript ولكنهم لا يتمتعون بتجربة JavaScript ، لأي عدد من الأسباب ، بما في ذلك حظر الشركات أو المحلي أو تجريد عناصر JavaScript ، وأخطاء JavaScript الموجودة في المتصفح من الوظائف الإضافية للمتصفح وأشرطة الأدوات ، والشبكة الأخطاء ، وما إلى ذلك. كشفت BuzzFeed مؤخرًا أن حوالي 1 ٪ من الطلبات الخاصة بمهلة JavaScript الخاصة بهم قد انتهت ، أي ما يعادل 13 مليون طلب فاشل شهريًا.

في بعض الأحيان ، لا تكون المشكلة مع المستخدم ولكن مع تسليم CDN جافا سكريبت. هل تتذكر في فبراير 2017 عندما تعطلت خوادم أمازون؟ كانت الملايين من المواقع التي تعتمد على JavaScript التي تم تسليمها عبر شبكات CDN الخاصة بأمازون في مشكلة كبيرة ، مما كلف الشركات في مؤشر S&P 500 150 مليون دولار في فترة انقطاع لمدة أربع ساعات.

فكر أيضًا في الأسواق العالمية الناشئة ؛ لا تزال البلدان تكافح من أجل بناء شبكة إنترنت سريع ، مع عدم قدرة السكان على تحمل تكلفة الأجهزة السريعة لتشغيل JavaScript كثيف الاستخدام لوحدة المعالجة المركزية. أو فكر في الأسواق القائمة ، حيث حتى iPhone X على اتصال 4G ليس محصنًا من تأثيرات صفحة الويب المحملة جزئيًا التي تقطعها قطاراتهم وهي تسير في نفق.

تعد الويب بيئة معادية وغير متوقعة ، ولهذا السبب يتبع العديد من المطورين مبدأ التحسين التدريجي لبناء مواقعهم من تجربة أساسية لـ HTML الدلالي ، وطبقات CSS وجافا سكريبت غير مزعجة فوق ذلك. كنت أرغب في معرفة عدد المواقع التي تطبق هذا عمليًا. ما هي أفضل طريقة من تعطيل JavaScript تمامًا؟

كيفية تعطيل JavaScript

إذا كنت ترغب في إعادة إنشاء تجربتي بنفسك ، فيمكنك تعطيل JavaScript بالبحث في الإعدادات في Chrome:

• افتح أدوات المطور (Chrome -> View -> Developer Tools ، أو ⌥⌘I على لوحة المفاتيح)
• افتح القائمة الفرعية للمطور (النقاط الثلاث بجوار أيقونة الإغلاق في أدوات المطور)
• اختر "إعدادات" من هذه القائمة الفرعية
• ابحث عن قسم "المصحح" وحدد المربع "تعطيل جافا سكريبت"

أو ، مثلي ، يمكنك استخدام ملحق Toggle JavaScript Chrome الممتاز الذي يتيح لك تعطيل JS بنقرة واحدة.

إنشاء منشور WordPress مع تعطيل JavaScript

بعد تعطيل JavaScript ، كان أول منفذ أتصل به هو الانتقال إلى موقع محفظتي الشخصية - والذي يعمل على WordPress - بهدف تدوين تجاربي في الوقت الفعلي.

WordPress هو في الواقع سهل الاستخدام للغاية ، لذلك تمكنت من البدء في كتابة هذا المنشور دون أي صعوبة ، على الرغم من أنه كان يفتقد بعض ميزات تنسيق النص وتضمين الوسائط التي اعتدت عليها.

دعنا نقارن شاشة نشر WordPress مع وبدون JavaScript:

شعرت براحة تامة بدون أشرطة الأدوات حتى احتجت إلى تضمين لقطات شاشة في رسالتي. بدون زر "إضافة وسائط" ، كان علي الانتقال إلى شاشات منفصلة لتحميل ملفاتي. هذا أمر منطقي ، لأن محتوى "التحميل في الخلفية" يتطلب Ajax ، والذي يتطلب JavaScript. لكنني فوجئت تمامًا بأن شاشة الوسائط المنفصلة تتطلب أيضًا JavaScript!

لحسن الحظ ، كان هناك رأي احتياطي:

بعد تحميل الصورة ، اضطررت إلى كتابة علامة HTML في img يدويًا ونسخ عنوان URL للصورة ولصقه فيه. لم تكن هناك طريقة لتحديد عنوان URL المصغر للصورة التي تم تحميلها ، وأي تسميات توضيحية كتبتها يجب أيضًا نسخها يدويًا. سرعان ما سئمت من هذا النهج وخططت للعودة في اليوم التالي وإعادة إدراج جميع الصور عندما سمحت لنفسي باستخدام JavaScript مرة أخرى.

قررت أن ألقي نظرة على كيفية أداء الواجهة الأمامية لموقعي.

عرض الموقع الخاص بي بدون JavaScript

لقد فوجئت بسرور لأن موقعي يبدو متشابهًا إلى حد كبير بدون JS:

دعنا نلقي نظرة فاحصة على تضمين Twitter:

أسفل الجزء المرئي من موقعي ، قمت أيضًا بتضمين بعض محتوى Instagram ، والذي يتوافق جيدًا مع تجربة noscript .

أخيرًا ، لديّ GitHub مُضمّن على موقعي. لا يقدم GitHub تضمينًا أصليًا ، لذلك أستخدم بطاقات GitHub غير الرسمية بواسطة Hsiaoming Yang.

كنت نصف آمل أن أصدمك بإحصائيات ما قبل وبعد ( ميغا بايت من JS لتضمين صغير! نهاية العالم! دعونا نتخلى عن JavaScript! ) ، ونصف آمل أن يكون هناك اختلاف بسيط جدًا ( التحسين التدريجي! أنا مطور جيد! ).

دعونا نقارن أوزان الصفحات مع وبدون جافا سكريبت. أولاً ، باستخدام JavaScript:

الآن بدون JavaScript:

من أجل تغريدة أنيقة ، وتضمين GitHub وإدراج Instagram كامل الدسم ، ينمو موقعي 600 كيلوبايت إضافية. لدي أيضًا تتبع تحليلات جوجل وبعض الميزات التفاعلية المخفية. كل الأشياء التي تم أخذها في الاعتبار ، لا يبدو أن 600 كيلو بايت فوق القمة - على الرغم من أنني فوجئت قليلاً بعدد الطلبات الإضافية التي يجب على المتصفح إجراؤها لتحقيق كل ذلك.

لا يزال كل المحتوى موجودًا بدون JavaScript ، ولا تزال جميع القوائم قابلة للتنقل ، وباستثناء تضمين Twitter ، ستتعرض لضغوط شديدة لإدراك أن JavaScript قيد إيقاف التشغيل. نتيجة لذلك ، يجتاز موقعي مستوى NOSCRIPT-5 للتحقق - أفضل تصنيف ممكن بخلاف JavaScript.

ashton.codes تصنيف noscript : NOSCRIPT-5.

ما هذا؟ ألم تسمع عن نظام تصنيف noscript ؟ سأكون مندهشا للغاية إذا فعلت ذلك لأنني اختلقتها للتو. إنه مؤشر صغير مفيد لي عن قابلية استخدام الموقع بدون جافا سكريبت ، وبالتالي فهو مؤشر جيد جدًا على مدى جودة الموقع في تحسين محتواه بشكل تدريجي.

نظام تصنيف noscript

تميل مواقع الويب - أو بشكل أكثر دقة ، صفحاتها الفردية - إلى إحدى الفئات التالية:

• NOSCRIPT-5
  لا يمكن تمييز الموقع فعليًا عن إصدار الموقع الذي يدعم JavaScript.
• NOSCRIPT-4
  يوفر الموقع تكافؤًا وظيفيًا لـ noscript ، ولكنه يربط أو يعيد التوجيه إلى إصدار منفصل من الموقع لتحقيق ذلك.
• NOSCRIPT-3
  يعمل الموقع إلى حد كبير بدون جافا سكريبت ، ولكن بعض الميزات غير الأساسية غير مدعومة أو تبدو معطلة.
• NOSCRIPT-2
  يقدم الموقع رسالة تفيد بأن متصفحهم غير مدعوم.
• NOSCRIPT-1
  يبدو أن الموقع يتم تحميله ، لكن المستخدم غير قادر على استخدام الوظائف الرئيسية على الإطلاق.
• NOSCRIPT-0
  لا يتم تحميل الموقع على الإطلاق ولا يقدم أي ملاحظات للمستخدم.

دعنا نلقي نظرة على بعض المواقع الشعبية ونرى كيف يسجلون.

أمازون

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

للوهلة الأولى ، تقوم أمازون بعمل تكسير باستخدام حل غير جافا سكريبت ، على الرغم من أن صورة المنتج الرئيسية مفقودة.

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

لا توجد صور معرض

كنت أرغب في رؤية بعض الصور للمنتجات ، لكن النقر على الصور المصغرة لم يعطني شيئًا.

مشكلة

الحل المحتمل

كان من الرائع لو كانت هذه الصور المصغرة عبارة عن روابط للصورة الكاملة ، تفتح في علامة تبويب جديدة. يمكن بعد ذلك تحسينها تدريجياً في معرض الصور باستخدام JavaScript:

• اختطاف حدث النقر على ارتباط الصورة المصغرة ؛
• احصل على سمة href ؛
• قم بتحديث سمة src الخاصة بالصورة الرئيسية بقيمة السمة href .

رابط "الإبلاغ عن معلومات المنتج غير الصحيحة" هو جافا سكريبت فقط

هل هذه الميزة شائعة الاستخدام لدرجة أنها تستحق تنزيل وحدات بايت إضافية من JavaScript لجميع المستخدمين بحيث يتم فتحها كوسائط متكاملة داخل الصفحة؟

مشكلة

الحل المحتمل

يتطلب النموذج النموذجي المتكامل من Amazon تشغيل JavaScript. سأجعل "ميزة التقرير" نموذجًا مستقلاً على عنوان URL منفصل ، على سبيل المثال /report-product?product-id=123 . يمكن تحسين هذا بشكل تدريجي في النموذج المتكامل باستخدام Ajax لتنزيل HTML بشكل منفصل.

تكون المراجعات مرئية جزئيًا فقط افتراضيًا

مشكلة

الحل المحتمل

لماذا لا تظهر المراجعة بالكامل افتراضيًا ثم تستخدم JavaScript لاقتطاع نص المراجعة وإضافة رابط "قراءة المزيد"؟

تجدر الإشارة إلى أن عنوان المراجعة عبارة عن رابط للمراجعة في صفحة قائمة بذاتها ، لذلك لا يزال من الممكن على الأقل قراءة المحتوى.

بشكل عام ، لقد فوجئت بسرور بمدى نجاح الموقع بدون JavaScript. يمكن أن يكون بنفس السهولة صفحة بيضاء فارغة. ومع ذلك ، فإن عدم وجود صور للمنتج يعني أننا نفقد ميزة أساسية حقًا - أجادل أنه من الأهمية بمكان أن تكون قادرًا على رؤية ما تشتريه! - لذلك من المؤسف أننا لم نتمكن من وضع الجليد على الكعكة ومنحها تصنيف NOSCRIPT-5.

تصنيف noscript في أمازون: NOSCRIPT-3. ‍

ما زلت لم أقرر أي منتج أرغب في شرائه ، لذلك التفت إلى Camel Camel Camel ، متعقب أسعار أمازون.

الجمل الجمل الجمل

أردت أن أختار بين iLife V3s Pro مقابل iLife A4s ، لذلك توجهت إلى https://uk.camelcamelcamel.com/. في البداية ، بدا أنه يتعذر تمييز الموقع عن الإصدار الذي يدعم JavaScript.

لسوء الحظ ، لم يتم عرض مخطط سجل الأسعار. لقد قدم احتياطيًا احتياطيًا للنص البديل ، لكن النص البديل لم يعطيني أي فكرة عما إذا كان اتجاه السعر يرتفع أو ينخفض ​​أم لا.

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

اقتراح محدد لحالة الاستخدام هذه: اعرض الصورة . الرسم البياني الموجود في الإصدار النصي من الموقع هو في الواقع صورة قائمة بذاتها ، لذلك لا يوجد سبب لعدم عرضه على إصدار noscript !

ومع ذلك ، فإن المحتوى الأساسي أسفل الرسم البياني أعطاني المعلومات التي كنت بحاجة إلى معرفتها.

يوفر الجدول تكافؤ الميزات اللازم لتأمين تصنيف NOSCRIPT-5. آخذ قبعتي إليك يا جمل الجمل!

تصنيف noscript للجمل الجمل: NOSCRIPT-5

منتجات جوجل

في هذه المرحلة من يومي ، تلقيت مكالمة هاتفية فجأة: اتصل بي صديق وسألني عن الاجتماع هذا الأسبوع. لذلك ذهبت إلى تقويم Google للتحقق من توافري. كان لدى Google أفكار أخرى!

لقد شعرت بخيبة أمل لأنه لم يكن هناك تراجع - noscript ما يكون Google جيدًا في هذا النوع من الأشياء.

لا أتوقع بالضرورة أن أكون قادرًا على إضافة / تحرير / حذف إدخالات إلى التقويم الخاص بي ، ولكن يجب أن يكون من الممكن تقديم عرض للقراءة فقط للتقويم الخاص بي كمحتوى أساسي .

تصنيف noscript في تقويم Google: NOSCRIPT-0

كنت مهتمًا بمعرفة كيفية إدارة Google للمنتجات الأخرى ، فقد ألقيت نظرة سريعة على جداول بيانات Google:

في هذه الحالة ، يفشل الموقع كثيرًا بشكل أكثر رشاقة. يمكنني قراءة محتويات جدول البيانات على الأقل ، حتى لو لم أتمكن من تعديلها. لماذا لا يقدم التقويم نفس الحل الاحتياطي؟

ليس لدي أي اقتراحات لتحسين جداول بيانات Google! يقوم بعمل جيد في إبلاغ المستخدم إذا كانت الوظيفة الأساسية مفقودة من تجربة noscript .

تصنيف noscript لجداول بيانات Google: NOSCRIPT-2

هذا التصنيف ليس بهذا السوء في الواقع! لن تتمكن جميع المواقع من تقديم تجربة noscript ، ولكن على الأقل إذا كانت واضحة وصادقة (أي ستقول "نعم ، لن نحاول أن نقدم لك أي شيء") يجهزك - مستخدم noscript - لأنه عندما يفشل. لن تضيع بضع ثوانٍ ثمينة في محاولة ملء نموذج لن يتم إرساله أبدًا ، أو البدء في قراءة مقال يتعين عليه بعد ذلك استخدام Ajax لاسترداد بقية محتوياته.

الآن ، عد إلى شراء Amazon المحتمل. كنت أرغب في إلقاء نظرة على بعض تقييمات الجهات الخارجية قبل إجراء عملية شراء.

يعمل بحث Google جيدًا بدون جافا سكريبت. تبدو قديمة بعض الشيء ، مثل تلك المواقع القديمة لسطح المكتب فقط بدقة ثابتة.

تبدو طريقة عرض الصور أكثر اختلافًا ، وأنا أفضلها في الواقع بعدة طرق - يتم تحميل هذا الإصدار بسرعة فائقة ويسرد الأبعاد وحجم الصورة بالكيلو بايت أسفل كل صورة مصغرة:

تصنيف noscript لبحث Google: NOSCRIPT-5

أخذتني إحدى نتائج البحث إلى مراجعة على YouTube. لقد نقرت ، لا أتوقع الكثير. كنت محقًا في عدم التحمس:

لا أتوقع حقًا أن يعمل موقع مثل YouTube بدون JavaScript. يتطلب YouTube إمكانات دفق متقدمة ، ناهيك عن أنه سيفتح نفسه لنسخ السرقة إذا قدم تنزيل MP4 مستقل كإجراء احتياطي. في أي حال ، يجب ألا يبدو أي موقع معطلاً. حدقت في هذه الشاشة لبضع ثوان قبل أن أدرك أنه لن يحدث شيء آخر.

اقتراح : إذا كان موقعك غير قادر على توفير حل احتياطي لمستخدمي noscript ، فيجب عليك على الأقل تقديم رسالة تحذير noscript .

تصنيف noscript على YouTube: NOSCRIPT-0

أي؟

لقد قمت بالنقر فوق بعض روابط المراجعة الأخرى. الذي؟ موقع المشورة فشل لي تماما.

كانت هذه صفحة تبدو وكأنها محملة بشكل جيد ، ولكن فقط عندما تقرأ المحتوى ، ستدرك أنه يجب أن تفتقد بالفعل بعض المعلومات الأساسية. هذه المعلومات الأساسية هي جوهرية تمامًا لغرض الصفحة ، ولا يمكنني الحصول عليها. لذلك ، لسوء الحظ ، يعد هذا انتهاكًا لـ NOSCRIPT-1.

اقتراح : إذا كان موقعك Ajaxes في المحتوى ، فإن هذا المحتوى موجود على عنوان URL آخر. قم بتوفير ارتباط إلى هذا المحتوى لمستخدمي noscript . يمكنك دائمًا إخفاء الرابط عندما تنجح في Ajaxed باستخدام JavaScript.

أي؟ تصنيف noscript لموقع المراجعة: NOSCRIPT-1

فيسبوك

في النهاية ، أقر بأنني لا أستطيع تحمل تكلفة المكنسة الكهربائية في الوقت الحالي. لذلك ، قررت القفز على وسائل التواصل الاجتماعي.

يرفض Facebook بشكل قاطع التحميل بدون JavaScript ، لكنه يقدم خيارًا احتياطيًا. إليك مثالنا الأول على NOSCRIPT-4 - موقع يقدم نسخة منفصلة من محتواه لمستخدمي noscript أو الهواتف العادية.

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

تصنيف noscript على Facebook: NOSCRIPT-4

تم تحميل الصفحة بسرعة البرق:

كان بإمكاني رؤية 7 عناصر فقط في موجز الأخبار في المرة الواحدة ، ولكن يمكنني النقر فوق "مشاهدة المزيد من القصص" ، والذي يأخذني إلى صفحة جديدة ، باستخدام تقنيات ترقيم الصفحات التقليدية.

أجد نفسي معجبًا بأن لدي خيار "الرد" على تعليق على Facebook ، على الرغم من أن هذه مهمة متعددة الشاشات:

لا يوجد شيء يمنع Facebook من إنشاء قائمة "رد فعل" تحوم في غير JavaScript ، ولكن لكي نكون منصفين ، فإن هذا يستهدف الأجهزة المحمولة التي لا يمكنها التحويم.

اقتراح : كن مبدعًا مع CSS. قد تجد أنك لست بحاجة إلى JavaScript على الإطلاق.

قبل فترة طويلة ، ظهر عنصر فيديو في موجز الأخبار الخاص بي. (في هذه المرحلة ، اتضح لي مدى انخفاض محتوى الفيديو الذي رأيته على إصدار الهاتف المحمول مقارنةً بالفيسبوك العادي ، مما يعني أنني كنت أرى بالفعل حالات الأشخاص بدلاً من مقطع فيديو عشوائي أعجبهم - وهو تحسن كبير بالنسبة إلي!)

توقعت تمامًا ألا يعمل الفيديو عند النقر فوقه ، لكن النقر فوق الصورة المصغرة فتح الفيديو في علامة تبويب جديدة:

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

كنت أرغب في تحميل ألبوم صور على Facebook ، لكن في أرض noscript -land ، هذه مهمة صعبة. يتضمن تحميل صورة واحدة في كل مرة ، عبر شاشتين أو ثلاث شاشات لكل عملية تحميل. حاولت بشدة وفشلت في العثور على خيار تحميل مجمع.

لقد حصلت على شدة هذا الأمر بعد الصورة رقم ثلاثة (سيحتوي ألبومي على الكثير) ، لذلك قررت أن أسميها يوميًا وأعود غدًا عندما أحصل على JavaScript.

تويتر

أصبحت الأمور غريبة عندما سافرت إلى Twitter.

لقد أثارت اهتمامي هذه الآلية ، لذا فقد بحثت في الكود المصدري ، والذي كان في الواقع بسيطًا بشكل مدهش:

 <noscript><meta http-equiv="refresh" content="0; URL=https://mobile.twitter.com/i/nojs_router?path=%2F"></noscript>

على الرغم من بساطة هذا الحل ، فقد وجدت التجربة صعبة للغاية لأنه في الفلاش قبل إعادة توجيهي ، رأيت أن أحد الأشخاص الذين أتابعهم على Twitter قد انخرط. لم تظهر تغريدته في الجزء العلوي من إصدار "الهاتف المحمول" ، لذلك اضطررت إلى البحث عنها.

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

لم أستطع تذكر حساب Twitter الخاص بصديقي. كان البحث صعبًا بعض الشيء - لقد بدأت حقًا أفتقد اقتراحات الملء التلقائي!

لحسن الحظ ، رفعت صفحة نتائج البحث حسابه ، وتمكنت من العثور على تغريدته. كنت حتى قادرة على الرد.

تصنيف noscript على Twitter: NOSCRIPT-4

قد يبدو هذا وكأنه نتيجة سخية ، بالنظر إلى الشعور بالضياع ، لكن تذكر أن الشيء الرئيسي هنا هو تكافؤ الميزات. لا يجب أن تبدو جميلة.

لقد جربت أكثر من موقعين من مواقع التواصل الاجتماعي ، والتي ، على عكس Twitter ، لم تصل إلى الارتفاعات المذهلة للامتثال لـ NOSCRIPT-4.

الشبكات الاجتماعية الأخرى

ينكدين لديه شاشة تحميل لطيفة ومفصلة. لكن لا يتم تحميله أبدًا ، لذلك كل ما يمكنني فعله هو التحديق في الشعار.

تصنيف noscript على LinkedIn: NOSCRIPT-0

لم يمنحني Instagram أي شيء حرفيًا. صفحة فارغة. نكهة أخرى كاملة من NOSCRIPT-0.

تصنيف noscript على Instagram: NOSCRIPT-0

لقد فوجئت بفشل Instagram بشكل مذهل هنا ، نظرًا لأن تضمين Instagram يعمل بشكل لا تشوبه شائبة على موقع محفظتي. أعتقد أنه مع التضمين ، فأنت لا تعرف أبدًا ما هي توقعات دعم المتصفح للطرف الثالث ، ولكن نظرًا لأنني أزور الموقع مباشرة ، يسعد Instagram بإجراء مكالمة لإسقاط الدعم.

بي بي سي نيوز

توجهت إلى البي بي سي للحصول على آخر الأخبار.

القائمة متوقفة قليلاً ، والعمود ضيق للغاية (بالتأكيد نمط أراه في الكثير من المواقع - لماذا لا تعني عبارة "لا يوجد جافا سكريبت" "جهاز محمول"؟) ولكن يمكنني الوصول إلى المحتوى.

لقد قمت بالنقر فوق علامة التبويب "الأكثر قراءة" ، والتي تأخذني إلى جزء آخر من الصفحة. باستخدام البرمجة النصية ، يتم تحسين ارتباط الارتساء هذا تدريجياً لتحقيق سلوك علامة تبويب فعلي ، وهو مثال رائع على البناء من نواة HTML صلبة.

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

يبدو الأمر غريبًا بعض الشيء ، فإن القائمة المرتبة CSS تعني أن لدينا خللًا في الترقيم هنا. أنقر على إحدى القصص.

لا يمكنني الوصول إلى محتوى الفيديو ، ولكن نظرًا لقضايا الحقوق ، أعتقد أن بي بي سي لا يمكنها توفير مقطع فيديو منفصل مستقل كما يفعل Facebook. سيكون النص رائعًا - ومفيد لأكثر من مجرد مستخدمي noscript .

اقتراح : توفير احتياطيات نصية للمحتوى السمعي البصري.

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

يتم تحميل صفحات المقالة والفهرس بسرعة البرق ، بحوالي 300 كيلوبايت (معظمها من الصور). أفتقد الصور المصغرة للمقالات الأخرى على الصفحة ، والقدرة على الاستفادة الكاملة من العقارات المعروضة على الشاشة - لكن هذا لا ينبغي أن يعيق التقييم.

تصنيف noscript لـ BBC: NOSCRIPT-5

جيثب

يبدو GitHub تقريبًا تمامًا مثل نظيره الذي يدعم JavaScript. رائع! لكني أعتقد أن هذا موقع تم تطويره من قبل المطورين والمطورين.

لقد قمت ببعض التدبير المنزلي على GitHub ، وألقيت نظرة حول المستودعات وحذف الفروع القديمة. لقد نسيت حقًا لفترة من الوقت أنني كنت أستخدم إصدارًا بخلاف JavaScript حتى صادفت خطأً صغيرًا:

ثم تساءلت ، "كيف سيتعامل GitHub مع تطبيق التصنيفات على المشكلات؟" لذلك أعطيت هذا الأمر.

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

تصنيف noscript على GitHub: NOSCRIPT-3

بينما يبدو GitHub مذهلاً - لم أكن لأعرف مطلقًا أنه تم إيقاف تشغيل JavaScript - إلا أن عدم القدرة على استخدام نفس الوظيفة الرئيسية للإصدار النصي يعد مشكلة. حتى موقع noscript الذي يبدو قبيحًا سيحصل على درجة أعلى لأن الوظيفة أكثر أهمية من الشكل.

الخدمات المصرفية عبر الإنترنت

إذا كان هناك مكان واحد كنت أتوقع أن يكون JavaScript مطلوبًا فيه ، فهو موجود على موقع بنك NatWest. كنت مخطئا.

إنه لا يعمل فقط ، ولكن من الصعب أيضًا التمييز بين الموقع العادي. شاشة تسجيل الدخول هي نفسها ، والفرق الوحيد هو أن التركيز لا يتقدم تلقائيًا عبر كل حقل عند إكماله.

تصنيف noscript من NatWest: NOSCRIPT-5

متنوع

لقد جئت عبر عدد قليل من المواقع على مدار يومي.

FreeAgent - موقع البرامج الضريبية الذي أستخدمه في عملي المستقل - لا يجرب حتى إجراء احتياطي noscript . لكن مهلا ، هذا أفضل من إظهار موقع ويب معطل.

تصنيف noscript لـ FreeAgent: NOSCRIPT-2

و CodePen ، إلى حد ما مفهوم ، يجب أن يكون NOSCRIPT-2 أيضًا.

تصنيف noscript CodePen: NOSCRIPT-2

Tonik ، مزود الطاقة ، لا يسمح لي بتسجيل الدخول ، لكن هذا يبدو وكأنه خطأ وليس قرارًا متعمدًا:

تصنيف noscript لـ Tonik: NOSCRIPT-1

تتيح لي M&S Energy تسجيل الدخول - فقط لتخبرني أنها تحتاج إلى JavaScript للقيام بأي شيء مفيد عن بُعد.

تصنيف M&S noscript : NOSCRIPT-1

الآن أتيت إلى لقطة الشاشة المفضلة لدي اليوم.

أوصى أحد زملائي ذات مرة بدورة تدريبية عن إمكانية الوصول لتصميم الويب ، والتي قمت بوضع إشارة مرجعية عليها. قررت أن ألقي نظرة عليه اليوم ، وضحكت على سخرية النص البديل:

مع النص البديل لـ "الأشخاص: إمكانية الوصول لتصميم الويب" ، لست متأكدًا مما أفقده هنا - هل هي صورة؟ فيديو؟ ملف PDF؟ الدورة نفسها؟

تلميح : إنه في الواقع مقطع فيديو ، على الرغم من أنه يجب عليك تسجيل الدخول لمشاهدته.

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

ملخص

لقد بدأت هذه التجربة بهدف معرفة عدد المواقع التي يتم تنفيذها باستخدام التحسين التدريجي. لقد قمت بزيارة عدد قليل جدًا من المواقع هنا ، معظمها أسماء كبيرة بميزانيات كبيرة ، لذلك من المثير للاهتمام رؤية التنوع الكبير في دعم عدم وجود JavaScript.

من المثير للاهتمام أن نرى أن المواقع البسيطة نسبيًا - Instagram و LinkedIn على وجه الخصوص - تتمتع بدعم ضعيف من noscript . أعتقد أن هذا يرجع جزئيًا إلى الشعبية المتزايدة لإطارات JavaScript مثل React و Angular و Vue. يقوم المطورون الآن ببناء "تطبيقات ويب" بدلاً من "مواقع ويب" بهدف إعادة إنشاء شكل ومظهر التطبيقات الأصلية ، واستخدام JavaScript لإدارة DOM هو الطريقة الأكثر قابلية للإدارة لإنشاء مثل هذه التجارب.

هناك خطر يتمثل في أن المزيد والمزيد من المواقع ستتطلب جافا سكريبت لعرض أي محتوى على الإطلاق. لحسن الحظ ، من الممكن عادةً إنشاء المحتوى الخاص بك بنفس الطريقة الملائمة للمطورين ولكن يتم عرضها على الخادم ، على سبيل المثال باستخدام Preact بدلاً من React. يمنح اتخاذ القرار الواعي للاهتمام بشأن noscript فوائد التجربة الأساسية كما هو موضح في بداية هذه المقالة ، ويمكن أن يؤدي إلى وقت تحميل أسرع أيضًا.

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

ما تصنيف noscript الذي يتوافق معه موقعك؟ اسمحوا لنا أن نعرف في التعليقات!