كثيرًا ما يبدو عالم البرمجة غامضًا ومعقدًا ومخيفًا. لكن البرمجة في الحقيقة ممتعة جدًا، وتفيدكم بطرق أكثر مما تتوقعون! أتحدث هنا من تجربتي في مسيرة برمجية امتدت نحو سنتين قبل بضع سنوات (وقد بدأت معظم معرفتي بعالم الـ front-end الحالي تتلاشى). ومع ذلك، ساعدتني مبادئ تعلّم بناء الأشياء ومنطقها كثيرًا في عملي الاحترافي مصممَ منتجات.

إذن نعم، عليكم أن تتعلموا البرمجة. بل يمكنكم أن تبدأوا بها هوايةً في وقت قصير! أعرف أن هذا لا يناسب الجميع، وأن عبارة "لم أوقّع على هذا" ستتردد في أذهانكم كثيرًا خلال الرحلة. لكن على الأقل سنعرف يقينًا هل كرهناها فعلًا، أم أن الفكرة نفسها هي ما أرهبنا من البداية، أليس كذلك؟

حسنًا، أقنعتني. من أين أبدأ (وبماذا)؟

التزموا بمحركات البحث التي تثقون بها. وسأضع لكم أيضًا روابط ودورات تعليمية مجانية لتبحثوا فيها بأنفسكم.

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

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

على أي حال، استعدوا للانطلاق!

الأساسيات

1. HTML وCSS

يسمّيها البعض بوابة الدخول إلى عالم البرمجة. والصفحة التي تقرؤونها الآن مبنية بكليهما. تخبر HTML المتصفح بما يجب عرضه، وتحدد CSS شكله. وهي على الأرجح أسهل أشكال البرمجة وأقربها إلى المبتدئين.

وستسمعون غالبًا عن Bootstrap، وهو إطار العمل الأكثر استخدامًا لبناء المواقع المتجاوبة (responsive). وقد يكون هو السبب الذي جعلكم تتعلمون نظام الشبكة (grid) أصلًا. باستثناء جزئه التفاعلي، فإن Bootstrap في الأساس مجموعة من اختصارات CSS القابلة للتخصيص (تُسمّى class)، يستدعيها المطورون لتنفيذ تصاميمكم.

كيف سيفيدني ذلك؟

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

من أين أبدأ؟

• جرّبوا دورات تطوير الويب المجانية على Codecademy. فيها محرر نصوص مدمج على الإنترنت وشرح وافٍ لطريقة عمل تطوير الويب. ويمكنكم حتى البدء بتعلّم JavaScript إن واصلتم ولم تستطيعوا التوقف!
• ولمن يتنقلون كثيرًا، نزّلوا تطبيق Mimo واندهشوا من أنكم تستطيعون تعلّم البرمجة على جوالكم. خذوها يا من تظنون أن العمل لا يكون إلا على جهاز لوحي أو حاسوب!
• ومن يريد التعرف على Bootstrap يمكنه تعلّم أساسياته عبر Bootstrap 4 Tutorial أو How to Use Bootstrap 4

ملاحظة: قد يشجعكم بعض المطورين على تعلّم SASS/SCSS. وهي معالجات مسبقة (preprocessors) تُخرج كود CSS منظمًا. شخصيًا لا أراها ضرورية للمبتدئين، فهي أقرب إلى أداة مساعدة لتطبيق الأنماط وتسهيل التعاون داخل فريق المطورين (وهذا ليس من اهتمامكم في هذه المرحلة تقريبًا).

هل بدأ الحماس؟ إذن لنكمل!

2. JavaScript وأطر العمل والمكتبات التي لا تتوقف عن التكاثر!

هل بحثتم يومًا عن سؤال في Sketch فوجدتم إجابات عن SketchUp؟ يشعر المطورون بالانزعاج نفسه حين يخلط الناس بين Java و JavaScript. لن أدخل في التفاصيل (أو في مقارنة طريفة)، لكن يكفي القول إن تعلّم JavaScript (JS) قد يكون أكثر فائدة لكم.

كيف سيفيدني ذلك؟

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

من أين أبدأ؟

• أنصحكم بمواصلة رحلتكم مع دورات تطوير الويب المجانية على Codecademy. ففيها قسم خاص بـ JavaScript يضم كل الأساسيات التي تحتاجونها لإضافة التفاعل إلى صفحة الويب.

إضافة: بعد أن تألفوا JavaScript أكثر، هل تعلمون أنكم تستطيعون أيضًا بناء إضافات Figma! (تعتمد على TypeScript، وهي لغة بُنيت امتدادًا لـ JS)

ملاحظة: خلال دراستكم، سيُذكر jQuery من حين لآخر. لا أنصح بالتعمق فيه كثيرًا. كان شائعًا جدًا في الماضي، أما اليوم فإن JavaScript والكثير من حزم Node.JS على NPM قادرة على أداء معظم ما يفعله jQuery

كان ذلك ممتعًا! ما التالي؟

3. التعمق في الـ Frontend (لمصممي الويب)

يمكنكم تعلّم المزيد عن:

• أطر عمل JavaScript مثل Vue.js (أو React إن أردتم أن تُدهشكم فوضى JSX)
• معالجات CSS المسبقة مثل Sass
• NPM و Webpack

كيف سيفيدني ذلك؟

ستمنحكم هذه الأدوات فهمًا أعمق لطريقة عمل مطوري الـ frontend اليوم.

من أين أبدأ؟

