إعادة بناء صفحة جولة Tul8te
إعادة بناء صفحة جولة Tul8te
Tul8te فنان مصري ملثّم مع MDLBEAST Records. عنده تسع حفلات جاية في أربع
قارات، وخمستاشر حفلة اتعملت خلاص. الجولة كلها ساكنة في صفحة واحدة: قائمة
تواريخ، كل صف بيسلّم لشريك تذاكر مختلف.
اتنين من التسع محطات لسه من غير تاريخ: القاهرة، والكويت. والصفّين شايلين
زرار «نبّهني لما التذاكر تنزل».
الزرار ده هو أعلى إجراء نيّة في الموقع كله — معجب بيتطوّع بإيميله لحفلة في
مدينته، قبل ما تكون اتعلنت أصلاً.
فتحت الصفحتين في المتصفح. الاتنين بيرجّعوا 200 OK، وبيرسموا هيدر وفوتر،
وبعد كده ولا حاجة. لا عنوان. لا فورم. لا خانة.
دي مش مشكلة تصميم — دي تسريب. كل معجب في القاهرة أو الكويت يدوس الزرار ده
بيحوّل بنسبة صفر بالظبط، بحكم البناء، ومحدش بيكتشف لأن مفيش فورم عشان محدش
يبعتها.
فبنيت الصفحة تاني. مش عشان الأولى وحشة — عشان فيها حتة بتنزف.
رسمة الجولة طريق، فالصفحة بقت هي الطريق: كل مدينة كارت بتعدّي عليه، والضغط
على تذكرة بيختم جواز سفر للمدينة قبل ما يسلّمك لنفس البائع الرسمي.
والحتة اللي أنا فخور بيها مش الحتة الحلوة:
بنيت نظام يخلي العربية تمشي على الطريق بدقة حقيقية — حمّلت بلاطة الطريق في
canvas، ومشيت عليها صفّ صفّ، وطلّعت جدول ٩٦ نقطة بخط منتصف الطريق. قارنته
بعيّنات بيكسل خام: الجدول قال 0.6325 والبيكسل قال 0.6343. فرق أقل من بيكسل
واحد على شاشة عرضها ٣٩٠.
وبعدين مسحته.
لأني لما قست الطريق، لقيته بيتلوّى بطول موجة ٢٩٠ بيكسل تقريبًا. يعني العربية
هتعدّي الشاشة تلات مرات في كل شاشة سكرول، وتنعكس مع كل لفّة. دقيق تمامًا.
وما يتشافش.
الحل الصح مكانش إني أخفّف الحل الصحيح. كان إني ألاحظ إن «العربية بتتبع
الطريق» أصلاً مكانش الهدف — الهدف كان «الجولة بتزور مدينتك».
الأنيميشن الجميل اللي بيوجع في النظر باج بإضاءة كويسة.
حاجات كمان اتقاست، مش اتقالت:
• الصور اتحوّلت لـ WebP — بلاطة الطريق لوحدها نزلت ٨٨٪ من غير فرق شكلي
• إجمالي الصور من 13.6MB لـ 1.8MB
• النشرة كلها ١٢ ملف و4.14MB، عشان دي بتتفتح من ستوري إنستجرام على بيانات
الشبكة
واللي الكيس ستادي دي مش بتثبته، ومكتوب فيها بالنص: متنشرتش لجمهور، مفيش
ترافيك، مفيش داتا تحويلات. مبادرة شخصية مش تكليف.
الكيس ستادي: https://tamim.works/work/tul8te
النسخة المباشرة : https://tul8te.tamim.works
التعليقات (1)
