مصطفى اوريك

أريد أن أنشئ نموذج MCD لهذا الوصف: "تطبيق ويب لعرض الخدمات, مستخدمو هذا التطبيق منقسمون لنوعين, عارضي الخدمات والزبناء, عارضي الخدمات يقومون بإنشاء الخدمات والزبناء يقومون بطلبها"

بواسطة هذا الوصف قمت بإنشاء وحدة  Services, ووحدة Users, ووحدة User_Role

قمت بإنشاء علاقة بين Users و User_Role كالتالي:

لكن لا أدري كيف أمثل العلاقة بين Services و Users

سؤالي هو كيف أستطيع تمثيل العلاقة بين هاتين الوحدتين, لأنني لا أظن أنه يمكنني الربط بطريقة مباشرة فليس كل المستخدمين يقومون بإنشاء الخدمات, فقط المستخدمين ذو النوع "عارضي الخدمات"

@Chihab Hedidi أخطأت في سؤالي, ما أقصده حقا وباختصار هو أن هذا الكود يقوم بارجاع true ولا أعلم لماذا, علما أن \D يفترض أن يشير إلى جميع الأحرف إلا الأرقام

let p = /(\D+.*)@(\D+.*)\.(\w{2,})/i;
let email = "43ffdfsdf@gmail.com";

console.log(p.test(email)); // true

إذا قمت بعملية Validate لهذا البريد الإلكتروني على سبيل المثال: 434user@gmail.com

باستخدام هذا الـ Pattern:

/(^[0-9].*)@(^[0-9]+.*)\.(\w{2,})/i

يتم إرجاع قيمة true (أي أن هذا البريد الإلكتروني متوافق مع هذا الـ Pattern)

بينما باستخدام هذا الـ Pattern:

/(\D+.*)@(\D+.*)\.(\w{2,})/i

يتم إرجاع قيمة false

لماذا يحدث هذا ؟

السلام عليكم.

يتم إنشاء عنصر HTML واحد في الصفحة, ثم باقي الكود يتم توليده عبر فانيلا جافا سكريبت, كمثال:

<div class="root">
// الكود هنا يتم توليده بجافا سكريبت
</div>

هل هذه الممارسة تعتبر من الممارسات الجيدة أم لا؟

أعلم أن أطر العمل تستخدم هذه الممارسة, لكن ماذا عن استخدامها خارج هذه الأطر

بعد محاولات معينة وإجابات الأعضاء الكرام إكتشفت أن السبب في هذا هو أن Addeventlistener يقبل إضافة العديد من الـ Events للعنصر الواحد, لذلك استخدامي للـ onclick حل المشكلة

السلام عليكم.

قمت بتصميم تطبيق Quiz بسيط باستخدام جافا سكريبت

رابط التطبيق على Codepen: https://codepen.io/MUSTAPHA-AOURIK-DEV102-/pen/PogPQeb

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

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

أرجو أن توضحوا لي مكامن الخطأ في تطبيقي هذا, وشكرا.

السلام عليكم

لدي هذا التصميم التالي:

<div class="wrapper">
  <div class="main"></div>
  <div class="aside-bar"></div>
</div>

* {
  box-sizing: border-box;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas: "main main main aside aside";
  gap: 20px;
  height: 1000vh;
}

.main {
  background-color: red;
  grid-area: main;
  min-height: 400px;
}

.aside-bar {
  background-color: blue;
  grid-area: aside;
}

يمكنكم الإطلاع على نتيجة الكود عبر موقع Codepen من هنا: https://codepen.io/MUSTAPHA-AOURIK-DEV102-/pen/mdooWbj

ما أريد القيام به هو أن أعطي للعنصر main إرتفاعا محددا ومرنا (أي قابل للزيادة في حالة إزداد إرتفاع محتواه), جربت خاصية min-height لكنها لم تعمل, فكيف أقوم بهذا؟

بتاريخ الآن قال مسعود زاهي:

أما بالنسبة لسؤالك الأخير، فعمارة الأجهزة الحاسوبية (Computer hardware architecture) هي فرع من علم الحاسوب يركز على تصميم وهيكلة المكونات الفعلية للأجهزة الحاسوبية. ومن الصحيح أن عمارة الأجهزة تعتبر جزءًا من علم الحاسوب بشكل عام وتتعامل مع جوانب فيزيائية وتصميمية محددة للأجهزة الحاسوبية.

جزاك اللّه خيرا, في السؤال الأخير أقصد هل Computer hardware architecture هو نفسه Computer architecture أم لا, حيث عندما أبحث عن دورات لل Computer hardware architecture أجد أكثر الدورات تتحدث عن Computer architecture وأنا ليست متأكدا إن كانو نفس المسميات أم لا

السلام عليكم.

وجدت في RoadMap معينة لتعلم مسار تطوير الواجهات الخلفية (Back end), أنه ينبغي تعلم Computer hardware architecture

فما هي؟ وأين يمكنني تعلمها؟ ولماذا ينبغي تعلمها بالنسبة للمبرمج؟

وأيضا هل Computer hardware architecture هي نفسها Computer architecture أم لا؟

رابط ال RoadMap المقصودة: https://metwallylabs.com/backendroadmap.html

السلام عليكم.

كم يجب أن تكون سعر النقرة لكلمة مفتاحية معينة لكي أستطيع إستخدامها في المقالات؟

السلام عليكم.

كيف يمكنني أن أتعمق في السيو ؟

أعرف الأساسيات و أيضا أعرف بعض المعلومات المتقدمة, لكن كيف يمكنني أن أتعمق في هذا الموضوع و أكون خبيرا فيه ؟

أعطيت للعنصر ذو الكلاس input-content الخاصية max-width: 615px, إفترضت أن العنصر سيصل عرضه إلى 615 بكسل و عندما أقوم بتصغير عرض الشاشة سيتقلص عرض العنصر  تلقائيا و بهذا أضمن التجاوبية لكن كما يظهر لكم العنصر لسبب ما صار عرضه أقل من العرض الذي أعطيته له, فكيف حدث هذا 

لدينا في صفحة HTML :

<div class="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</di>

و في صفحة CSS :

* {
  box-sizing: border-box;
}
.parent {
  background-color: #eee;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.parent > div {
  background-color: red;
  padding: 10px;
  flex: 1 100px;
}

أريد معرفة لماذا عندما أقوم بتصغير عرض الشاشة و أصل للعرض 307px تقريبا يظهر تجاوز للعناصر على المحور الأفقي overflow كالتالي:

ألا يفترض أن لا يحدث ذلك كون الحاوية parent مرنة؟

لتجربة الكود : https://codepen.io/Lodlma_45/full/MWOpjoB

بتاريخ 3 دقائق مضت قال أسامة زيادة:

وعليكم السلام 

عند ملاحظة التنسيقات أرى أنك مستخدم تدرج لوني كخلفية بقيمة الخاصية التالية 

 background-image: linear-gradient(#fff 50%, #2176fd 50%);

لذلك عند إعطاء القيمة 2,5%  للخاصية background-position نلاحظ حدثت إزاحة gradient مما تسبب ظهور اللون الأزرق المعطى كخلفية . 

لتعامل مع تنسيقات الخلفيات في css يمكنك الاطلاع على المقالة التالية:-

يوجد في موسوعة حسوب عدّة شروحات حول الخاصيات التالية: position و background-position و background-image . 

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

أعرف أن الإزاحة وقعت لكن من المفروض أن تحدث الإزاحة من الأعلى و هذا -حسب ما أظن- سيزيح تدرج الألوان بإتجاه الأسفل, و هذا -حسب ما يبدو لي- لن يجعل الجزء الأزرق يظهر, لكنه ظهر

السلام عليكم.

لا أفهم سبب ظهور الجزء الأزرق من ال gradient بعد إعطاء القيمة 2,5% للخاصية position-y

أرجو منكم التكرم و مساعدتي في فهم الأمر.

السلام عليكم.

ما فائدة هذه الميتا ؟ : 

<meta http-equiv="X-UA-Compatible" content="IE=edge">

بتاريخ 1 دقيقة مضت قال شرف الدين2:

قم بتغيير خاصية الoverlow لتصبح scroll بدلاً من hidden , وستﻻحظ بعدها ظهور مؤشر يمكنك من عرض الأجزاء المخفية

لم تفهم قصدي أريد أن تظهر مكونات الصفحة بشكل عادي و بدون إستعمال scroll, فهل هذا ممكن ؟

بتاريخ 1 دقيقة مضت قال Adnane Kadri:

إعطاء العنصر body القيمة fit-content في خاصية العرض الأدنى للعنصر min-width قام بحل المشكل لدي: 

جربته و هو فعال حقا, لكن لماذا العنصر <body> لا يأخذ كامل عرض الصفحة في القياسات التي ذكرتها ؟

بتاريخ 3 دقائق مضت قال شرف الدين2:

قم بوضع تلك التنسيقات وستختفي المساحة البيضاء أيا كان مقاس الشاشة

شكرا عمل هذا أيضا, لكن إذا قمت بتصغير عرض الشاشة يختفي جزء من مكونات الصفحة, فماذا أفعل لكي لا يحدث هذا ؟

بتاريخ 10 دقائق مضت قال شرف الدين2:

قم بوضع قيمة الoverflow للclass المُسمى intro_container ب auto

إختفى ذلك الجزء الأبيض, على الأقل لا يظهر إلا في العرض 186px إلى تحت

ملاحظة : قمت بوضع الخاصية في ال class المسمى intro و ليس intro__container, لم يعمل معي الأمر عندما وضعت الخاصية في هذا الأخير

السلام عليكم.

لدي مشكلة -هذا إن كانت مشكلة- في تحقيق التجاوبية لصفحتي.

عندما يصل عرض الشاشة لـ 343px و أقل : سترون ظهور فراغ أبيض في يمين الصفحة

فما سبب المشكلة ؟

رابط الصفحة للمعاينة : https://mostafa-100.github.io/Responsive-Beginner-JS-Project/

رابط الأكواد : https://github.com/Mostafa-100/Responsive-Beginner-JS-Project

السلام عليكم | كيف أتمرن على تصميم المواقع بـ html-css-Javascript ؟

هذا اكثر شيء يشكل علي لأنه إذا أردت التمرن عليهم بتقليد تصاميم مواقع معينة كيف أعرف أن الكود الذي كتبته سليم, أقصد كيف أعرف أني مطبق للـ "best practices" في كتابة الكود ليس فقط أحشو التصميم بالأكواد ؟

قلت أن أقلد هذه التصاميم ثم أرى الكود الأصلي لها ثم أقارنها بالكود الذي كتبته لكن المشكلة أن أغلب تصاميم المواقع تستخدم أطر العمل أو لغات أخرى مثل pugjs في كتابة الكود, فهل هناك مشكلة هذه الناحية ؟

بتاريخ 14 دقائق مضت قال Wael Aljamal:

لاحظ أن الشيفرات التي كتبتها سوف يتم تنفيذهامرة واحدة:

لكن الزر لم يظهر لي و لو مرة واحدة ؟

لماذا زر الـ <button> لا يظهر بعد تمرير الصفحة إلى الأسفل 600px ؟

أعرف أنه علي وضع الشروط داخل هذا كود :

window.onscroll = function () {}

لكن لماذا تلك الشروط لن تعمل إن لم أضعها فيه ؟

السلام عليكم.

ما الذي يعنيه هذا الكود ؟ :

[...Array(5).keys()]

الجزء الذي به بعض الغموض حاليا لدي هي تلك النقاط الثلاث, فما فائدتها ؟

السلام عليكم.

ما سبب إستخدام transform-style: preserve-3d في هذه الحالة ؟