وقتی فکرت رو core اصلی پروژست اما غافل از اینکه چند ساعت از وقتت رو API مربوط به ثبت نام یوزر گرفته میشه!
فردا میخوام از یکی از عجایب جاوا اسکریپت رو نمایی کنم
اما قبلش نیازه مقداری روش مطالعه کنم🤩
#welcome_to_javascript_world
فردا میخوام از یکی از عجایب جاوا اسکریپت رو نمایی کنم
اما قبلش نیازه مقداری روش مطالعه کنم
#welcome_to_javascript_world
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
Media is too big
VIEW IN TELEGRAM
شاید باورتون نشه اما همین ویدئوی 10 دقیقه ای باگ یه روز کاملم بوده!
پ.ن: پیشاپیش بابت گرفتگی صدا معذرت میخوام نزدیک به 24 ساعتیه نخوابیدم خیلی برام مهم بود ویدئوئه حتماً ضبط کنم براتون بذارم
#javascript
#video
Buy me a coffee
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13
از هر دو هوک useRef و useState برای ذخیره کردن یک مقدار و استفاده از اون ها در موقعیت های لازم استفاده میشه.
و نکته مهم اینه که این هوک، با هر بار بروزرسانی، موجب re-render شدن UI نمیشه.
#hook
Buy me a coffee
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
سوالیه که زیاد پرسیده میشه! حقیقتاً دو پاسخ وجود داره برای این سوال.
اگر از جو رسانه بخواهید جواب بگیرید، میتونم بگم در صورتی که برنامه نویسید و به مک دسترسی ندارید حتماً از لینوکس استفاده کنید حتی اگر برای یه دستور ساده بخواید نیم ساعت فقط سرچ بزنید چون در غیر این صورت ممکنه به چشم یه جونیور، تازه کار، مفلوک یا هر چیزی که اسمش رو میزارید بهتون نگاه کنند
یه مقدار از پاسخ اول ساده تره، با هر کدوم که راحت ترید کار کنید وقت برای حاشیه ها نزارید رو کد زدنتون تمرکز کنید
#rest_time
Buy me a coffee
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9
سوال رایجی که تقریباً همه جا دارن در موردش صحبت میکنند اینه که آیا هوش مصنوعی میتونه جای برنامه نویس ها یا از این دست پوزیشن های شغلی رو بگیره؟
در یه کلام اینکه هوش مصنوعی تکنولوژی ای غیر قابل انکار هست و نباید نادیده اش گرفت.
و یه قاعده کلی وجود داره، آن هم این هست که هر کسی که تلاش نکنه رشد کنه محکوم به فناست حالا یا هوش مصنوعی جاشو میگیره یا یه برنامه نویس دیگه.
#rest_time
Buy me a coffee
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
همانطور که میدانید Next.js قابلیت طراحی سایت را به صورت SSR و CSR رو در اختیار شما قرار میده و فارغ از بحث های سئویی، از نظر توسعه، زمانی که وبسایت رو به صورت SSR طراحی می کنید دیگر اجازه استفاده از هوک ها رو در کد هاتون ندارید وگرنه یه ارور خوشگل و البته اعصاب خورد کن رو ملاقات میکنید 🤯
جهت دریافت و آپدیت store در سیستم SSR به صورت زیر هست:
دریافت دیتا
let store = store.getState()
بروزرسانی دیتا
store.dispatch(reducer)
همچنین جهت دریافت و آپدیت store در سیستم CSR به صورت زیر هست:
دریافت دیتا
let store = store.useSelector(state=> state.stateName)
بروزرسانی دیتا
let dispatch = useDispath()
dispatch(reducer)
#next #redux_toolkit #redux
Buy me a coffee
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
موافقید گهگداری در مورد اصطلاحات کامپیوتری/برنامه نویسی هم پست بزارم؟
Anonymous Poll
81%
بله آف کورس 😎
19%
خیر فقط حوزه جاوا اسکریپت و حومه 😁
به دسته نرم افزار هایی که به شما کمک میکند بتوانید چند ماشین مجازی ساز نصب کنید هایپروایزور میگویند
از محبوبترین این نرم افزار ها میشه به VMware و VirtualBox اشاره کرد
#دیکشنری
Buy me a coffee
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
حتماً پیش اومده رفتید تو یه سایتی و از فونتش خوشتون اومده باشه با استفاده از وبسایت Font of Web می تونید فونت های هر وبسایتی رو شناسایی و دانلود کنید.
#معرفی_وبسایت
Buy me a coffee
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
برای آدمهایی که از سوال هایی که با یک گوگل می شه در موردش به جواب رسید، خسته هستن میتونید از این وبسایت استفاده کنید.
در این وبسایت میتونید سوال این جور افراد رو تو فیلد سرچش وارد کنید سپس بهتون یه لینک میده اون لینک رو بدید این دسته آدما، خودشون متوجه میشن که بعضی سوالا رو باید زحمت بکشن و سرچش کنند 😅
#معرفی_وبسایت
Buy me a coffee
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
📁 معرفی وبسایت Web Code Tools
با استفاده از وبسایت Web Code Tools می توانید با چند کلیک کد های HTML و CSS همچنین کانفیگ Meta data سایت، Robot.txt و... تولید کنید.
⬅️ برای مشاهده کلیک کنید
#معرفی_وبسایت
🟨 @pieceJS
Buy me a coffee 😀
با استفاده از وبسایت Web Code Tools می توانید با چند کلیک کد های HTML و CSS همچنین کانفیگ Meta data سایت، Robot.txt و... تولید کنید.
⬅️ برای مشاهده کلیک کنید
#معرفی_وبسایت
🟨 @pieceJS
Buy me a coffee 😀
👍3👎1
به صورت پیشفرض در جاوا اسکریپت نمیتونید در زمان مقدار دهی اولیه ی یک آبجکت، از پراپرتی های خودش، درون خودش استفاده کنید.
به عنوان مثال، اگر چنین کدی بنویسید قطعا خطا دریافت خواهید کرد
let obj = {
x :5,
y: 6,
sum : this.x + this.y
}برای حل این مسئله دو تا راه حل وجود داره
ابتدا آبجکت را مقدار دهی کرده سپس در ادامه پراپرتی sum رو به آبجکت اضافه کنید مثلا:
let obj = {
x :5,
y: 6,
}
obj["sum"] : obj.x + obj.yدر این راه حل با استفاده از انانیموس فانکشن ها، یک آبجکت ایجاد می کنید به طوری که میتونید پراپرتی های آن آبجکت را در زمان مقدار دهی اولیه، درون همان آبجکت صدا بزنید
let obj = new function(){
this.x = 5;
this.y = 6;
this.sum = this.x + this.y
}Buy me a coffee
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
در برنامه نویسی، داده ها از دو دسته خارج نیستند یا Mutable هستند یا اینکه Immutable.
داده هایی که پس از تعریف کردن آن ها، قابل تغییر هستند اصطلاحاً بهشون Mutable میگیم و اونایی که غیر قابل تغییر هستند Immutable میگیم.
نکته: برای فیلد های input معمولاً دیتا های mutable مناسب تر هستند چون داده های ما با ورودی کاربر مدام در حال بروزرسانی هستند.
نکته 2: دیتا های immutable دیتا های مناسب تری برای تبدیل نوع داده هستند. از آنجایی که مقادیر قبلی آن ها همچنان در حافظه موجود هست، با نوع داده، ساید افکت کمتری متوجه پروژه شما میشود.
#انواع_داده #سوال_استخدامی
Buy me a coffee
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
💎 محاسبه تعداد اعداد منفی درون یک آرایه
برای محاسبه تعداد اعداد منفی درون یک آرایه میتونید از تیکه کد بالا استفاده کنید.
💡 نکته مهمی که داخل این پست میخوام بهتون بگم اینکه، قطعاً میدونید این کد رو میتونید با یه for ساده هم پیاده سازی کنید اما پرفورمنس آن به نسبت پیاده سازیش با حلقه for بالاتر هست دلیلش هم اینه که توابعی نظیر filter یا map صرفاً جهت کار بر روی آرایه ها ساخته شده اند و همیشه سعی شده در توابعی اخصاصی از الگوریتم های بهینه تری جهت بهبود پرفرمنس آن استفاده شود.
💬 پ.ن: البته تو نمونه بالا اینقدر اختلاف بین پرفرومنس ها در حالت های مختلف ناچیز هست که میشه ازش صرف نظر کنید و فقط به خوانایی تمرکز کنید
🌐 @pieceJS
❣️ Buy me a coffee
برای محاسبه تعداد اعداد منفی درون یک آرایه میتونید از تیکه کد بالا استفاده کنید.
💡 نکته مهمی که داخل این پست میخوام بهتون بگم اینکه، قطعاً میدونید این کد رو میتونید با یه for ساده هم پیاده سازی کنید اما پرفورمنس آن به نسبت پیاده سازیش با حلقه for بالاتر هست دلیلش هم اینه که توابعی نظیر filter یا map صرفاً جهت کار بر روی آرایه ها ساخته شده اند و همیشه سعی شده در توابعی اخصاصی از الگوریتم های بهینه تری جهت بهبود پرفرمنس آن استفاده شود.
💬 پ.ن: البته تو نمونه بالا اینقدر اختلاف بین پرفرومنس ها در حالت های مختلف ناچیز هست که میشه ازش صرف نظر کنید و فقط به خوانایی تمرکز کنید
🌐 @pieceJS
❣️ Buy me a coffee
👍4
💎 نکته ای در مورد بروزرسانی داکیومنت توسط mongoose
دو متد findByIdAndUpdate و findOneAndUpdate به صورت پیشفرض، داکیومنت فعلی رو برمیگردونند سپس، مقدار اون رو آپدیت میکنند اگر میخواهید مقدار داکیومنت مورد نظر پس از آپدیت شدن برگردانید تنظیمات زیر رو اعمال کنید
🌐 @pieceJS
❣️ Buy me a coffee
دو متد findByIdAndUpdate و findOneAndUpdate به صورت پیشفرض، داکیومنت فعلی رو برمیگردونند سپس، مقدار اون رو آپدیت میکنند اگر میخواهید مقدار داکیومنت مورد نظر پس از آپدیت شدن برگردانید تنظیمات زیر رو اعمال کنید
Model.findByIdAndUpdate(id, updateObj, {new: true}, function(err, model) {...🌐 @pieceJS
❣️ Buy me a coffee
👍5
💎 نکته ای در خصوص استفاده از ایونت های onChange یا onClick در select تگ ها
🔷 در صورتی که دارید از تگ select در پروژه خود استفاده می کنید، در نظر داشته باشید که نمیتوانید از ایونت های onChange یا onClick در تگ های فرزند آن یعنی تگ های option استفاده کنید و فقط میتوانید از این ایونت ها در خود تگ select استفاده کنید دلیل آن هم این است که اکثر ورژن های بروزر های کروم، سافاری و IE از آن ها در این تگ یعنی option پشتیبانی نمی کنند. (فایرفاکس پشتیبانی میکنه)
🌐 @pieceJS
🔷 در صورتی که دارید از تگ select در پروژه خود استفاده می کنید، در نظر داشته باشید که نمیتوانید از ایونت های onChange یا onClick در تگ های فرزند آن یعنی تگ های option استفاده کنید و فقط میتوانید از این ایونت ها در خود تگ select استفاده کنید دلیل آن هم این است که اکثر ورژن های بروزر های کروم، سافاری و IE از آن ها در این تگ یعنی option پشتیبانی نمی کنند. (فایرفاکس پشتیبانی میکنه)
🌐 @pieceJS
👍3
🖋 اصطلاح Complex Transactions یعنی چه؟
این اصطلاح بیشتر در مبحث دیتابیس ها مورد استفاده قرار میگیره
اصطلاح Complex Transactions یا تراکنش های پیجیده به عملیات هایی گفته میشه که به صورت پیوسته و اتمیک (atomic) انجام میشه به عبارتی یا هیچ کدام انجام نشه یا همه با هم انجام بشه.
این قابلیت بیشتر در دیتابیس های SQL بیس ها وجود داره. در دیتابیس های noSQL باید این گونه عملیات ها مدیریت بشه.
#دیکشنری #دیتابیس
🌐 @pieceJS
این اصطلاح بیشتر در مبحث دیتابیس ها مورد استفاده قرار میگیره
اصطلاح Complex Transactions یا تراکنش های پیجیده به عملیات هایی گفته میشه که به صورت پیوسته و اتمیک (atomic) انجام میشه به عبارتی یا هیچ کدام انجام نشه یا همه با هم انجام بشه.
این قابلیت بیشتر در دیتابیس های SQL بیس ها وجود داره. در دیتابیس های noSQL باید این گونه عملیات ها مدیریت بشه.
#دیکشنری #دیتابیس
🌐 @pieceJS
👍5
💎 استفاده از تگ a به عنوان فرزند کامپوننت Link و چرا اصلا باید این کارو کنیم؟!
💬 اگر دارید از نکست جی اس استفاده می کنید حتماً متوجه شدید که نمیتونید از تگ a به عنوان فرزند در کامپوننت Link استفاده کنید!
حتماً برای یکی دو تا سوال شده که اصلاً چرا باید از a به عنوان فرزند در کامپوننت Link که خودش به نوعی داره از تگ a استفاده می کنه، استفاده کرد؟! 🤨
✅ دلیلش صرفاً جهت بکارگیری از رویداد هایی مثل onClick، onChange و ... هست این رویداد ها رو نمیتونید به عنوان prop به خود کامپوننت Link بدید و باید به تگ a به عنوان فرزند بدید و در صورتی میتونید این تگ رو به عنوان فرزند به Link بدید که پراپ legacyBehavior رو به تگ Link بدید
پ.ن: البته من شنیدم تو نسخه های جدید نکست، دیگه نیازی نیست که از legacyBehavior هم استفاده کنید کسی تست زده؟
🌐 @pieceJS
💬 اگر دارید از نکست جی اس استفاده می کنید حتماً متوجه شدید که نمیتونید از تگ a به عنوان فرزند در کامپوننت Link استفاده کنید!
حتماً برای یکی دو تا سوال شده که اصلاً چرا باید از a به عنوان فرزند در کامپوننت Link که خودش به نوعی داره از تگ a استفاده می کنه، استفاده کرد؟! 🤨
✅ دلیلش صرفاً جهت بکارگیری از رویداد هایی مثل onClick، onChange و ... هست این رویداد ها رو نمیتونید به عنوان prop به خود کامپوننت Link بدید و باید به تگ a به عنوان فرزند بدید و در صورتی میتونید این تگ رو به عنوان فرزند به Link بدید که پراپ legacyBehavior رو به تگ Link بدید
پ.ن: البته من شنیدم تو نسخه های جدید نکست، دیگه نیازی نیست که از legacyBehavior هم استفاده کنید کسی تست زده؟
🌐 @pieceJS
👍7
💎 انتقال ویژگی href از Link به کامپوننت فرزند
فرض کنید یه کامپوننت سفارشی برای تگ لینک دکمه هاتون ایجاد کرده اید و میخواهید اونو به عنوان فرزند به کامپوننت های Link بدید.
در این شرایط برای اینکه بتونید از ویژگی href کامپوننت Link بهره مند بشید باید درون این تگ از پراپ passHref استفاده کنید این پراپ ویژگی href رو به کامپوننت فرزند یعنی MyBottonLink انتقال میدهد.
🌐 @pieceJS
فرض کنید یه کامپوننت سفارشی برای تگ لینک دکمه هاتون ایجاد کرده اید و میخواهید اونو به عنوان فرزند به کامپوننت های Link بدید.
در این شرایط برای اینکه بتونید از ویژگی href کامپوننت Link بهره مند بشید باید درون این تگ از پراپ passHref استفاده کنید این پراپ ویژگی href رو به کامپوننت فرزند یعنی MyBottonLink انتقال میدهد.
🌐 @pieceJS
👍6
💎 در مورد Custom Event در جاوا اسکریپت
🔶 برای ایجاد ایونت های سفارشی از کلاس CustomEvent یا کلاس Event استفاده میشه و معمولاً از ایونت سفارشی، برای ایجاد ارتباط بین بخش های مختلف پروژه استفاده می کنیم
تفاوتی که این دو کلاس با هم دارند اینه که وقتی از Event استفاده میکنید میتونید ایونت های ساده ای مثل onClick و... ایجاد کنید ولی وقتی از CustomEvent استفاده می کنید، میتونید یه سری جزئیات دیگه هم به ایونتتون اضافه کنید (که تو این محتوا بنا ندارم زیاد در این خصوص بنویسم)
💬 اما ممکنه براتون سوال بشه آیا از ایونت های سفارشی تو پروژه های ریکتی هم استفاده میکنیم یا اصلاً نیازه استفاده بشه؟! جواب اینه که شما تو اکثر پروژه های ریکتی از Custom Event استفاده می کنید با این تفاوت که دیگه مستقیم نمیاید از کلاس های CustomEvent یا Event استفاده کنید بلکه از ابزار هایی مثل Redux و ContextAPI استفاده می کنید.
نتیجه : به طور کلی از Custom Event برای ایجاد ارتباط بین بخش های مختلف پروژه استفاده میشه که این مورد تو Vanilla JS برای پروژه های کوچک راحت قابل پیاده سازی و نگهداریه ولی تو پروژه های بزرگ، مقداری پیچیده و نگهداریش سخت میشه. در صورتی که تو ریکت خیلی ساده، آسان و سریع تره
🌐 @pieceJS
🔶 برای ایجاد ایونت های سفارشی از کلاس CustomEvent یا کلاس Event استفاده میشه و معمولاً از ایونت سفارشی، برای ایجاد ارتباط بین بخش های مختلف پروژه استفاده می کنیم
تفاوتی که این دو کلاس با هم دارند اینه که وقتی از Event استفاده میکنید میتونید ایونت های ساده ای مثل onClick و... ایجاد کنید ولی وقتی از CustomEvent استفاده می کنید، میتونید یه سری جزئیات دیگه هم به ایونتتون اضافه کنید (که تو این محتوا بنا ندارم زیاد در این خصوص بنویسم)
💬 اما ممکنه براتون سوال بشه آیا از ایونت های سفارشی تو پروژه های ریکتی هم استفاده میکنیم یا اصلاً نیازه استفاده بشه؟! جواب اینه که شما تو اکثر پروژه های ریکتی از Custom Event استفاده می کنید با این تفاوت که دیگه مستقیم نمیاید از کلاس های CustomEvent یا Event استفاده کنید بلکه از ابزار هایی مثل Redux و ContextAPI استفاده می کنید.
نتیجه : به طور کلی از Custom Event برای ایجاد ارتباط بین بخش های مختلف پروژه استفاده میشه که این مورد تو Vanilla JS برای پروژه های کوچک راحت قابل پیاده سازی و نگهداریه ولی تو پروژه های بزرگ، مقداری پیچیده و نگهداریش سخت میشه. در صورتی که تو ریکت خیلی ساده، آسان و سریع تره
🌐 @pieceJS
👍4