محمد_عاطف
-
المساهمات
9365 -
تاريخ الانضمام
-
تاريخ آخر زيارة
-
عدد الأيام التي تصدر بها
133
نوع المحتوى
ريادة الأعمال
البرمجة
التصميم
DevOps
التسويق والمبيعات
العمل الحر
البرامج والتطبيقات
آخر التحديثات
قصص نجاح
أسئلة وأجوبة
كتب
دورات
كل منشورات العضو محمد_عاطف
-
في التخزين المحلي (Local Storage) الدالتين setItem و getItem هما جزء من كائن localStorage ويستخدمان لحفظ البيانات واسترجاعها. فإن setItem تستخدم لحفظ القيمة التي تريدها في التخزين المحلي باستخدام مفتاح (key). وgetItem تستخدم لإسترجاع القيمة المحفوظة مسبقا في الدالة setItem باستخدام نفس المفتاح. فمثلا تخيل أننا نريد إنشاء موقع باللغتين العربية والإنجليزية فكيف نستطيع معرفة اللغة التي إختارها المستخدم الحالي ؟ وحتى لو قام بإغلاق المتصفح والدخول للموقع مرة أخرى نريد معرفة أخر لغة هو قام بإختيارها . هنا نستخدم التخزين المحلي لتحقيق ذلك. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>تبديل اللغة</title> </head> <body> <h1 id="title"></h1> <p id="message"></p> <button onclick="toggleLanguage()">تبديل اللغة</button> <script> // النصوص باللغتين const translations = { en: { title: "Welcome", message: "English Text" }, ar: { title: "مرحا", message: "نص باللغة العربية" } }; // دالة لتغيير النصوص حسب اللغة المختارة function applyLanguage(lang) { document.getElementById('title').textContent = translations[lang].title; document.getElementById('message').textContent = translations[lang].message; } // دالة لتبديل اللغة function toggleLanguage() { let currentLang = localStorage.getItem('language') || 'en'; let newLang = currentLang === 'en' ? 'ar' : 'en'; localStorage.setItem('language', newLang); applyLanguage(newLang); } // عند تحميل الصفحة، استخدم اللغة المخزنة أو الإنجليزية كافتراضي window.onload = () => { const savedLang = localStorage.getItem('language') || 'en'; applyLanguage(savedLang); }; </script> </body> </html> وهكذا لاحظ كيف قمنا بتخزين قيمة اللغة في التخزين المحلي عند تغير اللغة . وهكذا إذا أغلق المستخدم الصفحة أو المتصفح وقام بفتحها مرة أخرى أو حتى إعادة تحميل الصفحة سيتم إستخدام أخر لغة قام بإختيارها.
-
ستجد أسفل فيديو الدرس صندوق للتعليقات كما هنا يرجى طرح سؤالك أسفل الدرس وليس هنا حيث هنا قسم الأسئلة العامة ولا نقوم بإجابة الأسئلة الخاصة بمحتوى الدورة أو الدرس، وذلك لمعرفة الدرس الذي توجد به مشكلتك و لمساعدتك بشكل أفضل.
- 1 جواب
-
- 1
-
-
يجب عليك معرفة أولا ما هو ال random_state حيث أنه رقم يُستخدم لضبط العشوائية بحيث تكون قابلة للتكرار فهو رقم يتم إستخدامه كبذر لخوارزمية العشوائية . حيث أي أنك إذا وضعت نفس الرقم فإن الخوارزمية ستعيد نفس البيانات أى ىستحصل على نفس النتائج كل مرة تشغل فيها الكود. أما إذا لم تحدد random_state، فستحصل على نتائج مختلفة في كل مرة لأن العمليات العشوائية مثل تقسيم البيانات أو تدريب بعض النماذج ستكون غير ثابتة لأنه يتم إستخدام رقم مختلف في كل مرة. ولاحظ أن رقم 42 ليس مهما أو ثابتا بل يمكنك وضع أي رقم صحيح مثلا 42 أو 0 أو 1 أو أى رقم أخر فلا يهم الرقم نفسه، المهم أنه: إذا أردت نتائج متكررة وثابتةيجب عليك إستخدام نفس الرقم. وإذا أردت نتائج مختلفة في كل مرة لا تحدد ال random_state. وفائدته هو أنك إذا أردت تقيم دقة وأداء النموذج فيمكنك إستخدامه وتثبيت الرقم وهنا سيتم إختبار النموذج على نفس البيانات هي هي في كل مرة وهكذا يمكنك متابعة الدقة بطريقة صحيحة فلو زادت الدقة على نفس البيانات إذا التحسينات التي قمت بها جيدة وهكذا.- 4 اجابة
-
- 1
-
-
أولا تأكد أن الملفات اللتي تريد تحفظها موجودة في المسار /kaggle/working/ فمثلا : with open("/kaggle/working/my_file.txt", "w") as f: f.write("Hello, this is a test file.") في الكود السابق هذا الملف سيتم حفظه مؤقتا في الجلسة الحالية . بعد ذلك اضغط على زر ال "Save Version" الموجود في أعلى صفحة ال notebook و الزر ستجده موجود في الشريط في الأعلى بجانب اسم ال notebook . وعند الضغط عليه ستظهر لك نافذة منبثقة في تلك النافذة قم بإختَيار نوع الحفظ ويمكنك الأفضل إستخدام : Quick Save لحفظ سريع أو Save & Run All لتشغيل كل الخلايا وحفظ النتائج. ثم اضغط على زر "Save" في أسفل النافذة. وإنتظر حتى تنتهي عملية الحفظ. وبعد الحفظ سيتم إنشاء نسخة جديدة من ال notebook في صفحة "Versions". وللوصول إلى الملفات في وقت أخر يمكنك الإنتقال إلى صفحة ال notebook على Kaggle ومن القائمة الجانبية إختار "Versions". ويمكنك فتح النسخة التي حفظتها مسبقا. وفي نافذة النسخة ستجد قسم "Output Files" وهذا فيه كل الملفات اللتي كانت موجودة في /kaggle/working/. ويمكنك تحميل الملفات أو استخدامها في notebook آخر سواء بالضغط على زر التحميل بجانب الملف أو من notebook جديد تضيف النسخة كمصدر (dataset) واستخدام الملف مباشرة.
- 6 اجابة
-
- 1
-
-
هل تقوم بتشغيل المشروع بداخل ال terminal الموجود في cmd أم الخاص بالويندوز ؟ يفضل إستخدام الويندوز فمن الممكن أن Vs code يستهلك تلك الرامات بشكل كبير من خلال تشغيل المشروع فيه. أيضا إن ال Nuxt 3 يرسل بيانات Telemetry بشكل افتراضي مما يزيد الضغط على الموارد لديك أثناء التطوير ولإيقاف تلك الخاصية يمكنك تنفيذ الأمر التالي : npx nuxt telemetry disable وأيضا لو كنت تستخدم modules كثيرة والتي تساعدك أثناء التطوير فهذا الأمر سيأخذ الكثير من الرامات بالفعل مثل : Tailwind لو كنت تستخدم JIT mode به وهو الأمر الذي يجعل tailwind يشاهد التغيرات اللحظية في الملفات لديك لتوليد ال classes المستخدمة فقط. أيضا ESLint و Prettier أثناء التشغيل يأخذون الكثير من الموارد لو كان المشروع كبيرا وذلك لإكتشاف الأخطاء وإقتراح التحسينات لديك. ويمكنك أيضا تقليل عدد الملفات التي يشاهدها vite من خلال تعديل الإعدادات هكذا : export default defineNuxtConfig({ vite: { server: { watch: { usePolling: false, interval: 1000 } } } })
-
هل الملف image.jpg موجود في مجلد assets ؟ إذا لم يكن موجودا يرجى وضعه والتأكدم من الإسم الصحيح . إذا إستمرت المشكلة يرجى إرفاق ملفات المشروع بأكملها ماعدا مجلد node_modules وإرفاقها هنا بعد ضغطها ويرجى عدم إرفاق مجلد src فقط بل جميع الملفات أى مجلد المشروع الرئيسي.
-
لإضافة صورة كخلفية (background-image) باستخدام bg-url في Vue فإن ذلك يتم بنفس طريقة CSS العادية. الطريقة الأولى بداخل ملف CSS خارجي أو <style> <template> <div class="img"></div> </template> <style scoped> .img { width: 300px; height: 200px; background-image: url('@/assets/img.jpg'); background-size: cover; background-position: center; } </style> وإن @/assets/my-image.jpg هي اختصار ل src/assets/my-image.jpg وهذا الأمر إذا كنت تستخدم Vue CLI أو Vite. الطريقة الثانية بإستخدام binding داخل style في الـ template فلو أردت أن تجعل الخلفية ديناميكية أي تتغير حسب البيانات مثلا يمكنك استخدام binding: <template> <div :style="bgStyle" class="img"></div> </template> <script> export default { data() { return { imageUrl: require('@/assets/img.jpg'), // أو import }; }, computed: { bgStyle() { return { backgroundImage: `url(${this.imageUrl})`, backgroundSize: 'cover', backgroundPosition: 'center', }; }, }, }; </script> <style scoped> .img { width: 300px; height: 200px; } </style> الطريقة الثالثة يمكنك وضعها مباشرة داخل ال template : <template> <div class="img" :style="{ backgroundImage: `url(${require('@/assets/img.jpg')})` }" ></div> </template>
-
مدة التعليم تختلف بناء على المستوي الذي تريد الوصول إليه وأيضا الوقت المتاح لديك. فلتعلم أساسيات الـ SEO أى فهم ما هي الكلمات المفتاحية و الروابط والعناوين وال Meta TagsالSEO الداخلي (On-page) فهذه الأمر قد يستغرق من 2 إلى 4 أسابيع. أما لو أردت الوصول إلى مستوى متوسط أو احترافي لكي تقوم بتحليل المنافسين وتحسين سرعة المواقع و السيو التقني (Technical SEO) و ال Schema وبناء الروابط (Backlinks) فمن الممكن أن تحتاج إلى 2 حتى4 شهور. أما إذا أردت أن تصبح خبير SEO فالأمر سيأخذ منك أكثر من 6 أشهر. ونعم ال SEO سيفيدك في البرمجة بالطبع ولكن يجب عليك معرفة أن هناك وظائف منفصلة تماما لل SEO .أى هي مخصصة للمطورين أو المبرمجين وقليلا ما تجد خبير SEO ولديه خبرة كبيرة في البرمجة . ولكن بالطبع لو عرفت الأساسيات أو أصبحت متوسط الخبرة في SEO فسيفيدك جدا كمبرمج. فلو أنت مطوّر ويب (Frontend أو Full Stack): ستفهم كيف تبني مواقع سريعة ومتوافقة مع محركات البحث. وستعرف كيفية تحسن العناوين والصور و ال HTML Structure. وأيضا سيكون لديك فرص كبيرة في التوظيف. ولو كنت تعمل ك eCommerce أو WordPress: ستجد أن ال SEO مهم جدا لنجاح المواقع التجارية والمدونات. وستسطيع إضافة إعدادات SEO للمنتجات أو المقالات بنفسك. أما لو تعمل كمبرمج حر Freelancer أو تريد بناء مشروعك الخاص: هنا ستعرف كيفية جلب زوار مجانيين من Google إلى موقعك. وستستطيع إستخدام أدوات ال SEO لتطوير استراتيجيتك التسويقية.
- 4 اجابة
-
- 1
-
-
إذا أردت دراسة أساسيات TypeScript فقط فيمكنك البدأ في مسار "أساسيات TypeScript" مباشرة ولكن في نهاية المسار يوجد تطبيق عملي بإستخدام إطار Next.js وإن إطار عمل Next هو يعتمد على React لهذا يجب عليك معرفة React مسبقا ولكن ليس معرفة كاملة . حيث أن Next.js هو إطار عمل (framework) يعتمد على React كما وضحت لك لهذا فإنك ستواجه مكونات React مثل useState و useEffect و JSX أثناء تطوير Next وإذا لم تكن تعرف React مطلقًا، قد تواجه صعوبة في فهم بعض المفاهيم الأساسية مثل: المكونات (Components). الخصائص (Props). الحالة (State). دورة حياة المكون (Lifecycle). ولكن بما أنك درس vue فستفهم إلى حد ما تطبيق Next ولكن للمتابعة مع المدرب سيتوجب عليك دراسة React وتطبيق عملي عليه من خلال مسار "تطبيق دردشة يشبة whatsApp"
-
وعليكم السلام ورحمة الله وبركاته. بالنسبة إلى هذا السؤال فإن الدالة format تقوم بتنسيق النصوص حيث تقوم بوضع حقول قابلة للاستبدال تُعرَّف عبر وضع قوسين معقوفين {} في السلسلة النصية ثم استدعاء الدالة str.format()، ويتم تمرير القيمة التي تريد وضعها ضمن السلسلة النصية إلى الدالة format() وستوضع هذه القيمة في نفس مكان الحقل القابل للاستبدال الموجود في السلسلة الأصلية وهو الأقواس {} عندما تقوم بتشغيل برنامجك. print("Hello {} .".format("Mohamed")) فلاحظ كيف في المثال السابق قامت الدالة format بإستبدال الأقواس {} بقيمة "Mohamed" الذي تم تمريره لها . أى أنها لا تقوم بإستبدال النص بأكمله بل فقط الأقواس . ويمكنك تمرير أكثير مم كلمة حيث يجب عليك تمرير كلمات بعدد الأقواس الموجودة لديك في السلسلة النصية : print("Hello I'm {} And my age is {}".format("Mohamed", "10")) كما في المثال السابق إستبدلنا القوسين بالنصين الممرات للدالة. ويمكنك أيضا وضع أرقام بين الأقواس لتدل على المعامل الذي سيمرر لها . print("Hello I'm {1} And my age is {0}".format( "10","Mohamed")) فلاحظ بالرغم من تمرير رقم 10 أولا ولكنه تم إستبداله بالقوس الثاني وذلك لأننا وضحنا الرقم بداخل كل قوس فالقوس {0} سيتم إستبداله بالمعامل الأول و القوس {1} سيتم إستبداله بالمعامل الثاني . ويمكنك قراءة المزيد من التفاصيل من خلال الدرس التالي : هل يمكنك توضيح ما هي greet_name حيث لا يوجد دالة بهذا الإسم. لاحظ كما وضحت لك في شرح الدالة format هي تقوم فقط بإستبدال الأقواس . ولهذا فهي قامت بكتابة salam كما هي وقامت فقط بإستبدال الأقواس ب YOUSSEF لهذا قامت بإسناد النص : salamYOUSSEF إلى المتغير TAHIA_name ولا تقوم بإعادة الإسم الممر لها فقط بل النص بأكمله بعد إستبدال الأقواس. إذا كان هذا السؤال خاص بإحدى دروس الدورات من فضلك يرجى وضع سؤالك أسفل الدرس حيث يوجد صندوق للتعليقات أسفل الدرس كما هنا حيث هنا هو قسم الأسئلة العامة ولا نقوم بالإجابة على أسئلة الدورات هنا.
-
ستجد أسفل فيديو الدرس صندوق للتعليقات كما هنا يرجى طرح سؤالك أسفل الدرس وليس هنا حيث هنا قسم الأسئلة العامة ولا نقوم بإجابة الأسئلة الخاصة بمحتوى الدورة أو الدرس، وذلك لمعرفة الدرس الذي توجد به مشكلتك و لمساعدتك بشكل أفضل.
- 1 جواب
-
- 1
-
-
أولا لاحظ أنك تضع break مباشرة في بداية الحلقة دون أى شرط وهذا خاطئ حيث سيتم إيقاف الحلقة عند أول تكرار ولن يتم الإكمال. ثانيا أنت تريد طباعة جميع العناصر ما عدا mango ولهذا نحن لا نحتاج break فمثلا لو mango كما هنا في العنصر الثالث فلو إستخدمنا break فلن يتم طباعة العنصر الرابع ولو يوجد عناصر أخرى بعدها لن يتم طباعتها لتوقف الحلقة. لذلك الحل هو وضع شرط للتأكد من أن العنصر لا يساوي mango هكذا : fruit = ['orange', 'banana', 'mango', 'lemon '] for x in range(len(fruit)): if fruit[x] != "mango": print (fruit[x])
-
أنت تقوم بتشتيت نفسك هكذا . يجب عليك تحديد إطار عمل واحد فقط سواء React أو Angular وتعلمه ومن ثم إتقانه وبعد ذلك يمكنك مستقبلا الإنتقال إلى أى إطار أعمل أخر عند حصولك على خبرة جيدة. ولكن يجب حاليا التركيز على إطار واحد لتفادي التشتت وأيضا لتفادي إختلاف الهيكل والإستخدام والتركيز على إنشاء مشاريع كبيرة بإطار واحد. ولا يمكن الجزم بأن أحدهما أفضل بشكل مطلق من الأخر لأن لكل منهما إستخدامات مختلفة: ف React : مرن وسهل التكامل ويستخدم لتطوير واجهات المستخدم (UI) فقط، لذا تحتاج إلى اختيار أدوات أخرى مثل Redux لل state management و React Router للتنقل. يعتمد على JavaScript/JSX حيث ينمنك كتابة المكونات باستخدام JSX وقد تكون أكثر سهولة للمبتدئين. مجتمع ضخم ويحوي عدد كبير من الحلول الجاهزة والمكتبات المساعدة. أما Angular: فهوإطار متكامل (Full Framework) ويحتوي على كل ما تحتاجه سواء Routing أو HTTP أو Client أو Formsوغيرها دون الحاجة إلى مكتبات خارجية. يعتمد أيضا على TypeScript ففو يفضل للشركات والمشاريع الكبيرة بسبب التنظيم والقوة في اكتشاف الأخطاء . صعب في التعلم قليلا بسبب مفاهيمه المعقدة مثل Dependency Injection و Modules و Decorators.
-
أولا دالة filter() تستخدم لتصفية وترشيح عناصر المصفوفة بناء على شرط معين وتعيد مصفوفة جديدة تحتوي فقط على العناصر التي تحقق الشرط وهذا هو هيكل الدالة : const newArray = array.filter((element) => { return condition; // إذا كانت القيمة true ضاف العنصر للمصفوفة الجديدة }); حيث : element: العنصر الحالي في المصفوفة. condition: الشرط الذي يجب أن يحققه العنصر ليبقى في المصفوفة الجديدة. إليك مثال لتصفية الأعداد الأكبر من 5 : const numbers = [1, 6, 3, 8, 2, 9]; const filteredNumbers = numbers.filter((num) => num > 5); console.log(filteredNumbers); // [6, 8, 9] الناتج هو مصفوفة جديدة تحتوي فقط على الأعداد الأكبر من 5. أما دالة match() تستخدم مع النصوص (Strings) للبحث عن تطابق مع نمط معين مثل تعبير عادي أو نص عادى أو حتى Regular Expression. فمثلا نريد استخراج الأرقام من نص ما : const text = "Age: 25, Height: 180cm"; const numbers = text.match(/\d+/g); console.log(numbers); // ["25", "180"] هنا الناتج هو مصفوفة تحتوي على جميع الأرقام الموجودة في النص. وإليك تفاصيل أكثر حولهم : filter match
-
أولا بالنسبة إلى الدالة reduce() فهي تستخدم لتجميع القيم في مصفوفة وإرجاع قيمة واحدة فقط. فمثلا إذا كان لدينا مصفوفة تحتوي على أرقام يمكن استخدام reduce() لجمع جميع تلك الأرقام في المصفوفة: const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce(function(total, number) { return total + number; }, 0); console.log(sum); // Output: 15 حيث تأخذ الدالة reduce() معاملين أساسيين: أولا دالة التجميع (Reducer Function) وهي الدالة التي تنفذ على كل عنصر في المصفوفة. والثاني هو القيمة الابتدائية (Initial Value) وهو اختياري وتستخدم كقيمة أولية للحساب. ويمكنك قراءة المزيد حولها من خلال التالي : https://wiki.hsoub.com/JavaScript/Array/reduce أما بخصوص الكود المرفق : فإن this.myArr هي المصفوفة التي نريد جمع عناصرها. و (num1, num2) => num1 + num2 هنا : num1 هنا تمثل المجموع الكلي الحالي (القيمة المتراكمة). num2 تمثل العنصر الحالي في المصفوفة. حيث الدالة تقوم بجمع num1 و num2 في كل خطوة حتى تنتهي من جميع العناصر. مثال توضيحي بالأرقان لنفترض أن : this.myArr = [1, 2, 3, 4]، سيعمل الكود كالتالي: يأخذ العنصر الأول (1) كقيمة ابتدائية لـ num1. ثم يضيف num1 + num2 في كل خطوة: الخطوة 1: 1 + 2 = 3 الخطوة 2: 3 + 3 = 6 الخطوة 3: 6 + 4 = 10 النتيجة النهائية: 10
-
أولا في هذا الكود نقوم بتعريف دالة Function تسمى getProducts ووظيفتها الرئيسية هي جلب المنتجات من الإنترنت (API) وعرضها لديك في التطبيق. في methods في Vue.js هو عبارة عن كائن (Object) يحتوي على كل الدوال (functions) اللتي يمكنك إستخدامها في المكون الحالي و getProducts هي دالة قمنا بتعريفها لنستطيع إستخدامها في المكون لدينا . قمنا بإستخدام async وهي تعني إن الدالة غير متزامنة (Asynchronous) لنستطيع إستخدام await مع fetch هنا . وقمنا هنا بإستخدام fetch لإرسال الطلب API إلى العنوان ومن ثم إستخدمنا then لنقوم بتحويل الرد الذي أرسل إلينا من الطلب إلى كائن json . وبعد تحويله إلى json إستخدمنا then نقوم بوضعه في المتغير (أو الخاصية) التي إسمها products وهكذا نستطيع عرضها في المكون لدينا. إذا الكود هنا يرسل طلب API لإحضار قائمة بالمنتجات . ونقوم بالإنتظار حتي يعدي الطلب البيانات لنا .ونقوم بتحويلها لصيغة json لنتعامل بها بسهولة. وأخيرا مخزن تلك البيانات في الخاصية لديك في المكون لنستطيع إستخدامها.
-
الخاصية v-model في Vue تستخدم لربط البيانات بين واجهة المستخدم والمكون بشكل ثنائي الاتجاه (Two-way binding). فهنا v-model تقوم بربط قيمة حقل الإدخال <input> بالمتغير email الموجود في البيانات (data) داخل مكون Vue.أى عندما يقوم المستخدم بكتابة شيئ داخل الحقل تتغير قيمة email تلقائيا في البيانات. وإذا قمت بتعديل ال email في الكود داخل المكون فإن قيمة الحقل في الصفحة ستتغير تلقائيا لتظهر في الحقل. فمثلا لنفرض الكود التالي : <div id="app"> <label>Email:</label> <input v-model="email" type="email"> <p>Email That User Enter: {{ email }}</p> </div> <script> const app = Vue.createApp({ data() { return { email: '' } } }); app.mount('#app'); </script> فهنا كلما قام المستخدم بكتابة أى شئ في الحقل يتم تحديث email تلقائيا .و{{ email }} تقوم بعرض القيمة في الصفحة مباشرة مما يجعل التحديث يظهر مباشرة في الصفحة كلما قان المستخدم بكتابة شئ. الخلاصة أن v-model="email" تجعل <input> و المتغير email متصلين ببعض إذا تغير أحدهما يتغير الآخر بشكل تلقائي.
-
السبب الرئيسي في كيفية تعامل JavaScript و TypeScript مع الأنواع (Types). فإن JavaScript هي لغة برمجة ذات أنواع ديناميكية (dynamically typed) وهذا يعني أنك لست بحاجة لتحديد نوع المتغير عند تعريفه ويمكن للمتغير أن يحمل أنواعا مختلفة من البيانات خلال فترة تشغيل البرنامج. ففي مثالك عندما تكتب let numbers = [1,2,3,4,5]; يتعرف JavaScript على numbers في البداية كمصفوفة من الأرقام. وعندما تكتب numbers = 'Hello World'; يسمح JavaScript بتغيير نوع numbers من مصفوفة إلى سلسلة نصية دون أي مشكلة لأنها تتكيف مع النوع الجديد وليست ثابته على نوع واحد. أما TypeScript فهي تضيف ميزة الأنواع الثابتة (statically typed) وهذا يعني أن TypeScript يحاول معرفة نوع المتغير في وقت التحويل البرمجي (compile time) ويفرض هذا النوع وهذا يساعد على اكتشاف الأخطاء المحتملة قبل تشغيل الكود. فهنا في المثال لديك عندما تكتب let numbers = [1,2,3,4,5]; يقوم TypeScript باستنتاج النوع (Type Inference) ويحدد أن نوع المتغير numbers هو number[] أي مصفوفة من الأرقام. وعندما تحاول بعد ذلك كتابة numbers = 'Hello World'; يقوم TypeScript بفحص هذا التعيين ويكتشف أنك تحاول تعيين سلسلة نصية (string) لمتغير تم تحديده مسبقًا على أنه مصفوفة أرقام number[] وهذا تناقض في الأنواع ولذلك يظهر خطأ.
-
$emit هي طريقة في Vue نستخدمها لإرسال (emit) حدث مخصص من مكون إبن (Child Component) إلى المكون الأب (Parent Component). وتستخدم هذه الطريقة عندما يحتاج المكون الإبن إلى إبلاغ أو إرسال رسالة أو حدث للمكون الأب عند حدوث شيء معين مثل نقر زر في المكون الإبن وتنفيذ شئ ما في المكون الأب. حيث المكون الإبن لا يمكنه تعديل بيانات الأب مباشرة لذلك نرسل حدث أو رسالة إلى المكون الأب باستخدام $emit والأب يستمع لهذا الحدث وينفذ الكود الذي حددناه. إليك المثال التالي: ملف المكون الإبن : <template> <button @click="notifyParent">Click</button> </template> <script> export default { methods: { notifyParent() { this.$emit('my-event', 'Hello From Child'); } } } </script> هنا يتم إرسال حدث اسمه "my-event" مع قيمة (payload) وهي "Hello From Child". الآن في المكون الأب : <template> <ChildComponent @my-event="handleEvent" /> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleEvent(message) { console.log(message); // هنا سيتم طباعة الرسالة التي أرسلناها من المكون الإبن } } } </script> ويمكنك إرسال أكثر من قيمة إذا أردت هكذا : this.$emit('event-name', { id: 5, text: 'Mohamed' }); غذا نستخدم emit عندما نريد أن يتفاعل المكون الأب مع شيء حدث داخل المكون الإبن مثل الضغط على زر أو إدخال بيانات أو اختيار من قائمة أو إرسال نموذج . إليك مثال اخر لتطبيق toDoList حيث مثلا نريد عند الضغط على زر حذف نحذف المهمة . فمثلا في المكون الإبن : <template> <div class="todo-item"> <span>{{ task }}</span> <button @click="deleteTask">Delete</button> </div> </template> <script> export default { props: ['task', 'index'], methods: { deleteTask() { this.$emit('delete-task', this.index); } } } </script> وفي المكون الأب : <template> <div> <h2>List Items</h2> <TodoItem v-for="(task, i) in tasks" :key="i" :task="task" :index="i" @delete-task="removeTask" /> </div> </template> <script> import TodoItem from './TodoItem.vue'; export default { components: { TodoItem }, data() { return { tasks: ['Playing', 'Write', 'Read'] }; }, methods: { removeTask(index) { this.tasks.splice(index, 1); } } } </script> هنا عند استلام الحدث delete-task، يتم تنفيذ دالة removeTask لحذف المهمة من المصفوفة.
-
هناك بعض القوانين الصارمة التي تمنع توظيف الأطفال (الأقل من 18 عام) حيث بغض النظر عن مستوى الخبرة أو الذكاء أو النضج فإن عمر 14 عام يعتبر صغيرا ولهذا القانون كما وضحت يمنع ذلك . ولذلك لن تجد شركات تقوم بتوظيف الأشخاص الأقل من 18 عاما وحتى مواقع العمل الحر تتطلب عند إنشاء حساب تأكيد هويتك ولهذا لن تستطيع تأكيدها قبل الوصول إلى 18 . ولو إفترضنا أنك إستطعت العمل في شركة فحينها لن يكون لديك أى حقوق حيث لن تقوم الشركة بتسجيلك ضمن موظفينها لأن القانون يمنع ذلك. أنصحك بما أنك صغير في السن حاليا أن تقوم بالتركيز على الدراسة والتدريب كثيرا وهكذا حينما تصل إلى السن المطلوب ستجد أنه لديك خبرة كبيرة تتخطى الأشخاص في سنك وحينها تستطيع الوصول إلى مراكز وظيفية أسرع .
-
نعم بالطبع يمكن إنشاء مشاريع كبيرة ومعقدة باستخدام Vue.js، ولكن اختيار الإطار المناسب من Vue.js أو React أو Angular يعتمد على عدة عوامل مثل المتطلبات الخاصة بالمشروع و حجم الفريق وطبيعة التطبيق. فإن Vue.js يتميز بالمرونة ويمكن استخدامه في مشاريع صغيرة أو كبيرة مع مكتبات مثل Vuex لإدارة الحالة وVue Router للتوجيهو يمكن تنظيم التطبيقات الكبيرة بشكل جيد فيه. ويدعم Vue.js نمط Component-Based Architecture أى المكونات (كما في React و Angular) مما يسهل تقسيم المشروع إلى مكونات قابلة لإعادة الاستخدام وهو أمر أساسي للمشاريع الكبيرة والمعقدة. وVue.js حاليا يقدم أداء جيد خصوصا مع Vue 3 وميزة Composition API والتي تتيح تنظيم أفضل للكود في التطبيقات الكبيرة. وهو أيضا يعتمد على Virtual DOM مثل React مما يضمن تحديثات سريعة في المتصفح. ولكن إن مجتمع Vue.js أصغر من مجتمع ال React أو Angular أى أنه ستجد دعم أقل من React و Angular فالمجتمع يتميز في كثرة الأشخاص به والذين يساعدون في حل المشاكل وطرحها ولهذا من الممكن أن تجد صعوبة قليلا في البحث فيما يخص Vue لصغر المجتمع الخاص به. وأيضا قد تجد موارد أقل مقارنة ب React، لكنها كافية لبعض المشاريع. لذلك يجب عليك تحديد ما الذي تريد فعله ؟ هل تريد العمل في وظائف عمل حرة ؟ أم تريد العمل في شركات ؟ أم الإلتحاق بفريق تطوير تعرفه للعمل معا على مشاريع ؟ بعد تحديد ذلك يمكنك البحث عن التقنية المنتشرة في ذلك الأمر فمثلا لو في وظائف العمل الحر ستجد أكثر المطلو React يمكنك البحث أيضا بنفسك لتحصل على الإجابة الصحيحة وتتأكد منها . وأيضا لو أردت في الشركات يمكنك البحث عن الوظائف في بلدك وأنظر أى التقنيات مطلوبة بكثرة . وفي النهاية يمكنك تحديد الإطار الذي تريد العمل به حيث جميعهم يستطيعون إنشاء مشاريع كبيرة.
-
نعم كما وضحت لك يجب على الأقل إتمام 4 مسارات للتقدم للإختبار . أى يمكنك تجاهل أى مسار تريده ولكن يجب إتمام 4 على الأقل. ويجب عليك معرفة أن vue بسيط ولهذا هو مناسب للمشاريع البسيطة وليس متداول بكثرة في سوق العمل مثل React. لهذا لا يجب عليك التوجه إلى الأبسط بل إلى التقنية التي تعطيك فرصة للعمل . تعلم vue أولا لبساطته ومن ثم يمكنك الدخول في React .
-
هل تقصد إختبار التقدم إلى الشهادة ؟ إذا كان كذلك فللأسف لن يمكن ذلك . حيث قبل التقدم للإختبار يجب على الأقل أن تكون قد أنهيت أربع مسارات بالتطبيق الخاص بهم مع المدرب . حيث عند إنهاء الدورة أو إكمال 4 مسارات يمكنك التحدث لمركز المساعدة وإخبارهم أنك تريد التقدم للإختبار وتوفير روابط المشاريع على github. ثم الإنتظار لبعض الوقت لحين مراجعة المشاريع وسيتم الرد عليكِ، وتحديد موعد لإجراء مقابلة، وبها يتم: إجراء محادثة صوتيّة لمدة 30 دقيقة يطرح المدرّب عليكِ أسئلة متعلّقة بالدورة والأمور التي نفّذتيها خلالها. يحدد لك المدرّب مشروعًا مرتبطًا بما قمتي به أثناء الدورة لتنفيذه خلال فترة محددة تتراوح بين أسبوع إلى أسبوعين. إجراء محادثة صوتيّة أخرى لمدّة 30 دقيقة يناقش بها مشروعك وما نفذتيه وتُطرح أسئلة خلالها. وكما موضح في التعليمات فإنه سيتم إختبارك في المسارات التي أنهيتها من الدورة. وبما ان vue غير موجود بها فلن يمكن الإختبار فيه ولن يتم إحتسابه كأنه مسار . وهذا الأمر متوقع حيث أنك تحصل على شهادة بإتمام الدورة من الأكاديمية موثقة ولهذا فيجب أن يكون الإختبار في المواضيع التي توفرها الأكاديمية. وللمزيد يمكنك محادثة مركز المساعدة والإستفسار منهم. أما إذا كنت تقصد بعد الإنتهاء من الدورة تماما والحصول على الشهادة فنعم بالطبع يمكنك العمل على أى شئ تريده ولا يجب جعل الدورة فقط هي التي تحدد لك هذا.
-
إذا كنت تقصد تفعيل الوضع الداكن في الأكاديمية فهنا الأكاديمية لا توفر ذلك الأمر ولكن يمكنك إتباع الخطوات في الإجابات التالية للتغلب على هذا الأمر :
-
هذا لأنك تعمل على ملف vue وهذا الأمر يتطلب intellisense ليتم تفعيل الإكمال التلقائي الصحيح. يجب عليك تنزيل إضافة Vue - Official التالية لديك في vs code : https://marketplace.visualstudio.com/items?itemName=Vue.volar