💎 اختصاص دادن Key به کامپوننت های رندر شده توسط حلقه ها در ریکت

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

|هر چیزی که باید در مورد Key Prop ها در ریکت بدانید|



#ریکت #key_props

🌐 @pieceJS

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

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

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

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

🌐 @pieceJS

💎 نمایش تمامی خطا های برگشتی توسط Yup

شاید متوجه شده باشید زمانی که پکیج Yup داره فرمی رو اعتبار سنجی می کنه و به ارور میخوره فقط یک ارور رو برگشت میده در صورتی که فرم شما ممکنه شامل ارور های بیشتری باشه (مثلا ایمیل، سن و... نا معتبر باشه یا یوزر وارد نکرده باشه yup فقط میگه ایمیل نامعتبر است دیگه نمی نویسد که سن رو وارد نکردید و دیگر ارور ها).

🔸 برای حل این مسئله، مهم است بدونید که متد validate دو تا ورودی میگیره (که عموماً برخی از همکاران فقط یک ورودی بهش میدن) ورودی اول، مقادیر فرم هست که معمولاً به صورت آبجکت بهش میدیم و ورودی دوم، options هست که باید به صورت آبجکت داده شود. حالا اگه میخواید که تمامی ارور ها برگشت داده شود، به آپشن، ابجکت abortEarly: false رو بدید و در این صورت تمامی ارور ها برگشت داده میشود

💬 نکته مهم تر: از انجایی که ارور ها در (err)catch برگشت داده میشه، در این قسمت میتونید err.inner رو لاگ بگیرید و لیست ارور ها رو مشاهده کنید که متاسفانه به آبجکت inner خیلی کم پرداخته شده است.
#yup #اعتبارسنجی_فرم

🌐 @pieceJS

💎 معرفی نرم افزار یا ابزار RunJS

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

💬 نکته مهم: کد های شما با موتور v8 ران خواهد شد.

💡 پیشنهاد: اگه از کد ادیتور VSCode یا IDE پی اچ پی استورم استفاده می کنید پیشنهاد می کنم از اکستنشن Quokka استفاده کنید این اکستنشن همانند RunJS عمل میکنه با این تفاوت که روی خود IDE شما نصب میشه.

#معرفی_نرم_افزار #جاوااسکریپت


🌐 @pieceJS

💎 تفاوت Shallow Copy و Deep Copy

🌐 @pieceJS

💎 تفاوت Shallow Copy و Deep Copy

یکی از مهم ترین مباحث جاوا اسکریپت که یادنگرفتن اون گاهاً موجب بروز خطا های لاجیکال خواهد شد و از اونجایی که خطا لاجیکال هست (یعنی نرم افزار بدون خطا کار میکنه ولی جوابی که میده اونی نیست که ما میخوایم) عیب یابیش نیاز به دانش عمیق جاوا اسکریپته و خلاصه کلی درد سر داره.🤯

فرض کنید یک آرایه داریم به نام myArray و قصد دارید ازش یه کپی بسازید به نام myArray2. معمولاً برای اینکه رفرنس کپی صورت نگیره، از Spread Operator استفاده می کنیم یعنی مینویسیم

 myArray2 = [...myArray] 

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

اگه قصد دارید که از یک آرایه تو در تو کپی بگیرید باید Deep Copy انجام بدید و این عمل رو با سریالایز کردن آرایه (تبدیل داده های پیچیده مثل آرایه یا آبجکت به رشته) صورت میگیره به عبارتی باید از متد های JSON استفاده کنید و ابتدا آرایه رو به رشته سپس مجدداً parseش کنید. (در تصویر بالا نمونشو گذاشتم)

🟡 نکات اضافه
———
💬 اگه از کتابخونه lodash استفاده می کنید میتونید از پکیج lodash.clonedeep استفاده کنید
💬 اگه از lodash استفاده نمی کنید میتونید از پکیج just-clone استفاده کنید.
💬 اگه از توسعه دهندگان Angular هستید میتونید از angular.copy استفاده کنید.

#جاوااسکریپت #deep_copy #shallow_copy


🌐 @pieceJS

💎 معرفی وبسایت پرکاربرد openbase

وبسایت openbase.com یکی از پرکاربرد ترین مراجع آنلاین تو انتخاب پکیج مناسب برای انجام فعالیتی خاص محسوب میشه.
⁉️ فرض کنید قصد دارید یک پکیج برای راه اندازی Date Picker نصب کنید و از طرفی، میخواید بدونید که محبوب ترین پکیج برای این کار چیه؟!

🔆 برای همین وارد این وبسایت میشید، از قسمت سرچ اسم Date Picker رو مینویسید، سمت راست فیلد سرچ، زبان مورد نظرتون رو انتخاب و سرچ رو انجام میدید. این وبسایت 10 تا از محبوب ترین پکیج ها رو از نظر تعداد نصب و بازخورد کاربران رو براتون نمایش میده و به سادگی میتونید بهترین پکیج رو برای هر کاری پیدا کنید.

