Mustafa Suleiman
-
المساهمات
8669 -
تاريخ الانضمام
-
تاريخ آخر زيارة
-
عدد الأيام التي تصدر بها
263
إجابات الأسئلة
-
إجابة Mustafa Suleiman سؤال في تغيير كلمة المرور في حسابي mongo db atlas كانت الإجابة المقبولة
من الإعدادات ستجد خيار باسم Database Access اضغط عليه
وسيتم عرض الـ users لقاعدة البيانات، يمكنك الضغط على edit من أجل تغيير كلمة المرور أو إضافة user جديد من خلال الضغط على add new database user وتعيين كلمة مرور لذلك المستخدم.
-
إجابة Mustafa Suleiman سؤال في معالجة خطأ في إرسال البيانات إلى الخادم كانت الإجابة المقبولة
رسالة "401 Unauthorized" تعني أن الطلب لم يتم تصديقه بنجاح عند إرساله إلى الخادم، أي أن الـ JWT (JSON Web Token) الذي تم إرساله مع الطلب غير صالح أو غير موجود.
عليك بالتالي:
تأكد من أنك قمت بتسجيل الدخول بنجاح وحصلت على JWT الصحيح عند تسجيل الدخول.
التأكد من أنك تقوم بإرسال الـ JWT الصحيح مع الطلب، وأنت تقوم بذلك بالفعل في كود العميل باستخدام:
"x-auth-token": user?.data?.token وتحقق من أن خادمك يستخدم نفس (JWT_SECRET) الذي تم استخدامه عند إنشاء الـ JWT ويجب أن يكون متطابقًا على الجانبين (الخادم والعميل) حتى يمكن التحقق من الـ JWT بنجاح.
وقم بتضمين وسيط الحماية (protect) في مسار الطلب /api/auth/change_password للتحقق من الـ JWT قبل تنفيذ العملية وتأكد من أن الوسيط موجود في سلسلة وسائط التوجيه التي تتعامل مع هذا المسار.
أيضًا تحقق من الجزء التالي في الكود:
await current_user.save() res.send(res.json({ success: true, data: current_user })) عليك أيضًا إزالة res.json() حيث أن res.send() بالفعل يقوم بإرسال الجواب بصيغة JSON.
-
إجابة Mustafa Suleiman سؤال في الـ Background في جهة HTML أو CSS كانت الإجابة المقبولة
نستخدم عنصر background في صفحة HTML لتحديد خلفية للعنصر نفسه، أو للصفحة ككلل، عن طريق تحديد قيمة للخاصية background-color.
ومثلاً لإضافة خلفية زرقاء إلى الصفحة ككل، علينا إضافة الكود التالي إلى عنصر body:
<body style="background-color: blue;"> ... </body> ولكن استخدام عنصر background في HTML له بعض القيود حيث لا يمكن استخدامه لتحديد صورة كخلفية، أو لتحديد كيفية تكرار الصورة.
أما استخدام عنصر background في صفحة CSS، فهو أكثر مرونة، ونستطيع استخدامه لتحديد خلفية للعنصر نفسه، أو للصفحة ككل، أيضًا لاستخدامه لتحديد صورة كخلفية، أو لتحديد كيفية تكرار الصورة.
ولإضافة خلفية زرقاء إلى الصفحة ككل، نقوم بإضافة الكود التالي إلى ملف CSS:
body { background-color: blue; } ولاستخدام صورة كخلفية، نكتب الكود كالتالي:
body { background-image: url("image.png"); } ولتكرار الصورة نكتب الآتي:
body { background-repeat: repeat; } أي من الأفضل كتابة تنسيقات CSS بشكل منفصل وخاصًة عنصر background وذلك لأنه أكثر مرونة وقابلية للتخصيص، وبالطبع تستطيع استخدام عنصر background في HTML إذا كنت بحاجة إلى تحديد خلفية بسيطة للعنصر نفسه أو للصفحة ككل.
-
إجابة Mustafa Suleiman سؤال في افضل الكتب عن php كانت الإجابة المقبولة
بخصوص الكتب الخاصة بلغة PHP فقد تم شرح الأمر هنا وعليك بالبدء من خلال كتاب
PHP & MySQL: Server-side Web Development by Jon Duckett في حال كنت ستتعلم من الصفر:
وبخصوص الكتب الخاصة بهياكل البيانات والخوارزميات وأيضًا جافاسكريبت وقواعد البيانات وأفضل الممارسات لكتابة كود نظيف وتحسين التفكير المنطقي أثناء التطوير، ستجد ترشيحات ممتازة هنا:
وتستطيع الإختيار من بين الكتب السابقة ما شئت لكن إذا أردت الأهم فهم:
Grokking Algorithms Clean Code: A Handbook of Agile Software Craftsmanship by Robert C. Martin Head first OOAD Good code, bad code Head First design patterns -
إجابة Mustafa Suleiman سؤال في مشكله مع مكتبة virtualenv كانت الإجابة المقبولة
من المفترض في حال تفعيل البيئة الإفتراضية أن يعرض الأمر pip freeze المكتبات المثبتة في البيئة فقط.
وعلي أي حال لعرض المكتبات المثبتة فقط في البيئة الافتراضية الحاليةفقط استخدم الأمر :
pip freeze --local تستطيع أيضًا استخدام الأمر pip list لعرض قائمة بالمكتبات المثبتة في البيئة الافتراضية الحالية.
ولكن هناك أمر هام تغفل عنه أنت هناك فرق بين virtualenv وvenv التي قمت بتفعيلها أنت، حيث أن virtualenv هي حزمة خارجية لإنشاء بيئة إفتراضية بينما venv هي وحدة نمطية قياسية في بايثون.
وأنت قمت بإنشاء بيئة venv عن طريق الأمر التالي:
python -m venv venv ثم تفعيلها عن طريق الأمر التالي:
venv\Scripts\activate أما virtualenv فعليك تثبيتها من خلال الأمر التالي:
pip install virtualenv ولإنشاء بيئة إفتراضية عليك بالتالي:
virtualenv my_env ثم تفعيل البيئة الافتراضية بالأمر التالي:
source my_env/bin/activate ولعرض المكتبات المثبتة في البيئة الافتراضية my_env، فسيؤدي الأمر التالي إلى ذلك:
pip freeze
-
إجابة Mustafa Suleiman سؤال في اي المسارات هذه الافضل للفرونت إند كانت الإجابة المقبولة
من الأفضل تعلم أساسيات البرمجة من خلال لغة شائعة الاستخدام مثل بايثون، والأفضل من ذلك هو تعلم الأساسيات من خلال C++ لكن أصعب بالطبع ولا مشكلة في التعلم من خلال بايثون.
أما Dart فهي تستخدم بشكل أساسي في إطار Flutter الخاص بتطوير تطبيقات الهاتف، فإذا كنت مهتمًا بتطوير تطبيقات الجوال أو التطبيقات متعددة المنصات، فستكون Dart وFlutter خيارات جيدة.
وعلي أي حال تستطيع تعلم أساسيات البرمجة من خلال أي لغة برمجة مشهورة، ولكن ذكرت لك الأفضل والأصح، حتى لا تضيع وقتك وأيضًا تستفاد بما تعلمته.
حيث أن بايثون شائعة الاستخدام وستتعرض لها عاجلاً أم آجلاً خلال رحلة تعلم البرمجة، وC++ مستخدمة بكثرة أيضًا وستعمل على تأسيسك بشكل أفضل من بايثون.
ولا يشترط تعلم بايثون أو أي لغة قبل دخول مجال الويب لكن تلك هي الطريقة الصحيحة لدخول مجال البرمجة، والبعض يتجه مباشرًة إلى تعلم HTML, CSS, JS ولا مشكلة في ذلك لكن المستوى لن يكون واحد بالطبع.
وعليك بالتركيز على اللغات الأساسيات للويب السابقة الذكر، وعدم التسرع في تعلم مكتبات أو إطارات مثل React وAngular فستصاب بالإحباط أو سيكون مستواك ضعيفًا بدون داعي، واللغات الأساسية هي ما تؤهلك لتعلم أي شيء بعد ذلك.
-
إجابة Mustafa Suleiman سؤال في لماذا يتم تنفيذ الكود مرتين في رياكت كانت الإجابة المقبولة
تقصد في المرة الأولى عند فتح التطبيق بدون أي تحديث للحالة state أو الإعتماديات الخاصة بالخطاف useEffect؟
في حال كان الأمر كذلك، فهو بسبب وضع StrictMode وما يفعله هو 3 أشياء أثناء تطوير المشروع:
يعيد عرض مكوناتك مرة أخرى Re-renders للعثور على الأخطاء الناتجة عن إعادة العرض غير النقي (التأثيرات الجانبية). يعيد تشغيل تأثيرات مكوناتك مرة أخرى للعثور على الأخطاء الناجمة عن عدم وجود دالة تنظيف مناسبة. يتحقق من مكوناتك مما إذا كان يتم استخدام واجهات برمجة التطبيقات القديمة deprecated APIs. وبالتالي يتم طباعة الرسالة مرتين في الكونسول، ومن المفترض أن تجد ذلك الوضوع مفعل في مشروعك في ملف index.js أو app.js كالتالي:
const root = ReactDOM.createRoot( document.getElementById('root'), ); root.render( <React.StrictMode> <App /> </React.StrictMode>, ); وفي حال تعطيله قم بإزالة StrictMode ليصبح الكود كالتالي:
const root = ReactDOM.createRoot( document.getElementById('root'), ); root.render( <App />, );
-
إجابة Mustafa Suleiman سؤال في حمايه الفيديوهات والصور في الموقع كانت الإجابة المقبولة
تم الحديث عن ذلك بشكل مفصل في النقاش التالي:
وبإختصار قم بتخزين الفيديوهات والصور على خوادم آمنة ومحمية مثل Vimeo ويمكنك استخدام خدمات التخزين السحابي مثل Amazon S3 أو Google Cloud Storage وضبط الصلاحيات بحيث يكون الوصول إلى الملفات مقيدًا.
وتستطيع تشفير ملفات الفيديو باستخدام تقنيات التشفير المتاحة في خوادم الوسائط الخاصة بك أو استخدام DRM (إدارة الحقوق الرقمية) للفيديوهات إذا كان ذلك ضروريًا.
-
إجابة Mustafa Suleiman سؤال في كيفية جعل وظيفة دورية في Node.js أسرع وأفضل كانت الإجابة المقبولة
بدلاً من تخزين رقم الأيام للاشتراك في متغير، تستطيع تخزينه في قاعدة بيانات، وسيسمح لك ذلك بإجراء عمليات بحث أكثر كفاءة على بيانات الاشتراك.
وذلك باستخدام نموذج بيانات بسيط يحتوي على حقل واحد لتاريخ انتهاء الاشتراك، ثم، استخدام تعبيرات SQL لتحديد العملاء الذين انتهت صلاحية اشتراكهم.
وكمثال استخدم العبارة التالية لتحديد العملاء الذين انتهت صلاحية اشتراكهم قبل يوم واحد:
SELECT * FROM subscriptions WHERE expiration_date < NOW() - INTERVAL 1 DAY وهناك طريقة أخرى وهي بدلاً من استخدام مكتبة node-cron، استخدم مؤقتات Node.js لتشغيل الوظيفة الدورية الخاصة بك، مما سيوفر لك تشغيل الوظيفة في الوقت المحدد بدقة أكبر.
استخدم وظيفة setTimeout() أو setInterval()، لتشغيل الوظيفة الدورية الخاصة بك كل يوم في الساعة 12 منتصف الليل:
const subscriptionChecker = () => { // Do something }; setTimeout(subscriptionChecker, 1000 * 60 * 60 * 24, 0); // Run the function every day at midnight
-
إجابة Mustafa Suleiman سؤال في أواجه مشكلة في عدم حفظ البيانات كانت الإجابة المقبولة
هل تواجه مشكلة في دورة معينة؟
من الأفضل التعليق أسفل فيديو الدورة لمساعدتك بشكل أفضل، أو توضيح المشكلة في حال كانت غير متعلقة بالدورة في أكاديمية حسوب.
وفي حال كانت مشكلتك تتعلق بقواعد البيانات، فتأكد من أن الخادم يعمل وبيانات الإتصال الخاصة بقاعدة البيانات صحيحة وأنه لا يظهر لك أية أخطاء في منفذ الأوامر Terminal أو في الكونسول في الواجهة الأمامية.
-
إجابة Mustafa Suleiman سؤال في مشكلة remote branch already exist أثناء رفع المشروع كانت الإجابة المقبولة
لأنك تستخدم Powershell والأمر الخاص بالحذف مختلف هنا وهو:
Remove-Item -Recurse -Force -Path ".git" أو بإمكانك استخدام الأمر التالي في أي منفذ أوامر:
git rm -r -f .git
-
إجابة Mustafa Suleiman سؤال في كيف أستخدم مكتبة Prism.js كانت الإجابة المقبولة
أولاً عليك باستيراد الملفات المطلوبة وهي:
prism.js prism.css prism-live.css prism-live.js ويمكنك استيرادها من خلال الروابط التالية:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" /> <script src=" https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js "></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> ثم استيراد ملف prism-live.js كالتالي:
<script src="prism-live.js?load=css,html,javascript"></script> حيث أن prism-live.js تعتمد على prism.js وتسمح بتلوين الأكواد داخل عنصر <textarea>.
وبعد ذلك عليك بحقن الأكواد من خلال جافاسكريبت في iframe وضع له id وليكن باسم code كالتالي:
<iframe id="code"></iframe> وقد شرحت الأمر بالتفصيل في سؤال من قبل عن كيفية إنشاء محرر أكواد بسيط مثل CodePen هنا:
موقع محرر اكواد -
إجابة Mustafa Suleiman سؤال في تعلم البرمجة في الثانوية العامة كانت الإجابة المقبولة
أنت تُفكر بالأمر بشكل غير صحيح، عليك بتحديد العائد والهدف من وراء أي شيء تقوم بفعله، هل أنت بحاجة إلى شهادة الثانوية والحصول على درجة مرتفعة لدخول جامعة ذات مستقبل جيد؟
إذن عليك التركيز في الفترة القادمة على الدراسة من أجل ذلك، وتخصيص الوقت المتبقي لدراسة البرمجة أي ستصبح عملية تعلم البرمجة أمر ثانوي في وقت فراغك.
أما إن كانت تلك الشهادة والمجموع بدون عائد جيد لك أو مستقبل تراه مناسبًا، إذن عليك بتخصيص الجزء الأكبر من وقتك لتعلم البرمجة مع توفير وقت مناسب من أجل النجاح والحصول على شهادة الثانوية ودخول جامعة للحصول على شهادة جامعية فقط.
حيث أنك قد أخبرت بأن العمل يمثل أمر ضروري بعد الثانوية بالنسبة لك، لذلك الظروف الشخصية لديك هي التي ستحدد مستقبلك وعليك السعي وفقًا لذلك.
أما إن كان لديك الوقت والظروف المناسبة، فعليك بالتركيز على الدراسة ودخول جامعة متعلقة بالبرمجة مثلاً ثم بدء رحلة تعلم البرمجة وتستطيع بدء ذلك مبكرًا في العطل الصيفية من أجل دراسة الأساسيات.
لكن نصيحتي إليك هي ألا تنقطع عن تعلم البرمجة حاول تخصيص وقت ولو يسير من أجل كتابة الكود وتنفيذ مشروع بسيط من أجل تثبيت ما تعلمته ولكي لا تنسى وتضيع مجهودك وتعود لنقطة قريبة من البداية بعد مرحلة إنقطاع كبيرة.
-
إجابة Mustafa Suleiman سؤال في التسويق بالعمولة و منصة ووردبريس كانت الإجابة المقبولة
بالنسبة للمواقع التي ذكرتها فالأول يعتمد على Drupal وليس ووردبريس، والثاني يعتمد على ووردبريس ويستخدم قالب مخصص.
وبإمكانك أنت البحث عن قوالب خاصة بالـ coupons على المنصات التي توفر قوالب ووردبريس مثل موقع themeforest، وبالبحث عن coupons ستجد النتائج التالية:
https://themeforest.net/category/wordpress?term=coupons وبخصوص تنفيذ المشروع من خلال برمجة خاصة، فلا تعتمد على الشركات في ذلك حيث أن التكلفة ستكون مرتفعة كما ذكرت وذلك أمر طبيعي، والأفضل تعيين مبرمج جيد ذو سابقة أعمال من على مواقع العمل الحر مثل مستقل.
والتكلفة تعتمد على المميزات التي تريد توافرها بالموقع والتصميم وخلافه وأيضًا خبرة المبرمج.
وعن تحويل الموقع لتطبيق من خلال فلاتر، فالأمر بسيط إذا كنت تريد عرض الموقع كما هو من خلال تطبيق مع إضافة مزايا بسيطة، لكن تحويل الموقع بالكامل إلى تطبيق متعدد الصفحات مثلاً وبمزايا مختلفة فسترتفع التكلفة بلا شك.
-
إجابة Mustafa Suleiman سؤال في من اين ابدأ؟ كانت الإجابة المقبولة
أولاً دورة تطوير المنتجات موجهة لمن يريد أن يصبح مدير تطوير منتجات أو صاحب مشروع، لكنها مفيدة لك كمبرمج بالطبع حيث ستتعرف على عملية إدارة تطوير المنتج والمشروع من البداية قبل كتابة الكود فهي آخر خطوة، لكنها ليست مناسبة لك في البداية لن تشعر بفائدة إذا كنت تريد أن تصبح مبرمج فهي مفيدة بعد تعلم البرمجة وذلك واضح من الدورات الأخرى التي اخترتها.
والفيديو التالي سيوضح لك ماهية دورة تطوير المنتجات:
لذلك أنصحك أولاً بتعلم أساسيات البرمجة وعلوم الحاسوب من خلال دورة علوم الحاسوب وستجد نقاش حول فائدة تلك الدورة هنا:
وبعد الإنتهاء من دورة علوم الحاسوب، سيصبح لديك دراية ووعي بالمجالات البرمجية المختلفة والقدرة على الإختيار من بينها وأيضًا تعلم وإنتاجية أسرع عند تعلم الدورات الأخرى.
أنصحك بالإنتقال لدورة تطوير واجهات المستخدم فهى سهلة وستؤهلك لدخول مجال الويب، وتعلم اللغات الأساسيات الخاصة به وهي HTML, CSS, JS ومكتبة jQuery وBootstrap، وستحتاج تلك الللغات والمهارات في دورة بايثون لذلك رغم أنك ستتعلمها في تلك الدورة، لكن من الأفضل البدء بالترتيب الصحيح.
بعد ذلك تنتقل لدورة بايثون وستجد شرح حول تلك الدورة هنا:
وأنصحك بالإطلاع على النقاش التالي ستجد به الكثير من الإجابات على الأسئلة لديك:
-
إجابة Mustafa Suleiman سؤال في عقود العمل في العمل الحر وخصيصا في مجال البرمجه كانت الإجابة المقبولة
الأهم هو إحتواء العقد على النقاط التالية:
تحديد اسم وعنوان كل من صاحب العمل أو المتعاقد والمورد بشكل واضح. تفاصيل المشروع بدقة، بما في ذلك الغرض منه، والوظائف التي يجب تنفيذها، والجدول الزمني المتوقع للتسليم، والميزانية المحددة. طريقة الدفع، والمبلغ الإجمالي، والجدول الزمني للدفعات. المعايير التي سيتم من خلالها قبول المشروع، وكيفية تحديد أي عيوب أو أخطاء. المسؤوليات القانونية لكل طرف، بما في ذلك المسؤولية عن الأضرار الناتجة عن الإهمال أو الخطأ. سرية المعلومات. تسليم الكود المصدري. آلية حل النزاعات في حالة حدوث أي خلافات بين الطرفين. بالإضافة إلى العناصر الأساسية، تتضمن عقود العمل في مجال البرمججة أيضًا عناصر أخرى، مثل:
تحديد من سيمتلك حقوق الملكية الفكرية للمشروع. تحديد التزام كل طرف بعدم الكشف عن معلومات سرية للطرف الآخر. تحديد كيفية إجراء أي تغييرات في المشروع. كيفية التعامل مع أي ظروف طارئة قد تؤثر على المشروع. وبخصوص الصيغة أو قالب جاهز فابحث عن contract template for Software Development projects، أو ابحث عن "عقد برمجة موقع" وستجد نماذج يمكنك الإطلاع عليها.
ومن الأسهل استخدام موقع عمل حر مثل مستقل والإتفاق على شروط المشروع بالتفصيل وكتابتها في محادثة المشروع، وستضمن المنصة حقك وحق العميل، ولديك منصة مستقل.
-
إجابة Mustafa Suleiman سؤال في توزيع الأرباح فى الشركات الصغيرة - Part Time كانت الإجابة المقبولة
في حالة الشركات الصغيرة التي تعمل بنظام Part Time، يتم توزيع الأرباح بناءًا على المساهمة النسبية لكل شريك في نجاح الشركة، وبالتالي الشخص الأول هو صاحب رأس المال بنسبة 100%، أي يستحق الحصول على حصة أكبر من الأرباح، ولتكن بنسبة 60% أو 70%.
أما بالنسبة للشخص الثاني والثالث، فهما مسؤولان عن أقسام مهمة في الشركة، وبالتالي يستحقان الحصول على حصص متساوية، كنسبة 20% لكل منهما.
وبالتالي، فإن نسبة توزيع الأرباح ستكون على النحو:
الشخص الأول: 60% الشخص الثاني: 20% الشخص الثالث: 20% بالطبع، تلك مجرد نسبة تقريبية، ويمكن تعديلها حسب الاتفاق بين الشركاء، فإن كان الشخص الثاني مسؤولاً عن قسم فني مهم يساهم بشكل كبير في نجاح الشركة، فقد يستحق الحصول على حصة أكبر، ويجب أن يكون هناك اتفاق مكتوب بين الشركاء بشأن نسبة توزيع الأرباح.
من المهم أيضًا مراعاة العوامل التالية عند توزيع الأرباح:
حجم الشركة حجم الإيرادات حجم الأرباح المخاطر التي يتحملها كل شريك مساهمة كل شريك في نجاح الشركة -
إجابة Mustafa Suleiman سؤال في الفرق بين NPM و Yarn كانت الإجابة المقبولة
ببساطة وبدون تعقيد في البداية، كان "npm" هو أشهر أداة لإدارة المكتبات الخاصة بجافاسكريبت، وعندما تبدأ مشروعك، تقوم بكتابة أمر "npm init" لإنشاء ملف "package.json"، وذلك الملف يحوي قائمة بجميع المكتبات التي تحتاجها لمشروعك.
بعد ذلك، تستخدم أمر "npm install" لتحميل المكتبات المذكورة في ملف "package.json" إلى مجلد يسمى "node_modules".
وهناك ملف آخر يسمى "package-lock.json" يساعد على ضمان تثبيت نسخ محددة من المكتبات بشكل دقيق، لذا إذا كان مطور مشروع ما قد قام بتحديث مكتبة معينة إلى الإصدار 2 ثم 3، وآخر قام بتحديثها مباشرة إلى الإصدار 3، يمكن استخدام هذا الملف لضمان أن الإصدارات المثبتة متطابقة من خلال أمر npm ci.
ومع ذلك، كانت "npm" تعاني من مشاكل مثل التثبيت غير المتسق، وحالات أخرى مثل تغيير ملكية ملفات النظام عند تشغيلها على نظام لينكس.
لحل تلك المشاكل، قامت فيسبوك بإطلاق أداة جديدة تدعى "Yarn" في عام 2016 والتي تمتاز Yarn بأنها أسرع وأكثر أمانًا واستقرارًا من npm.
وبنفس الكيفية تستطيع استخدام "yarn init" لإنشاء ملف "package.json" مع Yarn، ثم "yarn install" لتحميل المكتبات. ومثلما هو الحال مع npm، تقوم Yarn بإنشاء مجلد "node_modules" وملف "yarn.lock" لتثبيت الإصدارات بشكل دقيق.
بإمكانك أيضًا التبديل من استخدام npm إلى Yarn بسهولة.
على الرغم من ذلك، عليك بمعرفة أن npm تم تحسينها أيضًا مع كل إصدار جديد، وهناك الكثير من المشاريع التي لا تزال تستخدم npm بدلاً من Yarn.
وفي الوقت الحالي أصبح لا يوجد فرق تقريبًا حيث تم تطوير npm لتمتلك نفس الخواص في yarn والتي منها package.json واستخدام أفضل لإتصالات الشبكة وملفات التخزين المؤقتة واستخدام checksums الخاصة بتفقد أمان وموثوقية الكود الذي تقوم بتحميله.
ولكن هناك ميزة مثل parallel installation متوفرة في yarn وتعني تحميل المكتبات بشكل متوازي مما يسرع من عملية التثبيت، وأيضًا ميزة Zero-Install وتتيح تجنب تثبيت المكتبات المكررة بين مشاريع مختلفة، أي عندما تكون هناك مكتبات مشتركة بين مشاريع مختلفة، فإن Yarn يقوم بمشاركتها دون الحاجة إلى تثبيت نسخة منها في كل مشروع على حدة مما يوفر مساحة على القرص ويقلل من استهلاك الشبكة والموارد.
الخلاصة
يعتبر Yarn أسرع من npm بسبب تنفيذه لعملية التثبيت المتوازي، حيث يمكنه تنزيل وتثبيت مكتبات مختلفة في وقت واحد، هذا يؤدي إلى اكتمال عمليات التثبيت بشكل أسرع، مما يوفر الوقت للمطورين أثناء إعداد مشاريعهم. تستفيد Yarn من مزايا أمان أكبر مقارنةً بـ npm. ذلك لأن Yarn تحتوي على آلية تحقق أفضل لتجنب الثغرات الأمنية والتحقق من صحة المكتبات التي يتم تثبيتها، مما يقلل من احتمالية وجود مشكلات أمنية في مشاريعك. Yarn يستهلك مساحة أكبر على القرص مقارنةً بـ npm، ذلك لأن Yarn يخزن البيانات إضافية مما يزيد من استهلاك المساحة، وقد يكون أمرًا مزعجًا إذا كنت تعمل على جهاز قرص صلب ذو مساحة محدودة. -
إجابة Mustafa Suleiman سؤال في خطأ no such table عند إضافة بيانات في جدول في قاعدة بيانات SQLite كانت الإجابة المقبولة
رسالة الخطأ تخبرك أنه لا يوجد جدول باسم STUDENTS هل لديك جدول بذلك الاسم؟
-
إجابة Mustafa Suleiman سؤال في اريد regular expression تقبل النصوص العربية والانجليزية والارقام والرموز وايضا ال emoji كانت الإجابة المقبولة
تستطيع الإعتماد على التعبير الحديث التالي:
/\p{Emoji}/u ففي الدعم الأحدث للتعبيرات العادية في البيئة المتصفحة (مثل Chrome، Firefox، Safari، إلخ)، التحسينات تسمح لك باستخدام تعبيرات عامة تعتمد على خصائص يونيكود للتعرف على مجموعات محددة من الأحرف، مثل الإيموجي.
خاصية \p{Emoji} escape تطابق أي حرف Unicode مصنف على أنه رمز تعبيري، والعلامة u تخبر محرك regular expression بتفسير النمط كسلسلة Unicode.
وكمثال الكود التالي سيكشف عن جميع الرموز التعبيرية في السلسلة "Hello 😀 😄":
const text = "Hello 😀 😄"; const regex = /\p{Emoji}/u; const matches = regex.exec(text); console.log(matches); // ['😀', '😄'] و هناك نطاق يمثل الأحرف العربية والإنجليزية والأرقام ويمكنك دمجه مع \p{Emoji}. النطاق المشترك للأحرف العربية والإنجليزية والأرقام هو \p{L}\p{N}.
إليك الكود مع تضمين الأحرف العربية والإنجليزية والأرقام:
const text = "Hello 😀 😄 مرحبا 123"; const regex = /[\p{L}\p{N}\p{Emoji}]+/gu; const matches = text.match(regex); console.log(matches); // ['Hello', '😀', '😄', 'مرحبا', '123'] اعتمدت على \p{L} للدلالة على الأحرف اللغوية (مثل العربية والإنجليزية) و\p{N} للأرقام، أما + تعني أنه يمكن أن يكون هناك تطابق لسلسلة من تلك الأحرف والأرقام، و u يشير إلى دعم اليونيكود.
واستخدام text.match(regex) بدلاً من regex.exec(text) لأنك تريد العثور على جميع التطابقات في النص، ليس فقط أول تطابق.
-
إجابة Mustafa Suleiman سؤال في كيفية فتح مرحلة ثانية في تطبيق Android بعد الانتهاء من المرحلة الأولى كانت الإجابة المقبولة
بالنسبة للسؤال الأول، لمنع فتح المرحلة الثانية حتى يتم الانتهاء من المرحلة الأولى، استخدمي الكود التالي:
// Check if the first level is completed if (firstLevelCompleted) { // Open the second level openLevelTwo(); } يمكنك أيضًا استخدام متغير لتحديد حالة المرحلة الحالية، مثلاً إنشاء متغير يسمى currentLevel وضبطه على 1 للمرحلة الأولى و2 للمرحلة الثانية. ثم، استخدام ذلك المتغير للتحقق مما إذا كان المستخدم قد وصل إلى المرحلة الثانية أم لا.
// Check the current level if (currentLevel == 2) { // Open the second level openLevelTwo(); } بالنسبة للسؤال الثاني، لفتح المرحلة الثانية عند النقر على الزر الموجود في نهاية الصفحة الأولى، نستخدم التالي:
// Click on the button to open the second level Button button = findViewById(R.id.button); button.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { openLevelTwo(); } }); بالنسبة للسؤال الثالث، لفتح المرحلة الثانية بعد جمع 20 نقطة، تستطيعي استخدام الكود التالي:
// Check the score int score = getScore(); if (score >= 20) { // Open the second level openLevelTwo(); } بإمكانك أيضًا استخدام متغير لتحديد النتيجة الحالية، وكمثال إنشاء متغير يسمى score وضبطه على عدد النقاط التي جمعها المستخدم ثم، استخدام هذا المتغير للتحقق مما إذا كان المستخدم قد جمع ما يكفي من النقاط للانتقال إلى المرحلة الثانية أم لا.
// Check the score int score = getScore(); if (score >= 20) { // Open the second level openLevelTwo(); }
-
إجابة Mustafa Suleiman سؤال في معالجة خطأ عند إستعمال redux كانت الإجابة المقبولة
بسبب أن createStore أصبحت غير مدعومة أي deprecated والكود سيعمل بدون مشكلة لكن كتحذير فقط ومن الأفضل استخدم Redux Toolkit بدلاً من Redux.
وإذا أردت استيراد createStore فعليك استيرادها بالشكل التالي:
import { legacy_createStore as createStore } from 'redux'; و Redux Toolkit هو نهج موصى به لكتابة منطق Redux حاليًا، بما في ذلك إعداد المخزن (store)، والمنشئين (reducers)، واسترجاع البيانات، والمزيد.
حيث أن Redux Toolkit يقدم واجهة برمجة التطبيق (API) تُسمى configureStore والتي هي النسخة المحسنة من createStore والتي تبسط عملية إعداد المخزن وتساعد في تجنب الأخطاء الشائعة، وconfigureStore تكون بمثابة غمد (wrapper) حول واجهة البرمجة الأساسية لـ Redux وهي createStore، وتتولى الكثير من عمليات إعداد المخزن تلقائيًا، كالتالي:
import { configureStore } from "@reduxjs/toolkit"; https://redux.js.org/tutorials/fundamentals/part-8-modern-redux#using-configurestore -
إجابة Mustafa Suleiman سؤال في مشكلة هامش أبيض في صورة مستخدمًا Intersection Observer في الواجهة، ما السبب وكيفية حله؟ كانت الإجابة المقبولة
قمت بتكبير وتصغير الشاشة فظهرت المشكلة بالفعل، لكن كان علي تفقد جميع العناصر بالصفحة لتفقد ما سبب المشكلة وتبين أنه القسم التالي في الصفحة:
ولحل المشكلة عليك باستخدام overflow: hidden على القسم section.works .gallary-work كالتالي:
section.works .gallary-work { background-image: url(../images/hero-bg/app.jpg); background-position: center; background-attachment: fixed; background-size: cover; margin-top: 120px; overflow: hidden; } وبخصوص التصميم هو جيد أحسنت، لكن بخصوص التأثيرات عند التمرير فعليك بتقليص الوقت بحيث لا يشعر بها المستخدم فلا يجب أن ينتظر المستخدم أن تظهر العناصر أي يجب تحقيق التوازن بين هذا وذاك.
-
إجابة Mustafa Suleiman سؤال في العودة إلى الاعدادات الافتراضية لمحرر الاكواد vs code كانت الإجابة المقبولة
عليك بتفقد الإضافات لديك وحذف أي إضافة متعلق بـ Twig ثم إعادة تشغيل المحرر، وفي حال استمرت المشكلة عليك بالتوجه إلى الإعدادات كما أخبرك عمر، ثم الضغط الأيقونة الخاصة بعرض ملف settings.json ثم البحث عن أي إعدادات خاصة بـ Twig ثم حذفها ثم الحفظ وإعادة تشغيل المحرر.
وفي حال استمرت المشكلة من الأفضل حذف VScode تمامًا ثم إعادة تثبيت آخر إصدار مرة أخرى، وبخصوص Twig عليك باستخدام الإضافة التالية حيث لا يوجد بها مشكلة التعليقات التي ظهرت لديك:
https://marketplace.visualstudio.com/items?itemName=mblode.twig-language-2 وأيضًأ تأكد من الأسفل في المحرر أنه تم إختيار الصيغة الصحيحة للملف وهي HTML كالتالي:
-
إجابة Mustafa Suleiman سؤال في معالجة الخطأ التالي [section] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> في react-router-dom كانت الإجابة المقبولة
المشكلة بسبب وجود عنصر <section> كفرع مباشر لعنصر <Routes> داخل الكود، وفي React Router v6، يجب أن تحتوي عناصر <Routes> على عناصر <Route> فقط أو <React.Fragment> كعناصر داخلية أو كأطفال childrens.
لذلك عليك باستخدام <Route> للـ <section> أيضًا بدلاً من وضع <Routes> داخل <section>.
import { Route, Routes } from 'react-router-dom'; function App() { return ( <> <Navbar /> <Routes> <Route path="/" element={<Landing />} /> <Route path="/login" element={<Login />} /> <Route path="/register" element={<Register />} /> </Routes> </> ); } وبالتالي ولم يعد هناك <Routes> داخل <section> وتم وضع جميع الـ <Route> مباشرة داخل <Routes> الرئيسي، مما سيحل مشكلة الخطأ الذي كنت تواجهه.
https://reactrouter.com/en/6.15.0/upgrading/v5