نوشته های مصطفی لوائی

اضافه کردن دیسک به LVM

مصطفی لوائی — Tue, 13 Sep 2022 18:44:06 +0430

یکی از شرکت‌هایی که در گذشته توش کار می‌کردم دچار مشکل کمبود دیسک توی یکی از ماشین‌ها شده بود و ازم کمک خواستن:چطوری می‌تونیم دیسک رو به سرور اضافه کنیم؟ از طریق VMware Vsphere دیسک اضافه کردیم ولی توی سرور تغییری ایجاد نشده و دیسک قابل استفاده نیست.این موضوع باعث شد که یه متنی راجع به این قضیه اینجا بنویسم.قبل از اینکه سراغ حل مشکل بریم، می‌خوام با یه مقدمه شروع کنم که LVM چیه؟در حالت عادی (بدون استفاده از LVM) وقتی شما یه دیسک به سرور اضافه می‌کنید، اونو باید توی پارتیشن جدا اضافه کنید و نمی تونید پاریتشن فعلی رو با استفاده از اون دیسک گسترش بدید. مثلا روی دیسک شماره یک دایرکتوری‌های مربوط به خود سیستم عامل (از جمله var و etc و bin و ..) هست و دیسک شماره دو توی دایرکتوری‌ای به اسم storage اضافه می‌شه. حالا فرض کنید که یه اپلیکیشن روی این سرور بالا اوردید. این پروژه توی مسیر /var/www قرار داره و حالا بعد از گذشت یک سال از راه اندازی ماشین، کل حجم دیسک پر شده و شما می‌خواید فضایی که اپلیکیشن می‌تونه استفاده کنه رو افزایش بدید. بدیهیه که اضافه کردن دیسک به مسیری غیر از /var/www برای شما آورده‌ای نداره و این مسیر با دیسک اول اشغال شده. پس باید چکار کنیم؟اینجاست که LVM به کمکتون میاد. هدف LVM اینه که پیچیدگی‌ها و محدودیت‌های سخت‌افزاری رو از دید لایه اپلیکیشن حذف کنه. در واقع از دید لایه اپلیکیشن شما می تونید فقط پارتیشن داشته باشید و این LVM باشه که وظیفه ذخیره‌سازی روی لایه سخت‌افزار رو به عهده بگیره.حالا برگردیم به مشکلی که داشتیم.من زمانی که توی اون شرکت کار می‌کردم ماشین رو تنظیم کرده بودم که از LVM استفاده کنه، پس الان کافیه که دیسک جدید رو به LVM بشناسونیم. (LVM باید زمان نصب لینوکس تنظیم شده باشه وگرنه روی سرور فعال نمی‌تونید ازش استفاده کنید)اول از همه باید اسم دیسک جدید رو پیدا کنیم:fdisk -lکامند بالا لیست همه دیسک‌ها (و پارتیشن‌ها) رو بهتون می‌ده. برای اینکه ببینید کدوم دیسک‌ها در حال حاضر توی LVM استفاده شدن باید کامند زیر رو بزنید:pvscanتوی ماشینی که من داشتم روش کار می‌کردم، کامند ‌fdisk دیسک‌های زیر رو نشون می‌داد (خروجی کامند خیلی شلوغه ولی با یکم دقت به خروجی می‌تونید اسم دیسک‌ها رو از توش پیدا کنید):/dev/sda /dev/sdb /dev/sdc /dev/sddو کامند pvscan هم این دیسک‌ها رو نشون می‌داد:/dev/sda /dev/sdb /dev/sdcپس دیسک sdd جدید اضافه شده و باید به LVM شناسونده بشه.حالا باید دیسک sdd رو فرمت و پارتیشن بندی کنیم تا بتونیم ادامه مراحل رو بریم:کامند زیر دیسک رو فرمت می‌کنه، پس دقت کنید که حتما از روشی که گفتیم دیسک درست رو شناسایی کرده باشید!fdisk /dev/sddبا زدن کامند بالا یه سری سوال در مورد نحوه فرمت کردن دیسک از شما پرسیده می‌شه. اگر خیلی از این کامند سر در نمیارید نترسید، سوال اول رو با n و سوال دوم رو با p جواب بدید. ما بقی سوال‌ها رو هم بدون وارد کردن چیزی فقط Enter بزنید تا رد شن. وقتی سوال‌ها تموم شد در آخر w رو وارد کنید و Enter بزنید که عملیات فرمت کردن شروع بشه.وقتی دیسک sdd رو به روش بالا فرمت کنیم، یه پارتیشن به اسم sdd1 ساخته می‌شه که در ادامه ازش استفاده می‌کنیم.حالا نیازه که ما یه Physical Volume بسازیم (توضیح مفاهیم مربوط به LVM از جمله Physical Volume، Volume Group و Logical Volume خارج از این پست هست و پست رو طولانی می‌کنه). برای این کار از کامند pvcreate استفاده می‌کنیم:pvcreate /dev/sdd1همونطور که می‌بینید باید اسم پارتیشن رو به pvcreate بدیم، نه دیسک.حالا که ما یه Physical Volume داریم، باید اونو به Volume Group اضافه کنیم. ولی قبل از اون باید اسم Volume Group فعال رو پیدا کنیم (به طور پیش‌فرض فقط یه Volume Group فعال وجود داره مگر اینکه خودتون تعداد بیشتری ساخته باشید):vgscanکامند بالا براتون اسم Volume Group رو چاپ می‌کنه. اسم Volume Group من ubuntu-vg بود پس در ادامه از این اسم توی کامندهام استفاده می‌کنم.برای اضافه کردن پارتیشن sdd1 به Volume Group این کامند رو اجرا می‌کنیم:vgextend ubuntu-vg /dev/sdd1و حالا نیاز هست Logical Volume رو به اندازه دیسکی که اضافه کردیم گسترش بدیم. برای این کار باید اسم Logical Volume فعال رو بدست بیاریم:lvscanدر اینجا من آدرس زیر رو به عنوان خروجی گرفتم:/dev/ubuntu-vg/ubuntu-lvفرض کنید که حجم دیسکی که اضافه کردیم 70G هست، با این فرض کامند گسترش Logical Volume رو به این صورت باید بنویسیم:lvextend -L+70G /dev/ubuntu-vg/ubuntu-lvدر آخر برای اینکه نیاز به Restart کردن سرور نباشه کامند زیر رو می‌زنیم:resize2fs /dev/ubuntu-vg/ubuntu-lvتموم شد. حالا فضای خالی سرورتون باید به اندازه 70G زیاد شده باشه.

