عبدالباسط ابراهيم

قام مصطفى شرح ال factory  بشكل ممتاز ولكن بالطبع، يمكننا توضيح مفهوم factory في لغة Dart من خلال بعض الأمثلة. لنفترض أن لدينا فئة بسيطة تسمى "Person" وتحتوي على بعض الخصائص مثل "الاسم" و "العمر". يمكن استخدام factory في هذه الفئة لإنشاء كائنات Person بطرق مختلفة.
على سبيل المثال، يمكننا استخدام factory لإنشاء كائن Person باستخدام بيانات JSON. ولتحقيق ذلك، يمكننا تعريف الدالة الاستاتيكية fromJson() في الفئة Person كما يلي:
class Person { String name; int age; Person(this.name, this.age); factory Person.fromJson(Map<String, dynamic> json) { return Person( json['name'] as String, json['age'] as int, ); } } ومن ثم، يمكننا استخدام هذا ال factory لإنشاء كائن Person من بيانات JSON بسيطة، كما يلي:
final json = {'name': 'Ahmed', 'age': 25}; final person = Person.fromJson(json); ويمكن استخدام factory في الفئة Person لإنشاء كائنات بمختلف الطرق، حسب الاحتياجات. على سبيل المثال، يمكننا استخدام factory لإنشاء كائن Person باستخدام اسم المستخدم والعمر على حد سواء، كما يلي:
class Person { String name; int age; Person(this.name, this.age); factory Person.fromUsernameAndAge(String username, int age) { return Person(username, age); } } ثم، يمكننا استخدام هذا ال factory لإنشاء كائن Person باستخدام اسم المستخدم والعمر، كما يلي:
final person = Person.fromUsernameAndAge('Ahmed', 25); باستخدام factory، يمكن تخصيص عملية إنشاء كائنات بطرق مختلفة، وتحديد الخوارزمية المستخدمة لذلك، وتحديد إذا ما كان يلزم إنشاء كائن جديد أو استخدام كائن موجود بالفعل. ويمكن استخدام factory في العديد من المجالات، مثل التحويل بين تنسيقات البيانات وإنشاء كائنات معقدة تتطلب خوارزميات معقدة.

نعم تم شرح كيفية التعامل مع الapi بشكل كامل في دورة الجافاسكربت كما أن تم التطبيق عليها في هذه الدورة في مسار التخاطب مع الخادم وفي المسارات التي تليه يوجد مشاريع عملية يستخدم بها ال API ومن خلال الإطلاع على المحتويات الخاصة بالدورة يمكنك معرفة ذلك
كما أن دورة  تطوير واجهات المستخدم يوجد بها شرح لهذا الموضوع من خلال ال jquery بحيث يتم شرح هذا الموضوع من خلال الكثير من التقنيات
كما أن هذا الموضوع لا يحتاج لدورة كاملة لتعلمه فإنه يمكنك من خلال عدة مقالات تعلمه ولكن ما توفره دورة الجافاسكربت هو تطبيق عملي على هذا الموضوع
 

تخبرك الرسالة أنك تستخدم بعض الموارد ال deprecated، وهي
navigator.userAgent navigator.appVersion navigator.platform لذلك يمكن الانتقال إلى استخدام `navigator.userAgentData` للوصول إلى معلومات المتصفح بدلاً من استخدام الخصائص المهجورة `navigator.userAgent` و `navigator.platform` و `navigator.appVersion`. يمكن استخدام هذا الأسلوب في المتصفحات الحديثة التي تدعم هذه الوظيفة مثل Chrome و Firefox و Edge.
فيما يلي مثال على كيفية استخدام `navigator.userAgentData` للحصول على معلومات المتصفح:
if (navigator.userAgentData) {   const uaData = navigator.userAgentData;   const browserName = uaData.brands.filter(brand => brand.brand === 'Google Chrome')[0].brand;   const browserVersion = uaData.brands.filter(brand => brand.brand === 'Google Chrome')[0].version;   console.log(`Browser: ${browserName}, Version: ${browserVersion}`); } else {   const userAgent = navigator.userAgent;   const browserName = userAgent.indexOf("Chrome") !== -1 ? "Google Chrome" : "Unknown";   const browserVersion = userAgent.substring(userAgent.indexOf("Chrome")).split("/")[1].split(" ")[0];   console.log(`Browser: ${browserName}, Version: ${browserVersion}`); } في هذا المثال، يتم فحص توفر `navigator.userAgentData` وإذا كانت متاحة، يتم استخدامها للحصول على اسم وإصدار المتصفح. يتم استخدام خاصية `brands` للحصول على مصفوفة من العلامات التجارية للمتصفحات وإصداراتها، ويتم استخدام `filter` للبحث عن ماركة متصفح محدد (في هذا الحالة Google Chrome)، ثم يتم عرض اسم المتصفح وإصداره.
إذا لم يكن `navigator.userAgentData` متاحًا، يتم استخدام `navigator.userAgent` للحصول على اسم وإصدار المتصفح. يتم استخدام `indexOf` للبحث عن "Chrome" في سلسلة معرف المستخدم، ثم يتم استخدام `substring` و `split` لاستخراج إصدار المتصفح.
يجب ملاحظة أن هذا المثال يستخدم `navigator.userAgentData` للحصول على اسم المتصفح وإصداره، ولكن يمكن استخدامه أيضًا للحصول على معلومات أخرى، مثل نوع جهاز المستخدم وهل يدعم الجهاز WebVR أو WebAR.

يمكنك استخدم الحزمة HijriDateLib لتحويل التواريخ الهجرية إلى Gregorian 
أولًا يجب تضمين ملف المكتبة في ملف php هكذا:
<?php require_once('hirji.class.php'); echo (new hijri\datetime()); يعرض: 8 شعبان 1436هـ
ويوجد العديد من الدوال بحيث يمكنك التحويل بين التواريخ المختلفة فمثلاً 
GregorianToHijri تحويل من التقويم الجريجوري (المعمول به حاليا في جميع الدول) إلى التقويم الهجري HijriToGregorian تحويل من التقويم الهجري إلى الجريجوي مميزات هذه المكتبة
التقويم الاصطلاحي في المكتبة مطابق تماما للتقويم المتعارف عليه عند الفلكيين ومطابق للتقويم عند شركة مايكروسوفت في جميع برامجها، ومطابق لكتاب تقويم القرون للفلكي صالح العجيري إمكانية حفظ واسترجاع تعديلات على التقويم بحيث تتناسب مع إعلان رمضان والأعياد وغير ذلك، ويتم حفظ هذه التعديلات وليست مؤقتة بحيث أن ما نشر في تاريخ معين يبقى بهذا التاريخ حتى بعد سنين. الجمع بين التقويمين الميلادي والهجري في سطر واحد من البرمجة مما يوفر ويضبط. استعمال مكتبة datetime التي تقوم بضبط فروق التوقيت تلقائيا. عرض التقويم الميلادي باللغة العربية في حالة اختيارها. دعم 20 لغة عالمية في أسماء الأشهر الهجرية.

يعتبر التجاوبية أصبحت أسهل من قبل بفضل استخدام التقنيات الجديدة مثل
استخدام نظام شبكي grid system أو ال flexbox  لترتيب العناصر بشكل منظم ومرن من خلال استخدامهما يمكنك بكل سهولة جعل التصميم متجاوب بدون كتابة media query  واحدة . استخدام وسائط الإعلام media queries لتطبيق قواعد CSS مختلفة بناء على خصائص الجهاز، مثل العرض والارتفاع. استخدام صور وأيقونات vector-based أو responsive images لضمان جودة عالية وحجم مناسب على كافة الشاشات. استخدام وحدات القياس النسبية حيث تساعد بشكل كبير في تحسين تجاوبية الموقع دراسة الخطوات السابقة بشكل مفصل يمكن أن يجعلك لا تستخد أي media query أبداً أي سيصبح الموقع متجاوب بدون تعديل منك النقاشات التالية بها العديد من الحلول
 

توجد ثلاث كلمات رئيسية في JavaScript يمكن استخدامها للإعلان عن المتغيرات: let و var و const. لكل كلمة رئيسية قواعد وتأثيرات مختلفة على كيفية استخدام المتغيرات التي تنشئها.
let: تعلن الكلمة الأساسية let عن متغير محلي محدد النطاق ، وتهيئته اختياريًا إلى قيمة.تعني Block-scoped أن المتغير متاح فقط داخل الكتلة التي تم الإعلان عنها فيها ، والذي يُشار إليه عادةً بأقواس معقوفة {}.
var: الكلمة الأساسية var تعلن عن متغير عام أو نطاق وظيفي ، وتهيئته اختياريًا إلى قيمة.نطاق الوظيفة يعني أن المتغير متاح فقط داخل الوظيفة التي تم الإعلان عنها فيها. المتغيرات العامة متاحة في جميع أنحاء التعليمات البرمجية الخاصة بك.
const: تعلن الكلمة الأساسية const عن متغير ثابت محدد النطاق وغير قابل للتغيير ، أي متغير لا يمكن إعادة تعيينه.تسمى الثوابت أيضًا "المتغيرات غير القابلة للتغيير" ، ولكن هذا تسمية خاطئة نوعًا ما لأنها في الواقع متغيرات - فقط متغيرات لا يمكن إعادة تعيينها.
للمزيد من التفاصيل والمعلومات يفضل الإطلاع على موسوعة حسوب حيث يوجد توثيق لل javascript ويوجد شرح لل  let و var و const من خلال هذا الرابط

