Mustafa Suleiman

مرحبًا مصطفى، أرجو منك في المرة القادمة وضع السؤال أسفل فيديو الدورة الخاص بالسؤال. إذا كنت قد فهمت سؤالك بشكل صحيح، يمكن التحدث إلى الخادم باستخدام Node.js باستخدام مكتبة Node.js الأساسية للاتصال بخوادم HTTP والتي تسمى "http". يمكن استخدام الكود التالي للاتصال بخادم HTTP وإرسال طلب GET: const http = require('http'); // خيارات الطلب const options = { hostname: 'example.com', port: 80, path: '/path/to/resource', method: 'GET' }; // إنشاء الطلب const req = http.request(options, (res) => { console.log(`statusCode: ${res.statusCode}`); res.on('data', (d) => { process.stdout.write(d); }); }); // إدخال خطأ مقبول في الطلب req.on('error', (error) => { console.error(error); }); // إرسال الطلب req.end(); سيقوم الكود بإنشاء طلب GET إلى موقع example.com/path/to/resource على البورت 80. سيتم استجابة الخادم ببيانات الاستجابة التي يمكن أن يتم تجاهلها أو معالجتها باستخدام res.on ('data') ثم طباعتها على الإخراج القياسي باستخدام process.stdout.write(d). بالإضافة إلى ذلك، يمكن استخدام مكتبات Node.js الخارجية مثل Axios أو Request لإرسال طلبات HTTP. على سبيل المثال، يمكن استخدام مكتبة Axios باستخدام الكود التالي: const axios = require('axios'); axios.get('http://example.com/path/to/resource') .then((response) => { console.log(response.data); }) .catch((error) => { console.error(error); }); هذا الكود يستخدم مكتبة Axios لإرسال طلب GET إلى example.com/path/to/resource ويقوم بطباعة بيانات الاستجابة عند الاستجابة بنجاح، ويقوم بطباعة الخطأ في حالة وجود أي خطأ في الاستجابة. Express.js يمكن استخدام Express، وهي إطار عمل Node.js لبناء تطبيقات الويب، لإنشاء موقع ويب والتواصل مع الخادم باستخدام HTTP. يمكن استخدام Express لإنشاء ملفات التطبيق وإضافة مسارات للاستجابة على الطلبات HTTP. يمكن القيام بذلك باستخدام الأمر التالي لإنشاء تطبيق Express: npm install express --save ثم إنشاء ملف app.js بمحتوى التطبيق الأساسي: const express = require('express'); const app = express(); app.get('/', (req, res) => { res.send('Hello World!'); }); app.listen(3000, () => { console.log('Example app listening on port 3000!'); }); سيقوم هذا التطبيق بإرسال "Hello World!" عند الاستجابة بطلب GET للصفحة الرئيسية (الجذر "/") على المنفذ 3000. للتواصل مع الخادم الخاص بالتطبيق، يمكن استخدام مكتبة http الخاصة بـ Node.js أو مكتبة axios أو node-fetch لإرسال طلبات HTTP إلى الموقع. على سبيل المثال، يمكن استخدام axios لإرسال طلب GET إلى الصفحة الرئيسية في التطبيق: const axios = require('axios'); axios.get('http://localhost:3000/') .then((response) => { console.log(response.data); }) .catch((error) => { console.error(error); }); سيتم إرسال طلب GET إلى http://localhost:3000/ وسيتم طباعة "Hello World!" في الاستجابة. يمكن استخدام نفس الطريقة لإرسال أي طلبات HTTP أخرى للتفاعل مع التطبيق.

ما تريده هو وجود نظام بسيط وليس معقد للتعاون على مشروع صغير أو متوسط، لذلك جانب الأدوات ونماذج تطوير البرمجيات التي تم ذكرها ما تحتاجه هو التالي: 1- استخدام نظام إدارة المشاريع: يمكن استخدام نظام إدارة المشاريع مثل منصة أنا من حسوب، وهي أدوات تسمح بإنشاء لوحات مشاريع تحتوي على قوائم بالمهام والمواعيد النهائية والأولويات والتعليقات والتحديثات. ومنصة أنا تقوم على مبدأ Kanban board ضمن منهجية التطوير القائمة على الشراكة Agile، والذي يتمثل في في جدول يتم فيه تتبع عمليات الإنتاج للبرمجيات من خلال أربع مراحل: "تحت الإنجاز"، "قيد التنفيذ"، "جاهز للإطلاق"، "تم الإصدار"، وهو أداة لإدارة العملية وتسهيل التنظيم. ويجب تقسيم المهام بينكم وبجدول زمني محدد، "فما لا يمكن قياسه لا يمكن إدارته وتحسينه". 2- استخدام منصة مشاركة الملفات: يمكن استخدام منصة مشاركة الملفات مثل Dropbox أو Google Drive أو OneDrive، وهي أدوات تسمح بمشاركة الملفات بين أعضاء الفريق والتحديثات الأخيرة لها. 3- استخدام نظام التحكم بالإصدارات: يمكن استخدام نظام التحكم بالإصدارات مثل Git أو SVN، وهي أدوات تسمح بإدارة وتحكم بإصدارات البرمجيات وتسهيل التعاون بين أعضاء الفريق على الكود المصدري، وأشهر المواقع لذلك هو GitHub. 4- استخدام الاختبارات التلقائية: يمكن استخدام الاختبارات التلقائية مثل Selenium أو JUnit، وهي أدوات تسمح بإنشاء اختبارات تلقائية للبرمجيات وتعقب الأخطاء. 5- استخدام بيئات التطوير المشتركة: يمكن استخدام بيئات التطوير المشتركة مثل Cloud9 أو CodePen أو CodeSandbox، وهي أدوات تسمح بإنشاء بيئات تطوير مشتركة تسهل على أعضاء الفريق العمل على نفس الكود المصدري في وقت واحد. 6- استخدام نظام النشر المستمر: يمكن استخدام نظام النشر المستمر مثل Jenkins أو Travis CI، وهي أدوات تسمح بالنشر المستمر واختبار البرمجيات بشكل آلي وتوفير ردود فعل فورية على أي تغيير في الكود المصدري. يمكن أيضًا استخدام لغة نمذجة البيانات UML (Unified Modeling Language) لتصميم النماذج والرسومات التي تصف هيكل وسياق التطبيق البرمجي، وذلك بالتزامن مع استخدام أدوات إدارة المشاريع والتحكم بالإصدارات وأدوات نظام النشر المستمر. يمكن استخدام UML لوضع خرائط لأنواع العناصر في التطبيق البرمجي، وتصميم العلاقات بينها وتمثيل المخططات والرسومات الأخرى، وهو يعتبر أداة قوية لتحليل وتصميم النماذج البرمجية وتوثيقها. وستجد هنا نقاش مثمر، أنصحك بقرائته. كيف يمكن إدارة المشاريع البرمجية الجماعية؟

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

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

