این ایده که شما میتوانید در زمینهٔ توسعه front-end از جاوااسکریپت استفاده کنید و موفق شوید، یک اشتیاق روبه رشد در بین مردم است.
اگر صادق باشیم، خوب یا بد، ممکن است بتوانید؛ اما شما فقط در حال ساخت سازه‌ای بر بالاترین نقطه یک فونداسیون شکننده هستید که به‌زودی به شما آسیب می‌زند.
چرا من به HTML و CSS نیاز دارم؟
قالب‌های کاری (UI) که ما امروزه می‌شناسیم مثل React و Vue روی بلوک‌های اصولی یک صفحه وب ساخته‌شده‌اند.
اگرچه قالب‌های کاری UI، این اصول را با استفاده از بعضی ابزارهای جالب و جاوااسکریپت تقویت می‌کنند، اما آنچه شما می‌سازید اساساً چیزی مشابه وبسایت Space Jam مربوط به سال 1996 است.
اما من این را می‌دانم که نوشتن دستی HTML و CSS منسوخ شده است.
بدانید که ابزارهایتان چه‌کاری انجام می‌دهند!
داشتن حداقل یک فهم اساسی از آنچه در پشت کار اتفاق می‌افتد، بیاندازه به شما کمک می‌کند که نرم‌افزارتان را توسعه دهید و نواقص را رفع کنید.
شما ممکن است چیزهای عجیبی را در حال اجرا در مرورگر دیده باشید مثل اینکه چرا HTML یک کد را به‌جای دیگری انتقال داده است؟
به مثال زیر توجه کنید:
وقتی‌که شما چنین چیزی را در Chrome بارگذاری می‌کنید، متوجه یک سری تغییرات می‌شوید...
چرا تمام پاراگراف‌های من به رنگ بنفش نیست؟ اشکال کار از کجاست؟
یک تگ پاراگراف (<p>) نمی‌تواند شامل اِلِمان بلوکی دیگری باشد، بنابراین Chrome و سایر مرورگرها، HTML شمارا به‌سرعت برای اعتباربخشی به آن انطباق می‌دهند.
HTML در این مورد بسیار آسان‌گیر است! اما این‌یک ایراد رایج است که توسعه‌دهندگان قدیمی و جدیدی را که با نحوه عملکرد HTML آشنا نیستند، گیج می‌کند.
جادوی CSS را یاد بگیرید
این روزها CSS می‌تواند هرکاری انجام دهد که البته بیشتر از تنظیم تعداد کمی رنگ است و شما را قادر می‌سازد که الگوهای پیوسته UI را از طریق نرم‌افزارتان فراهم کنید.
اگر شما تازه یادگیری جاوااسکریپت را شروع کرده‌اید، احتمالاً وسوسه شدید که هر کاری با آن انجام دهید اما به‌زودی متوجه می‌شوید که مدیریت تمام قدرت واقعی CSS در جاوااسکریپت شما، کاری پرزحمت و غیرضروری است مگر اینکه شما در محیط Facebook باشید.
شما چه‌کاری را میتوانید با CSS انجام دهید؟ تنها با CSS، عنوان Alien movie را بسازید. حالت شناور برای دکمه‌هایتان تعریف کنید یا هرچیزی را انیمیشن کنید.
یکی از کارهای موردعلاقه من ساخت یک شبهِ Facebook سرگرم‌کننده است با بارگذاری کلاس انیمیشن که یک پشت زمینه گرادیانت انیمیشنی را با هر چیزی که به آن اضافه کنید، منطبق می‌کند.
در زیر من نمونه کدی از آن را برای شما نوشته‌ام:
موتورهای جستجو بهترین عملکرد را برای انطباق محتوایی که شما می‌نویسید با آنچه کاربران جستجو می‌کنند، نشان می‌دهند؛ اما طوری که شما HTML خودتان را می‌نویسید، با کمک به آن برای تعیین مقادیر تفاوت ایجاد می‌کند.
یک اشتباه رایج که من می‌بینم، استفاده از اِلِمان‌های هدایت کننده به‌صورت اشتباه یا به‌طور کل استفاده نکردن از آنها است.
عبارت "جادوی CSS را یاد بگیرید" عبارت کلیدی برای رسیدن به این صفحه نیست، بنابراین من نمی‌خواهم که آن را به‌صورت مهمترین عبارت برجسته کنم. اگرچه عنوان این پست "جاوااسکریپت را رها کنید و HTML و CSS یاد بگیرید" داستان کلی را روایت می‌کند و آن را به‌صورت مهمترین عبارت نشان می‌دهد.
بنابراین به‌وسیله HTML، من می خواهم آن را طوری نشان دهم که به‌صورت زیر به نظر بیاید:
این کار به Bing (موتور جستجو شرکت مایکروسافت)، Google و تمام موتورهای جستجو اجازه می‌دهد که دقیقاً بفهمند چه چیزی باید مهمترین بخش صفحه باشد و به شناسایی سلسله‌مراتب کلی هم کمک می‌کند.
دسترسی‌های خاصی ایجاد کنید
با کدنویسی بدون برنامه، به‌صورت خودکار مانع دسترسی مردم به سایتی می‌شویم که برای ایجاد آن سخت تلاش کرده‌ایم.
معمولاً مردم مراقب چیزی که ساخته می‌شود، بیشتر از من و شما نیستند. با انجام یک سری تکالیف در مرحله اول و صرف زمان بیشتری برای فکر کردن در مورد کدی که می‌نویسیم، می‌توانیم تمام دوستانمان را به بازدید از سایت ترغیب کنیم.
یک لیست از راهنمای مسیر ساده رایج که امروزه در بیشتر وبسایت‌ها دیده می‌شود، تهیه کنید. ممکن است که وسوسه شوید تعداد کمی div بنویسید چون آنها به‌درستی کار می‌کنند؟ ویا به جای آن از تگ‌های معنایی (Semantic) استفاده کنید؟
مسئله این است که دسترسی به آنها برای خوانندگان صفحات، آسان نیست. برای رفع این مشکل شما ازنظر تکنیکی میتوانید حتی HTML کمتری بنویسید.
از این روش به‌عنوان قدم بعدی استفاده کنید، اگر این منوی راهنمای شما است، آن را در قالب یک اِلِمان راهنمای HTML5 بگذارید.
کدتان را ساده کنید
تعداد توابع بومی که امروزه در میان مرورگرهای مدرن وجود دارند، باوجود حمایت‌های بیش از انتظار شما برای مرورگر (با ابراز تأسف برای کسانی که هنوز IE9 را حمایت می‌کنند)، آمار غافلگیرکننده‌ای است.
با استفاده از کد‌های Html ما می‌توانیم یک منوی dropdown بسازیم.
با استفاده از مزیت‌های CSS، ما می‌توانیم به‌صورت پویا یک اِلِمان شبیه جعبه کنترل ایجاد کنیم که به‌صورت چک شده یا نشده عمل کند:
این کار و هنر شماست، به آن توجه بیشتری کنید
شرط می‌بندم که بیشتر مردمی که این مقاله را می‌خوانند، این کارها را انجام می‌دهند چون آنها مراقب کدشان هستند و در واقع بیشتر از همه برای آن دلسوز هستند. درست مثل هر کار دیگری قبل از توسعه و تمرین و تمرکز بر اصول، توانایی‌تان را به‌عنوان یک توسعه‌دهنده تقویت کنید.
به‌راحتی با فراگیر کردن کارتان و جذب مخاطب بیشتر برای نرم‌افزارتان، احساس برنده بودن خواهید داشت.
کلام آخر
در این مقاله ما بر اهمیت یادگیری html و css قبل از اینکه بخواهید جاوااسکریپت یاد بگیرید صحبت کردیم.
دوره‌هایی جدید و رایگان از html و css بر روی سایت قرار دارند. در زیر لینک آنها برای شما قرار می‌دهم.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید