Mustafa Suleiman

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

تلك معالجات لأكواد CSS أو بالإنجليزية CSS Preprocessors، وبشكل بسيط جدًا تخيل أنك تبني منزل من خلال قطع Lego، فلغة CSS العادية توفر القطع الأساسية، أما معالجات CSS المسبقة Sass و Less و Stylus توفر قوالب وأدوات سحرية لتجميع تلك القطع بشكل أسرع وأكثر تنظيمًا. في النهاية، كل ما تبنيه من خلال تلك الأدوات السحرية يتم تحويله أو بالأدق ترجمته إلى قطع ليغو عادية بمعنى أكواد CSS عادية لكي يفهمها متصفح الويب. ومن خلالها ستتمكن من استخدام ميزات ليست موجودة في لغة CSS مثل المتغيرات لتخزين الألوان والخطوط والأحجام، والتداخل لكتابة الأنماط المتداخلة بشكل يشبه HTML. وأيضًا Mixins لإنشاء كود قابل لإعادة الاستخدام، والدوال لإجراء عمليات حسابية أو معالجة للألوان، كذلك تقسيم الملفات لتقسيم كود CSS إلى ملفات صغيرة ومنظمة. و Sass اختصار لـ Syntactically Awesome Style Sheets هو أشهر وأقدم معالج CSS، وله صيغتان للكتابة هما SCSS و Sass ولكن SCSS هي الصيغة الأكثر استخدامًا اليوم، وأي كود CSS عادي هو كود SCSS صالح، بالتالي الانتقال إليها سهلاً جدًا، ويستخدم الأقواس {} والفاصلة المنقوطة ; تماماً مثل CSS. $primary-color: #3498db; nav { background-color: $primary-color; ul { list-style: none; li { display: inline-block; a { color: white; &:hover { color: darken($primary-color, 10%); } } } } } بينما Sass لا يستخدم الأقواس أو الفواصل المنقوطة، ويعتمد على المسافات البادئة مثل لغة بايثون، وتلك الصيغة أقل استخدامًا الآن. وبخصوص Less فهو يشبه SCSS إلى حد كبير في طريقة الكتابة، فهو أيضًا يستخدم الأقواس والفاصلة المنقوطة، وكان منافس قوي لـ Sass لفترة طويلة، واشتهر لأنه كان أساس تصميم مكتبة Bootstrap 3. و Stylus هو الأكثر مرونة من بينهم لكوه يمنحك حرية كاملة في طريقة الكتابة، مثل CSS/SCSS تمامًا من خلال الأقواس والفواصل المنقوطة أو بدونها تمامًا مثل صيغة Sass أو مزيج بين الاثنين. لذا ما يتم استخدامه حاليًا هو Sass وستجده في الواقع العملي في معظم الشركات والمطورين والمشاريع مفتوحة المصدر مثل Bootstrap 5.

الـ CLI اختصار لـ Command Line Interface، أي واجهة سطر الأوامر، بمعنى يتعامل المستخدم معها بكتابة أوامر نصّية بدل الضغط على أزرار أو أيقونات من خلال واجهة مستخدم GUI. والأدوات التالية هي CLI أيضًا ‎bash، ‎zsh، ‎PowerShell، أو أوامر git، npm، pip وغيرهم. وستجد الكثير من أُطر العمل أو المكتبات توفر مكتبة CLI خاصة لتوفير سكريبت جاهز يتم تنفيذه في الخلفية دونّ دراية منك، عن طريق أمر بسيط، وذلك لأتمتة المهام المتكررة وسرعة في التنفيذ مقارنًة بالواجهات الرسوميّة، وإمكانية دمج الأوامر في سكربتات CI/CD ولتوحيد عملية التطوير بين الجميع. بمعنى إنشاء وإدارة مشاريع Vue بسرعة وبدون إعداد يدوي معقد، حيث مكتبة Vue CLI تعتمد داخليًّا على Webpack لتجميع الكود، وتُنشئ هيكل مشروع يشمل: ملفات ‎.vue‎ (Single-File Components) إعداد ‎Babel‎ و‎ESLint‎ و‎PostCSS‎ سيرفر تطوير مع Hot-Reload تأتي بنظام Plugins وPresets بحيث تستطيع يمكنك إضافة Router, Vuex, TypeScript, Vuetify بخطوة واحدة. توفر أمر vue ui للحصول على واجهة رسومية اختيارية لإدارة الإعدادات.

لا حاجة لإيقافها، الأفضل تحميل مكتبة @vue/eslint-config-prettier من خلال الأمر التالي، حيث ستقوم بإضافة إعدادات مُعدة مسبقًا لـ ESLint، ومُصممة خصيصًا لتعمل مع مشاريع Vue.js التي تم إنشاؤها باستخدام أداة create-vue. وذلك لدمج Prettier وهي إضافة تنسيق الكود مع ESLint وهي إضافة فحص الكود بشكل سلس، بحيث يتم تجنب التعارضات بين قواعد تنسيق الكود في ESLint وقواعد Prettier. npm add --dev @vue/eslint-config-prettier

يوجد مكتبة mPDF لكن الأفضل حاليًا مكتبة Gpdf فهي تعتمد على mPDF لكنها أسهل في الاستخدام وأحدث أيضًا، وأيضًا تتكامل مع Blade Views و Facades في Larave بشكل جاهز. ببساطة الكود التالي هو كل ما تحتاجه لإنشاء PDF من ملف Blade View: use Omaralalwi\Gpdf\Facade\Gpdf as GpdfFacade; public function generatePdf() { $html = view('pdf.example-1')->render(); $pdfContent = GpdfFacade::generate($html); return response($pdfContent, 200, ['Content-Type' => 'application/pdf']); } ولكن يجب استخدام نوع خط مخصص للغة العربية وبها خطوط جاهزة وهي التالي: https://github.com/omaralalwi/Gpdf?tab=readme-ov-file#support-for-arabic

عبارة عن موجه لربط سمة في عنصر HTML ببيانات موجودة في تطبيق Vue لديك، بمعنى في لغة HTML قيمة السمات تكون ثابتة: <a href="https://google.com">جوجل</a> <img src="logo.png" alt="شعار"> لاحظ كتبت عنوان https://google.com في سمة href وذلك العنوان ثابت، نفس الأمر بالنسبة لمسار الصورة في سمة Src. لكن مع v-bind، تستطيع جعل تلك السمات معتمدة على بيانات من جافاسكريبت، بالتالي: <a v-bind:href=""></a> <img v-bind:src="" alt=""> معناه أننا نخبر Vue أريد أن أربط سمة href وسمة src ببيانات ستأتي من ملف الجافاسكريبت script.js وعلى إفتراض أن الملف يحتوي على الكود التالي: const app = Vue.createApp({ data() { return { name: 'علي', age: 25, gender: 'ذكر', vueWebsiteUrl: 'https://vuejs.org/', vueLogoUrl: 'https://vuejs.org/images/logo.png' } }, methods: { } }); app.mount('#root'); فتستطيع استخدام المتغير vueWebsiteUrl و vueLogoUrl لإضافة بيانات بشكل ديناميكي كالتالي: <div id="root"> <a v-bind:href="vueWebsiteUrl">موقع Vue الرسمي</a> <img v-bind:src="vueLogoUrl" alt="شعار Vue"> </div>

أسهل طريقة هي من خلال مكتبة BeeWare، ستحتاج إلى تثبيت التالي: pip install briefcase ثم تنفيذ الأمر التالي لإنشاء مشروع وسيقوم بسؤالك عن بيانات المشروع قم بإدخالها خطوة بخطوة: briefcase new ثم في مجلد src ستجد ملف باسم app.py ضع به الكود الخاص بك، ثم توجه لمسار مجلد المشروع الرئيسي وليس src عن طريق منفذ الأوامر، ثم نفذ الأوامر التالية: briefcase build android briefcase package android ستجد تفصيل هنا: https://docs.beeware.org/en/latest/tutorial/tutorial-1.html

لا تقلق بخصوص ذلك، يتم مراجعة حسابك ثم يتم تفعيله طالما قمت بتقديم البيانات المطلوبة، سحتاج إلى الإنتظار ما بين 24 إلى 48 ساعة.

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

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

بالنسبة للصور فلديك مواقع Unsplash, Pexels, Pixabay, Pngtree تقدم صورًا عالية الجودة بدون حقوق ملكية أو بترخيص CC0 الذي يسمح بالاستخدام التجاري والتعديل بدون ذكر المصدر. كذلك Freepik يحتوي على قسم ضخم من الميديا المجانية Vectors, PSDs, Photos, Icons. والمنصات المتخصصة في أصول الألعاب مثل Sprites, Tilesets, Backgrounds, 3D Models هي OpenGameArt.org والذي يحتوي على كم هائل من الرسومات ثنائية وثلاثية الأبعاد، مؤثرات صوتية، وموسيقى. وكذلك Kenney.nl يقدم مجموعات ضخمة من 2D sprites, 3D models, UI elements. بالإضافة إلى https://itch.io/game-assets/free وهو منصة لمطوري الألعاب المستقلين، وكثير منهم يشاركون أصولاً مجانية، وتفقد أيضًا موقع https://craftpix.net/freebies لكن تركيزه على تصميمات البكسل. ولو أردت أيقونات فقط فيتوفر موقع Flaticon وMaterial Icons.

