Mustafa Suleiman

من الجيد أنك تستخدم المتغيرات 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 لتنظيم العناصر على شبكة ثنائية الأبعاد.

المعلومات السابقة صحيحة وشاملة بشكل عام، ولكن هناك بعض النقاط الإضافية التي يمكن تذكرها: بينما يمكن استخدام for loop لأي نوع من الأشياء التي يمكن تكرارها، إلا أن foreach يستخدم عادةً لتكرار عناصر المصفوفة أو الكائنات القابلة للتكرار مثل سلاسل النصوص (strings) ومجموعات العناصر (sets) وغيرها. في حالة تغيير المحتوى الموجود في المصفوفة أثناء استخدام foreach، فلن يتم تحديثها بشكل صحيح، بينما يمكن استخدام for loop لتغيير قيم المصفوفة بشكل صحيح. يمكن استخدام for loop لعمل تكرارات غير متساوية، بمعنى أن يمكن استخدام تعليمة break و continue للخروج من التكرارات أو تخطي جزء منها، بينما لا يمكن استخدام هذه التعليمات في foreach. يمكن استخدام for loop لتكرار أرقام محددة من المرات وليس فقط عناصر في مصفوفة، بينما يتم استخدام foreach فقط لتكرار عناصر المصفوفة أو الكائنات القابلة للتكرار. في بعض الحالات، يمكن استخدام for-of loop بدلاً من foreach لتكرار عناصر المصفوفة أو الكائنات القابلة للتكرار. ولكن يتم استخدام for-of loop بشكل أساسي في ECMAScript 6 وما بعده، بينما foreach يدعمها أيضًا ECMAScript 5 والإصدارات السابقة.

الخطأ يحدث بسبب استخدام نوع البيانات الخاطئ للمعامل الثاني في دالة "getTranslations" في الصف "Product" من النموذجات (Models) في Laravel. يتوقع أن يكون المعامل الثاني من نوع "Zarray"، ولكن تم تمرير نص (string) بدلاً من ذلك، الأمر الذي يؤدي إلى حدوث هذا الخطأ. يجب تحديد قيمة المعامل الثاني باستخدام النوع الصحيح "Zarray"، وذلك بتمرير مصفوفة اللغات المسموح بها في النظام كمصفوفة من الأعراف الأساسية: $allowedLocales = ['en', 'fr', 'ar']; // مثال لمصفوفة اللغات المسموح بها $translations = $product->getTranslations($attribute, $allowedLocales); وبهذه الطريقة، يتم تمرير مصفوفة اللغات المسموح بها بشكل صحيح إلى دالة "getTranslations"، ويمكن تجنب حدوث هذا الخطأ. يجب تعديل الكود ليتوافق مع هذا التنسيق.

يجب معرفة أن JavaScript هي لغة برمجة عالية المستوى والتي تستخدم على نطاق واسع في تطوير تطبيقات الويب والتي تعتبر من أهم لغات البرمجة في العالم. وتتميز JavaScript بأنها لغة برمجة متعددة الاستخدامات حيث يمكن استخدامها لتطوير تطبيقات الويب والمواقع الإلكترونية، ويمكن استخدامها أيضًا لتطوير تطبيقات سطح المكتب وتطبيقات الهواتف الذكية والأجهزة اللوحية. وتتميز JavaScript بسهولة استخدامها وتعلمها وبتوفيرها للمطورين مكتبات وأدوات عديدة تساعدهم على تطوير تطبيقات الويب بسهولة وبأداء عالي وتجربة مستخدم ممتازة. وتستخدم JavaScript للتفاعل مع صفحات الويب وإضافة الإثارة والديناميكية لتجربة المستخدم، وللتحقق من صحة الإدخالات وتحقيق المزيد من التفاعلات مع المستخدم. وتستخدم JavaScript أيضًا للتحكم في الأحداث والتفاعلات في صفحات الويب ولإجراء الحسابات الرياضية والعمليات المعقدة الأخرى والتعامل مع البيانات. وتوفر JavaScript أيضًا مكتبات مثل jQuery وReactJS وAngularJS وغيرها التي تساعد على تسهيل عملية تطوير تطبيقات الويب بشكل كبير. ولذلك فهي ليست لغة بالمتصفح فقط كما كانت من قبل، بل أصبح بالإمكان فعل أي شيء بها. أيضًا، يمكن استخدام لغة الجافاسكريبت JavaScript في تطوير تطبيقات الهواتف الذكية وأجهزة الكمبيوتر اللوحية وتطبيقات سطح المكتب. ويمكن استخدامها في تطوير تطبيقات الهواتف الذكية باستخدام إطارات عمل كما React Native وIonic Framework. ويمكن استخدامها في تطوير تطبيقات سطح المكتب باستخدام إطارات عمل مثل Electron وNW.js. وعلى الرغم من أن JavaScript تستخدم بشكل رئيسي في تطوير تطبيقات الويب، فإن إمكانياتها تمتد إلى مجالات أخرى مثل تطوير تطبيقات سطح المكتب وتطبيقات الهواتف الذكية. ويتم شرح الأساسيات بها لكونها مستمرة معك في أغلب الدورات الأخرى وستحقق استفادة فعلاً من تعلمها في أساسيات علوم الحاسب.

بالإضافة إلى المكتبات التي تم ذكرها سابقًا (Pillow، OpenCV، Matplotlib، و skimage)، هناك مكتبات أخرى يمكن استخدامها لحفظ الصور في لغة Python، مثل مكتبة imageio ومكتبة scikit-image. يمكن استخدام مكتبة imageio لحفظ الصورة بطريقة مماثلة لـ Pillow و Matplotlib. يمكن استخدام الشفرة التالية لحفظ الصورة في تنسيق PNG: import imageio # load the image image = imageio.imread('example.jpg') # perform some image processing # ... # save the modified image imageio.imwrite('modified.png', image) يتم استخدام imageio.imread() لتحميل الصورة، ثم يتم تنفيذ بعض عمليات معالجة الصورة، وأخيرًا يتم حفظ الصورة المعالجة باستخدام imageio.imwrite(). بالنسبة لمكتبة scikit-image، يمكن استخدام الأمر io.imsave() لحفظ الصورة. يمكن استخدام الشفرة التالية لحفظ الصورة في تنسيق JPEG: from skimage import io # load the image image = io.imread('example.jpg') # perform some image processing # ... # save the modified image io.imsave('modified.jpg', image) يتم استخدام io.imread() لتحميل الصورة، ثم يتم تنفيذ بعض عمليات معالجة الصورة، وأخيرًا يتم حفظ الصورة المعالجة باستخدام io.imsave(). يمكن تعديل الشفرات أعلاه لحفظ الصورة في أي تنسيق مدعوم بواسطة المكتبة المستخدمة. بالنسبة لأفضل طريقة من الطريق السابقة الطريقة المناسبة لحفظ الصور في Python تعتمد على عدة عوامل، مثل تنسيق الصورة المراد حفظها، نوع المعالجة التي سيتم تطبيقها على الصورة، وسرعة التنفيذ. ومع ذلك، تعتبر مكتبة Pillow من بين أكثر المكتبات شيوعًا لتحميل وتعديل وحفظ الصور في Python. تمتلك مكتبة Pillow مجموعة واسعة من الميزات والوظائف لتعديل الصور بما في ذلك تغيير حجم الصورة، وتدويرها، وتغيير مستويات السطوع والتباين والتشبع، وإضافة نص وعلامات مائية. كما أنه يمكن استخدام مكتبة OpenCV لتعديل الصور، ولها العديد من الوظائف المتقدمة في معالجة الصور مثل تحويل الألوان واستخراج الميزات. وأخيرًا، يمكن استخدام مكتبة Matplotlib و skimage لحفظ الصور بطريقة بسيطة وسهلة، مع دعمها لمختلف تنسيقات الصور. يجب اختيار المكتبة المناسبة بناءً على الاحتياجات الخاصة بمشروعك وقدرتك على استخدام الوظائف الخاصة بكل مكتبة.

بشكل عام، يعمل UI Designer على تصميم واجهات المستخدم وتحديد كيفية تفاعل المستخدم مع التطبيق أو الموقع الإلكتروني، بينما يعمل Front-End Developer على تحويل تصميم واجهة المستخدم إلى ملفات HTML وCSS وJavaScript. وبالتالي، تختلف المسؤوليات والمهام بين UI Designer و Front-End Developer. يتم تعيين مصمم واجهة المستخدم لإنشاء تصميم واجهة المستخدم الجذاب والمبتكر بشكل عام، مع التركيز على الجوانب البصرية والتفاعلية للتطبيق أو الموقع الإلكتروني. ومن الممكن أن يعمل UI Designer مع فريق Front-End Developer لمساعدتهم على تحويل التصميم إلى واجهة مستخدم قابلة للتفاعل. أما Front-End Developer، فهو المسؤول عن تحويل تصميم واجهة المستخدم إلى كود قابل للتفاعل والاستخدام. ويستخدم Front-End Developer HTML وCSS وJavaScript وإطارات ومكتبات العمل الخاصة بهم لتحقيق هذا الهدف، حيث يقوم بتحويل التصميم المرسوم ببرامج التصميم إلى ملفات HTML وCSS وJavaScript، ويعمل على تحويل هذه الملفات إلى صفحات ويب تفاعلية قابلة للتصفح. أي تصميم الواجهة الأمامية (Frontend) يتطلب تعاونًا بين المصممين ومطوري الويب، حيث يستلم المطورون ملفات التصميم من المصممين لتحويلها إلى كود يمكن استخدامه على الويب، والأمر يتوقف على حجم الشركة، فالشركات الصغيرة غالبًا ما تدع عملية التصميم للمطور. وبشكل عام، فإن الشركات التي تعمل في مجال تصميم وتطوير المواقع والتطبيقات الإلكترونية تمتلك كلاً من UI Designer و Front-End Developer كأعضاء في فريق التطوير. ومن الممكن أن يتعاون الفريق في إنشاء واجهات المستخدم المتميزة والمبتكرة والتي تلبي احتياجات المستخدمين بأفضل طريقة ممكنة. في العمل الحر، يجب على مطوري الويب الحصول على مهارات في التصميم الجيدة لتقديم خدمات شاملة للعملاء، حيث يجب عليهم إنشاء تصاميم واجهات المستخدم وإنشاء التصاميم الرسومية الأصلية لتلك الواجهات والصفحات. قد يكون من الصعب الحفاظ على فصل الأدوار بين مصممي الواجهة ومطوري الويب في بعض الشركات. على سبيل المثال، يمكن أن يطلب من مطور الويب إجراء بعض التغييرات البسيطة على تصميم الواجهة أو إجراء بعض التحسينات على تجربة المستخدم. وبالمثل، يجب أن يتمتع مصمم الواجهة بمعرفة عميقة بتقنيات التطوير والأدوات المستخدمة لتطوير الويب حتى يمكنه تصميم واجهات ملائمة لتلك التقنيات. والأفضل لك هو البحث عن Handoff design to developers في اليوتيوب وسترى بعينيك سير العمل الفعلي الذي يتم بشكل واقعي بدلاً من قراءة نصوص لن تفيدك بشكل كبير.

الأفضل هو الإعتماد المكتبات الجاهزة والتي تم إختبارها، وبها العديد من الخيارات، إذا كنت تبحث عن معرض lightbox فبإمكانك الإعتماد على المكتبات التالية: https://www.lightgalleryjs.com/ https://lokeshdhakar.com/projects/lightbox2/ https://blueimp.github.io/Gallery/ أو يمكنك الإعتماد على مكتبة أكثر تقدمًا ويتم استخدامها بكثرة، وهي Swiper: https://swiperjs.com/swiper-api

نعم، باستطاعتك إنشاء متحكم مع العارض بلغات متعددة مع استقبال API في إطار العمل Laravel 5 باستخدام خاصية Localization. أولاً، يجب تفعيل Localization بواسطة تغيير قيمة locale في ملف التكوين config/app.php. يمكن تعيين locale إلى اللغة الافتراضية التي تريد استخدامها. ثم، يمكن إنشاء عارض لكل لغة تريد دعمها وتخزينه في المجلد resources/views، مثلاً resources/views/arabic و resources/views/english. من ثم، يمكن إنشاء متحكم وربطه بالعارض للغة المطلوبة باستخدام الدالة view() في الدالة المناسبة في المتحكم. بعد ذلك، يمكن استخدام API لاستقبال البيانات وإرجاعها باللغة المطلوبة باستخدام الدالة response() في المتحكم. على سبيل المثال، يمكن كتابة الكود التالي في المتحكم: public function show($id) { $post = Post::findOrFail($id); if (request()->wantsJson()) { return response()->json([ 'title' => $post->title, 'body' => $post->body, ]); } else { return view('post.show')->with(['post' => $post]); } } هذا الكود يقوم بعرض مقال معين باستخدام العارض post.show إذا تم طلب عرض HTML، ويقوم بإرجاع JSON إذا تم طلب عرض API. يمكن أيضاً استخدام الخاصية Localization في روابط API باستخدام الدالة url() وإضافة قيمة locale إلى الرابط، مثلاً: $url = url('api/post/' . $id, ['locale' => 'ar']); هذا الرابط يحتوي على قيمة locale التي تدل على اللغة العربية.