ابزارهای مورد نیاز برنامه‌نویسان وب

مقدمه

یادگیری HTML اولین گام اساسی در فرایند تبدیل‌شدن به یک برنامه‌نویس وب است و به عبارتی، نقطه‌ی شروع مسیری است که هرگز به انتها نمی‌رسد! زیرا به دلایل مختلفی از قبیل تغییر و توسعه‌ی بی‌وقفه‌ی تکنولوژی‌های برنامه‌نویسی وب، هیچ‌وقت از مطالعه و آزمایش، بی‌نیاز نمی‌شوید. برنامه‌نویسان با تجربه و زبده هم هر روز زمانی را به این امر اختصاص می‌دهند. اما بدیهی است که هر چقدر در این مسیر جلو بروید، قادر خواهید بود که کارهای بیشتر و بهتری را انجام دهید و با انجام پروژه‌های مختلف، باتجربه‌تر می‌شوید. در این درس، قصد داریم مهمترین ابزارهایی را که در این مسیر به آنها نیاز دارید، معرفی کنیم. در حقیقت، شما به عنوان یک برنامه‌نویس وب، کار خود را با یک مجموعه‌ی حداقلی از ابزارها شروع می‌کنید که شامل یک ویرایشگر کد و یک مرورگر وب است و در طول زمان، جعبه‌ابزار خود را به ابزارهای دیگر مجهز می‌کنید. دنیای تکنولوژی چه در بخش سخت‌افزار و چه در بخش نرم‌افزار، مدام در حال تغییر و تکامل است و لذا گاهی نیاز پیدا خواهید کرد که یک ابزار خود را با یک نمونه‌ی مدرن‌تر از آن تعویض کنید و گاهی نیز در بین ابزارهای موجود باید دست به انتخاب بزنید و از بین چند مورد مناسب، یکی را انتخاب کنید.

ابزارهای لازم برای شروع برنامه‌نویسی وب

همانطور که در مقدمه‌ی این درس هم اشاره کردیم، تنها ابزارهایی که در این مرحله نیاز دارید، عبارتند از: یک ویرایشگر کد (code editor) برای نوشتن کدها و یک مرورگر وب (web browser) برای آزمایش کدها. صفحات وب یا اسناد HTML، فایل‌‌های متنی ساده با پسوند .html هستند. بنابراین، اولین ابزاری که برای کار با HTML و کدنویسی به این زبان نیاز داریم، یک ویرایشگر برای نوشتن کدهاست. از طرف دیگر، برای اجرای کدهای نوشته‌شده به زبان HTML و نمایش صفحات وب، به یک مفسر نیاز داریم و مرورگرهای وب، مهمترین و در دسترس‌ترین مفسرهای HTML هستند.

انتخاب یک ویرایشگر کد

قبل از هر چیز باید بدانید که انتخاب ویرایشگر، یک موضوع کاملاً سلیقه‌ای است و چیزی به اسم «بهترین ویرایشگر کد» وجود ندارد و بین ویرایشگرهایی که بین برنامه‌نویسان وب رایج است، تفاوت فاحشی وجود ندارد. به طور کلی، برای انتخاب یک ویرایشگر کد، چند گزینه در مقابل ما قرار دارد:

