Mustafa Mahmoud7

text-align : تستخدم هذه الخاصية لمحازاة النص أفقيا داخل العنصر أو محازاة العناصر السطرية مثل span و img وa وتأخذ عدة قيم مثل center - left - right. حالة كانت قيمتها right ستكون المحازاة للنص يمينيا ، وإذا كانت left تكون المحازاة للنص يسارا، وإذا كانت center تكون المحازاة في منتصف العنصر لاحظ هذا الكود والقيمة التي ذكرتها <div> <p style="text-align: right; background-color: blue;">النص في اليمين</p> <p style="text-align: center; background-color: yellow;">النص في المنتصف</p> <p style="text-align: left; background-color: red;">النص في اليسار</p> </div> تكون النتيجة له كالأتي line-height: تستخدم هذه الخاصية للتحكم في المسافة العمودية بين أسطر النص داخل عنصر معين. وتأخذ قيمة عن طريق وحدات نسبية من حجم الخط في هذا العنصر في حالة مثلا كانت القيمة له 1.5 وحجم الخط الافتراضي للعنصر 16px لذلك ستكون قيمة الـine-height هي 24px ويمكن كتابة القيمة بوحدة الـ pixel لا مشكلة ولكن يفضل أن تكون نسبية لاحظ الكود <div> <p style="background-color: rgb(45, 205, 233); line-height: 1.5;">Lorem ipsum dolor sit amet consectetur, adipisicing elit.Voluptate suscipit quaerat,vero consequuntur aut sequi iure velit dolorum corrupti aliquam, natus veniam eum quod illum assumenda doloremque, excepturi ea! Cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis distinctio minima ab, sapiente hic quasi similique ipsam nesciunt eaque et asperiores, in minus corporis temporibus officiis suscipit natus quis amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur illum odio ratione. Enim a rerum quidem soluta maxime eos. Laudantium culpa eaque alias natus ea dignissimos ratione saepe quis quasi?</p> <p style="background-color: rgb(233, 167, 45); line-height: 2;">Lorem ipsum dolor sit amet consectetur, adipisicing elit.Voluptate suscipit quaerat,vero consequuntur aut sequi iure velit dolorum corrupti aliquam, natus veniam eum quod illum assumenda doloremque, excepturi ea! Cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis distinctio minima ab, sapiente hic quasi similique ipsam nesciunt eaque et asperiores, in minus corporis temporibus officiis suscipit natus quis amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur illum odio ratione. Enim a rerum quidem soluta maxime eos. Laudantium culpa eaque alias natus ea dignissimos ratione saepe quis quasi?</p> <p style="background-color: rgb(253, 107, 155); line-height: 2.5;">Lorem ipsum dolor sit amet consectetur, adipisicing elit.Voluptate suscipit quaerat,vero consequuntur aut sequi iure velit dolorum corrupti aliquam, natus veniam eum quod illum assumenda doloremque, excepturi ea! Cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis distinctio minima ab, sapiente hic quasi similique ipsam nesciunt eaque et asperiores, in minus corporis temporibus officiis suscipit natus quis amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur illum odio ratione. Enim a rerum quidem soluta maxime eos. Laudantium culpa eaque alias natus ea dignissimos ratione saepe quis quasi?</p> </div> تكون النتيجة له كالأتي لاحظ المسافات بين الأسطر وإذا قمت بتغير حجم الخط للعنصر وكنت تستخدم القيمةللـ line-height بشكل نسبي ستتغيير بالطبع قيمة الـ line-height. للمزيد حول هاتين الخاصيتين يمكنك الإطلاع عليهم في موسوعة حسوب https://wiki.hsoub.com/CSS/text-align https://wiki.hsoub.com/CSS/line-height

ما هو العنصر الذي يكون undefined يرجى لصق الأكواد كاملة مع لصق الخطأ الذي يظهر لك أيضا لمعرفة المشكلة بشكل دقيق. تأكد من أن لديك بيانات فعلاً في datePro قبل محاولة استخدامها في عرض الجدول. تأكد من أن الكائنات في datePro تحتوي على الخصائص التي تحاول الوصول إليها (مثل name وPhone وlocation). في سطر 42 قم بتهيئة سلسلة فارغة للجدول let table = "";

لرفع المشاريع على github يتوجب عليكي عمل حساب على موقع Github ثم انشاء مستودع لكل مشروع بشكل منفصل وتنزيل برنامج git على الحاسوب وعمل مستودع محلي للمجلد ورفع المشروع من المستودع المحلي للمستودع الذي قمنا بإنشاءه في موقع Github ستجدي تفصيل أكثر حول رفع المشاريع في الإجابة التالية

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

يظهر خطأ 404 عند تشغيل مشاريع React على GitHub Pages غالباً بسبب إعدادات غير صحيحة لملفات المسارات. لاحظ في ملف package.json في السطر الثاني حقل homepage: { "homepage": "https://obada-rabah.github.io/Notes", ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ هذا الرابط لا يتطابق مع رابط المستودع الخاص بك على GitHub Pages لتصحيح هذا عدل الرابط ليصبح مطابقًا للرابط الفعلي لمشروعك على GitHub Pages: { "homepage": "https://obada-rabah.github.io/Notes-app", ثم قم بإعادة النشرة من جديد وسيعمل معك.

يمكنك التواصل مع مركز المساعدةوشرح لهم المشكلة التي تواجهك بشكل مفصل وسيتم حلها بالتأكيد.

نعتذر عن أي قصور في توفير تحديثات لبعض التقنيات التي تعمل عليها نظرا لتسارع التحديثات لهذه التقنيات كما أشرت لك. يمكنك التواصل مع مركز المساعدة لمعرفة مواعيد التحديثات القادمة. شكرا لتفهمك...

صحيح أن تطبيقات ضخمة مثل Facebook وInstagram وUber تعتمد على React Native، وأن العديد من المواقع الكبيرة تعمل بـ React.js. ولكن يجب أن نأخذ في الاعتبار أن Facebook وغيرها من الشركات الكبرى لديها فرق عمل ضخمة تتمتع بخبرة عالية. هذه الفرق قادرة على تنظيم العمل وترتيب الملفات بشكل جيد، كما أنها تستخدم أسلوب عمل مخصص يساعدهم في اختيار المكتبات المناسبة لكل جزء من المشروع دون أن يؤثر ذلك سلبًا على أداء التطبيق ككل إذا كنت تعمل على مشروع كبير ولديك الخبرات الكافية فيمكن استخدام React بالطبع. على الجانب الآخر، Angular يأتي مدمجًا مع مكتبات وميزات متكاملة، مثل Dependency Injection وRouting و httpClient مما يوفر راحة للمطورين والفرق الصغيرة. إذ أنه يزيل عبء المفاضلة بين المكتبات المختلفة ويوفر إطار عمل شامل يتيح لك البدء بسرعة دون الحاجة للبحث عن أدوات إضافية. إذا كان المطور مرتاحًا مع React، فمن الأفضل أن يطور مهاراته في هذا الإطار حيث إنه مطلوب بشكل كبير في سوق العمل. التخصص في React يوفر فرصًا أكبر ويتيح له الانتقال بسهولة إلى React Native أيضًا. يمكن أن يكون Angular خيارًا جيدًا لبعض المشاريع الكبيرة في المستقبل وعند عملك بإطار عمل يسهل عليك الإنتقال بينهم حيث يكون لديك كل المفاهيم الأساسية لكيفية عمل الإطار. ستستفيد بالطبع من المميزات التي تقدمها Typescript من وضع أنواع ثابتة للمتغيرات والتعريف لشكل البيانات لكل مكون مما يوفر لك التحقق من الأنواع و يساعد في تقليل الأخطاء أثناء التطوير ويجعل الكود أكثر وضوحًا وصيانة.

توجد أطر عمل كثيرة في الواجهة الأمامية، مثل Angular وReact وVue.js. عند اختيار الإطار المناسب، نقوم بالتركيز على Angular وReact يتم النظر إلى عدة عوامل رئيسية. الشعبية: تحتل React المرتبة الأولى في أطر العمل الخاصة بالواجهة الأمامية، مما يجعلها خيارًا شائعًا بين المطورين. سهولة التعلم: يُعتبر React سهل التعلم، حيث يمكن للمطورين الذين يتقنون JavaScript الانتقال إليه بسهولة دون الحاجة إلى تعلم TypeScript. هناك العديد من المكتبات المتوافقة مع React، مما يسهل بناء التطبيقات. بعد تعلم React يمكنك الانتقال مباشرة إلى React Native،الذي يُستخدم لبناء تطبيقات الموبايل حيث إنه مبني على React وأيضا React يمكن استخدام TypeScript معها إن أردت لا مشكلة في ذلك. تنظيم المشروع: يتطلب React منك تنظيم الملفات بنفسك وتثبيت المكتبات التي تفضلها مثل Axios لعملية إرسال الطلبات و React Router DOM للتوجيه بين المكونات ، مما يمنحك مرونة كبيرة. في المقابل، يعتمدAngular بشكل إلزامي على TypeScript ويأتي مدمجًا مع العديد من المكتبات التي تُستخدم أثناء التطوير وعلى الرغم من أنك تستطيع تثبيت مكتبات إضافية، يُفضل استخدام المكتبات المدمجة. المتطلبات المسبقة: يحتاج Angular إلى معرفة سابقة TypeScript وأساليب التصميم مثل المزخرفات (Decorators) وحقن التبعية (Dependency Injection) وعملية التوجيه (Routing). من المهم فهم هذه المفاهيم، مما يجعل Angular يتطلب وقتًا أطول في التعلم مقارنةً بـ React. بشكل عام، يتمتع كل من React وAngular بخصائص قوية تناسب مختلف المشاريع. React مناسب للمبتدئين والمشاريع الصغيرة إلى المتوسطة، بينما يُفضل Angular في المشاريع الكبيرة التي تتطلب هيكلًا تنظيميًا قويًا ومعرفة مسبقة. يمكنك النظر لهذه المقالات لمعرفة الإختلافات أكثر

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

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

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

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

إذا كان هذا السؤال خاصة بأحد دروس الأكاديمية، في المرات القادمة ستجد أسفل فيديو الدرس في نهاية الصفحة صندوق تعليقات كما هنا، أرجو طرح الأسئلة أسفل الدرس وليس هنا في قسم الأسئلة البرمجة حيث نطرح الأسئلة العامة الغير متعلقة بمحتوى الدورة أو الدرس، وذلك لمساعدتك بشكل أفضل. في ملف index.js سطر 3 وجود الفاصل المنقوطة (;) بعد جملة ;while (i < 10) بهذا الشكل while (i < 10); { ^ console.log(i); i++; } تؤدي إلى أنه كتلة while تصبح فارغة والكتلة التي تأتي بعدها غير مرتبطة بها،تجنب وضع فاصلة منقوطة بعد جملة while إذا كنت تريد أن تُنفذ الكتلة كجزء من الحلقة لذلك قم بإزالة هذه الفاصلة. في سطر 7 أيضا حيث أن المتغير ahmed هذا غير موجود وسيؤدي إلي خطأ بالكود نقوم بتعديله ليصبح قيمة نصية ليصبح الكود بعد التعديل كالأتي let i = 3; while (i < 10) { console.log(i); i++; } let a = 'ahmed'; console.log(a); بعد هذه التعديلات سيتم طباعة الأرقام من 3 إلى 9 ثم ahmed، وأيضا عند فتح التبويت console نقوم بفتح الـ messages حيث فيها يتم طباعة النتيجة والخطأ معا

الحالة الأولى الطبقة الوسيطة وملف taskaties/route.ts ليس به مشكلة يبدو أن المسارات الأخرى الخاصة بواجهات المستخدم لا تعمل بشكل صحيح وتعيد صفحة notFound. الحالة الثانية المشكلة تكمن في هذا الإعداد config export const config = { matcher: ['/((?!api|_next|.*\\..*).*)'], } يستثني جميع المسارات التي تبدأ بـ /api أو / _next ولا يتم تفعيل الطبقة الوسيطة عليها أبدا حيث أن الملف taskaties بداخل مجلد api ونحن نريد الطبقة الوسيطة مع التأكد من أن المسار يبدأ api/taskaties/ if (!token && request.nextUrl.pathname.startsWith("/api/taskaties")) { ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ /*باقي الكود*/ } لذلك نقوم بتغيير الإعداد config وتعديله لكي لا يتم استثناء تطبيق الطبقة الوسيطة على أي مسار يبدأ بـ api/ كالأتي export const config = { matcher: ['/((?!_next|.*\\..*).*)'], // إزالة استثناء `/api` }; مع تعديل الطبقة الوسيطة لتصبح كالأتي export const config = { matcher: ['/((?!_next|.*\\..*).*)'], // إزالة استثناء `/api` }; export function middleware(request: NextRequest) { const token = request.cookies.get('jwtToken')?.value; if (!token && request.nextUrl.pathname.startsWith("/api/taskaties")) { return NextResponse.json( { message: 'No Token Provided, Access Denied!' }, { status: 401 } ); } // السماح لبقية الطلبات بالمرور return NextResponse.next(); } export default createMiddleware({ locales: ["en", "fr", "ar"], defaultLocale: "ar", });