اذهب إلى المحتوى
تعتبر الأزرار من أهم العناصر المستخدمة في صفحات الويب لذا فقد اهتم بها إطار العمل Bootstrap وأعطاها خصائص كثيرة ومتعددة، تستطيع تكوين الأزرار باستخدام الوسم <button></button> أو الوسم <a></a>.فيما يلي …

لا تكرّر نفسك (DRY): أعد استخدام دوالّ Sass التي كتبتها

بواسطة محمد فواز عرابي، في Sass،

لعلّ من أقوى ميّزات Sass الدّوالّ (mixins) ﻷنّها تسمح بتحديد نمط مُتكرِّر وعزله في صورة قطعة برمجيّة يمكن إعادة استخدامها مرارًا. مثال ذلك: عزل كلّ الخصائص المسؤولة عن تنسيق زرّ في صفحة الويب ثمّ —بدل الحاجة لتذكّر كل هذه الخ…

تعرّف على Bootstrap 3 ونظامه الشّبكي (Grid System)

بواسطة Ibrahim Mansour Al-Shalafi، في إطار عمل Bootstrap،

إذا أردت أن تُصمّم موقعًا مُتجاوبًا يسهل تصفّحه أيّا كان المُتصفّح المُستخدم ونظام التّشغيل، فإما أن تختار الطريق الأول والمُتمثّلة في القيام بكل كبيرة وصغيرة بنفسك، أو أن تسلك طريقًا مُختصرة عبر الاعتماد على إطار عمل HTML/CS…

الدليل العملي لظلال الخطوط (text shadow) في CSS

بواسطة Mohamad Ibrahim3، في CSS،

سنتناول في هذه المقالة بقليلٍ من التفصيل شرح خاصّيّة هامّة من خواصّ أوراق الأنماط المُتتالية CSS وهي "ظلال النصّ" text-shadows، وتجدرُ الإشارة إلى أنه يوجد خاصّيّة مُشابهة لهذه الخاصّيّة وهي "ظلّ الصندوق" box-shadow، والخاصّي…
في سلسلة من عدة أجزاء سنناقش موضوعًا نظريًّا يُعتبر من أساسيّات هندسة البرامج، وهو أنماط التصميم (Design Patterns)، وسنعتمد لغة JavaScript في نقاشنا لتصاعد شعبيّتها ومرونتها التي تسمح لنا ببناء مشاريعنا وفق أنماط متنوّعة مما …

أنماط التصميم في JavaScript: الوحدات

بواسطة محمد فواز عرابي، في جافاسكربت،

في سلسلة من عدة أجزاء سنناقش موضوعًا نظريًّا يُعتبر من أساسيّات هندسة البرامج، وهو أنماط التصميم (Design Patterns)، وسنعتمد لغة JavaScript في نقاشنا لتصاعد شعبيّتها ومرونتها التي تسمح لنا ببناء مشاريعنا وفق أنماط متنوّعة مما …

أساسيّات التَمَوْضُع على صفحات الويب (CSS Positioning 101)

بواسطة Mohamad Ibrahim3، في CSS،

إنّ أي مُطوّر أو مُصمّم يُحب كتابة الشيفرة البرمجية، ستكون تقسيمات الصفحة layouts المُعتمدة على أوراق الأنماط المُتتالية هي صميم وجوهر عمله. فيما قد تكون هذه المقالة مُراجعة للبعض، أو حتّى تصحيح بعض المفاهيم للبعض الآخر، سيتم…

مدونتك الخاصة باستعمال Jekyll - الجزء الثاني

بواسطة وليد زيوش، في لغة روبي،

في الجزء الأول من هذا الدرس، قمنا بتغطية كيفية إعداد بيئة تطوير محلية خاصة بك، استعمال إطار عمل CSS وإنشاء منشورات للمدونة. في هذا الجزء سنضيف بعض اللمسات النهائية للصفحة الرئيسية، إضافة شيء من التفاعل، وأخيرًا، نشر المدونة ع…

إنشاء دليل الأنماط Style Guides لموقع أو تطبيق ويب

بواسطة Ibrahim Mansour Al-Shalafi، في CSS،

لعدة سنوات مضت، كنت أعمل على تطبيق كبير ومعقد. كان مشروعًا عتيقًا نوعا ما: مصممون ومطورون كُثُر أتوا وذهبوا، وكل واحدٍ منهم قام بإضافة جزء جديد إلى التطبيق مترامي الأطراف. عندما التحقت بالفريق، كانت الـ CSS كبيرة، والأنماط كا…
كنا قد ذكرنا في الدرس الأول لهذه السلسلة أنّ هناك مجموعة من الطرق يتيحها ووردبريس لحفظ واسترجاع البيانات ومن ضمن هذه الطرق استخدام الواجهة البرمجية للخيارات Options API التي يوفرها ووردبريس وهي الطريقة الأنسب لحفظ الخيارات ال…

