"إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"
الصفحة الأمامية > برمجة > مكونات واجهة المستخدم الأمامية

مكونات واجهة المستخدم الأمامية

تم النشر بتاريخ 2024-11-07
تصفح:209

 Frontend UI Components

iHateReading الريبو المخصص

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

مكونات مصنوعة لعدة أغراض

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

أنا حاليًا أعمل في مجال التكنولوجيا أو التكنولوجيا هي Reactjs جنبًا إلى جنب مع next.js كإطار عمل وأستخدم Tailwind CSS للتصميم و GSAP للرسوم المتحركة

يمكنني استخدام أي حزمة تقنية لا تمثل مشكلة، لذلك بدأت باستخدام أحدث إطار عمل واللغة هي Reactjs مع next.js

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

iHateReading عبارة عن منصة أنشأها أحد المطورين لمطور وعلى مدار العامين الماضيين كنت أشارك المدونات بالإضافة إلى النشرات الإخبارية على ihatereading.in.

هذا هو الوقت المناسب لتقديم بعض التغييرات الجديدة أو الميزات الجديدة مثل الريبو المخصص أو التعليمات البرمجية المخصصة أو أي شيء تريد تسميته، لاستعادة ما تعنيه هذه المنصة.

الآن نأتي مما تتكون هذه المكونات، جميع المكونات مصنوعة باستخدام الوحدات التالية

  1. Reactjs
  2. Tailwind CSS
  3. GSAP للرسوم المتحركة
  4. مكتبة واجهة مستخدم Mantine.dev (إذا لزم الأمر)

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

أثناء تطوير هذه المكونات، إذا رأيت المكون الأول الذي قمت بمشاركته على https://ihatereading.in/customrepo وقارنته بالمكون الجديد أو الأحدث، فيمكن للمرء بسهولة العثور على الفرق.

تبعيات أقل وجافا سكريبت أقل ومكونات تعليمات برمجية أكثر تحسينًا وقابلة لإعادة الاستخدام.

يعود الفضل كله إلى البحث والمدونة التي قمت بها العام الماضي، لماذا تقلل JavaScript من أداء موقع الويب؟ لأن المتصفح يستغرق الكثير من الوقت لتحليل JS مقارنة بـ CSS. وبالتالي فإن تقليل JS سيؤدي إلى تحسين أداء موقع الويب أيضًا.

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

تمت إضافة 40 مكونًا حتى الآن وأنا أعمل على المزيد، إذا كانت لديك أي فكرة عن نوع المكونات أو النماذج أو الأدوات التي يمكنني إجراؤها، فأضفها في قسم التعليقات، وسأتبع ذلك بالتأكيد.

أشارك بنشاط أخبار تطوير المكونات على Twitter وLinkedIn بالإضافة إلى نشر الكود على ihatereading.in/customrepo

لا تتردد في التحقق منها، واسمحوا لي أن أعرف ما يجب إضافته وإنشاءه.

هتافات
شري

بيان الافراج تم نشر هذه المقالة على: https://dev.to/shreyvijayvargiya/40-code-components-339e?1 إذا كان هناك أي انتهاك، يرجى الاتصال بـ [email protected] لحذفه
أحدث البرنامج التعليمي أكثر>

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

Copyright© 2022 湘ICP备2022001581号-3