محمد أيت لعرايك

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

البطاقات مسبقة الدفع غير مقبولة ,للدفع بها لفتح حساب مطور, يمكنك التأكد من المعلومة من الموقع الرسمي
طرق الدفع الخاصة بتسجيل حساب المطور هي كتالي:
يمكنك الدفع مقابل تسجيل حساب مطور Google الخاص بك بواسطة بطاقات الإتئتمان التي تحمل الشعارات التالية:
Mastercard Visa American Express Discover (United States only) Visa Electron (outside of the United States) الحل هو أن تطلب من البنك الخاص بك تزويدك ببطاقة صالحة للدفع و الشراء عبر الأنترنت بشعار visa  أو Mastercard   تأكد أنها ليست من نوع  Prepaid cards
 

هناك عدة قواعد يجب إحترامها عند كتابة أكواد HTML CSS و Sass
أولا لنبدء ب HTML, لكتابة كود HTML نظيف يجب عليك : 1- كتابة الكود بجدية :
  أهم شيء تحتاجه لكتابة كود جيد هو رغبتك في فعل الأشياء بشكل صحيح. تعد كتابة كود HTML نظيفًا أمرًا سهلاً ، ولكن عليك أن تهتم وتولي الكثير من الاهتمام. وعدم التسرع في كتابة الشيفرات
2- إحترام مسافة البداية Indent : 
الكود ذي المسافة البادئة أسهل في القراءة ، وأسهل في الفهم ، وأسهل في التعديل ، وأسهل في الصيانة. ما عليك سوى إلقاء نظرة على مدى صعوبة فهم العلاقات بين الأب والطفل بين العناصر عندما لا يتم وضع مسافة بادئة للشفرة بشكل صحيح.
3- عدم المبالغة في إستخدام عناصر DIV: 
Divitis   هو اسم مضحك لمشكلة شائعة في HTML. غالبًا ما نفرط في استخدام divs ، ويرجع ذلك أساسًا إلى أننا نريد التفاف واستهداف جميع عناصر التصميم في CSS. ثم ينتهي بنا الأمر بالحصول على قائمة أبدية من divs غير الضرورية تمامًا
4- تجنب التعليقات:
HTML ليست لغة برمجة ، والتعليقات ليست ضرورية لأن ترميز HTML لا يحتاج إلى شرح. إذا وجدت نفسك تعلق على HTML كثيرًا ، فيجب عليك مراجعة مرجع عناصر HTML
5- كتابة أسماء الأقسام classes بشكل واضح:
استخدم أسماء ذات معنى لمعرفاتك وفئاتك. يجب أن تكون قصيرة ووصفية وتمثل مفهومًا واحدًا فقط. سيجعل HTML الخاص بك أكثر وضوحًا وعملية التصميم أسهل
أما بالنسبة ل CSS: 1-  تسمية العناصر بذكاء
يجب أن يكون اسم المحدد وصفيًا ذاتيًا وقابل للقراءة هناك العديد من اصطلاحات التسمية التي يمكنك استخدامها في مشروعك .
2- "لا تكرر نفسك"
يرمز DRY إلى "لا تكرر نفسك". كما يمكننا أن نفهم من اسمها ، تهدف DRY إلى تجنب التكرار قدر الإمكان , يعني إدا كنت تحتاج نفس الكود في مناطق مختلفة في المشروع يمكنك وضعه على شكل قسم وإستعماله متى أردت ذلك
3- تجنب إستعمال important !
تتميز العلامة important! بأعلى درجة خصوصية لجميع محددات CSS. إذا كنت بحاجة إلى تجاوز علامة important! ، فعليك استخدام علامة important! أخرى. وهذا يجعلك تستخدم المزيد والمزيد من العلامات important! . مما يجعل صيانة شفرة CSS الخاصة بك أكثر صعوبة. 
4- لا تستخدم الأنماط المضمنة
وفقًا لمبدأ فصل الاهتمامات ، يجب فصل CSS و HTML لأسباب مثل سهولة القراءة والصيانة.
5- كن متسقا
لا تتعلق كتابة كود HTML النظيف دائمًا باختيار الممارسات الجيدة وتجنب الممارسات السيئة. في كثير من الأحيان يمكنك استخدام طرق مختلفة لكتابة نفس سطر التعليمات البرمجية
أما فيما يتعلق ب scss فيجب عليك 1- إنشاء المكونات
تحدد بنية الملف واستراتيجية عملية التطوير المستقبلية ، خاصةً إذا كان تطبيقك ينمو وكنت تعمل مع فريق فكتابة المكونات سيسهل عليك المهمة
2-  استخدم  المتغيرات  و mixins المحلية
المتغيرات والخلطات عالمية في Sass. إذا قمت بتعريف $primary-color  مرة واحدة ، يمكنك استخدام القيمة في أي مكان. هذا ليس بالشيء الجيد دائمًا. على سبيل المثال: لديك قيمة ثابتة (مثل الارتفاع الثابت) ، ولا تستخدمها إلا للمكون والعناصر التابعة له. سيكون الخيار الأول (وليس الخيار الفعال) هو ترميز القيمة عدة مرات ، بالإضافة إلى خيار آخر ، لإنشاء متغير عام. قد يؤدي هذا الأسلوب لاحقًا إلى تضخيم قائمة المتغيرات العامة الخاصة بك برمز محدد للغاية.
3- استخدم maps  أو القوائم
maps  هي متغيرات Sass تشبه الكائنات. نستخدمها لقيم التخطيط العالمية ، ، وقيم التكوين العالمية الأخرى. قد تسأل ، "لماذا maps   وليس المتغيرات العادية؟" على الرغم من أن استخدام متغير أسهل بكثير من جلب قيمة من map  ، فإن النقطة الأساسية هي سهولة القراءة. maps  عبارة عن كائن بمظهر JSON مع إمكانية تداخل القيم. بدلاً من قائمة طويلة من المتغيرات العامة (التي ليس من السهل قراءتها)
4- حلقة الأشياء المتكررة
باستخدام for and @each@ ، يمكنك تحقيق رمز نظيف للغاية ويمكن صيانته بسهولة.
 
 
 

