بنچمارک حلقه‌ها با استفاده از ()console.time و ()console.timeEnd

🔸بسیار مفید است که دقیقاً بدانیم چه مدت طول کشیده است تا یک عملیات اجرا شود، به خصوص زمانی که از اشکال‌زدایی حلقه‌های کند استفاده می‌شود. حتی می‌توانید با اختصاص label به متد، چندین تایمر را راه‌اندازی کنید. بیایید ببینیم چگونه کار می‌کند:

🔸با اجرای کد بالا میتوانید بنچمارک حلقه خود را بصورت میلی ثانیه در کنسول مشاهده کنید.

#Tips_N_Tricks

Channel:@js_challenges Group:@js_masters_gp

تفاوت بین Target و currentTarget در زمینهٔ رویداد (event context) چیست؟

🔸المنت target به عنوان المنت DOM اشاره دارد که رویداد را ایجاد می‌کند. به عبارت دیگر، currentTarget به عنوان المان DOM اشاره دارد که گوش کننده رویداد را گوش می‌دهد.

// html
<ul class="todo-list">
  <li class="item">سگ خودتان را پیاده بردارید</li>
</ul>

/////////////////////////////////////////////////////////////////////////////////////
// js
const list = document.querySelector(".todo-list");

list.addEventListener("click", e => {
  console.log(e.target);
  // خروجی: <li class="item">سگ خودتان را پیاده بردارید</li>
  console.log(e.currentTarget);
  // خروجی: <ul class="todo-list"></ul>
});

#Tips_N_Tricks

Channel:@js_challenges Group:@js_masters_gp

تابع currying چیست؟

🔸تابع currying یک تابع است که چندین آرگومان را می‌گیرد و آن‌ها را به یک دنباله از توابع با تنها یک آرگومان در هر زمان تبدیل می‌کند.

🔸به این ترتیب، یک تابع n-آرگومانی، به یک تابع تک آرگومانی تبدیل می‌شود و آخرین تابع، نتیجه‌ی تمامی آرگومان‌ها را در یک تابع برمی‌گرداند.

//تعریف تابع معمولی
function multiply(a, b, c) {
    return a  b  c;
};
console.log(multiply(1, 2, 3));
// خروجی: 6

// تعریف تابع currying
function multiply(a) {
    return (b) => {
        return (c) => {
            return a  b  c;
        };
    };
};
console.log(multiply(1)(2)(3));
// خروجی: 6

Channel:@js_challenges Group:@js_masters_gp

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

پارت ۳

3: جاوااسکریپت یک زبان ناامن است

🔸امنیت یک نگرانی مشروع در توسعه وب است، اما ادعا کردن این است که جاوااسکریپت به طور اصولی ناامن است، یک اشتباه است. خود جاوااسکریپت به خودی خود ناامن نیست؛ بلکه مسائل امنیتی از نحوه کاربرد و پیاده‌سازی آن در برنامه‌های وب به وجود می‌آید.

🔸چالش‌های امنیتی متداول در جاوااسکریپت شامل آسیب‌پذیری‌های اسکریپت‌نویسی از راه دور (XSS) و دزدی درخواست از محل دیگر (CSRF) است. با این حال، این مسائل از طریق روش‌های بهتر مانند اعتبارسنجی ورودی، رمزنگاری خروجی و مکانیسم‌های اعتبارسنجی و اجازه‌دهی مناسب می‌توانند کاهش یابند. چارچوب‌ها و کتابخانه‌های مدرن جاوااسکریپت همچنین ویژگی‌های امنیتی را در برگیرید تا به توسعه‌دهندگان کمک کند که برنامه‌هایی امن‌تر بسازند.

Channel:@js_challenges Group:@js_masters_gp

#quick_challenge
خروجی این کنسولا چیه عاقا؟

console.log(null == "null");
console.log(undefined == "undefiend");
console.log(NaN == Number("NaN"));
console.log(Error == new Error("Error"));

یه گپ تو گروهمون نشه دوستان؟منتظریم❤️😎

Channel:@js_challenges Group:@js_masters_gp

آقا طی این یکی دو هفته خیلی از بچه ها اومدن عشق دادن به ما ❤️

بعضیا اومدن پیوی بعضیا تو گروه بعضیا رو من دیدم حتی دوبله ها داخل چنل خودشون منتشر کرده بودن بعضیا یوتیوب رو معرفی کرده بودن

یه سریا برای دوبله ها یه سریا برای یوتیوب مثل این دوستمون که عکسش رو گذاشتم یه سریا برای چالشا 🔥

یعنی واقعا دمتون گرم از این همه انرژی 🔥❤️

ضمنا اینم بگم که من این هفته امتحاناتم تموم میشه دوباره روند دوبله ها شروع میشه، منتظر باشید...

همتون مشتی هستید و با صفا ✌️

راستی آدرس یوتیوبمون رو هم می‌زارم براتون اگر دوست داشتید یه نگاه به ویدیوها بندازید و اگر خوشتون اومد ساب کنید ❤️

https://www.youtube.com/@codelabplus

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

قراره کامیونیتی خفنی بسازیم اونجا که همه به زودی بشناسنش ...

Channel: @js_challenges | Group: @js_masters_gp

وراثت توابع به چه معناست؟

🔸وراثت تابعی یعنی فرآیند وراثت ویژگی‌ها از طریق اعمال یک تابع افزایشی بر یک نمونهٔ شیء است. در این روش تابع یک دامنه بسته (closure scope) ارائه می‌دهد که می‌توانید از آن برای نگهداری بخشی از داده‌ها به صورت خصوصی استفاده نمایید. تابع افزایشی از گسترش شیء دینامیک بر اساس شیء نمونه با ویژگی‌ها و متدهای جدید استفاده می‌کند.

🔸میکسین‌های تابعی نمایشگرهایی هستند که توابع کارخانه‌ای هستند که ویژگی‌ها و رفتارها را به اشیاء اضافه می‌کنند، همانند ایستگاه‌ها در یک assembly line

// تابع سازندهٔ شیء پایه
function Animal(data) {
  var that = {}; // یک شیء خالی ایجاد می‌کند
  that.name = data.name; // ویژگی "name" را به آن اضافه می‌کند
  return that; // شیء را برمی‌گرداند
};

// ایجاد شیء فرزند، ارث بری از Animal پایه
function Cat(data) {
  // شیء Animal را ایجاد می‌کند
  var that = Animal(data);
  // گسترش شیء پایه
  that.sayHello = function() {
    return 'Hello, I\'m ' + that.name;
  };
  return that;
};

// استفاده
var myCat = Cat({ name: 'Rufi' });
console.log(myCat.sayHello());
// خروجی: "Hello, I'm Rufi"

Channel:@js_challenges Group:@js_masters_gp

💎 در مورد هوک 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