مجتمع المبرمج العربي ـ قناه

7 تقنيات تحتاج استخدامها كمطور واجهات أمامية (front end) 👌 تطوير الواجهات الأمامية للويب هو أحد المجالات البرمجية المهمة والمطلوبة بكثرة في سوق العمل، ويتطلب العمل فيه معرفة جيدة بالعديد من المفاهيم والتقنيات، من أهمها: 1⃣ تعلم HTML و CSS و جافا سكريبت فهي اللغات الأساسية في تطوير الويب، وعليك فهمها جيدًا قبل تعلم أي تقنية أخرى 2⃣ التصميم المتجاوب Responsive Design هناك العديد من الأساليب التي تمكننك من جعل مواقع الويب متجاوبة وتظهر بشكل مناسب على مختلف أحجام الشاشات وأنواع الأجهزة مثل استعلامات الوسائط media queries والنقاط الحدية Breakpoints وطرق تخطيط الصفحات المختلفة كالتخطيط الشبكي والمرن. 3⃣ مكتبات وأطر عمل تطوير الواجهات الأمامية تتوفر العديد من مكتبات وأطر الواجهة الأمامية التي توفر لك مكونات وشيفرات برمجية جاهزة تسهل عليك إنشاء صفحات ويب معقدة وتساعدك على اتباع أفضل الممارسات في كتابة شيفراتها مثل بوتستراب Bootstrap للغة CSS ورياكت React للغة جافا سكريبت. 4⃣ واجهات برمجة التطبيقات APIs يحتاج مطورالواجهة الأمامية لتعلم طريقة التعامل مع واجهات برمجة التطبيقات وبيانات JSON للحصول على المعلومات من الخادم ودمجها مع واجهات المواقع والتطبيقات. 5⃣ برامج التحكم بالإصدارات Git و GitHub فهي برامج تفيد أي مطور للتعامل مع التغييرات المستمرة على الأكواد البرمجية، وتنظم عمله وتعزز تعاونه مع المطورين الآخرين. 6⃣ أدوات البناء Build tools تساعد أدوات البناء مطور الواجهة الأمامية على إدارة التبعيات وتنظيم العمليات وتحسين الكود البرمجي وتسريع تطويره وصيانته ومن الأمثلة عليها نذكر Vite و Webpack. 7⃣ تحسين أداء المواقع من المفيد أيضًا استخدام أي تقنيات من شأنها تحسين وتسريع صفحات الموقع وتحسين الصور وتحميلها بشكل كسول lazy loading واستخدام التخزين المؤقت وتقليل حجم الشيفرة البرمجية المستخدمة فيها. إذا كنت مهتمًا بتعلم تطوير الواجهات الأمامية للويب وتبحث عن مصدر موثوق لتعزيز مهاراتك، فستزودك دورة تطوير الواجهات الأمامية من أكاديمية حسوب بكافة التقنيات التي تحتاجها 👌

مرحباً 👋🏼 الشرح بيكون طويل بس مهم 💯✅ يلا نبدأ: الفرق بين إستخدام الـ [index] أو إستخدم elementAt(index) للوصول لعنصر معين داخل List بدلالة ال Index تبعه. الطريقتين بيوصلوا لنفس النتيجة، ولو بدلت بينهم في الكود ما بتلاقي فرق، لكن من داخل فيه فرق رهيب في الأداء بين الاثنين. ال elementAt(index) هذي Function تبع Class في فلاتر اسمه Iterable، هذا الكلاس خاص بأي حاجة ممكن أعمل عليها Iteration داخل فلاتر زي الـ List والـ Set، ولإنه داخل في تركيب أشكال كثير، فبالتالي ال Functions تبعه بتكون عامة مش متخصصة لنوع معين من Data Structure، عشان كذا الـ Function تبع elementAt(index) عامة على كل الأنواع، فبتعتمد إن هي بتقعد ت Iterate "تعد" من صفر لحد ال Index اللي انت طلبته وتجيبه لك. يعني لو عندك List فيها عشر آلاف رقم، وانت طالب الرقم الأخير فيها، بتحتاج تمشي على العشر آلاف رقم كلهم عشان بس تجيب لك الرقم اللي انت طلبته! في حين [index] هذا Operator خاص بالـ List نفسها، بيستخدم خصائصها في إنه يعمل Constant Accessing لأي Index انت بتطلبه. على نفس المثال اللي الاول عندنا 10 آلاف رقم واستخدمت ال [] عشان أوصل للرقم الأخير بتروح تجيبه مباشرةً في عملية واحدة بس بدل 10 آلاف عملية. الخلاصة: أستخدم[index] للوصول للبيانات اللي انت محتاجه، بدلاً من elementAt(index).