Mustafa Suleiman

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

ما هو الخطأ الذي يظهر لك؟

بالطبع القديمة، أهم نقطة في التصميم هو تجربة المستخدمة UX، فالجمالية لا تعني شيء في حال لم تعمل على خدمة المستخدم. في التصميم الجديد من الصعب قراءة النصوص وأيضًا لا يوجد مساحات بيضاء لتوزيع التصميم بشكل جيد في الصفحة، على عكس التصميم القديم المتموضع في المنتصف وأيضًا التباين به جيد أي بين الخلفية والنص ليسهل قراءته، لكن من الأفضل تعديل اللون للون حديث وهاديء أكثر. فمثلاً اللون في التصميم الجديد لا بأس، لكن من الأفضل استخدام التالي للخلفية #f7f7f8 وللنص استخدم #000

بخصوص أفضل الممارسات، فتلك ليست الطريقة المناسبة، الإعتماد على حجم الشاشة لتعيين الخط أمر يسبب مشاكل غير متوقعة بطبيعة الحال حيث لا تستطيع التحكم في ذلك بشكل كامل، فلا يوجد حد أدنى أو حد أعلى لمدى حجم الخط والأمر يظهر بشكل جلي في الشاشات الصغيرة و الشاشات الكبيرة، أيضًا لو قمت بعمل تقريب للصفحة فلن يزداد حجم الخط في حال كان مساوي لـ 80vw مثلاً وستزداد النصوص التي أقل من ذلك. بالتالي الطريقة الحديثة هي استخدام دالة clamp والصيغة الخاصة بها كالتالي: font-size: clamp(MIN, VALUE, MAX); MIN: الحد الأدنى لحجم الخط. VALUE: القيمة المفضلة لحجم الخط والتي ستتغير حسب حجم الشاشة، أي القيمة التي نريدها للخط. MAX: الحد الأقصى لحجم الخط. وهناك أداة توفر لك القيم للنصوص المختلفة في موقعك، أي تقوم بتوليد القيم لك بناءًا على مساحة العرض وحجم الخط الذي تريده، وهي: utopia.fyi https://modern-fluid-typography.vercel.app/ وهناك حل آخر أُفضله، وهو إنشاء TYPOGRAPHY SYSTEM، بحيث يكون هناك نظام للخطوط متبع في كامل التصميم. أولاً عليك تحديد حجم الخط الأساسي للموقع ليصبح 10px، ونفعل ذلك بوضع القيمة التالية: html { font-size: 62.5%; } 62.5% من حجم الخط الأساسي أو الإفتراضي وهو 16px تصبح القيمة 10px. وذلك لتسهيل استخدام rem فحاليًا 1.8rem تعني 18px وبالتالي الاستخدام أصبح أسهل من أجل التجاوبية. بعد ذلك عليك تحديد مقاسات الخطوط في الـ TYPOGRAPHY SYSTEM وأحجامها font weight وأيضًا الـ line height وفي النهاية ستجد أنّ لديك نظام يشبه التالي: *** 01 TYPOGRAPHY SYSTEM - Font sizes (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 - font weight default: 400 medium: 500 semi-bold:600 bold: 700 - line height default: 1.5 medium: default paragraph: 1.5 الآن قم بإنشاء متغيرات مخصصة تستطيع استخدامها في كامل التصميم كالتالي: :root { --font-family: 'Noto Kufi Arabic', sans-serif; --font-color--white: #ebedf8; --font-color: #322143; --font-size: 1.8rem; --font-size-small: 1.4rem; --font-size-medium: 1.6rem; --font-weight--medium: 500; --font-weight--semi: 600; --line-height: 1.5; }

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

في حال تريد تعلم مكتبة للواجهة الأمامية مثل React، فذلك متاح بدورة جافاسكريبت وليس دورة تطوير واجهات المستخدم. فالأخيرة يتم بها شرح أساسيات لغات الويب وهي HTML, CSS, JS، ومشاريع عملية للتطبيق، مع شرح مكتبتي jQuery وبوتستراب أيضًا. وفي دورة جافاسكريبت يتم شرح إطارات ومكتبات وبيئات تشغيل أخرى: Node.js express.js react.js next.js react native ionic

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

تحتاج إلى إنشاء ملف vercel.json في مجلد المشروع الرئيسي Api، وكتابة التالي به: { "version": 2, "rewrites": [{ "source": "/(.*)", "destination": "/api" }] } وهو ملف إعدادات، والغرض منه هو إخبار vercel كيف يتم توجيه الطلبات وفي الكود قمت بتوجيه ذلك إلى مجلد api ستجد تفصيل هنا: https://vercel.com/guides/using-express-with-vercel

يتم إنشاء نسخة تجريبية staging من الموقع وهي بيئة اختبار منفصلة تحاكي بيئة الإنتاج (الموقع الفعلي) بشكل كبير، ويتم نشر التحديثات على بيئة staging أولاً قبل إطلاقها على بيئة الإنتاج. بعد التأكد من عمل التحديثات بشكل صحيح على بيئة staging، يتم نشرها على بيئة الإنتاج لكن يتعطل الموقع بضع دقائق لحين الإنتهاء من التحديث ويتم عرض صفحة جاري التحديث مثلاً أو وضع الصيانة وهكذا، مع اختيار وقت ليس به زوار بعدد كبير حسب إحصائيات الموقع. أما المواقع الكبيرة فتقوم مثلاً بتوجيه المستخدمين لسيرفر آخر أثناء التحديث ثم إعادة التوجيه للسيرفر الذي تم به التحديث، أي تحديث كل مجموعة من السيرفرات على حدة وأثناء تحديث مجموعة، تبقى المجموعات الأخرى تعمل بشكل طبيعي، وذلك يعرف باسم Blue-Green Deployment

من خلال تعليقه ثم إلغاء التعليق عندما تريد تشغيله مرة أخرى. تستطيع عمل comment للكود بتحديده ثم الضغط على CTRL + / في vscode وسيتم تعليق الكود بتعليق أحادي أي سطر سطر. ولو تريد تعليق أكثر من سطر أي block comment اضغط على shift + alt + A

ستجد توضيح لطريقة الاستخدام هنا: https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props

رسالة الخطأ معناها إن Next.js غير قادر على توليد صفحة ثابتة static render للمسار /api/properties/search وذلك لأنه يستخدم request.url وهو قيمة ديناميكية لا يمكن تحديدها وقت بناء المشروع. مسارات الـ API يتم تشغيلها على السيرفر عند طلبها بشكل افتراضي server-side rendered ولكن عندما تنشر التطبيق على Vercel، يحاول Next.js توليد مسارات الـ API بشكل ثابت وقت البناء، وهو أمر غير ممكن بسبب استخدام request.url. قم باستخدام دالة getStaticProps لتوليد المسار بشكل ثابت وقت البناء وستحتاج لتوفير قيمة افتراضية لـ request.url لأنها غير متاحة وقت البناء، وبإمكانك محاولة استخدام خيار revalidate في getStaticProps لإعادة توليد المسار عند كل طلب، فذلك يسمح لـ Next.js بإعادة توليد المسار بشكل ديناميكي عند كل طلب.

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

لتفهم ما يحدث، حاليًا أنتي في وضع REPL بداخل منفذ الأوامر وذلك اختصار لـ "Read-Eval-Print Loop"، ويشير إلى بيئة تفاعلية لتنفيذ التعليمات البرمجية، بحيث يتيح لك إدخال التعليمات البرمجية وتنفيذها في الوقت الحقيقي للتجربة، ولكن نقوم بكتابة أكواد بسيطة به حيث نكتب سطر سطر. وطالما أننا بداخل منفذ الأوامر أو shell IDE كالذي تستخدمينه، لا نستطيع تنفيذ أمر clear الخاص بحذف النصوص من الواجهة لتنظيفها. حيث يجب علينا الخروج من وضع REPL وتنفيذ ذلك الأمر، وذلك بالضغط على CTRL + C أو CTRL + Z ثم Enterl أو كتابة exit() لذا في حال تريدين تنفيذ الأمر مجيًا، نقوم باستخدام وحدة os والتي بها ميثود system كما تم التوضيح: import os os.system('clear')

ستحتاج أولاً للتخرج من الجامعة للعمل بالشركات، عدا ذلك تستطيع العمل عن بُعد Remotely. وللعمل على مواقع العمل الحر يجب أن يكون عمرك 18 سنة على الأقل. في الوقت الحالي من الأفضل التركيز على التخرج من الأكاديمية وبناء معرض أعمالك، ثم بعد تستطيع كتابة الـ CV وسيتم مساعدتك في ذلك الأمر.

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

تفقدت المستودع لديك، ولم تقم برفع ملفات التنسيقات والسكريبتات، أي مجلد assets، لأنك في ملف index.html تقوم باستيرادها: <link rel="stylesheet" href="assets/css/main.css" /> <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript> لذا أرجو منك رفع المجلد إلى المستودع. وتلك المصادر جيدة في تعلم Git:

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

الطريقة الصحيحة هي بإنشاء حساب على Google Search Console ثم إضافة موقعك وأرشفته يدويًا، مع إضافة الأمور الخاصة بالـ Technical SEO مثل خريطة الموقع (XML Sitemap) وملف Robots.txt. في باديء الأمر ستحتاج إلى الأرشفة يدويًا لكل صفحة تضيفها للموقع مثل المقالات، وبعد فترة شهر مثلاً سيتم أرشفة موقعك تلقائيًا، والأمر بطيء في البداية حتى يكتسب الموقع ثقة جوجل. مع العلم أنه ليس من اختصاصك نشر الموقع على جوجل وتلك تكلفة إضافية عليك الإنتباه إليها عند حساب تكلفة المشروع.

ما المقصود أنّ الموقع لا يظهر إلا عند كتابة الـ URL؟ تقصد في جوجل ؟ وما الحاجة إلى ذلك في مشروع التخرج؟

ليس كذلك يتم إضافة ملاحظة، أسفل الفيديو الخاص بالموضوع نترك تعليق سواء ملاحظات أو للسؤال.

أحيانًا تظهر تلك الرسالة وتعمل المنصة بشكل سليم، قم بالتجربة مرة أخرى وستجد أن الموقع يعمل، وعامًة خطأ 502 هو من جانب الخادم وليس منك أنت.

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

يعني أنك قمت بدراسة أساسيات بايثون وتحليل البيانات ومقدمة عن نمائج LLMS. ستحتاج إلى الإجابة على الأسئلة التالية، وقبل ذلك يجب التوضيح أنّ الفهم أمر و القدرة على التطبيق بمفردك أمر آخر تمامًا، فقد تتفهم الشرح لكن التطبيق عملي صعب بالنسبة لك بمفردك، حيث يجب الممارسة وليس المشاهدة والاستيعاب فقط في البرمجة: هل تستطيع إنشاء برنامج بسيط من خلال بايثون مثل لعبة X/O مثلاً أو أي برنامج؟ إن لم تستطع والأمر صعب في البداية المهم المحاولة، قم بالبحث على اليوتيوب عن مشاريع بايثون للمبتدئين. هل تفهمت لغة SQL بشكل جيد وتستطيع تنفيذ استعلامات متوسطة التعقيد؟ إن لم تكن كذلك ستحتاج إلى التمرن أكثر والتعمق بها. هل تفهمت ما معنى الـ API وتستطيع إنشائه من خلال Flask؟ هل تستطيع استخراج البيانات من الويب والتعامل مع ملفات CSV و Excel وبإمكانك التطبيق بشكل عملي بمفردك؟ تستطيع السؤال أسفل الدروس التي تحتاج إلى تمارين عليها وسيتم توفيرها لك.

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