هذا الخطأ سببه ال typescript ويحدث عندما لا نحدد نوع المصفوفة بشكل صريح ، سيتم تعيين نوع ضمني "أبدًا" في المكان. يشير النوع "أبدًا" إلى مصفوفة فارغة ومن ثم لا يمكن تعيين أي قيم. لذلك الحل هو تحديد النوع كالتالي
const [tasks, setTasks] = useState<any[]>([]);  

الكود المرفق في الملف يحتوي على خطئين إملائين هو عدم إضافة وسم الإغلاق بشكل صحيح حيث كتبت
<h1>javascript in browser<h1> <script> console.log('hello'); <script> بدلاً من 
<h1>javascript in browser</h1> <script> console.log('hello'); </script> لذلك لم يعمل بينما في الصورة المسبقه لا يوجد خطأ في الكود لذلك قم بتحديث الموقع وسيعمل بشكل سليم 

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

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

في كل الأحوال يجب عليك العمل حيث أن 
لإكتساب خبرات أكثر في مجال البرمجة تحتاج للعمل على مواقع حقيقية حيث تفيد
في تنظيم الوقت لوجود فترة زمنية محددة لتنفيذ المشروع وأيضاً ستتعلم العمل تحت ضغط   بناء profile قوي من خلال بناء هذه المواقع  التعرف بشكل أفضل على سوق العمل والعديد من المميزات الأخرى التي ستفيدك مع ميزة العمر القليل حالياََ لذلك الأفضل في جميع الأحوال هو العمل على مواقع العمل الحر ولكن مع ال 14 سنة ستقوم بعمل حساب ولكن باسم أخوك أو أ] شخص قريب لك ذلك هو الحل الوحيد بالنسبة لك 
ولكن لا تهمل أيضاً تعلم التقنيات والتطورات في مجالك

مزايا استخدام Filegroups عندما تكون
لديك كائنات قاعدة البيانات (tables, views) التي يتم الوصول إليها بكثرة : إذا كان لديك Filegroups متعددة وكانت البيانات منتشرة عبر القرص ، فيمكن لـ SQL Server الاستفادة من الخيوط المتوازية ، وهذا يعزز أداء قاعدة البيانات الخاصة بك.
قاعدة البيانات الخاصة بك تعمل بشكل ضعيف أثناء تجهيز قاعدة البيانات أو تحديثها ؛ يمكن أن تعمل Multiple threads بشكل متزامن لاسترداد البيانات الموزعة في Filegroups مختلفة
إذا وجدت تلفًا في كائنات مرتبطة ب Filegroups معينة في قاعدة بيانات  ، فيمكنك استعادة ال Filegroups هذه فقط لاستعادة البيانات بسرعة كبيرة. 
أما الفرق بين  (Primary Filegroup - Secondary/User-defined filegroups - Memory-optimized filegroup - FILESTREAM filegroup) كالتالي
Primary Filegroup:  هي مجموعة ملفات افتراضية. عندما نقوم بإنشاء قاعدة بيانات SQL جديدة ، يتم إنشاء ال Primary filegroupتلقائيًا. Secondary/User-defined filegroups: يتم إنشاؤها من قبل مستخدم. تُستخدم لإدارة بيانات قاعدة البيانات. إذا كنت تريد الاحتفاظ بالجداول التي يتم الوصول إليها بشكل كبير في أقراص أسرع ، فيمكنك إنشاء مجموعة ملفات ثانوية وجدول فيها.
Memory-optimized filegroup:  تستخدم لتخزين جداول OLTP في الذاكرة ومتغيرات الجدول و لإنشاء جدول مُحسَّن للذاكرة في قاعدة بيانات SQL ، يجب علينا إنشاء Memory-optimized filegroup
FILESTREAM filegroup: يتم إنشاؤها لاستضافة بيانات FILESTREAM و FILETABLES.

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

