اذهب إلى المحتوى

Adnane Kadri

الأعضاء
  • المساهمات

    5132
  • تاريخ الانضمام

  • تاريخ آخر زيارة

  • عدد الأيام التي تصدر بها

    51

كل منشورات العضو Adnane Kadri

  1. أظن أن ذلك في الحقيقة ميزة أليس كذلك؟ ففي أغلب كورسات الجافاسكربت يتم طرح كل مفهوم على حدة وهو الأمر الذي يزيد الطالب تشتتا ويقلل من اكتسابه في الدورة. فقد نجد مثلا درسا مستقلا تماما يختص بالتابع slice ثم آخر يختص بالتابع substring. في حين أن دروس أساسيات جافاسكربت في دورة تطوير التطبيقات باستخدام جافاسكربت يتم تجميعها بحسب المفهوم والسياق الذي تأتي فيه فنجد مثلا درسا يختص بالتعامل مع مصفوفة كنوع من البيانات، مسارا كاملا يختص بالتعامل مع الدوال بمجملها، الكائنات والأصناف وغيرها. هذا التقسيم يجعل الطالب يكتسب هاته المفاهيم في سياق منظم قادر على استيعابه بشكل بسيط. وحتى أن العودة الى هاته المفاهيم لمراجعتها سيكون سهلا جدا ولن يكون عليك البحث بين مئات الفيديوهات عن فكرة تم طرحها. سيضمن هذا تأسيسا قويا لمطور جافاسكربت محترف. ومع ذلك، فمحتوى الدورة كاملة يزيد عن 50 ساعة باجمالي 64 فيديو في مسار أساسيات الجافاسكربت فقط وأكثر من ذلك في مسارات أخرى.
  2. vite يقوم بذلك بشكل تلقائي، هل تقوم بتنفيذ الأمر npm run build لإعادة تحزيم ملفات الاصول بعد التعديل عليها؟ بطبيعة الحال فإنه لن يتم التقاط أي تعديل قبل هذا الأمر. من غير المنطقي ايضا التعديل على ملف في بيئة انتاجية، قم بذلك في بيئة التطوير ثم اعد رفع التحديثات.
  3. يحتمل أن التخزين المؤقت للملفات يتم على جهازك أيضا. جرب تعديل اسماء الملفات او طريقة استدعاءها. فالملفات على النحو: <link rel="stylesheet" href="{{ asset('css/app.css') }}" /> اجعلها كـ: <link rel="stylesheet" href="{{ asset('css/app.css') . '?d=' . time() }}" /> سيقوم هذا بجبر عدم التخزين المؤقت للملفات على المتصفح ايضا. (الأمر مؤقت فقط لاستعراض نتائجك، لا يجب عليك اعتماده بشكل دائم)
  4. بما أن لديك الوصول الى phpmyadmin فيمكنك تعديل كلمة المرور عن طريق حقن أخرى مشفرة بذات الخوارزمية التي هي BCrypt. يمكنك مثلا استعمال موقع bcrypt-generator لتوليد كلمة مرور مشفرة ابتداءا من واحدة تختارها. قم لاحقا بلصق الناتج في حقل password في الجدول المستهدف في phpmyadmin لديك. سيمكنك بعد هذا استعمال الكلمة الغير مشفرة لتسجيل دخولك بشكل عادي.
  5. تسمية الوسم kbd هي في الأصل اختصار للعبارة keyboard input element فهو من بين الوسوم التي تستعمل في الـ HTML الدلالي أو semantic html والذي هو معروف عن أنه يحسن محركات البحث. هذا الوسم هو وسم للدلالة على على الادخال النصي من لوحة المفاتيح. فإن كنا نحاول الاشارة الى طريقة لنسخ نص مثلا، فإن طريقة استعمال هذا الوسم للدلالة على الادخال الصحيح ستكون كـ: <p>اضغط <kbd>Ctrl</kbd> + <kbd>C</kbd> لنسخ نص</p>
  6. MERN هي تجميعة من أطر العمل والمكتبات المبنية على جافاسكربت JS-based وهي اختصار الأحرف الاولى من كل من: MongoDB React Express.js NodeJS في حين أن Django هو اطار عمل على لغة بايثون موجه لتطبيقات الويب في الأساس. يتيح لك إنشاء تطبيقات ويب شاملة full stack web apps دون الحاجة إلى تعلم الكثير في وقت واحد. وحتى أن الواجهة الأمامية تستخدم قوالب Django. وهو أسهل نسبيا مقارنة بتجميعة MERN. في Django يوجد ايضا الكثير من الأدوات المضمنة لمساعدة المبتدئين والمحترفين، مثل نظم المصادقة. التي لا تكون متوفرة عادة في MERN stack.
  7. ما تحاول القيام به غير منطقي فدورة بمقدار 360deg تمثل دورة كاملة لا تعبر إلا على 2π، نفس الأمر بالنسبة لأي مضاعف للدرجة 360 او 2π لطالما أن محور الدوران هنا هو المحور Y الثابت. فإذا أكمل العنصر مقدار 3π/4 من دورة أو 270 أو أي من مضاعفاتها فإنه سيحتاج مكملها إلى 2π فقط، وهو π/4 أو 90 أو أي من مضاعفاتها. الفكرة هنا، هي في أن الموضوع لا يجب أن يرى كدرجات. تخيل محور دوران العنصر كالمحور Y في الدائرة المثلثية. فأي موضع أصبح فيه العنصر من الدائرة، لن يخرج عن كونه ضمن الدائرة، ومهما كان عدد اللفات فهو سيعبر دوما عن نسبة معينة من لفة واحدة. أتخيل أنك تريد تطبيق حركية على عنصر بتزويدك للقيمة التي تسندها للدالة rotateY بمقدار معين، وقد واجهت مشكلة بسبب عدم امكانية تزويد القيمة بشكل متناهي. ان كنت تحاول تجنب هذا الموضوع، فلن يكون عليك إلا الاستفادة بشكل أو بآخر من الخاصية animation-iteration-count في css التي تحدد عدد مرات تكرار الدورة حتى توقف الحركة. من بين القيم التي تقبلها infinite. لمقاربة نفس النتيجة، أنشئ عنصرا: يقوم بالدوران حول المحور Y دورة كاملة. يسير في اتجاه عادي. يدور بشكل لا متناهي. إليك المثال: <div> Hsoub Academy </div> div{ background: red; animation: rotateDiv 5s linear infinite normal; } @keyframes rotateDiv{ 0%{ transform: rotateY(0deg); } 100%{ transform: rotateY(360deg); } } الخاصية animation
  8. جرب تعريف استعلام وسائط ينطبق على الشاشات الصغيرة او المستهدفة، بحيث يستعمل الخاصية الموجودة بالفعل في css الخاصية transform scale ويرفقها بالقيمة المناسبة @media only screen and (max-width: 600px) { body, html { transform: scale(0.8); } } الخاصية transform في css
  9. في Node، نسمي مجموع الحزم الذي تحتاجه حزمة ما لتشتغل بصورة صحيحة ولكنها لا تشمله عند التثبيت بـ Peer dependencies او تبعيات الأقران. أثناء التعامل مع هذا النوع من التبعيات قد لا نقوم أحيانا بتثبيت نسخة مناسبة من التبعية مع الحزمة الأب. هنا قد نشاهد مثل هاته الأخطاء. في مثل هاته الحالة، وبجانب ما اقترحه المدرب عمر، يمكنك ايضا جبر التثبيت عن طريق اضافة اللاحقة force الى امر التثبيت: --force تعرفي أكثر عن دليل ويب باك الشامل. اعرفي الفرق أكثر بين أنواع التبعيات في Node.
  10. لا يوجد قاعدة معينة يمكن من عليها تعديل اتجاه العناصر لأن الموضوع مرن جدا، وقد نجد كل مصمم يصف الموضوع بطريقة ما. ولكن بشكل عام قد تحتاج: جعل اتجاه الصفحة rtl بارفاق القيمة rtl للخاصية dir لعنصر html و body وأي عناصر يتم تجاوز هاته الخاصية فيها. ضبط محاذاة النصوص بجعلها text-align: right ضبط وعكس اتجاه العناصر المعومة، اي تلك التي تمتلك الخاصية float. تعديل تموضع العناصر التي تمتلك وضعية مطلقة. فان كانت تمتلك الخاصية left:0 اعطها right: 0 وهكذا. ضبط خواص الهوامش التلقائية على المحور x. فان كان عنصر ما يمتلك margin-left:auto يجب ان تصبح الخاصية margin-right:auto هذا بجانب انك قد تحتاج بعض التعديلات الجزئية الأخرى، التي تناسب العرض باللغة العربية مثلا.
  11. أظن أن الممارسة العملية وتطبيق الـ HTML نفسها لا يكون إلا مع أشياء اخرى من مثل CSS. ستجد أصلا أنك تمارس الـ HTML وتطبقها عمليا وتتدرب عليها بتعلمك لـ CSS. لأنك ستقوم بوصف تنسيقات معينة على عناصر كنت قد هيكلتها بالـ HTML. فالخطوة التالية ها هنا هي تعلم أساسيات CSS وممارشتها هي الأخرى. يمكنك الاستفادة من موسوعة حسوب بخصوص CSS، وأيضا مجموعة المقالات المنشورة على أكاديمية حسوب بخصوصها.
  12. لما لا تقوم مباشرة باستعمال العوامل المنطقية logical operators لخدمة هذا الغرض بتنفيذ كلا الشرطين مرة واحدة؟ يكون ذلك كـ: if( array_search($parent_domain,$domains) && array_search($ipaddress, $ips)) { echo "allowed"; } اعرف أكثر عن العوامل المنطقية في PHP
  13. مراقبات التقاطع او intersection observers هي واجهة برمجية في لغة جافاسكربت تقوم بتوفير امكانية لمراقبة عنصر معين ضمن الصفحة. من مثل: ان كان يظهر في ال Viewport. يمكن استعماله على سبيل المثال مثلما اشرت لاظهار قسم معين عند الانزلاق اليه من قبل المستخدم. يوجد حتى مكتبات من مثل wow.js التي تقوم على هاته الواجهة في الاساس. يمكنك ايضا بجانب ما اقترحه المدرب معاذ الاستعانة مباشرة بهاته المكتبات في الاستفادة من حركيات متعددة. بحيث يكون المحرك الاول للعملية هو ذات المفهوم.
  14. رغم أن الكثير من المطورين والموجهين يرون أن الوقت قد فات لتعلم jQuery وينبغي التقدم لتعلم أحد اطر عمل الواجهة الأمامية مثل React, Vue, Angular إلا أنه لا يخفى على احد الحجم الكبير من المواقع التي ماتزال تنشط على الـ jQuery والتي تحتاج معرفة بها للعمل عليها. أي ان تعلمها لا يزال شيئا اساسيا في العمل بجافاسكربت على الويب. فهي تفي بأغلب احتياجات الواجهة الأمامية. بعد هذا قد تحتاج التعمق أكثر فيها واختيار احد اطر العمل المذكورة لتعلمها والتخصص فيها.
  15. يتم العمل بشكل دائم على تحديث وإضافة مسارات جديدة. نستعمل أيضا الويب سوكيب لخدمة مفهوم الوقت الفعلي real time خلال مسارات مختلفة من الدورة. من مثل مساري بناء CMS و منصة الفيديوهات من خلال خدمة pusher.
  16. يمكنك من هذا السلوك فهم أن الحاوية الخاصة بالصورة والخاصة بالنص لا يتم اخفاءهما وإنما يتم حقن الصورة والفقرة فوقهما بشكل مباشر. بشكل يجعلها تظهر وكأنها فوق بعضها. ولتلافي هاته المشكلة، لنبحث عن السطر الذي نقوم فيه بحقن محتوى الى الحاوية بهما ونتأكد من تفريغها من اي محتوى سابق قبل حقنها بالمحتوى الجديد. من ملف main.js نبحث عن: sliderContainer.innerHTML += arrimg[i]; sliderContainer.innerHTML += `<p id="p-${i}">${i + 1} / ${arrimg.length}</p>`; ونكتب قبلهما مباشرة السطر: sliderContainer.innerHTML = ''; // ++++++++++++++++ sliderContainer.innerHTML += arrimg[i]; sliderContainer.innerHTML += `<p id="p-${i}">${i + 1} / ${arrimg.length}</p>`; ستلاحظ اختفاء المشكلة عند الضغط على زر next ولكن نفس الشيء سيبقى مستمرا عند الضغط على زر pre. نتفحص الشيفرات الخاصة بهما ونرى أننا لا نحقن اصلا اي محتوى في الحاوية، أرى أنك تقوم بتعليق الأسطر الخاصة بها لسبب ما: // sliderContainer.innerHTML += arrimg[i]; // sliderContainer.innerHTML += ` <p id="p-${i}"> ${i + 1} / ${ // arrimg.length // }</p> `; الغ تعليق هاته الأسطر، ولا تنسى اضافة السطر: sliderContainer.innerHTML = ''; قبلهما مباشرة ايضا. يفترض ان يحل هذا المشكل لديك.
  17. ما هي المشكلة التي تحدث تحديدا؟ تفحصت عارض الشرائح الخاص بك ولا يبدوا به اي مشكلة.
  18. يتم الإشارة بشكل دائم الى التحديثات الجوهرية خلال مسارات التطبيق العملي بجانب تحديث المستودعات الخاصة بها على github مثل مسار أساسيات لارافيل ومسار تطوير متجر لبيع الكتب واللذان يستعملان النسخة 8 منه. أما بالنسبة لتلك التي لا تؤثر في طريق سير المشروع او طريقة عمله فلا يتم الإشارة إلى تحديثها لأنها تستعمل مكونات ومعمارية لارافيل الأساسية وهاته الأخيرة ثابتة نسبيا منذ زمن ولم تطرأ عليها أي تغييرات. يتم ايضا خلال المسارات العملية تصويب بعض المشاكل التي تظهر بسبب استعمال نسخة غير تلك التي يستعملها المدرب من قبل فريق كامل من المدربين متواجد بشكل دائم للمتابعة مع الطلبة.
  19. يمكنك البحث عن نسخ مختلفة لـ vs code في متاجر التطبيقات مثل uptodown، يوجد مثلا Older versions of Visual Studio Code (Windows) | Uptodown. أو ايضا في تحديثات VS code حسب التوثيق الرسمي للبرنامج في تحديثات VS code، اختر تلك المناسبة لنظام التشغيل الخاص بك وقم بتحميلها وتثبيتها على جهازك.
  20. ما رسالة الخطأ التي تظهر تحديدا؟ ان كان يتم اخبارك ان imagecreatetruecolor غير معرف، حاول الغاء تعليق السطر ;extension=gd بملف إعداد php الملف php.ini بملفات xampp/php.
  21. الكائنات في علوم الحاسب بمجملها هي كيانات لها خواص معينة تعرف ضمن ازواج تسمى مفتاح وقيمة key-value. يمكن ان تكون قيمة الخاصية بيانات (عددا، سلسلة نصية .. الخ) او دالة (تسمى هاته الخاصية في هاته الحالة وظيفة او تابعا method). والكائنات هي الاخرى نمذجة لكيانات موجودة في الحقيقة. لنتخيل اي شيء يمتلك خواصا يسمى كائنا. فالسيارة كائن لها خواص: اللون نوع المحرك سعة المحرك اسم العلامة التجارية عدد الركاب ولها وظائف مثل: السير الكبح في جافاسكربت نعرفها وفق: const car = { brand: 'BMW', color: 'black', // ... , accelerate(/* ... */) { // ... }, }; يمكنك الاستزادة اكثر بقراءة ان كنت مشتركا باحدى دورات الاكاديمية فيمكنك مراجعة: دورة تطوير التطبيقات باستخدام JavaScript > أساسيات لغة JavaScript > الكائنات Objects
  22. webpack ومثله من هاته الادوات تسمى مجمعات ملفات او كتعبير افضل افضل مجمعات وحدات module bundler. فهي تقوم بتجميع عدد من ملفات الجافاسكربت، الـ HTML والcss لتجعلها في ملف واحد، وبهذه الطريقة ستتيح الكثير من الميزات الأخرى مثل: امكانية تقسيم الشيفرات وتجزئتها في بيئة عمل متكاملة. استخدام المحملات لتحميل وتفسير انواع معينة من الملفات مثل sass. فصل بيئة التطوير عن بيئة الانتاج بشكل تام. امكانية ضغط الملفات وتشويشها في بيئة الانتاج بشكل يجعلها اسرع في القراءة والتنفيذ من ناحية المتصفح واصعب من ناحية القراءة والتعديل عليها من قبل مطورين آخرين.
  23. تمعن جيدا في رسالة الخطأ وحاول فهم مضمونها. فالرسالة تحاول هنا اخبارك ان المتغير index الذي تحاول الوصول اليه غير معرف اساسا. وتشير رسالة الخطأ الى الموضع 13 من السطر 9 الموافق لـ: while (index < msgs.length) { ^^^^^^^ } يفترض ان يشير index الى فهرس معين صحيح؟ اظن ما تشير اليه في السطر 8 هو تصريح هذا المتغير. تأكد من اصلاح التصريح: let index = 0;
  24. يجب ان تقوم اولا ببناء الملفات الثابتة واخراج مجلد المشروع عن طريق تنفيذ امر البناء npm run build. يفترض ان يقوم هذا بإنشاء مجلد app او public او dist او ايا كان اسم مجلد ملفات المشروع بحسب ما تصفه في ملف اعداد webpack. بعد هذا قم اما برفع المجلد الناتج، او مجلد ملفات المشروع متضمنا لهذا المجلد. توجه بعد ذلك الى اعدادات المستودع من تبويبة settings. ثم من القائمة الجانبية اختر pages من قسم Build and deployment قم باعداد الصفحة واحفظ التغييرات. سيتم انشاء الصفحة بشكل مباشر، على انها ستظهر بعد دقائق.
×
×
  • أضف...