#javascript #tricks

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

5 + ' '  -->‌ ‌  ' 5 '

با این کار در واقع داریم عدد 5 رو به یک رشته خالی (' ') اضافه می‌کنیم.

حالا چرا این اتفاق می‌افته ؟ 🤔

جاوا اسکریپت یک زبان برنامه‌نویسی Dynamic Type هست و این به این معنی هست که نوع یک متغیر در زمان اجرا تعیین می‌شود و جاوا اسکریپت به طور خودکار تلاش می‌کنه تا انواع مختلف داده‌ها رو با هم سازگار کنه.
داخل جاوا اسکریپت، وقتی عملگر + بین دو رشته استفاده می‌شود، عمل الحاق (concatenation) انجام میشه؛ یعنی دو رشته به هم چسبیده و یک رشته جدید ایجاد می‌کنند.

حالا تبدیل عدد به رشته به چه شکلی اتفاق میفته ؟

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

⚡ نتیجه نهایی

در عبارت 5 + ' '، عدد 5 به رشته "5" تبدیل می‌شود و سپس به رشته خالی " " الحاق می‌شود. در نتیجه، خروجی عبارت "5" خواهد بود.

💥 مثال‌های دیگر

'Hello' + ' World' -> "Hello World"
'My age is ' + 30 -> "My age is 30"

کاربرد این روش 🚀

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

Channel | YouTube | Instagram

#javascript #tricks

● سه تا از کابردی ترین متد ها برای کار با آبجکت ها ●

➊ متد Object.keys : این متد تمام keyهای یک آبجکت رو گرفته و آن‌ها را در یک آرایه قرار می‌دهد.

➋ متد Object.values : این متد تمام valueهای یک آبجکت را گرفته و آن‌ها را در یک آرایه قرار می‌دهد.

➌ متد Object.entries : این متد keyها و valueها را به صورت key, value ترکیب می‌کند و آرایه‌هایی از این جفت‌ها ایجاد می‌کند.

مثال عملی 🚀

const obj { key1: 'value1', key2: 'value2', key3: 'value3'

};

const keysArray = Object.keys(obj);

const valuesArray = Object.values(obj);

const entriesArray = Object.entries(obj);

console.log(keysArray); 
// Output: ['key', 'key2', 'key3']

console.log(valuesArray); 
// Output: ['value', 'value2', 'value']

console.log(entriesArray); 
// Output: [['key', 'value'], ['key2', 'value'], ['key3', 'value3']]

با حمایتاتون بهمون انرژی بدید ❤️
〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️
Channel | Group | YouTube

پست جدیدمون آپلود شد تو اینستاگرام ✅😍

🌐 مشاهده پست

#️⃣ #NEWPost #tricks

🚀 @coolycode

اگر از داکر تو ویندوز استفاده میکنی و دوست داری فقط با تایپ کردن یه کامند تو ترمینال داکر‌ دسکتاپت استارت بشه کافیه که ... 🚀

➊ اول تو ترمینال این کامند رو بنویسید به و جای docker-start کامند مد نظر خودتونو برای استارت کردن داکر رو بنویسید 🔻

set-alias docker-start "C:\Program Files\Docker\Docker\Docker Desktop.exe"



➋ حالا فقط کافیه که کامندی که ست کرده بودی رو بزنی تو ترمینال تا داکر بالا بیاد🔻

docker-start

➌ و در آخر هم اکستنشن docker رو برای راحتی بیشتر کارمون نصب میکنیم تا از داخل vscode بتونیم به کانتینر‌ها و ایمیج‌ها دسترسی داشته باشیم طبق تصویر 🔥

#️⃣ #docker #tricks #extension

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

🔸 میدونستی برای باز کردن یه ریپازیتوری گیت هاب تو vscode کافیه که بعد از کلمه 𝗚𝗜𝗧𝗛𝗨𝗕 تو آدرس اون ریپازیتوی کلمه 1s رو بنویسی تا کل پروژه رو تو vscode برات باز کنه

مثلا برا دیدن این ریپازیتوری

https://github.com/mohammadhosseintazaroei/simple-express-and-ts-project

کافیه به این شکل بنویسیمش

https://github1s.com/mohammadhosseintazaroei/simple-express-and-ts-project

این کار بیشتر به درد زمان هایی میخوره که میخواید کد های یک‌ ریپازیتوری رو خیلی سریع و ساده ببینید و بررسی کنید ✅

#️⃣ #git #tricks

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

یکی از کاربردی ترین شورت‌کات های VSCODE که بدرد همه میخوره ✅🤩

شما ام میتونید هر شورت‌کات بدرد بخوری که بلدید توی کامنتا بگید تا بقیه استفاده کنن 🚀

#️⃣ #vscode #tricks

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

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

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

#tips | #tricks

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

💎 بررسی 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"
}

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