Hossam Mohamed15

اظن ان الخطأ في استخدامك ل self.searjh بدلاً من self.search ومن ثم قم بتجربة هذا التعديل على دالة lambda (if x <= 90 else x 'ممتاز' :lambda x)

اشرح المشكلة بشكل اوضح واعرض لنا الناتج output

يمكن ان تكون المشكلة في شئ ما آخر. انصحك بمشاهدة هذه الفيديوهات

هنا يجب ان تكمل ال configuration الخاصة بالتطبيق بالنسبة لخطأ Application error ، فهذا بسبب ان heroku بحاجة إلى ملف procfile وبداخله اكتب web: node ./app.js .. لان هيروكو لا يعلم كيف يبدأ التطبيق، بعدها قم بعمل push على GitHub بالتعديل وتأكد انك مفعل Automatic deploy حتى يستطيع قراءة التعديلات على الrepo اول بأول. بالنسبة للخطأ الثاني invalid host header قم بانشاء ملف env.development. واكتب فيه HOST=name.herokuapp.com مع تغيير name باسم التطبيق

اجل سيصبح لكل واحد دومين منفصل .. يمكنك ان تبحث أيضاً عن ال sub domains وكيفية تطبيقها تمنياتي بالتوفيق

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

الخطأ هنا أنه بحاجة إلى ملف package.json في ملف الرووت، جرب رفع ال frontend في مشروع منفصل وكذلك ال backend، وتأكد من البناء الصحيح للملفات، وأظن ان هذا ما يجب اتباعه لأنه (إن لم اكن مخطئ) كل مشروع له ملف ال package.json الخاص به، وليس ملف واحد للfrontend وال backend. علق بسكرين شوت توضح تنظيم وبناء ملفات المشروع في ال root directory حتى نتمكن من مساعدتك.

هياكل البيانات او فيما يعرف بال Data structures هي طرق لتنظيم البيانات المستخدمة، وهي جزء من العملية البرمجية للتطبيقات او المواقع، بينما قواعد البيانات Databases تتعلق بتخزين البيانات وتسهيل الوصول إليها والتعديل عليها بشكل منظم وممنهج.

أصبح تعلم Typescript مطلوباً جداً في هذه الأيام، وخطوتك التالية هي تعلم Next.js وهي مبنية على ال React.js، لذا حاول دمج تعلمك لل typescript مع ال Next.js سيكون الأمر سلساً. من المهارات الجيد تعلمها أيضاً والمرتبطة بال React، ودائماً ما كنت الاحظها في إعلانات التوظيف هي Material UI و Tailwind. ويمكنك أثناء بحثك عن عمل ان تبدأ في عمل Clones او نسخ من المواقع المشهورة وخاصة مواقع التسوق الالكتروني E-commerce، بمعنى ان تتخيل انك في مشروع كبير حقيقي، ابدأ بمشاهدة فيديوهات ال clones على اليوتيوب، مثلاً اكتب في البحث Amazon Clone with Next.js . وأخيراً يجب عليك تعلم ال git و ال github لأنه أساسي في العمل مع أي فريق، ومطلوب بشكل أساسي في أي وظيفة، لذا انصحك باختيار صديق لك وأشركه معك في مشروع للتدرب على استخدام git وفهمه والتطبيق عليه جيداً. ويمكنك أن تتصفح خارطة الطريق Roadmap لما يحتاج ان يتعلمه ال Frontend Developer. ولا تنسى أن تتفقد إعلانات العمل على مواقع التوظيق المشهورة مثل Linkedin و indeed وقراءة وصف الوظيفة والمهارات المطلوبة، لأن المجال يتحدث باستمرار ومتابعة هذا التغير أصبح امرا ضرورياً. تمنياتي بالتوفيق

لو تحدثنا عن الأساسيات يمكن ان تستغرق المدة شهرين أو أكثر (مع التدريب وعمل مشاريع صغيرة) على حسب وقتك اليومي الذي تخصصه لهذا، الأهم ان تفهم المفاهيم الأساسية جيداً ولا تتعجل في انهاء فترة التعلم، لأن معظم عملك سيكون في إطار العمل، سأرسم لك خارطة طريق صغيرة بأهم المفاهيم التي يجب ان تركز عليها بعضها سهل وسريع الاستيعاب، وبعضها قد يستغرق منك وقتاً أطول : 1- Components تمثل الوحدة البنائية لأطر العمل والمكتبات وهذا ليس خاص ب react فقط .. فهمه وبناءه لن يكون صعباً. 2- JSX وهي عبارة عن أكواد html مدمجة داخل ملف الjs او الjsx. 3- Virtual DOM (نظري) يجب هنا فهم كيف تحسن React من سرعة واداء الموقع عبر استخدامها لل Virtual DOM. 4- State هي حالة المعلومات في تطبيقك التي تتغير عبر الوقت او اثناء حدث Event معين، وهذا مهم جداً وأساسي لبناء مكونات ديناميكية. 5- Props وهي تسمح لك بتمرير المعلومات بين component وآخر ، وهذه ميزة مهمة لتخصيص ال components وجعلها قابلة للاستخدام. 6- Lifecycle Methods وهنا يجب ان تفهم جيداً المراحل التي يمر بها ال component. 7- React Router يمثل حجر الأساس بناء تطبيقات الصفحة الواحدة SPA. 8- State Management تظهر أهميته كلما تعقد المشروع أكتر، وكثر عدد ال components، قد تواجه صعوبة في هذا الجزء حين تبدأ بالتعرف Redux او Context API ولكن مع التدريب الكافي ستتمكن من إتقانه. 9- Hooks لم تكن موجودة منذ البداية، وحين ظهرت سهلت الكثير من الأمور، وأعطت أهمية كبيرة لل Functional component، وأهمها (useState - useEffect - useContext - useReducer). 10 - Error Handling ولا تجعل هذا الأخير يخيفك كثيراً لأن React تجعل من تتبع الخطأ أمراً سهلاً. وأخيراً لا تقف بعد تعلمك لل React وتعلم بعدها إطار العمل NEXT js وهي مبنية على React، قد يصعب عليك فهم بعض المفاهيم الآن في المرحلة الحالية، لذا لا تفزع وخذ وقتك في التعلم. تمنياتي بالتوفيق

