Mustafa Suleiman

الأمر ليس مجموعة من الخطوات تستطيع نسخها ولصقها، بل عملية استكشافية تتطلب حدس، فضول ومعرفة بالمجال، أي بمعنى أدق الخبرة هي التي تُحدث فارق ملموس في دقة النماذج، تعميمها، قابلية تفسيرها وفي نجاح المشروع من الأساس، وكلما تم الاستثمار في الجانب الإبداعي لهندسة الميزات، زادت احتمالات الوصول إلى حل عملي متفوق بأقل تعقيد ممكن. بمعنى يتطلب الأمر استكشاف بصري ، وطرح أسئلة ماذا لو؟، وبناء ميزات تلتقط ظواهر غير مُشخصة في البيانات الخام، مثلاً نسبة المشتريات ليلاً ÷ إجمالي المشتريات كمؤشر لاحتيال. لتنمية ذلك الجانب قم بالتدرب على تنفيذ جلسة عصف ذهني، وأيضًا الاستعانة برأي خبير في البيانات نفسها في حال تتطلب خبرة عملية مثل البيانات الطبية، وغالب الحال ستتمكن من اكتشاف ميزة يصعب استنتاجها من البيانات وحدها. واستكشاف بصري مكثف EDA عن طريق الرسوم التشتتية، Box-Plots، وخرائط الحرارة تُولد أسئلة وفرضيات، كذلك عوضًا عن هندسة ميزة واحدة كبيرة، جرب توليد مئات الميزات البسيطة، ثم استخدم تقنيات انتقاء أو ترتيب المزايا لتصفية الأفضل. واعتمد على الـCross-Validation لتدوير الأفكار بسرعة واحتفظ فقط بما ينجح، بجانب قراءة أوراق ومسابقات مماثلة فكثير من الأفكار الإبداعية بإمكانك إعادة تدويرها.

جودة البيانات هي الأهم بالطبع، لكونها تُحسن من الضجيج والانحياز معاً، بينما زيادة تعقيد النموذج في وجود بيانات رديئة ترفع التباين بدرجة أكبر من الفائدة. بالتالي جودة البيانات في المرتبة الأولى ثم زد تعقيد النموذج عند الحاجة، وتلك استراتيجية تؤدي إلى أعلى دقة، أفضل قابلية تعميم، وتكلفة معالجة أقل. ففي الواقع العملي البيانات عالية الجودة تتطلب وقت ومال، لكن الاستثمار يُدفع مرّة واحدة ويُستخدم لأي نموذج لاحق، واعتماد نموذج معقد فوق بيانات رديئة سيخفي المشاكل لفترة، لكنه يزيد من خطر الفشل عند الانتقال إلى بيئة الإنتاج وذلك يُعرف باسم data-shift. عليك بالتالي: ابدأ بتقييم جودة البيانات بتفقد القيم المفقودة، تشويش، أخطاء وضع العلامة، تحيز التوزيع. نظف البيانات، حسن التسميات، أضف ميزات مشتقة، ووازن الطبقات. درب نموذج بسيط من خلال Logistic Regression، Random Forest، XGBoost مع إعدادات افتراضية وحقق baseline قوي. استعن بنماذج أكثر تعقيداً فقط عندما يتشبع المنحنى ويصبح تحسين الدقة مكلف بالطرق التقليدية. راقب مقاييس التعميم Cross-Validation، Learning Curves للتأكد من أن زيادة التعقيد لا ترفع فجوة التدرب والاختبار.

آلية الإختبار هي كالتالي، بعد إنهاء 4 مسارات من الدورة على الأقل، أو الدورة بالكامل عليكِ رفع المشاريع التي قمتي بها بالدورة على حسابك في github، ثم التحدث لمركز المساعدة وإخبارهم أنك تريدين التقدم للإختبار وتوفير روابط المشاريع على github. ثم الإنتظار لبعض الوقت لحين مراجعة المشاريع وسيتم الرد عليكِ، وتحديد موعد لإجراء مقابلة، وبها يتم: إجراء محادثة صوتيّة لمدة 30 دقيقة يطرح المدرّب عليكِ أسئلة متعلّقة بالدورة والأمور التي نفّذتيها خلالها. يحدد لك المدرّب مشروعًا مرتبطًا بما قمتي به أثناء الدورة لتنفيذه خلال فترة محددة تتراوح بين أسبوع إلى أسبوعين. إجراء محادثة صوتيّة أخرى لمدّة 30 دقيقة يناقش بها مشروعك وما نفذتيه وتُطرح أسئلة خلالها. إن سارت على جميع الخطوات السابقة بشكل صحيح، تحصلين على الشهادة أو يرشدك المدرّب لأماكن القصور ويطلب منك تداركها ثم التواصل معنا من جديد.

موجودة في كل المكتبات وكذلك في مشاريع تعلم الآلة، ولكنك لا تشعر بها دائماً لأنك تعمل في دفاتر Jupyter بها كود بسيط دفك لاستكشاف البيانات بسرعة من أجل التعلم، ولا تحتاج إلى توزيع الكود على فريق كبير أو إعادة استخدامه بشكل متكرر. بالتالي الأسلوب الإجرائي أو الدوال القصيرة أبسط وأسرع، وما إن يكبر المشروع أو يصبح جزءًا من منتج، ستجد OOP في كل مكان، حتى لو لم تكتبها بنفسك. فمكتبات النمذجة والتي منها scikit-learn مبنية بالكامل على Estimator AP (fit / predict) حيث كل خوارزمية هي كائن، وكذلك PyTorch تطلب منك توريث nn.Module لإنشاء نماذجك. وTensorFlow Keras توفر tf.keras.Model و tf.keras.Layer. حتى DataFrame في pandas هو كائن ضخم، إذن، OOP ليست أقل شيوعًا بل هي ببساطة مغلفة داخل المكتبات التي تستخدمها، والسؤال الصحيح هو متى تحتاج أن تكتب كائناتك أنت؟ ببساطة لو لديك منطق تهيئة بيانات يتكرر عبر عدة تجارب، أو تريد تبديل نموذج عبر سطر إعداد واحد، أو عندما يصبح المشروع جزءاً من منتج مثل API أو تطبيق هاتف. أو هناك أكثر من شخص على الكود ويجب الاتفاق على واجهات واضحة، ولتنظيم الكود والفصل بين المسؤوليات، بمعنى • كلاس للتهيئة وآخر للتدريب وآخر للتقييم. ابدء أولاً بكتابة كود بسيط عبر الدوال، وعندما تلاحظ أن عددًا من الدوال تشترك في مجموعة متكررة من المتغيرات انقلها إلى كلاس.

هل تقصد النموذج التالي في تعليق سابق؟ <form method="POST" action="/submit"> {{ csrf_token() }} <div class="mb-3"> <label for="name" class="form-label">الاسم</label> <input type="text" class="form-control" id="name" name="name"> </div> <div class="mb-3"> <label for="email" class="form-label">البريد الإلكتروني</label> <input type="email" class="form-control" id="email" name="email"> </div> <button type="submit" class="btn btn-primary">إرسال</button> </form> لست بحاجة إلى كتابة أي كود Ajax لكي يعمل النموذج، فعند الضغط المستخدم على زر إرسال، سيقوم المتصفح بإعادة تحميل الصفحة بالكامل، وإرسال طلب من نوع POST إلى المسار المحدد في السمة action وعليك تعديله ليتناسب مع المسار لديك. وسيتم إرفاق بيانات النموذج وهما الاسم والبريد الإلكتروني مع الطلب، وسيقوم لارافيل بمعالجته من خلال المتحكم المربوط بالمسار.

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

الأمر ليس هذا وذاك، كلاهما مطلوب في سوق العمل لكن Vue.js بنسبة أقل وستجدها مستخدمة بالشركات الصغيرة، أما React في الشركات المتوسطة إلى الكبيرة. عامًة أنت تتعلم للحصول على وظيفة بالتالي تفقد المطلوب في سوق العمل المحلي لديك بالنسبة لمطور Front-End هل يوجد نسبة جيدة تطلُب Vue.js أم الغالبية React.js؟ وهل الوظائف التي تطلُب Vue.js تتطلب مستوى خبرة كبير أي 3 سنوات فيما فوق مثلاً أم بمستوى أقل Junior؟ في حال Junior إذن هي أفضل لك، لأنّ أغلب وظائف React تحتاج إلى خبرة سنتين على الأقل لكي يتم قبولك والقليل منها يقبل بمستوى Junior أي خبرة سنة. كنصيحة تعلم React وتعمق بها ثم تعلم Next.js وتعمق به، ثم ستستطيع تعلم أي إطار واجهة أمامية بعد ذلك، فجميعهم يتبع نفس المفهوم.

يوجد منصة تواصل باسم I\O وهي عبارة عن مجتمع للنقاش الهادف والموضوعي، وبها مجتمعات مثل: تطوير الويب برمجة تستطيع طرح موضوع للنقاش هناك والتواصل مع أشخاص بنفس الهدف، أو تستطيع متابعة قسم أسئلة البرمجة ومتابعة الأشخاص المشتركين بنفس الدورة ومراسلتهم للدراسة معًا، وإليك مثال:

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

ببساطة مجال الـ Front-End يمتاز بالسهولة نسبيًا مقارنًة بالواجهة الخلفية Back-End، لكن كلاهما مجالات ليست سهلة حاليًا بسبب التطور الذي حدث بهما وبالأخص الواجهة الأمامية. كبداية ستجد دراسة الـ Front-End أسهل والحاجز الذي عليك تخطيه لتعلمه منخفض في البداية مقارنًة بالـ Back-End، وسيُشجعك على الاستمرار في التعلم وتأهيلك لتعلم الـ Back-End، وربما تفضل أحدهم على الآخر وتقرر التخصص في تخصص واحد فقط بعض تعلم كلاهما. في بداية مشوارك أنصحك بأن تكون Full-stack ثم بعد ذلك تتخصص في الواجهة الأمامية أو الخلفية، وذلك بعد الحصول على وظيفة واكتساب خبرة. صدقًا الأمر ليس بتلك الصعوبة، كل ما تحتاجه هو البدء في أحدهما وستصل للآخر، لكن التفكير الكثير فخ يقع به الأغلب. حدد فقط ما هي التقنيات التي تريد تعلمها لتصبح Full-stack، وبشكل عام HTML, CSS, JS لغات ثابتة، يتبقى لك تحديد الواجهة الخلفية، وكنصيحة ابدء من خلال جافاسكريبت وتعلم Node.js لتسهيل الأمر عليك، وبعد ذلك تستطيع تعلم أي لغة واجهة خلفية أخرى سواء PHP أو C# وغيرهم.

تلك مشكلة طبيعية يمر بها الأغلب أثناء دراسة البرمجة، الأمر نابع من طريقة دراسة غير صحيحة، فلو تتذكر ما تريده أثناء التطبيق العملي بمفردك أي تتذكر الخاصية أو الدالة التي تقوم بأمر معين لكن لا تتذكر طريقة كتابتها فلا مشكلة إذن، أما إن كنت لا تتذكر ما هي إذن تحتاج إلى قراءة التالي. وللتطبيق العملي: و React غير متاحة في الدورة، بل في دورة جافاسكريبت، وسبب عدم تضمينها في دورة تطوير واجهات المستخدم هو أن الدورة موجهة لتعلم أساسيات الواجهة الأمامية من خلال تعلم اللغات الأساسية التي يعتمد عليها أي مكتبة أو إطار للواجهة الأمامية وهو HTML, CSS, JS. وتعلم تلك اللغات في البداية واجب وضروري، وبدونها ستعاني في فهم ما يدور في الكود الخاص بك عند تعلم تلك المكتبات والإطارات، وأيضًا ستواجه صعوبة في حل المشكلات التي تواجهك وأيضًا تخصيص مشروعك بالشكل الذي ترغب به. ولتعلم React.js الأمر يحتاج إلى فرد مساحة في دورة مختلفة تمامًا، والدورة لن تكون للمبتدئين في الواجهة الأمامية، فأنت بحاجة إلى تعلم اللغات الأساسية كما ذكرت لتفهم ما يحدث وما فائدة ما تتعلمه وتكتبته. ولذلك ستجد أنه تم تخصيص دورة تطوير التطبيقات باستخدام لغة JavaScript من جل تعلم مكتبة React وإطارات جافاسكريبت الأخرى مثل React Native لتطوير تطبيقات الهاتف وأيضًا Ionic ثم ستتعلم Electron.js لتطوير برامج سطح المكتب. وأيضًا يوجد شرح لإطار Next.js وهو هام جدًا بعد تعلم React من أجل التصيير من جهة الخادم Server-side Rendering.

في حال لديك الوقت، قم بتعلم الواجهة الأمامية أولاً وذلك من خلال دورة واجهات المستخدم، ثم تعلم جافاسكريبت وReact من دورة جافاسكريبت. بعد ذلك انتقل إلى الواجهة الخلفية، وتستطيع أن تطوير مشاريع Full-stack عن طريق إطار Next.js والذي يتم شرحه في دورة جافاسكريبت، أما الواجهة الخلفية فقط ستحتاج إلى تعلم Node.js وإطار Express وذلك يتم شرحه بالدورة أيضًا، وبالطبع Node.js مطلوبة في سوق العمل لكن تحقق من ذلك لديك في سوق العمل بالقيام بالبحث كما أخبرتك. ستجد تفصيل هنا:

لا تأخذ نصيحة أي أحد دونّ التحقق منها، بمعنى تفقد الوظائف المعروضة في سوق العمل الخاص ببلدك، ثم قرر على أساس ذلك.

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

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

