سنتناول في هذه المقالة بقليلٍ من التفصيل شرح خاصّيّة هامّة من خواصّ أوراق الأنماط المُتتالية CSS وهي "ظلال النصّ" text-shadows، وتجدرُ الإشارة إلى أنه يوجد خاصّيّة مُشابهة لهذه الخاصّيّة وهي "ظلّ الصندوق" box-shadow، والخاصّيّتان مُعرفتان في وحدتين مختلفتين في المعايير القياسية لـ W3C على الرُغم من …
في سلسلة من عدة أجزاء سنناقش موضوعًا نظريًّا يُعتبر من أساسيّات هندسة البرامج، وهو أنماط التصميم (Design Patterns)، وسنعتمد لغة JavaScript في نقاشنا لتصاعد شعبيّتها ومرونتها التي تسمح لنا ببناء مشاريعنا وفق أنماط متنوّعة مما سيُسهّل علينا شرح موضوع السّلسلة نمط المُشيِّد (Constructor) يشيع استخدام ا…
في سلسلة من عدة أجزاء سنناقش موضوعًا نظريًّا يُعتبر من أساسيّات هندسة البرامج، وهو أنماط التصميم (Design Patterns)، وسنعتمد لغة JavaScript في نقاشنا لتصاعد شعبيّتها ومرونتها التي تسمح لنا ببناء مشاريعنا وفق أنماط متنوّعة مما سيُسهّل علينا شرح موضوع السّلسلة ما هي أنماط التصميم؟ عندما تبدأ بتعلّم الب…
إنّ أي مُطوّر أو مُصمّم يُحب كتابة الشيفرة البرمجية، ستكون تقسيمات الصفحة layouts المُعتمدة على أوراق الأنماط المُتتالية هي صميم وجوهر عمله. فيما قد تكون هذه المقالة مُراجعة للبعض، أو حتّى تصحيح بعض المفاهيم للبعض الآخر، سيتمّ تناول خاصّيّة التَمَوْضُع position، وكيفيّة استخدامها في تصميم تقسيمات صف…
في الجزء الأول من هذا الدرس، قمنا بتغطية كيفية إعداد بيئة تطوير محلية خاصة بك، استعمال إطار عمل CSS وإنشاء منشورات للمدونة. في هذا الجزء سنضيف بعض اللمسات النهائية للصفحة الرئيسية، إضافة شيء من التفاعل، وأخيرًا، نشر المدونة على الويب. فهرس الجزء الثاني من هذا الدرس: مدى التقدّم لحد الآن التصفيح (p…
لعدة سنوات مضت، كنت أعمل على تطبيق كبير ومعقد. كان مشروعًا عتيقًا نوعا ما: مصممون ومطورون كُثُر أتوا وذهبوا، وكل واحدٍ منهم قام بإضافة جزء جديد إلى التطبيق مترامي الأطراف. عندما التحقت بالفريق، كانت الـ CSS كبيرة، والأنماط كانت متنوعة، وأخذت جهدًا كبيرًا لاكتشاف أي شيء له فائدة من استخدامه. خلال هذا…
كنا قد ذكرنا في الدرس الأول لهذه السلسلة أنّ هناك مجموعة من الطرق يتيحها ووردبريس لحفظ واسترجاع البيانات ومن ضمن هذه الطرق استخدام الواجهة البرمجية للخيارات Options API التي يوفرها ووردبريس وهي الطريقة الأنسب لحفظ الخيارات العامة للإضافة في كثير من الأحيان. في هذا المقال سنلقي الضوء على هذه الطريقة …
هناك اعتقاد خاطئ بين العديد من مطوّري الويب أن CSS هي الطريقة الوحيدة للقيام بالتحريك Animations. برزت CSS بقوة كأكثر نظام مُدلّل خلال سنوات وحتى الآن، وتحدّث المطوّرون باستمرار حول متانتها وتوافقها مع الهواتف. CSS جيدة لكنها ليست أفضل من جافاسكربت. هناك بعض الأساطير حول CSS قادت المطوّرين بشكل استب…
لربما لاحظت مُؤخّرا أنّ CSS في تطور مستمر، وإلى الأفضل بالطبع. فمن جهة لدينا العديد من المُميّزات الجديدة (مثل القواعد الجديدة @rules وأشباه الأصناف المطورة) ونظم بناء الصّفحات وتقسيمها (مثل flexbox و Grid system). ومن جهة أخرى لدينا بعض الأدوات التي تُتيح لنا التّلاعب بالأشكال والصور مباشرة من المت…
كما ذكرنا في الدرس السابق (مدخل إلى برمجة إضافات ووردبريس) من هذه السلسلة فإن الخطّافات تعد من أهم الخصائص التي يوفرها ووردبريس والتي جعلته مرنًا flexible وقابل للتمدد extensible بصورة قل أن تجد لها نظيرًا في برمجيات الويب حيث يعتمد على توفير نقاط ربط تمكن المطورين من تنفيذ الدّوال التي يريدونها أثن…
هُناك العديد مِن الخَدَمات التي توفر لك مُدوَنة خاصة بِك. لكن بالمُقابل يحتفظون بمحتواك ويستعملونه في ما يخدمهم. لعلّ الكثير من المدونين -قد تكون أنت منهم- يريدون الخروج من هذا القيْد، ويحبذّون إدارة محتواهم بأنفسهم والتحكم به على مَوْقِعهم الخاص. إن كنت كذلك، فتنصيبُ مُدَونة تَملِك أنتَ مُحتواها وم…
مقدمة من أهم أسباب انتشار ووردبريس وسيطرته على سوق أنظمة إدارة المحتوى هو الكم الهائل من إضافاته المجانية والمدفوعة والتي تقدم العديد من الخصائص والمميزات والتحسينات الإضافية التي لا تتوفر بصورة افتراضية في قلب ووردبريس WordPress Core. في هذا المقال سنتعرف سوّيًا على أساسيات إنشاء إضافة لوورد…
تُعتبر خاصيّة الطوفان float property من مصادر القوّة لأي مطوّر أو مُصمّم يستخدم تِقنيّات HTML وCSS. ويُؤدّي عدم الفهم الصحيح لآلية عمل هذه الخاصيّة إلى بعض التِباس في كيفية التعامُل معها. ارتبطت هذه الخاصيّة في الماضي مع أخطاء المُتصفّحات ومشاكل التوافقية، أما الآن فالتعامُل مع خاصيّة الطوفان أصبح م…
التفكيك Destructuring ذكرنا في الجزء السابق أن اهتمامًا كبيرًا أُوليَ لتسهيل كتابة الشفرة وقراءتها في ECMAScript 6، والإسناد بالتفكيك (Destructuring assignment) لا يخرج عن هذا السياق، وهو ليس بالمفهوم الجديد في عالم البرمجة، فهو معروف في Python وفي Ruby. بعيدًا عن تعقيدات المصطلحات، إليك هذا المثال:…

ما هو Bower؟

بواسطة عمار العقاد، في سير العمل،

تتألّف صفحات الويب التي نراها على المتصفح من مكوِّنات متعددة؛ كأطر العمل والمكتبات وملفات JavaScript وCSS وغيرها. ‏Bower‏ أداة لإدارة هذه المكوِّنات (أو الحزم) المُخصّصة للويب، كالتثبيت والتحديث والحذف وغيرها من عمليات الإدارة. يشبه Bower إلى حد كبير الأدوات المخصّصة لإدارة الحزم في لغات برمجة آخرى،…
مررنا جميعًا بموقف كهذا: بضع سطور JavaScript كُتبت لتؤدّي وظيفة صغيرة ثمّ تضخمت مع الوقت لتبلغ بضع عشرات من السطور، ثم مئات السطور... أصبحت تقبل معاملات أكثر، وتختبر شروطًا أكثر، ثم أتى ذلك اليوم: تقرير بعلّة، التطبيق لا يعمل كما ينبغي! وحينئذ يكون فكّ غموض هذه السطور المتشابكة مسؤوليّتنا. مع تزايد …
سنتحدّث في هذه المقالة عن جزءٍ مهمٍّ في CSS3، والذي يعمل بشكلٍ مُنسجمٍ مع HTML5 وبالتحديد مع النماذج (forms). يَشترط هذا المقال معرفة مُسبقة بلغة HTML وCSS ومبادئ JavaScript، لن يكون الموضوع صعبًا وسنتناوله بشكلٍ مُبسط. نبذة عن الأصناف الزائفة لكي لا يلتبس عليك الأمر أودُ الإشارة إلى أنّ كلمة pseudo…
في الجزء السادس والأخير سوف نتحدّث عن مواضيع مُكمّلة للإطار نوعًا ما، والّتي رُبما تستطيع الاستغناء عنها، ولكنّك صدّقني لن تفعل، لأنّ هذه الكماليّات هي ما تُميز إطار العمل Foundation عن غيره من أُطر العمل. المُسوّي (Equalizer) المُسوّي هو إضافة JavaScript صغيرة تُساعدك في تسوية التنسيق بين حاويتين (…
قد وصلت إلى الجزء الرابع، وهذا يعني أنّ السلسلة قد راقت لك -أرجو الله ذلك- في الجزء السابق تعرفنا على نظام التنقل الخاص بالإطار، وفي هذا الجزء سوف نتعرف على الأزرار وأنواعها، والنماذج وملحقاتها، وكيف سوف نستفيد منها في متجرنا. الأزرار (Buttons) يَملك Foundation مجموعة من الأزرار الجذابة، لإنشاء زر …
الجزء الخامس والسادس هما أفضل أجزاء السلسلة بالنسبة لي، وفيهما سوف نتعرّف على مواضيع حساسة جدًا في استخدامنا لإطار العمل Foundation، وسنتعرف على آليّة التعامل مع الصور والفيديو وسوف نتحدّث عن أساليب عرض النصوص والعناوين التي يُقدمها Foundation وغيره من المواضيع. الصور والفيديو (Images and Videos) ال…