نوشته های اشکان

وب پک قسمت ششم... مرگ وب پک به دست ویت

اشکان — Sun, 23 Jan 2022 15:20:59 +0330

سلام من اشکان هستم و بعد از یک وققه طولانی تصمیم گرفتم با نوشتن مطلبی در ادامه مطالب آموزش وب پک شاید دوباره نوشتن و ساخت ویدیو رو شروع کنم.قصه از اینجا شروع شد که یکی از دوستان سری آموزش وب پک ۵ رو خونده بود و باعث شد که توجه من به ویرگول جلب بشه و این سوال برام پیش بیاد که "مگه کسی هنوز از وب پک استفاده میکنه؟"خوب البته که وب پک زمانی تنها گزینه پیش روی ما برای ساخت پروژه ها و برنامه نویسی بود، با بیش از ۷۴ میلیون دانلود در ماه! و البته بسیار کند و تنظیم کردنش به معنای حقیقی کلمه دردناک بود، بعدها باندلرهای دیگه ای هم مثل parcel و... اومدن که هرکدوم قصدشون این بود که کار کاربر رو کمی آسونتر کنند اما امروز ما گزینه ای پیش رومون داریم که استفاده از وب پک رو کاملا غیر ضروری میکنه. در واقع این روزها هدف فریم ورک ها و پلتفرم ها و همه ابزارها اینه که کار برنامه نویس اونقدری آسون بشه که درگیر ستاپ و تنظیمات اولیه نشه و در واقع حتی کدهای بویلرپلیت هم اونقدر زیاد شدن که برای هر زبان برنامه نویسی و تقریبا هر نوع پروژه ای میشه کد استارتری رو پیدا کرد که نخوایم چرخ رو از اول اختراع کنیم.در مورد وب پک اما نکته اینه که ما واقعا زمانی گزینه دیگه ای پیش رو نداشتیم! مجبور بودیم که با وب پک کدمون رو باندل کنیم و از قابلیت HMR یا Hot Module Reloading جذابش استفاده کنیم(قابلیتی که اجازه میداد بلافاصله بعد از سیو کردن یا آپدیت کردن پروژه بروزر ریفرش بشه و تغییری که دادیم رُ سریعا ببینیم) و عجب پروسه سخت و عجیبی بود برای اینکه ساده ترین کارها رو بتونیم فقط ستاپ کنیم ساعت ها وقت بگذاریم که محیطی رو به وجود بیاریم که بشه یک برنامه ساده بنویسیم.خوب خبر خوب اینه که دیگه نیازی به وب پک ندارید نه تنها شما بلکه فریمورک ها و لایبراری هایی که توی هسته خودشون از وب پک استفاده میکردند همه یا تغییرش دادند یا مشغول برنامه ریزی برای فرار از دست این موجود دست و پا گیر هستند.اما یک تاریخچه جزیی...یک آقای چینی به نام Evan You که سابقا کارمند گوگل هم بوده یک فریمورک سمت کاربر یا اصطلاحا Front-end به نام Vue طراحی میکنه که هسته اون مثل ری اکت قدرت گرفته از وب پک بود. اسم ویو هم یک کلمه فرانسویه که معنیش میشه View یا منظره. ایشون مدتی قبل، از دست وب پک عاصی میشه و تصمیم میگیره یک باندلر جدید بنویسه که هم کاربری اون آسون باشه و هم سرعتش بالاتر باشه بنابر این میاد یک ابزاری میسازه که خیلی سریع بوده و به تبعیت از Vue اسمش رو از کلمه فرانسوی دیگه ای عاریه میگیره که معنی سریع و چابک میده یعنی Vite. خیلی وسوسه انگیزه که این کلمه رو وایت تلفظ کنیم اما تلفظ صحیح و فرانسوی اون ویت هست /vit/.البته CLI ویو هنوز یه ویت مهاجرت نکرده و قطعا این اتفاق کمی زمانبر ولی غیر قابل اجتنابه اما بیاید کمی با هم مقایسه کنیم سرعت ویت و وب پک رو برای ایجاد پروژه های مختلف فارغ از اینکه تمام دردسرهایی که شما با استفاده از وب پک درگیرشون می شدید از دوشتون برداشته شده و همه چیز به صورت اتوماتیک توسط ویت هندل میشه فقط قصد داریم سرعت بیلد یک پروژه، سرعت بالا اومدن سرور در محیط دولوپمنت و زمان لود صفحه در محیط دولوپمنت رو بین ویت و وب پک مقایسه کنیم: برای ساخت یک پروژه Vue:میخواید براتون جذاب تر کنم قضیه رُ؟ ویت به قول معروف اوت آو د باکس (یعنی همینطور از سر خوش) تایپ اسکریپت رو ساپورت میکنه و بله JSX رو هم میفهمه... یعنی شما یک فایل tsx بنویسید و ویت خودش براتون در عرض چند میلی ثانیه پارسش میکنه.توی هسته خودش ویت از ۲ تا ابزار مهم استفاده میکنه: یکی ESBuild در حین دولوپمنت و یکی هم Rollup زمان باندل نهایی (پروداکشن).و اینکه ویت ۲ تا کمبود داره در حال حاضر اول اینکه پشتیبانی ویت از SSR فعلا در فاز آزمایشیه و استفاده از SSR ویت برای پروداکشن فعلا توصیه نمیشه و دوم اینکه اگرچه ویت، تایپ اسکریپت رو پارس میکنه اما تایپ چک نمیکنه و شما برای این کار باید به قابلیت های ادیتورتون تکیه کنید که اکثر اونها بخصوص وی اس کد بصورت پیشفرض این کار رو براتون انجام میدن.در نهایت اینکه اگر پروژه فعلی شما برای وب پک کانفیگ شده پس دست بهش نزنید و با اون ادامه بدید اما اگر میخواید یک پروژه جدید بنویسید حتما ویت رو امتحان کنید.دوست دارید با هم از ویت استفاده کنیم؟ کامنت بگذارید و بگید که چه نوع پروژه ای با ویت بسازیم؟ مثلا ری اکت یا ویو یا threejs یا هرچی. بر اساس کامنت شما من ویدیو ساخت پروژه با ویت رو همین روزها می سازم.مثل همیشه ممنون از همراهی شما.

قراردادهوشمند چیه و چقدر هوشمنده؟

اشکان — Sat, 24 Apr 2021 13:01:46 +0430

در پایان این پست شما قراره بدونید که قراردادهای هوشمند یا اسمارت کانترکتها چی هستند؟ و چرا اونقدرهایی هم که میگن هوشمند نیستند و چرا بیت کوین یک جورهایی خسته کننده ست.سلام من اشکان هستم و شما سومین پست من، از سری پست های مرتبط با شبکه بلاکچین، کریپتو، اسمارت کانترکت و موارد مرتبط با اونها رو از دید برنامه نویسی مطالعه میکنید. طبق معمول اینجا نه قراره سیگنال بدیم نه مشاوره خرید و فروش و نه اینکه رشد و افت قیمت بیت کوین و آلت کوین ها برامون اهمیت داره، همه چیزی که ما بهش اهمیت میدیم تکنولوژی و ابداعات پشت صحنه این پروژه هاست.واقعا اگر یک فیچر از این تکنولوژی های مرتبط با رمزارزها و بلاکچین و... باشه که منو دیوونه کرد همین اسمارت کانترکته! بله بیت کوین هم خیلی باحاله و بلاکچین هم جالبه و این حرفا اما... اما دقیقا وقتی که من اسمارت کانترکت رو درک کردم بود که فهمیدم میخوام این راه رو ادامه بدم چون این مفهوم (اسمارت کانترکت) سنگ بنای همه فیچرهای خفنیه که این روزها میشنویم مثل NFT مثل tokenها مثل ICOها یا صرافی های غیر متمرکز و... خلاصه همه این خفنیجات بر پایه اسمارت کانترکت تعریف میشن.پس بیاید با این سوال شروع کنیم که اسمارت کانترکت چی هست؟برای اینکه بفهمیم اسمارت کانترکت چیه اول باید بفهمیم چرا بیت کوین بسیار بدوی و خسته کننده ست و پاسخ این سوال هم اینه که بیت کوین هیچ تعاملی با آدمیزاد نداره و فقط بلده پول بین مردم جابجا کنه همین!اما اسمارت کانترکت ها میتونن با کدها تعامل داشته باشند اگر شما بجای کد بگذارید روبات (که یکم به مفهوم آدمیزاد نزدیکش کرده باشیم) این یعنی چی؟ چکار مثلا میشه باهاش کردبرای مثال ما میتونیم بر اساس این کارایی اپلیکیشن های غیر متمرکز بسازیم یا Decentralized Apps اگر کلمه Dapp به گوشتون خورده باشه مخفف همین ترکیبه که یعنی من به عنوان یک دولوپر میتونم کدی بنویسم و بگذارمش روی یک سرور اشتراکی، یک کامپیوتری که همه شبکه بلاکچین مربوطه میتونن بهش دسترسی داشته باشند و اون کد رو اجرا کنند، ببینید فرق داره با وقتی که ما مثلا کدمون رو میذاریم روی آروان یا آمازون بعد سروره که میترکه اپلیکیشن ما هم باهاش میاد پایین.کد شما توی شبکه بلاکچینه، همه میتونن بخوننش (مثل دیتای ترنزاکشن های بیت کوین) ولی طبق خواص شبکه بلاکچین این کد append only هست یعنی کسی نمیتونه کد شما رو پاک یا دستکاری کنه.من یک کد مینویسم و میذارمش روی یک backendی که هیچ مالکی نداره، روی یک بکندی که همه بهش دسترسی دارند و میتونن اون رو همراه با امنیت فوق العاده ای که بلاکچین در اختیارمون میذاره وریفای کنند و اجرا کنند.فوق العاده نیست؟ میدونید مثلا چه کارهایی میشه باهاش انجام داد؟ مثلا شما میتونید یک قلک برای خودتون بسازید و یک اسمارت کانترکت بنویسید که 2 تا دستورالعمل داره اول اینکه پول که دریافت کردی ذخیره ش کن و دوم اینکه بعد از 30 سال این پول رو به من برگردون! دقت کنید شما هیچ مورد امنیتی عجیب و غریب یا قواعد پیچیده و آتنتیکیشن و... نیاز ندارید شما چند خط کد مینویسید و میفرستید توی بلاکچین و این دیگه می مونه توی شبکه برای همیشه! هیچکس نمیتونه تغییری توش ایجاد کنه، پول بفرستید به اون روبات و 30 سال براتون نگهش میداره و هیچ احدالناسی حتی خودتون هم نمیتونه تا 30 سال دیگه پول شما رو دست بزنه و شما میتونید 100 درصد مطمئن باشید که بعد از 30 سال حتما این کد اجرا میشه و به شما پول رو منتقل میکنه.فهمیدید من وقتی میگفتم خیلی خفنه در مورد چی صحبت میکردم؟ اگر هنوز نگرفتید قضیه چیه به مثال دیگه میزنم. فرض کنید شما از طریق یک وب سایت اجاره (از این مدل های کپی airbnb یا حتی خودش) یک ویلا درخواست کردید. این وب سایت واسط بین شما به عنوان کسی که برای 1 هفته مثلا توی فریدون کنار دنبال ویلا میگرده و صاحب اون ویلا خواهد بود. پس شما باید پول رو بدید به این وب سایت و اعتماد کنید که سایت با این آدم مرتبطه و وقتی شما رسیدید فریدون کنار صاحب خونه در رو به روی شما باز میکنه.این وسط شما به این سایت اعتماد کردید و صاحب ویلا هم به این سایت اعتماد کرده.حالا بیاید سایت رو با یک اسمارت کانترکت جایگزین کنیم مثلا یک اسمارت کانترکت مینویسیم که این برنامه (روبات یا هرچی) از طریق IOT (اینترنت اشیا) به در خونه بتونه دستور باز شدن یا قفل شدن بده یا مثلا دسترسی به تلویزیون یا دستگاه چایی ساز بتونه بده و زمان این دسترسی ها رو بر اساس مقدار پولی که بهش واریز شده تنظیم کنه! به همین راحتی شما میتونید واسطه رو از سر راه حذف کنید هم اعتمادتون به این شبکه بیشتر از یک فرده و هم هزینه ها رو کم کردید. پول واریز میشه، یک پسورد یک بار مصرف جنریت میشه و برای خریدار فرستاده میشه و وقتی طرف رسید به خونه با زدن پسورد در رو باز میکنه. حالا بشینید فکر کنید که چه کارهای دیگه ای انجام داد بی نهایت کار وجود داره بی نهایت ایده و موقعیت وجود داره که شما میتونید با چند خط کوتاه برنامه روی شبکه بلاکچینی که از اسمارت کانترکت ها پشتیبانی میکنه اجرا کنید مثلا فرض کنید شما میتونید اسمارت کانترکتی بنویسید که به وای فای خونه تون دسترسی ایجاد کنه و هر زمان یکی از همسایه ها بخواد استفاده کنه با پرداخت رمزارز به این اسمارت کانترکت بتونه موقتا از اینترنت شما استفاده کنه آقا من هرچی بگم کم گفتم چون من اصلا آدم بازاری ای نیستم و مطمئنم خیلی از شما میتونید ایده های خیلی بهتر از این بدید که به راحتی قابل اجرا هستند.البته من اول پست نوشتم که اسمارت کانترکت ها خیلی هم باهوش نیستند چون محدودیت های خاص خودشون رو هم دارند. بزرگ ترین محدودیتی که دارند هم اینه که نمیتونن هر کاری رو که بخوان انجام بدن و اگر خوب بهش فکر کنید اونها فقط میتونند توی شبکه غیر متمرکزی که توش قرار دارند فعالیت کنند، مثلا اگر من و شما با هم شرط ببندیم که فردا بارون میاد یا نه و پولمون رو بریزیم توی یک اسمارت کانترکت و قراردادش رو جوری ببندیم که فردا یک سنسور باران رو چک کنه و بر اساس جواب اون کل پول رو به حساب یکی از ما برگردونه. مشکل اینجاست که در این وضعیت اسمارت کانترکت ما داره به جواب یک سنسور باران اعتماد میکنه یعنی به یک شکل از هوشمندی خارج از شبکه بلاکچین خودش پس اون قضیه قابل اعتماد بودن رو ما از دست میدیم، امنیت رو از دست میدیم چون داریم به یک چیزی خارج از شبکه اعتماد میکنیم که خودش امنیت نداره و جوابش میتونه دستکاری بشه پس خیلی مهمه که ما بدونیم اگر قراره از شبکه اصطلاحا trustless بلاکچین خارج بشیم و به یک شبکه trustful متصل بشیم داریم اون قضیه امنیت رو از دست میدیم.البته برای این هم راه حلی وجود داره مثلا مفهومی داریم به نام Oracle در بلاکچین که ورودی اسمارت کانترکت ها رو به عهده میگیرند که شاید بعدا در موردش صحبت کنیم اما هدف این بود که شما بدونید اسمارت کانترکتها چی هستند و به شما چه امکاناتی میدهند و چطور میتونند مفهوم دلال یا واسطه رو از معاملات روزمره حذف کنند و احتمال کلاهبرداری یا خطا رو به صفر برسونند وقتی قراردادی نوشته میشه هیچ دولت و شخص و واسطه و هکری نمی تونه اخلالی توی اون به وجود بیاره.و در پایان بلاکچین های مختلفی وجود دارند که از اسمارت کانترکت ها پشتیبانی میکنند که البته معروف ترینشون اتریوم هست اما کاردانو و پولکادات و کوساما و کازماس و خیلی های دیگه هم هستند که شاید توی یک مقاله دیگه بیایم اینها رو با هم مقایسه کنیم اما فعلا مهم اینه که بدونیم مفاهیم اولیه و کانسپت بین اینها مشترکه.لطفا اگر نظری پیشنهادی انتقادی دارید برام بنویسید.

بیت کوین نخرید

اشکان — Mon, 12 Apr 2021 12:53:14 +0430

