💎 بررسی nested object destructuring در جاوااسکریپت 💎

هموطنور که بیشترتون میدونید destructuring در جاوااسکریپت به ما این امکان رو می‌ده که از یک آبجکت یا آرایه به راحتی مقادیر خاصی رو استخراج کنیم

توی مثال زیر پروپرتی name رو از user اومدیم و destruct کردیم 🔻

const user = { name: 'Mmd', address: { city: 'cool city', } };

const { name } = user; console.log(name); // Mmd

ولی خب احتمالاً خیلی کم راجع به nested object destructuring شنیده‌ باشید. توی این حالت، وقتی آبجکت‌ما شامل آبجکت‌های دیگه‌ای به عنوان مقادیرش باشه، می‌تونیم به راحتی از destructuring برای استخراج دیتای داخل آبجکت تو در تو هم استفاده کنیم

توی مثال زیر پروپرتی city رو به سادگی از address اومدیم و destruct کردیم 🚀

const { name, address: { city } } = user;
console.log(name); // Mmd
console.log(city); // cool city

حتماً از این نوع destructuring توی پروژه هاتون استفاده کنید چون باعث می‌شه که کدتون کوتاه‌تر و خواناتر بشه ✅

امیدوارم از این مطلب لذت برده باشید، با ری‌اکشنای خودتون بهمون انرژی بدید ❤️‍🔥

#️⃣ #javascript #tricks

⭐ 𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

💎 استخراج نوع آیتم از یک آرایه در Typescript 💎

فرض کنید، یک DataType مشخص دارید (مثلاً از یک API) و دیتای شما به شکل آرایه‌ای از آبجکت‌ها هست و میخواید فقط تایپ آیتم‌های این آرایه رو استخراج کنید بدون اینکه تایپ آیتم از قبل به صورت جدا تعریف شده باشه، توی این پست قراره با یه مثال ساده به حل کردن این مسئله بپردازیم ✅

کد اولیه ما به این شکله 🔻

type GetAllUsersResponse = {
  getAllUsers: Array<{
    id: number;
    name: string;
    email: string;
  }>;
};

const response: GetAllUsersResponse = {
  getAllUsers: [ ... ],
};

حالا برای استخراج نوع آیتم های آرایه getAllUsers، میتونیم از [number] استفاده کنیم 🔻

type UserItem = GetAllUsersResponse['getAllUsers'][number];

وقتی که [number] جلوی یک تایپ آرایه قرار میگیره، به typescript میگه که فقط نوع آیتم آرایه رو میخوام ✅

📊 جمع بندی

حالا شاید پیش خودتون بگید که چرا باید از این روش استفاده بکنم ؟ چرا اصلا نیام و به صورت جدا تعریف بکنم تایپ User رو ؟ 🤔

درواقع این چالش بیشتر توی مواردی به وجود میاد که DataType شما مشخصه از قبل، مثل وقتی که از Graphql Codegen توی پروژتون استفاده میکنید، Codegen درواقع کارش اینه که Schema GraphQL رو به صورت اتومات به typescript تبدیل کنه تا دیگه مجبور نباشید تایپ ریسپانس API رو خودتون تعریف کنید.

یکی دیگه از دلایلی که عاشق گرف‌کیو‌الم :)

امیدوارم از این مطلب لذت برده باشید، با ری‌اکشنای خودتون بهمون انرژی بدید ❤️‍🔥

#️⃣ #typescript #tricks

🫶 𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

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

git ls-files | xargs wc -l | tail -n 1

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

bash git ls-files | xargs wc -l

#git | #tricks

🚀 @coolycode

10 ترفند جالب و کاربردی در جاوااسکریپت ✅

➊ کوتاه کردن string با ...

const truncate = (str, length) => 
  str.length > length ? str.slice(0, length) + "..." : str;
console.log(truncate("JavaScript Tricks", 10)); // "JavaScript..."

➋ ساخت آرایه عددی با طول دلخواه

const array = Array.from({ length: 5 }, (_, i) => i + 1);
console.log(array); // [1, 2, 3, 4, 5]

➌ تبدیل string به number

