محمد سعد شحرور

يمكنك حل مشكلة اللوجيك او المنطق عن طريق الممارسة وتعلم مهارة حل المشكلات. أي أنه عليك اتباع هذه النصائح، وأعدك بأنك ستجد تحسنا خلال فترة قصيرة: قم بمتابعة فيديوهات لأحد يقوم بحل المشاكل التي تحاول حلها، ومن ثم جرب وحدك. أي انك تستطيع مشاهدة أحد يشرح كيفيه تطوير todo-list في البداية لتفهم الفكرة بشكل عام، ومن ثم تجربتها وحدك. اذا كان لديك الوقت، قم بحل بعض المشكلات على code forces او leetcode او غيرها. بهذا تستطيع تطوير مهارة التفكير البرمجي وحل المشكلات، وهي مهارة تلزمك في أي مجال تختاره ضمن علوم الحاسوب! لا تتوقف! قم باتباع هذه النصائح دون توقف، فالاستمرارية هي مفتاح تعلم أي مهارة.

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

يمكنك بناء معظم الأفكار التي تريدها بدون اضافات وبدون برمجة بكل تأكيد، ولكن عليك احتراف الووردبريس من مصادر موثوقة مثل حسوب. هنا أحد المصادر التي تحوي مقالات ودورات تدريبية على منصة حسوب لكي تتابعها. مع ذلك، يجب أن أنوه أن تعلمك للغات html و css و php سينقلك الى مستوى اخر في wordpress، لأنه سيضيف الى حوزتك فهما عميقا للكيفيه التي تم بها بناء العناصر التي تستخدمها طوال الوقت، مثل العناصر والازرار والنصوص وغيرها. كما سيفتح ذلك الطريق لك لتستطيع تخصيص العناصر التي تستخدمها أيضا، وتعديها بحرية أكثر.

يمكنك كما أخبرك مصطفى وعبد الباسط، أن تستخدم ال intersection observer، ولكن يوجد طريقة أخرى فعالة جدا وسهلة الاستخدام، وهي الاستماع لحدث النزول او الصعود في الصفحة (scroll)، وجلب موقع العنصر الذي تريد، ومن ثم عند الوصول الى هذا العنصر يمكنك اضافة class او تنسيق معين تريده لكي يصبح العنصر active كما تريد: // العنصر الذي تريد ان تقوم بعمل اكشن معين عن الوصول اليه const targetElement = document.getElementById('yourElementId'); // استمع لخاصية التقليب في الصفحةـ صعودا ونزولا window.addEventListener('scroll', () => { // قم بحساب موقع العنصر في الصفحة const boundingBox = targetElement.getBoundingClientRect(); // اقحص اذا قد وصل المستخدم الى العنصر الذي حددناه if (boundingBox.top < window.innerHeight) { // قم باضافة ماتريد في حال تحقق الشرط، مثل اضافة تنسيق معين لتعيين حالة التفعيل console.log('Element is in the viewport!'); } });

هذه ليست مشكلة في الحقيقة، بل هي من أصل ال visual studio code لأنه لايدعم اللغة العربية. ليس هذا فحسب، بل أحيانا يتم فرض بعض القيود الأخرى بحسب الاستخدام، مثل منع الاحرف الكبيرة في الملفات عند بناء تطبيق قائم على next js مثلا او غيرها! بكل الأحوال تجنب تسمية الملفات باللغة العربية، وتجنب أيضا استخدام رموز أخرى غريبة مثل ":" او "*" او "<>" أو غيرها.

اشارة ال + قبل تابع ال prompt هي فقط لتحويل ماسيدخله المستخدم الى النوع number عوضا عن النوع string، وتخزينه في المتغير الذي عرفته day. أي أنه حتى لو أدخل المستخدم الرقم 4 مثلا، فانه سيخزن على أنه "4" في حال لم نستخدم ال +، ولكن باستخدام ال + سيقوم البرنامج بتخزين الرقم على أنه رقم عوضا عن نص. مع العلم أن تابع ال prompt لايستخدم الا نادرا في الحياة الواقعية. كما أن ادخال المستخدم لقيمة لايمكن تحويلها الى number سيعطي خطأ.

