Mustafa Suleiman

كليهما أدوات تطوير تساعد في تنظيم وتحسين عملية تطوير تطبيقات الويب، لكن يختلفان في العديد من الجوانب ويستخدمان لأغراض مختلفة وتستطيع استخدام كلاهما في نفس المشروع. وإليك الفرق بينهما. 1- الغرض الأساسي: Gulp.js: أداة لإدارة مهام التطوير والتشغيل الأوتوماتيكي للمشروع، وتستخدم Gulp.js لتنفيذ مهام متكررة مثل تجميع الملفات وتحويلها وضغطها وتحسينها. Vite: أداة لتطوير سريعة ومباشرة تستخدم لتجربة وتطوير تطبيقات الويب بشكل فعال، وتركز Vite على توفير بيئة تطوير سريعة التحميل (dev server) مع إعادة تحميل فوري (hot reloading) لتجربة تغييرات الكود على الفور. 2- نظام البناء: Gulp.js: تعتمد على تحديد المهام (task-based) وتشغيلها بتسلسل معين، وتستخدم تدفق المهام (task stream) لتنفيذ سلسلة خطوات للتحويل والتجميع والضغط والتحسين. Vite: تعتمد على نظام البناء السريع (esbuild) والذي يوفر تجميع سريع للملفات باستخدام ES Modules، وتستخدم Vite نموذج مستند الويب (WebAssembly) لبناء الوحدات بشكل فعال. 3- الأداء: Gulp.js: تعد أداة قوية ومتعددة الاستخدامات وتعتمد على مهام تشغيل البرنامج النصي. ومع ذلك، فإنه قد يعاني من بطء في عملية التجميع والتحويل عند التعامل مع مشاريع كبيرة. Vite: أسرع بكثير في عملية البناء وتحميل المكونات على الخادم التطويري، حيث يعتمد على تجميع سريع وتجاوب فوري لتغييرات الكود. 4- تكامل المكتبات: Gulp.js: يمكن استخدام Gulp.js مع مجموعة واسعة من المكتبات والإضافات المختلفة التي تعزز إمكانيات تطوير الويب. Vite: متكاملة بشكل أفضل مع بعض المكتبات والأطر العمل الحديثة مثل Vue.js وReact وPreact والتي تستفيد من قدراته في تطوير الواجهة الأمامية. أي ببساطة، إذا كنت ترغب في أتمتة مهام مثل تصغير الحجم للكود (minification)، التجميع (compilation)، اختبار الوحدات (unit testing)، فحص الأخطاء البرمجية (linting)، ومهام مماثلة، فاستخدم Gulp.js. بينما Vite ومثيلاتها، توفر بيئة تطوير سريعة التحميل (dev server)، وهذا يعني أنه يتم تجهيز وتحميل المكونات فورًا عند التطوير، مما يسمح لك برؤية التغييرات الخاصة بك على الفور دون الحاجة إلى إعادة تحميل الصفحة، مما يوفر وقتًا قيمًا في عملية التطوير. أيضًا دعم قوي للموديولز (Modules) الحديثة مثل ES Modules، وتستطيع الاستفادة من هذا الدعم لتجميع وتحويل ملفات JavaScript بسرعة كبيرة، مما يؤدي إلى تحميل أسرع لتطبيقك. وVite وغيرها من بيئات التطوير مصممة خصيصًا للتكامل مع الأطر العمل الحديثة مثل Vue.js وReact و Preact وغيرها، وتتيح لك Vite الاستفادة من قدرات تلك الأطر العمل بشكل أفضل، مثل تجميع المكونات وتحويلها وتحميلها بشكل فعال. وبشكل خاص تعتبر Vite أحد أدوات التطوير السريعة والمباشرة التي توفر تجربة تطوير سلسة وأداءًا عاليًا، حيث تعتمد Vite على تقنيات مثل تجميع سريع باستخدام ES Modules والتحميل اللحظي للمكونات لتحقيق أداء ممتاز في تطبيقات الويب. والصحيح هو مقارنة Vite مع webpack مثلاً أو Laravel Mix وقد تم شرح ذلك هنا بشكل وافي:

اسمح لي بالتحدث بصراحة معك، إن قمت بالإكتفاء بما تقدمه لك أي دورة لن تصبح مبرمج محترف، بالطبع ستصبح قادر على تنفيذ المشاريع بعد الإنتهاء من الدورة، لكن هناك أمور أنت بحاجة إلى تعلمها خارج الدورة، فبعد الإنتهاء منها. ابحث عما ينقصك وقم بتعلمها والأفضل فعل ذلك أثناء تعلم الدورة أي ابحث فورًا عما تريده وقم بالتطبيق لتثبيت المعلومة، وستجد كم هائل من المصادر بخصوص مجال الويب على اليوتيوب، وأيضًا كما أشار لك عمر ستجد في أكاديمية حسوب قسم كامل خاصة بمقالات ودروس لغات الويب HTML, CSS, JS، وذلك في قسم مقالات البرمجة. وأيضًا يوجد موسوعة حسوب. وتستطيع السؤال هنا بعد البحث عما تريد فهمه إذا واجهت صعوبة، وأيضًا أسفل الدورة إذا كان السؤال متعلق بمحتوى الفيديو في الدورة. وقد أوضحت من قبل تلك النقطة في النقاش التالي: فمثلاً لو قمت بالبحث عن Grid في شريط البحث في الأكاديمية والتنقل بين صفحات النتائج ستجد التالي، أو تستطيع البحث على جوجل ووضع كلمة حسوب بجانب كلمة البحث مثلاً "شرح Grid حسوب":

سأوضح لك طريقة عمل الدوال CEIL و REPLACE في MySQL مع أمثلة لتفهم الأمر: 1- دالة CEIL تعمل دالة CEIL على تقريب العدد العشري إلى الأعلى (أكبر عدد صحيح) المقابل له. طريقة كتابة الدالة: CEIL(x) حيث x هو العدد الذي ترغب في تقريبه للأعلى. مثال: لنفترض أن لدينا جدول يحتوي على عمود يحتوي على الأرقام العشرية التالية: +-------+ | Value | +-------+ | 2.4 | | 3.1 | | 5.7 | +-------+ وإذا أردنا تطبيق دالة CEIL على هذا الجدول، ستكون النتيجة كالتالي: +-------+--------+ | Value | Result | +-------+--------+ | 2.4 | 3 | | 3.1 | 4 | | 5.7 | 6 | +-------+--------+ لذلك، الدالة تقوم بتقريب الأعداد العشرية للأعلى لأقرب عدد صحيح. 2- دالة REPLACE تقوم دالة REPLACE بالبحث عن واستبدال جميع حالات ظهور نص محدد داخل سلسلة النصوص. طريقة كتابة الدالة: REPLACE(str, find_string, replace_with) حيث: str: السلسلة التي ترغب في البحث واستبدال النص فيها. find_string: النص الذي ترغب في البحث عنه. replace_with: النص الذي ترغب في استبدال find_string به. مثال: لنفترض أن لدينا جدول يحتوي على عمود يحتوي على السلاسل التالية: +-------------------+ | Name | +-------------------+ | John Doe | | Jane Doe | | John Smith | +-------------------+ إذا أردنا استخدام دالة REPLACE لاستبدال "John" بـ "Adam"، ستكون النتيجة كالتالي: +-------------------+ | Name | +-------------------+ | Adam Doe | | Jane Doe | | Adam Smith | +-------------------+ لذلك، الدالة تقوم بالبحث عن النص المحدد واستبداله بالنص الجديد في جميع حالات الظهور.

أولاً حاول إعادة تعيين كلمة المرور من الرابط التالي: https://www.linkedin.com/uas/request-password-reset وإذا لم يفلح الأمر، ععليك بعمل إبلاغ هنا من خلال رابط محدد وبه استمارة للإبلاغ عن Compromised Account أي حساب LinkedIn تم تهكيره. https://www.linkedin.com/help/linkedin/ask/TS-RHA وستقوم بكتابة الاسم الأول First name من الحساب ثم الاسم الثاني Last name ثم كتابة الإيميل الخاص بالحساب، ثم رابط حسابك على لينكيدإن وتستطيع البحث عن حسابك في خانة البحث لتتمكن من إيجاد الرابط. وفي خانة التفاصيل، قم بكتابة الأمر بالتفصيل، وتستطيع الكتابة بالعربية ثم ترجمة النص على جوجل ترجمة مثلاً. والآن عليك بالإنتظار لحين الرد عليك.

أولاً عليك بالتفكير في مشروع يقوم بحل مشكلة لدي المهتمين بالألعاب، أو توفير خدمة لتسهيل أمر ما عليهم، وهكذا، لا أن تقوم بإنشاء مشروع وتفرض الفكرة عليهم يجب أن يكون مفيد حقًا. وإذا كان الأمر على سبيل التجربة فلا مشكلة، فلن تتعلم ما لم تجرب وتخطيء، والجميع كذلك. وبخصوص التسويق، بعد التثبت من فكرة المشروع ووجود إحتياج إليها أو فائدة، تستطيع إنشاء المشروع بميزاته الأساسية فقط أي MVP، ثم تقوم بعرض ميزات المشروع والفائدة التي يوفرها في الجروبات الخاصة بالمهتمين بالألعاب، والبعض يقوم بالإعلان لدي القنوات المختصة بالألعاب أو الصفحات وأحيانات المجموعات الكبيرة على الفيسبوك مثلاً. أو تستطيع التسويق بالمحتوى عبر كتابة مقالات أو إنشاء فيديو يهتم به محبي الألعاب والتسويق لمشروعك من خلاله. أو تستطيع الإعلان من خلال صفحتك الرسمية على وسائل التواصل، وبعد فترة ستبني قاعدة مستخدمين بتلك الطريقة. وأيضًا ضبط وتحسين الـ SEO يساعد كثيرًا في العثور على موقعك من خلال المحتوى واستهداف كلمة ليتم إيجادك من خلالها في حال كان هناك بحث عن الخدمة التي تقدمها، وإن لم يوجد ذلك، فعليك بتكوين وبناء Brand لموقعك بحيث يتم التعرف على الخدمة التي تقدمها. والبعض يقوم بتكوين قاعدة مستخدمين عن طريق إنشاء مجموعة على الفيسبوك مثلاً أو قناة تيليجرام. وهناك قسم خاص بمقالات ودروس التسويق والمبيعات في أكاديمية حسوب.

السبب أنه قد يحذف العضو سؤال قم تم النقاش عليه والإجابة من قبل مختلف أعضاء الأكاديمية، وبالتالي تضييع الفائدة والمجهود، وكما ترى الأسئلة هنا يتم بذل جهد في الإجابة عليها من قبل الجميع.

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

