عبدالباسط ابراهيم

يجب عليك إتقان مهارة البحث وتقليل الوقت اللازم لتحديد المعلومات التي تبحث عنها. إليك بعض النصائح  حول كيفية استخدام Google كمطور برامج

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

ما هو ReScript؟

تعمل ReScript مثل JS ولديها أيضًا نظام كتابة رائع. يتم تجميعها بأعلى جودة من JS النظيفة والقابلة للقراءة والأداء والتي يمكن تشغيلها مباشرة في المتصفحات و Node. بالإضافة إلى أنه يحتوي على سلسلة أدوات بناء متوسطة.

وكما في التعليق السابق فإن ال Rescript تشبه ال typescript ولكن لديها المميزات التالية

• ReScript أسرع من JavaScript. يرشدك نظام الكتابة والمجمع في ReScript بشكل طبيعي نحو كتابة التعليمات البرمجية التي غالبًا ما تكون ذات أداء افتراضيًا ، مع الاستفادة الجيدة من تحسينات Just-In-Time المختلفة (الفئات المخفية ، والتخزين المؤقت المضمّن ، وتجنب عمليات deopts ، إلخ).
• يتم تسهيل إزالة الشفرة الميتة على مستوى الوظيفة والوحدة من خلال نظام النوع المصمم جيدًا وتحليل النقاء.
• على المستوى العالمي ، يُنشئ ReScript رمزًا يسهل بشكل طبيعي التخلص من الشفرة الميتة بواسطة أدوات التجميع مثل Rollup and Closure Compiler ، بعد مرور الإزالة المعقد الخاص به.
• ناتج JS صغير جدًا. يقوم برنامج Hello world ReScript بإنشاء 20 بايت من كود JS
• يتم تضمين المكتبات القياسية المطلوبة فقط عند الحاجة.
• لديها أسرع توقيت حلقة التكرار. وقت إنشاء ReScript أسرع بمقدار واحد أو اثنين من أي بدائل.

والمزيد من المميزات الأخرى يمكنك الإطلاع عليها من الموقع الرسمي

الاختلاف مع TypeScript

• تشارك ReScript بعض الأهداف نفسها مثل TypeScript ولكن لديها بعض الاختلافات:
• يغطي TypeScript مجموعة ميزات JavaScript بالكامل وأكثر ، لكن ReScript يغطي فقط مجموعة فرعية منسقة من JavaScript.
• لا تحتوي شفرة ReScript على أخطاء null / undefined .
• ReScript سريع للغاية بسبب بساطته وتنظيمه. إنها واحدة من أسرع سلاسل أدوات نظام التحويل والمترجم لتطوير جافا سكريبت.
• لا يحتاج إلى كتابة التعليقات التوضيحية. يتم الاستدلال على الأنواع من خلال اللغة وهي صحيحة للغاية.

كما وضح مصطفى فإنه يوجد الكثير من الطرق لتضمين ال bootstrap يمكنك الإطلاع عليها من خلال التوثيق الرسمي للمكتبة 

الرابط السابق يتضمن جميع الطرق لتثبيت المكتبة 

أما إذا قمت بتحميل مجلد المكتبة من الموقع فيجب أن تظهر معك هذه الملفات 

لاحظ أيضاً أنه إذا قمت بتحميل الإصدار الخامس من المكتبة فإنه لا وجود لل jquery حيث تم الإستغناء عن هذه المكتبة في الإصدار الخامس

bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-grid.rtl.css
│   ├── bootstrap-grid.rtl.css.map
│   ├── bootstrap-grid.rtl.min.css
│   ├── bootstrap-grid.rtl.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap-reboot.rtl.css
│   ├── bootstrap-reboot.rtl.css.map
│   ├── bootstrap-reboot.rtl.min.css
│   ├── bootstrap-reboot.rtl.min.css.map
│   ├── bootstrap-utilities.css
│   ├── bootstrap-utilities.css.map
│   ├── bootstrap-utilities.min.css
│   ├── bootstrap-utilities.min.css.map
│   ├── bootstrap-utilities.rtl.css
│   ├── bootstrap-utilities.rtl.css.map
│   ├── bootstrap-utilities.rtl.min.css
│   ├── bootstrap-utilities.rtl.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap.rtl.css
│   ├── bootstrap.rtl.css.map
│   ├── bootstrap.rtl.min.css
│   └── bootstrap.rtl.min.css.map
└── js/
    ├── bootstrap.bundle.js //popper هذا الملف يتضمن المكتبة 
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js //بشكل مضغوط popper هذا الملف يتضمن المكتبة 
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.esm.js
    ├── bootstrap.esm.js.map
    ├── bootstrap.esm.min.js
    ├── bootstrap.esm.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

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

