💎 معرفی اکستنشن Thunder Client برای VS Code

تاندر کلاینت، یکی از اکستنشن های بی نظیر VS Code هست که به وسیله اون میتونید API هاتون رو تو نرم افزار تست کنید.
ناگفته نماند که خیلی از قابلیت های Postman رو داره و رابط کاربری اش هم خیلی جمع جور و عالی هست.

#مثبت_برنامه_نویس #جاوا_اسکریپت

🌐 @pieceJS

💎 تکنیکی برای تبدیل آریه ای از رشته ها به عدد

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

🔸 در مثالی که در تصویر آوردم، به دلیل اینکه میخواستم دیتای برگشتی از نوع عدد باشه، کالبک map رو Number نوشتم.

💬 نکته : شما میتونید Boolean هم نویسید در این صورت تماماً به صورت true و false برگشت داده میشود

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

🌐 @pieceJS

💎 گذاشتن Semicolon قبل از نوشتن کد!!!!

تاحالا دیدید جایی Semicolon رو بجای آخر کد، اول کد گذاشته باشند؟ 🤔

🔶 احتمالاً اسم توابع self-invoking یا self-executing یا همان توابع خود اجرا رو شنیده باشید تابعی که بعد از تعریف شدن به طور خودکار اجرا می شود. این توابع به دلیل ساختار خاصی که دارند و همچنین غیر ضروری بودن Semicolon در جاوا اسکریپت باعث اشتباه در تفسیر کدها توسط مفسر های جاوا اسکریپت میشوند و چون با پرانتز شروع می شوند مفسر اینگونه برداشت میکند که قصد نوشتن تابعی را دارید که نام آن تابع را در خط بالایی نوشته اید (البته در صورتی که بالای این تابع کدی نوشته باشید) و اینگونست که یک خطای درشت در محیط کنسول دریافت می کنید 😁
برای حل این موضوع میتونید قبل از پرانتز این توابع، یک سمیکالمن قرار دهید (یا انتهای خط قبلی یک سمیکالمن بزارید)

#مثبت_برنامه_نویس #جاوا_اسکریپت
🌐 @pieceJS

💎 معرفی وبسایت Component Party مناسب توسعه دهنگان JS

با استفاده از وبسایت Component Party می تونید سینتکس فریم ورک و کتابخونه های مختلف جاوا اسکریپت رو با هم مقایسه کنید.

🟡 این ابزار در زمان هایی که به چند فریم ورک/کتابخونه مسلطید یا در حال یادگیری هستید خیلی بکارتون میاد.

💬 این وبسایت از موارد زیر پشتیبانی خواهد کرد:
Svelte, React, Vue 3, SolidJS, Qwik, Angular, Lit, Vue 2, Ember, Alpine, Aurelia 1

🌐 برای ورود به این وبسایت اینجا کلیک کنید.

#مثبت_برنامه_نویس #جاوا_اسکریپت

🌐 @pieceJS

💎 راه حلی برای خطای 431 Request Header Fields Too Large

شاید هنگام رندر کردن پروژه ریکتی (در کل جاوا اسکریپتی) تان به این ارور در محیط کنسول برخورد کرده باشید این ارور زمانی رخ میده که حجم Header دریافتی از طریق پروتکل HTTP بالا باشه.
برای حل این موضوع میتونید یکی از راه حل های زیر رو در پیش بگیرید:
🔸 کوکی های بروزر رو پاکسازی کنید.
🔸درخواست Referer رو کوتاه تر کنید.
💬 توضیح: Referer، بخشی از درخواست ارسالی است که در آن اطلاعاتی در مورد منبعی که از آن درخواست ارسال شده رو نمایش میده. این اطلاعات شامل آدرس صفحه فعلی، صفحه قبلی ای که داخلش بودید و غیره خواهد شد که امروزه خیلی از وبسایت ها از این اطلاعات استفاده تجاری زیادی می کنند. بخش آماری وبسایت ها یا همچنین سرویس های آماری نیز از HTTP Referer جهت جمع آوری دیتا هاشون استفاده می کنند.
🔸 بهینه سازی کد ها (اینو باید بهتر بدونید کجا حجم هدر ارسالی رو افزایش دادید 😅)