عند بناء صفحات الويب باستخدام HTML، يُستخدم عنصر <div> كثيرًا لتحديد وتجميع مجموعات من العناصر المرئية في الصفحة وتنظيمها في بنية منظمة، وتعتبر <div> هي واحدة من عناصر التنسيق الأساسية في HTML ولا تحمل أي معنى خاص بذاته. وتُستخدم عناصر <div> بشكل رئيسي لتقسيم الصفحة إلى أجزاء منطقية، مما يتيح تنظيم المحتوى وتطبيق تنسيقات CSS وتعيين الأنماط والخصائص عليها، وباسطتاعتك استخدام <div> لإنشاء عناصر مثل أطر الصفحة (Layouts)، ومربعات النص، وأزرار، ومجموعات الصور، والقوائم، والأقسام، والفواصل، وغيرها الكثير. حيث يسمح لك عنصر <div> بتحقيق تنظيم وتصميم أفضل للصفحة وسهولة تعديل التنسيقات والأنماط والخصائص الخاصة بالعناصر الموجودة داخله، وأيضًا استخدام CSS وJavaScript لتحقيق تفاعلات وتأثيرات مختلفة على العناصر داخل <div>. ولكن لا تستخدمه بكثرة وحاول استخدام عناصر الـ Semantic HTML بقدر استطاعتك مثل <section> أو <article> أو <header> أو <footer> والتي توفر لك هيكلية ومعنى أكثر وضوحًا للمحتوى. وإليك مثال لاستخدام div وأيضًا استخدام CSS للتنسيق: <!DOCTYPE html> <html> <head> <title>مثال باستخدام عنصر div</title> <style> .container { background-color: lightblue; padding: 20px; } .header { background-color: yellow; padding: 10px; } .content { background-color: white; padding: 10px; } .footer { background-color: lightgray; padding: 10px; } </style> </head> <body> <div class="container"> <div class="header"> <h1>عنوان الصفحة</h1> </div> <div class="content"> <p>محتوى الصفحة يتم وضعه هنا.</p> </div> <div class="footer"> <p>حقوق النشر &copy; 2023</p> </div> </div> </body> </html> فبتعريف عنصر <div> بواسطة الصنف "container" واستخدامه كعنصر يحتوي على عناصر <div> أخرى وتمميزها بكلاسات "header"، "content"، و "footer" من أجل تنسيقها بواسطة CSS. تمكنت من تسيق أجزاء مختلفة من الصفحة وتخصيص كل عنصر <div>، مما يسمح بتقسيم الصفحة إلى أجزاء منفصلة وتنظيمها بشكل مناسب. وأنصحك بقراءة التالي:

تم توضيح الأمر من قبل هنا في النقاشات التالية: وبخصوص تعلم لغة بايثون أم C++ فالأمر يتوقف على مستواك البرمجي ومدى إلمامك بعلوم الحساب وخبراتك السابقة، حيث أن البعض سيجد أن C++ صعبة ومعقدة وقد يحبط في بداية رحلة تعلم البرمجة. لذلك بايثون ستجدها في أغلب الدورات الخاصة بتعلم أساسيات البرمجة، لكون C++ تتطلب شخص متخصص يدرس في كلية معلومات وحاسبات مثلاً، أو لديه خبرات سابقة تؤهله لتعلمها، أو لديه قدرة استيعابية جيدة فهناك فروق فردية بلا شك، لكن إذا أردت من شخص ليس دراية بالحاسب أو علوم الحاسب أو الويب أو حتى استخدام الويندوز مثلاً بشكل متقدم أن يتعلم C++ فكيف ذلك؟ والأمر يستحق المحاولة، أو اقتصر على نفسك الطريق وتعلم بايثون، فستحتاج بايثون في مجال الذكاء الاصطناعي أكثر من أي لغة أخرى.

أنت قمت برفع ملف HTML فقط، ويجب رفع مجلد المشروع لديك بالكامل لتفقد المشكلة، اضغط المجلد من الخارج ثم ارفعه هنا. وبخصوص الـ Padding والـ Margin حاول استخدام خاصية box-sizing بقيمة border-box لجميع العناصر كالتالي: * { box-sizing: border-box; } وبخصوص توسيط النص في المنتصف بشكل عمودي وأفقي أيضًا في CSS، فهناك عدة طرق ومنها: 1- توسيط النص باستخدام Flexbox .container { display: flex; justify-content: center; /* يُوسِّط العناصر عموديًا */ align-items: center; /* يُوسِّط العناصر أفقيًا */ height: 100vh; /* يُحدد ارتفاع العنصر الأب بناءً على ارتفاع الشاشة */ } .text { text-align: center; /* يُوسِّط النص أفقيًا */ } 2- توسيط النص باستخدام Grid .container { display: grid; place-items: center; /* يُوسِّط العناصر عموديًا وأفقيًا */ height: 100vh; /* يُحدد ارتفاع العنصر الأب بناءً على ارتفاع الشاشة */ } .text { text-align: center; /* يُوسِّط النص أفقيًا */ } 3- استخدام خاصية line-height .container { display: flex; justify-content: center; align-items: center; height: 300px; /* ارتفاع العنصر الأب */ border: 1px solid black; /* توضيح الحدود للعرض */ } .text { line-height: 300px; /* ارتفاع العنصر الأب */ text-align: center; } والطريقة الثالثة بحاجة إلى بعض الشرح حيث استخدمت display: flex لعنصر الأب، وذلك لتطبيق تخطيط Flexbox. ثم استخدمت justify-content: center و align-items: center لوسط العنصر عموديًا وأفقيًا داخل العنصر الأب. ثم تحديد line-height: 300px لتعيين ارتفاع الخط بقيمة مساوية لارتفاع العنصر الأب، مما يوسط النص داخله عموديًا. وأخيرًا، تم استخدام text-align: center لوسط النص أفقيًا داخل العنصر الأب.

بخصوص أكواد sass جرب تعديل الكود بالشكل التالي: .card-news-details { display: flex; justify-content: center; align-items: center; padding: 0 !important; position: relative; left: -50%; /* الوضعية الابتدائية: يتم نقلها إلى اليسار */ opacity: 1; transition: left 1s, opacity 1s; &.show { left: 0; /* الوضعية النهائية: يتم نقلها إلى الوسط */ opacity: 1; } .card-news-card { width: 80%; position: relative; .img-active_profile { width: 100%; /* العرض الابتدائي: 100٪ */ height: 600px; border-top-left-radius: $radius; border-bottom-left-radius: $radius; max-height: 600px; object-fit: cover; box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.408); opacity: 1; transition: width 1s, opacity 1s; &.show_img { width: 40%; /* العرض النهائي: 40٪ */ opacity: 1; } } .title_slide-full { position: absolute; top: 15px; left: 45%; font-size: 45px; opacity: 0; /* مخفية في البداية */ transition: all 2s; &.show_title { opacity: 1; /* إظهار العنوان */ } } } } والكود يعمل على جعل الصورة الكبيرة المرغوبة تنتقل من -50٪ left إلى left: 0٪، وعندما تكون الصورة في الوضعية left: 0٪، ستصبح عرض الصورة 100٪ والعنوان مخفيًا، ثم عندما تتقلص الصورة إلى عرض 40٪، سيظهر العنوان.

