عمر قره محمد

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

نعم يوجد اختلاف وهو ان الـ method الأولى هي static methods : User.sayHi = function () { /* ... */ } فتعطي الوظيفة للـ class المسمى User فقط User.sayHi(); // will work fine بينما لن تورث هذه الـ method للأبناء المستنسخين من الـ class المسمى User const omar = new User(); omar.sayHi; // Uncaught TypeError: omar.sayHi is not a function وعلى الصعيد الاخر الـ method الثانية : User.prototype.sayHi = function () { /* ... */ } تعطي الظيفة للأبناء المستنسخين من الـ class المسمى User فقط ولن تستطيع الوصول له من خلال الكود التالي User.sayHi(); // Uncaught TypeError: User.sayHi is not a function ولكن يمكن الوصول له من خلال الكود التالي const omar = new User(); omar.sayHi; // will work fine بعد قول هذا يجب ان تعلم ايضاً انه بإمكانك تعيين الـ static methods بطريقة اخرى وهي إضافة كلمة static قبل اسم ال method : class User{ constructor(name) { this.name = name; } static sayHi() { console.log("hi") } sayHaha(){ console.log("haha") } } User.sayHi(); // hi User.sayHaha(); // Uncaught TypeError: User.sayHaha is not a function const omar = new User() omar.sayHi(); // Uncaught TypeError: omar.sayHi is not a function omar.sayHaha(); // haha عادةً نستخدم ال static methods لعمل وظائق تتعلق بال class بشكل عام. ونورد المثال التالي : إذا اردنا أن نعمل طريقتين لتوليد article من الكلاس المسمى Article. الاولى باستدعائه واعطاء المتغييرات (title, date). والثانية بتوليد article فارغ و date الخاص به هو اليوم. وبالتالي سنحتاج ان نعرف الـ class المسمى Article ونعطيه static method ولتكن createTodays : class Article { constructor(title, date) { this.title = title; this.date = date; } static createTodays() { // class أي انها تشير للـ this = Article لاحظ ان الـ //لن تعمل هنا this.title بمعى ان return new this("Today's digest", new Date()); } } let article = Article.createTodays(); alert( article.title ); // Today's digest لاحظ ان ال this داخل الـ static method تشير لل class وليس للأبناء المنتسخين. وهنا تذكر ان : let article = new Article; article.createTodays(); // Uncaught TypeError: article.createTodays is not a function

هل بإمكانك مشاركة الحل هنا حتى يسهل على من لديه نفس السؤال معرفة الجواب.

الموضوع يعتمد بشكل كبير على طبيعة السوق المحيط فيك، طبيعة المواقع التي تريد العمل عليها، فبالسوق العربي ال php و خصوصاً ال larval مهيمنة بشكل كبير، وهي الاسهل والاكثر توثيقاً والاكثر مكتبات واستخدام، كما انها الاقدم وكل الاستضافات تقريباً حتى المجانية منها تدعمها حيث تشكل 79% من الانترنت. هنالك العديد من الاسئلة في الموقع من هذا النوع قد تم الاجابة عنها بالفعل قم بالاطلاع عليها :

المشكلة تحدث على ما يبدو عند استدعاء المكتبة المسمات Infospot، حيث يحدث تكرار للعنصر الحاصل على الايدي containerHover مرة اضافية عند الانتقال كم طل مرحلة من مراحل العرض. و يتم كذلك إضافة المزيد من العناصر التي تملك الكلاس mySlides وبالتالي تحدث مشكلة اثناء تنفيذ الوظيفة التالية الخاصة بعارض الصور : var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs((slideIndex += n)); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); if (n > x.length) { slideIndex = 1; } if (n < 1) { slideIndex = x.length; } for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex - 1].style.display = "block"; } لأن الكود التالي document.getElementsByClassName("mySlides") سيحتوي على العناصر الموجودي في كل من ال containerHover المضافة، ولكن ال containerHover البقية يكونون مخفيين هو و ال mySlides الذين بداخلهم، وبالتالي عندما يكون ال slideIndex يساوي الـ index الخاص بأحد هذه العناصر المخفية فلن يظهر. انا لم استطع تشغيل الكود على الحاسب حتى استطيع اصلاح الكود، ولكن بعد ان علمت موضع الخطأ، أرجو ان اكون ساعدتك على اصلاح الكود.

هل المشكلة انك تحتاج النقر مرتين على الصورة التي تظهر عند تحميل الصفحة ؟ إذا كانت هذه هي المشكلة بإمكانك التغلب عليها بعمل دبل كليك بال js عند تحميل الملف ويكون بالشكل التالي : var targLink = document.getElementById ("something"); var clickEvent = document.createEvent ('MouseEvents'); clickEvent.initEvent ('dblclick', true, true); targLink.dispatchEvent (clickEvent); إذا لم يكون هذا الحل مناسب لمشكلتك او كانت المشكلة شيء أخر، أرجو إيضاح السؤال بشكل اكبر.

اخي على ما يبدو انك لم تقم باستدعاء مكتبات ال bootstrap اللازمة لتشغيله ويمكنك استدعائها بالشكل التالي: قم بإضافة هذا السطر إلى ال head <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> ثم قم بإضافة هذا السطور في نهاية ال body <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" ></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous" ></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous" ></script> هذه الطريقة تسمح لك بالوصول لمكتبه bootstrap من دون تحميلها على الجهاز إذا لم ترد استدعاء المكتبة عبر CDN (وهي الطريقة التي شرحتها لك في الاعلى) بإمكانك تحميل الملفات الاربعة والقيام باستدعائها كما تقوم باستدعاء ملفات ال css وال js بالعادة. اقرأ أيضاً : يمكن الاطلاع على الطريقة من موقع بوتستراب الرسمي : https://getbootstrap.com/docs/4.0/getting-started/introduction/

بدل ان يكون ال grid مقسم لثلاث صفوف اجعله مقسم ل 6 صفوف واعط الـ h3 خمس نقاط طول و الـ h6 نقطة طول واحدة وباقي العناصر تكون حصتها هي نقطتا طول لكل واحد بالشكل التالي : grid-template-areas: "h3 h1 h2" "h3 h1 h2" "h3 h4 h5" "h3 h4 h5" "h3 h7 h8" "h6 h7 h8"; اذا كنت عملت التصميم بطريقة غير ال grid قم بمشاركة الكود الخاص بك حتى استطيع مساعدتك.

المشكلة التي تظهر في lighthouse هي التالية : The page may not be loading as expected because your test URL (https://www.miril.net/2022/04/ideal-chopstick.html) was redirected to https://www.miril.net/2022/04/ideal-chopstick.html?m=1. Try testing the second URL directly. وحسب استطلاعاتي للامر تبين ان الموقع الخاص بك يقوم بامر اعادت توجيه إلى الرابط https://www.miril.net/2022/04/ideal-chopstick.html?m=1. عندما يدخل المستخدم من الهاتف بينما لا تحدث هذه المشكلة عندما يدخل من الحاسوب. لحل المشكلة قم بالبحث عن السبب الذي يؤدي لعملية اعادة التوجيه وايقافه.

المشكلة باستخدام ال margin لكل صورة على حدى انه عند تغير عرض الشاشة وعلى سبيل المثال فتح الموقع على الموبايل سيتوجب عليك وضع margin مختلف لكل صورة وهذا اصبل لديك عدد كبير من الاكواد لتنفيذ غرض بسيط، ولكن الاصح ان تستخدم text-align: center; على الاب الخاص بالصورة و النص حيث سيكون متوافق مع كل الشاشات في هذه الطريقة.

حتى تجعل الصور متناسقة مع مختلف الاجهزة يجب ان يكون ال width الخاص بالصور متغير بحسب عرض شاشة العرض كما في التالي حيث ان ال width هو نسبة من عرض الاب. img{ width: 100%; } اذا كنت تريد تغيير طول الصورة يجب وضع الخصائص كالتالي : img{ width: 100%; height: 400px; object-fit: cover; } وهذه الطريقة هي المستخدمة في خلفيات القنوات على يوتيوب. اقرا ايضا مقالات متعلقة بالموضوع :

يجب ان يكون الحل بشكل يشبه التالي : for (let index = 0; index < tag.length; index++) { tag[index].onclick = function () { document.getElementById(tag[index].dataset.id).style.display = "block"; }; }

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

نعم هذه طريقة صحيحة. في عالم ال css والبرومجة عموما هنالك الكثير من الطرق التي تعطي نفس النتيجة، على سبيل المثال انظر كيف تعامل مصممي موقع حاسوب مع نفس هذه المشكلة. حيث قاموا بإضافة padding-top لل body. بينما المصممين لموقع ترجمة جوجل قاموا بإضافة div فارغ واعطوه ارتفاعاً معين ليدفع المحتوى نحو الاسفل في الطبقة الاساسية بينما يغطيه ال header من الامام في الطبقة الامامية.

نعم يمكنك رفع اكثر من مشروع على مجلد واحد لكن لا ينصح بذلك. لكن يمكن عمل list تحتوي المشاريع الخاصة بالـ Flutter بحيث يمكنك الوصول إليهم بسهولة. ويكون ذلك بالطريقة التالية : قم بالدخول إلى حسابك على GitHub ثم انقل إلى repositories كما في الصورة بعد ذلك قم بعمل list جديدة خاصة بك عبر النقر على السهم جانب المشروع ثم النقر على إشارة create list : ثم قم بإدخال اسم ال list و الوصف وانقر على create الآن قم بإضافة المشاريع الخاصة بال Flutter إلى هذه ال list كما في الصورة : يمكنك الوصول لل list الخاصة بك ومعاينة المشاريع من خلال الذهاب للقائمة Stars :

نعم بالفعل هو كود لمحي محتويات ال output. جرب إيقاف هذا الكود وانظر ما الفرق الذي سيحدث. ستقوم الوظيفة readFn بإضافة كل العناصر المحفوظة في ال localStorage وعند إضافة عنصر جديد ستقوم مرة أخرى بإضافة كل العناصر الموجودة في ال localStorage وهكذا أصبح لديك تكرار للعناصر التي كانت موجودة قبل إضافة العنصر الجديد. جرب إيقاف الوظيفة بشكل عملي وشاهد المشكلة بنفسك.

بإمكانك إضافة الصورة بالشكل التالي :  alt text : النص البديل في حال عدم تحميل الصورة image.jpg : هو اسم وامتداد الصورة هذا العنوان تستخدمه عندما تكون الصورة في مجلد ال root أما في حال كانت الصورة داخل ملف فرعي وليكن اسمه images يكون الرابط بالشكل التالي : 

المشكلة على ما يبدو انك اعطيت ال header : header { position: fixed; /* المشكلة هنا */ width : 100% } وهذا يجعله في طبقة منفصلة في الامام. للتغلب على هذه المشكلة بإمكانك إعطاء الـ <section class="content"> <div class="phone"> <p class="phone_des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci nostrum harum voluptatem est odit, error, corporis blanditiis ad, dolorem laudantium aliquam libero soluta necessitatibus. Rerum dolorem ab porro distinctio et eius iure! Laudantium sint doloribus, officiis vel sequi quaerat, recusandae sunt ratione asperiores ipsam similique placeat est eum at voluptatum accusantium delectus omnis voluptatem ea explicabo qui. Sint inventore fuga dolor consequuntur amet eius provident nobis officiis nam doloremque doloribus modi, tempora excepturi? Cumque nostrum perspiciatis eligendi iusto dicta dolores tempore delectus accusantium harum! Placeat, sequi, blanditiis incidunt error dignissimos optio repudiandae enim eaque eius facilis inventore eos nulla laborum.</p> <img class="phone_img" width="250px" src="photos/phone.png" alt="noIMg"> </div> </section> margin-top يوافق طول ال header بالشكل التالي : .content{ margin-top: 100px; } واعطاء ال header خاصية ال top = 0 حيث يصبح : header { position: fixed; top: 0; /* التصحيح */ width: 100%; } فيصبح الشكل النهائي كالتالي ملف ال css بعد التعديل : style.css

نعم يجب ان تتعلم الأسس البرمجية السليمة عبر لغة PHP ثم أساسيات إطار العمل Laravel و تبني تطبيق إدارة المهام باستخدام إطار العمل Laravel ثم تطوير واجهة برمجية API اعتمادًا على نمط RESTful اطلع على تفاصيل الدورة من هنا : https://academy.hsoub.com/learn/php-web-application-development/ ستجد في قسم "ماذا ستتعلم في هذه الدورة" تفصيل كل ما ستتعلمه

نعم انت بحاجة لتعلم لغة برمجة خاصة ببناء الـ backend قبل تعلم ال APIs. بإمكانك عمل ال APIs باستخدام اغلب لغات البرمجة واكثرها شهرة هي php و node. حيث laravel هو اطار عمل ل php. بعد قول هذا هنالك طرق اسهل حالياً لبناء ال APIs من دون الحاجة لكتابة اي كود، رغم انني لا استخدمها لكنها موجودة واشهرها : Sheetsu Airtable WrapAPI Restdb.io Bubble اقرأ أيضاً :

لاحظت مشكلتين بالكود الذي شاركته الاولى أنك تقوم بجلب العناصر ووضعهم في المتغير arrayOfTasks لكن لا تقوم بتشغيل الوظيفة المسؤولة عن العرض readFn. if (window.localStorage.getItem("array")) { arrayOfTasks = JSON.parse(window.localStorage.array); } ولكن الصحيح ان يكون بالشكل التالي : if (window.localStorage.getItem("array")) { readFn(); } والمشكلة الثانية انك تقوم بإضافة كل العناصر الموجودة في ال localStorage مرة ثاني عند كل اضافة لعنصر جديد بحيث يحدث تكرار للعناصر المضافة مسبقاً، والصحيح ان تمسح محتويات ال outputList قبل إضافة العناصر حتى لا يحدث هذا التكرار ويكون بالشكل التالي : function readFn() { // نقوم بتفريغ القائمة outputList.innerHTML = ""; // ثم نقوم بإضافة كل العناصر الموجودة بالمصفوفة لتجنب التكرار let arrayOfTasks = JSON.parse(window.localStorage.getItem("array")); arrayOfTasks.forEach((task) => { let li = document.createElement("li"); let span = document.createElement("span"); span.appendChild(document.createTextNode("delete")); li.appendChild(document.createTextNode(task.title)); li.appendChild(span); outputList.appendChild(li); }); } لتحميل الحل من هنا : fix.js

احيانا لا تريد ان تقوم بتعريف العناصر المحتواة داخل ال object بشكل مباشر وإنما تحتاج لعمل بعض التعديلات قبل اضافة العنصر. لفعل ذلك بدون الـ get وال set ستحتاج لكتابة كود يشبه التالي class Person { constructor(name) { this.setName(name); } getName() { return this.name; } setName(newName) { newName = newName.trim(); if (newName === '') { throw 'The name cannot be empty'; } this.name = newName; } } let person = new Person('Jane Doe'); console.log(person.name); // Jane Doe person.setName('Jane Smith'); console.log(person.getName()); // Jane Smith بينما عند استخدامهما يصبح الكود بالشكل التالي : class Person { constructor(name) { this.name = name; } get name() { return this._name; } set name(newName) { newName = newName.trim(); if (newName === '') { throw 'The name cannot be empty'; } this._name = newName; } } let person = new Person('Jane Doe'); console.log(person.name); // Jane Doe person.name = 'Jane Smith' console.log(person.name); // Jane Smith وفي حال لم تقم بتعريف setter يصبح من غير الممكن تعديل الاسم class Person { constructor(name) { this._name = name; } get name() { return this._name; } } let person = new Person("Jane Doe"); console.log(person.name); // attempt to change the name, but cannot person.name = 'Jane Smith'; console.log(person.name); // Jane Doe

نص المشكلة التي ظهرت عندي : كما تعلم يجب ان تقوم بتسجيل الدومين الخاص بموقعك وكذلك عنوان صفحة تسجيل الدخول في اعدادات Authorized JavaScript origins. قم بوضع العنوان الذي تستخدمه والذي يجب ان يكون يشبه التالي اذا كنت تستخدم رياكت : http://localhost:3000 ويشبه التالي اذا كنت لاتستخدم اي مكتبات وتقوم بالتشخير عبر live server : http://127.0.0.1:5500/index.html كما هو موضع في الصورة h إذا كنت متأكد من كل ما سبق فقم بحذف المشروع من google auth2 ثم قم بإعادة انشاءه.

هذه العبارة مماثل للعبارة التالية li1_" + randomid" "li1_" + randomid === `li1_${randomid}` الحل الذي شاركته معك هو الافضل وهو الذي نستخدمه في بيئات العمل مثل react لأنه الابسط لكن اذا احببت البقاء على حلك السابق فالمشكلة التي حدثت معك انك تقومين بالبحث عن كل ال span في الصفحة let delete_skil1 = document.querySelectorAll("span"); وهذا يشمل كل العناصر من نوع span في كل من list_li1_lL و list_li1_lR وعندها المشاكل for (let i = 0; i < delete_skil1.length; i++) { delete_skil1[i].addEventListener("click", () => { // رغم المشكلة تبقى العبارة التالية صحيحة delete_skil1[i].parentElement.style.display = "none"; // لكن العبارة هنا تصبح خاظئة list_2L.children[i].style.display = "none"; }); } لأن المتغير (i) وهو ال index الخاص بال span يصبح لا يوافق ال index الخاص بالعنصر في القائمة list_2L.children[i] وبالتالي حتى نتغلب على المشكلة نقوم بتحديد ال querySelectorAll فيكون الحل كالتالي let delete_skil1 = document.querySelectorAll("#list_li1_R li span"); for (let i = 0; i < delete_skil1.length; i++) { delete_skil1[i].addEventListener("click", () => { delete_skil1[i].parentElement.style.display = "none"; list_2L.children[i].style.display = "none"; }); } في هذه الحالة اصبح index الخاص بال span الذي نستخعيه من delete_skil1[i] متطابق مع ال index الخاص بالعنصر في القائمة الثانية والذي نستدعيه من list_2L.children[i]

بإمكانك عمل مثل هذا الشكل باستخدام تقنية الـ Hero Image بإضافة ابن للعنصر الاساسي واعطائه الخصائص : .son{ position: absolute; right: 50%; top: 50%; transform: translate(50%, -50%); } وتعديل ال position للأب ليصبح relative .father{ position: relative; } فيصبح الحل لمشكلتك يشبه التلي 1. إذا لم ترد تعدي ملف ال html واستخدمت الـ after .big_scroll { position: relative; font-size: 120px; color: #121420; text-shadow: -1px 0 rgb(0, 0, 0), 0 1px rgb(0, 0, 0), 1px 0 rgb(0, 0, 0), 0 -1px rgb(0, 0, 0); } .big_scroll::after { content: "Scroll Now"; display: block; position: absolute; right: 50%; top: 50%; font-size: large; color: white; transform: translate(50%, -50%); } 2. أو بطريقة اخرى <section class="container_scroll"> <h1 class="big_scroll"> Scroll Now <span id="middle_text">Scroll Now</span> </h1> <h1 class="scroll"></h1> </section> .big_scroll { position: relative; font-size: 120px; color: #121420; text-shadow: -1px 0 rgb(0, 0, 0), 0 1px rgb(0, 0, 0), 1px 0 rgb(0, 0, 0), 0 -1px rgb(0, 0, 0); } .middle_text { position: absolute; right: 50%; top: 50%; font-size: large; color: white; transform: translate(50%, -50%); }