ڈویلپرز میں ایک بری عادت ہے کہ وہ ایسی چیزیں بنانے لگتے ہیں جو ہر کام کے لیے استعمال ہو سکیں (Swiss Army knives)، جبکہ انہیں صرف ایک تیز دھار والے بلیڈ کی ضرورت ہوتی ہے۔ ہم HTML کی پہلی لائن لکھنے سے پہلے ہی بھاری بھرکم فرنٹ اینڈ فریم ورکس کا سہارا لینے لگتے ہیں۔ ہم اینیمیشن لائبریریز، اسٹیٹ مینجمنٹ ٹولز، اور اتنی طاقتور بلڈ پائپ لائنز جوڑ دیتے ہیں جو ایک چھوٹی کمپنی چلانے کے لیے کافی ہوں۔ پھر ہم حیران ہوتے ہیں کہ ہماری پورٹ فولیو سائٹس کو رینڈر ہونے میں تین سیکنڈ کیوں لگتے ہیں، موبائل پر نیویگیشن کیوں خراب ہو جاتی ہے، اور ہائرنگ مینیجرز ہمارے ان پروجیکٹس کو دیکھے بغیر ہی کیوں چلے جاتے ہیں جن پر ہم نے مہینوں محنت کی ہوتی ہے۔
میں نے اپنے تازہ ترین پورٹ فولیو کے ساتھ ایک مختلف راستہ اختیار کیا۔ میں نے لامتناہی ڈیپینڈنسیز (dependencies) کے ایکوسسٹم سے کنارہ کشی اختیار کی اور پوری سائٹ سیمنٹک HTML اور صاف ستھرے CSS کے ساتھ بنائی۔ کوئی JavaScript فریم ورک نہیں۔ کوئی بلڈ اسٹیپس نہیں۔ کوئی تھرڈ پارٹی اینیمیشن انجن نہیں۔ صرف خود پلیٹ فارم، لے آؤٹ کے لیے CSS Grid اور Flexbox، اور ایک ایسا ڈیزائن فلسفہ جو رفتار اور وضاحت کو محض اضافی چیزوں کے بجائے بنیادی فیچرز کے طور پر دیکھتا ہے۔
اس کا نتیجہ ہلکا، تیز اور پیشہ ورانہ ہے۔ یہاں میں نے بالکل اسی طرح کام کیا:
بنیاد سے آغاز کریں
زیادہ تر اوور انجینئرنگ (over-engineering) بنیاد سے شروع ہوتی ہے۔ ایک پورٹ فولیو کے لیے سنگل پیج ایپلی کیشن ہونا ضروری نہیں ہے۔ اسے صرف آپ کا کام دکھانا چاہیے، لوگوں کو بتانا چاہیے کہ آپ سے کیسے رابطہ کیا جائے، اور اپنا کام مکمل کر کے ہٹ جانا چاہیے۔ میں نے سیمنٹک HTML کا استعمال کیا کیونکہ براؤزر پہلے سے ہی جانتا ہے کہ nav، article اور footer کو کیسے رینڈر کرنا ہے۔ جب آپ صحیح کام کے لیے صحیح ایلیمنٹ استعمال کرتے ہیں، تو آپ کو رسائی (accessibility)، سرچ انجن میں نظر آنے کی صلاحیت (visibility)، اور ریسپانسیو رویہ تقریباً مفت میں مل جاتا ہے۔ آپ کم کوڈ بھی لکھتے ہیں۔ پانچ ARIA ایٹریبیوٹس والا ایک div محض ایک button کی طویل اور غیر ضروری نقل ہے۔ میں نے اس سے مکمل پرہیز کیا۔
لے آؤٹ کے لیے CSS Grid اور Flexbox کافی سے زیادہ ہیں۔ Grid میکرو اسٹرکچر کو سنبھالتا ہے: مجموعی پیج سیکشنز، پروجیکٹ گیلری، اور بڑے بلاکس کی ترتیب۔ Flexbox مائیکرو انٹرایکشنز کو سنبھالتا ہے: اس کیپسل کے اندر نیویگیشن لنکس، کارڈز کے اندر ٹیکسٹ کو سینٹر کرنا، اور فوٹر کو ویو پورٹ کے نیچے دھکیلنا۔ یہ مل کر ہر اس وجہ کا متبادل بن جاتے ہیں جس کے لیے آپ کو 2018 میں بارہ کالموں والے گرڈ فریم ورک کو امپورٹ کرنے کی ضرورت پڑتی تھی۔ کوڈ پڑھنے میں آسان رہتا ہے۔ CSS فائل چھوٹی رہتی ہے۔
رنگ، ٹائپ اور ضبط
میں چاہتا تھا کہ پورٹ فولیو لوڈ ہوتے ہی سکون کا احساس دے۔ بیک گراؤنڈ کے لیے ہلکے رنگ کے ساتھ باریک ریڈیل گریڈینٹس (radial gradients) کا استعمال کیا گیا ہے۔ کچھ بھی جارحانہ نہیں۔ گریڈینٹ کم آپیسیٹی (opacity) پر ہے، جو ایک نرم گہرائی پیدا کرتا ہے جو پیج کو سپاٹ محسوس ہونے سے روکتا ہے لیکن توجہ حاصل کرنے کے لیے چیختا بھی نہیں۔ یہ فوری طور پر لوڈ ہوتا ہے کیونکہ یہ خالص CSS ہے۔ یہاں کمپریس کرنے کے لیے کوئی ہیرو امیجز نہیں ہیں، کوئی WebP فال بیکس نہیں ہیں، اور نہ ہی کنفیگر کرنے کے لیے کوئی JavaScript لیزی لوڈنگ لائبریریز ہیں۔
ٹائپوگرافی شخصیت کا اظہار کرتی ہے۔ میں نے Outfit کو Ovo کے ساتھ جوڑا۔ Outfit، جو کہ ایک جیومیٹرک سین-سیریف (sans-serif) ہے، تمام UI ٹیکسٹ سنبھالتی ہے: نیویگیشن لیبلز، بٹن کا ٹیکسٹ، باڈی کاپی، اور میٹا تفصیلات۔ یہ اسکرینوں پر واضح نظر آتی ہے اور چھوٹے سائز میں بھی پڑھنے کے قابل رہتی ہے۔ Ovo، جو کہ ایک میڈیم کنٹراسٹ سیریف (serif) ہے، ہیڈرز اور اہم ہیڈ لائنز کے لیے استعمال ہوتی ہے۔ یہ جوڑی پیج کو ایک پرسکون ادارتی (editorial) احساس دیتی ہے۔ یہ ڈیزائن شدہ لگتا ہے، نہ کہ محض کوئی تھیم۔ سب سے اہم بات یہ ہے کہ دونوں فونٹس کسی ایک فونٹ سروس یا سیلف ہوسٹڈ فائلوں سے لوڈ ہوتے ہیں۔ اس سے کوئی لے آؤٹ شفٹ، ٹیکسٹ کا اچانک ظاہر ہونا، یا ابتدائی رینڈرنگ کے بعد اسکرپٹ کے ذریعے وزن بدلنا (weight swapping) جیسے مسائل نہیں ہوتے۔
فلوٹنگ کیپسول مینو
نیویگیشن وہ جگہ ہے جہاں پورٹ فولیو اکثر اپنے ہی بوجھ تلے دب جاتے ہیں۔ فل اسکرین اوورلے مینیوز، پیچیدہ اینیمیشن اسکرپٹس، اور ہیمبرگر آئیکنز جنہیں ایک کلاس تبدیل کرنے کے لیے چالیس لائنوں کے JavaScript کی ضرورت ہوتی ہے۔ مجھے ان میں سے کچھ بھی نہیں چاہیے تھا۔
میں نے ایک فلوٹنگ گلاس مورفک (glassmorphic) کیپسول مینو بنایا ہے۔ یہ ایک واحد افقی کنٹینر ہے، جس کے کنارے گول ہیں، اور اسے ویو پورٹ کے اوپری حصے کے قریب فکس (fixed) کیا گیا ہے۔ گلاس مورفزم کا اثر ایک نیم شفاف بیک گراؤنڈ کلر اور backdrop-filter: blur() پراپرٹی سے آتا ہے۔ یہ مواد کو چھپائے بغیر اس کے اوپر تیرتا ہے، ہر سیکشن تک فوری رسائی فراہم کرتا ہے، اور چھوٹے ویو پورٹس پر مکمل ری ڈیزائن کے بغیر مہارت سے سکڑ جاتا ہے۔ یہ اثر جدید لگتا ہے کیونکہ براؤزر اس کی کمپوزٹنگ سنبھالتا ہے، نہ کہ کوئی کینوس لائبریری۔