ليست بديهية حيث يمكن إنشاء مشاريع ويب بلغات أخرى، بل عليك ذكر كل اللغات التي استخدمتها في المشروع، وبخصوص المكتبات مثل Bootstrap وAxios فاذكرهم لا مشكلة في ذلك، وتستطيع ذكر كافة المكتبات التي استخدمتها، لكن من الأفضل ذكر الهام منها والأساسي بالنسبة للمشروع. وبالنسبة للـ API فهل من سبب يدفعك لذكر ذلك؟ تستطيع كتابة وصف للمشروع في README وسيتم فهم أن المشروع يعتمد على API في تنفيذ أمر معين، وذكر أنك تستخدم Axios يدل بالتبعية على أن المشروع يستخدم API، وإذا كنت تقصد أنه يتم الإعتماد على API خارجي لتوفير المعلومات فاذكر ذلك. ببساطة ملف README.md يوضح وصف للمشروع بشكل مختصر وواضح، بحيث يفهم القارئ وظيفة المشروع الخاص بك، ثم يعرض المميزات Features ثم صورة توضيحية لو أمكن Screenshots، ثم الجزء الخاص بشرح إعداد المشروع، ثم الجزء الخاص بشرح طريقة استخدام المشروع إن دعت الحاجة إلى ذلك، ثم الجزء الخاصة بالتقنيات المستخدمة Tech Used. وهناك العديد من المواقع التي توفر عليك كتابة ملف readme وقد تم توضيحها هنا:

تم شرح الأمر في النقاشات والدروس التالية:

جميع تلك المسميات تشير إلى شيء واحد وهي واجهة منفذ الأوامر أو الطرفية، وهي تلك الشاشة السوداء التي يتم فيها تنفيذ أوامر لفعل شيء ما، مثل تثبيت مكتبة أو إنشاء مجلد أو تشغيل كود وخلافه. وهي هامة جدًا، حيث سيتعين عليك التعامل معها في مجال البرمجة، وتستطيع تعلم الأساسيات الخاصة بها من هنا: وفي نظام الويندوز أنصحك باستخدام CMD فهى أسهل بالتعامل، وستجد أغلب الشروحات يتم فيها استخدام تلك الطرفية، بينما واجهة أوامر PowerShell أكثر تعقيدًا ومتقدمة بالنسبة للبعض، فبعض الأوامر مختلفة بها عن CMD أي عن المعتاد والشائع على الإنترنت، وسيتعين عليك البحث لمعرفة كيفية تنفيذ نفس الأمر الذي يعمل في CMD ولكن لا يعمل في PowerShell. وأيضًا هناك إعدادات خاصة بالأمان والموثوقية يتعين عليك ضبطها في PowerShell لتسطيع تنفيذ سكريبتات خارجية، وهو أمر بسيط لكن في البداية يبدوا معقد للمبتدأين.

