ست مهام لمطور الواجهة الأمامية

1. استمارة البطاقة الائتمانية

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

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

ما سوف تتعلم:

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

تمت ترجمة المقال بدعم من EDISON Software ، والتي يعتني بصحة المبرمجين ووجبة إفطارهمو تطوير البرمجيات المخصصة.

2. الرسم البياني

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

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

ما سوف تتعلم:

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

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

3. تويتر للرسوم المتحركة القلب

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

ما سوف تتعلم:

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

4. مستودعات GitHub مع وظيفة البحث

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

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

ما سوف تتعلم:

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

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

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

ما سوف تتعلم:

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

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

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

ما سوف تتعلم:

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

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

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