Get best of the week

ربما يجب أن نهدأ قليلاً مع JavaScript؟

لدي مشكلة متصفح غريبة للغاية . لا تعمل النصوص البرمجية في بعض الصفحات حتى مرور 20 ثانية تقريبًا.

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

(في الواقع ، لا تحاول حتى تشخيص المشكلة بجملة واحدة ، لا ، لقد سمعت وجربت كل ما يمكنك تخيله تقريبًا).

تم كتابة المقالة في مارس 2016 ، بعض الأمثلة قديمة - تقريبًا. عبر.

صفحات عديمة الفائدة


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



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

من ناحية أخرى ...

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

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

مجال التحرير مكان كتابة النص؟ بالطبع ، هذا مجرد مربع نص. ولكن إذا قمت بالنقر فوقها قبل تشغيل JavaScript ، فستظل التسمية الخرقاء في الحقل Reply to @eevee. وعندما يستمر تشغيل البرنامج النصي ، فإنه يمسح كل ما كتبته ويدرجه مرة أخرى Reply to @eevee، فقط الآن @eeveeمكتوب بأحرف زرقاء ، وليس بأحرف رمادية.

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

نظرًا لأن NoScript يعمل معي ، غالبًا ما ألاحظ قرارات تصميم غريبة على المواقع التي أزورها لأول مرة. بالطبع ، الصفحات البيضاء الفارغة شائعة. لفترة طويلة ، تم تحميل المقالات على موقع Time بشكل جيد بدون نص برمجي ، ولكن لم يتم التمرير فقط - تم تطبيق الخاصية على الصفحةoverflow: hidden; لأسباب لا أستطيع فهمها. يتم أيضًا تحميل مقالات Vox بشكل طبيعي ، باستثناء أنه أمام كل صورة ، يتم عرض مساحة فارغة في الارتفاع الكامل للشاشة. بعض مواقع الشركات السيئة بشكل خاص هي كتل نصية متداخلة وفوضوية. أعتقد أنهم تخلوا عن CSS وكتبوا التخطيط في JavaScript.

لا توجد أسباب جيدة لذلك. هذه ليست تطبيقات تفاعلية متقدمة ؛ إنها مجرد صفحات نصية. اعتدنا على طباعتها على الورق ، ولكن بمجرد أن تحولنا إلى تكنولوجيا المعلومات ، أصبح من المستحيل وضع الكلمات على الشاشة دون تشغيل بضع ميغابايت من القمامة للتنفيذ؟

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

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

  • شخص ما على جهاز كمبيوتر بطيء.
  • شخص ما على اتصال بطيء.
  • شخص ما على الهاتف ، أي على كمبيوتر بطيء مع اتصال بطيء.
  • شخص ما عالق في متصفح قديم على جهاز كمبيوتر لا يسيطر عليه - في العمل ، في المدرسة ، في المكتبة ، إلخ.
  • يحاول شخص ما كتابة برنامج صغير يتفاعل مع موقعك ليس لديه واجهة برمجة تطبيقات.
  • - , .
  • - — Google .
  • - Linux , , Elinks.
  • - , .
  • - NoScript . , , .
  • - NoScript , , . , .
  • , , .
  • CDN .
  • CDN IPv6, (, , ). - IPv6, , JS .
  • , JavaScript .
  • , . , .
  • , , .

أنا لا أقول أن تطبيقات الويب التفاعلية مثل خرائط Google يجب أن تمحى من على وجه الأرض ، على الرغم من وجود نسخة احتياطية بدون نصوص لخرائط Google لسنوات عديدة ، حتى الإصدار الحالي من WebGL! أقول أننا أوقفنا عملنا في مكان آخر عندما توقفت الوظائف الأساسية لـ HTML العادي فجأة عن العمل بدون جافا سكريبت. وهي ، بدون 40 ميجا بايت من JavaScript ، وفقًا لـ about:memory - هذه بيانات في الذاكرة ، وليست حجم التنزيل. قد لا يبدو هذا كثيرًا (بالنسبة لصفحة تعرض 140 حرفًا؟) ، لكن المتصفح الخاص بي غالبًا ما يجمع عشرات علامات تبويب Twitter المفتوحة ، أي نصف غيغابايت من الذاكرة ، يتم تخصيص 6 كيلوبايت كحد أقصى من النص.

اختراع العجلة المربعة


أنت حقا بحاجة لمحاولة تحقيق مثل هذه النتيجة المؤسفة. أعني ، إذا كنت بحاجة إلى رابط ، فأنت تكتب فقط <a href="somewhere">label</a>، وتنتهي . ولكن إذا بدأت في اختراع هذا باستخدام جافا سكريبت ، فأنت بحاجة إلى معالج نقرات ، ويجب أن يعمل في الوقت المناسب حتى تعرف أن الرابط موجود بالفعل ، وقد تضطر إلى القيام ببعض الأعمال لإضافة معالجات النقر إلى الروابط المزيفة ، مما يضيف اياكس. حق؟

