اگر از tyoeof و instanceof برای کاندیشن‌هاتون استفاده میکنید حسابی مراقب باشید. مثلا وقتی از typeof استفاده میکنید، تایپ Array رو به عنوان Object میشناسه و عملا تو این حالت استفاده ازش کاربردی نداره.

@AlirezaJsTs

https://www.totaltypescript.com/

یه سایت خیلی خوب برای آموزش typescript که کلی آموزش رایگان داره. با تمرین و حل تمرین آنلاین بعد از هر ویدیو. طراحی سایتش هم جالب بود 👌
یک ایده جالب که داره اینه که مشکل رو به شما توضیح میده و بعد حل مشکل رو به شما میسپره. و توی همون محیط وب شما دیباگ میکنید و تست مینویسید. و در نهایت سولوشن رو در اختیارتون میذاره.
اکستنشن ejoy هم برای ترجمه خوب روی ویدیوهاش کار میکنه که جدیدن حالت دو تا subtitle رو هم به این سایت اضافه کرده.

@AlirezaJsTs

نسخه 8.3 PHP منتشر شد.

https://www.php.net/releases/8.3/en.php

@AlirezaJsTs

اگه تو NodeJS برای وب سرورتون Auth service نوشتین و با password درستیِ اطلاعات رو چک میکنین، احتمالا به این صورت مقایسه پسورد رو انجام میدین:

if (hashed_pass_from_db === hashed_pass_from_input) {
  // success
}

این تکه کد یک مشکل امنیتی خطرناک داره که به خاطر استفاده از "===" هست.
حالا این مشکل چیه و چطور رفعش کنیم.

به این باگ امنیتی میگن Timing attack.
اینطور کار میکنه که با استفاده brute force هربار یک پسورد رو سمت back-end ارسال میکنن و با استفاده از تایمینگِ response حدس میزنن که چند درصد این پسورد درسته و اینقدر این کار رو انجام میدن تا پسورد درست رو به دست بیارن.
استفاده از پکیج‌های bcrypt میتونه با یه روش امن براتون پسورد رو چک کنه. اما اگه از scrypt استفاده کنین شما باید از یک function کمکی در ماژول crypto استفاده کنین.

crypto.timingSafeEqual(Buffer.from("a"), Buffer.from("a"))

این فانکشن زمان مقایسه رو یک مقدار ثابت در نظر میگیره. یعنی زمان مقایسه پسورد اشتباه با پسورد درست همیشه یکی هست و اینطوری attacker نمیتونه حدس بزنه که تا چه حد درست پیش رفته.

@AlirezaJsTs

وقتی بهت گفتن کرم بریز در کنارش درست رو هم ادامه بده

چرا React اینقدر محبوب است ؟ و کاربردهای آن کدامند؟ چه پرفورمنسی را برای ما بالا میبرد؟

وقتی Js میره سراغ Dom اصلی و بخواد اون رو تغییری مثل عمل درج کردن و حذف کردن و .. بده زمان زیادی صرف میکنه و هزینه ی کار کردن با Dom اصلی ( real Dom ) خیلی بالاست ‌به همین دلیل ری اکت این مشکل رو حل میکنه.
ری اکت از روی Dom اصلی و نسخه اصلی یک کپی به اسم Virtual Dom میسازه و تغییراتی روکه میخواد روی نسخه ی کپی شده اِعمال میکنه و بعد از اتقاق افتادن تغییرات میاد اختلاف بین Dom اصلی و Virtual Dom رو بررسی میکنه و فقط اون تغییراتی که اتفاق افتاده رو دوباره سازی میکنه به همین خاطر هست که در پروژه های ری اکت کُدها وجود ندارن و در پشت پرده همه چی توسط Virtual Dom اتفاق میافته و فقط همون قسمتی رو که تغییر میدیم دوباره سازی و load میشه و اینطوریه ک performance به شدت بالا میره .

البته همینvirtual dom اگر دولوپر نا‌ آگاهی ازش استفاده کنه می‌تونه فاجعه پرفورمنسی خلق کنه مثلا keyها رو برای راحتی خودش که خطا نخوره بیاد با متدهای رندم تعریف کنه یا هر جا رسید ایندکس مپ‌ رو بذاره key و حتی در شرایطی که لزومی نداره رندر اضافی به سیستم تحمیل کنه!

نکته: کدهای دام مجازی ( VirtualDom ) درون inspect قابل مشاهده هستند .

@AlirezaJsTs

ولی خب همچنان بیشتر از ۷۰٪ وبسایت‌های جهان از jQuery استفاده میکنن 😂

یکم سم از سی‌شارپ ببینید

https://flickity.metafizzy.co

این سایت کلی اسلایدر با ویژگی‌های مشخص و بهینه داره که میتونید تو پروژه‌هاتون استفاده کنید. به نظرم جالب بود.

@AlirezaJsTs

«این متغیری که استفاده نشده رو پاک کنم»

💡سوال مصاحبه فرانت اند | برای راه اندازی پروژه React از CRA استفاده کنیم یا vite ؟

ابزار CRA یا Create React App از webpack به عنوان باندلر استفاده می‌کنه. webpack یک ابزار برای بسته‌بندی یا باندل کردن کد‌های برنامه است. وقتی شما یک برنامه React رو با CRA راه‌اندازی میکنین، webpack تمامی کدهای برنامه رو باید قبل از اجرا باندل کنه. این اتفاق باعث میشه زمان بیشتری برای development server صرف بشه و اِعمال تغییراتی که انجام می‌دید نیاز به زمان زیادتری برای به نمایش گذاشتن تغییراتتون داشته باشه! مخصوصا اگر پروژه بزرگ و پیچیده ای داشته باشین!

🔹پس CRA از webpack به عنوان باندر استفاده می کند اما VITE از esbuild bundler استفاده می کند!


💡چرا از vite به جای CRA باید استفاده کنیم؟

۱ - 🔸 اجرای سریع‌تر development server :
 ابزار Vite قبل از اجرا کل برنامه رو باندل نمیکنه!
پکیج ها و دپندنسی ها اغلب در طول مسیر دولوپمنت تغییر نمیکنن! (کتابخانه های بزرگ مانند mui)!

ابزار vite پکیج ها و دپندنسی ها رو با استفاده esbuild پیش بسته بندی(Pre-bundle ) می کنه، که 10-100 برابر سریعتر از باندلرهای مبتنی بر جاوا اسکریپت هستش!
استفاده از ماژول ها در vite توسط Native ESM انجام میشه! Native ESM (ماژول‌های EMACScript) چیه؟
این قابلیت جدیدا به جاوا اسکریپت اضافه شده که در مورد چگونگی بارگذاری ماژول‌ها در برنامه جاوااسکریپت بحث میکنه!
🔹چه مزیتی داره؟
عدم نیاز به باندلینگ: بر اساس درخواست مرورگر، Vite کدهای سورس کد رو باندل میکنه. اگر ماژولی برای برخی از صفحات لازم نباشد، باندل نمی‌شود. این باعث می‌شود فقط ماژول‌های لازم برای هر صفحه بارگذاری شود.به این ترتیب سرعت پردازش به مراتب بالاتر می رود


۲ -🔸 در Vite، وقتی که یک فایل ویرایش میشه، تغییرات در فایل‌های ویرایش شده به سرعت و بدون نیاز به بازسازی کل برنامه اعمال میشن!

علاوه بر این، Vite از کش‌گذاری HTTP استفاده میکنه تا بارگذاری کدها و فایل‌های مورد نیاز را سریع‌تر کنه. این به این معنیه که فقط فایل‌هایی که ویرایش شده‌اند، باید بروزرسانی بشن، در حالی که فایل‌های دیگه از کش استفاده میکنن تا بلافاصله از حافظه‌ای که ذخیره شده است بارگذاری بشن!


۳ - 🔸افزایش performance در زمان build

همون طور که گفتیم vite با استفاده از native ESM فقط ماژول‌های لازم برای یک صفحه خاص رو بارگذاری میکنه، در حالی که ماژول‌های دیگر تا زمانی که نیاز نیست بارگذاری نمی‌شوند
در مقابل، CRA برای ساخت برنامه از webpack و باندلینگ کامل کدها استفاده می‌کند که ممکن است زمان بیشتری برای بارگذاری و باندلینگ کل کدها صرف شود، به خصوص در برنامه‌های بزرگ.

۴- 🔸سرعت بالای تیم توسعه شرکت vite : تیم vite به سرعت در حال ساخت و بروزرسانی پکیج های مورد نیاز یک برنامه ری اکتی هستش! برای مثال ابزاری مثل vitest برای تست نویسی توسط توسعه دهندگان vite ساخته شده که در برنامه هایی که با vite ساخته شده، این ابزار نیاز به کانفیگ خاصی نداره و به مراتب سرعت بالاتری نسبت به ابزار های تست نویسی دیگه ای مثل jest دارد!

بچه‌ها عیدتون مبارک 💙