میری بے وقوف CSS غلطیاں

ہم سب اپنے کوڈ میں غلطیاں کرتے ہیں۔ یہ ہوتا ہے! میں جانتا ہوں کہ اگر میرے پاس ان "آخری غلطی کے دنوں سے" نشانیاں میری میز پر لٹکی ہوئی ہوں تو ہنس کا ایک بڑا انڈا ہر وقت میرے اوپر منڈلاتا رہے گا۔ اس میں بھی بڑی غلطیاں نہیں ہونی چاہئیں۔ میرے اناڑی خود نے npm ماڈیول ڈائریکٹریز کو مکمل کرنے تک ٹائپ کی غلطیوں سے لے کر ریپوز میں چھوٹی غلطیوں کا ارتکاب کیا ہے۔

وووووووو

یہ ان چیزوں میں سے ایک ہے جو میں واقعی CSS کے بارے میں پسند کرتا ہوں: یہ ہیک کے طور پر معاف کرنے والا ہے۔ اگر اسے ٹائپنگ کی غلطی سمجھ نہیں آتی ہے، تو یہ میچ کی تلاش میں جھرن کو تلاش کرتا رہتا ہے۔ ان چیزوں میں سے کوئی بھی نہیں جہاں جگہ سے باہر ایک کردار کسی سائٹ کو توڑتا ہے اور کوئی قیدی نہیں لیتا ہے۔ لیکن سی ایس ایس کی غلطیاں پاپ اپ ہونے پر یہ اب بھی شرمناک ہے!

اس کی طرح میں خود کو اس سے کہیں زیادہ راستہ بناتا ہوا محسوس کرتا ہوں جتنا کہ میں تسلیم کرنا چاہتا ہوں:

.element {
  display: flexbox; /* 🤦‍♂️ */
}

یا جب میں بغیر کسی میلان کو ترتیب دینے کی کوشش کرتا ہوں۔ background جائیداد:

.gradient {
  linear-gradient(45deg, rgb(50% 100% 90%), rgb(62% 85% 93%));
}

مجھے کتنا قریب سے نفرت ہے۔ X اور C کی بورڈ پر ہیں کیونکہ میں شمار نہیں کر سکتا کہ میں کسی چیز اور غلطی سے کتنی بار جل رہا ہوں۔ px لیے pc یونٹ

.element {
  font-size: 16pc; /* I meant pixels! */
}

ایک اور سی ایس ایس غلطی جو میں اکثر پکڑتا ہوں وہ ہے میں جانتا ہوں کہ دوسرے بہت سے لوگ کرتے ہیں کیونکہ میں اسے اکثر کوڈ کے ٹکڑوں کے ساتھ بلاگ پوسٹس میں دیکھتا ہوں:

// This is not a CSS comment.
.element {
  /* This is a CSS comment. */
}

کیا آپ کبھی استعمال کرنا بھول گئے ہیں؟ var() سی ایس ایس متغیر کے ارد گرد؟ مجھے یقین ہے.

.element {
  color: --primary-color;
}

CSS متغیرات کی بات کرتے ہوئے، ان کا نام دینا مشکل ہے (ہر چیز کی طرح) اور میں اکثر متغیر کا کچھ غلط ورژن استعمال کرتا ہوں جس کا میں نے نام رکھا ہے!

:root {
  --color-primary: #FF5722;
  --color-secondary: #3E2723;
}

/* Much later on... */

.element {
  color: var(--primary-color); /* 🙃 */
}

ہاں، میں نے واقعی اس سے پہلے سی ایس ایس کا ایک ٹکڑا کاپی کیا ہے تاکہ اس کے کام کرنے کی راہ میں فینسی اقتباسات حاصل ہوں:

.element::before {
  content: “”; /* Should be "" */
}

اور، ہاں، میں نے یہ معلوم کرنے میں کافی وقت گزارا ہے کہ وہ حوالہ جات مجرم تھے۔

اس آخری کو دیکھ کر مجھے یاد دلاتا ہے کہ میں کبھی کبھی سیٹ کرنا بھول جاتا ہوں۔ content پراپرٹی جب میں کام کر رہا ہوں۔ ::before or ::after. جو مجھے یاد دلاتا ہے کہ میں کس طرح ایک عنصر کو سیٹ کرنا بھول گیا ہوں۔ position اسے آفسیٹ کرنے یا اسے تبدیل کرنے کی کوشش کرنے سے پہلے z-index. سنجیدگی سے، یہ چیزیں ہوتی ہیں!

غلطیوں کے بارے میں بات کرنا مشکل ہے۔

کیا آپ نے کبھی حیرت انگیز چال شیئر کرنے والی کچھ بلاگ پوسٹ پڑھی ہے اور کسی طرح کا امپوسٹر سنڈروم محسوس کیا ہے؟ میرے خیال میں اس کی بڑی وجہ یہ ہے کہ بلاگ پوسٹس اکثر حقیقی کام - اور ناکامیوں کو چھپا دیتی ہیں - جو حیرت انگیز چالوں میں جاتی ہیں۔ زندگی گزارنے کے لیے اس طرح کی پوسٹس پڑھنے والے کے طور پر، میں آپ کو بتا سکتا ہوں کہ بہت سے لوگ، اگر اکثریت نہیں تو، ایڈیٹنگ کے بہت سے دوروں سے گزرتے ہیں جہاں ممکنہ طور پر شرمناک غلطیوں کو ختم کیا جاتا ہے اور ان کو ہموار کیا جاتا ہے۔

یہاں تک کہ وہ مضحکہ خیز خوفناک مضامین کو ان سب کو حاصل کرنے سے پہلے ہی ناکام ہونا پڑتا ہے۔ ooooos اور ahhhhhs.

کسی بھی ایپ، ویب سائٹ، ڈیمو، یا جو کچھ بھی آپ کے سامنے آتا ہے اس کا بھی یہی حال ہے۔ ان میں سے کوئی بھی پہلی بار مکمل طور پر سامنے آنے کے امکانات کچھ بھی نہیں ہیں۔

لیکن اگر میں آپ کے ساتھ پوری طرح ایماندار ہوں، تو میں اکثر اس بات میں زیادہ حیران (اور دلچسپی رکھتا ہوں) سفر یہ کچھ، مسے اور سب کو پورا کرنے کے لئے لیتا ہے. سفر اس کی ایک جھلک ہے کہ یہ کیسا ہے۔ ایک فرنٹ اینڈ ڈویلپر کی طرح سوچیں۔. یہیں سے حقیقی (اور سب سے قیمتی) سیکھنے کا کام ہوتا ہے۔

اور یہ سب محض اس بات کی تعمیر کر رہا ہے کہ میں واقعی میں پوچھنا چاہتا ہوں…

آپ کی بیوقوف سی ایس ایس غلطیاں کیا ہیں؟

چلو، ہم سب جانتے ہیں کہ آپ نے کچھ بنایا ہے! آئیے ان سے سیکھیں!