تم توضيح الأمر بشكل كافي، ولكن أنت بحاجة إلى رؤية الأمر بشكل عملي لتستوعبه، وإليك الشرح من خلال أمثلة. ولتوضيح فائدة الـ grid (الشبكة) والـ gap (الفراغات)، انظر إلى الكود التالي المستخدم في تصميم واجهة المستخدم. HTML <div class="container"> <div class="item">عنصر 1</div> <div class="item">عنصر 2</div> <div class="item">عنصر 3</div> <div class="item">عنصر 4</div> <div class="item">عنصر 5</div> <div class="item">عنصر 6</div> </div> CSS .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .item { background-color: #eaeaea; padding: 20px; text-align: center; } والنتيجة هي: في كود HTML يوجد عناصر ستتم توزيعها باستخدام الشبكة (grid) مع 3 أعمدة (columns)، والفراغ بين العناصر سيكون 20 بكسل (الـ gap). والفوائد التي حققناها باستخدام الـ grid هي: توزيع العناصر بشكل متساوٍا على الأعمدة والصفوف، مع وجود فراغات بحجم 20 بكسل بينها. ستظهر العناصر في صورة شبكة منتظمة ومتساوية الأبعاد، مما يخلق تناغم بصري في التصميم. يمكنك تغيير حجم الشاشة أو تحديد حجم العناصر بناءًا على احتياجاتك، وسيتكيف التصميم تلقائيًا مع الشاشة المستخدمة. وربما يدور في بالك الآن لماذا لم نقم بتنسيق العناصر بشكل عادي بدلاً من استخدام Grid؟ أولاً يمنحك الـ grid قدرًا كبيرًا من التحكم في توزيع العناصر. يمكنك تحديد عدد الأعمدة والصفوف، وتحديد أحجام العناصر والفراغات بينها بشكل محدد، مما يعني أنه يمكنك تنفيذ تصميمات معقدة بسهولة. يسمح لك أيضًا بتعديل توزيع العناصر بناءً على حجم الشاشة وجهاز العرض، وتغيير عدد الأعمدة وأحجام العناصر بناءًا على الاحتياجات المحددة لكل حجم شاشة، مما يعني أن واجهتك ستكون متجاوبة وتعمل بشكل جيد على مختلف الأجهزة. ودعنا نقارن الكود السابق الذي يستخدم الـ grid مع كود يستخدم تنسيقات CSS العادية ولا يعتمد على flex أو Grid. الكود باستخدام تنسيقات CSS العادية لتحقيق نفس الشكل والتنسيق: <table class="container"> <tr> <td class="item">عنصر 1</td> <td class="item">عنصر 2</td> <td class="item">عنصر 3</td> </tr> <tr> <td class="item">عنصر 4</td> <td class="item">عنصر 5</td> <td class="item">عنصر 6</td> </tr> </table> <style> .container { border-collapse: separate; border-spacing: 20px; } .item { background-color: #eaeaea; padding: 20px; text-align: center; } </style> في الكود الذي يستخدم الـ grid، نستخدم العنصر <div> كعناصر واجهة المستخدم ونعمل على تحقيق توزيعها بواسطة الـ grid، أما في الكود الذي يستخدم تنسيقات الجدول، نستخدم العناصر <table>, <tr>, و <td> لتحقيق التنسيق المطلوب. لكن هناك فارق كبير جدًا بين استخدام Grid وFlex في إنشاء الواجهة وتقسميم عناصر الصفحة، وبين استخدام الجدول وخصائص CSS الأخرى. حيث أنه لديك تحكم كامل من خلال Grid وFlex بينما في الجدول مثلاً لديك إمكانيات محدودة جدًا ومعقدة في الاستخدام. وبخصوص الـ gap فالصورة بألف كلمة، وستفهم ما أقصده من خلال الصورة التالية: فكما ترى يوجد مساحة بحجم 10 بكسل، في الصفوف والأعمدة، فجيب الإنتباه إلى أن gap:10px هي إختصار للكود التالي: row-gap: 10px; column-gap: 10px; فبإمكانك تخصيص الفراغ بين الأعمدة والصفوف بشكل منفصل لكل منهما بدلاً من استخدام gap. وأيضًا يجب عليك الإنتباه إلى الفرق بين Flex وGrid حيث أن Flex يستخدم لإنشاء واجهة أحادية البعد أي على شكل رأسي أو أفقي فقط، بينما Grid نستطيع إنشاء شبكة متعددة الأبعاد بداخله كالتالي: وأنصحك باستخدام الأداة التالية أثناء تعلم Grid وFlex في البداية لكي تفهم الخواص الخاصة بهم بشكل أسهل حتى تعتاد عليها: https://flexbox.malven.co/ https://grid.malven.co/

مكتبة Joi تعتبر سهلة الاستخدام وتوفر واجهة برمجة تطبيق (API) بسيطة وواضحة، وهي خيار جيد إذا كنت معتاد على استخدامها. لكن هنا مكتبة Yup أيضًا توفر واجهة برمجة سهلة الاستخدام وتحقق من البيانات بشكل مشابه لـ Joi، وإذا كنت تعمل على تطبيق React في نفس الوقت، فالأفضل استخدام Yup فهى أكثر تكاملاً مع بيئة العمل تلك. الفرق الرئيسي هو أن Joi هي مكتبة مستقلة تمامًا وتستخدم بشكل شائع في تطبيقات Node.js، في حين أن Yup هي مكتبة تستخدم على نطاق واسع في تطبيقات React وتدعم أيضًا استخدامها في Node.js. فإذا كنت تعمل على تطبيق React، فقد يكون استخدام Yup أكثر تكاملاً وسهولة مع بيئة العمل تلك، حيث أنها تتكامل بشكل أفضل مع نظام التحكم في النماذج الخاص بـ React وتوفر تعبيرًا أكثر سهولة عند تحديد قواعد التحقق. وإليك مثال: import React, { useState } from 'react'; import { useFormik } from 'formik'; import * as Yup from 'yup'; // تعريف مخطط التحقق باستخدام Yup const validationSchema = Yup.object().shape({ name: Yup.string().required('يرجى إدخال الاسم'), email: Yup.string().email('صيغة البريد الإلكتروني غير صحيحة').required('يرجى إدخال البريد الإلكتروني'), password: Yup.string().min(6, 'يجب أن تحتوي كلمة المرور على الأقل على 6 أحرف').required('يرجى إدخال كلمة المرور'), }); const MyForm = () => { const formik = useFormik({ initialValues: { name: '', email: '', password: '', }, validationSchema: validationSchema, onSubmit: (values) => { // إجراء عند تقديم النموذج بنجاح console.log(values); }, }); return ( <form onSubmit={formik.handleSubmit}> <div> <label htmlFor="name">الاسم:</label> <input type="text" id="name" name="name" onChange={formik.handleChange} onBlur={formik.handleBlur} value={formik.values.name} /> {formik.touched.name && formik.errors.name && <div>{formik.errors.name}</div>} </div> <div> <label htmlFor="email">البريد الإلكتروني:</label> <input type="email" id="email" name="email" onChange={formik.handleChange} onBlur={formik.handleBlur} value={formik.values.email} /> {formik.touched.email && formik.errors.email && <div>{formik.errors.email}</div>} </div> <div> <label htmlFor="password">كلمة المرور:</label> <input type="password" id="password" name="password" onChange={formik.handleChange} onBlur={formik.handleBlur} value={formik.values.password} /> {formik.touched.password && formik.errors.password && <div>{formik.errors.password}</div>} </div> <button type="submit">تأكيد</button> </form> ); }; export default MyForm; الكود يقوم باستخدام Yup لتعريف مخطط التحقق (validationSchema) الذي يحتوي على قواعد التحقق من صحة البيانات، ويطبق ذلك المخطط على النموذج الذي تم تعريفه باستخدام useFormik، وعرض الأخطاء في حالة عدم صحة البيانات في الوقت الفعلي، و تنفيذ الإجراء المحدد عند تقديم النموذج بنجاح. وإذا أردت الإطلاع على مكتبات أخرى يوجد Ajv وهي مكتبة تحقق من بيانات JSON تدعم معيار JSON Schema، توفر مرونة كبيرة في تحديد قواعد التحقق والتصفية وتدعم تخصيصات متقدمة.

أنت تقصد الدوال صحيح؟ سأوضح لك كل تابع مع مثال بسيط لتفهم بشكل أوضح: 1- print() تستخدم لطباعة النصوص أو القيم على الشاشة. print("Hello, World!") 2- input() تستخدم للحصول على إدخال المستخدم من خلال لوحة المفاتيح. name = input("Please enter your name: ") print("Hello, " + name) 3- len() تستخدم للحصول على طول أو عدد العناصر في تسلسل ما (سلسلة نصية أو قائمة). name = "John Doe" print(len(name)) # ستطبع القيمة 8 4- range() تستخدم لإنشاء تسلسل من الأرقام بناءً على البداية والنهاية والخطوة. for i in range(1, 10, 2): print(i) 5- str(), int(), float() تستخدم لتحويل القيم من نوع إلى نوع آخر. num_str = "10" num_int = int(num_str) num_float = float(num_str) 6- list(), tuple(), dict(), set() تستخدم لإنشاء مجموعات بيانات مختلفة. my_list = list(range(1, 5)) my_tuple = tuple(('apple', 'banana', 'cherry')) my_dict = dict(name='John', age=30) my_set = set([1, 2, 3, 3, 4]) 7- max(), min() تستخدم للعثور على القيمة الأكبر والأصغر في تسلسل من الأرقام. numbers = [5, 2, 9, 1, 7] max_num = max(numbers) min_num = min(numbers) 8- abs() تستخدم للحصول على قيمة مطلقة لرقم. num = -10 abs_num = abs(num) 9- round() تستخدم لتقريب رقم عشري إلى أقرب رقم صحيح. num = 3.7 rounded_num = round(num) 10- sum() تستخدم لحساب مجموع عناصر التسلسل. numbers = [1, 2, 3, 4, 5] sum_of_numbers = sum(numbers) وهناك العديد من التوابع الأخرى المهمة في Python مثل sorted() لفرز العناصر، zip() لدمج قوائم متعددة معًا، enumerate() للحصول على فهرس وقيمة العناصر في حلقة الإعادة والمزيد. ولكن ما ذكرته لك هو الأساسي ويجب معرفته. وتستطيع رؤية كل الدوال المضمنة في بايثون من خلال موسوعة حسوب . وبخصوص الإمتحان فستجد هنا تفاصيل واضحة للمطلوب منك:

الأمر لا يسير بتلك الطريقة، بل عليك بناء الروابط بشكل طبيعي والصبر وستفوز بذلك على المدى الطويل بدلاً من تحقيق نجاح قصير الأجل، حيث أن خوارزميات جوجل ذكية جدًا، لذلك يجب بناء الروابط الخلفية (الباك لينك) بشكل طبيعي. بمعنى لو أن الموقع في بداياته ولم يمر على إنشائه أكثر من 3 أشهر مثلاً، هل من الطبيعي أن يتم الإشارة إليه في روابط خلفية بعدد 10 روابط يوميًا؟ بالطبع لا، فرابطين أو 3 روابط في الأسبوع الأول أمر مقبول مثلاً، ثم في الأسبوع الثاني زد العدد قليلاً إلى 5 في الأسبوع مثلاً. لكن انتظر، هل يوجد محتوى كافي ليتم الإشارة إلى الموقع، فكما ذكرت خوارزميات جوجل ذكية، فإذا تم الإشارة بعدد روابط كبير ولا يتناسب مع عدد المحتوى وحجم الموقع فسيصبح الأمر غير طبيعي. وأيضًا لا تهتم أبدًا بعدد الروابط، بل اهتم بجودة الروابط الخلفية، حيث أن باك لينك واحد فقط ذو جودة عالية ومن موقع ذو ثقة وترتيب مرتفع ومهتم بنفس مجال موقعك أفضل بمراحل من عشرة روابط من مواقع ضعيفة وليست ضمن مجال موقعك. نصيحتي إليك هي بالصبر في الشهر الأول، والإهتمام ببناء محتوى الموقع بشكل قوي، والنشر على موقع التواصل، ومن الأفضل إنشاء محتوى مرئي حتى لو قصير والإشارة إلى المحتوى في وصف الفيديو. وبعد ذلك قم بالتدرج في الإشارة إلى موقعك وبناء الباك لينكس، وأيضًا لا تقم بالإشارة في نفس الوقت، أي قسم الروابط على أوقات مختلفة وبأشكال مختلفة. ونصيحتي إليك هي بالإهتمام أولاً بصفحة الموقع الرئيسية عن طريق الإشارة إليها بنحو 40 إلى 50 رابط بالتدرج كما أخبرتك وبجودة مرتفعة ما أمكن ذلك، وبذلك سيتم تقوية المحتوى لكامل الموقع. وأيضًا عليك بالتنصل من الروابط الضعيفة التي تشير إلى موقعك فهى تؤثر بالسلب ولا تفرح بالعدد الكبير كما أخبرتك.

عليك باستخدام localStorage لحفظ القيم المدخلة في حقول الإدخال، وذلك بتعديل السكريبت لديك بالشكل التالي: let submit = document.getElementById('submit'); let text = document.getElementById('text'); let password = document.getElementById('password'); // عرض البيانات المحفوظة عند تحميل الصفحة window.onload = function() { let savedText = localStorage.getItem('text'); if (savedText) { text.value = savedText; } let savedPassword = localStorage.getItem('password'); if (savedPassword) { password.value = savedPassword; } }; submit.onclick = function () { if (text.value === 'محمد عماد احمد' && password.value === '10203') { alert('نعم'); // حفظ القيم في localStorage localStorage.setItem('text', text.value); localStorage.setItem('password', password.value); } else { alert('لا'); } let screenWidth = screen.availWidth; if (screenWidth > 1000) { alert('فقط الهواتف المحمولة، من فضلك'); } else { alert('الهاتف المحمول المناسب'); } }; يستخدم localStorage.setItem(key, value) لحفظ القيم في ذاكرة التخزين المحلية للمتصفح. وعند تحميل الصفحة، يستخدم localStorage.getItem(key) لاسترداد القيم المحفوظة وتعيينها في حقول الإدخال، وستظل القيمة محفوظة حتى بعد تحديث الصفحة.

ما تريده هو تحديد قيمة محددة في عنصر select باستخدام الـ selected attribute بشكل ديناميكي في HTML و JavaScript، صحيح؟ 1- أولاً علياسترجاع البيانات المحفوظة مسبقًا من localStorage باستخدام JavaScript. 2- تعيين قيمة المحددة في عنصر select باستخدام خاصية value في JavaScript. إليك مثال: HTML <select id="mySelect"> <option value="value1">قيمة 1</option> <option value="value2">قيمة 2</option> <option value="value3">قيمة 3</option> </select> JavaScript document.addEventListener('DOMContentLoaded', function() { // استرجاع القيمة المحفوظة مسبقًا من localStorage const selectedValue = localStorage.getItem('selectedValue'); // التحقق مما إذا كان هناك قيمة محفوظة if (selectedValue) { // تعيين القيمة المحددة في عنصر select document.getElementById('mySelect').value = selectedValue; } }); ما يحدث هو عند تحميل الصفحة، تسترجع القيمة المحفوظة مسبقًا من localStorage وتعيينها كقيمة محددة في عنصر select. يجب عليك تغيير 'selectedValue' في localStorage.getItem('selectedValue') إلى المفتاح الصحيح الذي تستخدمه لحفظ القيمة في localStorage. تأكد من وضع الجزء الخاص بالتعيين في داخل الدالة التي تنفذها DOMContentLoaded حتى يتم تنفيذ العملية عند تحميل الصفحة بشكل صحيح.

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

أنت تعلمت الأساسيات فقط، وسيتم شرح الكثير من الخواص والتطبيق بشكل عملي من خلال العديد من المشاريع، فالدورة مصممة لطرح الأساسيات بشكل سريع في البداية ثم شرح المزيد والتعمق من خلال المشاريع. لكن نصيحتي إليك هي بألا تبخل على نفسك، لا تكتفي بأي دورة في أي مكان، بل عليك بالبحث وتعلم المزيد من مصادر مختلفة، فإذا رأيت مثلاً أن هناك بعض الأمور الجديدة في مشروع أو شرح على يوتيوب تعلم ذلك وابحث عنه وطبق عليه. وتستطيع الاستزادة من أساسيات جافاسكريبت من خلال المسار الأول من دورة تطوير التطبيقات باستخدام JavaScript، حيث أن المسار الأول من جميع الدورات الأخرى متاح لك بشكل مجاني. وأنصحك بقراءة التالي بتأني وستجد الكثير من الإجابات للأسئلة التي تدور في بالك: وكما أخبرتك من قبل بعد تنفيذ أول مشروع لك في الدورة، قم بالبحث عن مشاريع جافاسكريبت للمبتدأين وطبق عليها ولا تنزعج أو تقلق أبدًا إذا رأيت أشياء جديدة عليك، فذلك هو المطلوب، قم بالبحث والقراءة، أي مثلاً شرح كذا في جافاسكريبت وستجد شروحات على اليوتيوب أو على جوجل. وإذا واجهت مشكلة بعد البحث أو لم تفهم بشكل جيد، لا تتردد في السؤال هنا، ولا تتعجل بإنهاء الدورة بل خذ وقتك وقم بالتطبيق وكتابة الكود بنفسك، ولا تنزعج أيضًا إذا لم تتمكن من التطبيق في البداية حاول قدر استطاعتك ومع الوقت والتكرار ستتحسن بلا شك.

المشكلة ليست في تحميل حزمة Swal أو app.js، إذ أنك تستدعي Swal بشكل صحيح في ملف app.js، والمشكلة الحالية تكمن في طريقة استخدامك لـ Swal في ملف app.blade.php. وعندما تضمن ملف app.js في ملف app.blade.php باستخدام التوجيه الخاص بـ Laravel @vite، فإن محتوى ملف app.js يتم دمجه وتجميعه في ملف واحد للمتصفح. وبالتالي أي متغيرات أو مكتبات معرفة في app.js لن تكون متاحة مباشرة في نطاق الملف app.blade.php. عليك بتعديل ملف app.js بحيث تقوم بتصدير Swal كمتغير عالمي (global variable)، بالشكل التالي: import Swal from 'sweetalert2'; window.Swal = Swal; وبذلك ستصبح مكتبة Swal متاحة في النطاق العالمي، مما يمكنك من استخدامها في ملف app.blade.php بعد تضمين ملف app.js.

تطابق البيانات الذي تقصده هو عملية مقارنة البيانات المخزنة في مصدر معين مع بيانات أخرى للتحقق من مدى تطابقها أو اختلافها، ويعتبر تطابق البيانات أمرًا لا غنى عنه في العديد من المشاريع، سواء في الواجهة الأمامية (Front-end) أو في الخلفية (Back-end)، وفي أغلب الأحوال يتطلب الإعتماد على كلا الجانبين معًا لضمان الدقة والموثوقية. وعندما يتعلق الأمر بتطابق البيانات في الواجهة الأمامية، يكون الهدف الأساسي هو ضمان أن البيانات التي يقدمها المستخدم في النماذج أو الحقول المختلفة متطابقة مع البيانات المخزنة. وبالإمكان حقيق ذلك عن طريق استخدام آليات التحقق والتحقق من الصحة في الواجهة الأمامية، مثل التحقق من الصيغة الصحيحة للبريد الإلكتروني، أو التأكد من تاريخ صحيح، أو المقارنة بين قيمتين للتأكد من تطابقهما، ولكن من الضروري أيضًا تنفيذ تحققات إضافية في الخلفية للتأكد من أن البيانات المدخلة من الواجهة الأمامية تطابق البيانات المخزنة بشكل صحيح. فيما يتعلق بالجانب الخلفي، فإن تطابق البيانات جزءًا أساسيًا من عمليات معالجة البيانات والتحقق من صحتها، ويشمل ذلك التحقق من أن البيانات التي تم استلامها من مصادر خارجية مثل قواعد البيانات الخارجية أو واجهات برمجة التطبيقات (API) تتوافق مع بيانات النظام الداخلي. وإذا كانت هناك عمليات تعديل أو تحديث للبيانات في النظام الداخلي، يجب أيضًا التحقق من أن هذه التغييرات تم تنفيذها بشكل صحيح وأن البيانات المخزنة تطابق البيانات المعدّلة. بالتالي، لضمان تطابق البيانات بشكل صحيح وموثوق، يجب أن يتم الاعتماد على تطابق البيانات في الواجهة الأمامية والخلفية معًا، وتنفيذ آليات التحقق والتحقق من صحة البيانات في الواجهة الأمامية لتجنب إدخال بيانات غير صحيحة أو غير متطابقة، وفي الوقت نفسه، تنفيذ تطابق البيانات في الخلفية للتأكد من أن البيانات المدخلة تتوافق مع البيانات المخزنة وأن أي تعديلات تم إجراؤها على البيانات تم تنفيذها بشكل صحيح. ولنفترض أن لديك تطبيقًا لإدارة مخزون يتيح للمستخدمين إضافة منتجات جديدة، سنستخدم ذلك المثال لشرح أهمية تطابق البيانات في الواجهة الأمامية والخلفية. 1- تطابق البيانات في الواجهة الأمامية: المستخدم يقوم بملء استمارة إضافة منتج جديد. يجب التحقق من صحة البيانات المدخلة في الواجهة الأمامية، مثل التحقق من أن جميع الحقول الإلزامية معبأة بشكل صحيح، وأن صيغة الأرقام والأحرف صحيحة. مثال: التحقق من أن السعر المدخل بالواجهة الأمامية هو رقم صحيح وأنه أكبر من صفر. 2- تطابق البيانات في الخلفية: بعد أن يقوم المستخدم بإضافة المنتج الجديد، يتم إرسال البيانات إلى الخلفية لمعالجتها. في الخلفية، يجب التحقق من أن البيانات المدخلة في الواجهة الأمامية تتوافق مع بيانات النظام الداخلي. مثال: التحقق من أن المنتج المضاف متوفر في قاعدة البيانات الخاصة بالمخزون وأن السعر المدخل متطابق مع سعر البيانات المخزنة.

سأوضح لك ببساطة، عندما يتم تشغيل رابط مثل التالي xxx.com/gets مثلاً من متصفح الويب، يتم الاتصال بالخادم الذي مرتبط بنطاق xxx.com، وإذا كانت إعدادات vue-router قد تم تعيينها على وضعية التاريخ (history mode)، فسيتم البحث عن المسار /gets داخل ملفات الخادم. وإذا لم يتواجد المسار /gets ضمن الملفات، سيتم عرض خطأ الصفحة غير موجودة (404). الحلول الأسهل هي: إنشاء ملف 404.html بنفس محتوى ملف index.html (في مجلد public)، وعندما يتم تلقي طلب لصفحة غير موجودة (404)، فقم بنسخ نفس محتوى ملف index.html داخل هذا الملف 404.html، وبتلك الطريقة، عندما يتم عرض خطأ 404، سيتم استخدام محتوى الملف 404.html بدلاً من إعادة عرض نفس صفحة الخطأ. 2- ضبط Vue Router على وضعية الهاش، حيث أن Vue Router يأتي بوضعيتين للتوجيه (Routing)، وضعية التاريخ (history mode) ووضعية الهاش (hash mode). بشكل افتراضي، وVue Router يستخدم وضعية التاريخ، ولتعيين Vue Router إلى وضعية الهاش.عليك بتعديل تكوين Vue Router في مشروعك ليكون كالتالي: const router = new VueRouter({ mode: 'hash', // ... مزيد من الإعدادات ... }) وعندما تقوم بتعيين وضعية الهاش (hash mode)، ستظهر علامة الهاش (#) في عنوان URL بعد اسم الموقع الأساسي، وهذا يساعد في تجنب خطأ 404 الناتج عن طلبات مباشرة للخادم على مسارات لا تتطابق مع الملفات الموجودة. وهناك حل آخر باستخدام Travis CI، وعليك بالتالي: 1- قم بإضافة الإعدادات التالية في ملف vue.config.js الخاص بمشروعك: module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/my-project/' : '/' } 2- إنشاء ملف deploy.sh داخل مشروعك واستخدم الكود التالي: #!/usr/bin/env sh set -e npm run build cd dist cp index.html 404.html git init git add . git commit -m "deploy to gitpage" git push -f git@github.com:your-repo.git master:gh-pages cd - 3- إنشاء ملف .travis.yml في جذر المشروع واستخدم الكود التالي: language: node_js node_js: - "node" cache: npm script: npm run deploy deploy: provider: pages skip_cleanup: true github_token: $GITHUB_TOKEN local_dir: dist on: branch: main 4- تحديث ملف package.json ليتضمن سكربت deploy: "scripts": { "build": "vue-cli-service build", "deploy": "npm run build && cd ./dist && cp index.html 404.html" // ... السكربتات الأخرى ... }, 5- ارفع مشروعك إلى GitHub لتشغيل البناء، وانتظر بضع دقائق حتى يتم البناء.