بالطبع إذا كان موقع كامل من ناحية ال frontend وال backend أي الموقع يحتاج لعمل backend بجانب ال frontend تحتاج أن تكون full stack أما بالنسبة لجودة العمل الخبرة ذلك يعتمد على ميزانية المشروع وطلب العميل 
ذلك لأن البداية في مجال ال frontend أسهل نسبياً من ال backend في البداية وليس عموماً
بالطبع ليس له دخل بعمل التصميم ولكن إذا كانت لديك الخبرة في ذلك وطلب العميل منك هذا العمل وله حساب إضافي فليس هناك مشكلة
في أي مجال يوجد خدمات جاهزة ولكن ليس الجميع يستطيع التعامل معها وليس الجميع يحتاج لخدمات جاهزة أيضاً بجانب أن هناك خدمات جاهزة أكثر في مجال ال frontend ولكن هناك الكثير من الوظائف المطلوبة
ليس هناك فرق إذا بدأت بأي مجال من الإثنين أولاً
ليس وظيفة ال frontend هي التصميم إنما من المفترض أن يستلم مبرمج ال frontend التصميم جاهز ويبدأ المبرمج في تكويد التصميم من خلال اللغات المختلفة مثل html css و JavaScript وبعض التقنيات الأخرى
يمكن لل backend
 التعامل مع قواعد البيانات 
بناء الواجهة الخلفية للموقع
تصميم API
التحقق من الحماية لموقع معين
والعديد من المهام المختلفة
يمكنك قراءة إجابات هذا السؤال للمزيد من المعلومات

هذه ليست مشكلة مع تثبيت redux أو مع الكود الخاص بك و لكن ال  createStore  تعتبر deprecated أي تم إستبدالها بخاصية جديدة configureStore من خلال ال reduxjs/toolkit package ويمكنك قراءة المزيد من المعلومات عن هذا الموضوع من خلال هذا الرابط
ويفترض أن يعمل المشروع بدون مشاكل ولكن ستظهر لك ال createStore كما في الصورة كتحذير أنها deprecated ويمكنك إزالة هذا التحذير عن طريق استدعائها من خلال الكود التالي
import { legacy_createStore as createStore} from 'redux'  

هناك العديد من الخطوات لتصبح محلل بيانات Data Analyst ليس فقط تعلم دورة بعينها ستجعل منك محلل بيانات محترف ولكن بدلاً عن ذلك سأخبرك بالخطوات ويمكنك بعدها البحث عن الدورة المناسبة لك
الإحصاء
لكل متخصص بيانات ، الإحصائيات والرياضيات ضرورية. لأنه بدون معرفة الإحصائيات والاحتمالات ، لا يمكن للمرء أن يفسر البيانات بشكل فعال.
تتضمن بعض الموضوعات الرئيسية الإحصائيات الوصفية والاستنتاجية. إذا كنت مبتدئًا تمامًا ، فيمكنك قضاء 2-3 أسابيع في إتقان هذه الموضوعات والعمل على بعض المشكلات للتجربة العملية. 
إكسل
يعد Excel أحد الأدوات المستخدمة على نطاق واسع لمعالجة البيانات وتحليلها بواسطة محللي البيانات. قد يكون لدينا العديد من الأدوات الأخرى للعمل مع البيانات ، ولكن حتى الآن ، فإن Excel له أهميته.
SQL
 يجب أن تكون على دراية بقواعد البيانات وإدارتها. يجب عليك تنفيذ عمليات CRUD على قاعدة بيانات الشركة. لهذا الغرض ، لا توجد أداة أخرى مرنة وقابلة للتوسع مثل SQL.
يجب أن تتقن بعض الموضوعات مثل عمليات الانضمام ، وعمليات الجدول ، والاتحادات ، والتجميع ، والترتيب ، والمزيد لإجراء تحليل فعال.
 أدوات ذكاء الأعمال Business Intelligence Tools
تعتبر أدوات ذكاء الأعمال أو ذكاء الأعمال من أكثر الأدوات استخدامًا لمحللي الأعمال ومحللي البيانات. يمكنك العمل عليها باستخدام Python و R و SQL أيضًا.
يتم استخدام ذكاء الأعمال في الغالب في لوحة المعلومات وإعداد التقارير وتصور البيانات. بعض أفضل أدوات ذكاء الأعمال بالنسبة لك في عام 2022 هي Tableau و PowerBL و Looker.
لغة البرمجة
نعم ، امتلاك لغة برمجة واحدة أو أكثر سيكون مفيدًا جدًا لك. على الرغم من أن بعض الشركات لا تهتم كثيرًا بلغة برمجة لأدوار المحلل ، إلا أن المعرفة الجيدة بها سيكون مفيدًا.
أوصي بشدة بتعلم Python  . حيث تقدم مكتبات قوية مثل numpy و pandas و mat plot lib
يمكن أن تساعد المعرفة القوية بهذه المكتبات في أن يكون تحليلك فعالًا وفي صلب الموضوع.