ایجاد درایور لاگ در لاراول (ذخیره لاگ در دیتابیس)

مصطفی لوائی — Fri, 17 Dec 2021 20:12:35 +0330

منبع عکس: sergeyzhuk.meلاراول یه فریم‌ورک خیلی منعطفه، شاید برای همینه که توی دنیای PHP داره یکه تازی می کنه. یکی از چیزهایی که خیلی به لاراول قدرت و انعطاف داده، استفاده از یک Design Pattern معروف به اسم Strategy هست. این Design Pattern این امکان رو فراهم می کنه که در حین اجرای برنامه،‌ کارکرد یک Class تغییر کنه. به عنوان مثال، شما حتما توی لاراول با دیتابیس کار کردید و می دونید که می تونید خیلی راحت از طریق .env مشخص کنید که می خواید به چه دیتابیسی متصل بشید و لاراول به طرز جادویی‌ای کوئری های منحصر به اون دیتابیس رو برای شما تولید می کنه. خیلی خوبه نه؟لاراول از این Design Pattern خیلی جاهای دیگه هم استفاده کرده، مثلا برای Log، Cache، Storage و ... .لاراول علاوه بر اینکه برای مواردی که گفتیم پیاده‌سازی های مختلفی رو همراه خود فریم‌ورک به شما تحویل می ده (مثلا می تونید از MySQL، PostgreSQL و ... به عنوان Database استفاده کنید)، به شما اجازه می ده Driver دلخواه خودتون رو هم بنویسید (مثلا درایور MongoDB که این پکیج پیاده‌‌سازیش کرده). توی این پست می خوایم یه درایور (یا به قول خود لاراول Channel) برای Log بنویسیم. هدف اصلی این پست، خوندن کدهای لاراول و سر در آوردن از کارشه، ولی داریم این کار رو با یه مثال عملی انجام می دیم. برای همین ممکنه یکم طولانی باشه، ولی اگه تجربه این کار رو ندارید، به نظرم ارزشش رو داره.برای شروع، یه پروژه لاراول تر تمیز می سازیم و توی routes/web.php یه چندتا لاگ می ذاریم:Route::get('/', function() { Log::debug("The first log."); Log::debug("The second log."); Log::debug("The third log."); return view('welcome');});خوب با توجه به اینکه توی .env به طور پیش‌فرض LOG_CHANNEL=stack قرار داده شده، انتظار داریم که توی مسیر storage/logs/laravel.log یه فایل ببینیم که این خطوط توش نوشته شده باشه:[2021-12-16 15:01:55] local.DEBUG: The first log. [2021-12-16 15:01:55] local.DEBUG: The second log. [2021-12-16 15:01:55] local.DEBUG: The third log. تا اینجا هیچ کار خاصی نکردیم. اما می خوایم دو تا فیچر به لاگ لاراول اضافه کنیم: نمایش اطلاعات اضافه‌ در مورد لاگ (مثل کاربری که لاگین کرده و ..)ذخیره لاگ توی دیتابیسبرای شروع یه دایرکتوری به اسم Classes توی app می سازیم (اسم دایرکتوری رو هرچی بخواید می تونید بذارید، اما من عادت دارم کلاس های متفرقه رو توی یه دایرکتوری به اسم Classes ایجاد می کنم). بعد از اون برای دسته بندی بهتر یه دایرکتوری دیگه داخل Classes به اسم Logs می سازیم. فرض کنید که می خوایم اسم Log Channel جدیدی که می خوایم بسازیم رو Database بذاریم. برای همین یه دایرکتوری دیگه توی Logs به اسم Database می سازیم (همه این کارها رو فقط برای مرتب بودن ساختار پروژه کردیم، وگرنه هیچ اجباری نیست).ساختار دایرکتوری هااولین فایلی که نیازه ساخته بشه، فایل Logger هست. توی این فایل دو تا چیز رو مشخص می کنیم: «چه چیزی» باید لاگ شه«چطوری» باید لاگ شهپس یه فایل به اسم Logger توی دایرکتوری Database می‌سازیم:pushProcessor(new Processor()); $logger->pushHandler(new Handler()); return $logger; } }همونطور که می بینید این فایل فقط یه تابع به اسم __invoke داره که یه آرگومان از جنس آرایه می گیره و یه instance که اینترفیس LoggerInterface رو پیاده‌سازی کرده باشه بر می گردونه. آرگومان تابع __invoke تنظیمات درایورمونه که توی فایل کانفیگ می تونیم مشخص می کنیم. مثلا می تونیم اسم کانکشن دیتابیس رو از طریق کانفیگ بگیریم که به Developer این قابلیت رو بدیم که انتخاب کنه توی چه دیتابیسی لاگ‌ها ریخته بشن. اما فعلا نمی خوایم پیچیده بشه برای همین از روش می پریم.بدنه تابع مجموعا 4 خط بیشتر نیست: ایجاد یه نمونه از یک کلاس که اینترفیس LoggerInterface رو پیاده سازی کرده (برای سادگی کار ما از Monolog استفاده کردیم، ولی می تونید حتی این قسمت رو هم خودتون بنویسید)مشخص کردن اینکه «چه چیزی» باید لاگ شه (pushProcessor)مشخص کردن اینکه «چطوری» باید لاگ بشه (pushHandler)کلاس های Processor و Handler وجود ندارن و باید خودمون بسازیمشون. برای همین کنار فایل Logger.php کلاس های Processor.php و Handler.php رو می سازیم.به عنوان قدم بعد می ریم فایل Processor.php رو توسعه می دیم. داخل این کلاس هم یه تابع با نام __invoke باید باشه که یه آرگومان از جنس آرایه می گیره:userAgent(); $record['ip'] = request()->ip(); $record['params'] = request()->all(); return $record; } }الان اگه باز هم قبل از return مقدار $record رو dd کنیم یه همچین چیزی خواهیم دید:فرمت جدید لاگکارمون با Processor همینجا تموم می شه. البته شما می تونید خیلی کارهای باحال دیگه بکنید و جزئیات بیشتری به لاگ اضافه کنید.فایل Handler.php باید حاوی یک کلاس باشه که از کلاس AbstractProcessingHandler ارث‌بری کرده باشه. وقتی می خواید از کلاس AbstractProcessingHandler ارث‌بری کنید، مجبور هستید تابع write رو پیاده‌سازی کنید، چون این تابع به صورت abstract تعریف شده. اما این دلیل نمی شه که ما بقیه توابع کلاس AbstractProcessingHandler رو نگاه نکنیم. پس قبل از پیاده سازی کلاس Handler بریم ببینیم که AbstractProcessingHandler چطوری کار می کنه.کلاس AbstractProcessingHandler یه همچین شکل و شمایلی داره:abstract class AbstractProcessingHandler extends AbstractHandler implements ProcessableHandlerInterface, FormattableHandlerInterface { use ProcessableHandlerTrait; use FormattableHandlerTrait; /** * {@inheritDoc} */ public function handle(array $record): bool { if (!$this->isHandling($record)) { return false; } if ($this->processors) { /** @var Record $record */ $record = $this->processRecord($record); } $record['formatted'] = $this->getFormatter()->format($record); $this->write($record); return false === $this->bubble; } /** * Writes the record down to the log of the implementing handler * * @phpstan-param FormattedRecord $record */ abstract protected function write(array $record): void; /** * @return void */ public function reset() { parent::reset(); $this->resetProcessors(); } }همونطور که می بینید خود این کلاس، از یه کلاس دیگه ارث‌بری کرده، چند اینترفیس رو پیاده‌سازی کرده و از چند Trait استفاده کرده. اما نترسید، اونقدرا هم پیچیده نیست. تابعی که خوندن کد رو باید ازش شروع کنید تابع handle هست (معمولا تابع handle توی لاراول تابعی هست که باید خوندن رو ازش شروع کنیم، مثل توی Job ها). این تابع 3 تا کار مهم می کنه: اگه Processorی تعریف شده باشه، با استفاده از اون(ها) یه Record لاگ رو پردازش می کنه. ما اینجا می دونیم که قراره تابع __invoke توی Processorی که پیشتر نوشتیم فراخونی بشه.با استفاده از تابع format یه کلید با نام formatted به Record لاگ اضافه می شه. این کلید، دیتای فرم داده شده رو نگهداری می کنه. مثلا وقتی می خوایم توی فایل لاگ رو ذخیره کنیم، دقیقا محتوایی که باید توی فایل ذخیره بشه رو نگهداری می کنه. حالا که می خوایم توی دیتابیس ذخیره کنیم، باید محتوایی که قراره توی دیتابیس ذخیره بشه رو بسازیم. مثلا اگه داریم از دیتابیسی مثل MySQL استفاده می کنیم، باید قبل از ذخیره‌سازی، مقادیر کلیدهای context، extra و params رو به JSON تبدیل کنیم، چون امکان ذخیره‌سازی آرایه توی MySQL وجود نداره.در نهایت با فراخونی تابع write عملیات ذخیره‌سازی رو انجام می ده. تابع write به صورت abstract تعریف شده و پیاده سازیش به عهده ماست.مرحله 1 که با نوشتن Processor و فراخونی pushProcessor توی فایل Logger.php به درستی داره کار می کنه و نیاز نیست براش کار دیگه‌ای انجام بدیم. می مونه مورد 2 و 3. آره می تونیم عملیات تبدیل آرایه به JSON رو توی تابع write انجام بدیم، ولی بذارید همه چیز اصولی و تر‌ و تمیز جلو بره. پس باید عملکرد تابع format رو تغییر بدیم. تابع format روی خروجی getFormatter فراخونی شده، پس باید ببینیم که getFormatter چیه و چطوری کار می کنه.تابع getFormatter توی FormattableHandlerTrait تعریف شده و FormattableHandlerTrait به عنوان Trait در AbstractProcessingHandler استفاده شده. اگه یه نگاه بهش بندازیم همچین چیزی می بینیم:/** * {@inheritDoc} */ public function getFormatter(): FormatterInterface { if (!$this->formatter) { $this->formatter = $this->getDefaultFormatter(); } return $this->formatter; }این تیکه کد داره می گه اگه پیش‌تر، از طریق setFormatter، مقداری برای formatter تعیین شده باشه، از اون استفاده بشه، در غیر این صورت از تابع getDefaultFormatter (که توی همین Trait تعریف شده) برای مقداردهی به formatter استفاده بشه.پس ما دو تا راه داریم، یا یه Formatter بنویسیم و از طریق setFormatter به Handler معرفیش کنیم، یا اینکه عملکرد getDefaultFormatter رو با Override کردن تابع تغییر بدیم. من گزینه دوم رو می خوام جلو برم. پس باید نگاه کنم که getDefaultFormatter چطوری پیاده‌سازی شده:protected function getDefaultFormatter(): FormatterInterface { return new LineFormatter(); }می بینیم که به صورت پیش فرض از LineFormatter که یه کلاس توی پکیج Monolog هست داره استفاده می شه. اما ما می تونیم هر Formatter دیگه ای رو جایگزینش کنیم. با یه نگاه به LineFormatter می فهمیم که یه Formatter کلاسیه که اینترفیس FormatterInterface رو پیاده‌سازی کرده باشه. پس یه کلاس می نویسیم که FormatterInterface رو پیاده سازی کرده باشه و بعد getDefaultFormatter رو طوری تغییر می دیم که یک instance از کلاس Formatter ما رو برگردونه://Handler.php protected function getDefaultFormatter(): FormatterInterface { return new Formatter(); }طبیعتا باید کلاس Formatter رو هم بسازیم:toJson($record['context']); $record['extra'] = $this->toJson($record['extra']); $record['params'] = $this->toJson($record['params']); return $record; } public function formatBatch(array $records) { foreach($records as $key => $record) { $records[$key] = $this->format($record); } return $records; } /** * Return the JSON representation of a value * * @param mixed $data * * @return string if encoding fails 'null' is returned */ protected function toJson($data): string { return Utils::jsonEncode($data, Utils::DEFAULT_JSON_FLAGS, false); } }تابع format عملیات format رو برای یک Record لاگ انجام می ده، formatBatch یه تعداد Record رو به یکباره format می کنه. تابع toJson هم خودمون برای تبدیل آرایه به json نوشتیم. دلیل اینکه از json_encode استفاده نکردیم این بود که ممکنه در آینده بخوایم فلگ‌هایی به json_encode اضافه یا کم بکنیم و برای اینکه هی نخوایم کدها رو تکرار کنیم، یه تابع ساختیم که بدون دغدغه فقط صداش کنیم. داخلش هم به جای تابع json_encode از تابع jsonEncode کلاس Utils پکیج Monolog استفاده کردیم که کارمون راحت تر باشه.خوب برگردیم عقب، ما توی کلاس Handler بودیم و تا الان کلاسمون اینطوری شده:id(); $table->string('message'); $table->json('context'); $table->integer('level')->unsigned(); $table->string('level_name'); $table->integer('userID')->unsigned()->nullable(); $table->string('userAgent')->nullable(); $table->string('ip')->nullable(); $table->json('params'); $table->timestamp('datetime'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('logs'); } }save(); } protected function getDefaultFormatter(): FormatterInterface { return new Formatter(); } }طبیعتا باید migrate کنید تا جدول logs ساخته بشه.و حالا قدم آخر! اول پست گفتیم که لاراول به طور پیش‌فرض از کانال stack برای لاگ استفاده می کنه. برای همین همه لاگ ها داره توی storage/logs/laravel.log نوشته می شه. ما باید به لاراول بگیم که آقای لاراول لطفا از درایور دیتابیسی که نوشتم استفاده کن. برای این کار باید اول از همه فایل config/logging.php رو باز کنیم و توی قسمت channels این تیکه کد رو اضافه کنیم تا یه کانال به اسم database درست کنیم و از لاراول بخوایم که وقتی که بهش می گیم از کانال database استفاده کنه، برای لاگ کردن از کلاس Logger که پیشتر نوشتیم استفاده کنه:... 'channels' => [ ... 'database' => [ 'driver' => 'custom', 'via' => Logger::class ], ], ];کانال database ساخته شده. کافیه توی .env بگیم که از کانال database استفاده کنه:LOG_CHANNEL=databaseحالا وقتی توی مرورگر پروژه رو باز کنیم، باید بلافاصله ببینیم این خطوط توی دیتابیس اضافه شده:دیگه چه کارهایی می‌شه انجام داد؟خیلی کارها! مثلا می تونید برای اینکه سرعت اپلیکیشنتون حتی با وجود لاگ‌های زیاد افت محسوسی نکنه، به جای اینکه توی تابع write مستقیم لاگ رو توی دیتابیس ذخیره کنید، از طریق یه Job این کار رو بکنید. یا مثلا می تونید به جای ذخیره توی دیتابیس، از طریق یه درخواست HTTP لاگ ها رو توی سرور دیگه ای ذخیره کنید (اگه این کار رو می کنید یادتون نره که درخواست HTTP رو حتما به صورت async بفرستید وگرنه تاثیر بدی روی Performance اپلیکیشنتون می ذاره). یا مثلا اپلیکیشنتون رو به سیستم های لاگ‌گیری حرفه ای و یا حتی سیستم مدیریت پروژه یا پیام‌رسان ها متصل کنید! ایده ها ته ندارن :)اما چیزی که به نظرم اهمیت بیشتری داره، اینه که ذهنمون باز بشه برای توسعه درایورهای مختلف برای لاراول، نه فقط برای لاگ، بلکه برای هرجای دیگه‌ای که اجازه می ده درایور بنویسیم.

چطوری توی لاراول سرعت آپلود رو زیاد کردیم؟

مصطفی لوائی — Sat, 11 Dec 2021 00:02:47 +0330

بیزینس چاپ‌آقا مبتنی بر فایله و گاها فایل‌های مشتری خیلی حجیم هستن (چند گیگ). معمولا برای آپلود فایل‌های حجیم، از روش‌هایی استفاده می شه که فایل به صورت قطعه قطعه شده از سمت کلاینت برای بک‌اند ارسال بشه. این روش علی رغم اینکه یکم سرعت آپلود رو کاهش می ده (به خاطر Overhead درخواست‌های HTTP) اما مزایای زیادی داره:مدیریت بهتر Memory سرور عدم نیاز به افزایش memory_limit توی php.iniعدم نیاز به افزایش max_post_size و max_upload_size توی php.iniامکان Retry کردن درخواست اگه یه لحظه اینترنت Unstable بشهامکان نمایش Progress به کاربر...البته اینکه اندازه هر قطعه (Chunk) رو چقدر بذارید که کمترین تاثیر رو روی Performance بذاره هم خیلی مهمه. هرچی اندازه Chunk ها کمتر باشه، سرعت آپلود کمتر می شه اما منابع سرور بهینه‌تر استفاده می شه و البته Progress دقیق‌تری هم به کاربر نمایش داده می‌شه.ما هم توی چاپ‌آقا از همین روش استفاده کرده بودیم و همه چیز ظاهرا داشت کار می کرد تا اینکه متوجه شدیم که فایل‌های حجیم خیلی کند آپلود می‌شن و از اون بدتر، از یه حجمی بالاتر به خطای Memory یا Timeout می خوریم! چرا؟ ? ما که داریم فایل رو با Chunk های 2 مگابایتی می فرستیم و انتظار داریم هر ریکوئست مقدار خیلی کمی Memory مصرف کنه و توی چند میلی‌ثانیه پردازش بشه!پیداکردن و حل مشکلبرای شروع یه فایل حجیم آپلود کردیم و توی Console درخواست‌های HTTP رو دنبال کردیم. درخواست‌های اول خیلی شیک و مجلسی ارسال می شدن و همه چی خوب بود، اما به مرور، زمان پردازش هر درخواست بیشتر و بیشتر می شد تا اینکه به جایی می رسید که هر درخواست نزدیک 30 ثانیه زمان می برد در حالی که حامل Chunk دو مگابایتی بود! 30 ثانیه زمان برای ذخیره 2 مگابایت؟ ?کدهای بک‌اند خیلی ساده و سرراست بود. Chunk رو می گرفت و به انتهای فایل می‌چسبوند:Storage::append($filePath, $chunk, '');کجای این کد ساده مشکل داره؟ برای پیدا کردن مشکل باید می‌دیدیم لاراول تابع append رو چطوری پیاده سازی کرده:public function append($path, $data, $separator = PHP_EOL) { if ($this->exists($path)) { return $this->put($path, $this->get($path).$separator.$data); } return $this->put($path, $data); }چی شد؟ ? به جای اینکه هر Chunk رو Append کنیم داریم هر دفعه کل فایل رو می خونیم و توی Memory میایم Chunk رو بهش می چسبونیم و دوباره کل فایل رو ذخیره می کنیم؟ یعنی اگه یه فایل 1 گیگی رو بخوایم با Chunk های 2 مگابایتی آپلود کنیم، فقط توی درخواست آخر حدود 2 گیگ Read/Write روی دیسک و 1 گیگ Memory مصرف می کنیم! و این عمل 500 بار داره تکرار می شه.. چه فاجعه‌ای.ساده‌ترین راه (و نه البته بهترین راه) برای حل این مشکل، استفاده از توابع ساده PHP به جای این خط کد وحشتناک بود:$absoluteFilePath = Storage::path($filePath); $fp = fopen($absoluteFilePath, 'a+'); fwrite($fp, $chunk); fclose($fp);و تمام! مشکل حل شد و همه چیز همونطور که انتظار داشتیم کار می کنه!نتیجه اخلاقیاز نظر من فریم‌ورک ها فوق العاده هستن و شدیدا بهشون معتقدم، اما نقدی که وجود داره اینه که عموم افراد «نحوه کار با فریم‌ورک» رو یاد می گیرن، ولی «نحوه کار کردن فریم‌ورک» رو نه. دسته‌ای که فقط نحوه کار با فریم‌ورک رو یاد می گیرن، خیلی ساده از تابع append استفاده می کنن، بدون اینکه دقت کنن که ممکنه روی فایل های بزرگ و درخواست هایی که مکررا تکرار می شن به مشکل می خورن. وقتی هم که به مشکل می خورن معمولا متوجه نمی شن که چی شده و چرا به مشکل خوردن و در نهایت صورت مساله رو پاک می کنن.

