💎 معرفی کنترل ورژن NodeJS
⚠️ ممکنه به هر دلیلی با توجه به نوع پروژه نیاز داشته باشید یکبار از ورژن 14 نود جی اس استفاده کنید یکبار از ورژن 18 یا سایر ورژن ها. قطعاً اصولی نیست که هر بار نود جی اس رو حذف و ورژن قبلی یا بعدی رو نصب کنید.
🟡 نرم افزار NVM یک کنترل ورژن بسیار کاربردی برای نصب و مدیریت ورژن های مختلف نود جی اس روی ویندوز یا لینوکس می باشد با استفاده از این کنترل ورژن میتوانید هر چقدر که نیاز داشتید ورژن های مختلف نود جی اس رو نصب و هر زمان که نیاز داشتید بین آن ها سوئیچ کنید.
جهت دانلود NVM از گیت هاب اینجا کلیک کنید.
#کنترل_ورژن #معرفی #مثبت_برنامه_نویس
🌐 @pieceJS
⚠️ ممکنه به هر دلیلی با توجه به نوع پروژه نیاز داشته باشید یکبار از ورژن 14 نود جی اس استفاده کنید یکبار از ورژن 18 یا سایر ورژن ها. قطعاً اصولی نیست که هر بار نود جی اس رو حذف و ورژن قبلی یا بعدی رو نصب کنید.
🟡 نرم افزار NVM یک کنترل ورژن بسیار کاربردی برای نصب و مدیریت ورژن های مختلف نود جی اس روی ویندوز یا لینوکس می باشد با استفاده از این کنترل ورژن میتوانید هر چقدر که نیاز داشتید ورژن های مختلف نود جی اس رو نصب و هر زمان که نیاز داشتید بین آن ها سوئیچ کنید.
جهت دانلود NVM از گیت هاب اینجا کلیک کنید.
#کنترل_ورژن #معرفی #مثبت_برنامه_نویس
🌐 @pieceJS
👍6
💎 تبدیل زمان به فرمت های محلی
با استفاده از تکه کد فوق، می توانید به سادگی زمان هر زمان را به فرمت های محلی تبدیل کنید.
💬 نکته: این کد از ورژن 71 به بعد گوگل کروم، ورژن 65 به بعد فایرفاکس و همچنین ورژن 14 به بعد safari پشتیبانی کامل خواهد شد.
#زمان #جاوا_اسکریپت
🌐 @pieceJS
با استفاده از تکه کد فوق، می توانید به سادگی زمان هر زمان را به فرمت های محلی تبدیل کنید.
💬 نکته: این کد از ورژن 71 به بعد گوگل کروم، ورژن 65 به بعد فایرفاکس و همچنین ورژن 14 به بعد safari پشتیبانی کامل خواهد شد.
#زمان #جاوا_اسکریپت
🌐 @pieceJS
👍15
💎 معرفی Object.seal و تفاوت آن با Object.freeze
از متد Object.seal جهت مهر و موم کردن یک آبکت استفاده میشود اگر از این متد برای یک آبجکت استفاده کنید سه ویژگی زیر به آن آبجکت اضافه یا تغییر خواهد کرد:
1- دیگر نمی توان پراپرتی جدید به این آبجکت اضافه کرد.
2- با استفاده از دستور delete نمیتوانید هیچکدام از پراپرتی های این آبجکت را حذف کنید.
3- تنها مقدار پراپرتی های فعلی قابل تغییر هستند
🟣 و اما تفاوت آن با Object.freeze
تنها تفاوت این متد با متد freeze در مورد سوم است که آبجکتی رو در این متد قرار بدید علاوه بر مورد 1 و 2، مقدار پراپرتی های فعلی آن آبجکت نیز غیر قابل تغییر خواهند بود
#جاوا_اسکریپت
🌐 @pieceJS
از متد Object.seal جهت مهر و موم کردن یک آبکت استفاده میشود اگر از این متد برای یک آبجکت استفاده کنید سه ویژگی زیر به آن آبجکت اضافه یا تغییر خواهد کرد:
1- دیگر نمی توان پراپرتی جدید به این آبجکت اضافه کرد.
2- با استفاده از دستور delete نمیتوانید هیچکدام از پراپرتی های این آبجکت را حذف کنید.
3- تنها مقدار پراپرتی های فعلی قابل تغییر هستند
🟣 و اما تفاوت آن با Object.freeze
تنها تفاوت این متد با متد freeze در مورد سوم است که آبجکتی رو در این متد قرار بدید علاوه بر مورد 1 و 2، مقدار پراپرتی های فعلی آن آبجکت نیز غیر قابل تغییر خواهند بود
#جاوا_اسکریپت
🌐 @pieceJS
👍15
💎 تغییر مقدار initialValues در فرمیک
در صورتی که از فرمیک استفاده می کنید و قصد دارید با توجه به شرایط مختلف، مقادیر درون پراپ initialValues تغییر دهید میتوانید با قرار دادن پراپ enableReinitialize به تگ Form در هر زمان که احتیاج بود مقادیر initialValues را تغییر دهید. در غیر این صورت، پس از یکبار مقدار دهی، دیگر نمیتوان مقادیر اولیه را با استفاده از useContext یا تغییر state و حتی تغییر props تغییر داد.
#فرمیک #ریکت
🌐 @pieceJS
در صورتی که از فرمیک استفاده می کنید و قصد دارید با توجه به شرایط مختلف، مقادیر درون پراپ initialValues تغییر دهید میتوانید با قرار دادن پراپ enableReinitialize به تگ Form در هر زمان که احتیاج بود مقادیر initialValues را تغییر دهید. در غیر این صورت، پس از یکبار مقدار دهی، دیگر نمیتوان مقادیر اولیه را با استفاده از useContext یا تغییر state و حتی تغییر props تغییر داد.
#فرمیک #ریکت
🌐 @pieceJS
👍8
💎 میانبری جهت استفاده از console.log
اگر شما هم زیاد از console.log استفاده می کنید و مثل من زمان تایپ console.log رو consoel.log (مثلا اگر سریع تایپ کرده باشم 😁) می نویسید پیشنهاد می کنم با استفاده از تیکه کد بالا این دستور رو کوتاه ترش کنید.
#جاوا_اسکریپت
🌐 @pieceJS
اگر شما هم زیاد از console.log استفاده می کنید و مثل من زمان تایپ console.log رو consoel.log (مثلا اگر سریع تایپ کرده باشم 😁) می نویسید پیشنهاد می کنم با استفاده از تیکه کد بالا این دستور رو کوتاه ترش کنید.
#جاوا_اسکریپت
🌐 @pieceJS
👍23👎3
💎 تولید آی دی یونیک بدون استفاده از کتابخانه
با استفاده از متد randomUUID از آبجکت crypto می توانید بدون استفاده از کتابخانه خاصی به آسانی UUID منحصر به فرد تولید کنید.
🔶 نکته مهم: crypto یک webAPI است و در هیچ یک از آپدیت های اکما اسکریپت ارائه نشده است پس فقط در مرورگر هایی که از آن پشتیبانی می کنند قابل استفاده است و تقریباً توسط تمامی مرورگر ها از ورژن های نسبتاً قدیمی شان تا به اکنون پشتیبانی میشود. نکته مهم تر آن که از آن نمی توانید در محیط های Runtime جاوا اسکریپت استفاده کنید مثلاً در سرور Nodejs.
#جاوا_اسکریپت
🌐 @pieceJS
با استفاده از متد randomUUID از آبجکت crypto می توانید بدون استفاده از کتابخانه خاصی به آسانی UUID منحصر به فرد تولید کنید.
🔶 نکته مهم: crypto یک webAPI است و در هیچ یک از آپدیت های اکما اسکریپت ارائه نشده است پس فقط در مرورگر هایی که از آن پشتیبانی می کنند قابل استفاده است و تقریباً توسط تمامی مرورگر ها از ورژن های نسبتاً قدیمی شان تا به اکنون پشتیبانی میشود. نکته مهم تر آن که از آن نمی توانید در محیط های Runtime جاوا اسکریپت استفاده کنید مثلاً در سرور Nodejs.
#جاوا_اسکریپت
🌐 @pieceJS
👍12
💎 معرفی یک Benchmarking برای جاوا اسکریپت
فرض کنید دو تیکه کد دارید و میخواید بدونید کدام یک از دیگری سرعت اجرا شدن بیشتری داره.
به عنوان مثال، میخواید بررسی کنید کدام یک از حلقه های for و while یا map تو شرایط یکسان از سرعت و پرفرمنس بالاتری برخوردار است.
با استفاده از وبسایت jsben.ch می تونید بنچ مارک کد های جاوا اسکریپتی تون رو با هم مقایسه کنید.
#مثبت_برنامه_نویس #جاوا_اسکریپت
🌐 @pieceJS
فرض کنید دو تیکه کد دارید و میخواید بدونید کدام یک از دیگری سرعت اجرا شدن بیشتری داره.
به عنوان مثال، میخواید بررسی کنید کدام یک از حلقه های for و while یا map تو شرایط یکسان از سرعت و پرفرمنس بالاتری برخوردار است.
با استفاده از وبسایت jsben.ch می تونید بنچ مارک کد های جاوا اسکریپتی تون رو با هم مقایسه کنید.
#مثبت_برنامه_نویس #جاوا_اسکریپت
🌐 @pieceJS
👍13
💎 معرفی اکستنشن Thunder Client برای VS Code
تاندر کلاینت، یکی از اکستنشن های بی نظیر VS Code هست که به وسیله اون میتونید API هاتون رو تو نرم افزار تست کنید.
ناگفته نماند که خیلی از قابلیت های Postman رو داره و رابط کاربری اش هم خیلی جمع جور و عالی هست.
#مثبت_برنامه_نویس #جاوا_اسکریپت
🌐 @pieceJS
تاندر کلاینت، یکی از اکستنشن های بی نظیر VS Code هست که به وسیله اون میتونید API هاتون رو تو نرم افزار تست کنید.
ناگفته نماند که خیلی از قابلیت های Postman رو داره و رابط کاربری اش هم خیلی جمع جور و عالی هست.
#مثبت_برنامه_نویس #جاوا_اسکریپت
🌐 @pieceJS
👍16
💎 تکنیکی برای تبدیل آریه ای از رشته ها به عدد
برای تبدیل آرایه ای از رشته ها به عدد کافیست از تابع map استفاده کنید و کالبک آن را نوع داده ای که میخواهید برگشت داده بشود رو بنویسید.
🔸 در مثالی که در تصویر آوردم، به دلیل اینکه میخواستم دیتای برگشتی از نوع عدد باشه، کالبک map رو Number نوشتم.
💬 نکته : شما میتونید Boolean هم نویسید در این صورت تماماً به صورت true و false برگشت داده میشود
#جاوا_اسکریپت #تکنیک #datacasting
🌐 @pieceJS
برای تبدیل آرایه ای از رشته ها به عدد کافیست از تابع map استفاده کنید و کالبک آن را نوع داده ای که میخواهید برگشت داده بشود رو بنویسید.
🔸 در مثالی که در تصویر آوردم، به دلیل اینکه میخواستم دیتای برگشتی از نوع عدد باشه، کالبک map رو Number نوشتم.
💬 نکته : شما میتونید Boolean هم نویسید در این صورت تماماً به صورت true و false برگشت داده میشود
#جاوا_اسکریپت #تکنیک #datacasting
🌐 @pieceJS
👍16
💎 گذاشتن Semicolon قبل از نوشتن کد!!!!
تاحالا دیدید جایی Semicolon رو بجای آخر کد، اول کد گذاشته باشند؟ 🤔
🔶 احتمالاً اسم توابع self-invoking یا self-executing یا همان توابع خود اجرا رو شنیده باشید تابعی که بعد از تعریف شدن به طور خودکار اجرا می شود. این توابع به دلیل ساختار خاصی که دارند و همچنین غیر ضروری بودن Semicolon در جاوا اسکریپت باعث اشتباه در تفسیر کدها توسط مفسر های جاوا اسکریپت میشوند و چون با پرانتز شروع می شوند مفسر اینگونه برداشت میکند که قصد نوشتن تابعی را دارید که نام آن تابع را در خط بالایی نوشته اید (البته در صورتی که بالای این تابع کدی نوشته باشید) و اینگونست که یک خطای درشت در محیط کنسول دریافت می کنید 😁
برای حل این موضوع میتونید قبل از پرانتز این توابع، یک سمیکالمن قرار دهید (یا انتهای خط قبلی یک سمیکالمن بزارید)
#مثبت_برنامه_نویس #جاوا_اسکریپت
🌐 @pieceJS
تاحالا دیدید جایی Semicolon رو بجای آخر کد، اول کد گذاشته باشند؟ 🤔
🔶 احتمالاً اسم توابع self-invoking یا self-executing یا همان توابع خود اجرا رو شنیده باشید تابعی که بعد از تعریف شدن به طور خودکار اجرا می شود. این توابع به دلیل ساختار خاصی که دارند و همچنین غیر ضروری بودن Semicolon در جاوا اسکریپت باعث اشتباه در تفسیر کدها توسط مفسر های جاوا اسکریپت میشوند و چون با پرانتز شروع می شوند مفسر اینگونه برداشت میکند که قصد نوشتن تابعی را دارید که نام آن تابع را در خط بالایی نوشته اید (البته در صورتی که بالای این تابع کدی نوشته باشید) و اینگونست که یک خطای درشت در محیط کنسول دریافت می کنید 😁
برای حل این موضوع میتونید قبل از پرانتز این توابع، یک سمیکالمن قرار دهید (یا انتهای خط قبلی یک سمیکالمن بزارید)
#مثبت_برنامه_نویس #جاوا_اسکریپت
🌐 @pieceJS
👍18
💎 معرفی وبسایت Component Party مناسب توسعه دهنگان JS
با استفاده از وبسایت Component Party می تونید سینتکس فریم ورک و کتابخونه های مختلف جاوا اسکریپت رو با هم مقایسه کنید.
🟡 این ابزار در زمان هایی که به چند فریم ورک/کتابخونه مسلطید یا در حال یادگیری هستید خیلی بکارتون میاد.
💬 این وبسایت از موارد زیر پشتیبانی خواهد کرد:
Svelte, React, Vue 3, SolidJS, Qwik, Angular, Lit, Vue 2, Ember, Alpine, Aurelia 1
🌐 برای ورود به این وبسایت اینجا کلیک کنید.
#مثبت_برنامه_نویس #جاوا_اسکریپت
🌐 @pieceJS
با استفاده از وبسایت Component Party می تونید سینتکس فریم ورک و کتابخونه های مختلف جاوا اسکریپت رو با هم مقایسه کنید.
🟡 این ابزار در زمان هایی که به چند فریم ورک/کتابخونه مسلطید یا در حال یادگیری هستید خیلی بکارتون میاد.
💬 این وبسایت از موارد زیر پشتیبانی خواهد کرد:
Svelte, React, Vue 3, SolidJS, Qwik, Angular, Lit, Vue 2, Ember, Alpine, Aurelia 1
🌐 برای ورود به این وبسایت اینجا کلیک کنید.
#مثبت_برنامه_نویس #جاوا_اسکریپت
🌐 @pieceJS
👍8
💎 استفاده از console.group و console.groupCollapsed
اگر به تعداد زیاد از console.log در یک محل استفاده می کنید، میتونید با استفاده از console.group اون ها رو دسته بندی کنید.
سینتکس این متد رو در تصویر بالا میتونید ببینید
⁉️ تفاوت متد group و groupCollapsed چیست؟
هیچ تفاوتی با هم ندارند تنها تفاوتشون اینه که گروهی که با متد group میسازید به صورت پشیفرض Expanded هست ولی گروهی که با متد groupCollapsed میسازید به صورت پیشفرض Collapsed خواهد بود.
💬 نکته: اگر از این متد به صورت تو در تو استفاده کنید، میتوانید شاهد دسته بندی های تو در تو در محیط کنسولتون باشید.
#جاوا_اسکریپت
🌐 @pieceJS
اگر به تعداد زیاد از console.log در یک محل استفاده می کنید، میتونید با استفاده از console.group اون ها رو دسته بندی کنید.
سینتکس این متد رو در تصویر بالا میتونید ببینید
⁉️ تفاوت متد group و groupCollapsed چیست؟
هیچ تفاوتی با هم ندارند تنها تفاوتشون اینه که گروهی که با متد group میسازید به صورت پشیفرض Expanded هست ولی گروهی که با متد groupCollapsed میسازید به صورت پیشفرض Collapsed خواهد بود.
💬 نکته: اگر از این متد به صورت تو در تو استفاده کنید، میتوانید شاهد دسته بندی های تو در تو در محیط کنسولتون باشید.
#جاوا_اسکریپت
🌐 @pieceJS
👍8
💎 راه حلی برای خطای 431 Request Header Fields Too Large
شاید هنگام رندر کردن پروژه ریکتی (در کل جاوا اسکریپتی) تان به این ارور در محیط کنسول برخورد کرده باشید این ارور زمانی رخ میده که حجم Header دریافتی از طریق پروتکل HTTP بالا باشه.
برای حل این موضوع میتونید یکی از راه حل های زیر رو در پیش بگیرید:
🔸 کوکی های بروزر رو پاکسازی کنید.
🔸درخواست Referer رو کوتاه تر کنید.
💬 توضیح: Referer، بخشی از درخواست ارسالی است که در آن اطلاعاتی در مورد منبعی که از آن درخواست ارسال شده رو نمایش میده. این اطلاعات شامل آدرس صفحه فعلی، صفحه قبلی ای که داخلش بودید و غیره خواهد شد که امروزه خیلی از وبسایت ها از این اطلاعات استفاده تجاری زیادی می کنند. بخش آماری وبسایت ها یا همچنین سرویس های آماری نیز از HTTP Referer جهت جمع آوری دیتا هاشون استفاده می کنند.
🔸 بهینه سازی کد ها (اینو باید بهتر بدونید کجا حجم هدر ارسالی رو افزایش دادید 😅)
🔶 و روش آخر اینکه محدودیت سایز هدر ارسالی را افزایش دهید.
برای این منظور، فایل package.json رو باز کنید
در قسمت script، مقدار پراپرتی استارت رو به صورت زیر وارد کنید
--max-http-header-size
#جاوا_اسکریپت
🌐 @pieceJS
شاید هنگام رندر کردن پروژه ریکتی (در کل جاوا اسکریپتی) تان به این ارور در محیط کنسول برخورد کرده باشید این ارور زمانی رخ میده که حجم Header دریافتی از طریق پروتکل HTTP بالا باشه.
برای حل این موضوع میتونید یکی از راه حل های زیر رو در پیش بگیرید:
🔸 کوکی های بروزر رو پاکسازی کنید.
🔸درخواست Referer رو کوتاه تر کنید.
💬 توضیح: Referer، بخشی از درخواست ارسالی است که در آن اطلاعاتی در مورد منبعی که از آن درخواست ارسال شده رو نمایش میده. این اطلاعات شامل آدرس صفحه فعلی، صفحه قبلی ای که داخلش بودید و غیره خواهد شد که امروزه خیلی از وبسایت ها از این اطلاعات استفاده تجاری زیادی می کنند. بخش آماری وبسایت ها یا همچنین سرویس های آماری نیز از HTTP Referer جهت جمع آوری دیتا هاشون استفاده می کنند.
🔸 بهینه سازی کد ها (اینو باید بهتر بدونید کجا حجم هدر ارسالی رو افزایش دادید 😅)
🔶 و روش آخر اینکه محدودیت سایز هدر ارسالی را افزایش دهید.
برای این منظور، فایل package.json رو باز کنید
در قسمت script، مقدار پراپرتی استارت رو به صورت زیر وارد کنید
"start": "react-scripts --max-http-header-size=10000 start"در دستور بالا، با استفاده از پارامتر زیر این محدودیت رو کاهش دادیم
--max-http-header-size
#جاوا_اسکریپت
🌐 @pieceJS
👍7
💎 معرفی متد های atob و btoa
اگر قصد encode یا decode رشته در فرمت Base64 رو دارید میتونید از این دو متد استفاده کنید.
🔶 بدین ترتیب میتوان گفت که متد btoa برای encode کردن یک رشته استفاده میشه و متد atob جهت decode کردن عبارت های encode شده در فرمت Base64 مورد استفاده قرار میگیره.
💬 نکته: این دو متد از نوع WebAPI هستند و در محیط هایی غیر از مرورگر مانند محیط سروری nodejs قابل استفاده نخواهند بود.
#webapi #javascript #nodejs
🌐 @pieceJS
اگر قصد encode یا decode رشته در فرمت Base64 رو دارید میتونید از این دو متد استفاده کنید.
🔶 بدین ترتیب میتوان گفت که متد btoa برای encode کردن یک رشته استفاده میشه و متد atob جهت decode کردن عبارت های encode شده در فرمت Base64 مورد استفاده قرار میگیره.
💬 نکته: این دو متد از نوع WebAPI هستند و در محیط هایی غیر از مرورگر مانند محیط سروری nodejs قابل استفاده نخواهند بود.
#webapi #javascript #nodejs
🌐 @pieceJS
👍11
💎 معرفی وب سرویس دیکشنری انگلیسی
اگر شما هم مثل من دنبال یک API دیکشنری انگلیسی هستید میتونید از API زیر به صورت رایگان استفاده کنید
https://api.dictionaryapi.dev/api/v2/entries/en/[your_word]
در لینک بالا، بجای [your_word] کلمه مورد نظرتون رو بنویسید تا به طور کامل ریشه اون کلمه رو تو دکشنری براتون در بیاره.
💭 نکته: متد درخواست GET است.
#جاوا_اسکریپت #معرفی_api #دیکشنری
🌐 @pieceJS
اگر شما هم مثل من دنبال یک API دیکشنری انگلیسی هستید میتونید از API زیر به صورت رایگان استفاده کنید
https://api.dictionaryapi.dev/api/v2/entries/en/[your_word]
در لینک بالا، بجای [your_word] کلمه مورد نظرتون رو بنویسید تا به طور کامل ریشه اون کلمه رو تو دکشنری براتون در بیاره.
💭 نکته: متد درخواست GET است.
#جاوا_اسکریپت #معرفی_api #دیکشنری
🌐 @pieceJS
👍8
💎 چرا پاسخ NaN==NaN برابر false است؟
💬 تعریف: NaN مقدار شی گلوبالی یا به عبارتی گلوبال اسکوپ است و نماینده عبارت Not a number می باشد.
🔶 این مقدار نه قابل تغییر هست نه قابل شمارش و همچنین قابل پیکربندی هم نیست.
🔶 این مقدار توسط جاوا اسکریپت ابتداع نشده بلکه توسط استاندارد IEEE 754 تعریف شده و رفتار های این عبارت رو خود این استاندارد تعریف کرده است.
✅ از جمله این رفتار ها میتوان به نابرابری این عبارت با هر عبارت دیگه اشاره کرد. در واقع هرگاه پای مقایسه ای در میان باشه که یک طرف آن عبارت NaN قرار داشته باشه، همیشه پاسخ false خواهد بود مگر در حالتی که آن مقایسه NaN!==NaN باشد که در این صورت پاسخ true خواهد بود
#سوال_کاربران
#javascript
🌐 @pieceJS
💬 تعریف: NaN مقدار شی گلوبالی یا به عبارتی گلوبال اسکوپ است و نماینده عبارت Not a number می باشد.
🔶 این مقدار نه قابل تغییر هست نه قابل شمارش و همچنین قابل پیکربندی هم نیست.
🔶 این مقدار توسط جاوا اسکریپت ابتداع نشده بلکه توسط استاندارد IEEE 754 تعریف شده و رفتار های این عبارت رو خود این استاندارد تعریف کرده است.
✅ از جمله این رفتار ها میتوان به نابرابری این عبارت با هر عبارت دیگه اشاره کرد. در واقع هرگاه پای مقایسه ای در میان باشه که یک طرف آن عبارت NaN قرار داشته باشه، همیشه پاسخ false خواهد بود مگر در حالتی که آن مقایسه NaN!==NaN باشد که در این صورت پاسخ true خواهد بود
#سوال_کاربران
#javascript
🌐 @pieceJS
👍13👎1
💎 کاربرد createTextNode در جاوا اسکریپت چیست؟
ابتدا به این بپردازیم که تو جاوا اسکریپت، نود به چه معناست؟
خیلی ساده بخوام بگم اینکه به تمامی عناصر درون یک صفحه HTML نود میگیم.
🔸 نود ها میتونند عنصر، خصوصیت یا حتی تکست باشند.
▫️نکته: نود هیچ ارتباطی با رانتایم Node.js نداره و صرفاً تو اسمشون شباهت هایی وجود داره
حالا میتونیم بپردازیم به کاربرد createTextNode در جاوا اسکریپت:
🔸با استفاده از این متد، قادر خواهید بود تکست نود ها را ایجاد و آن ها رو درون نود های عنصری append کنید.
به عنوان مثال میتونید تکست نود عبارت Hello World رو به وسیله این متد ایجاد کنید سپس درون المنت p یا span یا هر المنت دیگه ای append کنید. در این صورت یک المنت نودی به نام p دارید که دارای تکست نودی با عبارت Hello World است.
#سوال_کاربران
#javascript
🌐 @pieceJS
ابتدا به این بپردازیم که تو جاوا اسکریپت، نود به چه معناست؟
خیلی ساده بخوام بگم اینکه به تمامی عناصر درون یک صفحه HTML نود میگیم.
🔸 نود ها میتونند عنصر، خصوصیت یا حتی تکست باشند.
▫️نکته: نود هیچ ارتباطی با رانتایم Node.js نداره و صرفاً تو اسمشون شباهت هایی وجود داره
حالا میتونیم بپردازیم به کاربرد createTextNode در جاوا اسکریپت:
🔸با استفاده از این متد، قادر خواهید بود تکست نود ها را ایجاد و آن ها رو درون نود های عنصری append کنید.
به عنوان مثال میتونید تکست نود عبارت Hello World رو به وسیله این متد ایجاد کنید سپس درون المنت p یا span یا هر المنت دیگه ای append کنید. در این صورت یک المنت نودی به نام p دارید که دارای تکست نودی با عبارت Hello World است.
#سوال_کاربران
#javascript
🌐 @pieceJS
👍12
💎 معرفی داکیومنت جدید کتابخونه React.js
یک هفته ای میشه که ریکت از نسخه جدید داکیومنت خودش به آدرس زیر رونمایی کرده.
بسیار کامل و بینظیر شده، پیشنهاد میکنم حتماً یه نگاهی بهش بندازید.
👈🏻 مشاهده داکیومنت 👉🏻
#معرفی
#javascript #reactjs
🌐 @pieceJS
یک هفته ای میشه که ریکت از نسخه جدید داکیومنت خودش به آدرس زیر رونمایی کرده.
بسیار کامل و بینظیر شده، پیشنهاد میکنم حتماً یه نگاهی بهش بندازید.
👈🏻 مشاهده داکیومنت 👉🏻
#معرفی
#javascript #reactjs
🌐 @pieceJS
👍8
💎 معرفی پکیج Error Boundaries
به طور پیشفرض، اگر اپلیکیشن شما به خطایی برخورد، ریکت به صورت خودکار، صفحه UI اپلیکیشن رو حذف و خطا رو نمایش میده یا اگر در مرحله پروداکشن قرار داشته باشید، صفحه UI رو به صورت صفحه ای سفید نمایش خواهد داد. 😳 که این موضوع باعث سردرگرمی مشتریانی خواهد شد که از اپلیکیشن شما استفاده میکنند. 🤯
برای حل آن میتونید از Error boundary استفاده کنید، ارور باندری، عملکردی شبیه به Catch رو داره با این تفاوت که این بار برای کامپوننت ها کاربرد داره. یعنی اگر لود کامپوننت شما به خطا خورد، بجای سفید شدن صفحه یا نمایش دادن خطا در صفحه، پیام یا کامپوننت پیشفرضی که شما طراحی کرده اید رو نمایش میده.
💡 خود ریکت، تو مستنداتش این کامپوننت رو معرفی کرده اما فقط به صورت کلاسی قابل استفاده است. شما میتونید از پکیج react-error-boundary استفاده کنید این پکیج به صورت تابعی قابل دسترس بوده و از قابلیت های بیشتری برخوردار است.
استفاده از این پکیج خیلی آسون هست فقط کافیه نصبش کنید، ErrorBoundary ایمپورت کنید و کامپوننتی که میخواید رو درون ErrorBoundary بپیچید (wrap کنید). ☺️
🌐 @pieceJS
به طور پیشفرض، اگر اپلیکیشن شما به خطایی برخورد، ریکت به صورت خودکار، صفحه UI اپلیکیشن رو حذف و خطا رو نمایش میده یا اگر در مرحله پروداکشن قرار داشته باشید، صفحه UI رو به صورت صفحه ای سفید نمایش خواهد داد. 😳 که این موضوع باعث سردرگرمی مشتریانی خواهد شد که از اپلیکیشن شما استفاده میکنند. 🤯
برای حل آن میتونید از Error boundary استفاده کنید، ارور باندری، عملکردی شبیه به Catch رو داره با این تفاوت که این بار برای کامپوننت ها کاربرد داره. یعنی اگر لود کامپوننت شما به خطا خورد، بجای سفید شدن صفحه یا نمایش دادن خطا در صفحه، پیام یا کامپوننت پیشفرضی که شما طراحی کرده اید رو نمایش میده.
💡 خود ریکت، تو مستنداتش این کامپوننت رو معرفی کرده اما فقط به صورت کلاسی قابل استفاده است. شما میتونید از پکیج react-error-boundary استفاده کنید این پکیج به صورت تابعی قابل دسترس بوده و از قابلیت های بیشتری برخوردار است.
استفاده از این پکیج خیلی آسون هست فقط کافیه نصبش کنید، ErrorBoundary ایمپورت کنید و کامپوننتی که میخواید رو درون ErrorBoundary بپیچید (wrap کنید). ☺️
🌐 @pieceJS
👍16
💎 آشنایی با کپچای Honeypot
این روزا که صحبت از هوش مصنوعی و ChatGPT هست احتمالاً شنیدید که حتی reCAPTCHA های گوگل هم قابل هک شدن توسط هوش مصنوعی هستند. 🧐
تو این پست میخوام یه نوع کپچایی بهتون معرفی کنم که در نوع خودش جالبه و البته هیچ وقت به پای reCAPTCHA نمیرسه اما میتونه جلوی یه سری از حملات که به صورت خودکار روی سایت ها صورت میگیره رو بگیره. 🤓
🔶این نوع کپچا، Honeypot نام داره، به این صورته که شما تو فیلد های فرم مورد نظر (مثلاً فرم لاگین یا ثبت نام) یه Input جدا (به عنوان تله) اضافه و با css یا js مخفیش می کنید اونوقت شرط میزارید که اگه این فیلد پر شده بود درخواست از طرف ربات بوده و اگر پر نشده بود از طرف یوزر صورت گرفته.
✅ یا برای اینکه امنیتش رو بالاتر ببرید میتونید اون Input رو به صورت چک باکس اضافه کنید و لیبلش رو بزارید I'm not a robot و بازم مخفیش کنید اونوقت اگه ربات باشه و این تکست رو بخونه میدونه که باید حتماً تیک بخوره در صورتی که شما در نظر گرفتید که هر کس اینو تیک زد ربات هست و ناک اوتش می کنید. (به هر حال مخفیش کرده بودید)
#کپچا #کد_امنیتی #reCAPTCHA #Honeypot
🌐 @pieceJS
این روزا که صحبت از هوش مصنوعی و ChatGPT هست احتمالاً شنیدید که حتی reCAPTCHA های گوگل هم قابل هک شدن توسط هوش مصنوعی هستند. 🧐
تو این پست میخوام یه نوع کپچایی بهتون معرفی کنم که در نوع خودش جالبه و البته هیچ وقت به پای reCAPTCHA نمیرسه اما میتونه جلوی یه سری از حملات که به صورت خودکار روی سایت ها صورت میگیره رو بگیره. 🤓
🔶این نوع کپچا، Honeypot نام داره، به این صورته که شما تو فیلد های فرم مورد نظر (مثلاً فرم لاگین یا ثبت نام) یه Input جدا (به عنوان تله) اضافه و با css یا js مخفیش می کنید اونوقت شرط میزارید که اگه این فیلد پر شده بود درخواست از طرف ربات بوده و اگر پر نشده بود از طرف یوزر صورت گرفته.
✅ یا برای اینکه امنیتش رو بالاتر ببرید میتونید اون Input رو به صورت چک باکس اضافه کنید و لیبلش رو بزارید I'm not a robot و بازم مخفیش کنید اونوقت اگه ربات باشه و این تکست رو بخونه میدونه که باید حتماً تیک بخوره در صورتی که شما در نظر گرفتید که هر کس اینو تیک زد ربات هست و ناک اوتش می کنید. (به هر حال مخفیش کرده بودید)
#کپچا #کد_امنیتی #reCAPTCHA #Honeypot
🌐 @pieceJS
👍20