💎 در مورد هوک useLayoutEffect در ریکت

هوک useLayoutEffect از جمله هوک های مهم ریکته (البته احتمالاً خیلی کم بهش احتیاج پیدا خواهید کرد) که عملکردی دقیقاً شبیه useEffect رو داره با این تفاوت که به صورت synchronize اجرا می شه. به عبارتی قبل از اینکه تغییرات دام، در صفحه چاپ بشود این هوک اجرا سپس تغییرات نمایش داده می شود.

نکته: در هوک useEffect ابتدا دام رندر و در صفحه چاپ می شد سپس این هوک اجرا می شد اما در اینجا دام رندر میشه هوک useLayoutEffect صدا زده میشه و پس از آن دام در صفحه چاپ میشه.

@js_challenges
@js_masters_gp

6 سوءتفاهم‌ در مورد جاوا اسکریپت!
پارت ۴

۴: جاوا اسکریپت کند است

🔸در گذشته محدودیت‌های عملکردی جاوا اسکریپت، مخصوصا زمانی که با وظایف محاسباتی متمرکز ( computationally intensive tasks ) سر و کار داشت، نگران کننده به نظر میرسید. اما با گذشت زمان، پیشرفت‌های قابل توجهی در موتورهای جاوا اسکریپت و مرورگرها، سرعت و کارایی این زبان را افزایش داده است.

🔸موتورهای مدرن جاوا اسکریپت، مثل V8 در گوگل کروم و SpiderMonkey در Mozilla Firefox، از کامپایل JIT (Just-In-Time) استفاده می‌کنند تا اجرای کد را بهینه‌سازی کنند. WebAssembly، یک فرمت دستورالعمل باینری، عملکرد جاوا اسکریپت را با اجازه اجرای کد سطح پایین مستقیماً در مرورگر بهبود می‌بخشد.

Channel:@js_challenges Group:@js_masters_gp

#تجربه_شخصی

این ویس در مورد این هست که آیا استفاده از منابع خارجی پولی (مثل دوره های خارجی) کار درستیه؟ اگه آره چرا و اگه نه چرا؟

یه چیزی رو توی کانال اخبار تکنولوژیمون راه انداختیم تحت عنوان همین تجربه های شخصی که من توش میام از تجربیات خودم و یه سری از نظرهای شخصی خودم که ازم در رابطه با مسائل مختلف پرسیده میشه رو میگم

اونایی که ارزش شنیدن داشته باشه رو (که البته تقریبا همشون ارزش شنیدن دارن) اینجا هم می‌خوام از این به بعد بفرستم ❤️

امیدوارم که مفید باشه براتون ✌️

آیدی چنل اخبارمون:

https://news.1rj.ru/str/Tech_Nuggets

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

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

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

npm i concurrently -g

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


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

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

#Tips_N_Tricks

@js_challenges
@js_masters_gp

3K?
Fast isn't it?! 🔥

#quick_challenge
بنام پدر و پسر بریم ببینیم کنسول چی چاپ میکنه؟

console.log(`${console.log("oh jesus") + " save me"}`);

در گروه به اعترافات شما گوش فراخواهیم داد فرزندم❤️🗿

Channel:@js_challenges Group:@js_masters_gp

تابع لامبدا

🔸تابع لامبدا توی جاوا اسکریپت یه پارامتر یا بیشتر از یک پارامتر میگیره، اما تفاوت اصلیش با توابع دیگه اینه که تنها تو بدنه‌اش ما یه عبارت (expression) داریم.

🔸این تابع با توجه ویژگی های منحصر به فرد خودش، میتونه به عنوان آرگومان به توابع دیگه پاس داده بشه.( به عنوان مثال یه helper function )

پ.ن.پ: تو تصویر بالا یه مثال از تابع لامبدا با دوتا پارامتر رو میبینیم که 3 رو به ما برمیگردونه.

Channel:@js_challenges Group:@js_masters_gp

6 سوءتفاهم‌ در مورد جاوا اسکریپت!
پارت ۵

5 - برای دستکاری DOM حتما به jQuery نیاز داریم!

🔸تو روزهای ابتدایی توسعه وب،جی کوئری یه لایبرری js پرطرفدار بود که برای ساده کردن کار با DOM و سازگاری با مرورگر های مختلف استفاده میشد.
🔸هموطور که گفتیم این حرفا برای گذشته بود که استفاده از جی کوئری برای کار با DOM ضروری به نظر میرسید، اما جاوا اسکریپت مدرن قدم های بزرگی رو برای دستکاری DOM اونم بدون نیاز به هیچ نوع لایبرری خارجی ای برداشته.

🔸با معرفی Document Object Model و همینطور روش هایی مثله:addEventListener, querySelectorAll کار با DOM حتی راحتتر شد.علاوه بر اینها خود توسعه وب مدرن، راه های کارآمد تری برای تعامل با DOM اونم بدون هرگونه وابستگی به jQuery رو برامون فراهم میکنه.

Channel:@js_challenges Group:@js_masters_gp

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

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

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

انتشار یادتون نره ❤️

Channel:@js_challenges Group:@js_masters_gp

تابع ()document.write چیست؟

🔸این تابع تو جاوا اسکریپت برای نوشتن محتوا به HTML استفاده میشه. بدین معنی که وقتی این تابع فراخوانی میشه، محتوای مشخصی به صفحه HTML اضافه میشه. به عبارت دیگه میتونیم از این تابع برای نمایش محتوا توی سند HTML بدون نیاز به دستکاری DOM استفاده کنیم.
مثال:

document.write("Hello,World!")

این کد باعث میشه که !Hello,World به صفحه HTML اضافه بشه.
🔸نکته: استفاده از این تابع میتونه باعث یسری مشکلات مثله پاک شدن محتوای قبلی بشه.تو استفاده ازش دقت کنین.

Channel:@js_challenges Group:@js_masters_gp

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

ممنونم از عزیزانی که تو این مدت مخصوصا از بابت دوبله ها به من انرژی دادید و منتظر موندید تا من ادامه دوره رو براتون دوبله کنم ❤️

مطمئن باشید از این انتظار پشیمون نخواهید شد...

کلوژر داخل لوپ!

آقا اگه با یه همچین کدی طرف باشیم:

var funcs = [];
for (var i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("i value is " + i);
  };
}

for (var k = 0; k < 3; k++) {
  funcs[k]();
}

به احتمال بالا یه همچین خروجی ای انتظار دارین:

i value is 0
i value is 1
i value is 2


اما خروجی این میشه🗿:

i value is 3
i value is 3
i value is 3


این اختلاف به دلیل نحوه عملکرد مکانیسم کلوژر و نحوه نمایش داخلی متغیر i هست.

برای حل این موقعیت، می‌تونید از روش‌های زیر استفاده کنید:

1. ارسال مقدار i به کلوژر با استفاده از IIFE (تابع فوراً فراخوانی شده):

for (var i = 0; i < 3; i++) {
  funcs[i] = (function(value) {
    console.log("i value is " + value);
  })(i);
}

2. استفاده از let به جای var در حلقه for:

for (let i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("i value is " + i);
  }
}

Channel:@js_challenges Group:@js_masters_gp

💎 معرفی یک Benchmarking برای جاوا اسکریپت

فرض کنید دو تیکه کد دارید و میخواید بدونید کدام یک از دیگری سرعت اجرا شدن بیشتری داره.
به عنوان مثال، میخواید بررسی کنید کدام یک از حلقه های for و while یا map تو شرایط یکسان از سرعت و پرفرمنس بالاتری برخوردار است.

با استفاده از وبسایت jsben.ch می تونید بنچ مارک کد های جاوا اسکریپتی تون رو با هم مقایسه کنید.

انتشار یادتون نره 🤝❤️

Channel:@js_challenges Group:@js_masters_gp

#quick_challenge
خروجی کد پایین چیه؟

let x = 0

for (let i = 0; i <= 8; i += 3) {
    if (i === 4) {
        continue
    }
    x += i

}
console.log(x)

گیری،مشکلی،انتقادی،کمکی،هرچی بود تو گروه منتظرتونیم😎

Channel:@js_challenges Group:@js_masters_gp

سلام شب همگی بخیر

ما تو تیممون به یه عزیزی نیاز داریم که به کار با فتوشاپ مسلط باشه

حقیقتش ما خیلی تلاش کردیم که تامبنیل های ویدیوهای یوتیوب رو خودمون بزنیم ولی واقعا کار ما نیست یعنی توانایی این کار رو نداریم واقعا

اگر عزیزی هست که دوست داره تو تیم ما برای طراحی تامبنیل ها فعالیت بکنه، ممنون میشم یه پیام به من بده ❤️

@MehrshadHeisenberg3

#Package_Managers

بچه ها این سوال همیشه پرسیده میشه که کدوم پکیج منیجر خوبه کدوم بده یا اصلا پکیج منیجر چی هست و به چه دردی میخوره؟!!!

من توی پست پایینی یه cheat sheet درست کردم برای اینکه این به جواب سوالا برسید و درکش کنید و برای انتخاب دو دل نشید 👌👌👌
✅بفرستید برای دوستاتون تا اونا هم به جواب سوالاشون برسن✅


Channel:@js_challenges Group:@js_masters_gp
👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇

❌اینم از cheat sheet برای اینکه بدونیم Package Manager چیه و کدومش بهتره برای استفاده❌