💎 معرفی پکیج Error Boundaries

به طور پیشفرض، اگر اپلیکیشن شما به خطایی برخورد، ریکت به صورت خودکار، صفحه UI اپلیکیشن رو حذف و خطا رو نمایش میده یا اگر در مرحله پروداکشن قرار داشته باشید، صفحه UI رو به صورت صفحه ای سفید نمایش خواهد داد. 😳 که این موضوع باعث سردرگرمی مشتریانی خواهد شد که از اپلیکیشن شما استفاده میکنند. 🤯

برای حل آن میتونید از Error boundary استفاده کنید، ارور باندری، عملکردی شبیه به Catch رو داره با این تفاوت که این بار برای کامپوننت ها کاربرد داره. یعنی اگر لود کامپوننت شما به خطا خورد، بجای سفید شدن صفحه یا نمایش دادن خطا در صفحه، پیام یا کامپوننت پیشفرضی که شما طراحی کرده اید رو نمایش میده.

💡 خود ریکت، تو مستنداتش این کامپوننت رو معرفی کرده اما فقط به صورت کلاسی قابل استفاده است. شما میتونید از پکیج react-error-boundary استفاده کنید این پکیج به صورت تابعی قابل دسترس بوده و از قابلیت های بیشتری برخوردار است.

استفاده از این پکیج خیلی آسون هست فقط کافیه نصبش کنید، ErrorBoundary ایمپورت کنید و کامپوننتی که میخواید رو درون ErrorBoundary بپیچید (wrap کنید). ☺️


🌐 @pieceJS

💎 آشنایی با کپچای Honeypot

این روزا که صحبت از هوش مصنوعی و ChatGPT هست احتمالاً شنیدید که حتی reCAPTCHA های گوگل هم قابل هک شدن توسط هوش مصنوعی هستند. 🧐
تو این پست میخوام یه نوع کپچایی بهتون معرفی کنم که در نوع خودش جالبه و البته هیچ وقت به پای reCAPTCHA نمیرسه اما میتونه جلوی یه سری از حملات که به صورت خودکار روی سایت ها صورت میگیره رو بگیره. 🤓

🔶این نوع کپچا، Honeypot نام داره، به این صورته که شما تو فیلد های فرم مورد نظر (مثلاً فرم لاگین یا ثبت نام) یه Input جدا (به عنوان تله) اضافه و با css یا js مخفیش می کنید اونوقت شرط میزارید که اگه این فیلد پر شده بود درخواست از طرف ربات بوده و اگر پر نشده بود از طرف یوزر صورت گرفته.

✅ یا برای اینکه امنیتش رو بالاتر ببرید میتونید اون Input رو به صورت چک باکس اضافه کنید و لیبلش رو بزارید I'm not a robot و بازم مخفیش کنید اونوقت اگه ربات باشه و این تکست رو بخونه میدونه که باید حتماً تیک بخوره در صورتی که شما در نظر گرفتید که هر کس اینو تیک زد ربات هست و ناک اوتش می کنید. (به هر حال مخفیش کرده بودید)

#کپچا #کد_امنیتی #reCAPTCHA #Honeypot

🌐 @pieceJS

💎 بدست آوردن تعداد تکرار عناصر یک آرایه

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

🙋🏻‍♂️ اعتراف می کنم چند روزی بود دنبال الگوریتمی میگشتم که برای تعداد عناصر بالای 100 هزار تا سرعت بالایی داشته باشه هم نیازی نباشه جهنمی از حلقه ها رو درست کنم و سرور رو ناک اوت کنم. 🤯

پند اخلاقی: چیز های ساده رو پیچیده نکنیم 😁

#جاوا_اسکریپت #آرایه

🌐 @pieceJS

💎 فلت کردن عناصر یک آرایه

فرض کنید آرایه ای از آرایه ها دارید و قصد دارید تمامی آن را با هم ادغام کنید. به این فرایند فلت کردن آرایه میگیم.

🔶 برای فلت کردن آرایه بجای استفاده از حلقه های تو در تو، میتونید از متد flat استفاده کنید. (به همین سادگی)

💡 نکته: ممکنه یکی از عناصر دارای آرایه ای تو در تو باشه در این صورت میتونید تعداد لایه هایی که مایلید فلت بشود رو به عنوان آرگومان به متد flat بدید

#جاوا_اسکریپت #آرایه

🌐 @pieceJS

💎 بدست آوردن آخرین عنصر آرایه

برای بدست آوردن آخرین عنصر آرایه، عموما از تکه کد زیر استفاده میشه
arr[arr.length - 1]

💡راه حل: شما میتونید برای بدست آوردن آخرین عنصر آرایه از متر at استفاده کنید و بهش آرگومان -1 بدید یعنی:
arr.at(-1)

💭 نکته: اگه بجای -1 از -2 استفاده کنید عنصر یکی مونده به آخر ارایه رو برمیگردونه و به همین ترتیب میتونید -3 یا -4 و ... بنویسید

#جاوا_اسکریپت #آرایه

🌐 @pieceJS

💎 بازکردن سریع ریپازیتوری گیت هاب در VSCode

💡 برای باز کردن ریپازیتوری های گیت هاب درون VSCode کافیه قبل از آدرس اون ریپازیتوری بنویسید vscode.dev/ . اونوقت اون ریپازیتوری درون ویرایشگر آنلاین vscode براتون لود میشه. به همین سادگی. 😍

مثال:
https://github.com/reactchartjs/react-chartjs-2

رو به صورت زیر بنویسید
https://vscode.dev/github.com/reactchartjs/react-chartjs-2

#گیت_هاب #vscode

🌐 @pieceJS

💎 نه به استفاده بیش از حد از Lazy Loading

همیشه استفاده از دیزاین پترن لیزی لودینگ به سود پروژه نخواهد بود.
🔶 مثلاً اگر سئوی پروژه براتون خیلی مهمه استفاده نادرست از این دیزاین پترن میتونه تاثیر منفی روی عملکرد موتور های جستجو درون سایت شما داشته باشد.
در واقع اینکه بدونید کی از این الگو استفاده کنید و کی استفاده نکنید یجور مهارت 💪🏻 محسوب میشه.

💭 در مقاله زیر تلاش کرده ام به طور جامع دیزاین پترن Lazy Loading را بررسی کنم.

از دوستان و اساتید بزرگوارم، اگر نکته ای در خصوص این الگو یا مقاله دارند به اشتراک بگذارند تا مقاله را بروزرسانی کنم. 🙏🏻

— مطالعه کامل مقاله
🌐 @pieceJS

💎 ابزار آنلاین Theme Generator برای Material UI

💬 اگر از Material UI جهت ایجاد پوسته پروژه تون استفاده می کنید قطعاً میدونید که این کتابخونه یه ویژگی فوق العاده ای که داره اینه که میتونید برای هر پروژه تون یه تم سفارشی طراحی کنید و اون تم رو روی پروژه‌تون اعمال کنید و خیلی ویژگی های عالی دیگه که باید که خاک دارک مود کردن پروژه با استفاده از جاوا اسکریپت رو خورده باشید تا کاملاً متوجه بشید 😁

✅ معرفی: برای ایجاد تم سفارشی میتونید از ابزار زیر استفاده کنید

https://bareynol.github.io/mui-theme-creator/

#معرفی #مثبت_برنامه_نویس #متریال_یو_آی #materialui

🌐 @pieceJS

💎 مقایسه برابری دو متغیر زمانی

💬 برای مقایسه دو متغیر زمانی (با تایپ آبجکت)، هیچوقت از عملگر == یا === استفاده کنید چون این دو عملگر تنها میتونند رفرنس متغیر های آبجکتی رو درون حافظه، با هم مقایسه میکنند و از آن جا که متغیر های زمانی از نوع آبجکت هستند و دو متغیر متفاوت، دارای دو رفرنس یا آدرس حافظه متفاوت است پس همیشه پاسخ مقایسه شما false خواهد بود (مگر اینکه متغیر اول درون متغیر دوم ریخته باشید یا اصطلاحاً Shallow Copy کرده باشید).

💡 به همین جهت برای مقایسه دو متغیر زمانی همیشه از متد های valueOf و یا getTime استفاده کنید این دو متد، متغیر زمانی مورد نظر را به میلی ثانیه و از نوع عدد تبدیل میکند آنگاست که مقایسه کاملاً صحیح صورت میگیره.


#زمان
🌐 @pieceJS

💎 استفاده از توکن های % در کنسول دات لاگ

💬 شما میتونید کاملآً مانند زبان سی از توکن های درصدی برای فرمت بندی رشته در دستور console.log استفاده کنید.

✅ نکته: درصد c به نظرم توکن جذابیه که با استفاده از اون میتونید برای لاگ مورد نظر استایل css بنویسید 😃👌🏻



🌐 @pieceJS

سلام رفقا
یه مدت نبودیم ولی با یه خبر خیلی خوب برگشتیم!

🟡 برا بچه هایی که کتاب های زبان مرجع و به زبان اصلی مطالعه میکنید، مطمئنم شده که بخواید کتابش رو خریداری کنید اما خب... کتاب اصلی به ارز خودمون خیلی گرون میوفته

خواستم بگم الان یه موقعیتی فراهم شده که میتونیم PDF هاتون رو به کتاب تبدیل کنیم :)

🌱 مورد اول اینکه محدودیت کتاب نداریم
🌱 مورد دوم از لحاظ قیمت خیلی خیلی بصرفه تر از بازار در نظر گرفتیم :)

⭕️ فرصت ثبت سفارش تا 1 مهر
با توجه به اینکه حجم کتاب ها متفاوت هستش، جهت اطلاع از قیمت اسم کتاب رو برام ارسال کنید:
🆔@MRVJ475

💎 فعال کردن تب Commit درون نرم افزار های JetBrains

برای فعال کردن تب Commit در نرم افزار های شرکت جت برینز، میتونید از طریق آدرس زیر اقدام کنید:
File > Settings > Version Control > Commit
و گزینه ی Use non-modal commit interface را فعال کنید.

پ.ن: دو روز بود تبش حذف شده بود اعتراف میکنم که الان درک میکنم این فیچر چقدر تو وقتم صرفه جویی میکنه 🥲
#مثبت_برنامه_نویس

🌐 @pieceJS

💎 دو نکته کلیدی در مورد Root Layout ها در NextJs

☝️جهت تعریف Root Layout مجزا برای هر دسته بندی یا URL باید روت لایوت صفحه اصلی پروژه را حذف کنید و در هر صفحه یا دسته بندی یک روت لایوت مجزا تعریف کنید.
✌️ نکته مهم اینکه در صورتی که برای هر صفحه یک روت لایوت تعریف کردید، پیمایش بین صفحه ها با Full reload همراه خواهد بود.

#نکست_جی_اس


🌐 @pieceJS

💎 زکات دانش نشر آن است (امام علی ع)

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


🌐 @pieceJS

💎 در مورد عبارت instanceof در جاوا اسکریپت

عبارت instanceof عبارتیست برای بررسی تست زنجیره prototype یک ابجکت استفاده قرار میگیرد یعنی بررسی می کند که آیا prototype یک آبجکت، از constructor مورد نظر نمونه گیری شده است یا خیر... (چی گفتم!!! 🤯)
مثلا کد زیر رو در نظر بگیرید

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
const auto = new Car('Honda', 'Accord', 1998);

console.log(Car instanceof auto);
// خروجی : true

