أفضل ممارسات HTML و CSS و Javascript: Chrome Chrome

بالنسبة للأشخاص الذين انتهوا للتو من Codecademy.

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

عادةً ، يبدأ الأشخاص في تعلم البرمجة باستخدام HTML و CSS و Javascript الأساسية في برمجة الويب ، ولكن قبل أن يصلوا إلى جزء جانب الخادم ، يصعب إنشاء تطبيق مفيد.

لذلك ، كنت أحاول دائمًا إقناع الطلاب بهذا الشكل ،

سيكون ممتعًا إذا بدأت في التعلم من جانب الخادم وتشغيل بعض التطبيقات. من فضلك ، لا تستسلم.

لكن العديد من الطلاب يتوقفون عن تعلم البرمجة أثناء مرحلة HTML و CSS.

(ربما ، ليس بدء استخدام HTML فكرة جيدة لتشجيع الناس على دراسة البرمجة.)

في يوم من الأيام ، فتحت متصفح Chrome لبدء العمل. بعد ذلك ، أدركت أنني كنت أستخدم بالفعل أفضل تطبيق يمكنك إنشاؤه باستخدام HTML و CSS و Javascript فقط.

قوة الدفع

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

دعنا نحاول استنساخ هذا التطبيق!

المرحلة 1: أشياء للتحضير

  • HTML
  • CSS
  • جافا سكريبت
  • صورة جميلة: من الغاء
  • manifest.json (يتم تحميله من Chrome)

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

لنبقيه بسيطًا.

نحن نصنع موقعًا واحدًا يحتوي على صورة واحدة كبيرة ورسالة ترحيب كبيرة وربما في الوقت الحالي.

العثور على صورة

إذا ذهبت إلى موقع Unsplash ، يمكنك العثور على الكثير من الصور الرائعة الخالية من الترخيص.

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

تصوير فيدار نوردلي ماثيسن على Unsplash

اصنع مشروع

بسيط بسيط بسيط

ملف HTML واحد ، CSS واحد ، Javascript واحد ، وملف بيان واحد.

هذا كل ما نحتاجه.

حسنا ، هذا هو الإصدار الأول.

هذه صفحة ويب بسيطة. الآن ، لكي يتم تحميلك من Chrome ، يجب عليك إضافة ملف manifest.json التالي.

"chrome_url_overrides" هي أهم خاصية في هذا التطبيق.

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

هناك تذهب ، لقد انتهينا للتو من مشروعنا الأول.

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

لكن لنجعلها أفضل من هذا.

المرحلة 2: الأشياء التي يتعين إضافتها

  • الوقت الحالي
  • اسم تغيير وظيفة
  • صورة تغيير وظيفة

لتضمين هذه الميزات الجديدة الثلاث ، قمت بتغيير ملف HTML كما هو موضح أدناه.

يجب تغيير CSS أيضًا.

ثم سوف تكون الصفحة الجديدة مثل أدناه.

أوه ، اعتقدت أنه كان الزخم :)

تحديث manifest.json

الآن ، سنضيف ميزتين.

بادئ ذي بدء ، سنضيف نموذج إدخال إلى هذا التطبيق حتى يتمكن الأشخاص من وضع اسمه على ذلك. سنضيف هذا النموذج تحت رسالة "Hello، Jungwon Seo".

هذا قبيح ، دعونا إصلاحه

نمط جديد للعلامة الإدخال.

حسنا ، أفضل بكثير.

من الآن فصاعدًا ، نحتاج إلى التفكير في كيفية تخزين هذه المعلومات.

سنستخدم "ملف تعريف الارتباط" ، لكن لا يمكنك استخدام "ملف تعريف الارتباط" إذا فتحت ملف HTML من متصفح Chrome. حاول اختبار بعد التحميل كملحق كروم.

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

أيضًا ، بما أنني لا أزال أفضّل استخدام jQuery ، فلنضيفه.

حاولت إضافة jQuery CDN ، لكن ...

لا تقلق ، نحتاج فقط إلى إضافة خاصية أخرى في البيان.

جيد ، نحن الآن على استعداد للتشفير في ملف script.js.

ما أريد القيام به أولاً هو:

  1. اجعل المستخدمين يكتبون اسمهم.
  2. تخزين في ملف تعريف الارتباط (دعنا نستخدم الكود الأكثر شيوعًا فقط)
  3. تلاشى شكل الإدخال وتلاشي في رسالة الترحيب.

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

الحالة 1: عند فتحه لأول مرة.
الحالة 2: عند فتحه بعد كتابة اسمك.

يجب أن نقرر ما الذي يجب أن يكون مرئيًا وما يجب ألا يكون كذلك.

حالة 1:
الوقت: الوقت الحالي
رسالة تحية: ما اسمك؟
شكل الإدخال: مرئي

الحالة 2:
الوقت: الوقت الحالي
رسالة الترحيب: مرحبًا ، !
شكل الإدخال: غير مرئية

والطريقة للتمييز بين هاتين الحالتين هي التحقق مما إذا كان ملف تعريف الارتباط لديه مفتاح "اسم المستخدم".

مع وظيفة تحديث الوقت ، سيكون script.js الجديد كما يلي.

قبل كتابة الاسمبعد كتابة الاسم

حسنًا ، يبدو أنه يعمل.

بالطبع ، هناك بعض الأشياء التي ما زلنا بحاجة إلى تحسينها ، مثل تأثيرات الانتقال.

ولكن ، سأقدم لك.

الآن ، ماذا بعد؟

نحتاج إلى إضافة الوظيفة التي تتيح للمستخدمين تغيير صورتهم.

Unsplash API

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

لاستخدام Unsplash API ، يجب عليك تسجيل التطبيق الخاص بك في صفحة مطور البرامج الخاصة بهم.

بالنقر فوق

بالنسبة للمنتج التجريبي ، يُسمح لك باستخدام ما يصل إلى 50 طلبًا في الساعة. وهذا يكفي لنا.

مجرد ملء النموذج أدناه كما تريد.

اكتب أي اسم

إذا قمت بإنشاء التطبيق ، فسترى جزء "المفاتيح" من موقع الويب المعاد توجيهه.

لقد حذفت هذا التطبيق ، لذلك لا جدوى من المحاولة.

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

سنستخدم واجهة برمجة تطبيقات البحث.

إليكم السيناريو. كل الناس لديهم اهتمامات مختلفة. لذلك أريد أن أطلب اهتمامهم أولاً ، وبعد ذلك سأبحث عن تلك الصورة باستخدام Unsplash API. بعد ذلك ، سأواصل تحديث الصورة كل 12 ساعة (نفس الكلمة الرئيسية ، صورة مختلفة).

وبالتالي فإن وظيفة أجاكس ستكون مثل أدناه.

وسيتم استدعاء هذه الوظيفة بعد كتابة اهتمامك.

ثم ، كما تتوقع ، نحتاج إلى أن نكون مطورًا مرة أخرى.

الحالة 1 - 1: المرة الأولى للغاية
الحالة 1-2: بعد الاسم
الحالة 2: بعد كتابة اهتمامك
الحالة 3: 12 ساعة في وقت لاحق.

حسنًا ، لنقرر واحدًا تلو الآخر.

في الحالة 1–1 ، نحتاج فقط إلى إخفاء كل الجزء المتعلق بالصورة. تخطى هذا.

في الحالة 1 - 2 ، فقط يعرض نموذج الإدخال للمصلحة.

في الحالة 2 ، اتصل بـ AJAX واحفظ معلومات الصورة.

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

الكلمة المفتاح: لندن

نعم انها تعمل.

المرحلة 3: اللمسات النهائية

ليس إلزاميا المصور ، ولكن لماذا لا؟

يمكننا أن نكتب سطرًا آخر من التعليمات البرمجية ونقيد اسم المصور وصفحه على الجانب الأيسر العلوي.

حتى نتمكن من استخدام معلومات المصور عند التحقق من ملف تعريف الارتباط لأول مرة.

شيء آخر ، ماذا لو أراد شخص ما تغيير اهتماماته؟

دعنا نضيف تلك الوظيفة التي تتيح للأشخاص إعادة كتابة اهتمامهم.

قبل النقر فوق الزر

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

بعد النقر فوق الزر

المرحلة 4: اصنع منتجك الخاص.

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

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

حظا سعيدا ولا تستسلم!

يمكن العثور على النسخة الكاملة هنا: https://github.com/thejungwon/MyChromeExtension

تُنشر هذه القصة في مجلة Noteworth ، حيث يأتي أكثر من 10،000 قارئ يوميًا للتعرف على الأشخاص والأفكار التي تشكل المنتجات التي نحبها.

تابع منشورنا للاطلاع على المزيد من قصص المنتجات والتصميم التي يقدمها فريق Journal.