ما تريده هو أن تصبح مطور Full-Stack بمعنى تطوير الواجهة الأمامية Front-End والخلفية Back-End معًا، فالأمامية هي واجهة المستخدم التي تظهر في المتصفح، كواجهة أكاديمية حسوب هنا، بينما الواجهة الخلفية هو السيرفر الذي به قاعدة البيانات والمنطق الذي يقوم بمعالجة كل الطلبات من وإلى السيرفر. أمامك خيارين الأول تعلم تقنيات MERN والثاني تعلم PHP ولارافل، والأمر يعتمد على ما تريده من وراء تعلم البرمجة هل تنوي إتخاذها كمسار مهني أم مجرد هواية لتنفيذ مشروع تريده مثلاً؟ ستجد هنا تفصيل وتوضيح لكل من: ما هي علوم تطوير الويب؟ مجالات تطوير الويبالواجهات الأمامية Front-End لغات تطوير الواجهات الأمامية المكتبات وأطر العمل المتوفرة للواجهات الأمامية مصادر تعلم تطوير الواجهات الأمامية Front-End الواجهات الخلفية Back-End ما هي اللغات المتوفرة لبرمجة الواجهات الخلفية لمواقع الويب؟ أطر العمل المتوفرة لبرمجة الواجهات الخلفية للويب ماذا سيمكنك أن تفعل بعد تعلم إحدى اللغات البرمجية؟ مصادر لتعلم تطوير الواجهات الخلفية Back-End المطور الشامل Full-Stack ما هي فرص العمل بعد تعلم تطوير الويب؟ كيف أختار مجال تطوير الويب المناسب لي؟ والفيديو التالي سيوضح الأمر لك أيضًا:

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

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

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

بالضبط تم تنفيذ كل ما هو مطلوب

بسبب أنك عرفت IterativeImputer وهو يعتبر القيمة -1.0 هي القيمة المفقودة: IterativeImputer(missing_values=-1.0) لكن البيانات الفعلية التي يستقبلها IterativeImputer وهي الأعمدة الرقمية numeric_features من data_train تحتوي على قيم NaN، وهي الطريقة المتبعة في Pandas و NumPy لتمثيل القيم المفقودة. بالتالي عند استقبال NaN يجد -1.0 كعلامة للقيم المفقودة، لذا يعتبر الـ NaN قيمة غير صالحة ولا يستطيع التعامل معها. عليك تغيير missing_values=-1.0 إلى missing_values=np.nan.

isna تتعرف على NaN و None وNaT (Not a Time - للتواريخ) كقيم مفقودة، ولا تعتبر -1.0 قيمة مفقودة بشكل افتراضي، حيث NaN هي قيمة خاصة تعني أنّ البيانات الرقمية مفقودة أو نتيجة عملية حسابية غير معرفة، بالتالي NaN في الغالب تعني أن الخلية كانت فارغة تمامًا في البيانات الأصلية، خصوصًا في الأعمدة الرقمية. ولتضمين قيم أخرى مثل -1.0 كقيم مفقودة، يجب تحديد ذلك صراحًة من خلال استبدالها عن طريق np.nan df.replace(-1.0, np.nan, inplace=True) أو إنشاء قناع مخصص: missing_mask = (df == -1.0) | df.isna() missing_count = missing_mask.sum()

الدالة ستكون كالتالي: function winner(){ for(let i = 1; i < 10; i++){ square[i] = document.getElementById('item' + i).innerHTML; } if(square[1] == square[2] && square[2] == square[3] && square[1] != ''){ end(1,2,3) return; } if(square[4] == square[5] && square[5] == square[6] && square[5] != ''){ end(4,5,6) return; } if(square[7] == square[8] && square[8] == square[9] && square[8] != ''){ end(7,8,9) return; } if(square[1] == square[4] && square[4] == square[7] && square[1] != ''){ end(1,4,7) return; } if(square[2] == square[5] && square[5] == square[8] && square[5] != ''){ end(2,5,8) return; } if(square[3] == square[6] && square[6] == square[9] && square[6] != ''){ end(3,6,9) return; } if(square[1] == square[5] && square[5] == square[9] && square[5] != ''){ end(1,5,9) return; } if(square[3] == square[5] && square[5] == square[7] && square[5] != ''){ end(3,5,7) return; } // هنا نتحقق من التعادل let draw = true; for(let i = 1; i < 10; i++){ if(square[i] == ''){ draw = false; break; } } if(draw){ title.innerHTML = 'تعادل'; setTimeout(function(){location.reload()}, 4000); } }

عليك تعديل دالة winner بحيث تتحقق من حالة التعادل بعد التأكد من عدم وجود فائز، بمعنى بعد جميع شروط الفوز في الدالة، أضف شرط يتفقد هل جميع المربعات ممتلئة أي لا يوجد مربع فارغ ولم يتم استدعاء دالة end أي لم يفز أحد. وفي حال تحقق الشرط، قم بتغيير العنوان title.innerHTML إلى تعادل أو Draw، وتستطيع إعادة تحميل الصفحة بعد فترة قصيرة كما في حالة الفوز. لو واجهت صعوبة في التنفيذ أخبرني.

عليك ضبط الوسيط missing_values في IterativeImputer ليكون ‎-1.0 بحيث يعامل كل تكرار للرقم على أنه مفقود، كالتالي: from sklearn.experimental import enable_iterative_imputer from sklearn.impute import IterativeImputer imp = IterativeImputer( missing_values=-1.0, max_iter=10, random_state=0) X_imp = imp.fit_transform(X) لكن لو يوجد قيم حقيقية تُساوي ‎-1 فعلاً في بعض الصفوف، فاستخدام ‎-1 كرمز للفقد سيخلط بين المفقود والقيمة الحقيقية، لذا الأفضل دائمًا استخدام np.nan أو pd.NA كرمز وحيد للفقد. ولو العمود من نوع int فوجود ‎-1 لا يسبب مشكلة، ولكن لو استبدلت إلى np.nan فيما بعد، فستضطر لتحويل الأعمدة إلى float أو Int64. عامًة كل المُحسنات أي الـ Imputers الموجودة في scikit-learn سواء SimpleImputer أو KNNImputer أو IterativeImputer لا تكتشف القيم المفقودة تلقائيًا، بل تبحث عن قيمة معينة تحددها أنت في الوسيط missing_values وافتراضيًا هي np.nan. ولو القيم المفقودة مُمثلة في البيانات بالعدد ‎-1 فلن تعتبرها تلك الأدوات مفقودة إلا إن أخبرتها بذلك صراحة أو قمت بتحويلها إلى np.nan قبل تمرير البيانات إلى المُحْسن. للتوضيح، عند استدعاء fit أو fit_transform، يُنشئ المُحسن mask أي قناع يساوي True حيث تكون الخانة مفقودة و False حيث لا تكون مفقودة. ويتم بناء القناع كالتالي: لو missing_values=np.nan وهي القيمة الافتراضية، فيتم تطبيق np.isnan(X). وفي حال حددت عدد أو رمز آخر ولينك missing_values = -1، يتم استخدام المقارنة X == -1. والقيم المفقودة المكتوبة - ستُعامل كقيمة عددية عادية إن أبقيت الوسيط على الحالة الافتراضية np.nan، بالتالي قبل التدريب استبدال ‎-1 بـ np.nan أو قم بتحديد ذلك للمُحسن مباشرًة كالتالي: from sklearn.impute import KNNImputer imputer = KNNImputer(missing_values=-1) X_imp = imputer.fit_transform(df.values)

هل تبويب دوراتي غير ظاهر لك كما بالصورة هنا؟ من المفترض عند الضغط عليه ستجد الدورات التي اشتركت بها: في حال لا يظهر لك ذلك، أرجو مراسلة مركز المساعدة لمساعدتك بالأمر. https://support.academy.hsoub.com/conversations

قمت بما هو مطلوب، هناك نقطة وحيدة لم تقم بها وهي استخدام scikit-learn بشكل مباشر لقياس التشابه من خلال cosine_similarity، عامًة لا تحتاج ذلك لأن FAISS يقوم بتلك المهمة بكفاءة.

طالما تريد أن تصبح مطور واجهة أمامية فيجب تعلم React، الأمر بحاجة إلى وقت وممارسة لكي تستوعب آلية عملها وكيفية التطوير من خلالها، تستطيع مشاهدة شرح على اليوتيوب للأساسيات مرة أخرى أو مراجعة مسار الأساسيات من الدورة.

ما تقصده هو التطوير مباشرًة من خلال HTML و جافاسكريبت، وذلك ممكن للمشاريع البسيطة، بينما في الواقع العملي أي في المشاريع الحقيقية لا يتم تطوير مشاريع إلا من خلال مكتبة React أو إطار عمل مثل Next.js. وللعلم التطوير من خلال React أسهل بمراحل، فأنت لم تقم بتجربة تطوير مشروع معقد من خلال HTML و Javascript فقط، ستجد صعوبة وبطيء في عملية التطوير. حاول الدراسة بشكل مختلف، أي استوعب آلية عمل React ولا تقم بالتفكير بها نفس الطريقة، بمعنى في DOM لو ضغط المستخدم الزر، سنقوم مثلاً بتيير لون العنصر مباشرة عن طريق جافاسكريبت. أما في React نقوم بذلك عن طريق تغيير قيمة الحالة state، أي لو تغيرت قيمة الحالة isRed إلى true فالعنصر سيُعاد رسمه بلون أحمر. كذلك استيعاب مفهوم المكونات والـ Props وتلك هي أهم مفاهيم React الأساسية، وفي حال استوعبتها يصبح الأمر أسهل بمراحل.