console.log(auto instanceof Object);
// خروجی: true

چون ابجکت auto از نمونه ای از کانستراکتور Car هست خروجی لاگ اول true خواهد بود و از طرفی هر آبجکت نمونه ای از کلاس Object هم هست برای همین خروجی لاگ دوم هم true هست.

سینتکس کلیش هم به صورت زیر هست

 object instanceof constructor

#cunstructor #object #جاوااسکریپت

🌐 @pieceJS

💎 ارور پسورد هنگام استفاده از متد hash در پکیج bcrypt.js

گاهاً زمانی که از پکیج Bcrypt.JS استفاده میکنید و قصد هش کردن پسورد با استفاده از متد hash دارید ممکن است که با یکی از خطا های زیر رو برو بشید

User validation failed: password: Password is required
یا خطای
Illegal arguments: number, number

و این درحالیست که شما برای پارامتر پسورد هم مقداردهی کرده اید!!!
اگر به این خطا برخوردید حدسم اینه که شما هم مثل من مقدار پسورد رو به صورت عددی 123456 وارد میکنید و پروژه نمیتونه عدد رو تشخیص بده و خطا دریافت میکنید

💡 راه حلش هم اینه که این مقدار رو به صورت رشته "123456" ارسال کنید.

💭 توجه: این نکته صرفا زمانی که دارید از postman استفاده میکنید ممکنه مورد استفاده تان قرار بگیرد.

#جاوااسکریپت #postman

🌐 @pieceJS

💎 جایگزینی برای postman در PHPStorm

اگر شما هم از postman برای تست api هاتون استفاده میکنید و برای توسعه پروژه هاتون phpstorm انتخاب کرده اید پیشنهاد میکنم بجای استفاده از postman، پلاگین RestfulBox رو روی نرم افزارتون نصب کنید و سریع تر api هاتون رو تست کنید. تقریباً امکانات ضروری postman رو هم داره 😁👌🏻

💡 راهنمای نصب:
File > Settings > Plugins

عبارت RestfulBox رو سرچ و نصب کنید

#مثبت_برنامه_نویس #phpstorm

🌐 @pieceJS

💎 ارور replaceAll is not a function !!!

با اینکه بیش از 1 سال است از آپدیت ES2021 میگذره اما هنوز برخی از همکاران به این ارور برخورد می کنند و دلیل آن هم عدم پشتیبانی بعضی از ورژن های یسری از مروگر ها از ES2021 یا حداقل عدم پشتیبانی کامل آن ها از آپدیت ES2021 است

🔸 به منظور حل این مشکل می تونید همچنان از متد String.prototype.replace استفاده کنید و از آنجایی که این متد فقط یک بار replace انجام میده (در واقع کل محتوا رو replace نمی کنه) میتونید از regex برای حل این مسئله استفاده کنید.

#جاوا_اسکریپت #رجکس #ES2021

🌐 @pieceJS

سلام و شب بخیر
دوستان گلم معذرت میخوام مدتی درگیر پروژه ای بودیم (که بهتون میگم داستانشو) و به شخصه نتونستم کانال رو زیاد بروز کنم 🥹
سعی میکنم با این خبر یخورده کم کاریمو توجیه کنم 😁🥲

خبر هم اینکه خط چاپ کتاب های زبان اصلی رو راه انداختیم 😍

از امروز هر کتاب زبان اصلی ای که خواستید رو میتونیم براتون چاپ کنیم نمونه چاپ ها هم در ادامه میزارم که کیفیت چاپ رو ببینید 😉
قیمت هامون بسیار پایین در عوضش کیفیت کار واقعاً عالیه. 😍👌🏻
💡 برای ثبت سفارش، اسم کتاب مدنظرتون رو برامون پی وی کنید:
@MRVJ475

نکته مهم دیگه اینکه هیچ محدودیتی نداریم حتی اگر یک جلد بخواید سفارش بدید