اتریوم هم نخرید در واقع هیچ رمزارزی نخرید!جدی میگمنخرید!سلاممن اشکان هستم و در این پست میخوام در مورد رمزارز، بیت کوین و بلاکچین و ارتباط اونها با یک برنامه نویس صحبت کنم.گفتم که هیچ رمزارزی نخرید... چون من خودم دوست ندارم شما چیزی بخرید... دوست ندارم قیمت ها بالاتر از این بره. خودم یک مقداری رمزارز دارم و قرار نیست در مورد مارکتینگ و خرید و فروش اینجا صحبت کنم ولی اینو میخوام بگم که دوست ندارم قیمت ها بالاتر از این بره.بالعکس ترجیح میدم که قیمت ها پایین تر بیاد که بتونم بیشتر بخرم ولی هدف این پست اصلا این موضوع نیست، هدف از این پست اینه که بفهمیم چرا بعضی از ما داریم رمزارزها رو نادیده میگیریم، وقتی میگم بعضی از ما در واقع بیشتر دارم در مورد برنامه نویس ها صحبت میکنم.ما به عنوان یک برنامه نویس داریم تکنولوژی رو نادیده میگیریم! آینده داره به ما لبخند میزنه و ما بی تفاوت از کنارش عبور میکنیم.ما برنامه نویسیم و اکثرا "بیزنس من" نیستیم، وقتی میبینیم قیمت رمزارزها با سرعت بالا میره به خودمون میگیرم این دنیای رمزارزها قماره حتی میگیم اسکمه یا بدتر شر و وره.در واقع یه جورایی هم دارید درست فکر میکنید اگر اعتقاد دارید این قضیه تجارت کریپتو چرت و پرته در واقع آره! هست! منم با شما موافقم.اکثر آدمایی که امروز توی دنیای کریپتو هستن یا قماربازن یا اسکمر یا از اون قماشی که ارزون میخرن و گرون میفروشن و یه باد توی غبغب میندازن و ادای سرمایه گذارها رو در میارن یا ادعا میکنن که کوین خودشون رو ساخته ن و قراره خیلی گرون بشه و مثل بازار بیتکوین ممکنه شما از بازار کوین اونها هم جا بمونین.واقعا از صمیم قلب میگم که از نظر من همه اینها حقیقت داره!این اتفاقا داره میفته و خیلی هم حال به هم زنه اما!اما ما برنامه نویسیم و قراره زیر پوست این قضیه رو ببینیم پس بیاید یک لحظه قیمت و نمودار و این چرندیات رو فراموش کنیدمیخوایم فقط در مورد فناوری صحبت کنیم، اون چیزی که ما به عنوان برنامه نویس باید بهش اهمیت بدیم.میخوام براتون یک مثال بزنم، یک کریپتو... مثلا بیتکوین (چون از همه معروف تره)چی داره بیتکوین رو میچرخونه؟ چجوریه که دولت ها نمیتونن بیتکوین رو کنترل کنن؟چجوریاست که تا حالا کسی بیتکوین رو هک نکرده؟چی باعث شده که مردم اینقدر عاشق بیتکوین بشن؟ چیه که این پول رو تا این حد امن کرده؟همه اینها مسائلی هستن که بوسیله برنامه هایی به زبان C یا ++C یا Go یا Haskell یا سالیدیتی و... حل شدن! برنامه هایی که در واقع ایده های خفن آدمهای بسیار باهوشی رو پیاده سازی کردن.ما برنامه نویس هایی هستیم که در عصر کریپتوکارنسی و اسمارت کانترکت و بلاکچین زندگی میکنیم.مفاهیمی که بوسیله برنامه های کامپیوتری پیاده سازی شدن! نه شن و ماسه! نه طلا و مس! نه محاسبات مکانیک و نه هیچ چیزی خارج از دنیای ادیتورها! عصری که میشه کدهایی نوشت که اون کدها مثل سکه های طلا داره دست به دست میشه...لحظه ای فکر کنید که چه اتفاقی داره میفته! کدهای ما پول رایج این عصر هستند... یا قراره که بشن!مردم بجای اسکناس و دلار دارن چند خط کد رو به حساب هم انتقال میدن! کدهایی که ارزشی به مراتب بالاتری نسبت به واحد پول رسمی کشورها پیدا کرده.ما در عصر نرم افزار زندگی میکنیم و پول هایی داریم که مهم نیست اسمشون چیه مهم نیست ارزششون چقدره مهم اینه که از چند خط کد ساخته شدن! این دیوونه تون نمیکنه؟میدونید چرا اینها رو گفتم؟ چون همونطور که اول اشاره کردم خیلی از دولوپرها اصلا نمیگیرن قضیه چیه! بابا شما دستگاه چاپ اسکناس هستین!و همونطور که گفتم درک میکنم که مشکل تون چیه اما توجه کنید که پشت پرده چه اتفاقاتی داره میفته.هزاران رمزارز دیگه در کنار بیتکوین وجود دارند و قبول دارم که اکثرشون چرت و پرتن و به قول معروف شت کوین و محکوم به شکست اما اگه شما برنامه نویس خوبی هستید وظیفه تون اینه که توی کد اونها سرک بکشید، بو بکشید، وایت پیپرشون رو بخونید و کشف کنید آیا یک رمزارز بخصوص خوبه یا شت کوین.همین الان کلی پلتفرم آماده وجود داره که شما میتونید توی اونها پول خودتون رو بسازید.میتونید اسمارت کانترکت خودتون رو خلق کنید میتونید به قولی یک سایدچین بسازید، میتونید یک چیزی خلق کنید که به اون NFT گفته میشهاین nft توسط هنرمندی به نام بیپل (بر وزن ریپل) به قیمت 69 میلیون دلار فروخته شدهاگه نمیدونید این هایی که گفتم یعنی چی جمع کنید برید سراغشون! به عنوان یک برنامه نویس باید بدونید که داره چه اتفاقاتی میفته مگر اینکه قصد بازنشستگی داشته باشید.اینکه دیسنترالایزیشن یا غیرتمرکزسازی یعنی چی؟ مکانیزم کانسنسز یا وفاق عمومی یعنی چی؟ پروف آو ورک یا اثبات کار چیه؟ پروف آو استیک یا اثبات سهام چی میگه؟ یا کدومشون بهتره؟ همه اینها رو باید خوب درک کنید چون پایه اونها کدهاییه که به وسیله برنامه نویسها نوشته شده.ببینید یک بازار بزرگ کاری انتظار شما رو میکشه یک بازار که به وسیله صنعت بلاکچین ایجاد شده و قبول دارم که این بازار پر از آدمای شارلاتانه اما یک روزی میرسه که قضیه جدی میشه، اونها میرن کنار و جهان سعی میکنه هرچه بیشتر از دارایی ها و مکانیزمهای فعلیش رو وارد این صنعت کنه.امروز شانس شماست که وارد این صنعت بشید و حداقل مفاهیم اون رو درک کنید، راه آسون که فراره انتخاب خوبی نیست. بدونید که بیتکوین شاید با اصل و نسب ترین باشه اما ساده ترین و احمق ترین کوین موجود بازاره و توی پست های بعدی توضیح میدم که در این بازار کریپتو چه امکانات و ایده هایی وارد شده که آینده رو مال خودشون میکنن. مهم نیست که چقدر ریال یا دلار توی حسابتون دارید مهم اینه که پول اینترنتی در آینده ممکنه ارز فیات رو نابود کنه و آدم هایی که پشت میزهاشون دارن این پول رو میسازن آدمهای خیلی باهوشی هستند، مهندسین، برنامه نویس ها و ریاضی دان هایی که دارن این جریان رو هدایت میکنن از همون نوع آدم هایی هستند که من و شما دوستشون داریم و بهشون احترام میگذاریم پس هیچ عذری برای ما پذیرفته نیست ما دقیقا همون آدمهایی هستیم که باید سوار این موج بشیم و روی این پلتفرم ها ایده هامون رو عملی کنیم چون ماییم که میفهمیم قضیه چیه ماییم که درک میکنیم پشت پرده ی ساخت و انتقال، خط به خط چه اتفاق هایی داره میفته.پس بلند شید و تبدیل به یک نود از این شبکه بشید! یک بلاک بشید و به این بلاکچین اضافه بشید، یک داده بشید و چیزی به این بانک اطلاعاتی اضافه کنید شمایید که میتونید اسکمرها و آدم هایی که فهمی از این قضیه ندارند رو از سر راه کنار بزنید و هزاران شغل جدید تولید کنید.میدونید تکنولوژی یه چیزی توی دل خودش داره... این که چه شما باهاش موافق باشید یا نه راه خودش رو میره. همین الان که دارید این مطلب رو میخونید میلیونها دلار داره از این طریق جابجا میشه و بانک هایی هستن که دارن خودشون رو آماده میکنن که شبکه بلاکچین رو بپذیرند این اتفاقیه که میفته چه شما بگید خوبه چه بگید بده اینها اجتناب ناپذیر هستند.خوب طولانی شد دوست داشتم اینها رو ویدیویی ضبط کنم ولی فعلا حالش و امکاناتش رو ندارم لطفا توی کامنت ها بنویسید نظتون چیه، لایک کنید اگه دوست داشتید و دنبال کنید اگر صلاح میدونید.

بلاکچین

اشکان — Sat, 10 Apr 2021 19:43:46 +0430

این روزها میشنوید که یک ویدیو یا عکس روی شبکه بلاکچین به قیمت های چند میلیون دلاری فروخته میشه.مثلا توییت جک دورسی که اولین توییتی بوده که منتشر شده به قیمت دو و نیم میلیون دلار توسط یک ایرونی خریداری شده.شاید فکر کنین این دیوونگیهشاید بگید که احمقانه ستاما به هر حال ما باید درک کنیم که چه اتفاقی میفته که یک محتوای دیجیتال تا این حد ارزش پیدا میکنه.سلاممن اشکانمتصمیم گرفتم یک سری پست در مورد اکوسیستم بیتکوین، بلاکچین، اسمارت کانترکت و... برای دولوپرها بسازمقرار نیست اینجا در مورد خرید و فروش و مارکت و... صحبت کنیم فقط در مورد تکنولوژی و اینکه چطور ازش باید استفاده کنیم.حالا...هدف از این سری اینه که در انتها شما بفهمید چطوری مردم دارن عکس و ویدیوهای خودشون رو روی شبکه بلاک چین میفروشن؟و قضیه این بازار هنری که روی کریپتو راه افتاده چیه؟مثلا قراره بفهمید فرق بین سوشی سواپ و پنکیک سواپ چیهیا اینکه چرا بعضی از صرافیهای غیر متمرکز دارند از اتریوم به بایننس چین میرناگه هیچ کدوم از چیزایی که الان گفتم براتون معنی نداره و متوجه نمیشیدشما بهترین مخاطب برای این سری هستیدچون من میخوام همه اینها رو از پایه توضیح بدم تا در پایان این سری شما همه این اصطلاحات عجیب و غریب رو خوب متوجه بشیدو امروز میخوایم با مفهوم شماره یک و مهمترین اونها یعنی بلاکچین شروع کنیمبلاک چین اون چیزیه که بیت کوین و اتریم و کاردانو و پولکادوت و داج کوین رو راه اندازی میکنهو ما باید بفهمیمش تا بتونیم به مفاهیم پیشرفته تر برسیمخوب پس بیاید سعی کنیم کار رو با توضیح مفهوم بلاکچین شروع کنیممن خیلی آدما رو دیدم که سعی کردن بلاکچین رو توضیح بدنو همه هم کارشون واقعا درسته!اما من میخوام با کلمات خیلی ساده این کار رو انجام بدمپس گوش کنیدیک بلاک چین در واقع زنجیره ای از بلوک هاستاما معنی این جمله چیهبه زبون برنامه نویس ها بیاید بجای بلاک چین کلمه دیتابیس رو بگذاریمما میدونیم دیتابیس چیهاما بلاک چین در واقع یک دیتابیس خیلی باحال و س_ک_سی محسوب میشهچرا؟اول از همه اینکه این دیتابیس append only هستاپند یعنی اضافه کردنیعنی توی این دیتابیس شما فقط میتونید اطلاعات اضافه کنیدنمیتونید چیزی رو پاک کنیدنمیتونید چیزی رو ویرایش کنیدفقط میتونید یک چیزی اضافه کنید به این دیتابیسو همین الان یه گروهی دارن روی این نوع دیتابیس کار میکنن، دیتابیسی که اطلاعات قبلی اون قابل تغییر یا حذف نیستن.مثلا شما میتونید یک دیتابیس از مدارک دانشگاهی داشته باشیدیعنی شما که میرید دانشگاه و درستون رو تموم میکنید دانشگاه مدرک رو میذاره روی بلاک چینشما این مدرک رو گرفتید نه قراره مدرک شما حذف بشه و نه قراره تغییر کنهشما همیشه میدونید مدرک تون جای مطمئنیه و کسی نمیتونه عوضش کنهیا مثلا دولت ها میتونن از بلاکچین برای ثبت گواهینامه رانندگی شما استفاده کنن یا گواهی تولد یا مرگ یا ازدواج، اینها و مواردی مانند اینها نوعی از داده هستند که ما میخوایم تولید بشن و قابل پاک کردن و تغییر دادن نباشن.مورد دوم بعد از اپند اونلی بودن بلاک چین اینه که بلاک چین میتونه غیر متمرکز یا دیسنترالایزد باشهغیر متمرکز بودن یعنی اینکه مثلا من یا هر کس دیگه نمیتونیم کنترل همه این دیتابیس رو در دست داشته باشیم و همه ما یک کپی نسبتا یکسان از دیتابیس رو در اختیار داریم بنابر این مثلا اگه من بخوام دروغ بگم و ادعا کنم که 2000 تا بیت کوین دارم بقیه میفهمن که من دارم دروغ میگم چون همه یک کپی از این دیتابیس رو در اختیار دارن و به همین دلیل هم بسیار کار مشکلیه که بخوایم یک رمزارز رو سانسور کنیم یا کلا از بین ببریم چون خیلی از آدمهای دیگه هستند که همزمان دارن نودهای مثلا بیت کوین رو اجرا میکنن و همگی کپی مشابهی از کل اطلاعات رو در اختیار داریم و باید همه ما همزمان نودهای خودمون رو خاموش کنیم تا شبکه بیتکوین خاموش بشه و قاعدتا هم کسی این کار رو نخواهد کرد.به همین دلیله که رمزارزها بسیار بسیار در مقابل سانسور دولتی قوی هستند خوب اینها دلایلی بود که بفهمیم چرا بلاک چین دیتابیس خیلی خیلی باحالیه اما بیاید در مورد قسمت بلاک صحبت کنیم.بلاک ها شکل اضافه شدن داده به یک شبکه بلاکچین هستند مثلا بجای اینکه مثل یک دیتابیس ریلیشنال ما دیتا رو توی یک سطر بنویسیم ما یک بلاک میسازیم و مثلا در مورد بیت کوین این بلاک ها هر 10 دقیقه تولید میشن. بلاک ها شامل اطلاعات زیادی هستن ولی مهمترین دیتایی که یک بلاک باید داشته باشه که valid محسوب بشه، hash خودش و هش بلاک قبلی و دیتایی هست که میخوایم به اون اضافه کنیم.نترسید الان توضیح میدم، بیاید با آسونه شروع کنیم یعنی data: همونجور که اولش گفتم شما میتونید از هرچیزی که دلتون میخواد یک بلاکچین تولید کنید، از اسناد ازدواج و طلاق گرفته تا گواهینامه رانندگی و مدارک تحصیلی و... اینها رو ما میذاریم توی بخش دیتای یک بلاک مثلا در مورد بیتکوین در قسمت دیتای بلاک اون فقط یک تعداد ترنزاکشن قرار داره که مثلا کی برای کی چقدر پول فرستاده، این چیزیه که توی قسمت دیتای بلاک بیتکوین قرار گرفتهحالا بیاید در مورد هش حرف بزنیم:هش یک تابع ریاضیه که یک ورودی میگیره و یک خروجی تحویل میده اما این تابع یک سری خاصیت باید داشته باشه اول اینکه خروجی شما اصطلاحا deterministic هستیعنی چی؟ یعنی اینکه مثلا شما یک ورودی میدید به تابع و خروجی تابع همیشه یکسان خواهد بود اگر صد بار هم شما ورودی یکسان بدید به این تابع همیشه باید خروجی یکسان بگیریداما اگر یک تغییر حتی خیلی جزیی توی ورودی خودتون ایجاد کنید خروجی این تابع باید خیلی تغییر کنه این یکی از مفاهیمی هست که توی کریپتوگرافی (رمزنگاری) تعریف میشه و دلیل این تغییر کلی اینه که نشه هیچ زمانی ورودی رو حدس زد.این از خاصیت اول، خاصیت دوم اینه که این تابع یک طرفه ست یعنی اگه شما یک خروجی بگیرید نمیتونید به هیچ عنوان دوباره ورودی رو از روی اون باز تولید کنید در نظر بگیرید مثلا انبه داشته باشید و با اون آب انبه درست کنید. انبه رو میریزید توی بلندر و میکس میکنید و به شما آب انبه میده ولی شما هیچ وقت نمیتونید از این آب انبه دوباره به میوه انبه برسید ولی باز میتونید با انبه های دیگه آب انبه درست کنید. درست کردن آب انبه دقیقا شبیه هش کردن می مونه چون یک تابع یک طرفه ست.درسته؟ خوب حالا چرا این موضوع اینقدر مهمه چون همین قضیه ست که زنجیره بلوک ها رو به هم متصل نگه میداره. فرض کنید من یک بلاک هستم و دارم میرم که به شبکه بلاکچین متصل بشم. باید چکار کنم؟ اول از همه باید دیتا جمع کنم در مثال بیت کوین مثلا باید یک تعداد ترنزاکشن انجام شده باشه و من اونها رو داشته باشم تا بتونم به بلاکچین بیتکوین متصل بشم خوب حالا که من دیتا رو دارم میذارمش توی جیبم و میرم که به شبکه متصل شم خوب مورد بعدی که نیاز دارم اینه که هش بلاک قبل از خودم رو که میخوام بهش متصل بشم داشته باشم خوب فرض کنید که هش اون بلاک رو هم از میگیرم و میذارم توی اون یکی جیبم خوب مرحله آخر برای اینکه من بتونم عضو بلاکچین بشم اینه که دیتای خودم رو و هش بلاک قبلی رو با هم هش کنم و یک هش جدید تولید کنم و این میشه هش خودم و به این شکل من میتونم به بلاکچین وصل بشم. پس میرم میگم من میخوام به شما متصل بشم هم دیتای جدید رو آوردم هم هش بلاک قبلیمو ازش گرفتم و دارم و هم هش خودمو ساختم و به این شکل اجازه دارم که عضوی از شبکه بلاکچین بیتکوین باشم.میبینید چی میشه؟ هر بلاکی داره هش قبل از خودش رو هم هش میکنه و به این شکل همه به هم متصل میشن و به این صورت اگر فرض کنیم که بلاکچین من 10 میلیون بلاک داشته باشه و روی بلاک شماره 1 یک نفر بیاد یک کاراکتر دیتا رو حتی تغییر بده با توجه به ماهیت deterministic بودن هش خروجی کلا تغییر میکنه و همه هش ها تا بلاک 10 میلیون به هم میریزه به این شکله که همه به هم متصل هستن و همه میدونن که دیتایی که داره وارد بلاکچین میشه دستکاری نشده.توی مقاله بعدی که دارم حاضر میکنم میخوایم با هم ببینیم که هش کردن چطور انجام میشه و یک بلاکچین چطور ایجاد میشه که کار اصلا سختی نیست میشه با جاوااسکریپت یا پایتون و... شبکه بلاکچین خودمون رو تولید کنید همچنین میخواید بفهمیم که چطور شبکه بلاکچین بیتکوین از خودش محافظت میکنه چون نباید هر کسی بتونه به سادگی یک بلاک اضافه کنه باید بالاخره یک قوانینی وجود داشته باشه برای اضافه کردن بلاک، باید شما یک کاری انجام بدید، یک قابلیتی از خودتون نشون بدید که به عنوان یک بلاک توی شبکه بلاکچین بیتکوین پذیرفته بشید و اینها مواردیه که میخواید توی پست بعدی بهش بپردازیم... میخوایم بفهمیم معنی Proof of work چیه، ماین کردن یعنی چی و چرا مردم میان این تجهیزات گرون قیمت رو میخرن تا بیتکوین ماین کنن و مطمئن باشید اگر مفهوم هش هنوز براتون جا نیفتاده اصلا جای نگرانی نیست توی پست بعدی به خوبی توضیحش میدم.اگر دوست دارید این سری ادامه پیدا کنه یا اگر سوالی دارید کامنت بگذارید.

