🔧 اهمیت ریفکتور کردن کد (Refactoring) + منابع پیشنهادی

برنامه‌نویسی فقط نوشتن کد نیست، نگه‌داری و بهبود اون هم به همون اندازه مهمه.
ریفکتور کردن یعنی بازنویسی کد بدون تغییر در عملکردش، با هدف خواناتر، ساده‌تر و قابل نگهداری‌تر شدنش.

✅ چرا ریفکتور مهمه؟

کاهش پیچیدگی کد

جلوگیری از ایجاد باگ در آینده

آمادگی برای افزودن قابلیت‌های جدید

همکاری بهتر در تیم

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

💡 نشونه‌هایی که بهت میگن وقت ریفکتوره:

کدی که حتی خودت هم نمی‌فهمیش 😅

توابع خیلی طولانی

تکرار زیاد تو کد

وابستگی‌های زیاد بین بخش‌ها

📚 منابع پیشنهادی برای یادگیری ریفکتور:

🔹 کتاب "Refactoring" نوشته‌ی Martin Fowler
یه مرجع کلاسیک و کاربردی برای درک اصول و تکنیک‌های ریفکتور.

🔹 وب‌سایت Refactoring.guru
ساده، مصور، و به شدت آموزنده!
🌐 https://refactoring.guru

تکنیک "trace" در برنامه‌نویسی به معنای ردیابی و ثبت مراحل اجرای یک برنامه یا بخشی از آن است. این تکنیک معمولاً برای بررسی رفتار کد و شناسایی مشکلات یا اشکالات استفاده می‌شود. در مورد حلقه‌ها، تکنیک trace می‌تواند شامل ثبت مقادیر متغیرها، وضعیت‌ها و هر گونه اطلاعات دیگری باشد که به درک بهتر از نحوه عملکرد حلقه کمک می‌کند.

▎روش‌های اجرای تکنیک Trace در حلقه‌ها

1. استفاده از console.log:
با استفاده از console.log می‌توانید مقادیر متغیرها را در هر تکرار حلقه چاپ کنید تا ببینید چه اتفاقی در حال رخ دادن است.

   for (let i = 0; i < 5; i++) {
       console.log(Iteration: ${i});
   }
   

2. استفاده از debugger:
با قرار دادن دستور debugger درون حلقه، می‌توانید اجرای کد را متوقف کرده و وضعیت متغیرها را بررسی کنید.

   for (let i = 0; i < 5; i++) {
       debugger; // اجرای کد در اینجا متوقف می‌شود
       console.log(Iteration: ${i});
   }
   

3. استفاده از ابزارهای توسعه‌دهنده:
مرورگرهای مدرن ابزارهای توسعه‌دهنده‌ای دارند که به شما اجازه می‌دهند نقاط شکست (breakpoints) قرار دهید و وضعیت متغیرها را در زمان واقعی بررسی کنید.

4. نوشتن تابع کمکی:
می‌توانید تابعی بنویسید که اطلاعات مربوط به هر تکرار را ثبت کند.

   function traceIteration(i) {
       console.log(Current iteration: ${i});
   }

   for (let i = 0; i < 5; i++) {
       traceIteration(i);
   }
   

5. استفاده از آرایه‌ها و متدهای آرایه:
اگر با آرایه‌ها کار می‌کنید، می‌توانید از متدهایی مثل forEach استفاده کنید که به شما اجازه می‌دهد بر روی هر عنصر آرایه یک تابع اعمال کنید.

   const arr = [1, 2, 3, 4, 5];

   arr.forEach((item, index) => {
       console.log(Index: ${index}, Item: ${item});
   });
   

▎نتیجه‌گیری

تکنیک trace به شما کمک می‌کند تا به طور دقیق‌تر بفهمید که چه اتفاقی در هر مرحله از اجرای حلقه می‌افتد. این تکنیک به ویژه زمانی که با کدهای پیچیده یا اشکالات مواجه هستید، بسیار مفید است. با استفاده از روش‌های مختلف ردیابی، می‌توانید به راحتی رفتار کد خود را تحلیل کنید و مشکلات را شناسایی نمایید.

🚀 تگ <symbol> در SVG

با <symbol> می‌تونی یه بار یه شکل SVG رو تعریف کنی و هر چند بار که خواستی تو صفحه استفاده‌ش کنی، بدون تکرار کد! 😍

🛠 کاربردش چیه؟
برای ساخت آیکون‌هایی که قراره بارها استفاده بشن، عالیه. شکل رو با <symbol> تعریف می‌کنی و با <use> هر جا لازم بود، صداش می‌زنی.

✅ باعث می‌شه کدت تمیزتر بشه، سریع‌تر رندر بشه و مصرف حافظه کم‌تر باشه.
✅ خیلی جاها مثل کتابخونه‌های آیکون SVG (مثلاً Heroicons) ازش استفاده می‌شه.
✅ کاملاً با CSS و جاوااسکریپت هم قابل کنترل و استایل‌دادنه.

🔗 منبع: MDN – SVG <symbol> Element

سلام دوستان 🌟

امیدوارم حال همگی خوب باشه ❤️

به خاطر یک سفر تفریحی که داشتم، نتونستم در چند روز گذشته محتوا جدیدی منتشر کنم. اما حالا با انرژی بیشتر و ایده‌های جدید برگشتم و آماده‌ام تا با شما به اشتراک بذارم

از صبر و شکیبایی شما سپاسگزارم و به زودی محتوای جدیدی براتون آماده می‌کنم 🔥

منتظر باشید 💻✨

چرا هوش هیجانی (EQ) برای برنامه‌نویسان حیاتی است؟ 🧠💡 

برخلاف باور رایج، موفقیت در برنامه‌نویسی فقط به ضریب هوشی (IQ) وابسته نیست! هوش هیجانی (EQ) همان چیزی است که شما را از یک کدنویس معمولی به یک توسعه‌دهنده استثنایی تبدیل میکند. 

چرا EQ در برنامه‌نویسی مهم است؟ 
• مدیریت استرس 🧘‍♂️: 
  پروژههای فشرده و باگهای پیچیده بخشی از زندگی برنامهنویس هستند. EQ به شما کمک میکند تحت فشار، آرام و متمرکز بمانید. 
• همکاری مؤثر 👥: 
  توانایی درک احساسات هم‌تیمی‌ها و ارتباط سازنده، محیط کار را بهبود میبخشد. 
• درک نیاز کاربران 🎯: 
  توسعهدهندگان با EQ بالا میتوانند خود را جای کاربر بگذارند و محصولاتی کاربرپسندتر بسازند. 

چگونه هوش هیجانی خود را تقویت کنیم؟ 
• خودآگاهی: احساسات و واکنشهای خود را در موقعیتهای مختلف شناسایی کنید. 
• همدلی: سعی کنید دیدگاه دیگران را بفهمید، حتی اگر با آن مخالف هستید. 
• مدیریت تعارض: به جای بحثهای بی پایان، به دنبال راه حل های سازنده باشید. 

فایل فیگما برای سایت رزرو بلیط مسافرتی و تور آماده شده است! ✈️🌍 این یک فرصت عالی برای طراحان وب و برنامه‌نویسان فرانت‌اند است تا مهارت‌های خود را تقویت کنند. 🎨💻

برای دانلود فایل به لینک زیر مراجعه کنید:
🔗 دانلود فایل 📥✨

همین حالا شروع به طراحی کنید و سفرهای جذاب را به کاربران خود معرفی کنید! 🚀🌟

هر جا که میخوای یادداشت بزار! ✏️


تصور کن وسط خوندن یه صفحه‌ی وب یادت میاد یه نکته مهم رو یادداشت کنی، اما هیچ جایی برای نوشتنش پیدا نمی‌کنی. یا شاید بخوای یه یادآوری دقیقاً روی همون صفحه بذاری برای بعدا!! 🤯


🔖 افزونه‌ی Note Anywhere دقیقاً برای همین ساخته شده!


این افزونه چه قابلیت‌هایی داره؟
➕ روی هر صفحه‌ی وب می‌تونی یادداشت بذاری
📍 جای نوت‌هات دقیقاً همون‌جا باقی می‌مونه
✔️ دفعه بعد که صفحه رو باز کنی، نوت ها هم همراهت هستن
✍️ مناسب برای مقاله‌خون‌ها، دانشجوها، برنامه‌نویسا، یا هر کسی که همیشه وسط کار یه چیزی یادش میاد!👇


🔗 لینک مشاهده افزونه

سلام به همه‌ دوستان 🌟

می‌خواستم یک وبسایت جالب رو به شما معرفی کنم که توسط دوستم رضا قاسم‌زاده طراحی شده. این وبسایت به نام "یادگیری اصول چت در فضای مجازی" به شما کمک می‌کند تا مهارت‌های چت کردن رو بهبود ببخشید.

اگر شما هم مثل من از چت کردن با دوستانتون لذت می‌برید، حتماً سر بزنید: chetorchatkonim.ir

این وبسایت اوپن سورس هست و می‌تونید کدهای اون رو در گیت هاب ببینید. اگر دوست داشتید، لطفاً ریتوییت و استار کنید تا بیشتر دیده بشه ❤️

گیت هاب: rezaghz/chetorchatkonim

ممنون از توجهتون 😊

▎متد every در جاوااسکریپت

متد every در جاوااسکریپت یکی از متدهای آرایه است که برای بررسی این که آیا همه عناصر یک آرایه با یک شرط خاص مطابقت دارند یا خیر، استفاده می‌شود. این متد یک تابع callback را به عنوان پارامتر دریافت می‌کند و اگر تمام عناصر آرایه شرط مشخص شده در تابع callback را برآورده کنند، مقدار true را برمی‌گرداند. در غیر این صورت، مقدار false برمی‌گرداند.

▎نحوه استفاده از متد every

ساختار کلی متد every به شکل زیر است:

array.every(callback(element[, index[, array]])[, thisArg])

▎پارامترها:

• بخش callback: تابعی که برای هر عنصر آرایه اجرا می‌شود. این تابع باید حداقل یک پارامتر (مقدار عنصر) را دریافت کند.

• بخش element: عنصر فعلی آرایه.

• بخش index (اختیاری): ایندکس عنصر فعلی.

• بخش array (اختیاری): خود آرایه‌ای که متد every روی آن فراخوانی شده است.

• بخش thisArg (اختیاری): مقداری که به عنوان this در تابع callback استفاده می‌شود.

▎مثال

بیایید نگاهی به یک مثال بیندازیم:

const numbers = [2, 4, 6, 8];

const allEven = numbers.every(function(num) {
    return num % 2 === 0;
});

console.log(allEven); // خروجی: true

در این مثال، ما یک آرایه از اعداد داریم و با استفاده از متد every بررسی می‌کنیم که آیا همه اعداد زوج هستند یا نه. چون همه اعداد زوج هستند، خروجی true خواهد بود.

▎مثال دیگر

حالا بیایید مثالی دیگر را بررسی کنیم:

const ages = [18, 21, 16, 25];

const allAdults = ages.every(function(age) {
    return age >= 18;
});

console.log(allAdults); // خروجی: false

در اینجا، ما بررسی می‌کنیم که آیا همه افراد بزرگسال هستند یا خیر. چون یکی از اعداد (16) کمتر از 18 است، خروجی false خواهد بود.

▎استفاده از تابع پیکانی (Arrow Function)

می‌توانید از تابع پیکانی (Arrow Function) برای نوشتن کد به صورت مختصرتر استفاده کنید:

const numbers = [2, 4, 6, 8];

const allEven = numbers.every(num => num % 2 === 0);

console.log(allEven); // خروجی: true

▎نکات مهم