أيّهما أفضل للتحريك Animations؟ جافاسكربت أم CSS؟

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

هناك اعتقاد خاطئ بين العديد من مطوّري الويب أن CSS هي الطريقة الوحيدة للقيام بالتحريك Animations. برزت CSS بقوة كأكثر نظام مُدلّل خلال سنوات وحتى الآن، وتحدّث المطوّرون باستمرار حول متانتها وتوافقها مع الهواتف. CSS جيدة لكنها…

خفايا CSS المُملّة التي يجب عليك الإلمام بها

بواسطة نذير صغير، في CSS،

لربما لاحظت مُؤخّرا أنّ CSS في تطور مستمر، وإلى الأفضل بالطبع. فمن جهة لدينا العديد من المُميّزات الجديدة (مثل القواعد الجديدة @rules وأشباه الأصناف المطورة) ونظم بناء الصّفحات وتقسيمها (مثل flexbox و Grid system). ومن جهة أخ…
كما ذكرنا في الدرس السابق (مدخل إلى برمجة إضافات ووردبريس) من هذه السلسلة فإن الخطّافات تعد من أهم الخصائص التي يوفرها ووردبريس والتي جعلته مرنًا flexible وقابل للتمدد extensible بصورة قل أن تجد لها نظيرًا في برمجيات الويب حي…

مدونتك الخاصة باستعمال Jekyll - الجزء الأول

بواسطة وليد زيوش، في لغة روبي،

هُناك العديد مِن الخَدَمات التي توفر لك مُدوَنة خاصة بِك. لكن بالمُقابل يحتفظون بمحتواك ويستعملونه في ما يخدمهم. لعلّ الكثير من المدونين -قد تكون أنت منهم- يريدون الخروج من هذا القيْد، ويحبذّون إدارة محتواهم بأنفسهم والتحكم ب…
مقدمة من أهم أسباب انتشار ووردبريس وسيطرته على سوق أنظمة إدارة المحتوى هو الكم الهائل من إضافاته المجانية والمدفوعة والتي تقدم العديد من الخصائص والمميزات والتحسينات الإضافية التي لا تتوفر بصورة افتراضية في قلب ووردبريس …
تُعتبر خاصيّة الطوفان float property من مصادر القوّة لأي مطوّر أو مُصمّم يستخدم تِقنيّات HTML وCSS. ويُؤدّي عدم الفهم الصحيح لآلية عمل هذه الخاصيّة إلى بعض التِباس في كيفية التعامُل معها. ارتبطت هذه الخاصيّة في الماضي مع أخطا…
التفكيك Destructuring ذكرنا في الجزء السابق أن اهتمامًا كبيرًا أُوليَ لتسهيل كتابة الشفرة وقراءتها في ECMAScript 6، والإسناد بالتفكيك (Destructuring assignment) لا يخرج عن هذا السياق، وهو ليس بالمفهوم الجديد في عالم البرمجة، …

ما هو Bower؟

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

تتألّف صفحات الويب التي نراها على المتصفح من مكوِّنات متعددة؛ كأطر العمل والمكتبات وملفات JavaScript وCSS وغيرها. ‏Bower‏ أداة لإدارة هذه المكوِّنات (أو الحزم) المُخصّصة للويب، كالتثبيت والتحديث والحذف وغيرها من عمليات الإدار…

كتابة JavaScript يسهل اختبارها

بواسطة محمد فواز عرابي، في جافاسكربت،

مررنا جميعًا بموقف كهذا: بضع سطور JavaScript كُتبت لتؤدّي وظيفة صغيرة ثمّ تضخمت مع الوقت لتبلغ بضع عشرات من السطور، ثم مئات السطور... أصبحت تقبل معاملات أكثر، وتختبر شروطًا أكثر، ثم أتى ذلك اليوم: تقرير بعلّة، التطبيق لا يعمل…
سنتحدّث في هذه المقالة عن جزءٍ مهمٍّ في CSS3، والذي يعمل بشكلٍ مُنسجمٍ مع HTML5 وبالتحديد مع النماذج (forms). يَشترط هذا المقال معرفة مُسبقة بلغة HTML وCSS ومبادئ JavaScript، لن يكون الموضوع صعبًا وسنتناوله بشكلٍ مُبسط. نبذة …
×
×
  • أضف...