🔶 و روش آخر اینکه محدودیت سایز هدر ارسالی را افزایش دهید.
برای این منظور، فایل package.json رو باز کنید
در قسمت script، مقدار پراپرتی استارت رو به صورت زیر وارد کنید

    "start": "react-scripts --max-http-header-size=10000 start"

در دستور بالا، با استفاده از پارامتر زیر این محدودیت رو کاهش دادیم
--max-http-header-size

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


🌐 @pieceJS

💎 معرفی متد های atob و btoa

اگر قصد encode یا decode رشته در فرمت Base64 رو دارید میتونید از این دو متد استفاده کنید.

🔶 بدین ترتیب میتوان گفت که متد btoa برای encode کردن یک رشته استفاده میشه و متد atob جهت decode کردن عبارت های encode شده در فرمت Base64 مورد استفاده قرار میگیره.

💬 نکته: این دو متد از نوع WebAPI هستند و در محیط هایی غیر از مرورگر مانند محیط سروری nodejs قابل استفاده نخواهند بود.
#webapi #javascript #nodejs

🌐 @pieceJS

💎 معرفی وب سرویس دیکشنری انگلیسی

اگر شما هم مثل من دنبال یک API دیکشنری انگلیسی هستید میتونید از API زیر به صورت رایگان استفاده کنید

https://api.dictionaryapi.dev/api/v2/entries/en/[your_word]

در لینک بالا، بجای [your_word] کلمه مورد نظرتون رو بنویسید تا به طور کامل ریشه اون کلمه رو تو دکشنری براتون در بیاره.

💭 نکته: متد درخواست GET است.

#جاوا_اسکریپت #معرفی_api #دیکشنری


🌐 @pieceJS

💎 چرا پاسخ NaN==NaN برابر false است؟

💬 تعریف: NaN مقدار شی گلوبالی یا به عبارتی گلوبال اسکوپ است و نماینده عبارت Not a number می باشد.
🔶 این مقدار نه قابل تغییر هست نه قابل شمارش و همچنین قابل پیکربندی هم نیست.
🔶 این مقدار توسط جاوا اسکریپت ابتداع نشده بلکه توسط استاندارد IEEE 754 تعریف شده و رفتار های این عبارت رو خود این استاندارد تعریف کرده است.

✅ از جمله این رفتار ها میتوان به نابرابری این عبارت با هر عبارت دیگه اشاره کرد. در واقع هرگاه پای مقایسه ای در میان باشه که یک طرف آن عبارت NaN قرار داشته باشه، همیشه پاسخ false خواهد بود مگر در حالتی که آن مقایسه NaN!==NaN باشد که در این صورت پاسخ true خواهد بود

#سوال_کاربران
#javascript

🌐 @pieceJS

💎 کاربرد createTextNode در جاوا اسکریپت چیست؟

ابتدا به این بپردازیم که تو جاوا اسکریپت، نود به چه معناست؟
خیلی ساده بخوام بگم اینکه به تمامی عناصر درون یک صفحه HTML نود میگیم.
🔸 نود ها میتونند عنصر، خصوصیت یا حتی تکست باشند.

▫️نکته: نود هیچ ارتباطی با رانتایم Node.js نداره و صرفاً تو اسمشون شباهت هایی وجود داره

حالا میتونیم بپردازیم به کاربرد createTextNode در جاوا اسکریپت:
🔸با استفاده از این متد، قادر خواهید بود تکست نود ها را ایجاد و آن ها رو درون نود های عنصری append کنید.

به عنوان مثال میتونید تکست نود عبارت Hello World رو به وسیله این متد ایجاد کنید سپس درون المنت p یا span یا هر المنت دیگه ای append کنید. در این صورت یک المنت نودی به نام p دارید که دارای تکست نودی با عبارت Hello World است.


#سوال_کاربران
#javascript

🌐 @pieceJS

💎 معرفی داکیومنت جدید کتابخونه React.js

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

👈🏻 مشاهده داکیومنت 👉🏻

#معرفی
#javascript #reactjs

🌐 @pieceJS

💎 معرفی پکیج 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