تطوير الويب
كلّ ما تراه في موقعٍ أو تطبيقٍ وتلمسه: الزرّ الذي تنقره، والقائمة التي تنسدل، والصورة التي تكبر، والنموذج الذي تملؤه. هذا كلّه من صنع «مطوّر الواجهات الأمامية» (Front-End Developer). فالويب نصفان: نصفٌ تراه، ونصفٌ خفيٌّ يعمل خلف الستار، ومطوّر الواجهات الأمامية هو من يبني النصف المرئيّ، الذي تتعامل معه مباشرةً. هذا المقال يفتح سلسلة «تطوير […]
تطوير الويب
الصفحة التي تقرؤها الآن «صفحة ويب» واحدة. والمدوّنة كلّها التي تنتمي إليها هذه الصفحة «موقع ويب». الفرق بينهما أساسٌ يخلط فيه كثيرون، ومنه يبدأ بناء أيّ شيءٍ على الويب. في المقال السابق تعرّفتَ على مَن يبني هذا (مطوّر الواجهات الأمامية)؛ والسؤال هنا: ما الذي يبنيه فعلًا؟ في هذا المقال تتعرّف على اللبنات الأساسية: ما صفحة […]
تطوير الويب
في المقال السابق عن الفرق بين الصفحة والموقع رأيتَ أن صفحة الويب مجرّد ملفّاتٍ نصّية: مستند HTML، وملفّات تنسيقٍ وبرمجة، وصور. لكنّ ما تراه ليس نصًّا، بل صفحةٌ ملوّنةٌ منظّمةٌ تتفاعل معك. مَن يحوّل تلك الملفّات الباردة إلى هذه التجربة الحيّة؟ المتصفّح. هو أكثر برنامجٍ تستعمله في يومك، وأعقدُ ممّا تظنّ بكثير. وهو لمطوّر الويب […]
تطوير الويب
وصلتَ إلى هذه الصفحة على الأرجح بنقرةٍ على رابط. ذلك الرابط هو أبسط عنصرٍ في الويب وأعمقها أثرًا. بل إن «الويب» (Web)، أي «الشبكة العنكبوتية»، حمل هذا الاسم لأن الروابط تصل صفحاته المتناثرة بعضها ببعضٍ في كيانٍ واحدٍ متّصل. في المقالات السابقة عرفتَ الصفحة والموقع، ورأيتَ كيف يعرضهما المتصفّح؛ وفي هذا المقال يأتي دور العنصر […]
تطوير الويب
قبل أن تكتب سطر شيفرةٍ واحدًا، تحتاج إلى تجهيز «ورشتك»: الأدوات التي ستعمل بها كل يوم. والخبر الجيّد أن أكثرها مجّانيٌّ، وأنك لا تحتاج جهازًا خارقًا للبدء. في المقالات السابقة عرفتَ ما الويب وكيف يعمل؛ وهنا ينتقل بك المسار من الفهم إلى الاستعداد للبناء. سأعرض في هذا المقال ما تحتاجه فعلًا: العتاد المناسب (دون مبالغة)، […]
تطوير الويب
ستقضي أمام محرّر الأكواد ساعاتٍ أطول ممّا تقضيه أمام أيّ أداةٍ أخرى في عملك. هو طاولتك ومطرقتك ومفكّك معًا، والمكان الذي تكتب فيه كل سطرٍ وتقرأ فيه كل خطأ. ولهذا فإن إتقانه قبل أن تكتب أوّل سطر HTML ليس ترفًا، بل هو ما يفرّق بين من يصارع أداته كل يومٍ ومن تطيعه. في المقال السابق […]
تطوير الويب
خلف الواجهة الجميلة التي تنقر فيها على الأيقونات وتسحب النوافذ، يكمن عالمٌ آخر أكثر قوّة: شاشةٌ سوداء ومؤشّرٌ وامض. هذا هو عالم «الطرفية» (Terminal) أو «سطر الأوامر» (Command Line). يبدو مخيفًا أو قديمًا للمبتدئ، لكنّه في الحقيقة أقوى أداةٍ وأكفؤها في حزام أدوات أيّ مطوّرٍ محترف. مرّت بك هذه الأداة مرارًا: في مقال تجهيز بيئة […]
تطوير الويب
جهّزت بيئتك، وأتقنت محرّرك، وصارت الطرفية لغةً تحادث بها جهازك. آن أن تكتب أوّل شيءٍ حقيقيّ. وأوّل ما تكتبه في الويب دائمًا هو HTML: اللغة التي تبني هيكل كل صفحةٍ رأيتها في حياتك. هذا المقال يعطيك فهمًا متينًا لأساسياتها، ثمّ تبني به أوّل صفحةٍ لك من الصفر. سأشرح ما HTML ودورها، وكيف يتركّب الوسم والعنصر […]
تطوير الويب
في المقال السابق بنيت بـHTML هيكلًا عظميًّا متينًا لأوّل صفحةٍ لك: محتوًى منظّم، لكن بلا حياةٍ ولا جمال. الآن تنتقل من دور «المهندس المعماريّ» إلى دور «مصمّم الديكور»، فتكسو هذا الهيكل بالألوان والخطوط والتخطيط. هذه وظيفة CSS: اللغة المسؤولة عن كل ما تراه جميلًا على الويب. في هذا المقال تأخذ ملفّ index.html نفسه الذي أنشأته، […]
تطوير الويب
في مقال CSS صمّمت صفحتك، لكنّك صمّمتها لشاشةٍ واحدة: شاشتك أنت. والمستخدمون يأتون من هاتفٍ بحجم ستّ بوصاتٍ ومن شاشةٍ بحجم ستّين بوصة وكل ما بينهما. فكيف يبدو موقعٌ واحدٌ رائعًا على الجميع؟ الجواب هو «التصميم المتجاوب» (Responsive Web Design). تخيّل الموقع التقليديّ لوحةً زيتيةً جميلةً بأبعادٍ ثابتة: يبدو رائعًا على حائطه الصحيح (شاشة المكتب)، […]
تطوير الويب
بنيت الهيكل العظميّ بـHTML، وكسوته بـCSS، فصار مشروعك جميلًا لكنه ثابتٌ صامتٌ كتمثال. آن أن تبثّ فيه الحياة، وأن تمنحه «جهازًا عصبيًّا وعقلًا» يستجيب للمستخدم. هذا دور JavaScript: اللغة التي تحوّل صفحات الويب من مستنداتٍ ثابتةٍ إلى تطبيقاتٍ تفاعلية. وفي هذا الدليل تأخذ مشروعك ذاته وتضيف إليه أوّل وظيفةٍ ديناميكية. ما لغة JavaScript؟ خلافًا لـHTML […]
تطوير الويب
في مقال جافاسكربت صار مشروعك كيانًا حيًّا يتفاعل مع المستخدم، فصارت له قيمةٌ حقيقية. ومع القيمة تأتي أسئلةٌ احترافية: ماذا لو أردت تجربة فكرةٍ جريئةٍ دون أن تخشى تدمير عملك؟ ماذا لو أخطأت وتمنّيت لو تعود بالزمن إلى إصدارٍ كان يعمل؟ وكيف تعرض تطوّر مهاراتك لأصحاب العمل لاحقًا؟ هنا يتوقّف دور الحرفيّ ويبدأ دور المهندس. […]
تطوير الويب
كيف يعرف تطبيق الطقس على هاتفك درجة الحرارة في مدينتك الآن؟ وكيف يعرض موقع حجز طيرانٍ أسعارًا حيّةً من عشرات الشركات في ثوانٍ؟ الجواب كلمةٌ تحكم العالم الرقميّ: «واجهة برمجة التطبيقات» (API). حتى الآن بنيتَ موقعًا يعمل كـ«جزيرةٍ» مستقلّة بـHTML وCSS وجافاسكربت. لكنّ قوّة الويب الحديث ليست في الجزر المعزولة، بل في «الجسور» التي تربطها، […]
حتى الآن كتبتَ جافاسكربت «خالصةً» يفهمها المتصفّح مباشرةً: تحفظ الملفّ، تحدّث الصفحة، فترى أثره. لكنّك إن فتحت مشروع موقعٍ حديثٍ حقيقيٍّ وجدت أشياء غريبة: ملفّ package.json، ومجلّد node_modules الضخم، وأوامر مثل npm run build، وملفّاتٍ لا يفتحها المتصفّح كما هي. بين الشيفرة التي يكتبها المطوّر اليوم والشيفرة التي يفهمها المتصفّح خطوةٌ خفيّةٌ اسمها «خطوة البناء» […]
وعدتُك بهذا الموضوع مرّاتٍ: في مقال مطوّر الواجهات، وفي مقال جافاسكربت، وأخيرًا في مقال أدوات البناء. الآن حان وقته. «أطر عمل جافاسكربت» (JavaScript Frameworks) هي ما يبني به أكثر الويب الحديث: من فيسبوك وإنستغرام إلى لوحات التحكّم والتطبيقات التي تستعملها يوميًّا. لكن قبل أسمائها اللامعة (React وVue وAngular)، يجب أن تفهم المشكلة التي وُجدت لتحلّها، […]
تطوير الويب
تستعمل كل يومٍ عشرات التطبيقات والمواقع. بعضها تشعر معه بالسهولة والمتعة، كأنه «يفهمك» ويعمل كالسحر؛ وبعضها يحبطك فتصطدم بالعقبات وتغادر بسرعة. ما الفرق؟ ليس حظًّا ولا صدفة، بل «التصميم». وهذا السحر الخفيّ نتاج علمٍ دقيقٍ وفنٍّ عميقٍ يجتمعان في مصطلحين كثيرًا ما يُخلَط بينهما: «واجهة المستخدم» (UI) و«تجربة المستخدم» (UX). هذا المقال يفكّ الاشتباك بينهما، […]
تطوير الويب
إلى الآن سلكتَ مسار الحرفيّ المتقن: بنيتَ الموقع لبنةً لبنةً بـHTML وCSS وجافاسكربت، فصار لك فهمٌ عميقٌ لكيفية عمل الويب. لكنّ سؤالًا احترافيًّا يطرح نفسه: هل تبني المنزل بنفسك من الأساس كل مرّة؟ الجواب: لا. المطوّر المحترف ليس فقط من يتقن الأدوات اليدوية (الشيفرة)، بل من يعرف متى يستعمل «الآلات المتخصّصة» (الأنظمة الجاهزة) لينجز بكفاءةٍ […]
تطوير الويب
في المقال السابق، «أنظمة CMS وأدوات بناء المواقع»، رأيتَ أن المحترف من يختار الأداة المناسبة للمهمّة المناسبة. والآن أتناول الأداة الأكثر مرونةً وشيوعًا: ووردبريس، الذي يشغّل أكثر من أربعين في المئة من مواقع الويب كلّها.[3] تعلّمتَ أن تبني «محرّك السيّارة» من الصفر، وهو ما يمنحك فهمًا عميقًا للميكانيكا؛ والآن تتعلّم العمل مع المحرّك الأكثر موثوقيةً […]