Adnane Kadri

في Node، نسمي مجموع الحزم الذي تحتاجه حزمة ما لتشتغل بصورة صحيحة ولكنها لا تشمله عند التثبيت بـ Peer dependencies او تبعيات الأقران. أثناء التعامل مع هذا النوع من التبعيات قد لا نقوم أحيانا بتثبيت نسخة مناسبة من التبعية مع الحزمة الأب. هنا قد نشاهد مثل هاته الأخطاء. في مثل هاته الحالة، وبجانب ما اقترحه المدرب عمر، يمكنك ايضا جبر التثبيت عن طريق اضافة اللاحقة force الى امر التثبيت: --force تعرفي أكثر عن دليل ويب باك الشامل. اعرفي الفرق أكثر بين أنواع التبعيات في Node.

لا يوجد قاعدة معينة يمكن من عليها تعديل اتجاه العناصر لأن الموضوع مرن جدا، وقد نجد كل مصمم يصف الموضوع بطريقة ما. ولكن بشكل عام قد تحتاج: جعل اتجاه الصفحة rtl بارفاق القيمة rtl للخاصية dir لعنصر html و body وأي عناصر يتم تجاوز هاته الخاصية فيها. ضبط محاذاة النصوص بجعلها text-align: right ضبط وعكس اتجاه العناصر المعومة، اي تلك التي تمتلك الخاصية float. تعديل تموضع العناصر التي تمتلك وضعية مطلقة. فان كانت تمتلك الخاصية left:0 اعطها right: 0 وهكذا. ضبط خواص الهوامش التلقائية على المحور x. فان كان عنصر ما يمتلك margin-left:auto يجب ان تصبح الخاصية margin-right:auto هذا بجانب انك قد تحتاج بعض التعديلات الجزئية الأخرى، التي تناسب العرض باللغة العربية مثلا.

أظن أن الممارسة العملية وتطبيق الـ HTML نفسها لا يكون إلا مع أشياء اخرى من مثل CSS. ستجد أصلا أنك تمارس الـ HTML وتطبقها عمليا وتتدرب عليها بتعلمك لـ CSS. لأنك ستقوم بوصف تنسيقات معينة على عناصر كنت قد هيكلتها بالـ HTML. فالخطوة التالية ها هنا هي تعلم أساسيات CSS وممارشتها هي الأخرى. يمكنك الاستفادة من موسوعة حسوب بخصوص CSS، وأيضا مجموعة المقالات المنشورة على أكاديمية حسوب بخصوصها.

لما لا تقوم مباشرة باستعمال العوامل المنطقية logical operators لخدمة هذا الغرض بتنفيذ كلا الشرطين مرة واحدة؟ يكون ذلك كـ: if( array_search($parent_domain,$domains) && array_search($ipaddress, $ips)) { echo "allowed"; } اعرف أكثر عن العوامل المنطقية في PHP

مراقبات التقاطع او intersection observers هي واجهة برمجية في لغة جافاسكربت تقوم بتوفير امكانية لمراقبة عنصر معين ضمن الصفحة. من مثل: ان كان يظهر في ال Viewport. يمكن استعماله على سبيل المثال مثلما اشرت لاظهار قسم معين عند الانزلاق اليه من قبل المستخدم. يوجد حتى مكتبات من مثل wow.js التي تقوم على هاته الواجهة في الاساس. يمكنك ايضا بجانب ما اقترحه المدرب معاذ الاستعانة مباشرة بهاته المكتبات في الاستفادة من حركيات متعددة. بحيث يكون المحرك الاول للعملية هو ذات المفهوم.

رغم أن الكثير من المطورين والموجهين يرون أن الوقت قد فات لتعلم jQuery وينبغي التقدم لتعلم أحد اطر عمل الواجهة الأمامية مثل React, Vue, Angular إلا أنه لا يخفى على احد الحجم الكبير من المواقع التي ماتزال تنشط على الـ jQuery والتي تحتاج معرفة بها للعمل عليها. أي ان تعلمها لا يزال شيئا اساسيا في العمل بجافاسكربت على الويب. فهي تفي بأغلب احتياجات الواجهة الأمامية. بعد هذا قد تحتاج التعمق أكثر فيها واختيار احد اطر العمل المذكورة لتعلمها والتخصص فيها.

يتم العمل بشكل دائم على تحديث وإضافة مسارات جديدة. نستعمل أيضا الويب سوكيب لخدمة مفهوم الوقت الفعلي real time خلال مسارات مختلفة من الدورة. من مثل مساري بناء CMS و منصة الفيديوهات من خلال خدمة pusher.

يمكنك من هذا السلوك فهم أن الحاوية الخاصة بالصورة والخاصة بالنص لا يتم اخفاءهما وإنما يتم حقن الصورة والفقرة فوقهما بشكل مباشر. بشكل يجعلها تظهر وكأنها فوق بعضها. ولتلافي هاته المشكلة، لنبحث عن السطر الذي نقوم فيه بحقن محتوى الى الحاوية بهما ونتأكد من تفريغها من اي محتوى سابق قبل حقنها بالمحتوى الجديد. من ملف 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 = ''; قبلهما مباشرة ايضا. يفترض ان يحل هذا المشكل لديك.

ما هي المشكلة التي تحدث تحديدا؟ تفحصت عارض الشرائح الخاص بك ولا يبدوا به اي مشكلة.

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

يمكنك البحث عن نسخ مختلفة لـ vs code في متاجر التطبيقات مثل uptodown، يوجد مثلا Older versions of Visual Studio Code (Windows) | Uptodown. أو ايضا في تحديثات VS code حسب التوثيق الرسمي للبرنامج في تحديثات VS code، اختر تلك المناسبة لنظام التشغيل الخاص بك وقم بتحميلها وتثبيتها على جهازك.

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

ما رسالة الخطأ التي تظهر تحديدا؟ ان كان يتم اخبارك ان imagecreatetruecolor غير معرف، حاول الغاء تعليق السطر ;extension=gd بملف إعداد php الملف php.ini بملفات xampp/php.

الكائنات في علوم الحاسب بمجملها هي كيانات لها خواص معينة تعرف ضمن ازواج تسمى مفتاح وقيمة key-value. يمكن ان تكون قيمة الخاصية بيانات (عددا، سلسلة نصية .. الخ) او دالة (تسمى هاته الخاصية في هاته الحالة وظيفة او تابعا method). والكائنات هي الاخرى نمذجة لكيانات موجودة في الحقيقة. لنتخيل اي شيء يمتلك خواصا يسمى كائنا. فالسيارة كائن لها خواص: اللون نوع المحرك سعة المحرك اسم العلامة التجارية عدد الركاب ولها وظائف مثل: السير الكبح في جافاسكربت نعرفها وفق: const car = { brand: 'BMW', color: 'black', // ... , accelerate(/* ... */) { // ... }, }; يمكنك الاستزادة اكثر بقراءة ان كنت مشتركا باحدى دورات الاكاديمية فيمكنك مراجعة: دورة تطوير التطبيقات باستخدام JavaScript > أساسيات لغة JavaScript > الكائنات Objects

webpack ومثله من هاته الادوات تسمى مجمعات ملفات او كتعبير افضل افضل مجمعات وحدات module bundler. فهي تقوم بتجميع عدد من ملفات الجافاسكربت، الـ HTML والcss لتجعلها في ملف واحد، وبهذه الطريقة ستتيح الكثير من الميزات الأخرى مثل: امكانية تقسيم الشيفرات وتجزئتها في بيئة عمل متكاملة. استخدام المحملات لتحميل وتفسير انواع معينة من الملفات مثل sass. فصل بيئة التطوير عن بيئة الانتاج بشكل تام. امكانية ضغط الملفات وتشويشها في بيئة الانتاج بشكل يجعلها اسرع في القراءة والتنفيذ من ناحية المتصفح واصعب من ناحية القراءة والتعديل عليها من قبل مطورين آخرين.

تمعن جيدا في رسالة الخطأ وحاول فهم مضمونها. فالرسالة تحاول هنا اخبارك ان المتغير index الذي تحاول الوصول اليه غير معرف اساسا. وتشير رسالة الخطأ الى الموضع 13 من السطر 9 الموافق لـ: while (index < msgs.length) { ^^^^^^^ } يفترض ان يشير index الى فهرس معين صحيح؟ اظن ما تشير اليه في السطر 8 هو تصريح هذا المتغير. تأكد من اصلاح التصريح: let index = 0;

يجب ان تقوم اولا ببناء الملفات الثابتة واخراج مجلد المشروع عن طريق تنفيذ امر البناء npm run build. يفترض ان يقوم هذا بإنشاء مجلد app او public او dist او ايا كان اسم مجلد ملفات المشروع بحسب ما تصفه في ملف اعداد webpack. بعد هذا قم اما برفع المجلد الناتج، او مجلد ملفات المشروع متضمنا لهذا المجلد. توجه بعد ذلك الى اعدادات المستودع من تبويبة settings. ثم من القائمة الجانبية اختر pages من قسم Build and deployment قم باعداد الصفحة واحفظ التغييرات. سيتم انشاء الصفحة بشكل مباشر، على انها ستظهر بعد دقائق.

في خوادم Apache الانتاجية قد تحتاج توصيف ملف htaccess. للتوجيه الى ملف index.php مباشرة. محتوى الملف سيكون مشابها للخاص بمحتوى الملف في لارافيل كـ: <IfModule mod_rewrite.c> <IfModule mod_negotiation.c> Options -MultiViews -Indexes </IfModule> RewriteEngine On # Handle Authorization Header RewriteCond %{HTTP:Authorization} . RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}] # Redirect Trailing Slashes If Not A Folder... RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} (.+)/$ RewriteRule ^ %1 [L,R=301] # Send Requests To Front Controller... RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.php [L] </IfModule>

ما تصفه يسمى المسافة البادئة التلقائية أو Auto indent، ولتفعيل هاته الميزة في VS code نحتاج التوجه الى: الاعدادات Settings نتوجه الى خيار Auto indent من قسم Text editor نتأكد من تفعيل الخيار full نعيد تشغيل VS code

مبدئيا، لا أظن أنه يوجد حل للموضوع بشكل نهائي تماما. فقد يستعمل المستخدمون خادما وكيلا proxy للقيام بالطلبات من داخل دولة غير محظورة. ستبقى الطريقة الأكثر فعالية هي تحليل عنوان IP المستخدم للحصول على اسم البلد وحظرها. قد يساعدك استعمال Torann/laravel-geoip أو اي حزمة أو خدمة مشابهة.

من غير المنطقي ان لا تكون هنالك مشكلة ما، هلا أعدت مراجعة طريقة رفعك للمشروع على الاستضافة: سنستعين بـ github في هذا. أضف موقعا جديدا عبر الدخول الى لوحة التحكم الخاصة بك على netlify والضغط على new site from git من قسم continuions deployment اضغط على Github قم بإعطاء الاذن لـ netlify بالوصول الى github قم بتحديد المستودع الخاص بك بما في ذلك الأمر الذي تقوم به بتشغيل خادم webpack ومجلد dist في قسم public directory أكد الرفع deploy site ان كنت قد واجهة مشكلة باحدى هاته الخطوات يرجى الاشارة.

لا أظن ان المشكلة في vite فهو لا يهتم الا بتحزيم ملفات الأصول واخراجها. المشكلة في الغالب بسبب استعمال بروتوكول Https لطلب هاته الملفات. يفترض ان لا تجد اي مشكلة بخصوص طلب هاته الملفات او الصفحة ككل باستخدام http. فبدل التصفح الى: https://website.com/ قم بالتصفح الى: http://website.com/ او قم بجبر الطلب باستخدام https، بملف AppServiceProvider.php قم باضافة السطر: if ($this->app->environment('production')) { URL::forceScheme('https'); } الى التابع boot من هذا الملف. طبعا لا تنسى تضمين الواجهة URL: use \Illuminate\Support\Facades\URL;

ستحتاج بادئ الأمر محرر أكواد من مثل sublime text أو Notepad++ لتحرير الأكواد والشيفرات بلغة PHP. ثم ستحتاج لتشغيلها خادما محليا يحوي مفسرا لهذه اللغة من مثل xampp أو wampp. وقد تحتاج كشيء جانبي متصفحا من مثل google chrome أو mozilla firefox لإستعراض خرج هاته التعليمات البرمجية. استعن بالمحتوى المجاني المنشور على أكاديمية حسوب بخصوص التطوير بلغة PHP او اطلع على تفاصيل دورة تطوير تطبيقات الويب باستخدام PHP.

يمكنك استعمال حيلة بسيطة أخرى لمقاربة ذات النتيجة، نستعن في هذا بعناصر label. لنصف الهيكلة التالية: <label> <span id="enabled" class="enabled-checkbox">&#10004;</span> <input id="checkbox" type="checkbox" /> <span id="disabled" class="disabled-checkbox">&#10006;</span> </label> نصف هنا عنصري span واحد يعبر عن حالة تفعيل الصندوق وواحد عن حالة تعطيله. يمكنك تنسيقهما وفقما ما تريد: label input{ display: none; } label .enabled-checkbox ,label .disabled-checkbox { height: 50px; width: 50px; padding:5px; border: 1px solid red; } ايضا انتبه الى ان انه تم اخفاء عنصر input. لأن الضغط على عنصر label سيكون تبديلا لحالة العنصر. ثم اخيرا عن طريق الجافاسكربت: الاستماع الى حدث تغيير حالة الصندوق. ففي حالة تفعيله. نقوم بإخفاء العنصر المتعلق بتمثيل حالة التعطيل واظهار الخاص بحالة التفعيل. وفي حالة تعطيله نقوم بإخفاء العنصر المتعلق بتمثيل حالة التفعيل. واظهار الخاص بحالة التعطيل. let input = document.querySelector('#checkbox'); input.addEventListener('change', (event) => { if (event.currentTarget.checked) { enabled.style.display = "inherit" disabled.style.display = "none" } else { disabled.style.display = "inherit" enabled.style.display = "none" } }) ايضا انتبه الى انه يجب اخفاء احد عنصري span بشكل افتراضي يوافق الحالة الافتراضية لعنصر الصندوق: label .disabled-checkbox{ display: none; }

بجانب المشار إليه من قبل المدرب عمر، من بين المشاريع التي تم استعمال NodeJS فيها كمحرك واجهة خلفية يوجد ايضا: تطوير تطبيق جوال (تطبيق طبيبي) باستخدام React Native. إنشاء تطبيق أسئلة وأجوبة باستخدام Next.js (هنا بالضبط تم استعمال خادم Next وهو في الأصل قائم على NodeJS). تطوير تطبيق جوال للتواصل الاجتماعي باستخدام Ionic. أما بالنسبة لأرشيف المسارات الأقدم فيوجد: تطبيق مشاركة وصفات الطعام. تطوير تطبيق لمطعم باستخدام Ionic 4. تطبيق جوال لطلاب المدارس. تطوير تطبيق قائمة مهام.