تقریباً 15 سال پہلے، میں ایک کمپنی میں کام کر رہا تھا جہاں ہم نے ٹریول ایجنٹس، ہوائی اڈے کے کارکنوں، اور ایئر لائن کمپنیوں کے لیے ایپس بنائی تھیں۔ ہم نے UI اجزاء اور سنگل پیج ایپ کی صلاحیتوں کے لیے اپنا اندرون خانہ فریم ورک بھی بنایا ہے۔ ہمارے پاس ہر چیز کے اجزاء تھے: فیلڈز، بٹن، ٹیبز، رینجز، ڈیٹا ٹیبلز، مینوز، ڈیٹ پیکرز، سلیکٹس، اور ملٹی سلیکٹس۔ ہمارے پاس ایک div جزو بھی تھا۔ ہمارا div جزو ویسے تو بہت اچھا تھا، اس نے ہمیں تمام براؤزرز پر گول کونے کرنے کی اجازت دی، جس پر یقین کریں یا نہ کریں، اس وقت ایسا کرنا آسان کام نہیں تھا۔

ہمارا کام ہماری تاریخ کے ایک ایسے موڑ پر ہوا جب JS, Ajax اور متحرک HTML کو ایک انقلاب کے طور پر دیکھا گیا جو ہمیں مستقبل میں لے آیا۔ اچانک، ہم ایک صفحہ کو متحرک طور پر اپ ڈیٹ کر سکتے ہیں، سرور سے ڈیٹا حاصل کر سکتے ہیں، اور دوسرے صفحات پر جانے سے گریز کر سکتے ہیں، جو کہ سست نظر آتا تھا اور دونوں صفحات کے درمیان اسکرین پر ایک بڑا سفید مستطیل چمکا ہوا تھا۔ ایک جملہ تھا، جسے جیف اٹوڈ (اسٹیک اوور فلو کے بانی) نے مقبول بنایا، جس میں لکھا تھا: "کوئی بھی ایپلی کیشن جو جاوا اسکرپٹ میں لکھی جا سکتی ہے آخر کار جاوا اسکرپٹ میں لکھی جائے گی۔"- جیف اٹوڈ

اس وقت ہمارے لیے، یہ واقعی میں جانے اور ان ایپس کو بنانے کی ہمت کی طرح محسوس ہوا۔ یہ جے ایس کے ساتھ سب کچھ کرنے کی منظوری کی طرح محسوس ہوا۔ لہذا ہم نے JS کے ساتھ سب کچھ کیا، اور ہم نے کام کرنے کے دوسرے طریقوں پر تحقیق کرنے میں واقعی وقت نہیں نکالا۔ ہم نے صحیح طریقے سے سیکھنے کی ترغیب محسوس نہیں کی کہ HTML اور CSS کیا کر سکتے ہیں۔ ہم واقعی ویب کو مکمل طور پر ایک ابھرتے ہوئے ایپ پلیٹ فارم کے طور پر نہیں سمجھتے تھے۔ ہم نے اسے زیادہ تر اس چیز کے طور پر دیکھا جس کے ارد گرد کام کرنے کی ضرورت ہے، خاص طور پر جب بات براؤزر کی مدد کی ہو۔ ہم کام کرنے کے لیے اس پر مزید جے ایس ڈال سکتے ہیں۔ کیا ویب کے کام کرنے کے بارے میں مزید جاننے میں وقت لگے گا اور پلیٹ فارم پر کیا دستیاب تھا اس سے میری مدد ہوئی؟ یقینی طور پر، میں شاید کوڈ کا ایک گروپ منڈوا سکتا تھا جس کی واقعی ضرورت نہیں تھی۔ لیکن، اس وقت، شاید اتنا زیادہ نہیں۔ آپ نے دیکھا، اس وقت براؤزر کے اختلافات کافی اہم تھے۔ یہ وہ وقت تھا جب انٹرنیٹ ایکسپلورر اب بھی غالب براؤزر تھا، فائر فاکس دوسرے نمبر پر تھا، لیکن کروم تیزی سے مقبولیت حاصل کرنے کی وجہ سے مارکیٹ شیئر کھونا شروع کر رہا تھا۔ اگرچہ کروم اور فائر فاکس ویب کے معیارات پر متفق ہونے میں کافی اچھے تھے، لیکن جن ماحول میں ہماری ایپس چل رہی تھیں اس کا مطلب یہ تھا کہ ہمیں طویل عرصے تک IE6 کو سپورٹ کرنا پڑا۔ یہاں تک کہ جب ہمیں IE8 کو سپورٹ کرنے کی اجازت دی گئی، تب بھی ہمیں براؤزرز کے درمیان بہت سے اختلافات سے نمٹنا پڑا۔ نہ صرف یہ، بلکہ اس وقت کے ویب کے پاس پلیٹ فارم میں اتنی زیادہ صلاحیتیں موجود نہیں تھیں۔