چطور از Tailwindcss توی انگولار استفاده کنم؟

مصطفی لوائی — Thu, 08 Oct 2020 16:47:44 +0330

چند وقت پیش یه پست کوتاه توی کانال تلگرامیم گذاشته بودم که چرا باید از Tailwindcss استفاده کنیم و چرا الان یکی از ترند‌های دنیای فرانت اند شده.توی این پست می خوام نحوه استفاده از Tailwindcss توی انگولار رو آموزش بدم، چون یه مقدار چالش داره. ولی قبلش نیازه یه چیزایی رو توضیح بدم.فریم‌ورک Tailwindcss فقط مجموعه ای از استایل ها نیست، بلکه به شما این اجازه رو می ده به یه روش خیلی تر و تمیز استایل های Tailwindcss رو دست‌کاری کنید و یا استایل های جدید بنویسید. حسن نوشتن استایل در قالب پلاگین اینه که می تونید از قابلیت های بی نظیر Tailwindcss استفاده کنید و استایل هایی کاملا Scalable داشته باشید. شما می تونید Tailwindcss رو در قالب یک فایل CSS دانلود کنید و به پروژه ملحق کنید، اما در این صورت فقط می تونید از استایل‌های اون استفاده کنید و از قابلیت هایی مثل حذف کردن اتوماتیک استایل های بلااستفاده و یا پلاگین نویسی بی بهره می مانید. این روش اصلا مناسب نیست، چون بیشتر مزایای Tailwindcss رو زیر سوال می بره.قبل از این که بگیم که چطوری باید از Tailwindcss توی انگولار استفاده کنید، باید بگیم خود Tailwindcss چطوری کار می کنه. Tailwindcss یه پلاگین برای Postcss است که بار اصلی پردازش استایل ها به عهده اونه. مثلا Postcss به Tailwindcss برای حذف استایل هایی که استفاده نشدن کمک می کنه. طبیعیه که Postcss برای این که کار بکنه، باید پروژه رو بررسی کنه و عملیاتی رو روی استایل ها انجام بده (از این به بعد بهش می گیم Build). شاید براتون جالب باشه که کامپایلر انگولار درون خودش از Postcss استفاده می کنه. چالشی که الان داریم اینه که چطوری پلاگین Tailwindcss رو به کامپایلر انگولار معرفی کنیم؟یکی از راه های استفاده از Postcss، استفاده به عنوان پلاگین Webpack هست. ما قصد داریم از این روش استفاده کنیم. چالشی که وجود داره اینه که انگولار در حالت عادی به ما این اجازه رو نمی ده که تنظیمات Webpack رو دستکاری کنیم (امیدوارم در آینده این قابلیت به انگولار اضافه بشه)، اما به ما اجازه می ده که از کامپایلر های غیر Official انگولار استفاده کنیم. این کامپایلرها روی کامپایلر Official انگولار بنا شدن و همه قابلیت های اون رو دارن. توی این آموزش می خوایم از یکی از این کامپایلر‌ها استفاده کنیم که به ما قابلیت این رو می ده که از فایل کانفیگ دلخواه خودمون برای Webpack استفاده کنیم.در قدم اول باید پیش نیازها رو نصب کنیم:npm i -D @angular-builders/custom-webpack autoprefixer@^9.8.6 postcss-import@^12.0.1 postcss-loader@^3.0.0 postcss-scss@^2.1.1 postcss-url@^8.0.0 webpack-mergeپکیج های بالا به عنوان Dev Dependency نصب شدنورژن های ذکر شده، متناسب با ورژن Postcss انگولار 10 نوشته شده شده. برای انگولار های دیگه احتمالا باید از ورژن های دیگه ای استفاده کنید.فرض بر این گذاشته شده که از فرمت scss برای استایل ها استفاده می کنید، برای همین پکیج postcss-scss رو نصب کردیم.طبیعتا باید خود Tailwindcss رو هم نصب کنیم:npm i tailwindcssبعد از نصب این پکیج ها، باید به انگولار بگیم که از کامپایلر جدید برای کامپایل کردن استفاده کنه. این کار رو با تغییر angular.json می تونیم انجام بدیم. شما می تونید این فایل رو دستی تغییر بدید، ولی من اینجا برای خوانایی بیشتر، از کامند ng config استفاده می کنم (جای PROJECT_NAME اسم پروژتون رو باید بذارید):ng config projects.PROJECT_NAME.architect.build.builder @angular-builders/custom-webpack:browser ng config projects.PROJECT_NAME.architect.build.options.customWebpackConfig.path webpack.config.js ng config projects.PROJECT_NAME.architect.serve.builder @angular-builders/custom-webpack:dev-server ng config projects.PROJECT_NAME.architect.serve.options.customWebpackConfig.path webpack.config.jsالان کامپایلرمون عوض شد. اگه دقیت کنید آدرس فایل کانفیگ Webpack رو هم مشخص کردیم که توی یه فایل کنار angular.json و با نام webpack.config.js باشه. پس این فایل رو با محتویات زیر می سازیم:const {merge} = require('webpack-merge'); module.exports = (config) => { const isProd = config.mode === "production" const tailwindConfig = require("./tailwind.config.js")(isProd); return merge(config, { module: { rules: [ { test: /\.scss$/, use: [ { loader: 'postcss-loader', options: { ident: 'postcss', syntax: 'postcss-scss', plugins: [ require('postcss-import'), require("postcss-url"), require('tailwindcss')(tailwindConfig), require('autoprefixer'), ] } } ] } ] } }); };به این صورت پلاگین Postcss به Webpack اضافه شد و چندتا پلاگین هم برای خود Postcss لود کردیم. دقت کنید که همه پلاگین های بالا باید لود بشن تا بتونید بدون مشکل از Postcss و Tailwindcss استفاده کنید.توی فایل webpack.config.js به فایل tailwind.config.js اشاره شده که مربوط به تنظیمات Tailwindcss هست. پس این فایل رو با محتوای زیر می سازیم (این محتوا حداقلیه و شما می تونید طبق داکیومنت Tailwindcss اونو گسترش بدید):module.exports = (isProd) => ({ future: { removeDeprecatedGapUtilities: true, purgeLayersByDefault: true }, purge: { enabled: isProd, content: [ '**/*.html', '**/*.scss', '**/*.ts', ] }, theme: {} });به عنوان قدم آخر، فایل styles.scss رو باز کنید و سه خط زیر رو در ابتدای اون paste کنید:@import '../node_modules/tailwindcss/base'; @import '../node_modules/tailwindcss/components'; @import '../node_modules/tailwindcss/utilities';حالا می تونید از Tailwindcss لذت ببرید :)

توابع Generator در ES6

مصطفی لوائی — Fri, 11 Oct 2019 19:01:54 +0330

قبل از این که توابع Generator رو توضیح بدم، می خوام یکم مقدمه بگم که ممکنه برای بعضی ها خسته کننده باشه، اما از اونجا که بعضی از برنامه نویس ها این ها رو نمی دونن، می خوام توضیح بدم. در صورتی که می خواید مستقیم وارد مبحث بشید می تونید از مقدمه صرف نظر کنید.توی جاواسکریپت، در حالت عادی توابع خط به خط اجرا می شن تا این که یکی از حالت های زیر اتفاق بیافته:1- رسیدن به کلمه کلیدی return: توی این حالت، مقداری که return شده به کسی که تابع رو صدا زده برگشت داده می شه. مثلا کد زیر رو ببینید:function x() { return 1; } function y() { return x(); } y(); بذارید مراحل اجرا رو یه دور با هم مرور کنیم. می دونیم که روی تعریف تابع، تا وقتی که فراخونی نشه هیچ اجرایی صورت نمی گیره، برای همین اولی خطی که اجرا می شه، فراخونی تابع y خواهد بود:y();وقتی مرورگر به این خط می رسه، می دونه که برای اجرای این خط باید بره جایی که تابع y تعریف شده رو پیدا کنه و تابع y رو از خط اول اجرا کنه. ولی قبل از اون باید محلی که الان توش قرار داره رو یه جا برای خودش نگه داره تا بعد از اجرای تابع y، دوباره به همینجا برگرده. بهترین روش برای نگهداری محل آخرین اجرا، stack هست. پس اگه نخوایم وارد پیچیدگی های دنیای واقعی بشیم، می تونیم بگیم که مرورگر عدد 12 (شماره خطی که الان داره اجرا می کنه)‌ رو توی stack ذخیره می کنه. پس الان stack به این صورته:stack: [12]و کدهای زیر اجرا خواهد شد:function y() { return x(); }توی بدنه تابع y تنها یه خط وجود داره، فراخونی تابع x. پس باید دوباره محل تعریف تابع x پیدا بشه و بدنه اون اجرا بشه. اما قبل از این که مرورگر تابع x رو اجرا کنه، باز هم محلی که الان توش قرار داره رو برای خودش توی stack ذخیره می کنه. با این حساب، stack به صورت زیر در میاد:stack: [12, 8]و کدهای زیر اجرا می شه:function x() { return 1; }توی تابع x فقط یک کار برای انجام هست، برگشت دادن عدد 1. پس مرورگر عدد 1 رو به جایی که تابع x رو صدا زده بر می گردونه. برای این کار به stack مراجعه می کنه و آخرین مقدار رو ازش برداشت می کنه. آخرین مقدار توی stack عدد 8 هست، پس stack به این صورت در میاد:stack: [12]و مرورگر به خط 8 می ره. خط 8 مربوط به فراخونی تابع x و return کردن مقدار برگشت داده شده از تابع x بود. الان مرورگر مقدار برگشت داده شده از تابع x رو می دونه. برای همین هم در واقع کد زیر اجرا می شه:return 1; // return x()چون باز هم به کلمه کلیدی return رسیدیم، مرورگر به stack مراجعه می کنه و عدد 12 رو ازش بر می داره. حالا دیگه stack خالی شده:stack: []وقتی stack خالیه یعنی دیگه به بالاترین سطح رسیدیم. چون عدد 12 از stack برداشته شده، مرورگر به سراغ اجرای خط 12 می ره. خط 12 چیزی جز فراخونی تابع y نبود. از اونجا که تابع y مقدار 1 رو برگردونده، خط به این صورت اجرا می شه:1; // y()2- به کلمه کلیدی throw برسه: توی این حالت، مقداری که throw شده، به کسی که تابع رو صدا زده برگشت داده می شه، وقتی صدا زننده تابع متوجه بروز خطا می شه، در صورتی که فراخونی تابع داخل try...catch باشه، از ادامه اجرای try منصرف می شه و کدهای داخل catch رو اجرا می کنه. اما اگه توی try...catch نباشه، یه مرحله به عقبتر بر می گرده و می ره سراغ کسی که اون تابع رو صدا زده. اینقدر این کار انجام می شه که یا به try...catch برسه، یا این که به بالاترین سطح برسه (stack خالی بشه). اگه به بالاترین سطح برسه و try..catch دیده نشه، یه خطا توی console نمایش داده می شه و برنامه از کار می افته.3- به آخر تابع برسه: آخرین راه پایان یک تابع، رسیدن به انتهای تابعه. در این صورت باز هم کنترل برنامه به کسی که تابع رو صدا زده برگشت داده می شه، با این تفاوتی که هیچ مقداری برگشت داده نشده (یا مقدار برگشت داده شده undefined هست).تابع زیر رو ببینید:function search(needle, haystack) { let results = []; for(let i=0; i { yield(2); }, 2000); } for(let result of generator()) { console.log(result); } // 1همونطور که می بینید فقط مقدار 1 لاگ می شه. اما کد بالا می تونه به این صورت اصلاح بشه که کار کنه:function sleep(time) { return new Promise( (resolve, reject) => { setTimeout(() => resolve(), time); } ); } async function* generator() { yield 1; await sleep(2000); yield 2; } async function consumer() { for await(let result of generator()) { console.log(result); } } consumer(); // 1 // 2اگه کد بالا رو اجرا کنید می بینید که اول 1 توی کنسول نمایش داده می شه و 2 ثانیه بعد، 2 نمایش داده می شه.توی کد بالا اول از همه اومدیم تابع setTimeout رو به یه Promise تبدیل کردیم که بتونیم از await استفاده کنیم. بعد توی حلقه for...of از قابلیت جدید ES استفاده کردیم و await رو بعد از کلمه کلیدی for قرار دادیم. با این کار می تونیم تابع generator که async هست رو توی حلقه استفاده کنیم. در نهایت از اونجا که نمی شه از await خارج از تابع async استفاده کرد، کل حلقه رو داخل تابع consumer که async هست قرار دادیم و در عوض تابع consumer رو فراخونی کردیم.

Primitive vs Non-Primitive

مصطفی لوائی — Mon, 07 Oct 2019 23:07:38 +0330

توی جاوااسکریپت متغیرها بر اساس تایپشون به دو دسته تقسیم می شن: Primitive و Non-Primitive. شاید بگید مگه جاوااسکریپت تایپ داره؟ بله متغیرها توی همه زبون ها تایپ دارن، اما توی بعضی از زبون ها مثل Java شما باید موقع تعریف متغیر تایپش رو مشخص کنید ولی توی زبونهایی مثل Javascript نوع متغیر، زمان اجرا و با توجه به مقدار درون متغیر مشخص می شه.به بحثمون برگردیم. تایپ های Number، String، Boolean، Symbol، Undefined و Null از نوع Primitive هستن. هر چیزی غیر از ۶ تایپی که گفته شد Non-Primitive یا Object Reference هستن.نحوه برخورد جاوااسکریپت با متغیرهای Primitive و Non-Primitive متفاوته، برای همین برای هر برنامه نویس جاوااسکریپت ضروریه که خصوصیاتشون رو بدونه. توی ادامه مطلب به تفاوت تایپ های Primitive و Non-Primitive می پردازم:تغییر ناپذیری: متغیرهایی که از نوع Primitive هستن، بر خلاف Non-Primitive ها، غیر قابل تغییرن. مثلا کد زیر رو ببینید:let primitive = 'Hello World'; primitive[0] = 'M'; console.log(primitive); //Hello Worldشاید توی کد بالا انتظار داشتید که عبارت Mello World نمایش داده بشه، ولی از اونجایی که تایپ String یه تایپ Primitive ه، غیر قابل تغییره. کد اصلاح شده اینطوریه:let primitive = 'Hello World'; primitive = 'Mello World'; console.log(primitive); //Mello Worldخاصیت تغییر ناپذیری توی تایپ های Non-Primitive وجود نداره، مثلا کد زیر رو ببینید:let nonPrimitive = { foo: "baz" } nonPrimitive.foo = "baz" console.log(nonPrimitive); //{foo: "baz"}کد بالا همونطور که انتظار داریم کار می کنه.مقایسه: نحوه مقایسه دو متغیر از نوع Primitive با دو متغیر از نوع Non-Primitive کاملا متفاوته. متغیرها Primitive با مقدارشون مقایسه می شن، اما متغیرهای Non-Primitive بر اساس Reference مقایسه می شن. برای این که موضوع واضح تر بشه کد زیر رو ببینید:let num1= 110, num2= 110; console.log(num1 === num2) //trueاما دو متغیر Non-Primitive حتی اگه مقادیر یکسانی داشته باشن با هم برابر نیستن. کد زیر رو ببینید:let arr1= [110], arr2= [110]; console.log(arr1 === arr2) //falseدو متغیر Non-Primitive فقط وقتی با هم برابرن که به یه جا اشاره کنن (بله متغیرهای Non-Primitive در واقع اشاره گر هستن)let arr1= [110], arr2= [110], arr3= arr1; console.log(arr1 === arr2) //false console.log(arr1 === arr3) //trueارسال به صورت پارامتر: از اونجا که یه متغیر Non-Primitive در واقع یه اشاره گره (برای همین به نام Object Reference هم شناخته می شن)، وقتی به صورت پارامتر برای تابعی ارسال بشه و اون تابع توی پارامتر ارسالی تغییری ایجاد کنه، متغیر اصلی هم تغییر می کنه:let primitive = 1, nonPrimitive = { foo: "bar" }; test(primitive, nonPrimitive); function test(primitiveArg, nonPrimitiveArg){ primitiveArg = 3; nonPrimitiveArg.foo = "baz" } console.log(primitive) //1 console.log(nonPrimitive) //{foo: "baz"}پس باید حواستون باشه وقتی یه متغیر Non-Primitive رو برای تابعی می فرستید، اگر نمی خواید توی مقدار متغیر اصلی تغییری ایجاد کنید، حتما پارامتر ارسالی یه کپی بگیرید و بعد ازش استفاده کنید:let primitive = 1, nonPrimitive = { foo: "bar" }; test(primitive, nonPrimitive); function test(primitiveArg, nonPrimitiveArg){ let cloneNonPrimitive = {...nonPrimitiveArg}; primitiveArg = 3; cloneNonPrimitive.foo = "baz" } console.log(primitive) //1 console.log(nonPrimitive) //{foo: "bar"}