• تتكون الصفحة أولاً من ثلاث أقسام رئيسية navbar و header و main و footer
• نقوم بالتعمق في المكونات في القسم header يوجد عنصرين على اليسار يوجد عنصر p و h أما على اليمين فيوجد عدة صور فوق بعضها فيمكنك تنفيذ هذه الفكرة عن طريق استخدام ال position وتحديد أماكن الصور عن طريق التنسيقات top أو left أو right أو bottom مثال على ذلك 

  .img1 {
    position: absolute;
    z-index: 2;
  }
  
  .img2 {
    position: absolute;
    z-index: 3;
  }
  
  .img3 {
    position: absolute;
    z-index: 1
  }

   

• فكرة عمل الحواف wave تم شرحها في التعليق السابق

• أما القسم في المنتصف فيمكنك بناء هذه الفكرة عن طريق إنشاء عنصر يحتوي على ثلاث صور صور بالأعلى وصورة بالمنتصف وصوره بالأسفل وعنصر آخر نفس مكان الثلاث صور ثم بعد ذلك تقوم بإضافة margin-top بالسالب للعنصر الثاني حتى يظهر أن  العنصرين متداخلان 

• والقسم الأخير ال footer نفس فكرة الخلفية الموجودة بال header حيث فكرة عمل wave background

قم ببناء الموقع بهذه الطريقة حيث تقوم بتقسيم الواجهة لأجزاء صغيره 

للعمل في مجال البرمجة يجب عليك تحديد المجال أولاً حيث للبرمجة العديد من المجال بداخل المجالات يوجد تخصصات

لذلك أولاً يجب عليك تحديد المجال لذلك قم بقراءة هذه المقالة قبل أن تكمل القراءة

ثم بعد ذلك معرفة المجالات المتاحة للعمل بها من خلال لغة البرمجة python حيث تعتبر هذه اللغة قوية ومنتشره في العديد من المجالات تستخدم  لاستخراج البيانات والتعلم الآلي بسبب المكتبات المدعومة جيدًا مثل NumPy و SciPy للحوسبة الرقمية / الجبر الخطي ، matplotlib للتخطيط ، sk-learn للتعلم الآلي ، PIL لمعالجة الصور ، NetworkX لتحليل الشبكة - القائمة تطول وتطول. تحظى NumPy و SciPy باهتمام خاص بالنسبة لي نظرًا لمدى فعاليتهما - يتم تنفيذها تحت الغطاء بسرعة FORTRAN فائقة السرعة. العديد من الوحدات الأخرى المذكورة مثل PIL و NetworkX تلعب بشكل جيد مع NumPy / SciPy وبالتالي تستفيد من تطبيق FORTRAN أيضًا.

مجالات العمل:

• علم البيانات
• Automation 
• تطوير التطبيقات
• الذكاء الاصطناعي والتعلم الآلي
• تطبيقات الصوت / الفيديو
• تطبيقات وحدة التحكم
• واجهة المستخدم الرسومية لسطح المكتب

يعتبر لغة البرمجة python من أفضل الإختيارات في المجالات السابقة لذلك تعتبر هذه اللغة تفتح لكل العديد من مجالات البرمجة

ولكن يجب عليك عند تحديد أي مجال من المجالات السابقة تعلم المهارات الأخرى من مكتبات أو تقنيات بجانب لغة البرمجة python حيث تعلم اللغة فقط لن يجعلك محترفاً في أي مجال من المجالات السابقة

مع أن العنصر section يعطي نفس النتيجة العنصر div ولكن هناك أهميه لاستخدام العنصر section حيث يعتبر ال section من العناصر الدلالية Semantic HTML elements وهي مهمة في 

• كود أوضح وأسهل في الصيانة: يمكنك تجربة ذلك من خلال العمل على مواقع كبيره وقتها ستعرف أهمية ال  Semantic HTML elements ولتجربة ذلك سأكتب لك بعض العناصر بدون محتوىلنرى هل ستتعرف على محتويات هذه العناصر المفترضة أم لا؟

  <header> 
  <nav></nav>
  </header>
  <main></main>
  <footer></footer>

  سهل تخمين المحتوى صحيح؟

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

• تحسين وضع SEO الخاص بك: يمكن أن يتأثر وضع تحسين محركات البحث (SEO) لديك ، بشكل إيجابي أو سلبي ، اعتمادًا على عوامل مثل: الطريقة التي تتم بها كتابة المحتوى ، أو التصميم "المتجاوب" ، أو إمكانية الوصول إلى الموقع.في حالة Google ، يستخدمون خوارزمية تحلل كود موقع الويب الخاص بنا ، وتستخدم الترميز والتسميات المستخدمة لفهم الغرض من الصفحة بشكل أفضل.بهذه الطريقة ، إذا استخدمنا علامة دلالية ، فسنقوم بتسهيل المهمة على خوارزمية تحديد المواقع لمساعدتنا في الوصول إلى المزيد من المستخدمين. وفي المقابل ، سيكون موقعنا الإلكتروني أكثر سهولة في الوصول إليه.

كما في التعليق السابق وضح مصطفى طريقة إرسال بيانات إلى  قاعدة البيانات SQLite ولكن row واحد 

لذلك إذا اردت إرسال العديد من الصفوف يمكنك استخدام loop كما في المثال التالي

const sqlite3 = require('sqlite3').verbose();
let db = new sqlite3.Database('../db/sample.db');
let languages = ['C++', 'Python', 'Java', 'C#', 'Go'];

//? ونغير الفاصل بين العناصر ل placeholders نجهز مصفوفة 
let placeholders = languages.map((language) => '(?)').join(',');
let sql = 'INSERT INTO langs(name) VALUES ' + placeholders;

db.run(sql, languages, function(err) {
  if (err) {
    return console.error(err.message);
  }
  console.log(`Rows inserted ${this.changes}`);
});

db.close();

كما في التعليقات السابقة فإنه يمكنك الحصول على العديد من النصائح من خلال Lighthouse  لتحسن سرعة الموقع والعديد من النصائح الأخرى ولكن عند الحديث عن تحسين سرعة الموقع وبما أنه لديك كما قلت العديد من الصور والفيديوهات فمن المؤكد أنها المشكلة 

لذلك يجب عليك عمل optimize للصور والفيديوهات من خلال الخطوات التالية

• لا تذهب دائمًا إلى JPG. توقع حجم الصورة التي ستعتمد على محتوياتها ، ثم استخدم نوع الصورة الصحيح.
• لا تهتم باستخدام صور SVG على الإطلاق إذا كنت ترغب في تحسين الصور بسرعة. الوقت الذي ستضيعه في إنشائها لن يؤتي ثماره (على الرغم من عدم التردد في الاختلاف). ستكون ملفات PNG أسرع في الاستخدام ولن تكون أسوأ بكثير من حيث استهلاك مساحة القرص.استخدم WebP كثيرًا قدر الإمكان ، ولكن بشكل خاص عند التعامل مع الصور التي تظهر على صفحات متعددة أو صور كبيرة بشكل غير عادي. إذا كنت لا ترغب في تحويل صورك إلى WebP يدويًا ، فيمكنك استخدام مكون إضافي مثل Optimole ، والذي يخدم تلقائيًا صور WebP لزوار موقعك بشكل افتراضي.
• قم بضغط ملفات JPG الخاصة بك للوصول إلى مستوى مقبول من الجودة مقابل مساحة القرص. قم بضغط ملفات PNG دائمًا.
• استخدم أحجام الصور الصحيحة لتصميمك. إنشاء breakpoints. قم بإنشاء إصدارات متعددة من نفس الصورة لتغطية breakpoints. استخدم srcset و sizes ك attributes  عند عرض الصور.
• استخدم ال Lazy load images.
• اعرض صورًا أصغر حجمًا وأكثر ضغطًا للمستخدمين على اتصالات الإنترنت الأبطأ.

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