آج کی طرف تیزی سے آگے بڑھیں۔ حالات بہت بدل گئے ہیں۔ نہ صرف ہمارے پاس یہ صلاحیتیں پہلے سے کہیں زیادہ ہیں بلکہ ان کی دستیابی کی شرح میں بھی اضافہ ہوا ہے۔ مجھے دوبارہ سوال پوچھنے دیں، پھر: کیا ویب کیسے کام کرتا ہے اور پلیٹ فارم پر جو کچھ دستیاب ہے اس کے بارے میں مزید جاننے کے لیے کیا وقت نکالنا آپ کی مدد کرے گا؟ بالکل ہاں۔ آج ویب پلیٹ فارم کو سمجھنا اور استعمال کرنا سیکھنا آپ کو دوسرے ڈویلپرز کے مقابلے میں بہت زیادہ فائدہ پہنچاتا ہے۔ چاہے آپ کارکردگی، رسائی، ردعمل، ان سب پر ایک ساتھ کام کریں، یا صرف شپنگ UI خصوصیات پر، اگر آپ اسے ایک ذمہ دار انجینئر کے طور پر کرنا چاہتے ہیں، تو آپ کے لیے دستیاب ٹولز کو جاننا آپ کو اپنے مقاصد کو تیز اور بہتر طریقے سے حاصل کرنے میں مدد کرتا ہے۔ کچھ چیزیں جن کے لیے آپ کو لائبریری کی ضرورت نہیں ہو سکتی یہ جانتے ہوئے کہ آج براؤزر کن چیزوں کی حمایت کرتے ہیں، سوال یہ ہے کہ: ہم کیا کھو سکتے ہیں؟ کیا ہمیں 2025 میں گول کونے کرنے کے لیے div جزو کی ضرورت ہے؟ یقینا، ہم نہیں کرتے. اس وقت 15 سال سے زیادہ عرصے سے تمام استعمال شدہ براؤزرز کے ذریعے بارڈر-ریڈیس پراپرٹی کو سپورٹ کیا گیا ہے۔ اور کونے کی شکل بھی جلد آرہی ہے، یہاں تک کہ فینسی کونوں کے لیے۔ آئیے نسبتاً حالیہ خصوصیات پر ایک نظر ڈالتے ہیں جو اب تمام بڑے براؤزرز میں دستیاب ہیں، اور جنہیں آپ اپنے کوڈ بیس میں موجودہ انحصار کو تبدیل کرنے کے لیے استعمال کر سکتے ہیں۔ نقطہ یہ نہیں ہے کہ آپ اپنی تمام پیاری لائبریریوں کو فوری طور پر کھودیں اور اپنے کوڈ بیس کو دوبارہ لکھیں۔ باقی ہر چیز کے بارے میں، آپ کو پہلے براؤزر سپورٹ کو مدنظر رکھنا ہوگا اور اپنے پروجیکٹ کے لیے مخصوص دیگر عوامل کی بنیاد پر فیصلہ کرنا ہوگا۔ مندرجہ ذیل خصوصیات تین اہم براؤزر انجنوں (Chromium، WebKit، اور Gecko) میں لاگو ہوتی ہیں، لیکن آپ کے پاس مختلف براؤزر سپورٹ کے تقاضے ہو سکتے ہیں جو آپ کو فوری طور پر ان کے استعمال سے روکتے ہیں۔ ان خصوصیات کے بارے میں جاننے کے لیے اب بھی اچھا وقت ہے، اگرچہ، اور شاید ان کو کسی وقت استعمال کرنے کا منصوبہ بنائیں۔ پاپ اوور اور ڈائیلاگ Popover API،