افتتاحیه!

مصطفی لوائی — Sat, 05 Oct 2019 21:40:14 +0330

روز اولی که کتابم در مورد فریم ورک انگولار رو می نوشتم، اصلا انتظار نداشتم فروش چندانی داشته باشه. تنها هدفم این بود که توی اون زمان (که تازه انگولار ۲ اومده بود) که حتی رفرنس انگلیسی هم گیر نمی اومد، یه رفرنس خوب فارسی برای شروع کار با انگولار بنویسم. اما نتیجه فرا تر از انتظارم بود. کتابها (چه نسخه الکترونیکی چه کاغذی) خیلی بهتر از چیزی که فکر می کردم فروش رفت. این اتفاق و البته حمایت ها و تشویق های همسرم منو به فکر این انداخت که وارد وادی آموزش بشم. از آموزش فیزیکی (به همکاران و دوستان) تا فعالیت توی شبکه های اجتماعی (پاسخ به سوالات). اینجا بود که تازه فهمیدم چقدر به آموزش علاقه دارم.گذشت تا به یکی دو هفته پیش رسید. نمی دونم چی شد که تصمیم گرفتم توی کانال تلگرامم پست های آموزشی بذارم. نتیجه باز هم برام غافل گیر کننده بود. پیام های مخاطبام خیلی دلگرم کننده بود. برای همین به پیشنهاد یکی از همون مخاطبام، تصمیم گرفتم بلاگ نویس شم. موضوع این بلاگ قراره مطالب آموزشی در سطح متوسط و حرفه ای باشه (چون آموزش های ابتدایی مثل نخود و لوبیا تو سطح اینترنت ریخته). سعی می کنم بیشتر تمرکزم روی انگولار باشه اما قرار نیست فقط محدود به همین باشم.امیدوارم خدا توی راهی که انتخاب کردم کمکم کنه و بتونم به اندازه خودم سهمی توی گسترش علم بین هم میهنانم داشته باشم.