• لمعظم ما ذكرته توثيق وافٍ وشروح أساسية ستجدونها سهلة الفهم.
• وإن لم تفهموها جيدًا أو بدا لكم التوثيق غير مفهوم، فهناك كمّ هائل من الدروس على الإنترنت. اختاروا ما يناسب أسلوبكم في التعلم. أنا تعلمت جزءًا لا بأس به من JavaScript عبر Learn JavaScript

4. جنون التطبيقات الأصلية (لمصممي تطبيقات الجوال)

تعلّم لغة تطوير أصلية (native) لـ iOS وAndroid أمر صعب، ومفاجئ بقدر صعوبة إنتاج رسوم متحركة ثلاثية الأبعاد بعد إنهاء دورة في Photoshop. لكن لا تخافوا، فبعض هذه الدروس ممتاز لدرجة أن المبتدئين تمامًا يستطيعون فهم المنطق الذي تقوم عليه!

كيف سيفيدني ذلك؟

سواء اخترتم Swift أو Kotlin، فإن التطوير الأصلي سيعلمكم أساسيات البرمجة كائنية التوجه (OOP). قد يبدو الأمر مخيفًا في البداية، لكن مبادئ هذه الممارسات (مثل تعريف class واستخدام بنية Model-View-Controller (MVC)) ستفيدكم كثيرًا، لأن OOP شائعة جدًا في كثير من لغات البرمجة المعروفة، وتمنحكم فهمًا لطريقة عمل كل تطبيق في جوهره.

من أين أبدأ؟

• إن كنتم ستتعلمون Swift (لغة تطوير تطبيقات iOS) فأنتم محظوظون. تقدم Apple تطبيق Swift Playgrounds الجميل، وهو ممتع جدًا. لا يغني عن كتابة الكود فعليًا، لكني أذكره لتألفوا مفاهيم OOP. بعدها يمكنكم أن تأخذوا الأمر بجدية أكبر وتبحثوا عن دليل أكثر تفصيلًا مثل Intro to App Development with Swift على Apple Books لتبدأوا تطوير التطبيقات. وكلها مجانية. انطلقوا!
• أما Kotlin (Android) فيقدم بدوره دورات تدريبية مجانية جيدة للمبتدئين الجدد على عالم OOP وبناء التطبيقات. وأشجعكم أيضًا على تجربة دورات جيدة على الإنترنت إن وجدتم هذه الدروس صعبة الفهم.

لكني أريد المزيد!

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

لكن إن وجدتم الأمر ممتعًا ومثيرًا للاهتمام، فسأقدم لكم اقتراحات إضافية تحسبًا.

5. الـ Backend وأنظمة إدارة المحتوى CMS (أو JAMstack!)

نحن هنا نتجاوز ما تحتاجونه فعلًا. لكن إن كنتم ما زلتم مهتمين بـ 'التعمق الحقيقي' فأنصحكم بأن:

• تجرّبوا إطار عمل مثل WordPress أو Laravel. وأفضّل أن تدرسوا Laravel تحديدًا، فهو ممتع فعلًا وأكثر مرونة عمومًا.
• أو تبحثوا عن مولّد مواقع ثابتة مثل Hugo. افهموا أساسيات Jamstack | JavaScript, APIs, and Markup وجرّبوا Headless CMS، لتبنوا في وقت قصير موقعكم الثابت الخاص، مثل مدونة أو معرض أعمال تصميمي!

...لكن انتظروا، إن كنتم تحبون المغامرة، فما رأيكم بتعلّم NodeJS والانطلاق بلا حدود مع React. أو التقدم نحو إطار عمل Ruby on Rails (بلغة Ruby) ثم التقدم للعمل في OOZOU؟ /غمزة

6. قواعد البيانات (وتجربة النشر)

هل سمعتم مطورين يقولون إنهم 'full-stack'؟ معرفة برمجيات العميل (frontend) وبرمجيات الخادم (backend) معًا هي ما يعنيه ذلك عادة. وحين تتقنون أساسيات عمل قواعد البيانات، ستتمكنون من بناء تطبيقكم أو موقعكم ونشره للعامة (deploy) بسهولة.

أنصحكم بالبدء بالبحث عن لغات الاستعلام (Query Languages) الشائعة لتتعلموا عن SQL أو NoSQL. اعرفوا الفروق الجوهرية بينهما واختاروا إحداهما (أو تعلموا الاثنتين!). ويمكنكم أيضًا التعمق في مفهوم RESTfulAPI وتجربة GraphQL لتوسيع مهاراتكم. ويمكنكم أيضًا تجاوز كل ذلك والبحث مباشرة عن طريقة لنشر أعمالكم للعامة (deploy). فالكثير من مواقع المستودعات والاستضافة (SaaS) مثل Github و Heroku، بل وAmazon Web Services (AWS) تقدم باقات خدمات سحابية مجانية (ومدفوعة) تساعدكم على نشر موقعكم بسرعة وسهولة عبر بضع خطوات.

هذا كل ما لدي من نصائح، لقد وصلتم الآن إلى المياه المفتوحة!

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

لكن تعلّم شيء جديد كل يوم أمر ممتع ومثير، ويجعلكم تعودون طلبًا للمزيد! وأنتم تعرفون في قرارة أنفسكم أن التعلم عادة جيدة دائمًا في عصرنا هذا! وكما قال Steve Jobs ذات مرة، لا تعرفون أبدًا متى تتصل كل هذه النقاط في النهاية!

واصلوا البرمجة يا زملائي المصممين!