• ویرایشگرهای متن ساده: ویرایشگرهای متن ساده مانند Notepad در ویندوز و یا TextEdit در مکینتاش و ویرایشگرهای پیش‌فرض توزیع‌های مختلف لینوکس برای کدنویسی و ایجاد صفحات وب کافی هستند. این ویرایشگرها هیچ کمکی به نوشتن کدها نمی‌کنند و از قابلیت‌هایی مثل تکمیل خودکار کدها و تشخیص خطا برخوردار نیستند. این موضوع می‌تواند یک ایراد و در عین حال یک مزیت باشد. زیرا از یک طرف، شما خودتان باید مراقب اشتباهات تایپی و گرامری خود باشید و ویرایشگر کمکی به شما نمی‌کند و بنابراین، سرعت کدنویسی کاهش می‌یابد و از طرف دیگر، این امر باعث تقویت مهارت برنامه‌نویسان تازه‌کار می‌شود و در ازای زمان بیشتری که در ابتدا برای کدنویسی می‌گذارند، ماهرتر شده و در آینده کمتر اشتباه می‌کنند.
• ویرایشگرهای کد هوشمند: یک ویرایشگر کد هوشمند بر خلاف ویرایشگرهای ساده، حکم یک دستیار را برای ما دارد و از قابلیت‌هایی مانند تکمیل خودکار کدها و کشف برخی خطاهای گرامری برخوردار است. ویرایشگرهای هوشمند Visual Studio Code، Notepad++، Sublime Text، Brackets، Vim و Espresso (مختص مکینتاش) توسط بسیاری از برنامه‌نویسان استفاده می‌شوند. این ویرایشگرها با امکاناتی که دارند، کار کدنویسی را تسهیل و تسریع می‌کنند.
• ویرایشگرهای هیبریدی: یک ویرایشگر هیبریدی یا ترکیبی یک پکیج نرم‌افزاری است که امکانات مختلفی را برای فرایند توسعه‌ی اپلیکیشن ارائه می‌دهد که یک ویرایشگر کد هم یکی از این امکانات است. به عنوان نمونه، می‌توانیم به نرم‌افزار پیشرفته‌ی Adobe Dreamweaver اشاره کنیم که مجموعه‌ای از امکانات و ابزارها را برای کدنویسی HTML و سایر تکنولوژی‌های وب مانند CSS و جاوااسکریپت و انتشار وبسایت ارائه می‌دهد. یک ویرایشگر هیبریدی را می‌توانیم معادل یک Web IDE بدانیم. IDE مخفف Integrated Development Environment و به معنای محیط توسعه‌ی یکپارچه است.
• ویرایشگرهای آنلاین: گروه دیگری از ویرایشگرهای کد هستند که به صورت آنلاین در دسترس ما قرار دارند. برای نمونه، می‌توانیم از CodePen و یا Codespaces نام ببریم. این ویرایشگرها برای اهداف آزمایشی مفید هستند و مزیت آنها این است که از هر جایی در دسترس ما هستند اما برای پروژه‌های عملی و واقعی کافی نیستند و می‌توانند به عنوان مکمل مورد استفاده قرار گیرند.

در اینجا سعی کردیم تعدادی از ویرایشگرها و نرم‌افزارهای مطرح و محبوب را نام ببریم اما انتخاب نهایی با شماست. به کسانی که در انتخاب مردد هستند و تجربه‌ی کار با ویرایشگرها را ندارند، ویرایشگر Visual Studio Code را پیشنهاد می‌کنم که توسط مایکروسافت و به صورت متن‌باز (open source) و رایگان ارائه شده و پلاگین‌های متعدد و متنوعی نیز برای آن وجود دارد. تأکید می‌کنم که اگر ویرایشگر دیگری را برگزینید (حتی خارج از لیست بالا)، اشتباه نکرده‌اید.

به علاوه، در این وبسایت یک ویرایشگر کد آنلاین نیز تعبیه شده که امکان اجرا و ویرایش کدها را برای شما فراهم می‌کند.

HTML

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>document title</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>Hello World!</p>
</body>
</html>

انتخاب یک مرورگر وب

همانطور که گفته شد، برای تفسیر کدهای HTML و نمایش صفحات وب به یک مرورگر نیاز داریم. بازار مرورگرهای دسکتاپ در اختیار چند کمپانی مطرح دنیاست. در حال حاضر، گوگل با Chrome در صدر مرورگرهای محبوب دنیا یکه‌تازی می‌کند و اپل با Safari، مایکروسافت با Edge و موزیلا با Firefox به دنبال افزایش سهم خود از بازار هستند.

حالا سوال این است که: از کدام‌یک از این مرورگرها برای آزمایش کدهای خود استفاده کنیم؟
توجه داشته باشید که صفحه‌ی وب ما در نهایت روی مرورگر کاربران نمایش داده می‌شود و ما نمی‌توانیم نوع و نسخه‌ی مرورگر را به کاربران تحمیل کنیم و هر کاربر از مرورگر دلخواهش استفاده می‌کند. تفاوت‌های موجود بین مرورگرهای مختلف و همینطور تفاوت‌های بین نسخه‌های مختلف یک مرورگر، که در درس قبل در مورد چند و چون آن صحبت کردیم، کار ما را برای انتخاب یک مرورگر برای آزمایش کدها سخت می‌کند. در یک حالت ایده‌آل، ما باید صفحه‌ی خود را روی نسخه‌های مختلف همه‌ی مرورگرهای اصلی تست کنیم که کاری سخت و زمان‌بر و تقریباً نشدنی است.

