100 days of code frontend
1.0.0
ملاحظة: هذا المورد قديم! سأرشفة هذا المستودع بحلول نهاية يوليو 2021 حيث أشعر أن العديد من التوصيات هنا قديمة لتعلم تطوير الويب الأمامي في عام 2021.
يرجى دعم هذا الريبو من خلال إعطائه نجمة ️ في الجزء العلوي من الصفحة واتبعني لمزيد من الموارد!
هل تريد معرفة المزيد عن تطوير الواجهة الأمامية؟ يعتبر:
هذا هو منهج رأي إلى حد ما لتعلم التنمية الأمامية خلال رقم 100 يوم. نظرًا لأنه يغطي مجموعة واسعة من موضوعات التطوير الأمامية ، يمكن اعتبارها أكثر من دورة نمط "مسح" بدلاً من الغوص العميق في أي منطقة واحدة. من الناحية المثالية ، سيكون الوجبات الجاهزة من إكمال هذا المنهج بعض الألفة مع كل موضوع والقدرة على الغوص بسهولة في أي مجال في المستقبل عند الضرورة.
تأثر هذا المنهج بشكل كبير من خلال خريطة طريق كامران أحمد الحديثة. يرجى التحقق من ذلك-إنه ممتاز.
ملاحظة : أعرف أن التنمية الأمامية تعني الكثير من الأشياء المختلفة لكثير من الناس! إذا كنت مطورًا أماميًا وتعتقد أن هذا الدليل يمكن تحسينه ، فيرجى إخبارنا بمواجهة مشكلة كما هو موضح في القسم المساهم. شكرًا لك!
بفضل بعض المساهمين المذهلين ، تمت ترجمة هذا المنهج إلى اللغات التالية!
المبدأ الأساسي لهذا المستودع هو Timeboxing. إذا كنت قد قضيت أي وقت في الماضي في محاولة لتعلم تطوير الويب أو مهارة مماثلة ، فمن المحتمل أن تكون قد واجهت هبوطًا في حفرة أرنب في أي موضوع معين. يهدف هذا المستودع إلى تعيين عدد معين من الأيام لكل تقنية ويشجعك على الانتقال إلى التالي بمجرد انتهاء عدد الأيام.
من المتوقع أن يكون الجميع على مستوى مختلف من الكفاءة عند البدء في هذا التحدي ، وهذا جيد. يمكن للمبتدئين والخبراء في الواجهة الأمامية على حد سواء الاستفادة من الممارسة الزمنية في كل من هذه المجالات.
الأنشطة الموصى بها يومًا بعد يوم هي كما يلي:
أدناه يمكنك العثور على القليل من المعلومات حول كل موضوع في المنهج وكذلك بعض الأفكار/التوجيه حول ما يجب القيام به لكل منهما. للحصول على الإلهام للمشاريع التي يجب القيام بها إلى جانب هذا المنهج ، راجع قسم أفكار المشروع.
كجزء من مبدأ TimeBoxing ، لا بأس إذا لم تقم بجميع العناصر في أقسام "مجالات التعلم والأفكار". يجب أن تركز بدلاً من ذلك على الحصول على أقصى استفادة من عدد الأيام المعينة لكل منطقة ثم المضي قدمًا.
لغة ترميز النص التشعبي (HTML) هي لغة الترميز القياسية لإنشاء صفحات الويب وتطبيقات الويب. مع أوراق الأناقة المتتالية (CSS) و JavaScript ، فإنها تشكل ثالوثًا من تقنيات الزفاف للشبكة العالمية. تتلقى متصفحات الويب مستندات HTML من خادم ويب أو من التخزين المحلي وتقديم المستندات إلى صفحات ويب متعددة الوسائط. يصف HTML بنية صفحة الويب بشكل دلالي والأصل تضمنت إشارات لمظهر المستند. (المصدر: ويكيبيديا)
HTML هو حقا أساس تطوير الويب. حتى في الأطر القائمة على JavaScript ، ينتهي بك الأمر إلى كتابة HTML في شكل أو آخر.
أوراق الأناقة المتتالية (CSS) هي لغة ورقة أنماط تستخدم لوصف عرض وثيقة مكتوبة بلغة ترميز مثل HTML. CSS هي تقنية حجر الزاوية في شبكة الويب العالمية ، إلى جانب HTML و JavaScript. تم تصميم CSS لتمكين فصل العرض والمحتوى ، بما في ذلك التصميم والألوان والخطوط. يمكن أن يحسن هذا الفصل إمكانية الوصول إلى المحتوى ، ويوفر مزيد من المرونة والتحكم في مواصفات خصائص العرض ، وتمكين صفحات ويب متعددة من مشاركة التنسيق من خلال تحديد CSS ذات الصلة في ملف .CSS منفصل ، وتقليل التعقيد والتكرار في المحتوى الهيكلي. (المصدر: ويكيبيديا)
CSS هو عنصر أساسي آخر لتطوير الويب. على الرغم من استخدامه بشكل أساسي لتنظيم عناصر HTML ووضعه ، إلا أنه أصبح قادرًا بشكل متزايد على مهام أكثر ديناميكية (على سبيل المثال ، الرسوم المتحركة) التي سيتم التعامل معها من قبل JavaScript.
<style> العلامات<link>JavaScript ، التي غالباً ما يتم اختصارها باسم JS ، هي لغة برمجة عالية المستوى تفسر مع مواصفات ECMAScript. إنها لغة تتميز أيضًا بأنها ديناميكية ، وكتبت بشكل ضعيف ، وتستند إلى النموذج الأولي ، ومتعدد النماذج. إلى جانب HTML و CSS ، تعد JavaScript واحدة من التقنيات الأساسية الثلاثة للشبكة العالمية. تتيح JavaScript صفحات الويب التفاعلية ، وبالتالي فهي جزء أساسي من تطبيقات الويب. تستخدمها الغالبية العظمى من مواقع الويب ، وجميع متصفحات الويب الرئيسية لديها محرك JavaScript مخصص لتنفيذه. (المصدر: ويكيبيديا)
أصبحت JavaScript ذات أهمية متزايدة في العالم الأمامي. على الرغم من أنه كان يستخدم ذات مرة لجعل الصفحات ديناميكية ، إلا أنه أصبح الآن أساس العديد من الأطر الأمامية. تتعامل هذه الأطر مع الكثير من المهام التي تم التعامل معها سابقًا من قبل الواجهة الخلفية (على سبيل المثال ، توجيه وعرض طرق عرض مختلفة).
<script> العلامة والتنسيبjQuery هي مكتبة JavaScript سريعة وصغيرة ومثيرة للميزات. إنه يجعل أشياء مثل اجتياز مستندات HTML ومعالجتها ، ومعالجة الأحداث ، والرسوم المتحركة ، و Ajax أكثر بساطة مع واجهة برمجة تطبيقات سهلة الاستخدام تعمل عبر العديد من المتصفحات. مع مجموعة من التنوع والتوسيع ، غيّر JQuery الطريقة التي يكتب بها ملايين الأشخاص JavaScript. (المصدر: jquery.com)
بعد أن تقضي بعض الوقت مع JavaScript Plain (تسمى أيضًا "الفانيليا") ، قد تجد بعض المهام مرهقة بعض الشيء ، وخاصة تلك المتعلقة بالوصول إلى عناصر HTML ومعالجتها. لفترة طويلة ، كانت JQuery هي مكتبة الانتقال لجعل هذه الأنواع من المهام أسهل ومتسقة عبر متصفحات مختلفة. في الوقت الحاضر ، فإن jQuery ليس بالضرورة التعلم "إلزامي" بسبب التقدم في الفانيليا جافا سكريبت ، CSS ، وأطر JavaScript الأحدث (سننظر إلى الأطر لاحقًا). ومع ذلك ، سيكون من المفيد قضاء بعض الوقت لتعلم بعض jQuery وتطبيقه على مشروع صغير.
يعد تصميم الويب المتجاوب (RWD) طريقة لتصميم الويب الذي يجعل صفحات الويب تعمل بشكل جيد على مجموعة متنوعة من الأجهزة وأحجام النوافذ أو الشاشة. يعتبر العمل الحديث أيضًا قرب المشاهد كجزء من سياق المشاهدة كملحق لـ RWD. المحتوى والتصميم والأداء ضروريون في جميع الأجهزة لضمان قابلية الاستخدام والرضا. يتكيف الموقع المصمم باستخدام RWD مع تخطيط بيئة المشاهدة باستخدام السوائل والشبكات القائمة على النسبة والصور المرنة والاستعلامات على وسائل الإعلام CSS3 ، وهو امتداد لقاعدة Media. (المصدر: ويكيبيديا)
إن تصميم الويب المتجاوب يدور حول جعل تطبيقات الويب تبدو وتعمل بشكل صحيح على جميع أنواع الأجهزة. مثال سريع ودني هو أن موقع الويب يجب أن ينظر ويعمل بشكل صحيح في متصفح الويب على سطح المكتب وعلى متصفح الهاتف المحمول. يعد فهم التصميم المستجيب أمرًا بالغ الأهمية لأي مطور أمامي!
إمكانية الوصول إلى الويب هي الممارسة الشاملة المتمثلة في ضمان عدم وجود حواجز تمنع التفاعل مع أو الوصول إلى مواقع الويب على شبكة الإنترنت العالمية من قبل الأشخاص ذوي الإعاقة. عندما يتم تصميم المواقع بشكل صحيح وتطويرها وتحريرها ، يتمتع جميع المستخدمين عمومًا بوصول متساوٍ إلى المعلومات والوظائف. (المصدر: ويكيبيديا)
إمكانية الوصول ، التي غالباً ما يتم كتابتها باسم A11y ، هي واحدة من أهم الموضوعات في تطوير الويب الأمامي ، ومع ذلك يبدو أنها غالبًا ما تكون قصيرة. لا يعد إنشاء تطبيقات الويب التي يمكن الوصول إليها سليمة من الناحية الأخلاقية فحسب ، بل تجعل الكثير من المنطق التجاري أيضًا النظر في الجمهور الإضافي الذي سيكون قادرًا على عرض تطبيقاتك عند الوصول إليها.
GIT هو نظام التحكم في الإصدار المجاني والمفتوح المصدر المصمم للتعامل مع كل شيء من المشاريع الصغيرة إلى الكبيرة جدًا مع السرعة والكفاءة. (المصدر: git-scm.com)
يعد التحكم في الإصدار/الكود جزءًا أساسيًا من مجموعة أدوات مطور الويب. هناك عدد من أنظمة التحكم في الإصدار المختلفة ، ولكن GIT هو إلى حد بعيد الأكثر انتشارًا في الوقت الحالي. يمكنك (وينبغي!) استخدامه لتتبع مشاريعك كما تتعلم!
Node.js هي بيئة تشغيل JavaScript ذات المصدر المفتوح والتي تنفذ رمز JavaScript خارج المتصفح. يتم استخدام JavaScript في المقام الأول للبرمجة النصية من جانب العميل ، حيث يتم تضمين البرامج النصية المكتوبة في JavaScript في HTML لصفحة الويب وتشغيلها من جانب العميل بواسطة محرك JavaScript في متصفح الويب الخاص بالمستخدم. يتيح Node.js للمطورين استخدام JavaScript لكتابة أدوات سطر الأوامر وللبرمجة النصية من جانب الخادم-ترسل البرامج النصية التي يتم إنتاج محتوى صفحة ويب ديناميكي قبل إرسال الصفحة إلى متصفح الويب الخاص بالمستخدم. وبالتالي ، تمثل Node.js نموذج "JavaScript في كل مكان" ، وتوحيد تطوير تطبيقات الويب حول لغة برمجة واحدة ، بدلاً من لغات مختلفة من جانب الخادم ونصوص جانبية للعميل. (المصدر: ويكيبيديا)
على الرغم من أن Node.js تُعرف عادةً كحل خلفي ، إلا أنه يتم استخدامه بشكل متكرر لدعم التطوير الأمامي. يقوم بذلك بعدة طرق ، بما في ذلك أشياء مثل تشغيل أدوات البناء ، والاختبار ، والاختبار (يتم تغطيتها جميعًا قريبًا!). تعتبر Node Package Manager (NPM) ميزة أخرى رائعة للعقدة ويمكن استخدامها لإدارة تبعيات مشروعك (أي ، مكتبات الرمز قد يعتمد عليها مشروعك - jQuery مثال!).
Sass هو امتداد لـ CSS الذي يضيف القوة والأناقة إلى اللغة الأساسية. يتيح لك استخدام المتغيرات ، والقواعد المتداخلة ، والمزيج ، والواردات المضمنة ، وأكثر من ذلك ، كل ذلك مع بناء جملة متوافق تمامًا مع CSS. تساعد Sass على الحفاظ على أوراق الأنماط الكبيرة منظمة بشكل جيد ، وتجاوز أوراق الأنماط الصغيرة وتشغيلها بسرعة ، لا سيما بمساعدة مكتبة Compass Style. (المصدر: sass-lang.com)
يسمح لك Sass بكتابة CSS بطريقة أكثر برمجية. إذا قمت ببعض CSS ، فقد تكون قد لاحظت أنك في النهاية تكرار الكثير من المعلومات-على سبيل المثال ، تحديد رمز اللون نفسه. في SASS ، يمكنك استخدام أشياء مثل المتغيرات والحلقات والتعشيش لتقليل التكرار وزيادة قابلية القراءة. بعد كتابة الكود الخاص بك في Sass ، يمكنك تجميعه بسرعة وسهولة إلى CSS العادية.
* بعض البدائل: الأساس ، بولما ، تتحقق
Bootstrap هو إطار أمامي مجاني ومفتوح المصدر لتطوير مواقع الويب وتطبيقات الويب. أنه يحتوي على قوالب التصميم المستندة إلى HTML و CSS للطباعة ، والنماذج ، والأزرار ، والتنقل ومكونات الواجهة الأخرى ، وكذلك ملحقات JavaScript الاختيارية. (المصدر: ويكيبيديا)
هناك العديد من الخيارات للتوضيح ، والتصميم ، وجعل تطبيق الويب الخاص بك ديناميكيًا ، ولكن ستجد أن بدءًا من إطار عمل يساعدك بشكل كبير في الحصول على بداية. Bootstrap هو أحد هذه الإطار عمل ، لكنه بالتأكيد بعيد عن الخيار الوحيد! أوصي بالتعرف على إطار عمل مثل هذا ، ولكن من المهم بكثير فهم أساسيات HTML و CSS و JavaScript أكثر مما هو عليه في أي إطار عمل واحد.
تعد المنهجية ، المنهجية ، العنصر ، المنهجية (يشار إليها عادةً باسم BEM) بمثابة اتفاقية تسمية شهيرة للفئات في HTML و CSS. تم تطويره من قبل الفريق في Yandex ، وهو هدفه هو مساعدة المطورين على فهم العلاقة بين HTML و CSS بشكل أفضل في مشروع معين. (المصدر: CSS-Tricks.com)
من المهم معرفة أنظمة التسمية والمنظمات مثل BEM موجودة ولماذا يتم استخدامها. قم ببعض الأبحاث هنا ، لكن على مستوى المبتدئين ، لا أوصي بتكريس الكثير من الوقت للموضوع.
Gulp هي مجموعة أدوات لأتمتة المهام المؤلمة أو المستهلكة للوقت في سير عمل التنمية الخاص بك ، حتى تتمكن من التوقف عن العبث وبناء شيء ما. (المصدر: gulpjs.com)
في التطوير الأمامي الحديث ، ستجد نفسك في كثير من الأحيان بحاجة إلى أتمتة المهام مثل التجميع ، ونقل الملفات ، وحقن المراجع في ملفات HTML. Gulp هي أداة واحدة يمكن أن تساعدك على القيام بهذه الأشياء!
buildفي جوهرها ، يعد WebPack مجموعة ثابتة للوحدة النمطية لتطبيقات JavaScript الحديثة. عندما تقوم WebPack بمعالجة التطبيق الخاص بك ، فإنه يقوم داخليًا بإنشاء رسم بياني تبعية يقوم بتخطيط كل وحدة يحتاج مشروعك وإنشاء حزم أو أكثر. (المصدر: webpack.js.org)
تخيل أن لديك مشروعًا كبيرًا لتطوير الويب مع عدد من المطورين المختلفين الذين يعملون على الكثير من المهام المختلفة. بدلاً من جميع العمل في نفس الملفات ، قد ترغب في تعديلها قدر الإمكان. تساعد WebPack في تمكين ذلك من خلال السماح لفريقك بالعمل بشكل معياري ، ثم تصل إلى وقت لبناء التطبيق ، وسوف تلتصق WebPack معًا: HTML ، CSS/SASS ، Javasscript ، الصور ، إلخ.
ESLINT هي أداة ربط JavaScript مفتوحة المصدر التي تم إنشاؤها في الأصل بواسطة Nicholas C. Zakas في يونيو 2013. كود Linting هو نوع من التحليل الثابت الذي يستخدم بشكل متكرر للعثور على أنماط أو رمز إشكالية لا تلتزم بإرشادات أنماط معينة. هناك كود بياضات لمعظم لغات البرمجة ، وتتضمن المترجمين أحيانًا الانقطاع في عملية التجميع. (المصدر: eslint.org)
Linting هي أداة رائعة لجودة الكود وسهولة القراءة والاتساق. سيساعدك استخدام Linter على التقاط بناء الجملة وتنسيق الأخطاء قبل الذهاب إلى الإنتاج. يمكنك تشغيل المطبوعات يدويًا أو تضمينها في عملية الإنشاء/النشر.
* بعض البدائل: Vue ، Angular ، ember
React (المعروف أيضًا باسم React.js أو ReactJS) عبارة عن مكتبة JavaScript لبناء واجهات المستخدم. يتم الحفاظ عليه بواسطة Facebook ومجتمع من المطورين والشركات الفردية. يمكن استخدام React كقاعدة في تطوير تطبيقات صفحة واحدة أو الهاتف المحمول. تتطلب تطبيقات React المعقدة عادة استخدام مكتبات إضافية لإدارة الدولة ، والتوجيه ، والتفاعل مع واجهة برمجة التطبيقات. (المصدر: ويكيبيديا)
أطر عمل JavaScript في الواجهة الأمامية في طليعة التطور الأمامي الحديث. أحد الوجبات السريعة المهمة هنا هو أن React ، على الرغم من كونها شعبية بشكل لا يصدق ، ليست سوى مكتبة لبناء واجهات المستخدم في حين أن الأطر مثل Vue و Angular AIM لتكون أكثر ملاءمة. على سبيل المثال ، إذا قمت بإنشاء تطبيق مع React يحتاج إلى توجيه إلى طرق عرض مختلفة ، فستحتاج إلى جلب شيء مثل react-router .
create-react-app هو أداة مريحة لسقالة مشاريع React الجديدة.Redux هي حاوية حالة يمكن التنبؤ بها لتطبيقات JavaScript. يساعدك على كتابة التطبيقات التي تتصرف باستمرار ، وتشغيلها في بيئات مختلفة (العميل والخادم والمواطن) ، ومن السهل اختبارها. علاوة على ذلك ، فإنه يوفر تجربة مطور رائعة ، مثل تحرير التعليمات البرمجية الحية مع تصحيح تصحيح الوقت في السفر. (المصدر: redux.js.org)
أثناء قيامك ببناء تطبيقات أمامية أكبر وأكبر ، تبدأ في إدراك أنه من الصعب الحفاظ على حالة التطبيق: أشياء مثل إذا تم تسجيل الدخول إلى المستخدم ، ومن هو المستخدم ، وما يحدث بشكل عام في التطبيق. Redux عبارة عن مكتبة رائعة تساعدك على الحفاظ على مصدر واحد للحالة يمكن أن يبني تطبيقه على منطقه.
Jest هو إطار اختبار JavaScript اللذيذ مع التركيز على البساطة. إنه يعمل مع المشاريع باستخدام: بابل ، تايمز ، العقدة ، رد الفعل ، الزاوي ، vue والمزيد! (المصدر: Jestjs.io)
من المهم جدًا إعداد الاختبارات الآلية لمشاريعك الأمامية. سيتيح لك إعداد الاختبار الآلي إجراء تغييرات مستقبلية بثقة-إذا قمت بإجراء تغييرات وما زالت اختباراتك مرورًا ، فستكون مرتاحًا إلى حد ما لم تكسر أي وظائف موجودة. هناك الكثير من أطر الاختبار التي يجب إدراجها ؛ Jest هو ببساطة واحد من مفضلاتي.
create-react-app ، تم تكوين Jest بالفعل.* البديل: التدفق
TypeScript هي لغة برمجة مفتوحة المصدر تم تطويرها وصيانتها بواسطة Microsoft. إنها مجموعة Superset النحوية الصارمة من JavaScript ، وتضيف كتابة ثابتة اختيارية إلى اللغة. تم تصميم TypeScript لتطوير تطبيقات كبيرة و transcompiles إلى JavaScript. نظرًا لأن TypeScript هي مجموعة من JavaScript ، فإن برامج JavaScript الحالية هي أيضًا برامج نصية صالحة. يمكن استخدام TypeScript لتطوير تطبيقات JavaScript لتنفيذ كل من العميل وجانب الخادم (node.js). (المصدر: ويكيبيديا)
يتم كتابة JavaScript ديناميكيا. ومع ذلك ، فهو اعتقاد شائع بأن الكتابة الثابتة (أي تحديد أنواع المتغيرات والفئات والواجهات في وقت مبكر) أكثر وضوحًا وتقلل من احتمال وجود عيوب/الأخطاء. بغض النظر عن ما تشعر به في هذا الموضوع ، من المهم على الأقل أن تشعر بإصدار من النوع الثابت من JavaScript مثل TypeScript. لاحظ أن TypeScript يجمع إلى JavaScript بحيث يمكن تفسيرها بواسطة المتصفحات (أي ، لا تفسر المتصفحات TypeScript).
Next.js هو إطار أضيق الحدود لتطبيقات React التي تم إصدارها الخادم. (المصدر: next.js - رد فعل جانب خادم رد فعل بشكل صحيح)
الآن نحن نتقدم! لقد قمت الآن ببناء تطبيق React (أو Vue أو Angular) الذي يقوم بالكثير من العمل في المتصفح. لأسباب مختلفة (على سبيل المثال ، SEO ، مخاوف بشأن أداء العميل) ، قد ترغب بالفعل في تقديم تطبيق الواجهة الأمامية الخاصة بك على الخادم بدلاً من العميل. هذا هو المكان الذي يأتي فيه إطار مثل Next.js.
من المفترض أن تمنحك هذه القائمة تعرضًا واسعًا للنظام الإيكولوجي للواجهة الأمامية ، لكن من المستحيل ببساطة الوصول إلى كل موضوع واحد ، ناهيك عن الأدوات التي لا تعد ولا تحصى داخل كل منطقة! إذا كنت تعتقد أنني فاتني شيء مهم للغاية ، فيرجى الاطلاع على قسم المساهمة لمعرفة كيف يمكنك المساعدة في جعل هذا الدليل أفضل.
مع تقدمك من خلال #100daysofcode ، ستحتاج إلى مشروع واحد أو عدة مشروع يمكنك تطبيق معرفتك الجديدة. في هذا القسم ، أحاول تقديم بعض أفكار المشروع التي يمكنك استخدامها. بدلاً من ذلك ، يتم تشجيعك على التوصل إلى أفكار المشروع الخاصة بك لأن تلك الأفكار قد تهمك وتحفزك أكثر.
بشكل عام ، لقد وجدت الموارد التالية لا تقدر بثمن لتعلم تطوير البرمجيات:
إذا كنت ترغب في مدخلاتي في أي شيء ، فلا تتردد في التواصل معي على Twitter وسأبذل قصارى جهدي لتقديم بعض المساعدة. إذا كنت تعتقد أن هناك مشكلة في المناهج الدراسية أو لديك توصية ، راجع القسم المساهم أدناه.
إذا كنت تقدر العمل المنجز هنا ، فيمكنك المساهمة بشكل كبير من خلال نشر الكلمة حول هذا المستودع ، بما في ذلك أشياء مثل:
هذا عمل مستمر وأنا أقدر كثيرًا أي مساعدة في الحفاظ على قاعدة المعرفة هذه!
عند المساهمة في هذا المستودع ، يرجى أولاً مناقشة التغيير الذي ترغب في إجراءه عبر المشكلة قبل إجراء التغيير. خلاف ذلك ، سيكون من الصعب للغاية فهم اقتراحك وقد يؤدي إلى وضع الكثير من العمل في تغيير لن يتم دمجه.
يرجى ملاحظة أن كل من يشارك في هذا المشروع إما يحاولون التعلم أو محاولة المساعدة-أن يكون لطيفًا!