الطريقة المستعملة في تحديث جزء من الصفحة دون تحديث الصفحة كاملة هي ما يسمى ب  ajax requests calls
يمكن الحصول على معلومات من الخادم دون الحاج إلى تحديث الكامل لصفحة بواسطة javascript 
عن طريق المكون XMLHttpRequest
// XMLHttpRequest إنشائ الكائن var xhttp = new XMLHttpRequest(); // XMLHttpRequest تحدد خاصية وظيفة يتم تنفيذها في كل مرة تتغير فيها حالة كائن onreadystatechange : xhttp.onreadystatechange = function() { // هي 200 readyState عندما تكون الخاصية هي 4 وخاصية status ، تكون الاستجابة جاهزة if (this.readyState == 4 && this.status == 200) { // تقوم الخاصية responseText بإرجاع استجابة الخادم كسلسلة نصية. // يمكن استخدام السلسلة النصية لتحديث صفحة الويب: document.getElementById("demo").innerHTML = xhttp.responseText; } }; // data.php سيتم الحصول على المعلمات من ملف xhttp.open("GET", "data.php", true); // إنهاء الإتصال xhttp.send() يمكنك قراءة المزيد حول XMLHttpRequest  من هنا

تعتبر  API Headers مصدرًا إضافيًا للمعلومات لكل استدعاء لواجهة برمجية وتتمثل مهمتهم في تمثيل البيانات الوصفية المرتبطة بطلب واجهة برمجة ا. إذا واجهت مشكلات في أحد واجهات البرمجية (API) ، فإن المكان الأول الذي يجب أن تبحث فيه هو headers ، حيث يمكنها مساعدتك في تعقب أي مشكلات محتملة.
لتعيين  headers في HTTP مع طلب Axios GET ، يجب أن تمرر كائنًا بخاصية headers كمتغير ثانٍ.
const axios = require('axios'); const res = await axios.get('https://my-domain.com/get', { headers: { 'Test-Header': 'test-value' } }); ولإضافة headers التي ذكرت يمكنك كتابتها على الشكل التالي:
const axios = require('axios'); const res = await axios.get('https://my-dmain.com/get', { headers: { 'Accept': 'application/json' 'Content-Type': 'application/json', 'Authorization': 'Bearer {token}' // token بقيمة {token} يجب إستبدال } });  

توجد APIs مجانية تفر لك أسماء الأدوية بأسمائها التجارية أشهرها rxnav
rxnav توفر واجهات برامج التطبيقات (APIs) للمستخدمين لاسترداد البيانات من العديد من مصادر معلومات الأدوية ، بما في ذلك RxNorm و MED-RT و RxTerms.  ويوفر لك البيانات على شكل json أو xml على حسب إختيارك يمكنك الإطلاع على الapi بالتفصيل من هذا الرابط
ويمكنك أيضا الإطلاع على التوثيق الخاص ب API وجميع الدوال الخاصة به من هنا

لكي نفهم جيد الفرق بين استخدام app أو route
لنعاين المثالين التاليين
// app.js var express = require('express'), dogs = require('./routes/dogs'), var app = express(); app.use('/dogs', dogs); app.use('/cats', cats); app.use('/birds', birds); app.listen(3000); //dogs.js var express = require('express'); var router = express.Router(); router.get('/', function(req, res) { res.send('GET handler for /dogs route.'); }); router.post('/', function(req, res) { res.send('POST handler for /dogs route.'); }); module.exports = router; عندما يتم استدعاء ()var app = express  ، يتم إرجاع كائن app. . التطبيق الرئيسي
عندما يتم استدعاء var router = express.Router، يتم إرجاع تطبيق صغير مختلف قليلاً.
الفكرة وراء التطبيق المصغر هي أن كل مسار في تطبيقك يمكن أن يصبح معقدًا للغاية ، وستستفيد من نقل كل هذه التعليمات البرمجية إلى ملف منفصل. يصبح جهاز توجيه كل ملف تطبيقًا مصغرًا. له هيكل مشابه جدًا للتطبيق الرئيسي.
في المثال أعلاه ، تم نقل رمز المسار / dogs إلى ملفه الخاص حتى لا يتسبب في تشويش التطبيق الرئيسي. سيتم تنظيم الكود الخاص بـ / dogs بالمثل في ملفاتهم الخاصة. من خلال فصل هذا الرمز إلى ثلاثة تطبيقات صغيرة ، يمكنك العمل على منطق كل واحد على حدة ، ولا تقلق بشأن كيفية تأثيره على التطبيقين الآخرين. cats و birds
إذا كان لديك كود middleware يتعلق بجميع المسارات الثلاثة ، فيمكنك وضعه في التطبيق الرئيسي ، قبل app.use  إذا كان لديك كود middleware  يتعلق بواحد فقط من هذه المسارات ، يمكنك وضعه في الملف لهذا المسار فقط.

لإستخدام Zoom API. أولاً ، عليك إنشاء تطبيق في Zoom marketplace.
اذهب إلى هذا الرابط
إذا لم يكن لديك أي حساب في zoom، فيجب عليك إنشاء حساب في zoom. من هنا
بعد ذلك أنشئ تطبيق OAuth  يجب الحصول على id العميل و كلمة السر لتطبيقك. و تعيين النطاقات للتطبيق. ما النطاقات التي يجب عليك تحديدها لتطبيقك.
النطاقات تعني نوع بيانات المستخدمة التي يمكنها الوصول إلى تطبيقك. كلما قام مستخدم بتسجيل الدخول في تطبيقك ، يمكنه رؤية هذه النطاقات أو الوصول إلى بيانات هذا التطبيق.
بعد ذلك يمكنك إستخدام مكتبة guzzlehttp/guzzle   في حالة تستخدم  لغة php
composer require guzzlehttp/guzzle سنقوم بتخزين رمز الوصول في قاعدة البيانات لاستخدامه لاحقًا. رمز الوصول صالح لفترة قصيرة من الزمن. في الكود الخاص بنا ، سنقوم بإعادة إنشاء رمز الوصول في الخلفية بحيث لا يحتاج المستخدم إلى إجراء عملية التفويض مرة أخرى. قم بتشغيل استعلام SQL أدناه لإنشاء جدول قاعدة بيانات يحتوي على رمز الوصول.
CREATE TABLE `token` ( `id` int(11) NOT NULL AUTO_INCREMENT, `access_token` text NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; كما قلت سابقًا في Zoom APIs ، هناك الكثير من الخيارات التي يمكنك دمجها في تطبيقك. يمكنك التحقق من توثيق Zoom APIs هنا

يمكن إنشاء دالتين, واحدة تقوم بالتحقق من النصوص , وواحدة تتحقق من الصور
دالة التحقق من النصوص:
function validation_input($data) { // للنص و العنوان validation لعمل $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); if(!empty($data){ // هنا يمكن عمل تحقق من عدد الحروف إن أردت ذلك return true; } }     دالة التحقق من الصور:
function validation_image($image) { $errors= array(); $file_name = $image['name']; $file_size = $image['size']; $file_tmp = $image['tmp_name']; $file_type = $image['type']; $file_ext=strtolower(end(explode('.',$image['name']))); $expensions= array("jpeg","jpg","png"); // نتحقق من الصيغ المسموح بها if(in_array($file_ext,$expensions)=== false){ $errors[]="extension not allowed, please choose a JPEG or PNG file."; } if($file_size > 2097152) { // نتحقق من حجم الصورة $errors[]='File size must be excately 2 MB'; } if(empty($errors)==true) { return true; } }  

أسهل  طريقة إذا كنت تستخدم ES6.
let initialArray = [1, 2, 3]; let newArray = [ ...initialArray, 4 ]; // --> [1,2,3,4] ستكون المصفوفة الجديدة [1،2،3،4]
والان لتحديث المصفوفة يكفي أن تكتب :
this.setState({ arrayvar:[...this.state.arrayvar, newelement] }); يمكنك تطبيق نفس الطريقة على المتغير updatedDescriptions

إذا  كنت لا تريد إستخدام الدالة ()diff و تريد حساب الفرق بين تاريخين بالسنوات و الأشهر و الأيام  فيمكنك إستخدام الطريقة التالية:
$birth = "1956-03-24"; //تاريخ الولادة $death = "2009-06-26"; // تاريخ الوفاة $diff = abs(strtotime($death) - strtotime($birth)); // حساب الفرق الموجب بين التاريخين $years = floor($diff / (365*60*60*24)); // حساب عدد السنوات $months = floor(($diff - $years * 365*60*60*24) / (30*60*60*24));// حساب عدد الأشهر $days = floor(($diff - $years * 365*60*60*24 - $months*30*60*60*24)/ (60*60*24)); // حساب عدد الأيام printf('%d سنة %d شهر %d يوم', $years, $months, $days); // طباعة النتيجة printf("\n");  

تأكد دائما عند إستعمال الدالة json.decode من أن الكائن غير فارغ.
وأفضل طريقة لكتابة الكود الخاص بك هو على الشكل التالي:
if(response.body.isNotEmpty) { final items = json.decode(response.body).cast<Map<String, dynamic>>(); }else{ // فارغ response.body هنا // يمكن كتابة الكود الخاص بك هنا }  

أريد أن أضيف ملاحظة صغيرة على ما ذكره المدرب بلال وهو أنك بحاجة إلى تغيير الإتجاه من يسار-يمين LTR إلى يمين-يسار  RTL عند تغيير اللغة غي قالب wordpress.
ويمكن عمل ذلك بإتباع الخطوات التالية :
الخطوة الأولى:   قم بإنشاء ملف RTL .للقالب الخاص بك, أنصحك بإستخدام  RTLCSS . فهو سيساعدك على تحويل ملف style.css  الخاص بالقالب إلى إلى ملف style-rtl.css قم بحفظه في مجلد القالب . وأيضا يوجد  cssjanus  هذه الأداة بسيطة جدا فهي تقوم أيضا بعملية تحويل ملف style.css إلى style-rtl.css بكل سهولة فقط أكتب CSS من اليسار إلى اليمين (LTR) في الواجهة اليمنى ، وانقر فوق الزر Submit ، وشاهد RTL CSS على اليمين. الخطوة الثانية : تأكد من أن WordPress  يرى  ملف style-rtl.css المحفوظ في مجلد القالب. يمكن فعل ذلك بإضافة الكود أدناه في ملف functions.php  function enqueue_theme_files() { wp_enqueue_style( 'themeslug-style', get_stylesheet_uri() ); wp_style_add_data( 'themeslug-style', 'rtl', 'replace' ); } add_action( 'wp_enqueue_scripts', 'enqueue_theme_files' ); هده الدالة تخبر وردبرس بإستخدام ملف style-rtl.css عوض style.css عند عند تغيير اللغة
الخطوة الثالثة: إختبار RTL في قالب wordpress  ببساطة قم بتغيير اللغة في لوحة التحكم الخاصب بك بالذهاب إلى الإعدادات ثم غير اللغة إلى الغة العربية بعد الحفظ ، سترى أن كل شيء أصبح الآن من اليمين إلى اليسار 
 

المُنشئ ، constructor  في البرمجة الكائنية هي دالة خاصة  يتم النداء عليها أثناء إنشاء مثيل (instance) و يسمح بتخصيص الذاكرة اللازمة للكائن وتهيئة سماته (attributes)
أما Firebase  فهو مجموعة من خدمات الإستضافة لأي نوع من أنواع التطبيقات فهي توفر خدمات متعددة من بينها :
قاعدة بيانات Realtime - في الوقت الفعلي ، مستضافة على السحابة ، قاعدة بيانات NoSQL خدمة الاشعارات تسجيل دخول المستخدم وهويته التخزين السحابي - تخزين ملفات قابل للتطوير  و لتخزين البيانات في firebase  فمن الضروري عمل constructors  على حسب ما تود تخزينه في قاعدة البيانات مثلا في لغة java نكتب 
public static class User { public String date_of_birth; public String full_name; public String nickname; public User(String dateOfBirth, String fullName) { // ... } public User(String dateOfBirth, String fullName, String nickname) { // ... } } DatabaseReference usersRef = ref.child("users"); Map<String, User> users = new HashMap<>(); users.put("alanisawesome", new User("June 23, 1912", "Alan Turing")); users.put("gracehop", new User("December 9, 1906", "Grace Hopper", "happy man")); usersRef.setValueAsync(users); وسوف تخزن المعلومات على الشكل التالي 
{ "users": { "alanisawesome": { "date_of_birth": "June 23, 1912", "full_name": "Alan Turing" }, "gracehop": { "date_of_birth": "December 9, 1906", "full_name": "Grace Hopper", "nickname": "happy man" } } }