لتصبح مبرمج back end  محترف يجب عليك تعلم بعض المهارات (هناك عدة مسارات حسب اللغة التي ستتعلمها)
 كن على دراية جيدة بأساسيات هياكل البيانات والخوارزمية يتخطى معظم مطوري الويب هذه الخطوة ويتقدمون إلى أطر التعلم . ومع ذلك ، من الأفضل دائمًا معرفة
Data Structures & Algorithm . على الرغم من عدم التعمق في الأمر ، يجب أن تكون لديك فكرة أساسية عن العملية. يجب عليك مراجعة هياكل البيانات الأساسية ومكدس الخوارزميات ، وقائمة الانتظار ، والقائمة المرتبطة ، والشجرة ، والرسم البياني ، والتجزئة ، وخوارزميات الفرز والبحث ، والمفاهيم الأساسية الأخرى للبرمجة.
تعلم لغة برمجة واختر إطار عمل. يتطلب أن تصبح مطور ويب جهدًا ووقتًا وصبرًا.  لذلك حدد الجدول الزمني ولغات البرمجة الأساسية التي ترغب في تعلمها مثل Python و PHP و Ruby و JavaScript 
تعلم أساسيات قواعد البيانات. ستكون إضافة نظام قاعدة بيانات إلى محفظتك هي الخطوة المنطقية التالية. هناك العديد من أنظمة إدارة قواعد البيانات الارتباطية سهلة الاستخدام المتاحة والتي يمكنك تحديد أحدها. تتميز جميع مواقع الويب تقريبًا اليوم بنوع من التخزين ، لذا فإن التعرف على قواعد البيانات مفيد دائمًا.
 تعلم الإطار (الأطر) اعتمادًا على لغة البرمجة التي تختارها ، يمكنك تعلم أساسيات إطار عمل واحد على الأقل. سواء كان ذلك Django أو Ruby-on-Rails ؛ معظم أطر العمل تتبع نفس مبدأ MVC (Model-View-Controller). على الرغم من أن كتابة كود التطبيق بالكامل بلغة برمجة مسموح بها ، إلا أن الأمر يتطلب المزيد من الجهد والوقت والترميز المكثف. حيث إن استخدام الإطارات يتيح لك إنشاء قوالب وأكواد يمكن إعادة استخدامها لاحقًا. هذا يقلل من سطور التعليمات البرمجية المطلوب منك كتابتها. حتى تصبح أكثر كفاءة. هذا هو السبب في أن تعلم إطار عمل فكرة جيدة أيضًا.
ابدأ تدريبك العملي. لن تفهم كيف تعمل الأشياء حقًا حتى تبدأ في فعل ذلك عمليًا. تحتاج إلى استخدام الأدوات والممارسات بانتظام لفهم المعرفة الأخلاقية التي تعلمتها حتى الآن بشكل أفضل. أفضل طريقة للقيام بذلك هي العمل في مشاريع صغيرة أو مهام. يمكنك البدء بتنفيذ مشاريع مثل قائمة مهام بسيطة ، أو مدونة بسيطة ، أو تطبيق ويب لمعرض الصور ، أو منشئ استئناف ، أو تطبيق أساسي لإدارة المشاريع ، وما إلى ذلك.

يمكنك أيضاً استخدام الحزمة tabulate كما في المثال التالي
أولاً نقوم بثبيتها
pip install tabulate ثم يمكنك استخدامها 
import pandas as pd from io import StringIO from tabulate import tabulate c = """Chromosome Start End chr1 3 6 chr1 5 7 chr1 8 9""" df = pd.read_table(StringIO(c), sep="\s+", header=0) print(tabulate(df, headers='keys', tablefmt='psql')) +----+--------------+---------+-------+ | | Chromosome | Start | End | |----+--------------+---------+-------| | 0 | chr1 | 3 | 6 | | 1 | chr1 | 5 | 7 | | 2 | chr1 | 8 | 9 | +----+--------------+---------+-------+ وإذا كنت تريد الطباعة على هيئة markdown يمكنك استخدام الدالة DataFrame.to_markdown أو Series.to_markdown 
وإذا كنت تريد الطباعة على هيئة html يمكنك استخدام الدالة  DataFrame.to_html  أو Series.to_html.
 