💬 زبان های پشتیبانی شده : Javascript, Swift, Python, Java, Go, Rust

💬 نکته مهم: اگر گاهاً اختلالی تو این سایت مشاهده کردید از ف.ل.تر شکن استفاده کنید.

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

🌐 @pieceJS

💎 آشنایی با ابزار Browserslist برای توسعه دهندگان جاوااسکریپت

ابزار Browserslist به شما اجازه می دهد تعیین کنید که پروژه جاوااسکریپتی تان روی کدام مرورگر ها قابل اجرا باشد این ابزار در کتابخونه/فریم ورک های ریکت، انگولار و ویو قابل استفاده است.

در طول توسعه پروژه، ممکن است به جهت راحت کد زدن، یا کدنویسی تمیز و ... از برخی ویژگی های ورژن های جدید اکمااسکریپت استفاده کرده باشید از طرفی این نکته بسیار مهم است که بدانید به آن سرعتی که اکمااسکریپت آپدیت میشود، مرورگر ها آپدیت نمیشوند و قرار نیست تمام ویژگی های نسخه جدید اکما اسکریپت توسط تمام مرورگر ها پشتیبانی شود. به همین جهت با استفاده از browserslist تعیین می کنیم که این پروژه نوشته شده با توجه به فیچر های ES استفاده شده روی کدوم بروزر ها قابل پشتیبانی باشد.

💬 اجازه بدید یک مثال کاملاً مهم را برایتان بزنم...
ورژن 2015 اکمااسکریپت که اکثراً به نام ES6 میشناسیم و بسیار به مراتب مورد استفاده نیز قرار می دهیم توسط Opera Mini به هیچ عنوان پشتیبانی نمیشود (اپرا مینی یکی از بروزر های محبوب برخی از سیستم عامل های اندرویدی است) اینجاست که باید قبل از اینکه پروژه کار نکند یا به ایراد های جدی برخورد کند خودمان جلوی ران شدن آن را در این بروزر ها بگیریم و از کاربر بخواهیم که از بروزر های پشتیبانی شده استفاده کند.

پ.ن: برخی آموزش ها رو نمیشه به طور کامل تو کانال قرار داد برای همین سعی می کنم کاملش رو داخل سایت قرار بدم

|مطالعه بیشتر و آموزش استفاده|

🌐 @pieceJS

💎 اجرا شدن همزمان بخش فرانت با سرور با نوشتن npm start

احتمالا شما هم وقتی می خواهید پروژه تون رو اجرا کنید اول از فولدر فرانت پروژه رو استارت میزنید سپس یه ترمینال دیگه باز می کنید و از فولدر بک اند سرور رو استارت میزنید.

🌟 با استفاده از ابزار concurretly می تونید به سادگی با یک بار نوشتن npm start توی ترمینال، بخش فرانت و بخش بک اند به صورت خودکار اجرا کنید.
❕ برای این منظور، این پکیج رو از npmjs دانلود کنید

npm i concurrently -g

سپس فایل package.json رو باز کنید تو قسمت script، مقدار پراپرتی start رو مانند تصویر بدید


🟡 توجه داشته باشید که در تصویر بالا مقادیر command1 arg و command2 arg همان دستوراتیه که شما میخواهید با یک بار npm start زدن اجرا بشه

💬 توضیح مثال درون عکس :
تو این مثال وقتی npm start میزنیم ابزار concurrently میاد ابتدا دستور react-script start رو اجرا کنه سپس به فولدر server بره (با دستور cd server) و در اون فولدر دستور npm start رو اجرا کنه و اینجوری میشه که هم فرانت و هم سرور با یک بار npm start نوشتن ران میشن :)

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

🌐 @pieceJS

💎 حذف قسمت اعشاری یک عدد

جهت حذف قسمت اعشاری یک عدد بجای استفاده از متد Math.floor میتوانید از دو تا علامت مد قبل از آن عدد استفاده کنید (~~)

پ.ن: در منبعی ادعا شده بود که سرعت این روش از Math.floor بیشتر است اما بعید میبینم.


🌐 @pieceJS

💎 قابل توجه کسانی که نود جی اس خود را آپدیت کرده اند.

در صورتی که نود جی اس رو آپدیت کرده اید (مثل من از نسخه 14 به 18)

احتمالا به هنگام اتصال به دیتابیس (مانگودیبی) به خطای زیر برخورد کرده اید🧐:

MongoError: connect ECONNREFUSED 127.0.0.1:27017

🟡 جهت رفع این خطا، آدرس مانگودیبی خود را بجای نمونه ی زیر :

const uri = "mongodb://localhost:27017/";

به صورت زیر تغییر دهید

const uri = "mongodb://0.0.0.0:27017/";