لا! ستحصل فقط على تقليد شاحب ، سيء للارتباط. خذ بعين الاعتبار جميع وظائف الروابط الأصلية:

  • يمكنني متابعة الرابط.
  • يمكنني فتح الرابط في علامة تبويب أو نافذة جديدة باستخدام مجموعة مفاتيح التحكم ، ومفاتيح التغيير وعجلة الماوس (الزر الأوسط).
  • يمكنني نسخ عنوان الرابط ولصقه في مكان ما أو فتحه في متصفح آخر ، أو أي شيء آخر.
  • ' Firefox .
  •  — Opera, Konqueror, uzbl, Firefox vimperator? — , , «» , .
  • , .
  • .
  • , , .

الخيط المشترك هنا هو أن العلامة <a href=...> تعني شيئًا . قال: "هذا هو الطريق الذي يمكنك أن تسلكه". طن من الأدوات تعتمد على هذه المعلومات. إذا قمت باستبداله بـ <div onclick>، ثم نعم ، فإن النقر فوق div سيعمل شيئًا ، ولكن النقطة بأكملها تضيع تمامًا. على العكس من ذلك ، إذا تم استخدامه <a href="javascript:void(0);">، فأنت تكذب على هذه الأدوات ؛ أنت تسبب المعنى ، ولكن تعطي معلومات لا معنى لها.

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

مثال جيد آخر هو النماذج المنسدلة <select>. يقوم بعض المطورين أحيانًا من الصفر بإنشاء بديل لهم من الأدوات غير الأصلية. ربما لجعلها أكثر جمالا؟ هدف نبيل. ولكن هل تعلم أنه في النماذج المنسدلة الأصلية ، عند بدء الكتابة ، يتم تحديد الموضع المناسب الأول تلقائيًا؟ من الواضح ، في معظم التطبيقات البديلة هذا غير معتمد. بصريا ، تبدو أفضل (أو مختلفة فقط) ، ولكن من الناحية الوظيفية أسوأ بكثير للقوائم الطويلة.

مربع نص Twitter محلي الصنع ليس مربع نص على الإطلاق ، ولكن contenteditable <div>. هناcontenteditableيعني أن معظم عناصر التحكم الأصلية تعمل بشكل جيد ، ولكن لا يزال هذا الكائن يظهر من وقت لآخر بعض السلوك الغريب ، على سبيل المثال ، يحرك المؤشر إلى بداية النص عندما أقوم بالتبديل بين علامات التبويب. أو في بعض الأحيان يعاني البرنامج النصي من بعض المشكلات في سرعة الكتابة ويبدأ في ملاحظة ذلك. يبدو أن السبب الوحيد لوضعها بدلاً من <textarea> المعتاد هو التلوين. هل تعلم أن مفاتيح الاختصار تعمل في بعض المواقع؟ حق جميل؟ لكن في الواقع@handles والروابط باللون الأزرق؟ لا يؤدي مربع النص المصنوع في المنزل إلى تقصير الروابط أو استبدال الرموز التعبيرية على Twitter ، لذا فهذه ليست معاينة لما ستبدو عليه تغريدة.

/- هذا مفتاح تشغيل سريع مدمج في Firefox يفتح لوحة البحث السريع. من الواضح أن لا أحد على Twitter أو GitHub أو BitBucket أو Tumblr ، أو في عشرات الأماكن الأخرى يعرف ذلك ، لأنهم جميعًا خصصوا هذا التركيز الرئيسي لشريط البحث الخاص بهم على الموقع. والذي يختلف تمامًا عن البحث في الصفحة الحالية (على شرف GitHub ، قاموا بإصلاحه عندما اشتكت على Twitter). لفترة طويلة ، أوقفت + Google شريط المسافة للتمرير لأسفل. لماذا لم يتوقف أي شخص في هذه الشركات الضخمة ويقول: "مهلاً ، انتظر ، هذه وظيفة فعالة في المتصفح ، ونحن نكسرها"؟ هل يستخدم مطورو الويب المتصفحات بأنفسهم؟

تمت الإشارة إلى أن كل صفحة على Twitter تمتص بصمت أي أحداث لوحة المفاتيح ونقرات الماوس حتى تعمل جميع البرامج النصية. هذا يعني أنه لا يمكنني تغيير علامة التبويب حتى أنتظر هذه الثواني 20 ثانية حتى يتم تحميل الصفحة: ctrl-t و ctrl-w و ctrl-tab و ctrl-pgup و ctrl-pgdn - يتم استيعاب جميع أحداث لوحة المفاتيح تمامًا. هذه هي الطريقة التي تعمل بها آلية تسمى "قائمة انتظار الإجراءات السريعة". يبدو أن قائمة الانتظار هذه يجب أن تقوم بتشغيل الأحداث في نهاية تحميل الصفحة ، ولكن (أ) لا يمكنك استخدام مفاتيح التشغيل السريع في المستعرض ؛ (ب) يبدو أنه لا يزال لا يعمل. لإصلاح ذلك ، كان عليّ كتابة نص برمجي مخصص لحظر علامة البرنامج النصي بمعرف محدد.

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

اسمحوا لي أن أقدم لكم بعض النصائح.


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

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

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

شكرا.

More articles:


All Articles