هل تقصد أنك تريد إزالة ال Query Params عند الضغط على الزر ؟
إذا كان كذلك يمكنك استخدام الدالة router.replace كالتالي
const router = useRouter(); router.replace("/about", undefined, { shallow: true }); الرابط سوف يكون كالتالي فقط
/about  لاحظ أن ال shallow: true تسمح لك تحديث الرابط بدون تنفيذ دوال ال data fetching 
يمكنك القراءة أكثر عن الموضوع من خلال موقع next تحت عنوان Shallow Routing

تعتبر الدالة render من ال life-cycle في react وتعتبر من ال life-cycle المهمة ويتم استدعائها من خلال react عند عمل إنشاء المكون وأثناء التحديثات بدون تدخل منك
والوظيفة الأساسية لهذه الدالة هو تقديم كود ال JSX  إلى ال DOM ولكن بعد القيام بعدة عمليات معالجة للكود
حيث أن كود ال JSX لا يتم تقديمه كما هو لل DOM إنما يتم تحويله لكود مشابه للتالي
React.createElement(tag, props, children) حتى يتم تقديمه لل DOM

ببساطة لكل loader مهمة مختلفة حيث أن
CSS Loader يقوم بمعالجة ملفات css فقط في حالة وجود ()url أو imports أما ال style-loader فهو المسئول عن إضافة التنسيقات إلى صفحات الويب وتطبيقها من خلال الوسم styel كما في المثال التالي  <style type="text/css"> body { background: yellow; } </style>    لذلك كما ترى لكل منهما وظيفة مختلفة وينبغي عليك استخدامهما معاً

يمكنك استخدام الحل التالي
نقوم بحذف العناصر المتشابه من df2 ثم نقوم بعمل merge لل df1 مع df2 كما في المثال التالي df1 = pd.DataFrame(data = {'col1' : [1, 2, 3, 4, 5, 3], 'col2' : [10, 11, 12, 13, 14, 10]}) df2 = pd.DataFrame(data = {'col1' : [1, 2, 3], 'col2' : [10, 11, 12]}) df_all = df1.merge(df2.drop_duplicates(), on=['col1','col2'], how='left', indicator=True) الناتج يكون كالتالي
df_all col1 col2 _merge 0 1 10 both 1 2 11 both 2 3 12 both 3 4 13 left_only 4 5 14 left_only 5 3 10 left_only العناصر الغير مشتركة تكون كما في الناتج ليست both

لا تتوفر متغيرات البيئة التي يتم تحميلها من خلال .env.local إلا في بيئة Node.js ، مما يعني أنها لن تتوفر للمتصفح. من أجل عرض متغير على المتصفح أو في المكون ، عليك أن تسبق المتغير بـ NEXT_PUBLIC لذلك قم بتسميته 
NEXT_PUBLIC_API = ... بدلاً من 
API = ...  

إذا كنت لا تعلم المقاسات width أو height يمكنك استخدام ال layout=fill حتى تأخذ الصورة نفس مقاس ال container كما في المثال التالي
<div style={{ position: "relative", width: "100%", paddingBottom: "20%" }} > <Image alt="Image Alt" src="/image.jpg" layout="fill" objectFit="contain" //container تأخذ أقل حجم ليتناسب مع ال /> </div>  

هناك بعض الإختلافات البسيطة بينهم كالتالي
Express-handlebars تعتبر هذه الحزمة هي الأشهر والأكثر إستخداماً فهي كما أن لديها توثيق جيد لكل الخصائص الموجودة بها كما أن أحد الاختلافات مقارنة بالحزم الأخرى هو القدرة على استخدام Hooks
hbs يعتبر من أسهل حزمة إدارة القوالب في الموقع كما تعطيك تقريباً نفس الخصائص الموجودة ب Express-handlebars  ، ولكن النشاط الأخير كان قبل 4 أشهر. أي لم تعد تحدث كما في Express-handlebars
  express-hbs  يمكن أن تستخدم مع كل من الإصدارات express 3/4. والميزة في هذه الحزمة أنها تدعم i18 n لذلك إذا كنت تحتاج لذلك سيكو ن خيار جيد ، بالرغم أنه من السهل دمج i18 n في الحزم الأخرى  لذلك لا تعتبر ميزة تختار من أجلها هذه الحزمة