3 - Setting Up Live Server + Deeper look to how to coding.

به نام ایزد توانادر این پست آموزشی در مورد کد زدن زنده و اینکه چطور بلافاصله نتیجه کد رو ببینم صحبت خواهیم کرد.همچنین مقداری هم به حاشیه میریم و در مورد مواردی مثل محل های کد زدن و آموزش شروع به کار صحبت میکنیم.امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.اگر سوال یا ه حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنیدTelegram, Twitter, Facebook & ... By : @ARiyou2000با تشکر از همه شما دوستان، آریو جهاندیگه بریم سر اصل مطلباگه میدونید کجا کد بزنید و اصول معمول کد زدن رو می دونید از این مبحث بگذرید و مستقیم برید سر بخش بعد.اگرم کلا اطلاعی از شروع کار ندارید می تونید به پست اولم مراجعه کنید.تا اینجای کار با چندتا محیط کد نویسی آشنا شدیم؛ اگر اونها رو فراموش کردید طوری نیست.یکی از اون ها سایت W3Schools هستش که مرجع اصلی ماست و شما میتونید هم آموزش ببینید و هم کدتونو آنلاین امتحان کنید. خوبیش اینه که رو گوشی هم اجرا میشه.یکی دیگه که قدرت پردازش بی نظیری هم داره Web Storm هستش که پولیه ولی میتونید از سایت های ایرانی نسخه سالم و کرک شدش رو گیر بیارید. این گزینه یا مشابهش که مال همون شرکته (Jetbrains) یعنی IntelliJ IDEA معروف گزینه های خوبی هستندهمچنین می تونید از Visual Studio Code که حجم کمی هم داره استفاده کنید. ولی خودم قبلی رو ترجیح میدم.شما حتی می تونید تو notepad یا notepad++ هم کد بزنید.ولی بعضی از اونها یه مشکل کوچیک ولی دردسر ساز داشتن. از جمله محیط پیشنهادی خودم یعنی وب استورم.اون مشکل هم این بود که شما برای دیدن نتیجه کار هر دفعه باید کد رو سیو می کزدید و بعد به مرورگر می رفتید و صفحه رو دوباره ریفرش می کردید. شاید ساده به نظر بیاد ولی کافیه یکم کد بزنید تا ببینید چقدر رو مخه.خب گفتیم ابزار دیگه ای که به شدت نیازه و بدون اون اصلا نمیشه کار کرد یه مرورگر خوبه.ما به خاطر هماهنگی وب استورم با کروم از Chrome استفاده میکنیم(به من چه که کروم رم سیستم رو میخوره. هم پارتی کلفتی مثل گوگل داره هم دمش گرمه و قدرت مند داره عمل میکنه. به عبارتی گردنش کلفته). خب حالا که همه چی اوکی شد و می تونیم راحت (یا بعد یکم ریفرش زدن، با خیال ناراحت) کد بزنیم و امتحانش کنیم، میریم سراغ اصل کار.اگه تا اینجای کار با من همراه بودید و تو وب استورم کد زدید، نیاز به یه افزونه کوچیک تو کروم دارید.افزونه ها برنامه های کوچیکی هستن که تو مرورگرها دانلود، نصب و اجرا میشن.فقط کافیه این افزونه رو از این لینک دانلود کنید (یا خودتون تو گوگل در موردش جست و جو کنید).نکته: در مورد اجرا شدنش روی opera نمی تونم الان نظر قطعی بدم اما خودم با مشکلاتی تو استفاده مواجه شدم (از نظراتتون بینهایت ممنون میشم).تا امروز این کارو واسه Fire Fox تست نکردم.خب حالا که که extension یا همون افزونه مورد نظرمون رو نصب کردیم می رسیم به گام دوم.حالا باید وارد web storm بشید و در صفحه کدهاتون کلیک راست کنید. سپس روی گزینه Debug کلیک کنید و BOOM.حالا میرسیم به گام آخر که خیلی خیلی سخته. الان شما باید مرورگر رو به یه طرف صفحه و ادیتور کد رو به سمت دیگه منتقل کنید.شاید واستون سوال باشه که قسمت سختش کجاست؟ خب سوال خوبیه. اتفاقا واسه خودمم سواله.سختیش اونجاست که باید تصمیم بگیری مرورگر سمت چپ باشه یا ادیتور؟ به هر کروم چقدر فضا بدی؟ باور کنید خودش یه چالشه.راستی امروز از یه مانیتور استفاده می کنی و فردا احتمالا یه مانیتور دیگه هم بندازی کنارش؛ پس فردا هم قطعا اونقدر درامد داری که یه صفحه کشیده نسل جدید LG یا Samsung رو بخری. فکر کن اونروز این کار چقدر سخت شه!یه راه دیگه دادن نتیجه بالافاصله هم استفاده از ادیتورهای آنلاینه که الان اسمشونو یادم نیست ولی خیلی محیط خوشکلی دارن (قابل توجه اون عزیزان عقده ای تازه کدنویس که بعد هر خط 3 ساعت ازش دارن عکس پست می کنن).به هر حال این بحث هم به پایان رسید. اگه به اطلاعات بیشتری نیاز داشتید می تونید از لینک زیر استفاده کنید.https://www.jetbrains.com/help/webstorm/live-editing.htmlیادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبال کنیدم تا انگیزه داشته باشم بنویسم❤️شب و روزگار بر شما خوش.بدرود.ARiyou Jahan ‏12/01‏/2019‏ 10:34 ب.ظ