الإختيار بين التقنيتين Flutter أو Android Studio يعتمد في الأساس على إحتياجات المشروع وبما أنك تنوي التعلم فيجب أن يكون تعلم أي التقنيتن يخدم المشروع أو البرنامج الذي تنوي العمل عليه فمثلاً مثال بسيط إذا كنت تريد هذه التطبيق على الأندرويد فقط والبرنامج معقد فالأفضل بدون تفكير هو الإتجاه لتعلم لغة البرمجة java أو  kotlin مع ال android studio

وحتى تستطيع الوصول للإختيار الأفضل يجب عليك معرفة مميزات وعيوب كلا التقنيتين

Flutter

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

Java

• هي لغة برمجة مستخدمة على نطاق واسع تم استخدامها لتطوير تطبيقات Android لسنوات عديدة.
• لديها مجتمع كبير ومجموعة واسعة من المكتبات والأدوات المتاحة للمساعدة في تطوير التطبيقات.
• تشتهر Java بقوتها وأمانها وقابليتها للتوسع ، مما يجعلها خيارًا ممتازًا لإنشاء تطبيقات معقدة على مستوى المؤسسة.
• تركز Java أيضًا بشكل كبير على البرمجة الموجهة للكائنات ، مما يجعلها مناسبة لفرق كبيرة من المطورين.

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

لم تقم برفع المستودع بشكل صحيح أو لم تقم بعمل push لذلك

• إذا قمت بإنشاء مستودع بالفعل عن طريق git init مسبقاً وقمت بعمل git add و commit فيتبقى لديك حتى تقوم برفع المستودع المحلي لل remote الخطوات التاليه

  git remote add origin url // هو عنوان ال مستودع المكتوب في الصورة المرفقه urlال 
  git branch -M main
  git push -u origin main

   

• أما إذا لم تقم بإنشاء مستودع محلي بالأساس فيجب إتباع الخطوات التالية ولكن يجب أن تكون في المسار الصحيح

  git init
  git add .
  git commit -m "first commit"
  git remote add origin url // هو عنوان ال مستودع المكتوب في الصورة المرفقه urlال
  git branch -M main
  git push -u origin main

يمكنك قراءة هذه المقالة حيث تشرح مبادئ git

كما أخبرك عمر في التعليق السابق فإنه يجب ان تقوم بالمقارنة بنفسك من خلال البحث عن الإستضافات التي تدعم nextjs ومن هذه الإستضافات 

• AWS Amplify
• Digital Ocean
• Heroku
• Google Cloud Run
• Cloudflare Pages
• سيكون من الصعب ذكر حلول الاستضافة المتاحة لمشاريع Next.js دون ذكر Vercel حيث يعتبر من أفضل الحلول لإستضافة مواقع nextjs.

حتى تصبح مطور frontend محترف يجب عليك دراسة لغة javascript وليس java حيث هذه لغة تختلف عن الأخرى وعامة عند دراسة الويب يجب عليك دراسة لغة javascript حيث تعتبر اللغة الأساسية لتطوير مواقع الويب سواء ال frontend أو ال backend حيث تستعمل لإعطاء بعض عناصر الصفحة صفاتٍ تفاعلية، مثل شريط متحرك من الصور أو قوائم تظهر عند وقوع حدث معيّن ...إلخ.

ويمكنك التعرف على مجال الويب والتقنيات واللغات المستخدمة من خلال المقالة التالية

وقم بقراءة الإجابات على هذا السؤال للمزيد من المعلومات 

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

فمثلاً محفظة stc يتم شحن المحفظة عن طريق الوسائل التالية 

• عن طريق Apple Pay
• عن طريق البطاقة الائتمانية أو بطاقة مدى
• عن طريق التحويل المحلي إلى stc pay
• من حسابك البنكي: حوّل محلياً إلى حسابك في stc pay من خلال لصق رقم الحساب أو الآيبان

وللمزيد من التفاصيل من خلال هذا الرابط

لذلك الأفضل هو الدخول للموقع الرسمي للمحفظة وقراءة جميع التفاصيل 

بالنسبة لمجال البرمجة عموماً لا تحتاج مواصفات عالية ولكن في مجال برمجة تطبيقات الأندرويد بواسطة ال android studio تحتاج لرامات عالية (8جيجا أو كثر ) وبروسيسور عالي نسبياً  جيل حديث أما بالنسبة لمجالات البرمجة الأخرى لا تحتاج إلى مواصفات عالية لذلك إذا لم يكن بإمكانك شراء حاسوب حالياً فلديك هذه النصائح لمتابعة العمل والتعلم

• زيادة الرامات لفتح عدة برمجيات في نفس الوقت 
• إضافة ssd لزيادة وتحسين سرعة الحاسوب
• تثبيت إي توزيعة من نظام linux حيث لا يستهلك الكثير من الموارد حيث يعتبر نظام أسلس من ال windows
• استخدام برمجيات اخف مثلاً بدلاً من google chrome يمكن استخدام edge فهو أسرع من google chrome
• بدلاً من استخدام IDE يمكنك استخدام محرر أكواد مثل vs code أسرع بكثير
• بدلاً من android studio يمكنك استخدام برمجيات بديله ولكن هذا يأتي على حساب المميزات الموجودة في  android studio

بالنسبة لاستخدام Chatgpt فهو غير متاح للاستخدام في العديد من الدول العربية يعتبر خطوات التسجيل على الموقع غير الرسمية هي كالتالي

•  استخدام برنامج vpn لتغير الموقع الجغرافي ويوجد العديد من البرامج يمكنك تحميل أحدهم مثل NordVPN: Most Feature-Rich VPN.
• أما بالنسبة للتسجيل برقم الهاتف فهناك خدمات للحصول رقم هاتفي وهمي ويمكنك البحث عنها تعتبر هذه الخطوة إجبارية حيث أن ال Chatgpt يحتاج لرقم هاتف خاص بالدول التي يعمل بها Chatgpt
• وسوف تستخدم إيميل خاص بك للتسجيل

تعتبر الخطوات السابقة هي الحل الوحيد لاستخدام Chatgpt في الدول المحظورة 

لاحظ أنه تم إضافة رسوم على استخدام ال Chatgpt مع العديد من المميزات ولكن إذا استخدمت الحساب المجاني فربما ان تجد الموقع متاح أحياناً نتيجة الضغط على  الموقع

لا يمكنك تحويل موقع WordPress إلى موقع ويب برمجة خاصة .

تحتاج إلى إنشاء نظام مشابه له نفس الوظيفة من خلال لغة php مثلاً  ثم نسخ المحتويات إلى النظام الجديد. لا يوجد نظام آلي لجعل هذه العملية أسرع.

لذلك يعتمد ذلك على ما تريد فعله بالضبط . هل تريد أن تأخذ الموضوع (المعروف أيضًا باسم: المظهر والألوان وبنية html فقط) وتكون قادرًا على استخدامه؟ أو تتوقع أن تكون قادرًا على إعادة إنشاء موقع الويب بالكامل (الوظائف الكاملة ، منطقة الإدارة ، إلخ) بدون Wordpress؟

أولاً ، تحتاج إلى الحصول على javascript والصور (حسب الحاجة ، من السمة) وإخراج CSS من السمة من مجلد wp-content / theme ذي الصلة. بعد ذلك ، ستحتاج إلى تفريغ صفحة أو صفحتين (html كامل) من الموقع ، بحيث يكون لديك أيضًا بنية HTML كاملة لاستخدامها كمخطط. قد ترغب أيضًا في ملاحظة أي مكتبات JS خارجية مستخدمة للتفاعل (bootstrap؟ font-awesome؟ jquery؟ etc).

أما بالنسبة تحويل موقع الويب بالكامل (الوظائف الكاملة ، منطقة الإدارة ، إلخ) من Wordpress إلى برمجة خاصة فذلك من المستحيل تنفيذ بواسطة أداه أو ما شابه ولكن يجب عليك بناء الموقع من الصفر بلغات البرمجة التي تناسبك php مثلاً