const num = +"42";
console.log(num); // 42

➍ جمع سریع آرایه‌ای از اعداد

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 10

➎ بررسی مقدار زوج یا فرد بودن

const isEven = (num) => num % 2 === 0;
console.log(isEven(4)); // true

➏ برعکس کردن String

const reverseString = (str) => str.split("").reverse().join("");
console.log(reverseString("hello")); // "olleh"

پیشنهاد : این مورد رو خودتون سعی کنید بدون استفاده از متد های آماده جاوااسکریپت بسازید جالبه و ساده ؛)

➐ تبدیل شرط چندگانه به شیوه‌ای تمیزتر

const getDay = (day) => ({
  1: "Monday",
  2: "Tuesday",
  3: "Wednesday",
}[day] || "Invalid day");
console.log(getDay(1)); // "Monday"

➑ حذف مقادیر خالی از آرایه

const arr = [0, null, undefined, "", 5];
const filtered = arr.filter(Boolean);
console.log(filtered); // [5]

➒ مقایسه سریع دو آرایه

const arraysAreEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
console.log(arraysAreEqual([1, 2], [1, 2])); // true

⓿➊ حذف مقادیر تکراری از آرایه

const unique = [...new Set([1, 2, 2, 3])];
console.log(unique); // [1, 2, 3]

امیدوارم از این مطلب لذت برده باشید، با ری‌اکشنای خودتون بهمون انرژی بدید ❤️‍🔥

#️⃣ #tricks #javascript

🫶 𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

#tricks

چند سالت بود که فهمیدی اگر تو VSCode موقع اسکرول کردن تو کدا کلید 𝗔𝗟𝗧 رو نگه داری سرعت اسکرول چند برابر میشه ...

تا اکتشافاتی دیگر بدرود 👋🤓

🚀 @coolycode

وی‌اس‌کدتو باز کن 🫵

روی ایکون ستینگ پایین کلیک کن ⚙️

روی گزینه Keyboard Shortcuts بزن ⌨️

توی قسمت سرچ بنویس 🔻

Transform to Uppercase‌‌ ‌ ‌ ‌ ‌ ‌

حالا روی ستون Keybinding کلیک کن 🖱️

شورت کات مد نظرت رو وارد کن

در نهایت کلید Enter رو بزن ✅

بوم، الان اگر هر متنی رو سلکت کنی کافیه فقط شورت‌کاتی که ست کرده بودی رو بزنی تا اون متن رو UPPERCASE کنه 💥

الان نه تنها یه شورت کات کاربردی اضافه کردی، بله دیگه میتونی هر شورت کاتی که میخوای رو ست کنی رو VSCode ✅

#tips | #tricks

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

➖➖➖➖➖➖➖➖➖

یه ترفند خفن و فوق‌العاده کاربردی در Tailwind CSS که شاید ندونی 🫵

ممکنه شما هم نیاز پیدا کنید که وقتی موس روی والد یک المان میره استایل های اون المان تغییر پیدا بکنه، توی تیلویند با استفاده از group و group-hover این کار امکان پذیره ✅

حالا چجوری ⁉️

‍‍‍‍‍‍‍‍‍‍<div class="group">
  هاور کن ببین چی میشه!
  <div class="opacity-0 group-hover:opacity-100 transition">
    🎉 سورپرایز!
  </div>
</div>

توی کد بالا وقتی موس روی div والد با کلاس group میره، div فرزند که به طور پیش‌فرض با opacity-0 مخفی شده، به آرامی توسط کلاس group-hover:opacity-100 نمایان میشه و محتویاتش رو نشون میده.

و برای برای ایجاد افکت نرم از transition استفاده کردیم که میتونید خودتون بیشتر راجبش بخونید. ( more )

#tips | #tricks | #tailwind

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

➖➖➖➖➖➖➖➖➖

10 شورت‌کات ضروری VS Code برای که سرعتتون رو به شدت بالا میبره 🚀

📂 Ctrl + P

باز کردن سریع هر فایل
با این میانبر می‌تونی خیلی راحت اسم فایل موردنظرت رو تایپ کنی و مستقیماً اون رو باز کنی.

