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

شرف الدين حفني

الأعضاء
 عرض الملف الشخصي  تصفح المحتوى

  • المساهمات

    1690

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

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

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

    2

 نوع المحتوى 

ريادة الأعمال

البرمجة

التصميم

DevOps

التسويق والمبيعات

العمل الحر

البرامج والتطبيقات

آخر التحديثات

قصص نجاح

أسئلة وأجوبة

كتب

دورات

كل منشورات العضو شرف الدين حفني

  1. شرف الدين حفني
    innerText تقوم بوضع المحتوى بشكل نصي innerHtml تقوم بوضع المحتوى على هيئة html سيتضح الأمر من خلال المثال التالي <!DOCTYPE html> <html> <body> <div id="test"> <button onclick='document.getElementById("test").innerText="<h1>sharaf</h1>"'>click</button> </div> </body> </html> الكود السابق سيقوم بكتابة <p>sharaf</p> حرفيًا كما هي دون معالجة الوسوم الخاصة بالhtml بل سيقوم بكتابتها كسلسلة نصية بينما المثال التالي <!DOCTYPE html> <html> <body> <div id="test"> <button onclick='document.getElementById("test").innerHTML="<h1>sharaf</h1>"'>click</button> </div> </body> </html> سيقوم بكتابة sharaf ولكن سيكون حجم الخط ضخم لأنه سيقوم بمعالجة الوسم h1 حيث أنه يقوم بكتابة الشفرة ك html وليس كسلسلة نصية
  2. شرف الدين حفني
    لا يوجد مشكلة في إستخدام vh و vw , فكرة الvh والvw هي أن يكون العرض والإرتفاع متناسب مع طول وعرض النافذة مما يساعد على جعل التصميم مُتجاوب , فإن هذا بالفعل هو إستخدامهما لذا ما تقوم به صحيح ولا يوجد فيه مشكلة
  3. شرف الدين حفني
    بالإضاة إلى إجابة أستاذ أدنان عن إستخدامك لgit و github من المُفيد أيضًا أن تعرف بعض الشئ عن نماذج تطوير البرمجيات مثل agile و waterfall فتلك النماذج تحتوي على إستراتيجيات وخطط للتعامل مع المشاريع ضمن فريق عمل , فعلى سبيل المثال النموذج water fall هو نموذج صلب بعض الشئ ويُستخدم بكثرة في الأنظمة الحساسة ويعتمد على وجود مراحل للتطوير ويجب إنهاء كل مرحلة قبل الإنتقال الى المرحلة القادمة إبتداءًا من مرحلة جمع المتطكلبات والمعلومات وتحليلها مرورًا بمرحلة التطوير حتى مرحلة الاختبار والصيانة بينما النموذج agile هو نموذج مرن بعض الشئ وهو مفيد للأنظمة الغير واضحة او الأنظمة التي قد تحتاج إلى تعديلات كثيرة في المتطلبات أثناء التطوير , ويمكنك معرفة المزيد من خلال دورة تطوير التطبيقات المُقدمة من أكاديمية حسوب
  4. شرف الدين حفني
    يمكنك تنفيذ ذلك عبر تنسيق الselectors الذان اسمهما المسؤل عن الجزء الممسوك من الscrollbar و المسؤل عن الprogress bar الخاص بالscrollbar فعلى سبيل المثال ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: red; border-radius: 10px; } باستخدام الشفرة السابقة سيصبح لون الجزء الممسوك من الشريط أحمر وله border radius بينما يكون الجزء المتبقي له shadow و border radius ويوجد أيضًا selectors أخرى خاصة بال scrollbar على سبيل المثال ::-webkit-scrollbar مسؤل عن الcontainer الذي يحتوي على السscrollbar ::-webkit-scrollbar-button المسؤل عن الأزرار الموجودة في الscrollbar
  5. شرف الدين حفني
    أجل, فإن npm start هو المسؤل عن تشغيل المشروع
  6. شرف الدين حفني
    اغلب الظن أنك لم تقوم بتشغيل المشروع عبر الأمر npm start يمكنك تجربة الأمر ومن ثم ان لم يعمل معك المشروع يمكنك تصوير شاشة الterminal وإرفاقها
  7. شرف الدين حفني
    لا يوجد طريقة واحدة وموحدة للتعلم فكل إنسان مننا يحتاج أن يتعلم بطريقة مختلفة عن الأخر حيث كل إنسان لديه عقل مختلف فاللذي يتناسب معي قد لا يتانسب معك والعكس كذلك صحيح, ولكن لماذا تستخدم دالة معينة لمدة اسبوع؟ لا أعتقد أن الأمر يحتاج ذلك التعقيد, الأمر كله متعلق بك عندما تشعر أنك قد فهمت الموضوع بشكلٍ جيد فلا داعي للتكرار إلى مدة معينة المهم أن تكون قد فهمت, وأيضًا ليس كل شئ ستكتسبه من التطبيق فمن المفيد أن تأخذ المعلومات من شخص ذو خبرة أكبر منك حتى تستفاد من تلك المعلومات التي قد لا تجدها بسهولة وفي نفس الوقت لا يجب أن تعتمد بنسبة 100% على الكورس فيجب أيضًا البحث بنفسك, حسنًا ماذا فقد أنصحك أو ماذا أقوم أنا بفعله؟ أنا أقوم بمشاهدة جزء من الكورس ومن ثم أقوم بالتطبيق على ذلك الجزء ومن ثم أشاهد جزءًا أخر وهكذا وفي النهاية أقوم بعمل تطبيق أو أكثر على الكورس ككل لأتأكد من أنني قد فهمت المواضيع بشكلٍ كافي, وأحاول في أثناء مشاهدتي للكورس أن أقوم بالبحث عن كل شئ يقابلني مادام مبهمًا بعض الشئ وأن أكون فضولي وأبحث عن معلومات وأسئلة خارج الكورس لأن من الطبيعي لا يوجد أي كورس سيعطيك المعلومات كلها بنسبة 100% فيجب عليك أن تكون فضولي وتبحث عن المعلومات بنفسك وتحاول الخروج من الإطار الذي يضعك فيه الكورس ولكن في نفس الوقت بدونن إهماله
  8. شرف الدين حفني
    الخاصية float تُستخدم لوضع العنصر في مكان مُعين إما أقصى اليمين أو أقصى اليسار , سيمكنك فهم الأمر بشكلٍ أفضل عند قراءة المثال التالي <!DOCTYPE html> <html> <head> <style> </style> </head> <body> <p><img src="test.jpg" style="width:170px;height:170px;margin-left:15px;"> يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق..</p> </body> </html> في هذا المثال إن قمت بتطبيقه لديك ستلاحظ ظهور الصورة وتحتها النص, ماذا لو أردنا ظهور الصورة على اليمين والنص بجانبها؟ أجل مثلما فكرت سنقوم بعمل float للصورة ناحية اليمين فبالتالي سيظهر النص على يسارها بدلًا من ظهوره اسفلها <!DOCTYPE html> <html> <head> <style> img { float: right; } </style> </head> <body> <p><img src="test.jpg" style="width:170px;height:170px;margin-left:15px;"> يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق..</p> </body> </html> فائدة الclear هي إلغاء تأثير الfloat من بعض عنصر معين, ماذا نعني هنا؟ كما تلاحظ عندما قمت بكتابة float: right للصورة , فإن أي عنصر سيأتي بعد الصورة سيكون على يسارها, ماذا إن أردنا بعد ذلك وضع عناصر ولكن لا نريد ظهور تلك العناصر على يسار الصورة وإنما هي عناصر مختلفة نريدها ان تنزل تحت بشكلٍ عادي؟ هنا نستخدم الخاصية clear , لتوضيح الأمر فلننظر إلى المثال التالي <!DOCTYPE html> <html> <head> </head> <body> <p><img src="pineapple.jpg" style="width:170px;height:170px;margin-left:15px;float:right;"> يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق..</p> <img src="pineapple.jpg" style="width:170px;height:170px;margin-left:15px;float:right;"> <p> يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق..</p> </body> </html> هنا أردنا وضع صورة أخرى على اليمين وبجانبها نص مثلما عملنا في الصورة التي فوقها, ولكن المشكلة سنجد ان الصورة ستظهر بجانب الصورة الاولى بدلًا من الظهور تحتها وعلى يسارها النص, وذلك بسبب تأثير الfloat الخاص بالصورة الأولى, ولحل تلك المشكلة يجب إزالة تأثير الfloat الخاص بالصورة الأولى وذلك عبر الخاصية clear فنكتب clear:right ليصبح الشفرة البرمجية بالشكل التالي <!DOCTYPE html> <html> <head> </head> <body> <p><img src="pineapple.jpg" style="width:170px;height:170px;margin-left:15px;float:right;"> يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق..</p> <img src="pineapple.jpg" style="width:170px;height:170px;margin-left:15px;float:right;clear:right"> <p> يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق..</p> </body> </html>
  9. شرف الدين حفني
    أجل , تعلم الcss بخصائصها على وجه العموم مهم, فحتى مع وجود أطر العمل والمكاتب مثل bootstrap لازلت ستحتاج إلى عمل العديد من التنسيقات بنفسك لذا من المهم أن تفهم تنسيقات وخصائص الcss جيدًا وعلى وجه الخصوص فإن الخاصية float من الخاصيات المُهمة في الcss نظرًا إلى أن وظيفتها بسيطة وهي أن تقوم بجلب المحتوى في إتجاه معين, فهذا شئ شائع جدًا وقد تحتاجه في أوقات كثيرة لذا من الأفضل فهمه جيدًا , والخاصية clear تُستخدم بشكلٍ شائع جدًا مع الخاصية float لذا تعلمها أيضًا مهم كذلك, وإن كان هنالك شئ معين في تلك الخواص تواجه صعوبة فيه يُمكنك وضع سؤال جديد تسأل فيه عن الجزئية التي تواجهك صعوبة فيها
  10. شرف الدين حفني
    ال for loop بوجه عام هي أعم من الfor each حيث أن ال for loop تُستخدم لتنفيذ برمجية معينة او مجموعة من الأوامر لعدد من المرات بغض النظر عن نوع البرمجية, بينما ال foreach تُستخدم لتنفيذ برمجية معينة على عناصر المصفوفة فهي حالة أخص من الfor loop وتُستخدم للتعامل مع المصفوفة وعمل iteration للعناصر أي أن ال foreach تكون أفضل في حالة التعامل مع المصفوفات بينما الfor loop هي حالة أعم على سبيل المثال الشفرة التالية من الأسهل تنفيذها بال for loop function get_factorial(n) { let result = n; for (let i =1; i < n; i++) result* = i; return result; } تلك الدالة تقوم بحساب الfactorial لرقم ما فإستخدمنا الfor loop بينما إن أردنا مثلًا المرور على عناصر مصفوفة ما وطباعة كل عنصر على حدا سيكون من الأسهل والمنطقي إستخدام ال foreach كما يظهر فالمثال التالي my_list = [1,2,3,4,5,6,7] my_list.forEach(e=>console.log(e))
  11. شرف الدين حفني
    كما شرح مصطفى, فإن المُعامل -- يُستخدم لتقليل قيمة المتغير بقيمة 1 بينما على سبيل المثال إن أردنا زيادة قيمتها بقيمة واحد نستخدم المُعامل ++ فيكون شكل الكود كالتالي while(n++) ويوجد مُعامل أخر شبيه له وهو -- ولكن قبل كتابة اسم المتغير على سبيل المثال --n ويقوم هذا المُتغير بتقليل قيمة المتغير قبل إرجاع قيمته, حتى نفهم الأمر بشكلٍ أفضل يُمكننا إدراج المثال التالي int i =5; cout<<i--; سيقوم هنا بطباعة قيمة i والتي هي 5 أولًا ومن ثم يقوم بتقليلها أي أن قيمة الi تذهب إلى أمر الطباعة أولًا قبل تقليل قيمتها بينما المثال التالي int i =5; cout<<--i; يقوم أولًا بإنقاص قيمة i لتُصبح 4 ومن ثم يقوم بطباعة القيمة الجديدة فيتم طباعة 4 بدلًا من 5
  12. شرف الدين حفني
    يمكنك تحقيق ذلك بإستخدام الدالة location.reload() حيث تقوم تلك الدالة بإعادة تحميل الصفحة , فيمكنك إذًا إعطاء الحدث onclick للزر الدالة location.reload كما بالشكل التالي <button onclick="location.reload()">click</button>
  13. شرف الدين حفني
    بالنسبة لسؤالك الأول هل يمكننا التعديل على العنصر من خلال الcss? أجل يمكنك إضافة class في الcss وعند إضافة عنصر من خلال الجافاسكريبت تقوم بإعطاء هذا العنصر الclass الموجود في الcss كما يظهر في المثال التالي .my_class { width: 100%; padding: 25px; background-color: coral; color: white; font-size: 25px; } element.classList.add("my_class"); هنا قمنا بإعطاء العنصر كلاس اسمه my_class وبالتالي سيأخذ العنصر التنسيقات الخاصة بالكلاس my_class وبالنسبة لسؤالك الثاني عن لماذا نستخدم الdom فذلك لإضافة الديناميكية في الصفحة , على سبيل المثال لو أردنا عمل زر عند الضغط عليه يتغير تنسيق الصفحة, مثلًا أردنا عمل الdark mode في صفحتنا في تلك الحالة نحتاج إستخدام الجافاسكريبت حتى نقوم بتغيير تنسيق الصفحة عند الضغط على الزر المسؤل عن تغيير الdark mode
  14. شرف الدين حفني
    بالإضافة إلى ما تم ذكره, يوجد خاصية اخرى في غاية الأهمية وهي خاصية الredeclaration حيث أن var يحتوي على خاصية الredeclaration بينما كلًا من const و let لا يحتويان تلك الخاصية, فعلى سبيل المثال يمكننا فعل التالي var name = "sharaf" var name = "ashraf" بينما لا يمكننا قيام نفس الشئ باستخدام let فلا يمكننا كتابة let name = "sharaf" let name = "ashraf" حيث لا يمكن تعريف نفس المتغير مرتين الا باستخدام var
  15. شرف الدين حفني
    من الممكن أن تكون البطاقة لا تُوفر إمكانية الدفع عبر الإنترنت أو من الممكن أن يكون المشكلة في الحد الأقصى للشراء بالدولار, يمكنك مراسلة خدمة عملاء البنك قد يساعدوك في معرفة سبب المُشكلة وبعدها يُمكنك التواصل مع مركز دعم حسوب قد يتوفر حلُ ما ولكن بعد مراسلة البنك أولًا بالطبع للتواصل مع مركز مساعدة حسوب من هنا
  16. شرف الدين حفني
    أولًا في ملف upload.js لقد كتبت في اول سطر ropzone.autoDiscover = false; بدلًا من Dropzone.autoDiscover = false; ثانيًا : يُرجى التأكد من أنك قمت بإستدعاء سكريبت dropzone قبل upload.js بمعنى أن يكون إستدعاء الإسكريبتات في صفحة الhtml لديك بهذا الشكل <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script> <script src="./upload.js"></script> كما تلاحظ الاسكريبت الذي يستدعي upload.js تم وضعه بعد dropzone وليس قبله
  17. شرف الدين حفني
    مرحبًا هل يمكنك توضيح كيف لا تعمل؟ ما المشكلة التي واجهتك تحديدًا؟
  18. شرف الدين حفني
    يوجد لديك مشكلة أنك تقوم بتغيير قيمة tasks عبر الدالة setTasks وفي نفس الوقت الخطاف useEffect يعتمد على tasks لذا يتم تغير قيمة الtasks فيتم نداء الخطاف فيقوم بتغيير قيمة الtasks مرة اخرى فيتم نداء الخطاف الى مالا نهاية, الحل ان تقوم بمسح الtasks من مصفوفة الاعتمادية في الخطاف فيكون شكل الخطاف كالتالي useEffect(() => { async function PromiseSign() { setTasks(await GetAllTasks()); } PromiseSign(); }, [ReducerValue]);
  19. شرف الدين حفني
    يمكنك إستخدام حلول أخرى غير الuseState حتى تؤدي لك الغرض, من ضمن تلك الحلول هي إستخدام Context api وهي عبارة عن طريقة لعمل state للتطبيق ككل وتوزيعه بين الcomponents , وذلك المثال بالأسفل من التوثيق الرسمي لReact import { createContext, useContext } from 'react'; const ThemeContext = createContext(null); export default function MyApp() { return ( <ThemeContext.Provider value="dark"> <Form /> </ThemeContext.Provider> ) } function Form() { return ( <Panel title="Welcome"> <Button>Sign up</Button> <Button>Log in</Button> </Panel> ); } function Panel({ title, children }) { const theme = useContext(ThemeContext); const className = 'panel-' + theme; return ( <section className={className}> <h1>{title}</h1> {children} </section> ) } function Button({ children }) { const theme = useContext(ThemeContext); const className = 'button-' + theme; return ( <button className={className}> {children} </button> ); } كما تلاحظ في المثال هنا قد قام بتعريف الكونتيكست theme وقام بتمريرالقيمة dark ومن ثم قام بإستخدام تلك القيمة في component مختلفة تمامًا وهي الcomponent التي تُدعى Button وقام بإستخدام تلك القيمة عبر إستخدام الدالة useContext , ويمكنك قراءة المزيد عبر قراءة التوثيق الرسمي لreact من خلال الرابط هذا أو عبر التوثيق المُقدم من خلال موسوعة حسوب عبر الرابط هذا
  20. شرف الدين حفني
    يمكنك التحدث مع مركز مساعدة أكاديمية حسوب وسيتم حل مشكلتك, للتواصل مع المركز إضغط هنا
  21. شرف الدين حفني
    مرحبًا محمد, أجل فهمك لهذه الدورة صحيح , الجهاز المُرسل يبدأ بتكوين البيانات من الطبقة العليا مرورًا إلى الطبقة المادية وعند الإستقبال ينعكس التسلسل من الطبقة السفلية مرورًا بالطبقات العلوية
  22. شرف الدين حفني
    أجل فإن ذلك يعطي الكود معنى أفضل كما يسهل من عملية البحث من خلال الإسم
  23. شرف الدين حفني
    يمكنك وضع الشفرة البرمجية للصفحة في تعليق حتى يستطيع من يقرأ الشفرة ان يساعدك بشكلٍ أفضل
  24. شرف الدين حفني
    حسنًا أرجو منك تجربة الثلاث اوامر التالية npm install @babel/node npm install @babel/cli npm install @babel/core وفي حالة عدم زوال الخطأ يمكنك تجربة تغيير اسكريبت start في ملفة package.json ليكون بهذا الشكل nodemon -w src --exec \"npx babel-node src\"
  25. شرف الدين حفني
    كماهو واضح من الرسالة أنه لم يتعرف على babel-node لذا من الممكن أن تقوم بحل تلك المشكلة عبر تثبيت الbabel-node من خلال الأمر التالي npm i babel-node ومن ثم إعادة تجربة المشروع مرة أخرى
×
×
  • أضف...