لاحظت أيضاً استخدامك للكلاس list في ال ul التي في ال footer .. قم بتغيرها هناك أيضاً للتوضيح : querySelector تعيد اول عنصر يطابق الselector الذي اخترته وكان في حالتك ال ul التي في الnav

اعتقد انك نسيت ان تغلق ال css rule في سطر 132 المنتجات تعرض بجانب الروابط في ال nav وذلك بسبب انك استخدمت نفس اسم الكلاس list على ال ul وعلى الdiv الذي يجب ان تظهر به العناصر .. قم بإزالة الكلاس list من ال ul التي في الnav ولاحظ الفرق. تمنياتي بالتوفيق

يمكننا تحقيق ذلك باستخدام دالة ()charAt الخاصة بال strings التي تخرج الحرف الموجود في الindex المحدد، مع دمجها بالدالة ()filter التي تعمل على فلترة ال array طبقاً للمعايير التي تريدها ومن ثم تخزينه في متغير جديد .. كهذا المثال، هنا نقول اننا نريد ان نفلتر الاسماء التي تبدأ بحرف a .. ولا تنسى استخدام ()toLowerCase .. حتى نحول الحرف الأول لحرف صغير 'a'. let friends = ["Ahmed","Ali","Samy"] let filteredFriends = friends.filter((friend)=> firend.charAt(0).toLowerCase() !== 'a' ) // console.log(filterFriends) ["Samy"]

هناك العديد من الطرق والمصادر الجيدة لمراجعة اساسيات جافاسكريبت ولكن الأحب إلى هو الكورس التفاعلي المجاني JavaScript Algorithms and Data Structures (Beta) ، على منصة FreeCodeCamp. وإن لم يكن لديك وقت فيمكنك المرور على أهم مفاهيم الجافاسكريبت من MDN. وأخيراً إن كنت تنوي الاستمرار في طريقك لبناء تطبيقات بالجافاسكريبت فانصحك بالتسجيل في دورة تطوير التطبيقات باستخدام لغة JavaScript ، لأكاديمية حسوب. تمنياتي بالتوفيق.

لتوضيح الفارق بين jQuery و المكتبات الحديثة ك React و Angular و Vue، علينا ان نفهم أولاً لم تم تطوير jQuery؟ تم تطوير jQuery بشكل أساسي لمساعدة المطورين في التلاعب وتعديل HTML document والتحكم في الEvents وكذلك إضافة التأثيرات الحركية(Animations) بسهولة، فما كان يتم تحقيقه بأسطر كثيرة قبل jQuery اصبح تحقيقه بعد تطويرها بسطر واحد أمراً هيناً. وحققت jQuery نجاحاً وإقبالاً كبيراً أثناء صدورها، ولكن مع تقدم تطور الويب والواجهات الأمامية، وضخامة المشاريع، ظهرت المكتبات الحديثة مثل React و Angular وحققت طفرة في تطوير الويب، وذلك لأنها تهتم بفعالية وسرعة تطبيقات الويب، فنجد ان بعض المكتبات مثل React تستخدم Virtual DOM لتحديث الاجزاء التي يحدث بها التحديث من التطبيق وليس كل التطبيق (على عكس jQuery التي تعدل في ال DOM مباشرة)، وهذا له تأثير على كفاءة وسرعة تطبيق الويب، ومكتبات أخرى ك Angular تستخدم ال Shadow DOM API الخاص بالمتصفح، لعزل الجزء (node) الذي يتم تحديثه عن باقي التطبيق، ومن ثم عدم إعادة تحديث التطبيق بأكمله ومدى تأثير ذلك على سرعة وجودة الموقع، ولهذا شرح يطول تفسيره إذا كنت مهتماً يمكنك الاطلاع على هذا المقال. ماذا أختار ِAngular ام React ام Vue ؟ اختيارك للمكتبة أو إطار العمل يمكن أن يتحدد بعدة عوامل، أهمها من وجهة نظري مكان العمل، فإذا كنت ستعمل مثلا بمصر، قم بعمل بحث بسيط على مواقع التوظيف، واختر المكتبة او اطار العمل الأكثر طلباً في الشركات، والجميل في الأمر أنك حين تتقن مكتبة ما، يصبح تعلم مكتبة أخرى والعمل بها أمراً سهلاً، لأن هناك تشابه في المفاهيم الأساسية بين المكتبات. وهنا يجب الإشارة إلى الفارق بين client side rendering و server side rendering وأهمية اختيار التقنية المناسبة قبل البدء بالمشروع، لذا انصح بقراءة هذا المقال.