وبالنسبة لقاعدة البيانات ستحتاج إلى نسخ قاعدة البيانات احتياطيًا من الموقع القديم أولاً.

يحتوي WordPress على العديد من المكونات الإضافية لنسخ قاعدة البيانات احتياطيًا ، مثل  wp-db-backup . بمجرد تثبيت المكون الإضافي وتنشيطه ، حدد أدوات> نسخ احتياطي في المسؤول.

لذلك فكرة تحويل موقع wordpress إلى برمجة خاصة هي غير ممكنة بواسطة استخدام أداه أو من خلال مقطع فيديو يمكنك تنفيذ ذلك ولكن يجب أن تقوم ببناء الموقع كاملاً من الصفر بجانب الإستفادة من خلال (الحصول على javascript والصور (حسب الحاجة ، من السمة) وإخراج CSS من السمة من مجلد wp-content /) واستخراج قاعدة البيانت 

• يمكنك  إزالة كل المسافات البيضاء من سلسلة C # عن طريق Where () LINQ في السلسلة المصدر.  عن طريق المثال التالي

using System.Linq;

// ...

string example = "   Hi there!    ";
string trimmed = String.Concat(example.Where(c => !Char.IsWhiteSpace(c)));
// Result: "Hithere!"

• أو يمكنك إزالة المسافة البيضاء من بداية ونهاية سلسلة C # عن طريق الدالة trim كالتالي

  string example = "   Hi there!    ";
  string trimmed = example.Trim();
  // Result: "Hi

   

• أو من بداية السلسلة النصية فقط

  string example = "   Hi there!    ";
  string trimmed = example.TrimStart();
  // Result: "Hi there!    "

• أو من نهاية السلسلة النصية فقط

  string example = "   Hi there!    ";
  string trimmed = example.TrimEnd();
  // Result: "   Hi there!"

   

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

1. تقسيم الكود في React باستخدام الاستيراد الديناميكي import() :  تسمح لنا مكتبة React بتقسيم ملف حزمة كبير إلى أجزاء متعددة باستخدام الاستيراد الديناميكي () متبوعًا بالتحميل البطيء لهذه الأجزاء عند الطلب باستخدام React.lazy. تعمل هذه الإستراتيجية على تحسين أداء الصفحة لتطبيق React المعقد بشكل كبير. لتنفيذ تقسيم الشفرة ، نقوم بتحويل استيراد React العادي مثل هذا:

   import Home from "./components/Home";
   import About from "./components/About";

   إلى 

   const Home = React.lazy(() => import("./components/Home"));
   const About = React.lazy(() => import("./components/About"));

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

2. تحميل الصور  (Lazy loading) في React : لتحسين تطبيق يتكون من عدة صور ، يمكننا تجنب عرض كل الصور دفعة واحدة لتحسين وقت تحميل الصفحة. مع التحميل البطيء ، يمكننا الانتظار حتى توشك كل صورة على الظهور في منفذ العرض قبل عرضها في DOM ، يمنع التحميل البطيء للصور إنشاء عُقد DOM غير ضرورية ، مما يعزز أداء تطبيق React الخاص بنا يمكنك استخدام مكتبات لتنفيذ ال تحميل الصور  (Lazy loading) في React مثل react-lazy-load-image-component

كما في التعليق السابق فإنه بناء تطبيق يستخدم ال AI Video Recognition فستحتاج لخبرة عالية جداً وستستخدم خدمات مفتوحة المصدر ويوجد العديد من هذه المشاريع على github ولكن لاستخدام هذه الخدمات تجارياً فيوجد هذه الخدمات الأفضل حالياً

واجهات برمجة التطبيقات التجارية للVideo Recognition   

 Google Video Intelligence: تقدم مجموعة متنوعة من الميزات الجاهزة للإنتاج للتعرف على كائن الفيديو.

Amazon Rekognition: توفر مجموعة واسعة من النماذج والأدوات المُدرَّبة مسبقًا لتدريب النماذج الفردية.

Microsoft Image Processing API: تتضمن العديد من خوارزميات اكتشاف كائنات الفيديو سهلة الاستخدام.