1. اگر آرایه خالی باشد، متد every به طور پیش‌فرض true را برمی‌گرداند.

2. اگر هر یک از عناصر آرایه شرط را برآورده نکند، متد بلافاصله مقدار false را برمی‌گرداند و دیگر به بررسی باقی عناصر ادامه نمی‌دهد.

متد every ابزاری بسیار مفید برای بررسی شرایط در آرایه‌ها است و می‌تواند در بسیاری از سناریوها مورد استفاده قرار گیرد.

برای یادگیری و درک بهتر متد every مقاله را مطالعه کنید 💯

https://www.w3schools.com/jsref/jsref_every.asp

🧑‍💻 حرف نزن، کار کن!

میگی کلی ایده تو ذهنته؟ خب که چی؟ 🤷‍♂️
تا وقتی دست به کار نشی، هیچی تغییر نمیکنه!

✅ یه حرکت کوچیک امروز، از صدتا فکرِ فردا بهتره!
✅ مثل بارون باش، آروم ولی پیوسته... سنگم جلوت کم میاره!

📌 پ.ن: زندگی با "شاید فردا"ها عوض نمیشه... همین امروز شروع کن!

متد findIndex در جاوااسکریپت برای پیدا کردن ایندکس اولین عنصری که با شرایط مشخص شده در یک تابع تست مطابقت دارد، استفاده می‌شود. این متد بر روی آرایه‌ها کار می‌کند و اگر عنصری پیدا شود که شرایط را برآورده کند، ایندکس آن عنصر را برمی‌گرداند. در غیر این صورت، -1 را برمی‌گرداند.

▎سینتکس

array.findIndex(callback(element[, index[, array]])[, thisArg])

▎پارامترها

• بخش callback: تابعی که برای هر عنصر آرایه فراخوانی می‌شود. این تابع می‌تواند سه آرگومان دریافت کند:

• بخش element: عنصر فعلی که در حال بررسی است.

• بخش index (اختیاری): ایندکس عنصر فعلی.

• بخش array (اختیاری): آرایه‌ای که متد findIndex بر روی آن فراخوانی شده است.

• بخش thisArg (اختیاری): مقداری که به عنوان this در تابع callback استفاده می‌شود.

▎مثال

const numbers = [4, 9, 16, 25];

const isEven = (element) => element % 2 === 0;

const index = numbers.findIndex(isEven);

console.log(index); // خروجی: 0 (چون 4 اولین عدد زوج است)

در این مثال، تابع isEven بررسی می‌کند که آیا عدد زوج است یا نه. متد findIndex ایندکس اولین عدد زوج را در آرایه numbers برمی‌گرداند.

▎مثال دیگر با استفاده از ایندکس

const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
];

const index = users.findIndex(user => user.id === 2);

console.log(index); // خروجی: 1 (چون Bob با id 2 در ایندکس 1 قرار دارد)

▎نکته

اگر هیچ عنصری پیدا نشود که با شرایط مطابقت داشته باشد، findIndex -1 را برمی‌گرداند:

const index = numbers.findIndex(num => num > 30);
console.log(index); // خروجی: -1 (چون هیچ عددی بزرگتر از 30 وجود ندارد)

با استفاده از متد findIndex می‌توانید به راحتی ایندکس عناصر مورد نظر خود را در آرایه‌ها پیدا کنید.

برای یادگیری و درک بهتر متد findIndex مقاله را مطالعه کنید 💯

https://www.w3schools.com/jsref/jsref_findindex.asp

متد find در جاوااسکریپت برای پیدا کردن اولین عنصری که با شرایط مشخص شده در یک تابع تست مطابقت دارد، استفاده می‌شود. این متد بر روی آرایه‌ها کار می‌کند و اگر عنصری پیدا شود که شرایط را برآورده کند، آن عنصر را برمی‌گرداند. در غیر این صورت، undefined را برمی‌گرداند.

▎سینتکس

array.find(callback(element[, index[, array]])[, thisArg])

▎پارامترها

• بخش callback: تابعی که برای هر عنصر آرایه فراخوانی می‌شود. این تابع می‌تواند سه آرگومان دریافت کند:

• بخش element: عنصر فعلی که در حال بررسی است.

• بخش index (اختیاری): ایندکس عنصر فعلی.

• بخش array (اختیاری): آرایه‌ای که متد find بر روی آن فراخوانی شده است.

• بخش thisArg (اختیاری): مقداری که به عنوان this در تابع callback استفاده می‌شود.

▎مثال

const numbers = [4, 9, 16, 25];

const evenNumber = numbers.find(element => element % 2 === 0);

console.log(evenNumber); // خروجی: 4 (چون 4 اولین عدد زوج است)

در این مثال، تابعی که به متد find داده شده است، بررسی می‌کند که آیا عدد زوج است یا نه. متد find اولین عدد زوج را در آرایه numbers برمی‌گرداند.

▎مثال دیگر با استفاده از اشیاء

const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
];

const user = users.find(user => user.id === 2);

console.log(user); // خروجی: { id: 2, name: 'Bob' } (چون Bob با id 2 وجود دارد)

▎نکته

اگر هیچ عنصری پیدا نشود که با شرایط مطابقت داشته باشد، find مقدار undefined را برمی‌گرداند:

const result = numbers.find(num => num > 30);
console.log(result); // خروجی: undefined (چون هیچ عددی بزرگتر از 30 وجود ندارد)

با استفاده از متد find می‌توانید به راحتی اولین عنصر مورد نظر خود را در آرایه‌ها پیدا کنید. این متد به خصوص در کار با آرایه‌های اشیاء بسیار مفید است.

برای یادگیری و درک بهتر متد find مقاله را مطالعه کنید 💯

https://www.w3schools.com/jsref/jsref_find.asp

متد splice در جاوااسکریپت یکی از متدهای آرایه است که برای تغییر محتوای یک آرایه استفاده می‌شود. این متد می‌تواند برای حذف، اضافه کردن یا جایگزینی عناصر در آرایه به کار رود.

▎نحوه استفاده از متد splice

سینتکس متد splice به صورت زیر است:

array.splice(start, deleteCount, item1, item2, ...)

▎پارامترها:

1. start: ایندکس (index) که از آنجا تغییرات آغاز می‌شود. اگر مقدار منفی باشد، به انتهای آرایه نسبت داده می‌شود.

2. deleteCount: تعداد عناصری که باید از آرایه حذف شوند. اگر این مقدار صفر باشد، هیچ عنصری حذف نمی‌شود.

3. item1, item2, ...: عناصری که باید به آرایه اضافه شوند. این پارامترها اختیاری هستند.

▎مثال‌ها:

▎1. حذف عناصر از آرایه

let fruits = ['apple', 'banana', 'orange', 'grape'];
fruits.splice(1, 2); // از ایندکس 1، 2 عنصر را حذف می‌کند
console.log(fruits); // ['apple', 'grape']

▎2. اضافه کردن عناصر به آرایه

let fruits = ['apple', 'banana', 'orange'];
fruits.splice(2, 0, 'grape', 'kiwi'); // از ایندکس 2، هیچ عنصری را حذف نمی‌کند و 'grape' و 'kiwi' را اضافه می‌کند
console.log(fruits); // ['apple', 'banana', 'grape', 'kiwi', 'orange']

▎3. جایگزینی عناصر در آرایه

let fruits = ['apple', 'banana', 'orange'];
fruits.splice(1, 1, 'grape'); // از ایندکس 1، یک عنصر را حذف کرده و 'grape' را جایگزین آن می‌کند
console.log(fruits); // ['apple', 'grape', 'orange']

▎نتیجه‌گیری

متد splice یک ابزار قدرتمند برای مدیریت آرایه‌ها در جاوااسکریپت است و می‌توانید با استفاده از آن به راحتی عناصر را حذف، اضافه یا جایگزین کنید.