يمكنك التحكم بجهة العناصر وتنسيقها وترتيبها بواسطة عدة أوامر في ال CSS: أمر display: flex، ولتنسيق العناصر يمكنك تغيير قيمة ال justify content بما يناسبك. أمر display: grid، الذي يمكنك من أداء نفس الأمور الذي يتيحها لك ال flex ولكن بأوامر أخرى. أمر direction: rtl، الذي يسمح لك بتغيير جهة عرض العناصر الى الجهة من اليمين الى اليسار (عوضا عن من اليسار الى اليمن). ملاحظة: يفضل ادراج كل عنصر في <div></div>، لأنه من النوع block، وهذا سيسهل عليك التنسيق أكثر بكثير.

يمكنك تجربة هذه الطريقة صديقي: const mongoose = require('mongoose'); const pplModel = mongoose.model('Person', pplSchema); const uniqueIdentifier = "12345"; // Assuming you have connected to your MongoDB database const updatedFields = { "person.1.age": 40, "person.1.height": "5ft 8in" }; pplModel.updateOne( { "id": uniqueIdentifier }, { $set: updatedFields } ) ومع العلم أنه يمكنك تبديل ال updatedFields بال body الذي ستسقبله عند عملية ال PUT، لكي تصبح عملية التعديل ديناميكة ويتم تحديدها الحقول التي سيتم تعديلها عند كل طلب.

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

يمكنك ذلك بالتأكيد، وهذه بعض النصائح التي ستساعدك: لا تنس أن البرمجة بشكل عام قائمة على حل المشاكل، أي أنه سواجهك العديد من المشاكل وستجد الأمر صعبا بالبداية، ولكن هذه طبيعي لأن عملك قائم على حل هذه المشاكل. قم بالتخطيط للمشروع ومايلزمه من جداول او مستندات ضمن قاعدة البيانات قبل البدئ بالعمل. فكر بأي تطبيق على أنه عمليات Create, Read, Update, Delete. قم بانشاء endpoints معبرة عن الوظيفة التي تريدها لكل endpoint. اختبر العمل الذي قمت وقسمه فور الانتهاء كي يسهل عليك حل الاخطاء في حال وجدت.

الفرق بين هذه المستويات هو فقط الوصول المتاح للمتغيرات ضمن الكود الخاص بك. اليك الفرق التفصيلي بين هذا المستويات: Global Scope: هو المستوى الذي تقوم فيه بتعريف متغير يستطيع التطبيق بأكمله الوصول اليه، مثل وصول التابع لهذا المتغير هنا: var globalVariable = "global!"; function exampleFunction() { console.log(globalVariable); } Function scope: هو المستوى الذي تعرف فيه متغير ضمن تابع، ولايمكن الوصول اليه عدا في ذلك التابع: function exampleFunction() { var functionVariable = "local!"; console.log(functionVariable); } Block Scope: هو عندما تعرف متغيرا في block، لايمكن الوصول اليه الا في هذا ال block: if (true) { let blockVariable = "block-scoped!"; console.log(blockVariable); } ملاحظة: ال block في لغة Javascript هو أي شيء ضمن الأقواس المتعرجة {} ملاحظة أخرى: هذا المفهوم تم تقديمه ال ES6 باستخدام الكلمات المفتاحية let و const عوضا عن var.

