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

هذه هي الحصائل التي نشرتها سابقا وهي ٦٠ حصيلة في حساباتي الاجتماعية جمعتها في هذه التدوينة وسأكتب عن تجربتي في تدوينة لاحقة.

الحصائل:

٦٠- من مشاكل تطوير الويب وخصوصا الواجهات Front end مشكلة الكاش Cashe وهي أن التغيرات التي يجريها المبرمج لا تتحدث إلى المتصفح تلقائيا.

ولحل هذه المشكلة:

إما من المتصفح يدويا، بالضغط على فحص العنصر inspect element ثم الضغط مع الاستمرار على زر (التحديث) لتظهر قائمة تختار منها "empty Cashe and hard loaded". هذا في متصفح جوجل كروم وقد يتغير قليلا في غيره من المتصفحات.

الحل الثاني وهو الأفضل، كتابة إصدار عند ربط ملفات التنسيق CSS و JavaScript فمثلا في رابط التنسيق نضيف "style.css?ver=1.0.0" وكذلك في ملفات JavaScript. يمتاز هذا الحل بأنه آلي، وهو الوحيد الناجح عند رفع ملفات إلى السيرفر لتحديث cashe السيرفر حيث لا تنجح الطريقة الأولى، وهذا الحل مستخدم تلقائيا في الووردبريس.

شيء آخر:

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

٥٩- للوصول إلى أحد ما في لينكدإن، ابحث عن المشاريع/الشركات التي يعمل بها أو يديرها، فهذه الطريقة أفضل للوصول إلى الشخص بدلا من البحث في اسم الشخص الذي قد يكون متشابها مع العديد من الأسماء. أما إذا هو لا يملك حساب على لينكدإن.. فهذه مشكلته..

٥٨- أجمل ١٠٠ خط عربي مجاني (قانوني)

https://www.behance.net/gallery/86172589/-100-2019