یعنی بجای localhost از آدرس آی پی 0.0.0.0 استفاده کنید.

#نود_جی_اس #جاوا_اسکریپت

🌐 @pieceJS

💎 آموزش بستن پورت های از قبل اجرا شده

احتمالا شده که قصد اجرا پروژه تان روی پورت 3000 (یا هر پورت دیگه ای) داشته اید اما با خطای زیر رو برو شده باشید

Something is already running on port 3000.

جهت بستن این پورت میتونید از دستور بالا تو محیط ترمینال استفاده کنید.

💬 اگر پورت شما غیر از 3000 باشد، آن را جایگزین عدد 3000 در دستور بالا کنید.


🌐 @pieceJS

💎 معرفی کنترل ورژن NodeJS

⚠️ ممکنه به هر دلیلی با توجه به نوع پروژه نیاز داشته باشید یکبار از ورژن 14 نود جی اس استفاده کنید یکبار از ورژن 18 یا سایر ورژن ها. قطعاً اصولی نیست که هر بار نود جی اس رو حذف و ورژن قبلی یا بعدی رو نصب کنید.

🟡 نرم افزار NVM یک کنترل ورژن بسیار کاربردی برای نصب و مدیریت ورژن های مختلف نود جی اس روی ویندوز یا لینوکس می باشد با استفاده از این کنترل ورژن میتوانید هر چقدر که نیاز داشتید ورژن های مختلف نود جی اس رو نصب و هر زمان که نیاز داشتید بین آن ها سوئیچ کنید.

جهت دانلود NVM از گیت هاب اینجا کلیک کنید.

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

🌐 @pieceJS

💎 تبدیل زمان به فرمت های محلی

با استفاده از تکه کد فوق، می توانید به سادگی زمان هر زمان را به فرمت های محلی تبدیل کنید.

💬 نکته: این کد از ورژن 71 به بعد گوگل کروم، ورژن 65 به بعد فایرفاکس و همچنین ورژن 14 به بعد safari پشتیبانی کامل خواهد شد.

#زمان #جاوا_اسکریپت

🌐 @pieceJS

💎 معرفی Object.seal و تفاوت آن با Object.freeze

از متد Object.seal جهت مهر و موم کردن یک آبکت استفاده میشود اگر از این متد برای یک آبجکت استفاده کنید سه ویژگی زیر به آن آبجکت اضافه یا تغییر خواهد کرد:

1- دیگر نمی توان پراپرتی جدید به این آبجکت اضافه کرد.
2- با استفاده از دستور delete نمیتوانید هیچکدام از پراپرتی های این آبجکت را حذف کنید.
3- تنها مقدار پراپرتی های فعلی قابل تغییر هستند

🟣 و اما تفاوت آن با Object.freeze
تنها تفاوت این متد با متد freeze در مورد سوم است که آبجکتی رو در این متد قرار بدید علاوه بر مورد 1 و 2، مقدار پراپرتی های فعلی آن آبجکت نیز غیر قابل تغییر خواهند بود


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

🌐 @pieceJS

💎 تغییر مقدار initialValues در فرمیک

در صورتی که از فرمیک استفاده می کنید و قصد دارید با توجه به شرایط مختلف، مقادیر درون پراپ initialValues تغییر دهید میتوانید با قرار دادن پراپ enableReinitialize به تگ Form در هر زمان که احتیاج بود مقادیر initialValues را تغییر دهید. در غیر این صورت، پس از یکبار مقدار دهی، دیگر نمیتوان مقادیر اولیه را با استفاده از useContext یا تغییر state و حتی تغییر props تغییر داد.

#فرمیک #ریکت

🌐 @pieceJS

💎 میانبری جهت استفاده از console.log

اگر شما هم زیاد از console.log استفاده می کنید و مثل من زمان تایپ console.log رو consoel.log (مثلا اگر سریع تایپ کرده باشم 😁) می نویسید پیشنهاد می کنم با استفاده از تیکه کد بالا این دستور رو کوتاه ترش کنید.
#جاوا_اسکریپت

🌐 @pieceJS

💎 تولید آی دی یونیک بدون استفاده از کتابخانه

با استفاده از متد randomUUID از آبجکت crypto می توانید بدون استفاده از کتابخانه خاصی به آسانی UUID منحصر به فرد تولید کنید.


🔶 نکته مهم: crypto یک webAPI است و در هیچ یک از آپدیت های اکما اسکریپت ارائه نشده است پس فقط در مرورگر هایی که از آن پشتیبانی می کنند قابل استفاده است و تقریباً توسط تمامی مرورگر ها از ورژن های نسبتاً قدیمی شان تا به اکنون پشتیبانی می‌شود. نکته مهم تر آن که از آن نمی توانید در محیط های Runtime جاوا اسکریپت استفاده کنید مثلاً در سرور Nodejs.

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

🌐 @pieceJS