في ملف UserProvider يجب عليك كتابة children بحرف صغير وليس Children وإذا كنت تستخدم react 17 أو أقل فقم باستيراد react import React, { createContext } from "react";

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

السؤال غير واضح، هل تقصد تريد إضافة لفعل ذلك، أم تريد برمجة خاصة باستخدام الوورد بريس؟ إذا كان الأمر يتعلق بإضافات ووردبريس، يمكنك استخدام إضافات تساعدك في إنشاء نموذج طلب وتحديد الخيارات المختلفة للتوصيل والمناطق المراد الإرسال لها، ثم حساب التكلفة بناءً على الخيارات المحددة. من الإضافات التي يمكن استخدامها لهذا الغرض: WPForms: إضافة تسمح بإنشاء نماذج تفاعلية بسهولة وإضافة خيارات متعددة، وتحديد السعر بناءً على المنطقة وطريقة التوصيل المحددة. WooCommerce: إضافة تستخدم بشكل رئيسي لإنشاء متاجر إلكترونية ولكنها تتضمن أيضًا خيارات لإنشاء نماذج الطلبات، وتحديد الطرق المختلفة للتوصيل وتحديد الأسعار بناءً على المنطقة والطريقة المختارة. إما إذا كنت تريد التصميم والبرمجة بنفسك: بخصوص التصميم فيمكنك استخدام مكتبات جاهزة مثل Bootstrap لإنشاء الـ Form و قائمة التنقل. أما بخصوص التوصيل والسعر، فيمكنك استخدام الكود التالي كمثال: //تحديد سعر الشحن حسب المنطقة function calculate_shipping_cost($shipping_method, $shipping_address){ $shipping_cost = 0; $city = $shipping_address['city']; $state = $shipping_address['state']; if ($shipping_method == 'method1') { if ($city == 'City1' && $state == 'State1') { $shipping_cost = 10; } elseif ($city == 'City2' && $state == 'State1') { $shipping_cost = 15; } elseif ($city == 'City3' && $state == 'State2') { $shipping_cost = 20; } } elseif ($shipping_method == 'method2') { if ($city == 'City1' && $state == 'State1') { $shipping_cost = 20; } elseif ($city == 'City2' && $state == 'State1') { $shipping_cost = 25; } elseif ($city == 'City3' && $state == 'State2') { $shipping_cost = 30; } } return $shipping_cost; } في هذا الكود، يتم استخدام دالة calculate_shipping_cost لحساب تكلفة الشحن بناءً على الطريقة المختارة والعنوان الذي تم تقديمه. يتم تحديد سعر الشحن حسب المنطقة، مع تحديد أسعار مختلفة لكل طريقة من طرق الشحن.