📝 Ctrl + /

کامنت/آنکامنت کردن یک خط
این ترکیب بهت کمک می‌کنه که یک خط رو به‌سرعت کامنت یا آنکامنت کنی، بدون نیاز به تایپ دستی //.

↕️ Alt + ↑ / ↓

جابه‌جا کردن یک خط به بالا یا پایین
اگر بخوای بدون کپی/پیست کردن، یک خط رو بالا یا پایین ببری، این میانبر خیلی کاربردیه.

❌ Ctrl + Shift + K

حذف خط جاری
با این ترکیب می‌تونی کل خطی که نشانگر روشه رو بدون انتخاب حذف کنی.

📚 Ctrl + B

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

💡Ctrl + Space

فعال کردن IntelliSense برای پیشنهادات کد
اگر در حال کدنویسی هستی و پیشنهادهای خودکار نمایش داده نشدن، این میانبر کمک می‌کنه دوباره اون‌ها رو ببینی.

🔍 Ctrl + Shift + F

جستجو در کل پروژه
این میانبر بهت امکان می‌ده که در کل فایل‌های پروژه دنبال متن یا کدی خاص بگردی.

📑 Ctrl + D

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

🔗 Ctrl + Shift + L

انتخاب تمام موارد مشابه در متن
این میانبر همه‌ی نمونه‌های یک کلمه در فایل رو یکجا انتخاب می‌کنه تا بتونی همه رو هم‌زمان تغییر بدی.

📜 Ctrl + Shift + P

باز کردن Command Palette
با این ترکیب می‌تونی به همه‌ی دستورات و قابلیت‌های VS Code دسترسی داشته باشی.

امیدوارم از این مطلب لذت برده باشید، با ری‌اکشنای خودتون بهمون انرژی بدید ❤️‍🔥

#vscode #tricks

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

➖➖➖➖➖➖➖➖➖

10 شورت‌کات ضروری VS Code که سرعتتون رو به شدت بالا میبره ( پارت 2 ) 🚀

✏️ Ctrl + F2

تغییر نام همه‌ی متغیرهای مشابه
اگر بخوای یک متغیر رو در کل فایل تغییر نام بدی، این میانبر کار رو خیلی راحت می‌کنه.

💻 Ctrl + J

نمایش یا مخفی کردن ترمینال داخلی
ترمینال داخلی VS Code رو با این ترکیب سریع باز و بسته کن.

❌ Ctrl + W

بستن تب فعلی
به‌جای کلیک روی دکمه‌ی بستن کنار فایل، این میانبر رو بزن و سریع‌تر تب‌های اضافی رو ببند.

🔎 Ctrl + Shift + E

فوکوس روی فایل اکسپلورر
اگر فایل اکسپلورر بسته شده یا فوکوس روی بخش دیگه‌ایه، با این ترکیب سریع بهش برگرد ؛)

❗Ctrl + Shift + M

نمایش پنل PROBLEMS
اگر کدت اروری داشته باشه، این ترکیب سریع لیست خطاها رو نشون می‌ده.

↕️ Alt + Shift + ↑ / ↓

کپی کردن یک خط در بالا یا پایین
به‌جای Copy/Paste، با این میانبر سریع‌تر میتونی یک خط رو بالا یا پایین کپی کنی.

🔳 Ctrl + Alt + جهت‌ها

تقسیم پنجره‌ی ادیتور
اگه بخوای چندین فایل رو کنار هم باز داشته باشی، با این میانبر میتونی ادیتور رو تقسیم کنی

امیدوارم از این مطلب لذت برده باشید، با ری‌اکشنای خودتون بهمون انرژی بدید ❤️‍🔥

#vscode #tricks

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

➖➖➖➖➖➖➖➖➖

#tricks

برای نمایش اعداد فارسی توی وبسایتتون؛ نیازی به نصب فونت و یا کانفیگ خاصی نیست 💥

فقط کافیه این پروپرتی رو به تگ body توی فایل گلوبال پروژتون اضافه کنین و لذتشو ببرین 👨‍🦯

body {
     font-features-settings: "ss01"
}

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