حالا یه مهارت خیلی مهم دیگه که بهش نیاز داری
وقتی داری تبدیل به یه توسعه‌دهنده وب می‌شی اینه که کدت رو دیباگ کنی
و سؤال بپرسی
اگه نتونستی یه سری مشکلات خاص رو حل کنی
توی برنامه‌نویسی می‌گیم bug در اصل یعنی
یه خطا یا اشتباه
پس دیباگ کردن کدمون یعنی پیدا کردن
و رفع خطاها توی کد درسته؟
خب حالا فرض کنیم یه خطایی
توی کدت وجود داره
و توی HTML رایج‌ترین خطا
یعنی شایع‌ترین bug اینه که
بعضی المنت‌ها بسته نمی‌شن
این حتی با وجود اینکه VS Code
به‌صورت خودکار المنت‌ها رو برامون می‌بنده باز هم می‌تونه پیش بیاد
اما بعضی وقت‌ها با کپی پیست کردن
یا به دلایل دیگه‌ای پیش میاد که
به‌طور اتفاقی تگ‌های بسته شدن رو پاک می‌کنیم
و اون موقع یه خطا ظاهر می‌شه
خب فرض کنیم به هر دلیلی اینجا strong element رو
نبستیم
و بعد صفحه‌مون اینطوری به نظر می‌رسه
و البته برای این مثال
باید فرض کنیم که از این bug خبر نداریم درسته؟
در هر صورت این منطقی نیست
پس اگه این bug رو وارد کنیم و بعد صفحه‌مون رو render کنیم
یه‌هو صفحه‌مون این شکلی می‌شه درسته؟
و این ممکنه یکم ترسناک باشه
چون به صفحه نگاه می‌کنی و خیلی اشتباه به نظر میاد
این چیزی نیست که می‌خواستی درسته؟
خب حالا چطور باید درستش کنیم؟
توی این مورد خیلی ساده‌ست
کافیه یه نگاه به نتیجه اینجا بندازی
یعنی به این صفحه
و بفهمی bug از کجا شروع شده
اینجا مشکل واضحه:
کل متن bold شده جایی که نمی‌خواستی
پس برای دیباگ این کد
باید نگاه کنی ببینی از کجا متن bold نیست
اینجا بالا
برای مثال متن bold نیست
پس bug باید جایی پایین‌تر از این اتفاق افتاده باشه
بعد این یکی اینجا bold هست
ولی فقط به این دلیل که H2 هست
بعد اینجا یه متن می‌بینی که اونم bold نیست
و بعد از اینجا به بعد یه‌هو همه‌چیز bold می‌شه
پس یعنی bug باید یه جایی همین اطراف باشه
و بعد می‌تونی برگردی به HTML
و متوجه بشی که اوه این المنت رو نبستی
و بعدش خیلی ساده‌ست
کافیه بیای اینجا المنت رو ببندی
یه ذخیره بزنی و همه‌چیز درست می‌شه
و همین موضوع طبیعتاً می‌تونه
برای هر نوع المنت دیگه‌ای هم اتفاق بیفته
مثلاً فرض کن به هر دلیلی اومدی
تگ بسته شدن اینجا رو پاک کردی بعد نگاه می‌کنی
و دوباره همه‌چیز یه‌هو bold می‌شه
و همینطور بزرگ‌تر و آبی
و خب احتمالاً سریعاً از روی رنگ و متن bold
می‌فهمی که الان مثل H3 به نظر میاد
پس دوباره می‌تونی برگردی به کدت
متوجه بشی یه bug هست و درستش کنی
حالا یکی از bugهای نسبتاً رایج اینه که
مثلاً اینجا
تگ LI رو می‌بندی ولی محتوای لیست رو بیرون می‌ذاری
یعنی چیزی شبیه این
و بعد وقتی صفحه‌ت رو چک می‌کنی
یه چیزی خیلی نامرتب به نظر میاد درسته؟
ولی باز هم فقط کافیه
بری به همون بخش HTML که مربوطه
به این مشکل و بفهمی چی شده
اینجا هم خیلی واضحه
یه LI اضافه بستی
پس فقط اونو درست کن و دوباره همه‌چیز امن می‌شه
خب حالا اگه این اتفاق توی یه المنت بزرگ‌تر بیفته چی؟
مثلاً اینجا توی aside اگه اینو حذف کنیم
اون وقت خطا ممکنه خیلی واضح نباشه
می‌بینی خیلی واضح نیست
تنها چیزی که اتفاق افتاده اینه که این متن اینجا یه‌هو داخل
این aside element قرار گرفته
حالا تصور کن این bug رو خیلی زود
توی کدت ایجاد کرده باشی
حتی قبل از اینکه واقعاً شروع به نوشتن CSS کنی
و توی اون حالت
اصلاً متوجه نشدی که این اتفاق افتاده
و بعد وقتی شروع به نوشتن CSS می‌کنی
یه‌هو متوجه می‌شی که یه مشکلی هست
ولی واقعاً یادت نمیاد HTML رو چطور نوشتی
پس مطمئن نیستی مشکل دقیقاً از کجاست
اینجا یه راه‌حل عالی
اینه که از یه ابزار HTML Validator استفاده کنی
که در اصل بهت این امکان رو می‌ده
بفهمی HTMLت معتبر هست یا نه
برای این کار بیایم کل کد اینجا رو کپی کنیم
به نظرم این آسون‌ترین روش انجامشه
بعد اینجا باید توی گوگل سرچ کنیم HTML validator
و معمولاً باید همون نتیجه اول باشه
ولی من یه لینک هم به این HTML validator
توی صفحه منابعم گذاشتم همونطور که قبلاً نشون دادم
اینجا می‌تونیم با وارد کردن یه URI اعتبارسنجی کنیم
خب چیزی شبیه یک URL هست
ما می‌توانیم فایل را به‌صورت دستی آپلود کنیم
یا می‌توانیم به‌سادگی کدی که کپی کردیم اینجا پیست کنیم
و دوباره فکر می‌کنم این ساده‌ترین راه‌حل است
خب بیایید روی گزینه Check کلیک کنیم
و حالا در واقع چند خطا داریم
نه فقط همونی که دنبالش بودیم
بلکه می‌بینید این پایین مشخص شده
که المنت aside بسته نشده است
پس این همون باگی هست که خودمون عمداً ایجادش کردیم
خب بیایید اینو اینجا درستش کنیم
خیلی خب
اینجا هم یه خطای دیگه داریم
که میگه تگ div بسته شده ولی هنوز المنت‌های باز وجود دارن
این خطا در واقع مرتبط با همون خطای قبلیه
و خیلی معمولاً توی validator دیده میشه
یعنی یه خطای کوچیک توی کد می‌تونه باعث بشه
چند خطای دیگه همینجا ظاهر بشن خب
پس این دوتا با چیزی که الان درست کردیم برطرف شدن
ولی اینجا ظاهراً چند خطای دیگه هم توی کدمون هست
خب بیایید اونا رو هم درست کنیم
مثلاً توی خط 131
ما یه attribute تکراری به نام with داریم
خب بیایید اینو اصلاح کنیم
و واقعاً هم درسته
ما with داریم و دوباره هم with نوشتیم
که در واقع باید height باشه
پس height به این شکل
و در نهایت یه خطای دیگه هم هست
توی خط 137 attribute height مجاز نیست
و در واقع مشکل اینجاست که status اشتباه نوشته شده
پس این یه خطای مسخره‌ست
یعنی به جای TH باید HT باشه مثل این
پس می‌بینید که در واقع حتی قبل از اینکه
عمداً یه باگ وارد کنیم HTML ما از همون اول نامعتبر بود
خب حالا دوباره کپی‌ش می‌کنم
اینجا همه‌چی رو انتخاب می‌کنم
با Command یا Control + A پاک می‌کنم
و دوباره پیست می‌کنم بعدش چک می‌کنم
و حالا دیگه هیچ خطا یا هشداری نداریم خب
این شد HTML Validator
یه ابزار خیلی کاربردی
ولی حالا بذارید یه ابزار دیگه هم نشونتون بدم
که اسمش Diff Checker هست
و Diff Checker می‌تونه خیلی کمک کنه
تا کد خودتون رو با کدی که من نوشتم مقایسه کنید
که توی همین ویدیوها براتون نوشتم
پس اگه جایی دیدید
صفحه شما با صفحه من فرق داشت
احتمالاً یه ایرادی توی کد شماست
و توی اون موقعیت
می‌تونید کدتون رو به‌طور خودکار با کد من مقایسه کنید
مثلاً فرض کنید به هر دلیلی
به‌جای استفاده از المنت A از link استفاده کردید
و خب link اینجا هیچ معنایی نداره
ولی با anchorها در واقع ما hyperlink می‌سازیم
پس ممکنه به هر دلیلی اشتباه کرده باشید
و به جای A از link استفاده کرده باشید
چون فکر کردید
که این همون چیزیه که لینک ایجاد می‌کنه
و حالا کدی که اینجاست به‌طور عجیبی کلیک‌پذیر نیست
و مشکیه به‌جای اینکه آبی باشه
خب بیایید برگردیم به CSS اینجا
و توی بخش nav اون قطعه کدی که
توی ویدیوی قبل اضافه کردیم رو حذف کنیم درسته؟
به هر حال
حالا بیایید این کد رو با کدی که من نوشتم مقایسه کنیم
یعنی با کد نهایی توی این بخش
پس بیایید سرچ کنیم برای Diff Checker
و بعد می‌تونید خیلی راحت diffcheckercom رو استفاده کنید
اینجا کد خودتون رو قرار می‌دید
دوباره Command یا Control + A کپی بعد پیست
و حالا این سمت
نیاز دارید کد دیگه رو بذارید یا برعکس
اینجا باید کد اصلی رو بذارید
پس اینو پاک می‌کنم و اینجا هست
متن تغییر یافته
خب حالا میاییم سراغ کدی که دانلود کردید
یعنی همین repository و بعد پوشه final اینجاست
و این همون کدی هست که می‌تونید استفاده کنید
تا با کد خودتون مقایسه کنید
ما الان توی بخش CSS Fundamentals هستیم
و فایل index برامون مهمه
برای اینکه بازش کنیم خیلی راحت می‌تونیم فایل رو
بکشیم روی آیکون VS Code توی نوار منو
و این در واقع همون کد نهایی این بخشه
دوباره همه‌چی رو انتخاب می‌کنم و کپی می‌کنم
بعد می‌تونم اینجا پیستش کنم
و بعدش باید یه دکمه‌ای باشه به اسم
Compare یا چیزی مشابه
وقتی شما دارید این ویدیو رو می‌بینید
ممکنه رابط کاربری کمی متفاوت باشه
اما ایده اصلی همچنان همونه
که دو تا جعبه متن دارید
و یه دکمه برای مقایسه‌شون
خب روی اون کلیک کنید
و بعد می‌بینید که تفاوت‌ها خیلی مرتب نشون داده میشن
توی کد اصلی ما المنت A رو داریم
در حالی که شما به هر دلیلی از link استفاده کردید خب؟
و توی این مثال این تنها تفاوت بود
یا در واقع اینجا یکی دیگه هست
پس اینجا تگ بسته و فقط بسته شدن هست
بذارید اینو هم درستش کنم
خب اینجا طبیعتاً باید A باشه برش می‌گردونیم
و اینجا هم یه ایراد توی محتوا هست
پس تگ بسته
اینجا باید تگ بسته باشه
ببینیم چیز دیگه‌ای هست یا نه
آها بله اینجا همون باگ‌هایی هست که همین الان درست کردیم
قبلاً دو بار width داشتیم درسته؟
و خب اون رو قبلاً درست کردیم
پس اینجا مشکلی نداریم
و این قبلاً اشتباه بود
پس توی فایل نهایی همچنان اشتباه باقی مونده بود
خب اما غیر از اون دیگه چیزی نیست
خب پایین‌تر دوباره به اون متن دسترسی داریم
پس می‌تونیم یه تغییراتی اینجا بدیم
بذارید چند مورد دیگه وارد کنم
که ببینیم بعدش چه شکلی میشه
خب این LI اینجا فرض کنیم بستنش رو جا انداختیم
فرض کنید اینجا داخل footer
به‌جای اینکه footer رو ببندیم header رو بستیم
خب تفاوت‌ها رو پیدا کن
و اینجا می‌بینید که ظاهر خیلی فرق کرده
حتی اگه فقط خط‌های خالی داشته باشید
باز هم توی diff checker نشون داده میشه درسته؟
پس این‌ها همه تغییراتی هستن که وارد کردیم
خب عالیه
پس diff checker و HTML validator
دو تا ابزار فوق‌العاده مفید برای دیباگ کردن HTML هستن
اما حالا بریم سراغ CSS
چون اونجا هم ممکنه باگ‌هایی وجود داشته باشه
یکی از رایج‌ترین منابع باگ در CSS
تداخل بین سلکتورهاست
پس بیایم دوباره این لینک‌ها رو انتخاب کنیم
و یادتون باشه که اینا داخل nav هستن
و nav هم داخل main header قرار داره
که همون هدر اصلیه
خب اینجا ما سلکتور "nav a" رو داریم
ولی به هر دلیلی
فرض کنید این لینک‌ها رو یه جای دیگه هم انتخاب کردیم
و یه استایل متفاوت اونجا اضافه کردیم
مثلاً فرض کنید یه جایی وسط‌های کد
یه سلکتور دیگه نوشتیم
فرض کنید اینجا نوشتیم main header
و بعد داخلش nav
و بعد هم داخلش a به این شکل
و اینجا رنگ رو قرمز گذاشتیم باشه؟
ولی همچنان می‌خوایم رنگمون آبی باشه
اما حالا وقتی صفحه رو ریفرش کنیم متنمون قرمز میشه
پس الان دو تا سلکتور داریم که هر دو رنگ رو تعیین کردن
و هر دو هم اعمال میشن
و اگه قبلاً این کد رو نوشته باشید
و بعداً این تکه کد دوم رو اضافه کرده باشید
و انتظار داشتید رنگ یکی از متن‌ها آبی باشه
ممکنه متوجه نشید
اینجا دقیقاً چه اتفاقی افتاده
البته رنگ مثال خیلی خوبی نیست
پس بیایم به‌جاش با margin-top کار کنیم
فرض کنید
به هر دلیلی margin-top رو برای لینک گذاشتید 100 پیکسل
ولی بعد یه کم پایین‌تر دوباره
این قانون رو نوشتید
که در واقع فقط می‌خواستید margin-top ده پیکسل باشه
پس این قانون رو نوشتید بعد ذخیره کردید
و یهو صفحه این شکلی شد
و margin-top صد پیکسلی اعمال شد
خب چه اتفاقی افتاده؟
بریم بررسی کنیم
خب
می‌بینید که هر دو سلکتور اعمال میشن طبیعتاً
پس هر دو قانون
اما margin-topی که واقعاً اعمال میشه همینه اینجا
توی این سلکتور طولانی‌تر
پس به‌طور کلی
علاوه بر قوانینی که قبلاً یاد گرفتیم
درباره اولویت سلکتورها اگه یه سلکتور خیلی پیچیده‌تر باشه
اغلب همونه که اعمال میشه باشه؟
و به همین دلیله که قبلاً بهتون گفتم
از نوشتن سلکتورهای خیلی پیچیده خودداری کنید
یعنی سلکتورهای خیلی سخت
سلکتورهاتون رو ساده نگه دارید مثل این یکی
و این باعث میشه باگ‌هایی مثل این ایجاد نشن
خب؟ حالا به‌صورت فنی اینجا
اگه نگاهی به specificity این سلکتور بندازیم
می‌بینید که عددش یک و دو هست
پس این رو به خاطر بسپارید: صفر یک دو
و اینجا داریم صفر دو دو
و این اعداد بزرگ‌تر هستن
و بنابراین این سلکتوره که اعمال میشه
قبلاً هم اشاره کردم که لازم نیست
خیلی روی specificity تمرکز کنید چون پیچیده میشه
اما به طور کلی هرچی عدد بزرگ‌تر باشه
اون سلکتور بیشتر اعمال میشه خب
پس سلکتورهای این مدلی ننویسید
و به‌جاش specificity رو پایین نگه دارید باشه؟
و اگه قوانینی که قبلاً بهتون گفتم
در مورد اولویت سلکتورها رو رعایت کنید مشکلی نخواهید داشت
یکی دیگه از مشکلات رایج که ممکنه پیش بیاد اینه که
اینکه به هر دلیلی نام یک ویژگی (property) رو اشتباه تایپ کنید
و این اتفاق همیشه پیش میاد
مثلاً فرض کنید به جای درستش اینو نوشتید
بعد ذخیره‌اش کردید
و خب
عنصر دقیقاً جایی که انتظار داشتید قرار نمی‌گیره
پس در این حالت
کار ساده اینه که اون عنصر رو Inspect کنید
و بررسی کنید دقیقاً چه اتفاقی افتاده
حالا در مورد یک شبه‌عنصر (pseudo-element) مثل این
باید روی اینجا کلیک کنید
تا خود عنصر باز بشه
و بعد از اون می‌تونید شبه‌عنصر رو انتخاب کنید
و بعد ویژگی‌ها رو همینجا بررسی کنید
و این آیکون رو پیدا می‌کنید
که یعنی اسم ویژگی ناشناخته است
و از همین متوجه می‌شید که
اینجا یه چیزی رو اشتباه تایپ کردید
پس برمی‌گردید به کدتون
اون رو درست می‌کنید و دوباره همه‌چی اوکی میشه
این اتفاق خیلی بیشتر از چیزی که فکر کنید پیش میاد
برای همین کاری که من الان کردم همیشه ایده خوبیه
و در کل همیشه ایده خوبیه
که با این کدها توی DevTools بازی کنید
و تغییرات مختلف رو امتحان کنید
مثلاً مقادیر رو همینجا تغییر بدید
به جای اینکه مثلاً
اندازه فونت H2 رو توی کد امتحان کنید
می‌تونید همینجا روی مقدار کلیک کنید
و روی کیبورد کلیدهای بالا و پایین رو بزنید
دقیقاً همونطور که اینجا نوشته
در واقع توی همون راهنما
پس با این کار
می‌تونید زنده ببینید که این مقادیر چطور تغییر می‌کنن
و می‌تونید با Shift و بالا یا پایین هم امتحان کنید
که در این صورت تغییرات ده‌تایی اعمال میشه
این واقعاً خیلی کاربردیه
من همیشه وقتی دارم با مقادیر مختلف آزمایش می‌کنم
از این روش استفاده می‌کنم
و اگر به هر دلیلی واقعاً نتونستید
کدتون رو درست کنید دوباره می‌تونید
از Diff Checker استفاده کنید تا مقایسه کنید
کد CSS خودتون رو با چیزی که من توی ویدیو نشون دادم
یعنی کد نهایی همون بخش که
توی مخزنی که قبلاً نشون دادم موجوده
و در نهایت
یکی از اشتباهات رایجی که همیشه از مبتدی‌ها می‌بینم
اینه که فایل CSS رو از اول درست لینک نمی‌کنن
یادتون باشه
این قسمت مربوط به تگ link اینجاست
و گاهی به هر دلیلی
دانشجوها مسیر فایل CSS رو خراب می‌نویسن
این بیشتر وقتی اتفاق میفته که بخوایم فایل رو
مثل کاری که با تصاویر کردیم توی یه پوشه دیگه بذاریم
و بعد باید مسیر درست رو
نسبت به همین فایل HTML بنویسید
پس اگر هیچ CSS روی صفحه‌تون اعمال نشد
اولین چیزی که باید بررسی کنید اینه که
آیا این لینک درسته یا نه
یعنی آیا فایل استایل‌هاتون درست به HTML
متصل شده یا نه
پس اینجوری می‌تونید بعضی از
رایج‌ترین خطاهای HTML و CSS رو برطرف کنید
ولی اگر به هر دلیلی واقعاً واقعاً نتونستید
هیچ‌کدوم از باگ‌هایی که پیدا کردید رو درست کنید
حتی با استفاده از همه ابزارهایی
که توی این ویدیو نشون دادم
اون وقت می‌تونید یه سؤال مطرح کنید
توی یکی از پلتفرم‌هایی که نشون دادم
به خصوص توی Stack Overflow
یا می‌تونید یه سؤال جدید مطرح کنید
اینجا توی Q&A یودمی
حالا چیزی که مهمه اینه که همیشه
کل کدتون رو اول توی CodePen بذارید
به جای اینکه همه کد رو کپی‌پیست کنید
توی Stack Overflow یا بخش Q&A یودمی
لطفاً کار رو برای کسی که می‌خواد بهتون کمک کنه راحت کنید
و به جاش همه کدتون رو توی CodePen قرار بدید
ما قبلاً برای چالش‌ها از CodePen استفاده کردیم
اما برای اطمینان
خب الان کجاست؟
آهان اینجاست
پس شروع به کدنویسی کنید یا فقط /pen رو تایپ کنید
و دوباره کل کدتون رو اینجا توی بخش HTML بذارید
و همه CSS رو هم اینجا
و اگر جاوااسکریپت دارید اون رو هم می‌تونید اینجا بذارید
بعد ذخیره کنید که برای این کار نیاز به اکانت دارید
و بعد فقط URL رو کپی کنید و بذارید
توی Stack Overflow یا بخش Q&A یودمی
خب خیلی عالی
فکر می‌کنم این بخش درباره مهارت‌های پایه
دیباگ کردن و پرسیدن سؤال کافیه
البته دیباگ کردن می‌تونه خیلی عمیق‌تر از این باشه
ولی فعلاً فقط می‌خواستم یه دید کلی بهتون بدم
که دیباگینگ چیه و چطور کار می‌کنه
و حالا برای جمع‌بندی این بخش
بریم ادامه پروژه چالش کدنویسی‌مون رو
که توی ویدیوی بعدی روش کار می‌کنیم بسازیم