من الجيد أنك تستخدم المتغيرات vriables في CSS من خلال :root ، لكنك استخدمتها فقط من أجل الخط، عود نفسك على استخدامها فيمكنك كمثال إنشاء متغير للون الرئيسي وكمثال: :root { font-family: Arial, Helvetica, sans-serif; --bg-clr: #eee } .parent { background-color: var(--bg-clr) } حيث يستخدم :root لتعريف الخصائص العامة المتعلقة بالمستند، والتي يمكن الوصول إليها من جميع العناصر في المستند. عند تعريف خصائص في :root، يمكن الاستفادة منها في جميع أنحاء المستند، مما يوفر الوقت والجهد في الكتابة والصيانة. بالإضافة أيضًا إلى ما ذكره أسامة، يمكن تحسين تباعد العناصر في عنصر الـ parent بحيث تبدو العناصر أكثر اتساقًا وتتناسب بشكل أفضل. علاوة على ذلك ، يمكنك تحسين مظهر خطوط الأوسط في العناصر النصية ، مثل الـ or ، لجعلها أكثر وضوحًا. بالنسبة للألوان أنصحك باستخدام https://www.happyhues.co/ فستتعلم منها الكثير بالنسبة لاستخدام ألوان متناسقة ومريحة للعين، وستجد بالموقع لوحات ألوان جاهزة مع شرح كيف يتم استخدام كل لون داخل موقعك.

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

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

توجد العديد من خصائص CSS التي يمكن استخدامها لتنسيق شريط التمرير (scrollbar). إليك بعض الخصائص الأساسية التي يمكن استخدامها: ::-webkit-scrollbar : يتم استخدامها لتحديد المظهر العام لشريط التمرير. ::-webkit-scrollbar-track : تحديد خصائص خلفية شريط التمرير. ::-webkit-scrollbar-thumb : تحديد خصائص مقبض شريط التمرير. ::-webkit-scrollbar-corner : تحديد خصائص زاوية شريط التمرير. ::-webkit-scrollbar-button : تحديد خصائص زر شريط التمرير. يمكن استخدام هذه الخصائص بالتعاون مع العديد من الخصائص الأخرى في CSS لتحقيق التنسيق المطلوب. على سبيل المثال، يمكن استخدام الخصائص التالية لتغيير لون وحجم وشكل مقبض شريط التمرير: ::-webkit-scrollbar-thumb { background-color: #4CAF50; /* تغيير لون مقبض الشريط */ border-radius: 10px; /* تغيير شكل مقبض الشريط */ border: 3px solid #fff; /* إضافة حدود لمقبض الشريط */ } ::-webkit-scrollbar-thumb:hover { background-color: #555; /* تغيير لون مقبض الشريط عند المرور بالفأرة عليه */ } ::-webkit-scrollbar-thumb:active { background-color: #999; /* تغيير لون مقبض الشريط عند النقر عليه */ } ::-webkit-scrollbar { width: 10px; /* تغيير عرض الشريط */ height: 10px; /* تغيير ارتفاع الشريط */ } يمكنك تعديل هذه الخصائص واختيار القيم التي تناسب تصميمك. ويجب التنبيه إلى: أنه يتم وضع خصائص تنسيق الـ scrollbar على العنصر الذي يتم إظهار الـ scrollbar عليه. على سبيل المثال، يمكن وضع الخصائص على الـ body إذا كانت الـ scrollbar تظهر على صفحة الويب بشكل عام، أو يمكن وضعها على عنصر الـ div الذي يحتوي على المحتوى والذي يتم إظهار الـ scrollbar عليه في حالة وجود overflow. يمكن إضافة الخصائص الخاصة بالـ scrollbar في CSS باستخدام خاصية ::-webkit-scrollbar في حالة استخدام المتصفح "Google Chrome" أو "Safari". وخاصية ::-moz-scrollbar في حالة استخدام المتصفح "Firefox". ويمكن استخدام الـ ::-webkit-scrollbar في العديد من المتصفحات الأخرى التي تستخدم محرك "WebKit"، مثل "Opera" و "Microsoft Edge". على سبيل المثال، يمكن استخدام الكود التالي لإضافة تنسيقات للـ scrollbar في المتصفح "Google Chrome": /* تنسيقات الـ scrollbar */ body::-webkit-scrollbar { width: 8px; height: 8px; background-color: #f5f5f5; } body::-webkit-scrollbar-thumb { background-color: #555; border-radius: 10px; } في هذا المثال، يتم تحديد عرض وارتفاع الـ scrollbar باستخدام width و height على الـ ::-webkit-scrollbar، ويتم تحديد لون خلفية الـ scrollbar باستخدام background-color على نفس العنصر. ويتم تحديد لون الـ thumb أو المنطقة المتحركة داخل الـ scrollbar باستخدام background-color على الـ ::-webkit-scrollbar-thumb، ويتم تحديد شكل الـ thumb باستخدام border-radius.

بالإضافة إلى ما قام بشرحه سمير، هناك بعض التوضيحات اللازمة: يمكن تعديل اسم الخاصية الافتراضية من title_body إلى أي اسم آخر يتم اختياره. باستطاعتك استخدام الموصلات لتحويل أي عمود آخر في الجدول، وليس فقط العمودين title و body. أيضًا يمكن إضافة مزيد من الطرق لتعديل السلوك الافتراضي لنموذج ما باستخدام Laravel. على سبيل المثال، يمكن تغيير قواعد الصحة (Validation rules) الافتراضية، أو استخدام المتغيرات المحيطة (Environmental variables) لتكوين النموذج، وما إلى ذلك. مثلاً يمكنك إضافة الكود التالي داخل النموذج Model: public function getTitleBodyAttribute() { return $this->attributes['title'] . ' ' . $this->attributes['body']; } protected $appends = [ 'title_body' ]; بعد ذلك، يمكنك الوصول لقيمة العمود الجديد title_body بعد جلب البيانات من الجدول: $posts = Post::all(); foreach ($posts as $post) { echo $post->title_body; } الكود السابق يقوم بدمج قيمة عمود title وعمود body وإرجاعهما كعمود افتراضي جديد title_body. كما يتم إضافة الخاصية title_body إلى المصفوفة appends لجعلها تأتي مع البيانات الأساسية في حالة الاستعلام عنها. طرق أخرى لإنشاء عمود افتراضي في النموذج في Laravel هناك طرق أخرى لإنشاء عمود افتراضي في النموذج في Laravel، ولكن الأسلوب الأكثر شيوعًا هو استخدام Accessors كما تم شرحه سابقًا. ومن بين الطرق الأخرى: 1- استخدام الأحداث (Events): يمكن استخدام الأحداث لتحويل قيمة العمود بعد إنشاء أو تحديث النموذج. يمكنك استخدام حدث مثل "saving" أو "saved" لتنفيذ هذه العملية. 2- استخدام الاستعلامات الحسابية (Raw SQL Queries): يمكنك استخدام استعلام SQL المباشر لإضافة عمود افتراضي إلى نتيجة استعلام. يمكن استخدام هذا الأسلوب إذا كان لديك استعلامات معقدة وكنت بحاجة إلى تعديل نتائج الاستعلام بشكل مباشر. 3- استخدام حزم الحقول الافتراضية (Default Field Packages): يوفر Laravel حزم حقول افتراضية لإضافة حقول إضافية إلى النموذج، ومن بينها الحزمة المسماة "laravel-nova-fields-value" التي تسمح بإضافة حقول افتراضية. بالنسبة لأفضل طريقة؟، يعتمد ذلك على حاجتك ومتطلبات مشروعك. إذا كانت العملية بسيطة ولا تحتاج إلى مزيد من العمل، فقد تكون Accessors هي الأسلوب الأفضل. ولكن إذا كانت العملية معقدة وتتطلب مزيدًا من التخصيص، فقد تحتاج إلى استخدام الأحداث أو الاستعلامات الحسابية.

يجب استخدام خاصية innerHTML على المتغير الذي يحوي قيمة عنصر merabi وهو عنصر h1، وأنت قمت بحفظه في متغير باسم titleo، لذلك الكود الصحيح هو: let title = document.getElementById("merapi"); title.addEventListener("click", function() { title.innerHTML = "You clicked on the text!"; }); وإذا أردت استخدام خاصية innerHTML على العنصر مباشرًة فالكود يجب أن يكون كالتالي let title = document.getElementById("merapi"); title.addEventListener("click", function() { document.getElementById("merapi").innerHTML = "You clicked on the text!"; });

بالإضافة إلى الشرح الذي قدمه أحمد، يمكن أيضًا إضافة بعض التفصيل إلى الشرح. يجب على تحديد queryset الذي يتم تمريره إلى filter.qs وتعديله بناءً على التصفية التي تقوم بها. بمجرد الحصول على filtered_queryset، يمكن استخدامها لتصدير البيانات في حلقة البيانات for بدلاً من dataset الذي يتم إنشاؤه باستخدام StudentResource().export() والذي لا يمثل النتائج المصفاة بشكل صحيح. بالإضافة إلى ذلك، يمكن استخدام الدالة get_queryset() في فئة العرض (FilterView) لتحديد queryset الأساسي الذي يتم تمريره إلى filter.qs بدلاً من Student.objects.all(). هذا يمكن أن يساعد في تحسين أداء التطبيق عند التعامل مع مجموعة كبيرة من السجلات. مثال: from django_filters.views import FilterView from django_tables2.views import SingleTableView from django_tables2.export.views import ExportMixin from django.urls import reverse_lazy from django.utils.translation import gettext_lazy as _ from django_filters.filters import ( CharFilter, NumberFilter, ) from .models import Student from .filters import StudentFilter from .tables import StudentTable from .resources import StudentResource class StudentListView(ExportMixin, SingleTableView): model = Student table_class = StudentTable template_name = "students/student_list.html" export_formats = ( "csv", "xlsx", ) filterset_class = StudentFilter # تحديد queryset الأساسي def get_queryset(self): queryset = super().get_queryset() # تطبيق التصفية على queryset الأساسي وتعديله self.filterset = self.filterset_class(self.request.GET, queryset=queryset) self.filtered_queryset = self.filterset.qs return self.filtered_queryset def get_table_data(self): # استخدام filtered_queryset بدلاً من queryset الأساسي return self.filtered_queryset def get_context_data(self, **kwargs): context = super().get_context_data(**kwargs) # تمرير filter و table إلى النموذج في context context["filter"] = self.filterset context["table"] = self.table return context def get_export_queryset(self, queryset): # استخدام filtered_queryset بدلاً من queryset الأساسي للتصدير return self.filtered_queryset def get_export_resource_class(self): # استخدام filtered_queryset بدلاً من queryset الأساسي للتصدير return StudentResource class StudentFilterView(FilterView): model = Student filterset_class = StudentFilter template_name = "students/student_filter.html" # تحديد queryset الأساسي def get_queryset(self): return Student.objects.all() def get_context_data(self, **kwargs): context = super().get_context_data(**kwargs) context["title"] = _("Filter Students") return context def get_success_url(self): # إعادة توجيه العرض بعد تقديم النموذج return reverse_lazy("student_list") + "?" + self.request.GET.urlencode() في هذا المثال، تم إنشاء عرض Django يستخدم FilterView و SingleTableView من Django-Tables2 و ExportMixin لتمكين تصدير بيانات جدولية باستخدام django-import-export. تم تحديد النموذج الأساسي والفئة المرشحة وفئة الجدول والمورد لاستخدامها في العرض. وتم استخدام الدالة get_queryset() لتحديد queryset الأساسي الذي سيتم تمريره إلى filter.qs بدلاً من Student.objects.all(). في هذا المثال، تم تطبيق عامل تصفية يقوم بفلترة الطلاب حسب الاسم الأول الذي يبدأ بحرف "J". مع استخدام الدالة get_table_data() لاسترداد البيانات التي سيتم عرضها في الجدول. في هذا المثال، تم استخدام filter.qs بدلاً من queryset الأصلي. ثم استخدام الدالة get_export_resource_kwargs() لتحديد البيانات التي سيتم تصديرها. في هذا المثال، تم استخدام filter.qs بدلاً من queryset الأصلي. وهناك سؤال متعلق بنفس النقاش يمكنك قرائته أيضًا. من الممكن أن تكون الأسباب التالية هي السبب: 1- عدم تعريف الحقول المراد تصديرها في الـ ModelResource: يجب التأكد من تعريف حقول النموذج التي يجب تصديرها في الـ ModelResource المستخدم في الصفحة. يجب تعريف حقول النموذج في Meta.fields في ModelResource. 2- عدم استخدام ModelResource المناسب: يجب التأكد من استخدام ModelResource المناسب لنموذج البيانات الذي يتم تصديره. يجب استخدام ModelResource المناسب الذي يتم تعريفه في نفس التطبيق الذي تم استخدامه في FilterSetClass. 3- عدم تضمين الحقول المراد تصديرها في الـ export_fields: يجب التأكد من تضمين حقول النموذج التي يجب تصديرها في export_fields في ModelResource. لمساعدتك في تحديد المشكلة الفعلية، يمكنك محاولة إعادة تشغيل الكود مع تفعيل Debug mode في Django، ومراجعة الأخطاء والتحذيرات الخاصة بالمشكلة في ملفات السجلات (Logs). كما يمكنك تحديد المشكلة بمزيد من التحقق من الأسباب المذكورة أعلاه.

أولاً، يجب فهم أن HTML و CSS هما لغتان مختلفتان عن JavaScript و React. HTML و CSS هما لغتان تستخدمان لتصميم صفحات الويب وتنسيقها، في حين أن JavaScript و React يستخدمان لتطوير تطبيقات الويب المتقدمة وإدارة حالة التطبيق. لذلك، إذا كنت تريد تعلم React وتطوير تطبيقات الويب المتقدمة، فمن الضروري أن تتعلم JavaScript وReact بشكل جيد. ومن المفيد أيضًا أن تتعلم HTML و CSS بشكل أساسي لأنها تساعد في فهم كيفية بناء صفحات الويب وتصميمها بشكل أفضل. أما بالنسبة للمقارنة بين HTML وJSX، فإن JSX هي لغة تم إنشاؤها بواسطة Facebook والتي تستخدم في React لتصميم واجهات المستخدم. وتتيح للمطورين كتابة شفرة JavaScript وإنشاء عناصر واجهة المستخدم في نفس الملف، مما يجعل الكود أكثر قراءة وفهمًا. على الرغم من أن JSX يشبه HTML في بعض النواحي مثل العناصر والخصائص ولكنها لغة مختلفة وتختلف عن HTML في عدد من الأمور مثل طريقة تعريف الخصائص والأحداث والتفاعلات وبعض العناصر الإضافية التي تدعمها JSX ولا تدعمها HTML. فيما يلي بعض الأمثلة للتوضيح: مثال على كود HTML: <div class="my-class" id="my-id">Hello World!</div> مثال على كود JSX: <div className="my-class" id="my-id">Hello World!</div> في هذا المثال، نرى عنصرًا div يحتوي على نص "Hello World!" ويتم تعريفه في HTML وJSX. ولكن هناك بعض الاختلافات في كيفية تعريف العنصر. في HTML، يتم استخدام الخاصية class لتحديد الفئات الخاصة بالعنصر، في حين يتم استخدام id لتحديد معرف العنصر. ومن المهم التأكد من عدم استخدام نفس العنصر مع نفس المعرف في نفس الصفحة. في JSX، تستخدم className بدلاً من class، وذلك لأن class هي كلمة محجوزة في JavaScript، ولا يمكن استخدامها كخاصية. ويمكن استخدام id كما هو في HTML. هذا مثال بسيط، ولكن يعرض الفرق الأساسي في تعريف العناصر في HTML وJSX. تعلم الأساسيات أولاً بما أن JSX يستخدم في React فقط، فمن المهم أيضًا تعلم JavaScript بشكل جيد حتى تتمكن من فهم كيفية كتابة الشفرة في React. يتضمن ذلك فهم المتغيرات والدوال والعبارات الشرطية والحلقات ومفاهيم أخرى. علاوة على ذلك، يمكن أن يساعد تعلم CSS في تحسين تصميم واجهة المستخدم في React. فعلى الرغم من أن React يستخدم JSX لتصميم واجهات المستخدم، إلا أنه يمكن استخدام CSS لتحسين تنسيق العناصر والإضافات إليها. والأفضل والأصح هو تعلم HTML و CSS و JavaScript بشكل جيد إذا كنت تريد تطوير تطبيقات الويب المتقدمة باستخدام React. ولكن إذا كنت تركز بشكل رئيسي على React، فيمكنك البدء مباشرة في تعلمه والتركيز على فهم كيفية استخدامه وبناء تطبيقات الويب المتقدمة باستخدامه. لكن لن تذهب بعيدًا بدون فهم اللغات الأساسية المبني عليها مكتبة React لذلك، مهما كان الوقت ضيق لديك تعلم الأساسيات أولاً تجنبًا للمعاناة والإحساس بأنك لا تعلم ما تكتب وأيضًا ستكتسب القدرة على إصلاح المشاكل التي تحدث بدلاً من كتابة الكود بدون فهم. وأيضًا ستكتسب القدرة على التنقل ما بين إطارات العمل مثل Angular و رVue لأنك قمت بتعلم الأساسيات.

بالإضافة إلى ما تم ذكره. يجب التفرقة بين React Native و Ionic عبارة عن إطارات عمل (Frameworks) لتطوير تطبيقات الهاتف. حيث تستخدم React Native لتطوير تطبيقات iOS و Android، في حين تستخدم Ionic لتطوير تطبيقات متعددة المنصات باستخدام HTML و CSS و JavaScript. الفرق الرئيسي بين React Native و Ionic هو أن React Native يستخدم لغة البرمجة JavaScript، في حين يستخدم Ionic HTML و CSS و JavaScript. كما يتطلب React Native مستوى عالٍ من المعرفة بـ JavaScript، بينما يمكن لأي شخص يعرف HTML و CSS و JavaScript استخدام Ionic. React Native مبني على مكتبة ReactJS، ويستخدم تقنيات Native لتحسين أداء التطبيق وتحسين التفاعل مع المستخدم. ويتيح للمطورين إعادة استخدام الشفرة بين تطبيقات iOS و Android، مما يوفر الوقت والجهد في عملية التطوير. كما يتيح للمطورين أيضًا بناء واجهات مستخدم (UI) ذات مظهر جميل ومتطور. Ionic على الجانب الآخر يستخدم مكتبة AngularJS ويتميز بأنه يعمل بشكل ممتاز على مختلف المنصات. ويوفر Ionic أيضًا واجهة مستخدم تفاعلية وتطبيقات بسيطة وخفيفة الوزن. متى استخدم React Native و Ionic فيما يتعلق باختيار الإطار المناسب، يعتمد ذلك على الاحتياجات والمتطلبات للتطبيق الذي تريد تطويره. إذا كنت تبحث عن تطبيق أكثر تعقيدًا وتفاعليًا، فقد يكون React Native الخيار الأفضل. وإذا كنت تريد تطبيقًا بسيطًا وخفيف الوزن، فإن Ionic قد يكون الأفضل. ومع ذلك، إذا كان لديك فريق مطورين يعرفون AngularJS، فقد يكون من الأفضل استخدام Ionic بدلاً من React Native. كما يمكن أن يلعب الاعتماد على تقنيات Native لتحسين أداء التطبيق دورًا في اختيار الإطار المناسب. يعمل React Native بشكل أسرع من Ionic ويتيح توفير تجربة مستخدم أكثر سلاسة وتفاعلية، نظرًا لأنه يعتمد على تقنيات Native. ولكن في حالة تطبيقات Ionic، يمكن أن يتم استخدام تقنيات Cordova لتشغيل التطبيقات على المنصات المختلفة، مما يمكن من تحسين أدائها. بشكل عام، يمكن استخدام React Native لتطوير تطبيقات الموبايل عندما يكون التركيز على توفير تجربة مستخدم عالية الجودة وتطبيقات متطورة ومعقدة. ويمكن استخدام Ionic لتطوير تطبيقات متوسطة الحجم والتعامل مع المشاكل المختلفة بسرعة وكفاءة. إذا كنت ترغب في تطوير تطبيقات متعددة المنصات باستخدام الويب تقريبًا في المرتبة الأولى، فإن Ionic يمكن أن يكون الإطار الأفضل، في حين يمكن استخدام React Native لتطوير تطبيقات الجوال الأكثر تطوراً والمتقدمة.

الخطأ هو أنك لم تنسق الـ state بشكل صحيح، وعليه لم يتم تحديث الـ state بشكل صحيح عند استخدام الأزرار الأخرى. هناك عدة نقاط يجب مراجعتها: يجب عليك تحديث الـ state بشكل صحيح في كل دالة. على سبيل المثال، في دالة doubleMoney ، يتم تعيين قيمة جديدة لـ data بدلاً من تحديثها باستخدام setData. عند استخدام دالة fetchRandomUsers، يجب أن تقوم بإرجاع القيمة الجديدة (newUser) ، وإذا لم تقم بذلك فلن تتم إضافة اليوزر الجديد إلى الـ state. يجب عليك استخدام setData لتحديث الـ state بشكل صحيح في كل دالة. لضمان تحديث الـ state بشكل صحيح، يمكنك استخدام دالة useState بشكل صحيح. يجب تعيين دالة الـ filter و map إلى الـ state الجديد باستخدام setData، بدلاً من تغيير الـ state الحالي. وهنا بعض التغييرات التي يجب عليك إجراؤها لجعل الكود يعمل بشكل صحيح: const [data, setData] = useState([]); // Add User const handleAdd = async () => { const response = await fetch('https://randomuser.me/api'); const responseData = await response.json(); const newUser = { user: `${responseData.results[0].name.first} ${responseData.results[0].name.last}`, money: formatMoney(Math.floor(Math.random() * 1000000)) }; setData([...data, newUser]); }; // Double Money const doubleMoney = () => { const newData = data.map(user => { return {...user, money: user.money * 2} }); setData(newData); }; // Show Millionaires const showMillionaires = () => { const newData = data.filter(item => item.money > 500000); setData(newData); }; // Sort by richest const sortByRichest = () => { const newData = [...data].sort((a, b) => b.money - a.money); setData(newData); }; // Calculate entire wealth const calculateWealth = () => { const wealth = data.reduce((acc, user) => (acc += user.money), 0); alert(`Total wealth: ${formatMoney(wealth)}`); };

الكود الأول يستخدم ReactDOM.render() لربط مكون React مع عنصر HTML في صفحة الويب، وهو الأسلوب الأكثر استخداماً في إنشاء تطبيقات React. أما الكود الثاني فيستخدم ReactDOM.createRoot() لإنشاء نوع جديد من الجذر Root المستخدم في React، ويتم تمرير عنصر HTML كمعامل لـ createRoot()، ومن ثم يستخدم render() لربط مكون React مع العنصر HTML. الفرق الرئيسي بين الكودين هو أن ReactDOM.createRoot() تتطلب الإصدار 18.0.0 من React أو أعلى، وهو تغيير رئيسي في الطريقة التي يعمل بها React ويتعامل مع جذر التطبيق. ويستخدم createRoot() لتحسين أداء التطبيقات الكبيرة والمعقدة. في حين يعد ReactDOM.render() أكثر استخدامًا حتى الآن، ويعتبر الأسلوب القياسي لربط مكونات React بعناصر HTML. الفروق بين react 17 و react 18 تم إصدار React 18 في نهاية عام 2021، ولذلك فإن الفروقات بين React 17 و React 18 غالباً ما تكون تغييرات صغيرة للغاية. من بين التغييرات الرئيسية التي تمت إجراؤها في React 18: تحسينات في أداء التطبيقات التي تستخدم الـ Suspense API والـ server components. إمكانية إلغاء تأجيل إنشاء الـ server components بمعنى عدم الانتظار لحين تحميل كل البيانات للصفحة وإظهارها مباشرة. تحسينات في عملية الإعادة التصيير Re-rendering. تحسينات في إدارة الذاكرة والأداء العام. ومن بين التغييرات الأخرى المهمة في React 18: دعم أفضل للتطبيقات الكبيرة والمعقدة. إمكانية التحكم بسلاسة في الـ rendering schedule. تحسينات في مجال التوثيق والتعليمات البرمجية. ويتطلب تحديث التطبيقات من React 17 إلى React 18 تعديلات طفيفة في الشفرة المصدرية. كيف يتم الإنتقال من react 17 إلى react 18 توجد عدة خطوات يجب اتباعها لترقية تطبيق React من الإصدار 17 إلى الإصدار 18، وهي كالتالي: تحديث مكتبات React و React-DOM إلى الإصدار 18 باستخدام أمر npm أو yarn. تحديث جميع المكونات التي تحوي استخدامًا لـ lifecycle methods مع العلم بأن الـ lifecycle methods تم إزالتها في React 18. استبدال الـ findDOMNode() بطرق أخرى للوصول إلى عناصر DOM. التحديث إلى الـ new JSX Transform وذلك بتحديث ملفات الـ Babel Configuration. في React 17، يجب استخدام الدالة ReactDOM.render() لتجميع مكون React إلى DOM. ولكن في React 18 يجب استخدام دالة ReactDOM.createRoot() لإنشاء جذر React واستخدام دالة render() عليه. وتستخدم ReactDOM.createRoot() بدلاً من ReactDOM.render() لتحسين أداء التطبيق كما أوضحت من قبل. فيما يلي مثال على كيفية استخدام ReactDOM.createRoot() بدلاً من ReactDOM.render(): import ReactDOM from 'react-dom'; const root = ReactDOM.createRoot(document.getElementById('root')); function App() { return <h1>مرحباً بالعالم!</h1>; } root.render(<App />); يتم استخدام دالة ReactDOM.createRoot() لإنشاء جذر React، ومن ثم تمرير مكون React إليه باستخدام دالة render(). لتحقق من عدم وجود مشاكل مع التغييرات الجديدة في React 18 باستخدام مكتبات الاختبارات (Testing Libraries) المختلفة المتوفرة.

بالإضافة ما ذكره أحمد، يجب مراعاة بعض القواعد الأساسية لكتابة الصيغ الصحيحة في Python. فيما يلي بعض الأمثلة على كيفية كتابة بعض الصيغ الأساسية بشكل صحيح في Python: 1- تعيين قيمة للمتغير: يمكن تعيين قيمة للمتغير في Python باستخدام العلامة (=) كما في المثال التالي: x = 5 2- استخدام الشرط: يمكن كتابة الشرط في Python باستخدام الكلمة المحجوزة if ، elif ، و else كما في المثال التالي: if x > 5: print("x is greater than 5") elif x == 5: print("x is equal to 5") else: print("x is less than 5") 3- استخدام الحلقات: يمكن استخدام الحلقات في Python باستخدام الكلمات المحجوزة for و while كما في المثال التالي: for i in range(10): print(i) x = 0 while x < 10: print(x) x += 1 4- استخدام الدوال: يمكن كتابة الدوال في Python باستخدام الكلمة المحجوزة def كما في المثال التالي: def add_numbers(x, y): return x + y result = add_numbers(3, 5) print(result) هذه بعض الأمثلة الأساسية للصيغ الصحيحة في Python. يجب مراعاة بعض القواعد الأساسية مثل عدم استخدام مسافات زائدة وتجنب استخدام الحروف الكبيرة في اسماء المتغيرات والدوال.

1- بخصوص سؤالك حول ظهور المستخدم الأول ثم اختفاءه بعد ثانية، فإن ذلك يرجع إلى أن الدالة fetchRandomUsers تعيد تعيين قيمة الـ state data لتحتوي على مستخدم واحد فقط عند كل استدعاء. وبما أن fetchRandomUsers تستدعى في الـ useEffect بعد جزء صفحة المستخدم يتم تحميله، فإن الحالة الأولى التي تتم عرضها تحتوي على مستخدم واحد، ولكن يتم تحديث الحالة كل ثانية مما يتسبب في تغيير الحالة إلى حالة خالية من المستخدمين. لحل هذه المشكلة، يمكن تعيين القيمة الجديدة للـ state باستخدام الدالة setData بدلاً من إعادة تعيينها كما يلي: setData(prevState => [...prevState, newUser]) بذلك، يتم إضافة المستخدم الجديد إلى مصفوفة المستخدمين الموجودين بالفعل في الحالة بدلاً من استبدالهم بالمستخدم الجديد. 2- لإظهار مستخدمين إثنين أو ثلاثة منذ تحديث الصفحة، يمكن تعديل الـ fetchRandomUsers لتسترد أكثر من مستخدم واحد. مثلاً، يمكن استدعاء الدالة fetch مع عدد الأشخاص الذين نريد عرضهم، ثم تحويل النتيجة إلى مصفوفة من المستخدمين وإضافتها إلى state. على سبيل المثال: async function fetchRandomUsers(numUsers) { const response = await fetch(`https://randomuser.me/api/?results=${numUsers}`); const data = await response.json(); const newUsers = data.results.map(user => ({ user: `${user.name.first} ${user.name.last}`, money: Math.floor(Math.random() * 1000000) })); setData(prevState => [...prevState, ...newUsers]); } ثم يمكن استدعاء fetchRandomUsers(2) على سبيل المثال لاسترداد مستخدمين اثنين وإضافتهم إلى state. 3- بخصوص جودة الكود، يمكن تحسين الكود: من المستحسن استخدام try / catch في دالة fetchRandomUsers للتحقق من وجود أي أخطاء في طلب API ومعالجتها بشكل صحيح. التحقق من أن response.ok يساوي true قبل الاستمرار في دالة fetchRandomUsers للتأكد من عدم حدوث أي أخطاء في الطلب. يمكن تحسين الكود المسؤول عن تحويل البيانات التي تم إرجاعها من API (data.results) إلى قائمة مستخدمين جديدة. يمكن إعادة كتابة دالة useEffect لتفعيل الطلب عندما يتم تحديث numUsers بدلاً من تشغيلها مرة واحدة عندما يتم تحميل التطبيق. استخدام setState بشكل صحيح. تحتوي setData الحالية على مصفوفة فارغة ، لذلك يجب استدعاء setData مع newUsers بدلاً من [...prevState ، ...newUsers] لتحديث المصفوفة. وضع الدالة fetchRandomUsers خارج دالة App() ، حتى يمكن استخدامها في أي مكان في الكود. يمكن تحسين اسماء المتغيرات والدوال بشكل يعكس المعنى الذي يقوم به الكود. على سبيل المثال ، يمكن تسمية setData() بـ setUsers() ، وتسمية العنصر الحالي في useState() باسم users بدلاً من data. يمكن تحسين الكود عن طريق استخدام مكتبة axios لعملية الـ fetch، حيث توفر هذه المكتبة التحكم بالأخطاء بشكل أفضل. يمكنك استخدام async/await بدلاً من .then() لتبسيط الكود. قد يكون من الأفضل تمرير عدد الأشخاص الذين تريد جلبهم من خلال الـ fetchRandomUsers() بدلاً من تحديدها داخل الدالة. يمكنك إنشاء دالة منفصلة لمعالجة بيانات المستخدمين بدلاً من وضع الكود داخل دالة fetchRandomUsers(). إليك الكود بعد تحسينه: import axios from 'axios'; import { useState, useEffect } from 'react'; function App() { const [data, setData] = useState([]); async function fetchRandomUsers(numUsers) { try { const response = await axios.get(`https://randomuser.me/api/?results=${numUsers}`); const newUsers = response.data.results.map(user => ({ user: `${user.name.first} ${user.name.last}`, money: Math.floor(Math.random() * 1000000) })); setData(prevState => [...prevState, ...newUsers]); } catch (error) { console.error(error); } } useEffect(() => { fetchRandomUsers(10); }, []); return ( <div> {data.map((user, index) => ( <div key={index}> <p>{user.user}</p> <p>{user.money}</p> </div> ))} </div> ); } export default App;

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

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

لا تستهون أبدًا بالتحسن التدريجي بشكل يومي فخلال فترة ستجد نفسك تقوم بإنشاء موقع كامل، هناك بعض النقاط التي يمكن تحسينها في الكود: يجب عليك استخدام الألوان بطريقة أفضل. يمكنك استخدام الخاصية border-color لتحديد لون الحدود بدلاً من استخدام الخاصية border-top و border-right و border-bottom و border-left. يمكنك تحسين تنسيق الكود عن طريق إزالة المسافات الزائدة وإضافة تعليقات للمساعدة في قراءة الكود عود نفسك على ذلك. وهناك أمور متقدمة نسبيًا يمكنك أخذها في الحسبان بعد فترة وهي استخدام قيم ثابتة للأبعاد والمواقع بل يجب عليك استخدام القيم النسبية مثل النسبة المئوية والـ em والـ rem لضمان أن يعمل التصميم بشكل جيد على مختلف أحجام الشاشات. بشكل عام، إذا كان هذا ثالث يوم لك في تعلم CSS، فأنت على الطريق الصحيح. يجب عليك متابعة التعلم والممارسة بانتظام لتحسين مهاراتك في CSS. وإليك بعض الدروس التي ستساعدك في تحسين مهارات CSS لديك.

لاستدعاء مكتبة PyPDF2 في Python ، يجب تثبيتها أولا باستخدام أحد مديري الحزم الخاصة بـ Python مثل pip. يمكنك استخدام الأمر التالي في سطر الأوامر لتثبيت pypdf2: pip install PyPDF2 بعد تثبيت pypdf2 بنجاح ، يمكنك استدعائها في برنامج Python باستخدام الأمر التالي: import PyPDF2 ويتم استدعاء هذا الأمر في بداية برنامج Python الخاص بك للاستفادة من وظائف pypdf2. إذا لم يستجب المفسر (interpreter) بعد تثبيت مكتبة PyPDF2 بنجاح، فربما يكون هناك مشكلة أخرى. من المهم التحقق من أن المكتبة قد تم تثبيتها بنجاح بواسطة إجراء اختبار بسيط. يمكنك استخدام هذا الأمر في مفسر Python للتحقق من أن المكتبة قد تم تثبيتها بنجاح: import PyPDF2 print(PyPDF2.__version__) إذا كانت المكتبة قد تم تثبيتها بنجاح، سيتم طباعة رقم الإصدار (version number) على الشاشة. إذا لم تظهر أي قيمة، فربما يحتاج المفسر (interpreter) إلى إعادة تشغيله. إذا استمرت المشكلة، فربما يكون هناك خطأ في التثبيت أو في تنفيذ الأوامر. يمكنك محاولة إعادة تثبيت المكتبة باستخدام مدير الحزم الخاص بـ Python مثل pip، وتحديث المكتبة بأحدث إصدار. وأيضًا التأكد من توافق إصدار بايثون لديك مع إصدار المكتبة.

هل تحتاج تعلمها؟ لا لست بحاجة إلى ذلك. يكفيك فقط فهم الفكرة والتطبيق على مثال بسيط، وقم بتركيز كامل جهدك على تعلم الـ Flexbox و CSS Grid Layout. Float: يستخدم ال Float لتحديد موقع العناصر بشكل أفقي (يمين أو يسار الشاشة)، ويمكن استخدامه لتحقيق التنسيق الجانبي للعناصر، مثل تحويل الصورة إلى الجانب الأيمن أو الأيسر من النص. Clear: تُستخدم خاصية Clear لمنع العناصر التي تليها من العرض بجوار العنصر المطفأ الصفري، وهي مفيدة في ترتيب العناصر بشكل رأسي. تتيح CSS أدوات جديدة وأساليب متقدمة لتحقيق التنسيق وتوزيع العناصر بطريقة أسهل وأكثر مرونة، وهي عناصر Flex و Grid. Flexbox: تعد خاصية Flexbox واحدة من أهم وأسهل أدوات CSS لتحقيق تنسيق مرون وحديث للصفحة. يمكن استخدامها لتوزيع العناصر داخل العناصر الأم (parent) بشكل أفقي أو رأسي، كما يمكن استخدامها لتحقيق ترتيب العناصر. Grid: تسمح خاصية Grid بتحديد الصفوف والأعمدة الخاصة بالعناصر بطريقة سهلة ومرونة، وتستخدم لتوضيح توزيع العناصر والتحكم في التنسيق بشكل دقيق. بشكل عام، يمكن استخدام ال Float وال Clear في بعض الحالات لتحقيق التنسيق المطلوب، ولكن استخدام ال Flexbox و Grid يوفر الكثير من المزايا، مثل سهولة التحكم في التنسيق، والقدرة على إنشاء تخطيطات متقدمة وغير تقليدية. لذلك، يُنصح بتعلم ال Flexbox و Grid للحصول على التنسيقات المطلوبة بطريقة أكثر سهولة ومرونة ولن تحتاج غيرهما. يمكننا توضيح الفرق في استخدام Flexbox و Grid بالأمثلة البرمجية التالية: Float ** ترتيب العناصر على اليمين واليسار ** <div style="float:left;">العنصر الأول</div> <div style="float:right;">العنصر الثاني</div> <div style="float:left;">العنصر الثالث</div> <div style="float:right;">العنصر الرابع</div> Flexbox: <div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div> /* CSS Code */ .container { display: flex; justify-content: space-between; align-items: center; } .box { width: 100px; height: 100px; background-color: #ccc; } Grid: <div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div> /* CSS Code */ .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } .box { width: 100px; height: 100px; background-color: #ccc; } وكما ترى، عند استخدام float ، يتم تحديد موقع عنصر ما بالنسبة إلى العنصر الذي يسبقه، وهذا يمكن أن يؤدي إلى صعوبة في إنشاء تخطيطات ديناميكية ومرنة. على سبيل المثال، عندما يكون لديك تنسيقات متعددة لشاشات مختلفة، ستحتاج إلى تكرار العديد من الأنماط الخاصة بـ float، وهذا يجعل الكود أكثر تعقيدًا وأقل مرونة. <div style="float:left;">العنصر الأول</div> <div style="float:right;">العنصر الثاني</div> <div style="float:left;">العنصر الثالث</div> <div style="float:right;">العنصر الرابع</div> <div style="clear:both;"></div> <div>العنصر الخامس</div> أما Flexbox و CSS Grid فهما أساليب مرونة وقوية في تحكم العناصر وتوزيعها في التخطيطات. ويسمحان بتحديد العلاقات بين العناصر وتوزيعها بطرق مختلفة، سواءً بتغيير الحجم والتكوين أو بتحريك العناصر والتحكم في موقعها. وبما أن Flexbox و CSS Grid يعتمدان على تحديد المساحات المطلوبة والعلاقات بين العناصر، فإنهما يجعلان تصميم التخطيطات الديناميكية والمتكيفة أسهل بكثير. وبشكل عام، Flexbox يستخدم لتنظيم العناصر على المحور الواحد (الأفقي أو العمودي)، في حين يستخدم CSS Grid لتنظيم العناصر على شبكة ثنائية الأبعاد.