بناء آلة اقتباسات عشوائية: رحلة تحسين التصميم والوظائف

مقدمة: إعادة ابتكار آلة الاقتباسات العشوائية

لم أكن راضياً تماماً عن محاولتي الأولى لبناء مولد اقتباسات عشوائية (Random Quote Generator). لقد كان تصميمه قبيحاً، وكانت الاقتباسات طويلة جداً، لذا لم أزعج نفسي بتطبيق وظيفة التغريد (tweet functionality)؛ لم يكن لذلك أي معنى حينها. بعد انتهائي من مشروع ساعة بومودورو (Pomodoro Clock Project)، شعرت برغبة قوية في إعادة النظر في آلة الاقتباسات العشوائية (Random Quote Machine) الخاصة بي والبدء من جديد بأسلوب مختلف. كنت أرغب في تصميم أكثر جاذبية، مع بعض الرسوم المتحركة (animations). كذلك، راودتني فكرة وضع الاقتباسات في فئات مختلفة، بحيث يتمكن المستخدمون من عرض الاقتباسات من فئاتهم المفضلة.

المنطق البرمجي (Logic)

استقررت على ثماني فئات للاقتباسات وجمعت 25 اقتباساً لكل فئة. كانت كل فئة عبارة عن مصفوفة من الكائنات (array of objects) تحتوي على خاصيتي quote و author، مما يسهل استرجاع كل اقتباس. ثم أنشأت دالة لوضع الاقتباسات في مستند HTML بمجرد النقر على زر الاقتباس التالي (next quote button)، ودالة مشابهة لزر الاقتباس السابق (previous quote button). إذا نظرت إلى الكود، ستلاحظ أن الاقتباسات لا يتم إنشاؤها عشوائياً على الإطلاق، بل تتكرر من الأول إلى الأخير ثم تعود مرة أخرى. كان هذا خياراً تصميمياً متعمداً اتخذته.

التصميم المرئي (Design)

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

بناء الهيكل والتخصيص

لطالما استخدمت قالب Skeleton CSS boilerplate كلما أردت إنشاء تخطيط قائم على الشبكة (grid based layout)، لذا واصلت استخدامه في هذا المشروع أيضاً. لكن هذه المرة، استخدمت إصدار Sass الذي سهل تغيير بعض المتغيرات (variables) وتخصيصه قليلاً دون المساس بالملفات الأصلية. بمجرد الانتهاء من ذلك، بدأت العمل على تصميم الصفحة الرئيسية (landing page). في ذهني، أردت شبكة 2x4 grid مع بطاقات (cards) لكل قسم وعنوان رئيسي (headline) في الأعلى. كان ذلك سهلاً بما فيه الكفاية، وهكذا أصبحت شبكتي جاهزة.

صفحة الاقتباسات والتفاعلات

الخطوة التالية كانت معرفة كيفية تصميم صفحة الاقتباسات واستخدام الرسوم المتحركة (animations) للتبديل بين الصفحتين. استغرقت صفحة الاقتباسات وقتاً أطول قليلاً لإنهائها. كان لدي شريط تنقل (navigation bar) في الأعلى للتبديل بين الأقسام، وصندوق (box) في المنتصف حيث ستُعرض الاقتباسات. وكانت الأزرار لعرض الاقتباسات في الأسفل.

فكرة خطرت ببالي في هذه المرحلة هي تغيير صورة الخلفية (background image) مع انتقال المستخدم بين الأقسام. كان من المفترض أن تتوافق صورة الخلفية مع الصورة المميزة في البطاقات على الصفحة الرئيسية. أردت أيضاً أن يكون التغيير سلساً مع رسوم متحركة خفية، لذا استخدمت خاصية CSS transition property لهذا الغرض، وقد عملت بشكل جيد على متصفح Chrome، لكنني لم أتمكن من جعلها تعمل على متصفح Firefox.

ربط الصفحات بالرسوم المتحركة

بمجرد الانتهاء من كلا التخطيطين، حان الوقت لربط الصفحتين بالرسوم المتحركة. كانت فكرتي الأولى هي استخدام رسوم CSS animations، لكنني لم أحقق أي تقدم، لذا لجأت إلى رسوم jQuery animations بدلاً من ذلك. بعد بعض التجارب، وجدت ما أردت. كانت دالتا slideUp() و slideDown() مثاليتين لما كنت أحتاجه. بشكل أساسي، بمجرد النقر على أي من الأقسام في الصفحة الرئيسية، ستنزلق صفحة الاقتباسات إلى العرض، ويمكنك عرض الاقتباسات من الأقسام المختلفة. وبالمثل، عند النقر على زر الصفحة الرئيسية (home button) في شريط التنقل، تنزلق الصفحة لأسفل لتكشف عن الصفحة الرئيسية (homepage). وهكذا كان الأمر. كل ما فعلته من تلك النقطة هو استبدال الصور المؤقتة (placeholder images) بصور حقيقية واستخدام بعض خطوط Google fonts لتجميل المظهر. أخيراً، قمت بإعداد زر التغريد (tweet button). يمكنك مشاهدة النسخة النهائية على CodePen.

الدروس المستفادة (Lessons Learned)

خلال العمل على هذا المشروع، تعلمت بعض الدروس القيمة:

• في بعض الحالات، يمكن أن يمنحك استخدام صور الخلفية (background images) مزيداً من التحكم والمرونة مع الصور ذات الارتفاعات المختلفة، لأنه يمكنك تعيين background-size: cover ولن تتجاوز حدود الحاوية (container). بالإضافة إلى ذلك، يمكنك إنشاء بعض تأثيرات التمرير (hover effects) الرائعة كما فعلت مع الصور المميزة في الصفحة الرئيسية. لم أكن أعرف هذا دائماً، لكن أحدهم في مجموعة Slack أشار إلى ذلك.
• تعلمت أيضاً كيفية تقسيم ملفات Sass الخاصة بي إلى أجزاء (partials) واستيرادها إلى ملف الأنماط الرئيسي (main stylesheet). يساعد هذا في التنظيم ويسهل إصلاح المشاكل. لدي هيكل عمل (working architecture) أستخدمه، وهو ليس مثالياً، لكنني سأقوم بتحسينه بمرور الوقت.