HTML عنصر، اور ::backdrop pseudo-element آپ کو پاپ اپ پر انحصار سے نجات دلانے میں مدد کر سکتا ہے،ٹول ٹپ، اور ڈائیلاگ لائبریریاں، جیسے Floating UI، Tippy.js، Tether، یا React Tooltip۔ وہ آپ کے لیے رسائی اور توجہ کا انتظام سنبھالتے ہیں، باکس سے باہر، CSS کا استعمال کرتے ہوئے انتہائی حسب ضرورت ہیں، اور آسانی سے اینیمیٹ کیے جا سکتے ہیں۔ accordions <تفصیلات> عنصر، باہمی طور پر خصوصی عناصر کے لیے اس کا نام وصف، اور ::details-content pseudo-element بوٹسٹریپ ایکارڈین یا React Accordion اجزاء جیسے accordion اجزاء کی ضرورت کو ختم کرتا ہے۔ یہاں صرف پلیٹ فارم استعمال کرنے کا مطلب ہے کہ جو لوگ HTML/CSS جانتے ہیں ان کے لیے آپ کے کوڈ کو سمجھنا آسان ہے بغیر کسی مخصوص لائبریری کو استعمال کرنا سیکھے۔ اس کا یہ مطلب بھی ہے کہ آپ لائبریری میں ہونے والی تبدیلیوں یا اس لائبریری کے بند ہونے سے محفوظ ہیں۔ اور، یقینا، اس کا مطلب ہے ڈاؤن لوڈ اور چلانے کے لیے کم کوڈ۔ باہمی طور پر خصوصی تفصیلات کے عناصر کو کھولنے، بند کرنے یا متحرک کرنے کے لیے JS کی ضرورت نہیں ہے۔ سی ایس ایس نحو زیادہ منظم سی ایس ایس کوڈ بیس کے لیے، سی ایس ایس نیسٹنگ، زیادہ کمپیکٹ سی ایس ایس کے لیے، نئے کلر فنکشنز، رشتہ دار رنگوں اور کلر مکس کے لیے کیسکیڈ لیئرز، ریاضی کے نئے فنکشنز جیسے abs(), sign(), pow() اور دیگر سی ایس ایس پری پروسیسرز، یوٹیلیٹی لائبریریوں جیسے بوٹسٹریپ اور ٹیل وِنڈ، یا یہاں تک کہ سی ایس ایس جی ایس ایس رن پر انحصار کم کرنے میں مدد کرتے ہیں۔ گیم چینجر :has()، ایک طویل عرصے سے سب سے زیادہ درخواست کردہ خصوصیات میں سے ایک، مزید پیچیدہ JS پر مبنی حل کی ضرورت کو دور کرتا ہے۔ جے ایس یوٹیلیٹیز جدید صف کے طریقے جیسے findLast(), or at(), نیز Set Methods جیسے different(), intersection(), union() اور دیگر لوڈاش جیسی لائبریریوں پر انحصار کم کر سکتے ہیں۔ کنٹینر کے سوالات کنٹینر کے سوالات UI اجزاء کو ویو پورٹ سائز کے علاوہ دیگر چیزوں کا جواب دیتے ہیں، اور اس وجہ سے انہیں مختلف سیاق و سباق میں دوبارہ استعمال کے قابل بناتے ہیں۔ اب اس کے لیے JS-heavy UI لائبریری استعمال کرنے کی ضرورت نہیں ہے، اور نہ ہی پولی فل استعمال کرنے کی ضرورت ہے۔ لے آؤٹ گرڈ، سب گرڈ، فلیکس باکس، یا ملٹی کالم اب کافی عرصے سے موجود ہیں، لیکن اسٹیٹ آف سی ایس ایس سروے کے نتائج کو دیکھتے ہوئے، یہ واضح ہے کہ ڈویلپرز نئی چیزوں کو اپنانے میں بہت محتاط رہتے ہیں، اور ایسا کرنے سے پہلے بہت طویل انتظار کرتے ہیں۔ یہ خصوصیات ایک طویل عرصے سے بیس لائن ہیں اور آپ انہیں بوٹسٹریپ کے گرڈ سسٹم، فاؤنڈیشن فریم ورک کے فلیکس باکس یوٹیلیٹیز، بلما فکسڈ گرڈ، میٹریلائز گرڈ، یا ٹیل ونڈ کالمز جیسی چیزوں پر انحصار سے نجات دلانے کے لیے استعمال کر سکتے ہیں۔ میں یہ نہیں کہہ رہا ہوں کہ آپ اپنا فریم ورک چھوڑ دیں۔ آپ کی ٹیم نے اسے ایک وجہ سے اپنایا، اور اسے ہٹانا ایک بڑا پروجیکٹ ہو سکتا ہے۔ لیکن یہ دیکھنا کہ ویب پلیٹ فارم تھرڈ پارٹی ریپر کے بغیر سب سے اوپر کیا پیش کر سکتا ہے بہت سے فوائد کے ساتھ آتا ہے۔ ایسی چیزیں جن کی آپ کو مستقبل قریب میں مزید ضرورت نہیں ہوگی۔ اب، آئیے کچھ چیزوں پر ایک سرسری نظر ڈالتے ہیں جن کے لیے آپ کو مستقبل قریب میں لائبریری کی ضرورت نہیں ہوگی۔ کہنے کا مطلب یہ ہے کہ ذیل کی چیزیں بڑے پیمانے پر اپنانے کے لیے بالکل تیار نہیں ہیں، لیکن ان کے بارے میں آگاہ ہونا اور بعد میں ممکنہ استعمال کے لیے منصوبہ بندی کرنا مددگار ثابت ہو سکتا ہے۔ اینکر پوزیشننگ سی ایس ایس اینکر پوزیشننگ دوسرے عناصر کی نسبت پاپ اوور اور ٹول ٹِپس کی پوزیشننگ کو ہینڈل کرتی ہے، اور صفحہ کو حرکت دینے، اسکرول کرنے یا سائز تبدیل کرتے وقت بھی ان کو مدنظر رکھنے کا خیال رکھتی ہے۔ یہ پہلے ذکر کردہ Popover API کے لیے ایک بہترین تکمیل ہے، جس سے زیادہ کارکردگی والے JS حلوں سے دور منتقل ہونا اور بھی آسان ہو جائے گا۔ نیویگیشن API نیویگیشن API کا استعمال سنگل پیج ایپس میں نیویگیشن کو ہینڈل کرنے کے لیے کیا جا سکتا ہے اور یہ ایک بہترین تکمیلی یا متبادل بھی ہو سکتا ہے، ری ایکٹ راؤٹر، Next.js روٹنگ، یا انگولر روٹنگ کے کاموں کے لیے۔ ٹرانزیشن API دیکھیں View Transitions API صفحہ کی مختلف حالتوں کے درمیان متحرک ہو سکتا ہے۔ ایک صفحے کی درخواست پر، یہ ریاستوں کے درمیان ہموار منتقلی کو بہت آسان بناتا ہے، اور آپ کو اینیمیشن لائبریریوں جیسے Anime.js، GSAP، یا Motion.dev سے چھٹکارا حاصل کرنے میں مدد مل سکتی ہے۔ اس سے بھی بہتر، API کو متعدد صفحات کی ایپلی کیشنز کے ساتھ بھی استعمال کیا جا سکتا ہے۔ یاد رکھیں، جب میں نے کہا تھا کہ ہم نے جس کمپنی میں 15 سال پہلے کام کیا تھا وہاں سنگل پیج ایپس بنانے کی وجہ نیویگیٹ کرتے وقت صفحہ کے دوبارہ لوڈ ہونے کے سفید فلیش سے بچنا تھا؟ اگر وہ API اس وقت دستیاب ہوتا، تو ہم کسی ایک صفحے کے فریم ورک کے بغیر اور پوری ایپ کے بڑے ابتدائی ڈاؤن لوڈ کے بغیر صفحہ کی منتقلی کے خوبصورت اثرات حاصل کرنے میں کامیاب ہوتے۔ اسکرول سے چلنے والی متحرک تصاویر اسکرول سے چلنے والی اینیمیشنز وقت کے ساتھ ساتھ صارف کی اسکرول پوزیشن پر چلتی ہیں، جو انہیں کہانی سنانے اور پروڈکٹ ٹورز کے لیے ایک بہترین حل بناتی ہیں۔ کچھ لوگ اس کے ساتھ تھوڑا سا اوپر چلے گئے ہیں، لیکن جب اچھی طرح سے استعمال کیا جائے تو، یہ ایک بہت ہی موثر ڈیزائن ٹول ہو سکتا ہے، اور لائبریریوں سے چھٹکارا پانے میں مدد کر سکتا ہے جیسے: ScrollReveal، GSAP Scroll، یاWOW.js مرضی کے مطابق سلیکٹس حسب ضرورت سلیکٹ ایک عام

No spam. Join 138,000+ creators. Unsubscribe anytime.

Create Your Free Bio Page

Join 138,000+ creators on Seemless.

Get Started Free