وب پک ۵ - قسمت پنجم

اشکان — Fri, 16 Oct 2020 12:35:19 +0330

سلام دوستان بریم بدون وقت تلف کردن سراغ قسمت پنجم که چند تا کار میخوایم توی این قسمت انجام بدیم. اول اینکه میخوایم ببینیم چطور میتونیم عکس بصورت داینامیک لود کنیم و تنظیمات وب پک برای اینکار چیه چون خیلی ساده ست سریع توضیح میدم گفتم که اگر شما یک بار یاد بگیرید استفاده از لودرها رو برای همه فرمت‌ها تقریبا تکراری میشه من برای آموزش ساخت یک وبلاگ مثل ویرگول یک لوگو طراحی کردم که میخوام توی این پروژه استفاده کنم خوشحالم میکنید که نظر یا برداشتتون رو هم درمورد لوگو بگیداول این تصویر رو توی دایکتوری source/ ذخیره کنید بعد فایل عکس رو توی app.js ایمپورت کنید و اون رو به المان داینامیکی که ساختید append کنید باید بعد از تغییراتی که دادید فایل app.js مثل زیر باشه: https://gist.github.com/3dln/c16d33ed898aa9e039f6257f06a24bc6#file-app-js حالا باید لودر مخصوص رو انتخاب کنیم... به شکل ساده‌ای میخوایم از لودری به نام file-loader‌ استفاده کنیم. با دستور زیر نصبش کنید:npm install file-loader --save-devو rule مربوط به تصویر رو توی webpack.config.js اضافه کنید:{ test: /\.png$/, use: ["file-loader"] }هیچی برای آموزش جدید نداشت دقیقا کپی کاری که برای css کردیم فقط با یک لودر متفاوت، اما فرض کنید که ما توی پروژه‌مون چند فرمت مختلف تصویر رو بخوایم استفاده کنیم یعنی یک جایی هم بخوایم فایل jpeg لود کنیم و یک جا gif یا svg لازمه برای هرکدوم یک رول جدید بنویسیم؟ خیرفقط کافیه که regex تست مون رو به شکل زیر تغییر بدیم:test: /\.(png|jpg|jpeg|gif|svg)$/فکر نکنم این هم توضیح اضافه بخواد ما توی پرانتز بین چند انتخاب از عملگر or که با علامت | نشون داده میشه استفاده کردیم یعنی هرکدوم از اینها ممکنه باشه.حالا شما نه تنها میتونید توی فایل جاوااسکریپتتون از این فرمت‌های تصویری استفاده کنید بلکه میتونید توی فایل css هم این کار رو انجام بدید چون در نهایت css هم توسط لودرهای خودش تبدیل به ماژول جاوااسکریپتی میشه اما یک نکته تستی این وسط خواهد بود که خیلی ظریفه خوب دقت کنید:یادتونه دفعه پیش بهتون گفتم وب پک فایل کانفیگ رو از پایین به بالا میخونه؟ و ترتیب loaderها مهمه؟ حالا بدونید که ترتیب ruleها هم مهمه و اونها هم از پایین به بالا خونده میشن بنابر این اگر rule تصاویر ما بالای رول css نوشته بشه تصویر ها قابل خوندن نخواهند بود حواستون باشه که اول باید وب پک بفهمه با تصویر چکار کنه بعد بره سراغ css.برای امتحان یک فایل jpeg توی پوشه source/ کپی کنید و از طریق css اون رو بک گراند المان داینامیک مون قرار بدید و نتیجه رو ببینید.اگر به مشکلی خوردید یا خواستید کد خودتون رو با من مقایسه کنید فایل‌‌های مربوط به این قسمت رو توی branch 05 مخزن گیت پروژه از اینجا میتونید کلون و استفاده کنید. به عنوان پیش‌نیاز مبحث بعدی از شما میخوام که با دقت به خروجی فولدر build نگاه کنید و زیر همین پست کامنت کنید که چه نکته ای توجه شما رو جلب میکنه.ممنون از همراهی همیشگیتون برنامه نویس موفقی باشید

ساخت یک وبلاگ مثل ویرگول (قسمت اول)

اشکان — Wed, 14 Oct 2020 13:32:05 +0330

