Mustafa Suleiman

صحيح لا مشكلة، وعليك كتابة الاسم بشكل واضح للفئات بمعنى سيارة رياضية في الفئة الفرعية، ولا حاجة لأكثر من سهم لتوضيح الوراثة، الأفضل ربطهم بسهم واحد.

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

نسخة الـ ISO الخاصة بويندوز 7 غير متاحة بشكل رسمي على موقع مايكروسوفت لكون النظام تم إيقاف دعمه منذ سنوات، تستطيع تحميله من هنا: https://archive.org/details/en_windows_7_ultimate_with_sp1_x64_dvd_u_677332_202006 ثم الضغط على رابط ISO IMAGE التالي وسيتم التحميل: وبالنسبة لخطوات التثبيت على VIRUTAL BOX ستجدها هنا:

مناسب لا مشكلة به، لكن قم بتقسيمه إلى مراحل صغيرة جدًا كما أخبرتك من قبل هنا: فلا ضرر من البدء بمشروع الـ CRUD مباشرًة، فهو ليس بمشروع مُعقد، بل 4 مشاريع صغيرة مدمجة معًا، الصعوبة هي في ربطهم ببعضهم البعض لكي يعمل منطق المشروع بشكل سليم. وستحتاج إلى استيعاب التالي قبل تنفيذه: المتغيرات let, const. أنواع البيانات الأساسية Strings, Numbers, Booleans. كيفية إنشاء مصفوفة وكيفية إضافة وحذف عنصر كيفية إنشاء كائن واستدعاء خصائصه. كيفية كتابة واستدعاء دالة. أساسيات التعامل مع الـ DOM: document.querySelector() أو getElementById() لاختيار عنصر. addEventListener() للاستماع للأحداث (خصوصاً click و submit). element.value لقراءة القيمة من حقل إدخال. element.innerHTML أو textContent لتغيير محتوى عنصر. لو واجهت صعوبة قم بتنفيذ مشاريع أبسط وتم ذكرها في النقاش السابق بالأعلى.

منطق الكود ككل هو توفير واجهة بسيطة لإنشاء منتجات وحفظها محليًا، مع إمكانية عرض الإجمالي بشكل ديناميكي، أي مناسب لمشروع خاص بتطبيقات مثل إدارة المخزون أو قوائم المنتجات في متجر صغير. الجزء التالي ما هو إلا استخدام الـ DOM للوصول لعناصر معينة في الصفحة عن طريق المعرفات ID الخاصة بها، وبالطبع نستطيع الوصول عن طريق الكلاس وخلافه، وتخزين في متغيرات واستخدامها لاحقًا في الكود لقراءة القيم المدخلة من خلال خاصية .value أو تحديث محتوى العنصر من خلال .innerHTML أو تغيير تنسيقه كالتالي .style.background let title = document.getElementById('title'); let price = document.getElementById('price'); let taxes = document.getElementById('taxes'); let ads = document.getElementById('ads'); let discount = document.getElementById('discount'); let count = document.getElementById('count'); let category = document.getElementById('category'); let total = document.getElementById('total'); let btnCreate = document.getElementById('btnCreate'); والجزء التالي خاص بمنطق حساب الإجمالي اعتمادًا على القيم المدخلة في حقول السعر price، الضرائب taxes، الإعلانات ads، والخصم discount، وذلك لتوفير توضيحات فورية للمستخدم حول الإجمالي بناءًا على المدخلات، مع تحسين تجربة المستخدم من خلال تغيير الألوان. function getTotal(){ if(price.value != ''){ let result = (+price.value + +taxes.value + +ads.value) - +discount.value; total.innerHTML = result; total.style.background = 'green'; }else{ total.innerHTML = ''; total.style.background = 'red'; } } والجزء التالي لإدارة البيانات عن طريق التخزين المحلي في المتصفح localStorage وذلك لضمان استمرارية البيانات بين زيارات المستخدم حتى بعد إغلاق المتصفح، مع توفير تهيئة بمصفوفة فارغة في لم تكن هناك بيانات مخزنة مسبقًا. let dataPro; if(localStorage.product != null){ dataPro = JSON.parse(localStorage.product) }else{ dataPro = []; } والجزء المتعلق لإنشاء منتج جديد وحفظه عند النقر على زر الإنشاء الذي خزناه في متغير باسم btnCreate، ثم حفظ المنتج في التخزين المحلي. btnCreate.onclick = function(){ let newPro = { title: title.value, price: price.value, taxes: taxes.value, ads: ads.value, discount: discount.value, total: total.innerHTML, count: count.value, category: category.value } dataPro.push(newPro) localStorage.setItem('product', JSON.stringify(dataPro)) console.log(dataPro) } الأمر كله يعتمد على التلاعب بالـ DOM، ستتضح لك الكثير من الأمور بعد قراءة التالي:

شكل البيانات في التخزين المحلي يكون كالتالي: {"language":"python","recentProjects":[{"id":"174604085757497282027352","title":"Untitled Project","description":""}]} لاحظ عبارة عن كائن JSON ولكن البيانات في ذلك الكائن في شكل سلسلة نصية " " وsetitem هي لتخزين البيانات في التخزين المحلي للمتصفح، حيث تستقبل معاملين الأول اسم المفتاح key الذي نريده لتعيين مفتاح للوصول لتلك البيانات من أجل استردادها أي هي الـ value التي في الصورة، والمعامل الثاني هو البيانات نفسها لكن في شكل سلسلة نصية وذلك يتم من خلال JSON.stringify. ثم نستخدم دالة أو ميثود getItem من أجل استرداد تلك البيانات عن طريق اسم المفتاح الذي حددناه، ثم نقوم بتحويلها من شكل سلسلة نصية إلى كائن جافاسكريبت تفهمه اللغة عن طريق JSON.parse لكي نصل للخواص التي به والتي تحمل القيم. قم بتجربة التالي لتفهم ما أقصد: <!DOCTYPE html> <html> <head> <title>Local Storage</title> </head> <body> <h1>Local Storage Example</h1> <button onclick="saveData()">Save Data</button> <button onclick="getData()">Get Data</button> <p id="output"></p> <script> function saveData() { localStorage.setItem('username', 'Ali'); const user = { name: 'Ali', age: 25, city: 'Cairo' }; localStorage.setItem('userDetails', JSON.stringify(user)); document.getElementById('output').innerText = 'Data saved successfully!'; } function getData() { const username = localStorage.getItem('username'); const userDetails = JSON.parse(localStorage.getItem('userDetails')); let output = `Username: ${username}\n`; if (userDetails) { output += `Name: ${userDetails.name}, Age: ${userDetails.age}, City: ${userDetails.city}`; } else { output += 'No user details found!'; } document.getElementById('output').innerText = output; } </script> </body> </html>

غير صحيح، الحل الأبسط كما وضحت هو تصحيح ترتيب دمج قوائم الأسماء لتتطابق مع ترتيب المحولات في ColumnTransformer. features_names = numeric_features + text_features

التخزين المحلي في المتصفح لا يقبل سوى النصوص بمعنى قيمة مثل التالي "نص" أي لا يمكنك أن تضع به مباشرة أشياء معقدة مثل كائن في جافاسكريبت، والذي يحتوي على معلومات منظمة. أي التالي: let user = { name: "أحمد", age: 30, isStudent: false }; ذلك كائن، وليس "نص"، ولو حاولت تخزينه مباشرة في الصندوق سيفشل الأمر أو سيخزن قيمة غير مفهومة مثل [object Object]. لذا نستعمل ميثود stringify من كائن JSON الخاص بعمليات Json، والتي تعمل على تحويل الكائن الذي نمرره إلى نص طويل ومسطح لتخزينه في التخزين المحلي بالمتصفح، ثم نستخدم ميثود setItem لتخزينه في التخزين المحلي: let userText = JSON.stringify(user); localStorage.setItem('userData', userText); لاحظ كيف أصبح الآن نصًا عاديًا محاطًا بعلامات اقتباس مفردة: '{"name":"أحمد","age":30,"isStudent":false}' وعند استرجاع تلك المعلومات نستخدم ميثود getItem: let storedText = localStorage.getItem('userData'); ثم سنحتاج إلى عملية عكسية، أي تحويل النص الذي حصلنا عليه من التخزين المحلي ونعيده إلى كائن مرة أخرى باستخدام JSON.parse. let userObject = JSON.parse(storedText);

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

المشكلة في عدم التطابق في ترتيب الأعمدة بعد تحويلها بواسطة ColumnTransformer مع ترتيب أسماء الأعمدة التي تقوم بإنشائها يدويًا، أسهل حل هو عكس ترتيب دمج قوائم الأسماء لتصبح الأعمدة الرقمية أولاً. features_names = numeric_features + text_features لكن الأفضل بدلاً من إدارة ترتيب الأعمدة يدويًا، الإعتماد على scikit-learn لتوليد أسماء الأعمدة الناتجة تلقائيًا من خلال get_feature_names_out()، بالتالي ستتجنب الأخطاء في حال قمت بتغيير ترتيب المحولات فيما بعد. df_transformed_array = preprocessor.fit_transform(data) new_columns = preprocessor.get_feature_names_out() وللعلم get_feature_names_out() تضيف بادئات مثل num__ و text__ وبإمكانك إزالتها لو أردت كالتالي: data_processed.columns = [col.split('__')[-1] for col in data_processed.columns]

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

لا مشكلة، فذلك المجلد هو المساحة الوحيدة التي لديك صلاحية الكتابة فيها بحرية في بيئة Kaggle، وبه مساحة محدودة حوالي 20 جيجابايت، وأحيانًا أثناء التطوير ستقوم بإنشاء ملفات كبيرة، مثل حفظ نسخة من النموذج بعد كل فترة تدريب وذلك يستهلك مساحة كبيرة بسرعة. أو ملفات تنتج عن معالجة البيانات الأولية قبل استخدامها في التدريب أو تنشئ عدة إصدارات من ملف التقديم Submission لتجربة أفكار مختلفة. أسرع طريقة هي بتنفيذ أمر rm لحذف الملف: !rm /kaggle/working/data.csv أو مجلد: !rm /kaggle/working/data وتستطيع تفقد محتويات تلك المساحة عن طريق الأمر لعرض الملفات والمجلدات الحالية به: !ls -l /kaggle/working/ ولو أردت برمجيًا فسيتم من خلال shutil.rmtree

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

في البداية ذلك طبيعي لا مشكلة به، ولا تتوقع أن تقوم بتنفيذ مشروع كامل دفعة واحدة ما لم تتدرج في التطبيق العملي، بمعنى تصعد السلم درجة درجة وليس القفز، وللعلم ذلك يسمى فخ الدروس التعليمية أو Tutorial Hell، بمعنى أنت تعرف أساسيات اللغة أو الأدوات (المتغيرات، الحلقات، الدوال، الشروط)، ولكنك لا تعرف كيف تبني بيتًا باستخدامها. ولديك مشكلة في مهارة تجزئة المشكلة وهي المهارة الأهم في البرمجة، فعند رؤية مشروع تطبيق إدارة مهام مثلاً، عقلك يراه ككتلة واحدة ضخمة ومخيفة، الصحيح أن تراه كمجموعة من المشاكل الصغيرة جدًا والقابلة للحل. والبدء من الصفر أمر مرعب في البداية للبعض، فالدروس التعليمية توفر هيكل أو قالب جاهز تسير عليه خطوة بخطوة. يجب تخطي ذلك الحاجز شيئًا فشيئًا، أولاً تعلمت الأساسيات لنقم بالتطبيق عليها بتمارين بسيطة، قمت بذلك؟ جميل، بعدها مشاريع صغيرة متدرجة الصعوبة. أولاً مولد اقتباسات العشوائية للتدرب على التعامل مع الـ DOM والأحداث، المطلوب هو صفحة تحتوي على اقتباس وزر. عند الضغط على الزر، يظهر اقتباس عشوائي جديد. المشروع الثاني هو عداد الأحرف من خلال حقل نصي <textarea> يعرض للمستخدم عدد الأحرف التي كتبها بشكل مباشر. المشروع الثالث تغيير لون الخلفية بشكل عشوائي عن طريق زر عند الضغط عليه، تتغير خلفية الصفحة إلى لون عشوائي. بعدها قم بتطبيق مشروع إدارة المهام. وللتوضيح، ستقوم بالتفكير في المشروع أولاً قبل تنفيذه، بالتطبيق على المشروع الأول، فكر به ككل أولاً فعقلك سيرى واجهة بسيطة بها مكان لعرض الاقتباس، ومكان لعرض اسم القائل، وزر به كلمة اقتباس جديد لتوليد اقتباس آخر. بعدها تبدأ بالتجزئة، وأولاً التجزئة الوظيفية أي ماذا سيفعل التطبيق أو المشروع، كأننا نصف التطبيق لمستخدم عادي، كالتالي: يعرض المشروع اقتباس مبدئي، عندما تفتح الصفحة لأول مرة، يجب أن يظهر اقتباس ما. عندما يضغط المستخدم على زر "اقتباس جديد"، يجب أن يتم استبدال الاقتباس الحالي باقتباس آخر عشوائي. بعدها التجزئة التقنية وهي كيف سنبني كل وظيفة؟ علينا إذن ترجمة الوظائف السابقة إلى مكونات تقنية HTML, CSS, JavaScript. في هيكل الصفحة HTML ما هي العناصر التي أحتاجها على الشاشة؟ ستكتب التالي: حاوية رئيسية (div) لتنظيم كل شيء في المنتصف وإعطائه شكل بطاقة. عنصر لعرض نص الاقتباس، من الممكن أن استخدم فقرة <p> أو عنصر اقتباس <blockquote>، وسأعطيه id مميز مثل quote-text لأجده بسهولة. عنصر لعرض اسم القائل من خلال فقرة صغيرة <p> أو <span> وسأعطيه id مميز مثل quote-author. زر لتوليد اقتباس جديد بواسطة عنصر زر <button>) وسأعين له id مميز مثل new-quote-btn. بالنسبة لخطوة لتنسيقات قم بتأجيلها حتى النهاية للتركيز على الأهم. بالنسبة لمنطق التطبيق وهو الأهم من خلال جافاسكريبت، بعد التفكير من المفترض أن تتوصل لبعض أو كل التالي: [JS - Data] في ملف script.js، سأنشئ مصفوفة من كائنات الاقتباسات. [JS - DOM] ساختار عناصر HTML الثلاثة (نص الاقتباس، القائل، الزر) وأخزنها في متغيرات. [JS - Logic] ساكتب دالة generateQuote التي: تختار رقماً عشوائياً. تستخدم الرقم للحصول على اقتباس من المصفوفة. تُحدث محتوى عناصر HTML (النص والقائل) بالاقتباس المختار. [JS - Event] سأضيف addEventListener للزر ليستدعي دالة generateQuote عند النقر عليه. [JS - Initial] ساستدعي دالة generateQuote() مرة واحدة في نهاية الملف لتعيين الاقتباس الأول. بالطبع كل جزئية بها تفاصيل، أي عند العمل على ما سبق قم بتجزئته إلى أجزاء أصغر واعمل على حلها، مثلاً جزئية تختار رقماً عشوائياً كيف ستقوم بحلها؟ فكر أولاً ثم البحث ثم تستطيع السؤال للحصول على مساعدة لو واجهت صعوبة. عامًة المنطق الذي ستتوصل إليه هو: أحتاج إلى رقم عشوائي بين 0 وطول المصفوفة ناقص واحد. سأستخدم Math.random() لتوليد رقم بين 0 و 1. سأضربه في طول المصفوفة quotes.length سأستخدم Math.floor() لأحصل على عدد صحيح لأنه يمثل فهرس index المصفوفة. بعد أن يعمل منطق المشروع بشكل سليم، فكر في التنسيقات، اجعل الأمر بسيط أنشئ ملف style.css لتوسيط المحتوى وتنسيق بسيط للنصوص والزر.

جزئية حتى أراه وافهم شرحه بحاجة إلى توضيح، هل المقصود رؤية تصميم للمشروع مثلاً أي رؤية كيف يبدوا شكله؟ واستيعاب المطلوب؟ أم تحتاج إلى شرح كامل لما عليك فعله؟

لا يُفترض أن يكون فارغ قمت بتحميل مجلد المشروع الخاص بك هنا وتنفيذ أمر البناء: npm run build وتم التحزيم وتجهيز المشروع للنشر كالتالي: لاحظ المجلد ليس فارغ وجاهز للنشر، حاول إعادة تنفيذ أمر البناء مرة أخرى وأنت في مسار مجلد المشروع في منفذ الأوامر.

أرجو تفقد طلبات الشراء: https://academy.hsoub.com/clients/orders/ وأيضًا إدارة المشتريات: https://academy.hsoub.com/clients/purchases/ ما هي الحالة الخاصة بعملية الشراء؟ أحيانًا الأمر يستغرق بعض الوقت لمعالجة عملية شراء الدورة، وسيظهر لكِ بعدها تبويب دوراتي وعند الضغط عليه يظهر الدورة التي اشتركتي بها: أرجو الإنتظار لبعض الوقت، في حال استمرت المشكلة تستطيعي مراسلة مركز المساعدة

عليك تحديد هدفك من تعلم الإطار؟ هل تريد أن تصبح Full-Stack أو مطور واجهة خلفية فقط؟ وأقصد بـ Full-Stack هو تطوير الواجهة الأمامية والخلفية معًا، أي تنفيذ المشروع بالكامل، وذلك ما أنصحك به في البداية ثم يمكنك التخصص. عامًة Django هو إطار واجهة خلفية بالمقام الأول، أي يسمح لك بإنشاء الخادم والـ API's والتعامل مع قاعدة البيانات، وكذلك يدعم Full-Stack بمعنى يوجد به محرك قوالب تستطيع من خلاله ربط الواجهة الخلفية الخاصة به بالواجهة الأمامية عن طريق القوالب. ولن تتمكن من استيعاب إطار بوتستراب بدون استيعاب أساسيات CSS بشكل جيد والتطبيق عليها، بعد ذلك تنتقل لتعلم الإطار واستيعاب آلية عمله وستجد أن تتذكر الكثير من الكلاسات بكل سهولة. بمعنى كلاس d-flex يأتي من display: flex، وكلاس m-3 يأتي من margin الهامش، والرقم 3 يمثل مستوى معين من الهامش. وكلاس bg-primary يأتي من background-color أي لون الخلفية، و primary تشير إلى اللون الأساسي، وهكذا، وستجد توضيح هنا للكلاسات. https://wiki.hsoub.com/Bootstrap/extend كذلك ستحتاج إلى تعلم أساسيات HTML و جافاسكريبت.

الأفضل إرجاء React Native إلى النهاية تمامًا، فتخصص الإطار هو تطوير تطبيقات الهاتف، وحاليًا تركيزك على تعلم تطوير الويب، لذا عليك بالاستمرار في ذلك وتعلم ما تحتاجه وهو Typescript لكن قبل ذلك هل تعمقت في جافاسكريبت لبعض الوقت؟ فالعبرة ليست في الإنتقال من تقنية لأخرى وتعلم القشور منها، بل في إتقانك للأساسيات بشكل نسبي ثم تعلم تقنية معينة مثل React أو Vue.js والاستمرار لبعض الوقت من خلال JS ثم تستطيع تعلم Typescript. وإن لم تتمكن من جافاسكريبت، فلن تتمكن من فهم TypeScript بشكل عميق، وستواجه صعوبة في فهم الأخطاء التي تظهر لك، أي هل هي مشكلة في منطق الجافاسكريبت أم مشكلة في أنواع البيانات الخاصة بـ TypeScript؟ أي الأفضل التقليل من الحمل المعرفي أو Cognitive Load وذلك مبدأ في علم النفس يعني كمية الجهد الذهني الذي يحتاجه دماغك بالإعتماد على الذاكرة قصيرة المدى لمعالجة معلومات جديدة في وقت واحد. أي تخيل دماغك مثل الـ RAM في جهاز الكمبيوتر، لو حاولت تشغيل 10 برامج ثقيلة ومعقدة في نفس الوقت، سيبطئ الجهاز، ويتجمد، وربما يتعطل، ودماغك يعمل بطريقة مشابهة. فبمحاول تعلم العديد من المفاهيم الجديدة والمعقدة دفعة واحدة، تزيد الحمل المعرفي عليه.

واقع الحياة أمر مختلف عن النصائح العامة، فلو أنت شخص لديه وقت فراغ كبير الأفضل الاستفادة منه في التعلم، وكذلك لو أنت شخص تريد الحصول على وظيفة عما قريب ستحتاج إلى بذل جهدك وليس توفير الوقت، وأمور أخرى حسب ظروف كل شخص تقتضي عدم إهدار وقت متاح. مجال البرمجة ليس بالسهل ويحتاج إلى وقت وممارسة وإلتزام خاصًةفي البداية حيث تكون الأمور ضبابية، ومع الوقت وبذل الجهد تتضح الرؤية ويسهل الأمر شيئًا فشيئًا، لو سألتني فلا مشكلة في قضاء 10 ساعات يوميًا وأنت تدرس ذلك طبيعي من وجهة نظري، وبعد فترة 6 أشهر تستطيع خفض تلك المدة لمُعدل صحي حسب طبيعة الحياة الخاصة بك. هل سيتأثر جسدك؟ بالطبع سيتأثر، لذا حاول ممارسة أي نشاط لمدة ربع ساعة يوميًا سواء تمارين الضغط أو التشمية قليلاً أو أي شيء، وضع ما تريد من الخطوط أسفل حاول، ولا أنصحك بتجاهل ذلك، فله أثره الواضح على المدى البعيد، ولا تنسى الصلاة في حال كانت جزء من حياتك. كذلك الأفضل تخصيص يوم إجازة لا تقترب به من الحاسوب، لكي تعود نشيط الذهن وتجنب الملل.

لست بحاجة إلى تعلم الـ SEO بشكل مُتعمق، ما يلزمك هو الجانب التقني منه وذلك يسمى technical SEO وهو كل ما تفعله لمساعدة محركات البحث مثل جوجل على الزحف إلى موقعك، فهمه، وفهرسته بكفاءة، وذاك أساس أي استراتيجية SEO ناجحة، بالتالي لو الأساس ضعيف فكل جهود المحتوى والروابط الخارجية لن تحقق أقصى فائدة. ستحتاج إلى البحث وتعلم الأمور التالية: robots.txt XML Sitemap Canonical Tags سرعة وأداء الموقع وذلك يشمل Core Web Vitals والتي تحتوي على LCP وFID وCLS، كذلك سيتعين عليك تعلم كيفية تحسين الصور للـ SEO وتطبيق Lazy Loading عليها، بجانب TTFB. هيكلة الموقع وبنية الروابط أو Site Architecture و URL Structure التصميم المتجاوب للموقع تفعيل HTTPS والتعامل مع أكواد حالة HTTP ومنها301 Redirects باستخدمها لإعادة توجيه الروابط القديمة إلى الجديدة بشكل دائم، و404 Not Found بإنشاء صفحة 404 مخصصة ومفيدة توجه المستخدمين إلى أجزاء أخرى من الموقع، وكذلك تجنب أخطاء الخادم 5xx بأي ثمن.

غالبًا لديك مشكلة في المسار، يجب أن يكون اسم الملف هو image.jpg تمامًا كما كتبته، لو الاسم Image.jpg بحرف I كبير أو image.JPG، فلن يعمل المسار، وللعلم أنظمة التشغيل مثل ويندوز لا تفرق بين الحروف الكبيرة والصغيرة، لكن سيرفر التطوير والخوادم الحقيقية تفرق. أيضًا يجب أن يكون الملف موجود مباشرة داخل مجلد src/assets. في حال استمرت المشكلة، اضغط Ctrl + C لإيقاف السيرفر في نافذة الـ Terminal، ثم أعد تشغيله مرة أخرى باستخدام الأمر npm run serve. والأفضل بدلًا من وضع المسار مباشرة في الـ CSS، هو استيراد الصورة في جزء الـ <script> ثم نربطها كـ style مباشرة على العنصر، وذلك من خلال import، حيث أداة البناء Webpackأو Vite تفهم أن الملف يجب معالجته، فتقوم بنسخه إلى مجلد البناء النهائي dist وتعطيك المسار الصحيح والنهائي له، وذلك يمنع حدوث أي مشاكل في المسارات. كالتالي: <template> <div class="my-main" :style="{ backgroundImage: 'url(' + imageUrl + ')' }"> </div> </template> <script> import imageFile from '@/assets/image.jpg'; export default { name: 'MyMain', data() { return { imageUrl: imageFile } } } </script> <style lang="scss" scoped> .my-main { width: 100%; min-height: 400px; background-size: cover; background-position: center; } </style>

JS لغة خاصة بالويب أو ذلك ما كانت عليه في باديء الأمر، حاليًا يتم استخدامها في كل شيء تقريبًا، لكن هي ليست من اللغات القوية فيما يتعلق بالاستقرار وتجنب الأخطاء، بسبب عدم وجود معمارية صارمة بها لفرض أنواع محددة للبيانات عند تعريفها، أو حتى التحقق منها وفرض نوع معين للبيانات عند تشغيل المشروع، فأثناء تشغيل المشروع تحدث أخطاء غير متوقعة بسبب عدم توفر ذلك. وفي المشاريع الكبيرة التي يعمل عليها فريق، يصبح الكود المكتوب بـ JS معقدًا وصعب الفهم، أي بدون TS فأي مبرمج جديد ينظر إلى دالة مثل processData(data)، سيتساءل ما هو شكل data؟ هل هو كائن object؟ ما هي خصائصه؟ هل هو مصفوفة array؟ أم رقم؟ سيضطر لقراءة الكود بالكامل أو تتبعه ليفهم. بالتالي منذ سنوات قليلة أصبحت TS هي اللغة الأساسية لتطوير مشاريع جافاسكريبت، ومتوقع منك أن تكون متقن لها بنسبة جيدة. ستجد تفصيل هنا:

Vue قادر على بناء أي شيء يمكن لـ React بناؤه، إذن الفارق ليس في القدرة الأساسية للإطار أو المكتبة نفسها، بل في مدى اتساع وعمق النظام البيئي أي الـ Ecosystem المحيط به، بمعنى المكتبات المتوفرة وحجم الدعم. بالطبع يوجد مكتبات ودعم أكبر في بيئة React، وستجد الكثير من الحلول للمشاكل التي تواجهها، فلأي مشكلة أو ميزة تتخيلها، غالبًا ما ستجد مكتبة موثوقة ومدعومة جيدًا، بينما في Vue ستجد حلولًا لمعظم المشاكل الشائعة، لكن ليس بنفس التنوع أو درجة النضج في بعض المجالات المتخصصة جدًا، وأحيانًا ستضطر إلى بناء مكون بنفسك أو الاعتماد على مكتبة أقل شهرة، لذا الأمر يعتمد على نوع المشروع. بجانب وجود إطارات متنوعة تعتمد على React بالتالي يوجد الكثير من الخيارات، بدءًا من Next.js وهو الأشهر، بالإضافة إلى Gatsby وRemix. وبالرغم من وجود Nuxt.js وهو المنافس المباشر لـ Next.js وهو ممتاز وقوي للغاية ويقوم بنفس الوظائف (SSR, SSG, etc) بشكل جيد، لكن لا يوجد نفس التنوع السابق. أيضًا أدوات إدارة الحالة State يوجد خيارات أكثر بكثير في بيئة React، بينما Vue لديك Pinia وهو الحل الرسمي الحالي وقوي جدًا وممتاز. كذلك يوجد React Native لبناء تطبيقات الهواتف، وستتمكن من خلاله من إعادة استخدام كود React الذي كتبته لتطبيق الويب. ولا يوجد حل رسمي من فريق Vue لتطوير تطبيقات الهاتف، والبدائل موجودة ولكنها ليست بنفس القوة أو الشعبية، حيث يوجد NativeScript-Vue وهو حل جيد لاستخدام Vue لبناء تطبيقات Native، لكن مجتمعه أصغر ودعمه أقل من React Native.

في الواقع العملي الأمر ليس شعارات، بمعنى تطبيق Vue مبني بشكل جيد ومعمارية سليمة سيكون دائمًا أفضل من تطبيق React مكتوب بشكل فوضوي، والعكس صحيح، أي المبرمج ومنهجية العمل أهم من الأداة نفسها. وتستطيع بناء مشاريع كبيرة من خلال Vue.js لا مشكلة، لكن الأمر يعتمد على متطلبات المشروع، أي لو المشروع يعتمد على مكتبة أو حل معين لا يتوفر إلا في بيئة React فستقوم بالتطوير من خلالها، كذلك عند تطوير مشروع يتم الأخذ في الإعتبار مدى توفر مبرمجي React أو Vue في سوق العمل المحلي وبالطبع React لها النصيب الأكبر، لذا لبناء فريق كبير سيكون هناك حاجة إلى سهولة في التوظيف، بالتالي يتم اللجوء إلى React. كذلك لو هناك حاجة لتطوير تطبيق للهواتف باستخدام نفس الكود، فيوجد React Native هو الحل الأقوى لو أردت تطوير تطبيق هاتف من خلال جافاسكريبت. أو في حال المشروع بحاجة إلى Next.js. وللعلم Vue شائع جدًا استخدامه في الصين وآسيا ويزداد اعتماده في أوروبا والشرق الأوسط، لديك مثلاً Alibaba يعتمد على Vue.