٥٧ - موقع (https://phpbestpractices.org/) يقدم أفضل الممارسات لبرمجة php، من الجيد الاطلاع عليه.

٥٦- من المهارات الأساسية لكل مبرمج تعلم git. في هذا الفيديو [١] من نصف ساعة تقريبا كل ما تحتاجه للبدء في استخدام git و github ومنه تعلمت كل ما تعلمته عن git/github. وهناك كتاب إلكتروني من (خوارزميون) [٢] وفيه تعمق أكبر.

[١] https://www.youtube.com/watch?v=WVFXBMASu7I

[٢] https://blog.algorithmers.com/git/

٥٥- لتسهيل حياتك، يجب تعلم نظام إدارة الاعتماديات وهو في php كومبوزر. الرابط (https://getcomposer.org/).

٥٤- لكتابة كود php أنظف وأكثر وضوحا، اتبع النصائح في هذه الصفحة: (https://github.com/jupeter/clean-code-php).

٥٣- من الدوال المفيدة دالة nl2br لتحويل \n إلى سطر جديد دون الحاجة للانتقال المزعج بين php و html. للمزيد في هذا الرابط.

٥٢- يُفضل وضع مجلد public وprivate في مشروعك على الويب ويكون مجلد الprivate للدوال والكلاسات التي لا يجب على المستخدم العادي أن يصل إليها بأي حال، مثال على ذلك في هذا المشروع .

٥١- في php من الجميل أن تكون البارامترات الاختيارية في الدوال على هيئة مصفوفة associative array فهي أكثر مرونة وتمكّن إضافة العديد من البارامترات بدون تغيير الكود الذي كتبته إلى تلك الدرجة، وهي أفضل للخيارات الاختيارية أما البارامترات الأساسية فتكون متغيرا عاديا.

٥٠- من أفضل الممارسات best practices في استخدام الكلاسات في php:

  • اجعل اسم الكلاس حرفا كبيرا Capital واستخدم camelCase مثال: StudentProfile, UserComments وهكذا.

  • اجعل الأسماء مفردة وليس جمعا لكل كلاس.

  • عرّف كل كلاس في ملف منفصل.

  • اجمع كل الكلاسات في مجلد واحد.

  • عند تسمية الكلاس يمكنك تسميته وإضافة كلمة classليكون أكثر وضوحا.

٤٩- أحد أجمل المواقع للتدرب على sql https://en.wikibooks.org/wiki/SQL_Exercises

٤٨- في php، دوال autoload تمنع الأخطاء إذا لم تضمّن دالة الكلاس، وتزيد كفاءة الموقع فلا تستخدم الكلاس إلا عند الحاجة (مثال على دالة autoload موضح في الصورة).

٤٧- أثناء التعامل مع الوقت والتاريخ في php، يمكن استخدام دالة date أو strftime فقد تحل إحداها إشكاليات الأخرى.

٤٦- عند تنقيح الأخطاء في php، يمكنك استخدام دالة

die($variable_to_print)

لكي توقف البرنامج عند هذه الدالة كما يمكنك أيضا أن تطبع المتغيرات داخلها`.

٤٥- داخل كلاسات php، من الأفضل كتابة محددات الوصول access modifier دائما حتى لو كانت متغيرات الوصول عامة، هنا اكتب public بدلا من الاعتماد على القيم الافتراضية.

٤٤- «عند وجود مشكلة برمجية، اشرع بالبحث عنها في محرك البحث فقد تجد الجواب في موقع(stackoverflow) أو غيره، البحث أسرع السبل للحصول على المعلومة وغالبا ستجد أن المشكلة قد واجهت أناسا قبلك وقد أجيب عنها سابقا.

إذا لم تجد الحل، يمكنك السؤال عنها في stackoverflow أو غيره من المواقع، وللحصول على أفضل إجابة التزم بما يلي:

  • اشرح ماذا تريد أن تعمل، ليس فقط ما عملته وسبّب الخطأ.

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

  • انسخ رسالة الخطأ مع كودك البرمجي إلى مواقع كتابة الأكواد (مثل: pastebin، أو gist.github).

  • اشرح محاولاتك السابقة لحل المشكلة لكي لا تتلقى نفس الإجابات عنها.

  • اكتب رقم النسخة من اللغة البرمجية أو البرنامج الذي تعمل عليه، واذكر كذلك نوع نظام التشغيل الذي عملت عليه. »

-- آل ستيوارت، بتصرف

[1] https://stackoverflow.com/

[2] https://pastebin.com/

[3] https://gist.github.com/

٤٣- في php في البرمجة الكائنية:

كل هذه المصطلحات تعني نفس الشيء وتستخدم بتبادل حتى في توثيق php الرسمي:

(متغيرات الكلاسات)

variables = attributes = class variables = instance variables

(الكائنات)

objects = instances = class instances

٤٢- "في المشاريع الصغيرة، تضيف البرمجة الكائنية تعقيدا ليس مطلوبا.

في المشاريع المعقدة، تضيف البرمجة الكائنية تبسيطا مطلوبا.

عموما، في المشاريع التي تعتمد على قواعد البيانات ستفيدها البرمجة الكائنية". -- كيفن سكوجلند.

٤١- في الجمل الشرطية في php، يمكنك استخدام and عوضا عن && و or عوضا عن ||.

٤٠- عند التحقق من جملة شرطية if else ابدأ بالتحقق من البارامترات الأكثر قابلية لأن تخالف الشرط ثم الأقل منها.

الصورة

٣٩- من الجيد عمل ملف index.php في كل مجلد في مشروعك حتى لو لم تكن تحتاجه؛ فهو مهم لأمن الموقع، بحيث لا يعرف المخترق الملفات الداخلية للموقع وهيكليتها. يمكنك جعل هذا الملف عبارة عن اعادة توجيه redirection لمكان آخر.

٣٨- في php، من الأفضل أن تكون انتقالات الروابط أو ما يسمى (إعادة التوجيه) redirections خارج الدوال functions وليس داخلها؛ حتى تستخدم نفس الدالة في أكثر من صفحة بمرونة أكبر.

٣٧- موقع php بالطريقة الصحيحة يعطي مبرمج php الكثير من الأفكار والنصائح والمصادر لمبرمج php وهو مترجم للعربية.

النسخة العربية: (https://adaroobi.github.io/php-the-right-way/)

النسخة الإنجليزية: (https://www.phptherightway.com)

٣٦- عند إنشاء (كوكيز) في php، إذا مررت القيم الإضافية مثل: httponly, domain, secure، فإن عليك ذكرها جميعا عند حذف الكوكي كما هو موضح بالصورة.

No alternative text description for this image

٣٥- هناك عدة طرق للتحقق من احتواء متغير ما على قيمة في php

الطريقة الأولى: if … else

الطريقة الثانية: ternary operator

الطريقة الثالثة: null coalescing operator (تصلح في php 7 فما فوق)

نفس الكود موضح في الصورة.

لمزيد من المعلومات عن الطريقتين الثانية والثالثة يمكن البحث عن المصطلحات المذكورة في محركات البحث.

code example

٣٤- تحدثت بالأمس عن أهمية تعلم المارك داون mark down. في محرر VS Code يمكن استعراض ملفات المارك داون بالضغط على هذا الزر في أقصى يمين واجهة البرنامج في الأعلى (كما هو موضح بالصورة).

No alternative text description for this image

٣٣- من المهم تعلم اللغة التوصيفية markdown، سواء للمبرمجين أو من يكتبون على الإنترنت؛ فكثير من التوثيقات documents تكتب بهذه اللغة وكثير من المواقع يتطلب التعليق عليها استخدام مارك داون. يمكنك تعلمها في ١٥ دقيقة فقط من هنا (https://guides.github.com/features/mastering-markdown/)

٣٢- إلى كل مبرمج php، هذه القائمة البريدية تعطيك كل ما تحتاجه من معلومات عن php (التحديثات المهمة، أحدث المقالات، أحدث الدروس، أحدث البودكاستات واللقاءات، برمجيات مفتوحة المصدر مثيرة للاهتمام وغيرها). كل هذا ستجده في صندوق بريدك كل أسبوع. يمكنك أيضا متابعتها عبر قارئ خلاصات Feedly مثلا.

(http://www.phpweekly.com/).

٣١- موقع (ثلاثون ثانية من الكود) يعرض مقتطفات ودوال جاهزة مفيدة جدا في عدة لغات برمجية منها: PHP, JavaScript , CSS وغيرها.

(https://www.30secondsofcode.org/)

٣٠- موقع (https://www.producthunt.com/) موقع رائع للتعرف على المشاريع التقنية والاستلهام.

٢٩- هناك طريقة لكتابة أوامر SQL في PHP بجعلها مقسمة على أسطر؛ فهي أسهل في التعديل ومريحة عند النظر إليها. ولكن يجب (أولا): التنبّه دائما إلى ترك مسافة في آخر كل سطر حتى لا تلتصق الأوامر ببعضها (وثانيا) أن تقوم باستخدام مؤشرات الإضافة (=.) حتى تتجنب الأخطاء.

٢٨- غالبا، إرسال بيانات التحقق في (forms) إلى نفس الصفحة يجعلها أسهل في التعامل مع البيانات المرسلة وأسهل في التحقق من صحة البيانات لاحقا.

٢٧- عند التعامل مع اللغة العربية، قد تتعامل بعض دوال php بطريقة غير مفهومة، (كما في الصورة).

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

لحل هذه المشكلة استخدمت دالة mb_strlen مع وضع نوع التكويد واخترت utf-8 ويمكن تجاهله فهو اختياري ولكن زيادة في الحيطة.

هناك قائمة لكل الدوال التي يمهناك قائمة لكل الدوال التي يمكن استخدام بدائلها باستخدام البادئة mb_* ، وهي مهمة عند التعامل مع اللغات غير الإنجليزية.

(https://www.php.net/manual/en/ref.mbstring.php)

٢٦- عند تضمين قيم متغيرات داخل أوامر SQL في PHP من الأفضل حصرها جميعا بعلامتي اقتباس منفردتين لأنك مطالب بهذا عند تمرير قيم نصية strings، وهي كذلك مفيدة أمنيا حتى لقيم المتغيرات الرقمية.

مثلا: (في مواقع التواصل جعلت الكود في صورة)

$sql = "DELETE FROM pages WHERE id= . $id . ";

لا يتوفر وصف للصورة.

٢٥- موقع (https://caniuse.com) لمعرفة توافق المتصفحات مع أكواد #HTML أو #CSS أو #JavaScript أو #SVG أو غيرها.

٢٤- لرفع الصور لاستخدامها على موقعك يمكنك استخدام الخدمة المجانية الجميلة (https://suar.me) والتي أستخدمها شخصيا لرفع الصور على موقعي.

٢٣- موقع (https://devdocs.io/) أو برنامج (https://zealdocs.org/) لبحث توثيقات لغات البرمجة والمكتبات المختلفة بدون اتصال بالإنترنت.

٢٢- - تطبيق icons8، عشرات الآلاف من الأيقونات المجانية والتي لا تحتاج إلى اتصال بالإنترنت.

(https://icons8.com/app/).

٢١- موقع (https://techterms.com) أشبه بقاموس للمصطلحات التقنية باللغة الإنجليزية.

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

٢٠ - موقع skeleton.css لعمل grid system.

١٩ - قد تحتاج عند تصميمك للموقع وضع صورة افتراضية جاهزة placeholders. هذا الموقع سيفيدك في هذه المهمة (https://placeholder.com).

وإذا كنت من محبي القطط قد يعجبك هذا الموقع (http://placekitten.com).

١٨- قد تحتاج لتصفح موقع قد أُغلق. استخدم هذا الموقع (https://archive.org/web/) لأنه يعمل صورة snapshot للمواقع كل فترة. انسخ رابط الموقع وستجد له (صورة) محفوظة بحسب تاريخ التقاطها. مهم في توثيق المصادر حتى لو حذف الموقع المقال أو غيّره، ولاستعادة معلومات من المواقع المغلقة. ١٨- قد تحتاج لتصفح موقع قد أُغلق. استخدم هذا الموقع (https://archive.org/web/) لأنه يعمل صورة snapshot للمواقع كل فترة. انسخ رابط الموقع وستجد له (صورة) محفوظة بحسب تاريخ التقاطها. مهم في توثيق المصادر حتى لو حذف الموقع المقال أو غيّره، ولاستعادة معلومات من المواقع المغلقة.

١٧- موقع virustotal لفحص الروابط والملفات.

١٦- من الأفضل عند تخصيص أنظمة سابقة ومعقدة (ووردبريس نموذجا) أن تستخدم الدوال المعدّة من النظام ما أمكن ذلك؛ لكي توفر على نفسك الوقت وجهد تنقيح الأخطاء ولتسهيل التطوير بعد ذلك.

١٥- أحد المواقع المميزة للمبرمجين، موقع (https://searchcode.com)

للبحث في أكثر من ٧ مليون مشروع برمجي موزعة في Github و Bitbucket و Sourceforge وغيرها من المستودعات مفتوحة المصدر. ويمكن ترشيح النتائج بحسب اللغة البرمجية.

١٤- عند تنسيق الCSS من الأفضل العمل على class على الاعتماد على وسوم html، لأنه من الممكن أن تغير < h2 > إلى < h3 > إلى < p > وهذا سيؤدي إلى اضطراب التنسيق ولكن عند الاعتماد على class سيصبح أكثر مرونة عند التغيير. لذا، لا تكن كسولا واعمل كلاسات لكل عنصر تريد تنسيقه.

١٣- إضافة (Gossip Site Blocker) على جوجل كروم، لمنع بعض النتائج التي لا تريدها عند البحث في جوجل، بحسب النطاق (أي لا تظهر لك أي نتيجة من هذا الموقع) أو بحسب الصفحة وغيرها من المميزات.

الرابط: (http://bit.ly/google-results-omit).

١٢- موقع ظريف لمعرفة بعض الفروقات في التصميم وتجربة المستخدم

(https://cantunsee.space/)

١١- أسلوب كتابة أكواد php الشبيه بهذا

if (condition):

code//

else:

another code//

endif;

وهو ما يسمى Alternative syntax وهو متوفر في أوامر while و foreach و for. هذا الأسلوب مريح للعين خصوصا عند تداخل وسوم html.

استخدموه.

١٠- موقعان لاختيار ألوان متناسقة للمصمين ومبرمجي الواجهات: الأول من (أدوبي) ويستخدم دائرة الألوان، والثاني (صائد الألوان) للعديد من التوليفات الجاهزة .

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

ربما تحتوي الصورة على: ‏‏نص‏‏

٨- للتخلص من إزعاج بعض المواقع ذات التبويبات المنبثقة pop-ups وموانع (مانع الإعلانات) Ad Block Blocker، قد ينجح معك إلغاء JavaScript لهذه الصفحة من إعدادات المتصفح. هذه الإعدادات توجد في أقصى الرابط في اليسار في جوجل كروم وقد تجد شيئا مشابها في المتصفحات الأخرى.

٧- من الأشياء الجميلة ما يسمى Cheat Sheet، وهي عبارة عن ملخصات مكثفة لموضوع أو علم ما، تكون في صفحة أو صفحتين للمراجعة، وهي رائعة جدا للمواضيع التي تُنسى بكثرة. في هذا الموقع العديد من هذه الملخصات (http://www.cheat-sheets.org) وإذا لم تجد بغيتك فابحث في محرك البحث عن cheat sheet X حيث X هي الموضوع الذي تريد مرجعا له.

٦- موقع (http://youmightnotneedjs.com)، لبدائل وحيل برمجية يمكن عملها بCSS عوضا عن JavaScript.

٥- موقع (http://youmightnotneedjquery.com) يقدم بدائل لأكواد jQuery بأكواد JavaScript وقد تحتاجه لعدة أسباب: لتحسين الأداء بحيث تخفف حمل موقعك من مكتبة jQuery أو قد تكون تعمل على مشروع لا تحتويه هذه المكتبة.

٤- موقع (https://www.a11ymatters.com) موقع مميز لعمل مواقع مناسبة لجميع المستخدمين وخاصة (ذوي الاحتياجات الخاصة) لتحقيق قابلية وصول لأكبر قدر ممكن من الناس. لغته الإنجليزية واضحة وبسيطة وتعليماته مناسبة لأي مطور ويب مبتدئا كان أو متقدما. ولمحتوى أكثر عمقا طالع (https://a11yproject.com).

٣- مكتبة https://friconix.com/ للأيقونات، بديلة لfont awesome، تستخدم JavaScript و SVG فقط عكس font awesome، ولديهم خدمة عملاء محترمة جدا، طلبت منهم أيقونة معينة لإضافتها للمكتبة فردوا علي بعدها بيومين، وقد أضافوا هذه الأيقونة.

٢- حتى عند كتابة التعليقات < !-- some comment --! > داخل وسم < title > فإن التعليق يظهر في عنوان الصفحة ولا يُتعامل معه تعليقا وإنما يطبع كما هو، ولذلك عليك أن تضع التعليق إذا احتجته خارج الوسم.

١- تعلم مكتبة bulma، خفيفة وتشبه بوتستراب كثيرا وليس فيها ملفات JS، بل عليك تنفيذها بنفسك وهذا يزيد من سرعة موقعك لأنك ستستخدم pure JavaScript بدلا من jQuery. ويمكنك بالطبع استخدام jQuery إذا أردت.

هذا الرابط يعطي المكافئ لكل كلاس لبوتستراب في مكتبة بولما (Bulma (https://bulma.io/alternative-to-bootstrap/)