Front-end dojo: مشاريع لتدريب مهارات المطور (5 جديد + 43 قديم)

1. استنساخ الفكرة

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

www.notion.so

ما الذي ستتعلمه من خلال إنشاء استنساخ Notion:

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

تمت ترجمة المقال بدعم من EDISON Software ، والتي تطور التطبيقات والمواقع الإلكترونيةو يستثمر في الشركات الناشئة.

2. استنساخ Repl.it

Repl.it هي أداة تحرير تعليمات برمجية تعاونية في الوقت الفعلي. يمكنك اختيار عدة لغات: JavaScript و Python و Go وتنفيذ الكود مباشرة في المتصفح. مفيد جدًا للعروض التوضيحية السريعة والمقابلات البرمجية.

اعادتها

ما سوف تتعلمه من خلال إنشاء نسخة من Repl.it:

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

3. استنساخ صور Google

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

www.google.com/photos/about

ما الذي ستتعلمه من خلال إنشاء نسخة من صور Google:

• كيفية إنشاء صور سريعة الاستجابة على الهواتف والأجهزة اللوحية وأجهزة الكمبيوتر المحمولة وحتى شاشات التلفزيون العملاقة.
• كيفية التعامل مع تحميلات الصور ، وخاصة الصور الكبيرة (> 1 ميجابايت) والتحميلات المجمعة.
• معالجة ملفات الصور واقتصاص الصور وتغيير حجمها للصور المصغرة أو عند فتح معرض.
• المكافأة: كيفية تخزين الصور في السحابة أو قاعدة البيانات المحلية.

4. استنساخ Gifsky

جيفسكي تحويل الفيديو إلى GIF باستخدام الوظائفبابوا نيو غينيا للوحات ذات الإطار المتقاطع الفعال والتشويش المؤقت. والنتيجة هي صورة GIF بآلاف الألوان لكل إطار.

gif.ski

ما الذي ستتعلمه من خلال إنشاء نسخة من Gifski:

• كيفية تحويل ملفات الفيديو (.mp4 إلى .gif).
• كيفية استخدام واجهة برمجة تطبيقات السحب والإفلات بتنسيق HTML.
• كيف يعمل تحسين الصورة ومعالجتها.

ملاحظة: Gifsky هو مشروع مفتوح المصدر وهو موجود على جيثب!

5. مراقبة أسعار العملات المشفرة

تفاعل مع تعقب العملة المشفرة الأصلي

ما سوف تتعلمه من خلال إنشاء أداة تعقب أسعار العملات:

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

ملاحظة: ها هو مثال على مستودع GitHub.

مجموعة مختارة من المشاريع من المنشورات السابقة.

طبقة

www.reddit.com/r/layer

الطبقة عبارة عن مجتمع حيث يمكن للجميع رسم بكسل على "لوحة" مشتركة. ولدت الفكرة الأصلية على موقع Reddit. مجتمع r / Layer هو استعارة للإنشاء المشترك ، بحيث يمكن للجميع أن يكونوا منشئين ويساهمون في قضية مشتركة.

ما الذي ستتعلمه عند إنشاء مشروع Layer الخاص بك:

• كيف تعمل لوحة JavaScript ، ومعرفة كيفية تشغيل لوحة الرسم هي مهارة حاسمة في العديد من التطبيقات.
• كيفية تنسيق أذونات المستخدم (أذونات المستخدم). يمكن لكل مستخدم رسم بكسل واحد كل 15 دقيقة دون الحاجة إلى تسجيل الدخول.
• إنشاء جلسات ملفات تعريف الارتباط.

Squoosh

com.squoosh.app

Squoosh هو تطبيق لضغط الصور مع العديد من الخيارات المتقدمة.

GIF 20 ميغابايت

من خلال إنشاء نسختك الخاصة من Squoosh ، ستتعلم:

• كيف تعمل مع أحجام الصور
• إتقان أساسيات Drag'n'Drop API
• افهم كيف تعمل واجهات برمجة التطبيقات ومستمعي الأحداث
• كيفية تحميل وتصدير الملفات

ملاحظة: ضاغط الصورة محلي. ليس من الضروري إرسال بيانات إضافية إلى الخادم. يمكنك الحصول على ضاغط بمفردك أو على خادم من اختيارك.

آلة حاسبة

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

jarodburchill.github.io/CalculatorReactApp

من خلال إنشاء الآلة الحاسبة الخاصة بك ، ستتعلم:

• العمل مع العمليات الحسابية والأرقام
• تدرب مع مستمعي الأحداث API
• كيفية ترتيب العناصر ، فهم الأنماط

الزاحف (محرك البحث)

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

محرك بحث جوجل

ماذا ستتعلم من خلال إنشاء محرك البحث الخاص بك:

• كيف تعمل الزواحف
• كيفية فهرسة المواقع وكيفية ترتيبها حسب التصنيف والسمعة
• كيفية تخزين المواقع المفهرسة في قاعدة بيانات وكيفية العمل مع قاعدة البيانات

مشغل الموسيقى (سبوتيفي ، آبل ميوزيك)

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

سبوتيفي

ما الذي ستتعلمه من خلال إنشاء منصة دفق الموسيقى الخاصة بك:

• كيفية العمل مع API. استخدام واجهات برمجة التطبيقات من Spotify أو Apple Music
• كيفية اللعب أو الإيقاف أو الترجيع إلى المسار التالي / السابق
• كيفية تغيير الحجم
• كيفية إدارة توجيه المستخدم وسجل المتصفح

تطبيق البحث عن الأفلام مع React (مع خطافات)

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

ما سوف تتعلم
من خلال بناء هذا التطبيق ، ستحسن مهاراتك في React باستخدام Hooks API الجديدة نسبيًا. يستخدم نموذج المشروع مكونات React ، والكثير من الخطافات ، وواجهة برمجة تطبيقات خارجية ، وبالطبع بعض أنماط CSS.

كومة التقنية والميزات

• تفاعل مع الخطافات
• إنشاء رد فعل التطبيق
• شبيبة
• CSS

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

تطبيق الدردشة مع Vue

مشروع آخر رائع بالنسبة لك هو إنشاء تطبيق دردشة باستخدام مكتبة JavaScript المفضلة لدي: VueJS. سيبدو التطبيق كما يلي:

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

كومة التقنية والميزات

• رأي
• فويكس
• جهاز التوجيه Vue
• عرض CLI
• تاجر مخدرات
• CSS

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

تطبيق طقس جميل مع Angular 8

سيساعدك هذا المثال في إنشاء تطبيق طقس جميل باستخدام Angular 8:

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

كومة التقنية والميزات

• الزاوي 8
• Firebase
• التقديم من جانب الخادم
• CSS مع الشبكة و Flexbox
• ودية المحمول والقدرة على التكيف
• وضع الظلام
• واجهة جميلة

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

تطبيق To-Do مع Svelte

يشبه Svelte الطفل الجديد في نهج المكون - على الأقل يشبه React و Vue و Angular. وهذا أحد أهم المنتجات الجديدة لعام 2020.

تطبيقات To-Do ليست بالضرورة الموضوع الأكثر سخونة ، لكنها ستساعدك حقًا على صقل مهاراتك في Svelte. سيبدو مثل هذا:

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

كومة التقنية والميزات

• سفلي 3
• مكونات
• التصميم باستخدام CSS
• بناء الجملة ES6

ليس هناك الكثير من مشاريع بداية Svelte الجيدة ، لذلك وجدت هذا هو مكان جيد للبدء.

تطبيق التجارة الإلكترونية مع Next.js

Next.js هو الإطار الأكثر شيوعًا لبناء تطبيقات React التي تدعم العرض من جانب الخادم خارج الصندوق.

سيوضح لك هذا المشروع كيفية إنشاء تطبيق للتجارة الإلكترونية يشبه هذا:

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

كومة التقنية والميزات

• Next.js
• المكونات والصفحات
• أخذ عينات البيانات
• أسلوب
• نشر المشروع
• SSR و SPA

من الرائع دائمًا أن يكون لديك مثال واقعي مثل تطبيق التجارة الإلكترونية لتعلم شيء جديد. أنت تستطيع تجد البرنامج التعليمي هنا.

مدونة متعددة اللغات كاملة مع Nuxt.js

Nuxt.js مخصص لـ Vue ، مثل Next.js لـ React: إطار عمل رائع للجمع بين العرض من جانب الخادم والتطبيقات أحادية الصفحة
سيبدو آخر تطبيق يمكنك إنشاؤه على النحو التالي:

ما سوف تتعلم

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

يستفيد من العديد من الميزات الرائعة التي تقدمها Nuxt ، مثل الصفحات والمكونات ، والتصميم باستخدام SCSS.

كومة التقنية والميزات

• Nuxt.js
• المكونات والصفحات
• وحدة ستوريبلوك
• الخلطات
• Vuex لإدارة الدولة
• SCSS للتصميم
• البرمجيات الوسيطة Nuxt

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

مدونة مع غاتسبي

Gatsby هو مولد موقع ثابت رائع باستخدام React و GraphQL. هذه نتيجة المشروع:

ما سوف تتعلم

في هذا البرنامج التعليمي ، ستتعلم كيفية استخدام Gatsby لإنشاء مدونة ستستخدمها لكتابة مقالاتك الخاصة باستخدام React و GraphQL.

كومة التقنية والميزات

• غاتسبي
• رد فعل
• GraphQL
• الإضافات والسمات
• MDX / Markdown
• بوتستراب CSS
• قوالب

إذا أردت يومًا أن تبدأ مدونة ، هذا هو مثال عظيم كيفية صنعه باستخدام React و GraphQL.

أنا لا أقول أن WordPress هو خيار سيء ، ولكن مع Gatsby يمكنك إنشاء مواقع ويب عالية الأداء باستخدام React - وهو مزيج رائع.

مدونة مع Gridsome

Gridsome for Vue… حسنًا ، لقد حصلنا على ذلك بالفعل مع Next / Nuxt.
لكن الشيء نفسه ينطبق على Gridsome و Gatsby. كلاهما يستخدم GraphQL كطبقة بيانات ، لكن Gridsome تستخدم VueJS. إنه أيضًا منشئ مواقع ثابت رائع لمساعدتك في إنشاء مدونات رائعة:

ما سوف تتعلم

سيعلمك هذا المشروع كيفية إنشاء مدونة بسيطة لبدء استخدام Gridsome و GraphQL و Markdown. يشرح أيضًا كيفية نشر تطبيق من خلال Netlify.

كومة التقنية والميزات

• شبكي
• رأي
• GraphQL
• تخفيض السعر
• Netlify

هذا بالتأكيد ليس البرنامج التعليمي الأكثر اكتمالا ، لكنه يغطي المفاهيم الأساسية لـ Gridsome و تخفيض السعر ويمكن أن يكون نقطة انطلاق جيدة.

مشغل صوت مشابه لـ SoundCloud باستخدام Quasar

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

ما سوف تتعلم

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

كومة التقنية والميزات

• الكوازار
• رأي
• قرطبة
• أمواج
• مكونات واجهة المستخدم

مشروع صغير، مما يدل على قدرات Quasar لبناء تطبيقات الهاتف المحمول.

نموذج بطاقة الائتمان

شكل بطاقة ائتمان رائع مع تفاعلات دقيقة سلسة وجميلة. يتضمن تنسيق الأرقام والتحقق من الصحة والكشف التلقائي عن نوع البطاقة. إنه مبني على Vue.js وهو أيضًا مستجيب تمامًا. (يمكنك ان ترى هنا.)

نموذج بطاقة الائتمان

ما سوف تتعلم:

• معالجة النماذج والتحقق منها
• معالجة الأحداث (على سبيل المثال ، عندما تتغير الحقول)
• تعرف على كيفية عرض العناصر ووضعها على الصفحة ، وخاصة معلومات بطاقة الائتمان الموجودة أعلى النموذج

شريط الرسم البياني

المخطط الشريطي هو مخطط أو رسم بياني يمثل بيانات فئوية بأشرطة مستطيلة ذات ارتفاعات أو أطوال تتناسب مع القيم التي تمثلها.

يمكن تطبيقها عموديًا أو أفقيًا. يُطلق على المخطط الشريطي العمودي أحيانًا اسم مخطط خطي.

ما سوف تتعلم:

• عرض البيانات بطريقة منظمة ومفهومة
• اختياري: تعرف على كيفية استخدام العنصر canvas وكيفية رسم العناصر معها

ومن يمكنك العثور على بيانات سكان العالم. يتم فرزها حسب السنة.

تويتر قلب متحرك

في عام 2016 ، قدم Twitter هذه الرسوم المتحركة المذهلة لتغريداتهم. اعتبارًا من عام 2019 ، لا يزال يبدو لائقًا ، فلماذا لا تنشئ واحدًا بنفسك؟

ما سوف تتعلم:

• العمل مع سمة CSS keyframes
• معالجة وتحريك عناصر HTML
• اجمع بين JavaScript و HTML و CSS

مستودعات جيثب بوظيفة البحث

لا يوجد شيء غير عادي هنا - مستودعات GitHub هي مجرد قائمة مجيدة.
الهدف هو عرض المستودعات والسماح للمستخدم بترشيحها. يستخدم GitHub API الرسمي للحصول على مستودعات لكل مستخدم.

صفحة الملف الشخصي على GitHub github.com/indreklasn

ما سوف تتعلم:

• احصل على البيانات من API
• عرض البيانات من API
• تصفية وعرض البيانات ذات الصلة لكل بحث
• اختياري: إذا كنت مستعدًا لقبول المكالمة ، فاستخدم API v4، تم إنشاؤه باستخدام GraphQL. إذا كنت تريد تعلم GraphQL ، فانتقل إلى إحدى مقالاتي السابقة.

دردشات أسلوب Reddit

تعد الدردشات وسيلة شائعة للتواصل نظرًا لبساطتها وسهولة استخدامها. ولكن ما الذي يمد غرف الدردشة الحديثة في الواقع؟ مآخذ الويب!

ما سوف تتعلم:

• استخدم WebSockets ، وقم بتطبيق الاتصالات في الوقت الفعلي وتحديثات البيانات
• العمل مع مستويات وصول المستخدم (على سبيل المثال ، يكون لمالك قناة الدردشة الدور adminوآخرين في الغرفة user)
• معالجة النماذج والتحقق منها - تذكر أن مربع الدردشة لإرسال رسالة هو input
• إنشاء والانضمام إلى دردشات مختلفة
• التعامل مع الرسائل الخاصة. يمكن للمستخدمين التواصل مع المستخدمين الآخرين بشكل خاص. بشكل أساسي ، ستقوم بإنشاء اتصال WebSocket بين مستخدمين.

التنقل بنمط الشريط

تفرد هذا التنقل هو أن الحاوية المنبثقة تتحول لتناسب المحتوى. هناك أناقة لهذا الانتقال مقارنة بالسلوك التقليدي لفتح وإغلاق نافذة جديدة.

ما سوف تتعلم:

• ادمج رسوم CSS المتحركة مع الانتقالات
• محتوى الظل وتطبيق فئة نشطة على عنصر عائم

بكمن

قم بإنشاء نسختك الخاصة من Pacman. إنها طريقة رائعة للحصول على فكرة عن كيفية تطوير الألعاب وفهم الأساسيات. استخدم إطار عمل JavaScript أو React أو Vue.

سوف تتعلم:

• كيف تتحرك العناصر
• كيفية تحديد المفاتيح التي يجب الضغط عليها
• كيفية تحديد لحظة الاصطدام
• يمكنك الذهاب إلى أبعد من ذلك وإضافة التحكم في الحركة للأشباح

يمكن العثور على مثال لهذا المشروع في المستودع GitHub جيثب:

إدارةالمستخدم

مشروع في المستودع GitHub جيثب:

سيعلمك إنشاء تطبيق من نوع CRUD لإدارة المستخدم أساسيات التطوير. هذا مفيد بشكل خاص للمطورين المبتدئين.

سوف تتعلم:

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

التحقق من الطقس في موقعك

مشروع في المستودع GitHub جيثب:

إذا كنت ترغب في إنشاء تطبيقات ، فابدأ بتطبيق الطقس. يمكن تنفيذ هذا المشروع باستخدام Swift.

بالإضافة إلى اكتساب الخبرة في إنشاء تطبيق ، ستتعلم:

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

سوف تحتاج إلى API. للحصول على بيانات الطقس ، استخدم OpenWeather API. مزيد من المعلومات حول OpenWeather API هنا.

نافذة الدردشة

نافذة الدردشة الخاصة بي قيد التشغيل ، تفتح في علامتي تبويب في المتصفح

يعد إنشاء نافذة دردشة هو الطريقة المثلى لبدء استخدام المقابس. اختيار المكدس الفني ضخم. Node.js رائع ، على سبيل المثال.

سوف تتعلم كيفية عمل المقابس وكيفية تنفيذها. هذه هي الميزة الرئيسية لهذا المشروع.

إذا كنت من مطوري Laravel وتريد العمل مع المقابس ، فيرجى قراءة ملفي статью

جيت لاب CI

مصدر

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

سوف تتعلم:

• ما هو GitLab CI
• كيفية التهيئة .gitlab-ci.ymlوالتي تخبر مستخدم GitLab بما يجب فعله
• كيفية النشر في بيئات أخرى

محلل الموقع

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

سوف تتعلم:

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

تحديد مشاعر وسائل التواصل الاجتماعي

مصدر

يعد تحديد مشاعر وسائل التواصل الاجتماعي طريقة رائعة للتعرف على التعلم الآلي.

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

إذا كان لديك بالفعل خبرة في التعلم الآلي ، فحاول جمع البيانات من الشبكات الاجتماعية المختلفة والجمع بينها.

سوف تتعلم:

• ما هو التعلم الآلي

استنساخ تريلو

استنساخ Trello بواسطة Indrek Lasn.

ماذا ستتعلم:

• تنظيم مسارات معالجة الطلب (التوجيه).
• السحب والإسقاط.
• كيفية إنشاء كائنات جديدة (لوحات ، قوائم ، بطاقات).
• معالجة والتحقق من صحة بيانات الإدخال.
• من جانب العميل: كيفية استخدام التخزين المحلي ، وكيفية تخزين البيانات في التخزين المحلي ، وكيفية قراءة البيانات من التخزين المحلي.
• من جانب الخادم: كيفية استخدام قواعد البيانات ، وكيفية تخزين البيانات في قاعدة البيانات ، وكيفية قراءة البيانات من قاعدة البيانات.

هنا مثال مستودعمصنوع من React + Redux.

لوحة الادارة

مستودع جيثب.

تطبيق CRUD بسيط ، مثالي لتعلم الأساسيات. هيا نتعلم:

• إنشاء المستخدمين وإدارة المستخدمين.
• التفاعل مع قاعدة البيانات - إنشاء المستخدمين وقراءتهم وتحريرهم وحذفهم.
• التحقق من صحة الإدخال والعمل مع النماذج.

تعقب العملات المشفرة (تطبيق جوال محلي)

مستودع جيثب.

أي شيء: Swift ، Objective-C ، React Native ، Java ، Kotlin.

لندرس:

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

جرب هذا API. تجد أفضل - اكتب في التعليقات.

إذا كنت مهتمًا ، هنا هنا برنامج تعليمي.

قم بإعداد webpack config الخاص بك من البداية

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

المتطلبات:

• تجميع es7 إلى es5 (الأساسيات).
• ترجمة jsx إلى js - أو - .vue إلى .js (سيتعين عليك تعلم أدوات التحميل)
• قم بإعداد خادم تطوير حزمة الويب وإعادة تحميل الوحدة الساخنة. (vue-cli و create-reaction-app استخدم كلاهما)
• استخدم Heroku ، now.sh أو Github ، وتعلم كيفية نشر مشاريع webpack.
• قم بإعداد المعالج المسبق المفضل لديك لتجميع css - scss ، أقل ، قلم.
• تعرف على كيفية استخدام الصور و svgs مع حزمة الويب.

هذا مصدر رائع للمبتدئين.

استنساخ Hackernews

مطلوب من كل جدي أن يصنع Hackernews الخاصة به.

ما سوف تتعلمه على طول الطريق:

• كيفية التفاعل مع hackernews API.
• كيفية إنشاء تطبيق صفحة واحدة.
• كيفية تنفيذ ميزات مثل عرض التعليقات والتعليقات الفردية وملفات التعريف.
• تنظيم مسارات معالجة الطلب (التوجيه).

Tudushechka

TodoMVC.

بجد؟ تودوشكا؟ وهناك الآلاف منهم. لكن صدقوني ، هناك سبب لهذه الشعبية.
يعد تطبيق Tudu طريقة رائعة للتأكد من فهمك للأساسيات. حاول كتابة تطبيق واحد في Vanilla Javascript وآخر في إطار العمل المفضل لديك.

يتعلم:

• قم بإنشاء مهام جديدة.
• تحقق من إكمال الحقل.
• تصفية المهام (مكتملة ، نشطة ، الكل). يستخدم filter и reduce.
• فهم أساسيات جافا سكريبت.

قائمة السحب والإفلات القابلة للفرز

مستودع جيثب.

من المفيد جدا أن نفهم سحب وإسقاط API.

هيا نتعلم:

• سحب وإسقاط API
• إنشاء واجهات مستخدم ثرية

استنساخ Messenger (تطبيق أصلي)

سوف تفهم كيفية عمل كل من تطبيقات الويب والتطبيقات الأصلية ، مما يميزك عن الكتلة الرمادية.

ما سوف ندرسه:

• مآخذ الويب (الرسائل الفورية)
• كيف تعمل التطبيقات الأصلية.
• كيف تعمل القوالب في التطبيقات الأصلية.
• تنظيم مسارات معالجة الطلبات في التطبيقات الأصلية.

محرر النص

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

لقد استخدم الجميع محرر نصوص في مرحلة ما. اذا لما لا قم بإنشائه بنفسك?

استنساخ رديت

رديت عبارة عن تجميع للأخبار الاجتماعية وتقييم محتوى الويب وموقع للمناقشة.

رديت - يستهلك معظم وقتي ، لكنني ما زلت أتشبث به. يعد إنشاء نسخة Reddit طريقة فعالة لمعرفة كيفية البرمجة (أثناء تصفح Reddit).

يوفر لك Reddit ملفًا غنيًا جدًا API. لا تفوت أي ميزات ولا تفعل ذلك عشوائياً. في العالم الحقيقي مع العملاء والعملاء ، لن تتمكن من العمل بشكل عشوائي ، أو ستفقد وظيفتك بسرعة.

سيخمن العملاء الأذكياء على الفور أن العمل يتم بشكل سيئ وسيجدون شخصًا آخر.

رديت API

نشر حزمة NPM مفتوحة المصدر

إذا كنت تكتب كود Javascript ، فمن المحتمل أنك تستخدم مدير الحزم. يسمح لك مدير الحزم بإعادة استخدام الكود الحالي الذي كتبه ونشره الآخرون.

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

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

لوداش: lodash.com

إن امتلاكك لشيء ما عبر الإنترنت يجعلك تتفوق على الآخرين بنسبة 10٪. هذه بعض المصادر المفيدة حول المصادر المفتوحة والحزم.

منهج FreeCodeCamp

منهج لجنة الاتصالات الفدرالية

لقد جمعت freeCodecamp الكثير دورة البرمجة الشاملة.

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

ستكون أكثر من مؤهل لوظيفتك الأولى إذا تمكنت من إكمال الدورة التدريبية بأكملها.

قم بإنشاء خادم HTTP من سكراتش

يعد بروتوكول HTTP أحد البروتوكولات الرئيسية التي يتم من خلالها وصول المحتوى إلى الإنترنت. تُستخدم خوادم HTTP لخدمة محتوى ثابت مثل HTML و CSS و JS.

ستؤدي القدرة على تنفيذ بروتوكول HTTP من البداية إلى توسيع معرفتك بكيفية تفاعل كل شيء.

على سبيل المثال ، إذا كنت تستخدم NodeJs ، فأنت تعلم أن Express يوفر خادم HTTP.

للرجوع إليها ، تحقق مما إذا كان بإمكانك:

• قم بإعداد الخادم دون استخدام أي مكتبات
• يجب أن يقدم الخادم محتوى HTML و CSS و JS.
• تنفيذ موجه من الصفر
• مراقبة التغييرات وتحديث الخادم

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

تطبيق سطح المكتب للملاحظات

كلنا نأخذ الملاحظات ، أليس كذلك؟

لنقم بإنشاء تطبيق تدوين الملاحظات. يحتاج التطبيق إلى حفظ الملاحظات ومزامنتها مع قاعدة البيانات. أنشئ تطبيقًا محليًا باستخدام Electron أو Swift أو أي شيء تريده ويتناسب مع نظامك.

لا تتردد في دمج هذا مع التحدي الأول (محرر نصوص).

كمكافأة ، حاول مزامنة إصدار سطح المكتب مع إصدار الويب.

البودكاست (استنساخ متغير)

من لا يستمع إلى البودكاست؟

قم بإنشاء تطبيق ويب بالميزات التالية:

• انشئ حساب
• ابحث عن البودكاست
• معدل والاشتراك في البودكاست
• إيقاف وتشغيل ، تغيير السرعة ، وظائف للأمام والخلف لمدة 30 ثانية.

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

التابعة لها.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api

تصوير الشاشة

مرحبًا! أنا أصور شاشتي الآن!

قم بإنشاء تطبيق سطح مكتب أو ويب يسمح لك بالتقاط شاشتك وحفظ المقطع بتنسيق .gif

ها هو بعض النصائحكيفية تحقيق ذلك.

مصادر

• 5 مشاريع تدريب أكثر جرأة للمطورين (Layer ، Squoosh ، Calculator ، Website Crawler ، Music Player)
• 9 مشاريع لصقل مهاراتك الأمامية
• ست مهام لمطور الواجهة الأمامية
• ممارسة مسلية للمطور
• 8 مشاريع دراسية
• قائمة أخرى من المشاريع للعمل عليها

المصدر: www.habr.com