موضوع دیگری که باید بدانید این است که با توسعه و تکامل زبان HTML، برخی از ویژگی‌های موجود در نسخه‌های قبلی، منسوخ یا از رده‌خارج (deprecated) محسوب می‌شوند و بخشی از استاندارد HTML به حساب نمی‌آیند. اما نباید تصور کنید که وقتی یک ویژگی منسوخ شد، بی‌درنگ توسط مرورگرها کنار گذاشته می‌شود. وبسایت‌های قدیمی که این ویژگی‌ها را به کار گرفته‌اند، برای نمایش صحیح، به این ویژگی‌ها محتاج هستند. در حقیقت، در کدنویسی وب ما نمی‌توانیم آخرین امکانات استاندارد HTML را ملاک کار خود قرار دهیم و با خیال راحت از آنها استفاده کنیم زیرا کاربران زیادی هستند که از نسخه‌های قدیمی مرورگرهای وب استفاده می‌کنند و این مرورگرها قادر به تفسیر برخی ویژگی‌های جدید HTML نیستند. از طرفی دیگر، کسانی که از یک وبسایت قدیمی نگهداری می‌کنند، می‌دانند که این وبسایت‌ها برای نمایش صحیح به ویژگی‌های قدیمی نیازمند هستند. همانطور که در درس قبل گفتیم، حفظ این سازگاری، دلیل اصلی منازعه‌ای بود که منجر به تولد HTML5 شد. به طور کلی، یکی از چالش‌های اساسی طراحان وب این است که بتوانند کدی بنویسند که از آخرین مزایای HTML بهره ببرد و در عین حال، در مرورگرهای قدیمی نیز با مشکل مواجه نشود.

به هر حال، در این مقطع، آخرین نسخه‌ی مرورگر Chrome را روی کامپیوترتان نصب کنید تا مشکلی برای آزمایش قابلیت‌های جدید HTML نداشته باشید. در ضمن، می‌توانید برای بررسی وضعیت پشتیبانی مرورگرها از امکانات HTML، از ابزار بسیار کارامد CanIUse استفاده کنید. در این وبسایت، می‌توانیم ببنیم عنصر یا صفت HTML مورد نظر ما در چه نسخه‌هایی از هر یک از مرورگرهای اصلی پشتیبانی می‌شود. در طول این آموزش، روش‌ها و راه‌کارهایی نیز برای نوشتن کدی که با حداکثر میزان پشتیبانی در مرورگرها همراه باشد، ارائه خواهد شد.

سایر ابزارهای مورد نیاز برنامه‌نویسان وب

بسیار خوب، ما الان همه‌ی آنچه را که برای شروع کار لازم است، در اختیار داریم: یک ویرایشگر کد، یک مرورگر وب و یک ابزار آنلاین که ما را از وضعیت پشتیبانی مرورگرها از ویژگی‌های HTML آگاه می‌کند. اما اجازه دهید در پایان این درس، تعدادی از ابزارهایی را که در آینده به آنها نیاز پیدا خواهید کرد و در جعبه ابزار برنامه‌نویسان حرفه‌ای یافت می‌شوند، معرفی کنیم:

• یک ویرایشگر گرافیکی: برای قرار دادن تصاویر در صفحات وب، باید تصاویر مورد نظر برای این منظور آماده و بهینه‌سازی شوند. به همین دلیل، معمولاً یک ویرایشگر گرافیکی مانند Adobe Photoshop یا Adobe XD و یا ویرایشگرهای گرافیکی رایگانی مانند GIMP یا PAINT.NET در جعبه ابزار برنامه‌نویسان وب یافت می‌شود.
• یک سیستم کنترل نسخه: احتمالاً نام Git را شنیده‌اید. Git در حال حاضر معروف‌ترین و محبوب‌ترین سیستم کنترل نسخه است. یک سیستم کنترل نسخه یا Version Control System که به اختصار VCS نیز گفته می‌شود، توسط بسیاری از برنامه‌نویسان حرفه‌ای استفاده می‌شود. مدیریت فایل‌ها در سرور، مشارکت در یک پروژه‌ی تیمی و به اشتراک‌گذاری کدهای پروژه از مهمترین کارهایی است که برنامه‌نویسان وب با استفاده از Git انجام می‌دهند.
• یک سیستم اتوماسیون: منظور از یک سیستم اتوماسیون (automation system) ابزارهایی مانند Webpack یا Gulp و یا Grunt است که برای خودکارسازی برخی کارهای تکراری مانند اجرای تست‌ها کاربرد دارند.
• کتابخانه‌ها و فریمورک‌ها: برنامه‌نویسی وب بدون استفاده از فریمورک‌ها و کتابخانه‌های وب کار سختی است. کتابخانه‌ها و فریمورک‌های وب، مجموعه‌هایی از قابلیت‌های از پیش نوشته‌شده هستند که پایه و مبنای طراحی و انتشار اپلکیشن‌های وب را فراهم می‌کنند.

به این لیست می‌توان موارد دیگری را نیز اضافه کرد و با گذر زمان و معرفی تکنولوژی‌های جدیدتر و کاراتر بسیاری از این موارد عملاً از جعبه‌ابزار برنامه‌نویسان وب خارج شده و موارد دیگری به آن اضافه می‌شود. به هر حال، تأکید می‌کنم که تنها ابزارهایی که در این مقطع به آنها نیاز داریم، یک ویرایشگر کد برای نوشتن کدهای HTML و یک مرورگر وب مانند Chrome است.