Dev Perfects
40 subscribers
9.23K photos
1.26K videos
468 files
13K links
بخوام خیلی خلاصه بگم
این کانال میاد مطالب کانالای خفن تو حوزه تکنولوژی و برنامه نویسی رو جمع میکنه

پست پین رو بخونید
https://t.iss.one/dev_perfects/455


ارتباط:
https://t.iss.one/HidenChat_Bot?start=936082426
Download Telegram
برای اینکه بفهمید چند خط کد توی ریپازیتوری گیت شما زده شده میتونید از دستور زیر استفاده کنید، نتیجش میتونه واقعا جالب باشه 🔥

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


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

bash git ls-files | xargs wc -l


اگر زدید به همراه زبان/فریم‌ورک پروژتون بفرستید ببینیم پروژه کی کداش بیشتره 📟

#git | #tricks

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

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


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

bash git ls-files | xargs wc -l


#git | #tricks

🚀 @coolycode
تا امروز سعی کردیم که مطالب فوق‌العاده کاربردی و با کیفیتی رو‌برای شما عزیزان تولید کنیم و هم اکنون میتونید به صد‌ها مطلب جذاب در حوزه وب دسترسی داشته باشید 💎

با توجه به گسترده شدن مطالب کانال کولی‌کُد تصمیم، گرفتیم که یک دسته بندی مناسبی رو روی تمامی پست‌های کانال اعمال کنیم، که میتونید به صورت کامل لیستش رو مشاهده کنید 🚀
⁉️ #WhatsThat : معرفی و بررسی تکنولوژی‌ها

🧰 #tools : ابزار ها و سرویس ‌های کاربردی

👨‍💻 #programming : مباحث عمومی حوزه تک

🪄 #tricks : تریک و ترفندها‌ ‌‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

🌐 #website : معرفی وبسایت‌ ‌ ‌ ‌‌ ‌ ‌ ‌ ‌

‼️ #tips : نکات مهم و کاربردی‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

😎 #fun : فان و سرگرمی‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

👩‍💻#javascript : مربوط به جاوااسکریپت

🖌️ #css : مربوط به سی‌اس‌اس ‌ ‌ ‌ ‌

💻 #Frontend : حوزه ‌فرانت‌اند‌ ‌ ‌ ‌ ‌ ‌‌ ‌ ‌ ‌ ‌

🗄️ #Backend : حوزه بکند ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌‌ ‌‌ ‌ ‌ ‌ ‌

📚#libarary : معرفی لایبرری های کاربردی

🔳 #framework : معرفی و بررسی فریم‌ورک

🆚 #VS : مقایسه و بررسی تفاوت‌ها

📗#book : معرفی کتاب‌‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

💎 #golden_sentence : جملات ناب حوزه تک

📷 #NEWPost : پست های اینستاگرام

📺 #youtube : ویدیو های چنل یوتوب

▶️ #video : آموزش های ویدیویی

🎨 #uiux : مباحث مربوط به ui, ux


اگر مورد جدیدی به مطالب کانال اضافه بشه داخل این لیست قرار میگیره

راستی میتونید بنرمون رو برای دوستان خودتون ارسال کنید تا اونا هم به جمع ما بپیوندن 🔻

CoolyCode Banner 🫰


#category #دسته_بندی

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣
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
یه ترفند خفن و فوق‌العاده کاربردی در 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

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

Forwarded from LearnPOV | لرن پی او وی (Smin)
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

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

Forwarded from LearnPOV | لرن پی او وی (Mohammad hossein)
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

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

Forwarded from Ditty | دیتی
می‌دونستید توی تگ <select> میشه از تگ <hr> برای جدا کردن آپشن‌ها استفاده کرد؟ 👌


<select>
<option>1</option>
<option>2</option>
<hr>
<option>3</option>
<option>4</option>
<hr>
<option>5</option>
<option>6</option>
</select>


منبع | دمو

#tricks
Forwarded from LearnPOV | لرن پی او وی (Dev Mani)
#tricks


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

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

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


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