وتوجد خدمات online للاستخدام مباشرة يمكنك البحث عنها كما في التعليق السابق عن طريق البحث عن "online video recognition"

لتجنب هذا الخطأ قم بتثبيت المكتبة من خلال المصدر وسوف ينجح الأمر

python -m pip install "kivy[base]" kivy_examples --no-binary kivy

وهناك عدة طرق لتحميل المكتبة يفضل الإطلاع على التوثيق الرسمي من هنا

بالنسبة لاستخدام عدة لغات برمجية في برنامج واحد فهو ممكن حيث هناك عدة احتمالات.

• أولاً ، تسمح لك بعض لغات البرمجة بتضمين كود لغة برمجة أخرى في نفس الملف المصدر. على سبيل المثال ، سيسمح لك العديد من ال compilers  للغة C بتضمين أقسام قصيرة من لغة assembly في ملف مصدر C.
• ثانيًا ، يمكن بناء المشروع باستخدام لغات برمجة متعددة ، حيث يحتوي كل ملف مصدر على كود بلغة برمجة واحدة فقط. على سبيل المثال ، مع برنامج Intel Fortran المثبت في Visual Studio IDE
• بالطبع إذا كنت تستخدم أي مكتبات أو أطر عمل ، فربما تمت كتابتها بلغة برمجة أخرى غير تلك التي تستخدمها. لذلك ، على الرغم من أنك قد تعمل بلغة برمجة واحدة فقط ، فقد تستخدم كوداً مكتوبًا في الأصل بلغات برمجة أخرى . على سبيل المثال ، قد تكتب كل التعليمات البرمجية الخاصة بك في Python ، ولكن ربما تستخدم مكتبة واحدة أو أكثر تم كتابتها في الأصل باللغة C. 

فمثلاً يمكنك استخدام لغة البرمجة بايثون و سي بلس بلس في تطبيق واحد عن طريقة المكتبة Boost.Python

أما إذا كنت تقصد استخدام لغات متعددة من خلال محرر أكود مثل vs code فنعم يمكنك فعل ذلك فمثلاً محرر أكود مثل VSCode .  يمكنك استخدام أي عدد تريده من اللغات. عليك فقط تثبيت الامتدادات للغة المعينة التي تريد العمل عليها.

يجب عليك معرفة الفائدة التي تكتسبها من خلال استخدام الخوارزميات في البرنامج الخاص بك 

الخوارزميات هي وسائل محددة بوضوح لحل المشاكل. لذلك يجب أن تعرف شيئين عن الخوارزميات :

• هل تم حل المشكلة؟
• هل تستخدم الموارد بكفاءة؟

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

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

لذلك يجب عليك تحديد ذلك بنفسك من خلال البرنامج الذي تقوم ببنائه

يمكن تنفيذ المطلوب من خلال استخدام الجافاسكريبت ، عن طريق استخدام العنصر canvas ولكن لتنفيذ مثل هذا ال diagram تحتاج أن تكون لديك خبرة جيدة باستخدام العنصر canvas حتى تقوم ببناء ال diagram من البداية

بينما هناك مكتبات جاهزة تسهل عمل هذه ال diagram مثل 

• amCharts : حيث يوجد قسم خاص لتنفيذ ال Sankey Diagram
•  مكتبة D3 : هي مكتبة كبيرة خاصة بالجافاسكريبت لهذه الرسومات
• كما يوجد google charts

الروابط السابقة تحتوي على أمثلة على الSankey Diagram لذلك هي الحل المناسب لك حالياً

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

 const [tasks, setTasks] = useState<any[]>([]);

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

لأن تعلم الخوارزميات وبنى المعطيات يعتمد بشكل كبير على البرمجة الشيئية ولإثبات ذلك 

تابع معي كيف يمكنك إنشاء شجرة بيانات ثنائية 

class Node: 
	def __init__(self,key): 
		self.left = None
		self.right = None
		self.val = key 

root = Node(1) 
root.left	 = Node(2); 
root.right	 = Node(3); 
root.left.left = Node(4);

إذا لم يكن لديك معرفة بالبرمجة الشيئية لن تستطيع المتابعة في شرح الكود السابق