بالتأكيد، اليك هذا التابع الذي سيقوم بهذه المهمة، وتفصيل الكود موجود كعليقات فوق كل سطر: function getTextBetweenLetters(text, firstLetter, secondLetter) { // قم بايجاد ترتيب الحرف الاول والحرف الثاني في البداية const firstIndex = text.indexOf(firstLetter); const secondIndex = text.indexOf(secondLetter); // تأكد ان كان هذين الحرفين موجودين فعلا if (firstIndex !== -1 && secondIndex !== -1) { // اذا كانو موجودين، قم بجلب النص بينهما وقم باعادته const result = text.substring(firstIndex + 1, secondIndex); return result; } else { // اذا كان أحد الحروف غير موجود قم بطباعة هذا النص وقم باعادة لا شيء console.log("One or both letters not found in the text."); return null; } } وهذا مثال على تطبيق التابع والنتيجة التي سيعيدها: // مثال عملي const inputText = "This is an example text."; const result = getTextBetweenLetters(inputText, "i", "e"); console.log(result); // Output: "s is an exampl"

الكود الخاص بك يقوم بتعريف تابع paginate في ال schema الخاصة ب mongoose. تقوم هذه الدالة بجلب قائمة مرقمة من الملفات documents الموجودة داخل ال collection الخاص بك في قاعدة البيانات mongo db، وذلك بناء على ال parameters. ال parameters هي: limit: عدد العناصر التي سيتم جلبا في الصفحة (ال default هو 10) page: رقم الصفحة التي سيتم جلبها، (ال default هو 1) sort: الترتيب، حيث 1 هي للتصاعدي، و -1 هي للتنازلي (ال default هو -1) where: الشرط الذي سيطبق عند جلب البيانات. بناء على هذه المتغيرات، يقوم التابع باعادة العناصر التي تم جلبها من قاعدة البيانات بعد ترقيمها، والعدد الاجمالي للصفحات.

في الحقيقة، مشكلة اعادة تحميل ال component في react هي ليست مشكلة، بل هي أمر متضمن بالمكتبة وينفذ by default في حالات معينة (ليس دائما). مع ذلك، يمكنك تحديث الحالة بطريقة صحيحة لتجنب حدوث ذلك، وهذه هي الطريقة: const [count, setCount] = useState(0); // تحديث الحالة الخاطئ const handleIncrement = () => { setCount(count + 1); }; // تحديث الحالة الصحيح const handleIncrement = () => { setCount(prev => prev + 1) } ال prev هنا هو الحالة السابقة لل state، أي أن العداد يبدأ عند القيمة 0، وعند التحديث يقوم بجلب هذا ال 0 ويزيد فوقه المقدار 1، مما يمنع اعادة تحميل ال component كله.

وعليكم السلام، أهلا بك صديقي. في البداية، الفرق بين خوارزميات ال bubble sort وال selection sort بشكل عام ليس بكبير، حيث أن الخوازرميتان تستخدمان لغايات تعليمية في الغالب، وكلاهما يملكان درجة تعقيد من الرتبة O^2، أي أنهما غير مناسبتان أبدا لترتيب بيانات ضخمة، وليستا فعالتان في التطبيقات العملية مثل غيرهما من الخوارزميات. أما ال sort التي تستخدم في python وغيرهها من اللغات، فهي في الحقيقة خوارزمية TrimSort الهجينة من عدة خوارزميات ترتيب أخرى، وهي رغم صعوبة فهمها، فهي أكثر كفاءة وسرعة من الخوارزميتين السابقتين ومرنة لترتيب البيانات الضخمة والصغيرة، لذلك هي مرشحة للاستخدام في التطبيقات العملية لسرعتها وكفاءتها.

عليك في هذه الحالة أن تبدأ بالتخطيط للمشروع بداية من ال backend الى ال frontend. أي أنه عليك أن تفكر بهيكلة البيانات وتصميم قاعدة البيانات ونوعها، والعلاقات بين الجداول او المستندات أيضا. عليك بعدها أن تفكر ال api الذي سيتم ارساله لمطور ال frontend. أي أنه يجب أن تسأل نفسك، ماهي العمليات التي سأطبقها على قاعدة البيانات؟ من هو المسموح بالقيام بهذه العمليات؟ ماهي ال endpoints التي سأختارها ليستخدمها مطور ال frontend، وغيرها الكثير. بعد ذلك يمكنك الانتقال الى ال frontend لتصمم الواجهات التي تريد على figma او غيره ان أردت، وبعدها تبدأ بكتابة الكود الخاص بهذه الواجهات. عليك أيضا أن لاتنسى اخذ البيانات من ال api وعد نسيان مسارات الصفحات المناسبة بناء على ال بنية المشروع وال endpoints الخاصة بالapi. يجب ايضا تحديد مكاتب ال frontend التي ستستخدمها في تصاميمك. هذه فقط الافكار الرئيسية التي يجب ان تكون في بالك عند البدء، وأعدك أنها ستساعدك جدا.

الكود الخاص بك يعمل بشكل جيد، ولكنه بحاجة بعض التنظيم. اليك بعض الملاحظات: يجب وضع جميع اكواد التصميم الخاصة بال css داخل </style><style> داخل ال </head><head>. يجب استخدام ال class عوضا عن ال id، وذلك لأن ال id يستخدم أكثر بكثير مع ال Javascript. لاداعي أبدا لوضع العنوان "THIS STYLE SHEET :" في المقدمة.

الحل الأفضل لحالتك ان لم ترد ان يتناسب مع حجم الشاشة هو اختيار عدد أحرف معين، وبناء عليه تختار حجم النص، رغم أن هذا غير شائع لأنه عليك عد الأحرف التي تريد واختيار قياس الشاشة أيضا: export default function Text(){ const mediaQuery = window.matchMedia('(max-width: 600px)'); const text = "the main text you want to be small if long enough" function handleMediaChange(mediaQuery) { let fontSizeClass if (mediaQuery) { if (text.length > 15) { // you can change this threshold fontSizeClass = "16px" // an example } else { fontSizeClass = "26px" // an example } } return fontSizeClass } mediaQuery.addListener(handleMediaChange); const finalFontSizeClass = handleMediaChange(mediaQuery); return ( <div style={{fontSize: finalFontSizeClass}}> {text} </div> ) }

برمجة مواقع الويب بلغة بايثون تتطلب مكاتب مثل Django, Flask, FastAPI وغيرها، أما المكاتب numpy و pandas فهي تستخدم في الغالب في علوم البيانات والذكاء الاصطانعي وتعلم الالة، وليس الويب. مكتبة numpy تستخدم في التعامل مع الارقام والعمليات الحسابية من البسيطة الى المعقدة، كالتعامل مع المصفوفات والأشعة مثلا. أما مكتبة pandas فهي تستخدم في التعامل مع البيانات بحد ذاتها، المجدولة منها في الغالب، و تنظيمها ومعالجتها واستخراج أقصى فائدة منها، وهو مايعرف ب Data Preprocessing و Data Cleaning. أرجو الانتباه الى أنه يمكنك ربط الباك ايند الخاص بك بخوارزميات او توابع مطورة بلغات أخرى تختلف عن اللغة التي استخدمتها في الباك ايند الخاص بك، حيث لا تستطيع أن تستخدم هذه المكاتب في لغات أخرى غير البايثون، ولكن يمكنك ربط جزء قمت بتطويره بهذه التقنيات مع موقعك الالكتروني بواسطة API مثلا، تعقيبا على سؤالك الثاني.

الأمرفي الحقيقة يتعلق بالمشروع ذاته والموارد المتوفرة لديك ومتطلبات المشروع ذاته. كما أنه من الممكن جدا أن تجد موقعا لايحتوي على واجهة خلفية على الاطلاق! كموقع ثابت (لايحتاج أي تحديثات) لعرض خدمات شركة وطرقا للتواصل معها على سبيل المثال. أو قد تجد موقعا يحوي واجهة أمامية بسيطة جدا، ولكنه خلف الكواليس يقوم بعمليات معقدة لجمع البيانات وتحديثها وما الى ذلك، كمواقع البورصة والذهب، أو مواقع استلام شهادات الطلاب مثلا. وان أردنا أن نشمل الحالة العامة، فانه يتم البدؤ بالواجهة الخلفية في معظم الاحيان لتخزين البيانات وتطوير ال API وما الى ذلك ليتم بعد ذلك تصميم الواجهات الأمامية وربطها فورا بالواجهة الخلفية لعرض البيانات عوضا عن استخدام بيانات وهمية، وذلك لتسريع عملية التطوير وتقليل عدد التعديلات وضمان تصميم بنية المشروع بشكل جيد ومدروس.

لايوجد اجابة صحيحة بالمطلق هنا، حيث أن القيمة الافتراضية لل state تعتمد كليا على نوع البيانات الخاص بك والسياق الذي تريده. سأعطيك بعض الأمثلة: بفرض لدينا form يحتوي على قائمة منسدلة للبلدان ليختار منها المستخدم، ففي هذه الحالة يجب اختيار أول خيار كقيمة افتراضية (اليمن) لأنه يمكن ان لايغير المستخدم القيمة الاولى الظاهرة لتبقى اليمن، فان كانت القيمة الافتراضية فارغة او null او undefinded، فانه لن يتم تخزين اليمن (القيمة الاولى الظاهرة) في حال لم يضغط المستخدم على الخيارات. const [country, setCountry] = useState("يمن") <select value={country} onChange={handleChange}> <option>اليمن</option> <option>سوريا</option> <option>مصر</option> </select> يمكن تعيين القيمة الافتراضية ل state معينة ك null او undefined لسهولة فحص ان كانت موجودة او لا، خصيصا عند التعامل مع API او مع بيانات قد يتم الحصول عليها او لا: const [data, setData] = useState(null) if (!data) { return <div>data is not fetched</div> } else { return <div>data is fetched</div> }

يقوم المتصفح بتحميل ملفات ال HTML أولا، ثم ملفات ال CSS، ومن ثم ملفات ال JavaScript، ولكن هناك بعض الملاحظات لوضعها في الحسبان: ترتيب تحميل ملفات ال JavaScript تعتمد على ترتيب ذكرها في ملف ال HTML، وهذا ضروري جدا لأن هذه الملفات متتابعة وقد تتعلق ببعضها البعض، مما يحدث عددا كبيرا من الاخطاء في حال تم تحميل هذه الملفات بترتيب خاطئ. بعض التقنيات والمكتبات الحديثة تقوم بترك أمر التحميل على ال server لتجنب التحميل على المتصفح واستخدام موارد المستخدم، مما يقدم سرعة أكبر وأداء أفضل، ولكنه يتم تحميل الصفحات على نفس الوتيرة حتى في هذه الحالة. لتقديم تجربة مستخدم أفضل، تقوم المتصفحات بتحميل ملفات ال Javascript بشكل غير متزامن، أي أنه يمكن للمتصفح أن يبدأ بجلب ملفات ال JS وتنفيذها في ذات وقت تحميل محتوى صفحات الويب (HTML و CSS)، عوضا عن انتظار اكتمال تحميل المحتوى بشكل كامل وبعدها البدء بجلب ملفات ال JS وتنفيذها.

الفرونت ايند هدفه هو عرض البيانات، والباك ايند هدفه هو تخزين البيانات وحمايتها. أما عن ربط الفرونت ايند بالباك ايند، فأنت بحاجة لوسيط بين القسم الخلفي (البيانات) والقسم الأمامي (واجهة المستخدم)، وأشهر وسيط مستخدم هو مايدعى API او مايعرف ب Application Programming Interface. يقوم مطور الباك ايند بتطوير هذا ال API لكي يسهل على المستخدم الوصول الى البيانات بعد تصميم بنيتها وتنظيمها بشكل مدروس، لكي يستطيع مطور الواجهات الأمامية عرضها بتصميم جميل يقدم تجربة جيدة للمستخدم. يتم تصميم ال API بناء على قواعد تدعى REST، قائمة على عمليات HTTP محددة مثل GET و POST و PUT و DELETE ليتم تطبيقها على الموارد (البيانات). أي أنك تستطيع بواسطة ال API المصمم بقواعد ال REST، أن تقوم بأخد بيانات أو اضافتها او تعديلها او حتى حذفها، وهذا بالضبط ماتقوم عليه معظم تطبيقات الويب التي تحوي على فرونت ايند وباك ايند سويا.

سأشرح لك الموضوع ببساطة جدا. انت تملك container يحوي content و navbar، مما يتيح لك استخدام هذه المساحة (600px) في أي شيء تريد، بشرط ان مكونات ال container مثل ال nabvar وال content لايتجاوزو ارتفاع 600px. احدى طرق الحل هي وضع ارتفاعات ال navbar وال content بما يتناسب مع العنصر الذي يحويهم (container)، ان كانت هذه الاقسام بال px او النسبة المئوية او غيرها. .nav { height: 60px } .content { height: 540px }

الفرق الرئيسي بين next build و next export هو في رفع المشروع للاستخدام. اذا كان موقعك الالكتروني ديناميكيا ويعتمد على مفاهيم ال server-side rendering و ال dynamic routes، فيجب عليك الرفع على استضافة من النوع serverless، وبالتالي استخدام next build قبل الرفع، وهذا في الحقيقة مايحصل عند الرفع على منصة vercel وغيرها. أما اذا كان موقعك الالكترني لايستخدم هذه المفاهيم، فالخيار الأفضل هو استخدام الأمر next export لتصدير الموقع الخاص بك على أنه موقع ثابت (HTML, CSS, JS).