لا أنصحك بتعلم PHP للواجهة الخلفية إلا إن كنت تريد العمل على مواقع العمل الحر، فهي الأكثر طلبًا على تلك المنصات، بسبب استخدامها في ووردبريس وأيضًا إطار لارافل الذي يُسهل كثيرًا ويُسرع عملية تطوير المشاريع الصغيرة والمتوسطة. عدا ذلك، الأفضل تعلم C# وإطار .NET أو Java أو بايثون أو Node.js أو GO، والإختيار بينهم يعتمد على المطلوب أكثر في سوق العمل المحلي في بلدك، تفقد الوظائف على مواقع LinkedIN و Indeed بالنسبة لمستوى Junior وحتى Mid-level أي 3 سنوات خبرة. السبب أنّ PHP في الشركات ليس جيدة على المدى البعيد بسبب إنخفاض رواتبها مقارنًة بما سبق ولن تجد شركات كبيرة تستخدمها، الأمر الذي سيضطرك إلى التعامل مع شركات ذات نوعية ليست جيدة في أغلب الأحوال.

ستتكرر تلك المشكلة بسبب أنّ مكتبة Eslint تعتمد على مكتبة prettier في اكتشاف الأخطاء الخاصة بتنسيق الكود في ملفات جافاسكريبت، وفي حال وجود أسطر فارغة يحدث ذلك الخطأ. وستحتاج إلى تنفيذ الأمر التالي بشكل متكرر: npm run lint -- --fix الأسهل إنشاء ملف إعدادات لـ prettier باسم .prettierrc ووضع التالي به: { "endOfLine": "auto" } ثم إنشاء ملف إعدادات لـ Eslint باسم .eslintrc.js ووضع التالي به: module.exports = { rules: { 'prettier/prettier': [ 'error', { endOfLine: 'auto', }, ], }, };

الشروحات النظرية في باديء الأمر مفيدة، لكن يُعيبها عدم الربط مع الواقع العملي بتوفير أمثلة، فأنت لا تدري ما فائدة ذلك في المشاريع العملية في الواقع العملي، وما الذي ساستفيده منها؟ بالتطبيق على بناء نظام متجر إلكتروني، فأولاً تبدًا مرحلة تصميم البرمجيات Software Design بالتفكير على مستوى عالي أي بالنظر للمشروع ككل بنظرة عامة، حيث يجتمع مدير المشروع ومدير فريق المبرمجين Software Architect للبدء في تخطيط ما يلي: تحديد المكونات الرئيسية وليكن مثلاً: نحتاج نظاماً لإدارة المستخدمين. نحتاج كتالوج للمنتجات. نحتاج عربة تسوق. نحتاج نظاماً لمعالجة الطلبات والدفع. تحديد الهيكلية: سنستخدم بنية MVC (Model-View-Controller) Model سيمثل البيانات (المنتجات، المستخدمون). View سيمثل واجهة المستخدم التي يراها العميل. Controller سيستقبل طلبات المستخدم ويوجهها. وذلك قرار تصميمي عالي المستوى يحدد كيفية تنظيم المشروع بالكامل. ثم تحديد كيفية تفاعل المكونات كالتالي: عندما يضيف المستخدم منتجاً إلى عربة التسوق، يجب أن تتواصل عربة التسوق مع كتالوج المنتجات)للتأكد من أن المنتج متوفر وسعره صحيح. عند الدفع، يجب أن يتواصل نظام الطلبات مع نظام إدارة المستخدمين للتأكد من أن المستخدم مسجل. وتلك العلاقات تُرسم في مخططات مثل UML Diagrams لتكون واضحة للفريق. بالتالي نتيجة تلك المرحلة هو مستند تصميم تقني ومخططات توضح بنية النظام والعلاقات بين مكوناته، أي حتى الآن، لم نكتب سطر واحد من كود OOP الفعلي. بعدها تأتي مرحلة مرحلة التنفيذ لاستخدام OOP لبناء المكونات أي يأتي دور المبرمجين، بحيث يستقبل المبرمج مهمة محددة، وليكن بناء كتالوج المنتجات، ويبدأ في تطبيق مبادئ OOP، من خلال إنشاء الكلاسات وإتباع مباديء OOP وهي التغليف، التجريد، الوراثة وتعدد الأشكال. وفي النهاية يتم بناء مكون كتالوج المنتجات باستخدام كود نظيف ومنظم بفضل OOP، وهو يلتزم بالمخطط الذي تم تطويره عن طريق تصميم البرمجيات.

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

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

تلك معالجات لأكواد 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>