سلام اشکان هستم و توی قسمت قبل ایده ساخت یک وبلاگ مثل ویرگول رو مطرح کردم و فکر میکنم موضوع جذابی میتونه باشه چون ما یک نمونه زنده داریم که داریم باهم ازش استفاده میکنیم و محاسن و معایب خودش رو داره، میتونیم از محاسنش استفاده کنیم و معایبش رو برطرف کنیم و فیچر جدید بهش اضافه کنیم و با هم گسترشش بدیم.تصمیم دارم سمت فرانت رو با reactjs بنویسم و backend رو هم با nodejs پس برای ترکیب کردن اینها چه بهتر که از فریمورک Next.js استفاده کنیم که هم pre-rendering رو پشتیبانی میکنه هم بصورت پیشفرض یک سری امکانات مثل routing هم سمت کلاینت و هم سمت سرور داره، من یک آموزش Next.js هم مدتی قبل شروع کردم که فرصت نکردم ادامه بدم و فکر میکنم فرصت خوبیه که اون رو هم در کنارش جلو ببرم.همونطور که قبلا گفتم این آموزش برای افراد مبتدی نیست و نمیشه توی یک پروژه بزرگ زمان برای توضیح مفاهیم اولیه صرف کرد اما اگر شما مبتدی هستید و میخواید همراه بشید من سعی میکنم از طریق کامنت یا ارجاع به پست‌های آموزشی موازی کمک کنم ایراداتتون برطرف بشه اما توقع نمیره اینجا بخوایم هیچ موضوعی رو باز کنیم فقط میخوایم اجرا کنیم و بریم جلو.همیشه سخت ترین کار شروع کردنه... بعدش همه چی کم کم سر جای خودش قرار میگیره.پس بیایید کار سخت رو امروز انجام بدیم و پروژه رو استارت بزنیم. کد‌های پروژه رو روی مخزن گیت‌هاب قرار میدم و حتما آموزش‌های ویدیویی هم کنارش خواهیم داشت و ویدیوها توی کانال یوتیوب من آپلود میشن (فعلا قصدی برای آپلود روی آپارت یا پلتفرم‌های دیگه ندارم).برای اسم پروژه هنوز تصمیم جدی ندارم فعلا دامنه we-blog.ir رو ثبت کردم ولی اگر پیشنهاد بهتری داشتید و دامنه ش هم قابل ثبت بود استقبال میکنم.خوب بریم سراغ استارت پروژه... یک فولدر به نام weblog بسازید داخل فولدر ترمینال رو باز کنید و دستور زیر رو برای راه اندازی یک پروژه Next.js اجرا کنیدnpx create-next-app . --use-npmاین دستور یک بویلرپلیت برای Next.js ایجاد میکنه مثل دستور create-react-app اگر آشنایی داشته باشید.اون نقطه که گذاشتیم یعنی root پروژه همین مسیریه که هستیم و سویچ --use-npm هم میگه بجای yarn از npm استفاده کن. پیشنهاد میکنم اگه میخواید حداکثر همراهی رو با من داشته باشید VSCode نصب کنید چون من از خیلی امکاناتی استفاده میکنم که ادیتورها یا IDEهای دیگه ندارند، با دستور زیر پروژه رو توی وی‌اس‌کد باز کنید:code .من یک سری آموزش مفصل برای VSCode دارم و در حال ادامه هم هست اگر مایلید از این آدرس میتونید دنبال کنید.ترمینال VSCode رو با فشردن CTRL+` باز کنید پروژه رو اجرا کنید:npm run devقاعدتا باید بدون مشکل روی پورت ۳۰۰۰ براتون یک تمپلیت ساده بالا بیاد نکته اینکه اگر سورس صفحه رو توی بروزر نگاه کنید میبینید که بر خلاف پروژه‌های Reactjs یک صفحه html دارید این همون قابلیت pre-renderingی هست که Next.js داره یعنی بر خلاف React که تمپلیت شما رو سمت کلاینت رندر میکنه این فریمورک ابتدا سمت سرور یک رندر میگیره از صفحه و اون رو میفرسته و از ریکوئست‌های بعدی صفحه سمت کلاینت ساخته میشه و کمک میکنه که موتورهای جستجو بتونند سایت رو ایندکس کنند.خوب برای اینکه خودمون هم یک کاری کرده باشیم بیاید یکم تر و تمیز کاری کنیم. از پوشه pages فایل index.js رو باز کنید و هرچی که بین پرانتزهای return هست پاک کنید و بجاش فعلا این رو بگذارید:

We Blog Here

بالای صفحه هر دو import رو پاک کنید.از پوشه styles هم فایل Home.module.css رو پاک کنید.حالا برگردید به بروزر اگر صفحه رو نبسته باشید میبینید که اتوماتیک تغییرات شما اعمال شده چون Next.js بصورت پیشفرض Hot module reloading رو توی تنظیمات وب پک داره.دیگه طولانی ترش نمیکنم توی قسمت بعدی ساختار سایت رو تعریف میکنیم.ممنون که همراهی میکنید برنامه نویس موفقی باشید.

وب پک ۵ - قسمت چهارم

اشکان — Wed, 14 Oct 2020 11:43:13 +0330

سلام اشکان هستم و توی این قسمت از آموزش وب پک ۵ میخوایم در مورد لودرها صحبت کنیم و ببینیم چطور میتونیم با وب پک فایل‌های css پروژه رو هم بخونیم.همونطور که توی پست‌های قبلی گفتم اگر قرار باشه هسته اصلی وب پک لودر تمام فرمت‌های مختلف رو توی خودش داشته باشه هم با مفهوم ماژولار بودن وب پک مغایرت داره و هم اینکه وب پک با معرفی کردن مفهوم لودر بار روی دوش خودش رو سبک کرده و اجازه داده تا دولوپر‌های دیگه برای هر فرمتی لودر مخصوص بنویسن.هدف نهایی وب پک اینه که انواع و اقسام ماژول‌‌ها رو بگیره و بشکل همگون اینها رو خروجی بگیره مثلا شما توی پروژه تون بتونید ماژول CommonJS یا AMD یا ES بنویسید، CSS ایمپورت کنید، انواع فرمت تصویر رو آدرس دهی کنید و وب پک از اینها یک خروجی همگون بگیره یعنی کد ترنسپایل شده نهایی مون از یک نوع باشه برای همین مفهومی رو معرفی کرد به نام loader.لودرها رو شخص ثالث مینویسه(third party) برای اینکه وب پک بتونه انواع فرمت فایل‌‌های مختلف رو بخونه. برای css و عکس و متن و فایل ویدیو و فایل سه بعدی و هرچیزی که فکر کنید لودر وجود داره.اصولا شما نباید نگران این باشید که مثلا ده‌ها لودر یا پلاگین وب پک توی پروژه دارید چون قبلا توضیح دادم که اینها قراره توی فاز دولوپمنت استفاده بشن فقط برای همینه که ما با سویچ --save-dev نصبشون میکنیم و توی حجم نهایی پروژه ما موثر نیستند.هدف نهایی لودرها هم اینه که همه فایل‌ها (بجز جاوااسکریپت) رو به ماژول تبدیل کنند و بدن دست وب پک که دیگه بلده با ماژول چکار کنه.خوب بیاید استارت لودر‌ها رو با هندل کردن فایل‌‌های css پروژه‌مون بزنیم.توی پوشه source یک فایل style.css بسازید و یک استایل ساده تعریف کنید..hello { color: blue; }حالا این استایل رو توی فایل app.js لود کنید و کلاس .hello رو به المانی که بصورت داینامیک توی فایل جاوااسکریپ ساختیم بدید، به شکل زیر: https://gist.github.com/3dln/b5ad030c984559977d87ca1c27ebba5e#file-app-js حالا برای تست بیاید وب پک رو اجرا کنیم ببینیم چه اتفاقی میفتهnpm startمیبینید که با پیغام خطای زیر مواجه میشیمYou may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.وب پک در حین باندل کردن پروژه رسید به فایل css مون و دید ازش سر در نمیاره بنابر این به ما گفته که شما برای هندل کردن این نوع فایل احتمالا به یک loader نیاز دارید در حال حاضر هم هیچ لودری برای پردازش این فایل تعریف نشده. خوبه پس بریم تعریف کنیم.برای این کار ما در واقع به ۲ لودر نیاز داریم اولی کارش اینه که فایل css‌ رو بخونه و بده به دومی که کار اصلی رو انجام میده و یک tag استایل توی head میسازه و استایل‌ها رو کپی میکنه اونجا.اولی اسمش هست css-loader و دومی اسمش هست style-loader خیلی آسون و قابل فهم.قدم اول اینه که نصبشون کنیم (dev dependency هستند دیگه خاطرتون که هست)npm install css-loader style-loader --save-devحالا قدم دوم اصل ماجراست کمی دقت کنید برای همه لودرها یکسانه یک بار یاد بگیرید برای همیشه:فایل webpack.config.js رو باز کنید و یک آبجکت جدید به نام module ایجاد کنید (منطقیه دیگه چون میخوایم بگیم با چه قوانینی و با استفاده از چه لودرهایی برامون ماژول بساز)داخل آبجکت module یک آرایه بسازید به نام rules توی این آرایه ما همه قوانین رو تعریف میکنیم (رول rule یعنی قانون). اولین قانونی هم که میخوایم تعریف کنیم قانون خوندن cssهاست. تا اینجا فایل مون باید به شکل زیر باشه: https://gist.github.com/3dln/5ab89822909b2330a05fdf2e9a143512#file-webpack-config-js هر rule وب پک ۲ قسمت داره اولین قسمت مسئول پیدا کردن فایل مورد نظره که در این مورد ما میخوایم فایل‌هایی با پسوند .css رو هدف قرار بدیم و این کار رو با رجکس انجام میدیم اگر از regex فراری هستین یا میترسین نگران نباشید همیشه یک فرمت مد نظره همینو فقط باید یاد بگیرید /\.css$/من توضیح میدم که همیشه regex داخل // نوشته میشه، اون $ آخرش هم یعنی باید اون چیزی که دنبالش میگردیم با عبارت قبل از $ تموم بشه یعنی اینجا وب پک اسم فایل‌ها رو می‌خونه هر اسمی که با .css تموم شده باشه این قانون رو براش اعمال میکنه دیگه از این ساده تر نمیشه توضیح داد همیشه هم همینه یعنی بعدا برای قانون فایل jpeg مثلا مینویسید:/\.jpeg$/پس ترسی نداره اینو فقط یاد میگیریم. بد نیست که یک پست هم در مورد regex بگذارم چون خیلی جاها به کار میاد یکم عجیب و غریبه اولش ولی وقتی بدونید قوانینش چیه ازش استفاده‌های خوبی میشه کرد.خوب این از اولین قسمت rule مون دومین قسمت خیلی آسونه فقط میگیم از چه loader یا لودرهایی باید برای این فایل‌هایی که پیدا کرد استفاده کنه که در این حالت css-loader و style-loader رو داریم.پس یک آبجکت بسازید توی آرایه rules، این آبجکت ۲ تا key/value به قول معروف داره اولی اسم کلیدش test هست و مقدارش اون رجکسی که نوشتیم و دومی اسم کلیدش use هست و یک آرایه از لودر یا لودرهایی که میخوایم استفاده کنیم مثل زیر: https://gist.github.com/3dln/e642907c718c23c461fcffbebc3374e4#file-webpack-config-js یک نکته آخر اینکه ترتیب نوشتن لودرها توی آرایه‌ی use‌ مهمه، سیستم وب پک اینه که از پایین میره بالا و همونطور که توضیح دادم css-loader اول متن فایل رو میخونه بعد میده با style-loader پس باید از پایین اول css-loader رو معرفی کنیم بعد style-loader.حالا وب پک رو اجرا کنید و اگر همه قدم‌ها رو درست رفته باشید پابلیش موفقی خواهید داشت و اگر فایل index.html رو باز کنید میبینید که جمله به رنگ آبی در اومده.اگر به ایرادی برخوردید مثل همیشه کدهای این قسمت رو از مخزن گیت‌هاب پروژه و از branch ۰۴ میتونید دانلود کنید و چک کنید.مرسی که همراهی میکنید و برنامه نویس موفقی باشید.

وب پک ۵ - قسمت سوم

اشکان — Tue, 13 Oct 2020 10:07:42 +0330

سلام اشکان هستم و در ادامه سری آموزشی وب پک ۵ میخوایم در مورد نوشتن فایل کانفیگ صحبت کنیم مثل همیشه کد‌های مربوط به هر قسمت رو میتونید از اینجا پیدا کنید کافیه که branch مربوط به هر قسمت (این قسمت 03) رو انتخاب کنید و کلون یا دانلود کنید.از نسخه ۴ وب پک، الزام استفاده از فایل کانفیگ برداشته شد و همونطور که توی قسمت قبل دیدید ما بدون هیچ فایل کانفیگی تونستیم با اجرای دستور webpack کدهامون رو اصطلاحا ترنسپایل کنیم اما خوب تنظیمات پیشفرض وب پک علاوه بر اینکه در ۹۰٪ مواقع کافی نیستند، محدودیت خودشون رو هم دارند مثلا شما رو محدود میکنند که حتما فایل‌‌های ترنسپایل شده توی یک فولدر به نام dist ذخیره بشن و فایل باندل رو حتما main.js اسم گذاری میکنه یا فایل‌ ورودی شما باید حتما اسمش index.js و توی یک پوشه به نام src باشه.توی این قسمت نمیخوایم کار عجیب و غریبی بکنیم چون برنامه این نیست که گیج بشیم فعلا آروم آروم میخوایم عملکرد وب پک رو کشف کنیم پس یک فایل کانفیگ ساده مینویسیم که همین‌ها رو بتونیم کاستومایز کنیم بعدا شروع میکنیم به شاخ و برگ دادن به فایل کانفیگمون.توی root‌ پروژه قبلی یک فایل بسازید به نام webpack.config.js و وب پک بصورت اتوماتیک فایلی با این اسم رو به عنوان کانفیگ خودش لود میکنه (توی قسمت‌های بعد میبینیم که چرا نیاز میشه که اسم این فایل تغییر کنه و چطور باید به وب پک بفهمونیم که فایل کانفیگمون کدومه)به این شکل فایل رو کانفیگ کنید https://gist.github.com/3dln/10f501f7924dc6120f07186ab146c532#file-webpack-config-js قدم به قدم فایل رو بررسی میکنیم اول یک توضیح در مورد این قضیه require و module.exports بدم برای کسانی که نمیدونن چرا بعضی وقت‌‌ها ما این سینتکس رو میبینیم یا گاه اوقات میبینیم که از import from و export یا export default یا سبک‌های دیگه استفاده میشه. واقعیت اینه که جاوااسکریپت در اصل کانسپتی به نام ماژول توی خودش نداره بنابر این بصورت رقابتی اومدن یک سری فرمت برای ماژولار کردن اختراع کردن مثلا معروف‌هاش یکی AMD هست (مخفف Asynchronous Module Definition) که مخصوص browserهاست و میاد با تابع define یک ماژول رو تعریف میکنه، یکی دیگه از این معروفا CommonJS هست که بهش CJS هم میگن و خیلی معروف شد چون Node.js از روشش برای ماژولار کردن استفاده میکنه که همین require و module.exports هست (که البته نقطه ضعف نود‌جی‌اس به حساب میاد و Deno هم که احتمالا یه سری آموزشی ازش شروع میکنیم داره به وسیله سازنده Nodejs نوشته میشه که از ساختارهای جدیدتر استفاده میکنه) و ESM رو هم داریم که ES5 و ES6ش خیلی معروفن و احتمالا اسمشونو شنیدید که از ساختار import و export استفاده میکنن.پس در جریان باشید که اینجا داریم کانفیگ وب پک رو با CommonJS مینویسیم و داریم با روش CSJ یک ماژول تعریف میکنیم به همین سادگی.خط ۱ یک لایبراری به نام path رو فراخوانی کردیم که بعدا توی کانفیگمون بتونیم باهاش مسیر بدیم.اصل قضایا توی module.exports داره اتفاق میفته یعنی کانفیگ ما اونجاست و خیلی هم واضحه ۲ تا موردو ما تنظیم کردیم یکی اینکه نقطه شروعمون entry point چه فایلی هست و یکی هم اینکه خروجی output ما کجاست، بجای فولدر src ما دوست داریم اسم فولدر source باشه، بجای فایل index.js اسم فایل رو app.js در نظر گرفتیم و میخوایم فایل‌های ترنسپایل شده رو بریزه برامون توی یک فولدر به اسم build و اسم باندل رو بذاره app.bundle.jsحالا کافیه اسم فولدر و فایل ورودی رو مطابق بالا عوض کنید و یک فولدر بسازید به نام build و فایل index.html رو توش کپی کنید و آدرس رفرنس توی index.html رو هم تصحیح کنید.و دوباره دستور npm start رو اجرا کنیدمیبینید که وب پک اتوماتیک فایل کانفیگ رو پیدا میکنه و مطابق تنظیمات جدید خروجی رو ایجاد میکنه.در واقع کار جدیدی نکردیم و فقط یاد گرفتیم که چطور به وب پک دستور بدیم که خودش یک قدم رو به جلوست.حالا یک امتحان کوچیک برای شما... فولدرهای dist و build رو کلا از پروژه پاک کنید و وب پک رو اجرا کنید و ببینید چه اتفاقی میفته... توی قسمت بعد میخوایم یک قدم جلوتر بریم و یکم کارمون رو اتوماتیک تر کنیم.ممنون که همراهم بودید و برنامه نویس موفقی باشید.

ساخت یک وبلاگ مثل ویرگول (قسمت صفر)

اشکان — Mon, 12 Oct 2020 14:23:34 +0330

سلام، اشکان هستم و در کنار سری آموزش برنامه نویسی موفق تصمیم گرفتم یک سری آموزش مجزا شروع کنم برای کسانی که چند قدم جلوتر هستند... در واقع این سری خیلی مناسب تازه کارها نیست. توی این پروژه ما قراره یک وبلاگ مثل ویرگول بسازیم، از قدم‌های اول شروع میکنیم چون این پروژه قرار نیست صرفا یک آموزش باشه و میخوام که در scale یک پروژه اصطلاحا production ready طراحی و اجرا بشه پس از وایرفریمینگ و طراحی گرافیک تا پروتوتایپینگ و برنامه نویسی نهایی همراه هم خواهیم بود.قراره از adobe XD و داکر و کوبرنتیس و وب‌پک و تایپ اسکریپت و ری‌اکت و نود‌جی‌اس و next.js و مانگودی‌بی و Nginx و pm2 و خلاصه هرچی که نیازه که یک پروژه از صفر تا صد پا بگیره استفاده کنیم.میخوایم یک سیستم authentication توکن بیسد به علاوه Social Authentication بسازیم و یک API رستفول که کاربر بعد از تایید هویت بتونه با استفاده از یک ادیتور WYSIWYG شبیه ادیتور ویرگول پُست بنویسه، سیستم draft و پابلیش داشته باشه و زیر هر پست کاربرا بتونن کامنت بگذارن و reply کنن و در نهایت هر کاربر یک پروفایل داشته باشه و بتونه اطلاعات خودش رو آپدیت کنه. قاعدتا از گیت هم استفاده میکنیم و سورس‌کد پروژه رو روی گیت‌هاب قرار میدم.برای هر پست یک توضیح داریم که توی ویرگول نوشته میشه و یک ویدیو داریم که توی یوتیوب آپلود میشه.نهایتا پروژه رو دیپلوی هم می‌کنیم و از یک سرویس ابری (احتمالا ابرآروان) استفاده خواهیم کرد.همونطور که توی پُست‌های قبلی توضیح دادم تمام آموزش‌هایی که من شروع کردم بخشی از یک هدف بزرگتر هستند برای ساخت یک پروژه خیلی پیچیده، بنابر این توقع میره این پروژه کاملا ماژولار نوشته بشه و تا به راحتی بعدا بتونیم به پروژه اصلی‌مون متصلش کنیم. همچنین میخوایم از معماری مایکروسرویس استفاده کنیم و مطمئن بشیم که پروژه ای که میسازیم صد در صد scalable خواهد بود و به راحتی به هزاران کاربر سرویس خواهد داد.طبق معمول ما از ویژوال‌استودیو‌کد بعنوان IDE استفاده میکنیم و با هم میبینیم که چه امکانات عجیب و غریبی در اختیارمون قرار میده تا تمرکز ما بعنوان برنامه‌نویس فقط روی کد نویسی باشه.خوشحال میشم اگر قصد دارید توی این سری همراه من باشید به کانال یوتیوب من سابسکرایب کنید که در جریان ویدیو‌های آینده این سری قرار بگیرید.

وب پک ۵ - قسمت دوم

اشکان — Mon, 12 Oct 2020 13:52:45 +0330

ساخت ساده‌ترین پروژه وب پکی ?یک فولدر بسازید و توی فولدر ترمینال رو باز کنید و بنویسیدnpm init -yاگر نمیدونید این دستور چکار میکنه فعلا وب پک به کارتون نمیاد از این آموزش شروع کنید.ادیتورتون رو برای پروژه‌ای که ساختیم باز کنید من از ویژوال استودیو کد استفاده میکنم اگر وقت دارید همینجا قطع کنید و این نوشته رو هم بخونید شاید تحولی توی روش برنامه نویسیتون باشه اگر هم با ادیتور خودتون راحت‌تر هستید و یا به ادیتورتون تعصب دارید با من ادامه بدید.قبل از اینکه پروژه رو با وب پک بسازیم اجازه بدید که با یک پروژه ساده جاوااسکریپتی بدون وب پک شروع کنیم که ببینیم بود نبود وب پک چه معایب و محاسنی داره.پس یک فولدر و داخل اون یک فایل html با نام Index بسازید و اگر از VSCode استفاده میکنید یک علامت تعجب ! بنویسید و Enter رو بزنید تا براتون محتوای خام یک فایل html رو ایجاد کنه (بهش میگیم Boilerplate) اگر ندارید تگ‌های زیر رو کپی کنید توی فایل index.html Document حالا کنار فایل index یک پوشه بسازید به نام src و داخلش یک فایل جاوااسکریپت با نام index.js بسازید و یک رفرنس به این فایل توی فایل html ایجاد کنید، همچنین یک رفرنس به لایبراری lodash با استفاده از CDN آنپکیج (unpkg) میدیم چون میخوایم از این لایبراری توی فایل Index.js استفاده کنیم.در این مرحله فایل index.html شما باید به شکل زیر باشه: https://gist.github.com/3dln/efef83e35744b10048824c5154e22a85#file-index-html حالا فایل index.js رو به شکل زیر می نویسیم: https://gist.github.com/3dln/4e6135f204a6a559e8b64d9cfa1ec341#file-index-js یه توضیح سریع هم راجع به محتوای فایل میدم:خط هشتم به body خروجی فانکشن component رو اصطلاحا append کردیم پس انتظار میره که این فانکشن به ما یک المان html خروجی بده.داخل فانکشن component همونطور که میبینید با دستور createElement یک div ساختیم و توی خط ۳ محتوای این div رو با استفاده از لایبراری lodash که توی فایل index.html لود کرده بودیم تعریف کردیم اون علامت آندرسکور (_) برای lodash مثل $ برای jquery می‌مونه و دستور join هم داره Hello و Webpack رو از آرایه‌ای که بهش داده شده میگیره و بهمون یک استرینگ برمیگردونه و از space هم برای متصل کردن این دو رشته استفاده میکنه.خوب حالا اگر فایل index.html رو باز کنید یک صفحه سفید میبینید با عبارت Hello Webpackحالا بیاید همین پروژه رو وب پکی کنیم ?اولین قدم اینه که ساختار پروژه رو کمی تغییر بدیم... ما میخوایم که یک فولدر حاوی سورس‌کدها داشته باشیم که همون فولدر/src مون هست و یک فولدر برای خروجی‌ای که وب پک بهمون میده که آپتیمایز و مینیفای شده ست به نام /dist (مخفف distribution) برای استفاده از قابلیت‌های task running وب پک. پس یک فولدر به نام /dist بسازید و فایل index.html رو داخلش کپی کنید.دومین قدم اینه که بدونیم برای استفاده از قدرت باندلینگ وب پک ما باید لایبراری‌هایی که استفاده میکنیم رو لوکال داشته باشیم پس با دستور زیر lodash رو بصورت لوکال نصب کنید و لینک رفرنسش رو از index.html بردارید.npm i lodashاگر خاطرتون باشه قبلا موقع نصب پکیج‌های npm از سویچ‌ --save استفاده میکردیم نسخه جدید npm به ما این امکان رو میده که بدون این سویچ‌ نصب رو انجام بدیم و بصورت پیشفرض --save در نظر میگیره ولی اگر --save-dev مد نظرتون هست باید سویچ رو بنویسیدحالا lodash رو به شکل زیر توی فایل index.js ایمپورت کنیدimport _ from 'lodash'دقت کنید که در حال حاضر index.html داره فایل index.js رو از مسیر /src میخونه، رفرنس به اسکریپت رو به شکل زیر تغییر بدید: