عزز مجموعة مطوري البرامج الخاصة بك باستخدام صفحات GitHub و Lighthouse

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

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

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

الطريقة الفعلية لإكمال المشاريع في freeCodeCamp هي استخدام codepen.io. يتيح لك الإصدار المجاني كتابة التعليمات البرمجية في جزء HTML و CSS وجافا سكريبت ، ومشاهدة التغييرات التي أجريتها أثناء كتابتها في نافذة. يمكنك فتح الصفحة في العرض الكامل ، مما يلغي أجزاء HTML و CSS وجافا سكريبت ، لكنه يترك لافتة سوداء في الأعلى. عنوان url عبارة عن تجزئة ، شيء مثل //codepen.io/cam-barts/full/ZPWpqo ، وهو أمر لا يُنسى ، ولا يعطي أي إشارة حول محتوى الموقع ، وفي رأيي لا يصدر أي موجات على استئنف. علاوة على ذلك ، ما لم تدفع مقابل العضوية مع codepen ، لا يمكنك تغييرها.

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

يتيح لك Github Pages استضافة موقع ويب مباشرةً من مستودع GitHub. إنه يوفر عنوان url رائعًا على github.io ، والذي أثار خيالي لشيء أضعه في سيرتي الذاتية. سيسمح لي بالتحكم الكامل في ما سيراه المستخدمون عند انتقالهم إلى الموقع (طويل جدًا ، لافتة سوداء) ، ولن أضطر إلى التعامل مع الاستضافة الذاتية أو الدفع مقابل خدمة استضافة أخرى.

سمعت عن Google Lighthouse في CodeNewbie Podcast مع فرانسيس كورونيل. يقوم بتدقيق موقع الويب الخاص بك مباشرةً من Chrome Dev Tools لخمسة مجالات: الأداء ، وتطبيق الويب التقدمي ، وإمكانية الوصول ، وأفضل الممارسات ، وتحسين محركات البحث. تحسين محركات البحث ، أو تحسين محركات البحث ، هو ما يساعد موقعك على الصعود إلى أعلى محركات البحث مثل Google ، مما يساعدك في العثور عليه. أيضًا ، الآن بعد أن كنت سأستضيف موقعي على الصفحات ، أردت أن أتحمل مسؤولية أداء موقعي ، ولكي أفعل ذلك بفاعلية كان علي أن يكون لدي على الأقل معيار معياري.

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

للمضي قدمًا ، لقد وضعت بعض الافتراضات. الأول هو أن لديك حساب جيثب. إذا لم يكن لديك واحد بالفعل ، فمن السهل إنشاء واحد. والثاني هو أن لديك فهمًا أساسيًا لـ git. إذا كنت جديدًا ، فهناك الكثير من المقالات الممتازة حول البدء. تفترض هذه المقالة أنك أكملت محفظتك على codepen. أخيرًا ، يجب أن يكون لديك Google Chrome مثبتًا.

هذا المقال يتبع أعمالي الشخصية. يمكنك العثور على القلم هنا ، والرمز هنا ، والمنتج النهائي موجود في cam-barts.github.io.

ابدء

يعد إعداد موقع Github Pages الخاص بك أمرًا بسيطًا جدًا. نسخة TL ؛ DR هي:

  • إنشاء مستودع باتباع اصطلاح الاسم [GitHub Username] .github.io
  • استنساخ محليا
  • قم بإنشاء ملفات index.html و style.css و script.js داخل المستودع
  • أضف التعليمات البرمجية إلى تلك الملفات
  • الالتزام والدفع إلى GitHub
  • ربح!

يمكنك إنشاء مستودع بعنوان يتبع اصطلاح [اسم مستخدم Github الخاص بك] .github.io. ها هو لي: cam-barts.github.io. يتم عرض أي كود يتم دفعه إلى هذا المستودع عند الانتقال إلى هذا الموقع.

لذا ، عندما تقوم باستنساخ المستودع محليًا ، ما الذي تضعه بالضبط فيه؟

يجب أن تبدأ بثلاثة ملفات ، ملف index.html ، وملف style.css ، وملف script.js . في أي محرر تريده (أستخدم Atom) ، يجب أن تبدأ بمقتطف الشفرة التالي في index.html الخاص بك :

هناك الكثير مما يحدث هنا قد يكون غير مألوف إذا كنت تعمل فقط مع codepen.io.

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

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

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

الخطوة التالية هي نسخ قسم HTML من قلم محفظتك إلى قسم النص في مقتطفك. بمجرد اكتمال ذلك ، إذا قمت بالربط بأي CSS أو JS خارجي في إعدادات القلم ، مثل Bootstrap أو Font Awesome ، فستحتاج إلى ربط تلك الموجودة في index.html .

قم بإنشاء المزيد من علامات الارتباط لـ css وعلامات البرنامج النصي لـ JavaScript وإضافة الروابط الموجودة في الإعدادات إلى سمات href و src ، على التوالي. للتأكد من ظهور الأنماط والنصوص الخاصة بك ، تأكد من وضعها قبل الرابط الحالي وعلامات البرنامج النصي في المقتطف. على سبيل المثال ، قد يبدو الارتباط بـ Bootstrap و JQuery بالشكل التالي:

بعد ذلك ، تحتاج إلى إضافة CSS الخاص بك إلى style.css الخاص بك ، وإذا كان لديك أي JavaScript ، فأضفه إلى script.js .

بعد القيام بذلك ، من الجيد أن تقوم بكل عملك ودفعه إلى Github. بعد القيام بذلك مباشرة ، يمكنك الانتقال إلى [Your Github Username] .github.io والتحقق من موقع الويب الخاص بك!

تحسين موقع محفظتك

مبروك على نشر محفظتك!

تتضمن الخطوات التالية تحسين موقعك. لهذا ، سوف نستخدم Google Lighthouse. من الأفضل القيام بذلك في نافذة In Private Browser حتى لا تؤثر أي ذاكرة تخزين مؤقت أو ملحقات Chrome قد تكون لديك على النتائج. عندما تنتقل إلى موقعك ، افتح Chrome Developer Tools (Ctrl + Shift + i) وانقر على علامة التبويب عمليات التدقيق .

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

أفضل شيء في هذه التقارير هو أنها تمنحك "فرصًا" لتحسين درجاتك.

في قسم الأداء ، يخبرك البرنامج بتقديم تنسيقات ملفات الجيل التالي مثل WebP مقابل صور .PNG التقليدية ، ويقترح التحميل البطيء للصور.

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

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

نذهب أبعد من ذلك

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