🔧 اهمیت فایل tsconfig.json تو پروژه‌های TypeScript

📂 فایل tsconfig.json یکی از مهم‌ترین بخش‌های هر پروژه‌ی تایپ‌اسکریپتیه. این فایل به کامپایلر میگه چطور کدهای TypeScript رو به JavaScript تبدیل کنه. با تنظیم درستش، می‌تونی:
✅ سخت‌گیری بیشتری تو بررسی خطاها داشته باشی.
✅ فرمت خروجی کد رو مدیریت کنی.
✅ تو پروژه‌های واقعی مشکلات رو بهتر کنترل کنی.

⚙️ تنظیمات پیشنهادی برای tsconfig.json

با استفاده از یه سری تنظیمات خوب، می‌تونی:
🚀 سرعت بیلد رو بالا ببری.
🔒 ایمنی کد رو بیشتر کنی.
🐞 دیباگ کردن رو راحت‌تر کنی.
🤝 سازگاری کد رو تضمین کنی.


🔗 میتونید توضیحات بیشتر درباره هر کدوم از این موارد رو داخل این داکیومنت ببینید.

پروژه‌ی تایپ‌اسکریپتی بدون tsconfig.json مثل یه نقشه‌ی گنج بدون علامت X هست! 🗺✨

🔵<CodeHub/>

#Figma_Template

Figma Template: Crypto trading

Difficulty :  ⭐️⭐️⭐️

🔗Click for Get Link

🔴 </CodeHub>

تحلیل رزومه با جزییات

#تجربه

@webinar_farsi

#tailwindCss #frontend

👀 بیش از 20 انیمیشن CSS با کلاس‌های آماده Tailwind CSS.

سایت Origin UI مجموعه‌ای از توابع "easing" آماده برای پروژه‌هایی که با Tailwind CSS کار می‌کنند ارائه کرده است. برای اضافه کردن این توابع به پروژه‌تان، کافی است نام کلاس موردنظر 📄 را کپی کنید.

🔗 Link: https://originui.com/easings

@IDevZone | از کد تا خلاقیت

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

#WebSocket

بریم سمت دنیای ریلتایم! WebSocket

🧐 مفهوم WebSocket چیه؟
- تصور کن تو یه چت روم آنلاین هستی و هر پیام رو بدون رفرش کردن صفحه میفرستی و دریافت میکنی! 🪄 این معجزه رو WebSocket ممکن میکنه!
مفهوم WebSocket یه پروتکوله که ارتباط دوطرفه و پایدار بین کلاینت (مثل مرورگر) و سرور ایجاد میکنه.
برعکس HTTP که هر بار باید درخواست جدید بزنی (مثل رفرش صفحه)، WebSocket مثل یه تونل باز میمونه و دادهها باهم ردوبدل میشن!

مقایسه با مفهوم HTTP
- مفهوم HTTP : مثل ارسال نامه📮... هر بار باید به پستخونه بری و نامه جدید بفرستی!
مفهوم WebSocket : مثل تماس تلفنی📞... یکبار ارتباط برقرار میشه و هر دو طرف میتونن حرف بزنن!

💡کجاها استفاده میشه؟
۱. چتهای ریلتایم (مثل تلگرام خودمون! 😉)
۲. نوتیفیکیشنهای آنلاین (مثلاً وقتی یه کاربر جدید تو سایت لاگین میکنه)
۴. داشبوردهای زنده (مثلاً آپدیت قیمت ارز یا بورس بدون رفرش!)

چطوری کار میکنه؟ 👨💻
۱. اول یه Handshake با HTTP انجام میشه (سلام و احوالپرسی اولیه 😅).
۲. اگه سرور موافقت کنه، ارتباط Upgrade میشه به WebSocket.
۳. حالا کلاینت و سرور میتونن با هم دیتا ردوبدل کنن تا هر وقت خواستن!

مزایای WebSocket ✅
سرعت بالا: دیگه نیازی به درخواستهای مکرر HTTP نیست!
کمتر شدن بار سرور: ارتباط همیشه بازه، پس سرور کمتر کار میکنه.
پشتیبانی گسترده: تقریباً همه مرورگرهای جدید (Chrome, Firefox, ...) ازش حمایت میکنن.

مثال کد ساده (جاوااسکریپت) 🖥

// ایجاد ارتباط WebSocket
const socket = new WebSocket('wss://مثال.com/chat');

// گوش دادن به پیامهای سرور
socket.addEventListener('message', (event) => {
    console.log('پیام از سرور: ', event.data);
});

// فرستادن پیام به سرور
socket.send('سلام سرور! چطوری؟');

🔵</CodeHub>

یکی از بچه های چنل یه اکستنش کروم نوشتن که مشکل راست به چپ deepseek رو حل میکنه
میتونید از گیت هابش دانلود و نصب کنید

https://github.com/pouriasabaghi/deepseek_rtl_extention/


#openSource #deepseek
@CleverDevs - @CleverDevsGp

#Figma_Template

Figma Template: Shop.co

Difficulty :  ⭐️⭐️⭐️

🔗Click for Get Link

🔴 </CodeHub>

حق

#NEXT

کار های نسبتا ساده ای که میتونه پرفورمنس توسعه پروژه رو بالا ببره و بعضیاش واقعا کاربردی و ساده ان .

وقت داشتید یه نگاهی به این مقاله بندازید.



🔵 <CodeHub/>

اگر توی پروژه React js و یا Next js از کتابخانه framer motion استفاده میکنید این پست میتونه براتون خیلی مفید باشه!

سایت aceternity UI با استفاده از framer motion کلی انیمیشن های خفن و کاربری توی زمینه و قسمت های مختلف توسعه دادن که میتونید ببینید و اگر دوست داشتید کدش رو مستقیم کپی و استفاده کنید.

پیشنهاد میکنم حتما به سایتش سر بزنید!!!

https://ui.aceternity.com

@DevTwitter | <Mohammad Reza Moradi/>

#JS

پنج تا از کتابخونه‌های قدیمی که یه موقع مناسب‌ و مفید بودن ولی دیگه موقع تغییره :

اول. jQuery:
روزای قدیم برای دستکاری DOM و پشتیبانی از مرورگرهای قدیمی کاربرد داشت، ولی حالا جاوااسکریپت خودش کلی قابلیت داره و روش‌های جدید، جای jQuery رو گرفته.

دوم. Lodash:
این کتابخونه واسه کارهای کمکی توی کدها بود، ولی با معرفی ES6 و توابع بومی جاوااسکریپت، نیاز بهش کمتر شده.

سوم. Moment.js:
برای کار با تاریخ و زمان عالی بود، اما حجم بالایش باعث می‌شه سرعت برنامه‌ها پایین بیاد. جایگزین‌هایی مثل date-fns و Luxon خیلی سبک‌تر و بهینه‌تر هستن.

چهارم. Underscore.js:
نسخه اولیه Lodash که با امکانات کمترش دیگه کافی نیست؛ بهتره از روش‌های بومی ES6 استفاده کنید.

پنجم. RequireJS:
ابزار قدیمی برای مدیریت ماژول‌ها که با ورود ES6 ماژول‌ها و ابزارای مدرن مثل Webpack، Vite و Rollup دیگه نیاز بهش کمتر شده.همه رو حل می‌کنن.

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

🔵</Codehub>

۵۶ تا آگهی آخر جابینجا رو دادم به هوش مصنوعی که تحلیل کنه. خلاصه‌ تکنولوژی‌هایی که نیاز دارن به ترتیب اولویت این شد.

1. React proficiency (hooks, component lifecycle, best practices)
2. Next.js (SSR, SSG, and performance optimization)
3. TypeScript for type-safe, scalable JavaScript
4. State management (Redux, React Query, Zustand, etc.)
5. HTML/CSS frameworks (Tailwind, MUI, Bootstrap, Styled Components)
6. Git version control and team workflows
7. Testing (Jest, Cypress) and clean code practices
8. Familiarity with Docker, CI/CD, and DevOps fundamentals
9. Knowledge of SSR and performance tuning
10. Optional pluses: React Native, WebSocket, GraphQL, PWA

شاید اوایل کار شما هم مثل من فکر می‌کردید که Lazy Loading فقط برای لود کردن عکسها بکار میره، ولی این فقط یه گوشه از ماجراست! درواقع Lazy Loading یه استراتژی هوشمندانه‌ست که میشه تو خیلی جاها ازش استفاده کرد. بذارید چندتا مثال بزنم تا بیشتر با کاربرد هاش آشنا بشیم

کامپوننت‌ها:
وقتی یه اپلیکیشن بزرگ دارید، نیازی نیست همه کامپوننت‌ها رو از اول لود کنید. مثلاً پنل ادمین رو فقط وقتی ادمین لاگین کرد لود میکنیم!

روت‌های برنامه:
چرا باید کد صفحه پروفایل رو موقعی که کاربر تو صفحه اصلی هست لود کنیم؟ بذار هر وقت رفت تو پروفایل، اون موقع لود بشه.

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

دیتای API:
حتی می‌تونیم دیتا رو هم Lazy Load کنیم! مثلاً تو لیست محصولات، به جای گرفتن همه محصولات، به تدریج و موقع اسکرول کردن لود کنیم (Infinite Scroll).

نتیجه چی میشه؟
-سرعت اولیه برنامه میره بالا
-منابع سیستم کمتر مصرف میشه
-کاربر فقط چیزی که نیاز داره رو دانلود میکنه
-تجربه کاربری بهتر میشه

پس دفعه بعد که خواستید پرفورمنس برنامه‌تون رو بهتر کنید، فقط به عکسها فکر نکنید! Lazy Loading خیلی جاهای دیگه هم به دردتون میخوره

@DevTwitter | <Soheil Seyyedi/>

#Figma_Template

Figma Template: Global Transactions

Difficulty :  ⭐️⭐️⭐️

🔗Click for Get Link

🔴 </CodeHub>‌

امروز می‌خوام یه ترفند باحال از دنیای گوگل رو بهتون معرفی کنم: Google Dork.

🔍مفهوم Google Dork چیه؟
بعضی وقتا می‌شنید که گوگل فقط یه موتور جستجو نیست! در واقع، گوگل همون ابزار قدرتمندیست که با دستورات خاص می‌تونید اطلاعات عمیق‌تر و پنهونیه رو پیدا کنید. مثلاً اگه دنبال فایل‌های PDF، تصاویر یا حتی صفحات خاصی از یه سایت هستید، می‌تونید از دستورهایی مثل:

• filetype:pdf
• site:example.com
• intitle:"admin login"

استفاده کنید تا نتایج دقیق‌تری بدست بیارید.

💡 چطوری کار می‌کنه؟
این تکنیک به شما اجازه می‌ده به کمک عبارات جستجوی پیشرفته، چیزهایی رو پیدا کنید که توی جستجوهای معمولی گوگل پنهان می‌مونن. مثلاً با نوشتن عبارت

site:example.com filetype:pdf "گزارش"

می‌تونید همه فایل‌های PDF با کلمه «گزارش» توی سایت مورد نظرتون رو پیدا کنید.

⚠️ مواظب باشین!
یادتون باشه که این تکنیک‌ها فقط برای اهداف آموزشی، تست امنیت و یادگیری هستن. استفاده نادرست یا غیرقانونی از این ترفندها می‌تونه به دردسرای بزرگی منجر بشه. پس همیشه قوانین رو رعایت کنید و با اخلاقیات کار کنید.

امیدوارم این پست براتون مفید و جذاب بوده باشه.

🔵<CodeHub/>

🔹تفاوت بین useEffect و useMemo و useCallback در ری اکت چیه؟

✔️ هوک useEffect در React برای انجام کارهایی استفاده می‌شه که اثر جانبی دارن. به عبارت ساده، وقتی می‌خوای بعد از رندر شدن کامپوننت کارهایی مثل دریافت اطلاعات از سرور، تغییر در DOM یا مدیریت اشتراک‌ها انجام بدی، useEffect وارد عمل می‌شه.

از useEffect معمولاً برای کارهایی مثل دریافت داده (data fetching)، اضافه و حذف کردن event listenerها، و انجام عملیات بعد از تغییر props یا state استفاده می‌کنن.

useEffect(() => {
  // Code to execute after rendering or when specified dependencies change
}, [dependencies]);

✔️هوک useMemo در React برای memoization استفاده می‌شه. Memoization یعنی ذخیره کردن نتیجه‌ی یک محاسبه‌ی سنگین تا فقط وقتی که وابستگی‌ها تغییر می‌کنن، دوباره محاسبه بشه. این کار باعث بهینه‌سازی عملکرد و جلوگیری از اجرای بی‌دلیل محاسبات می‌شه.

📌نکته: useMemo فقط مقدار خروجی رو کش می‌کنه، نه خود تابع رو!
اگه نیاز داری که خود تابع کش بشه (مثلاً برای پاس دادن به useEffect یا useCallback)، بهتره از useCallback استفاده کنی.

هوک useMemo برای کش کردن (cache) خروجی یک تابع یا یک عبارت استفاده می‌شه تا از انجام محاسبات غیرضروری جلوگیری بشه و عملکرد بهینه‌تر بشه.

const memoizedValue = useMemo(() => {
  // Expensive calculation or function
  return result;
}, [dependencies]);

✔️ هوک useCallback شباهت زیادی به useMemo داره، ولی به جای مقدار، روی تابع تمرکز می‌کنه و اون رو memoize می‌کنه. این هوک مخصوصاً وقتی مفید می‌شه که بخوای یک تابع رو به‌عنوان prop به کامپوننت فرزند بفرستی و از ایجاد توابع جدید در هر رندر جلوگیری کنی.

📌هوک useCallback یه تابع رو کش (cache) می‌کنه و فقط زمانی که وابستگی‌ها تغییر کنن، یه نسخه‌ی جدید از تابع می‌سازه. این کار باعث جلوگیری از رندر غیرضروری کامپوننت‌های فرزند می‌شه.

const memoizedCallback = useCallback(() => {
  // Function to memoize
}, [dependencies]);

‼️به طور خلاصه، هر کدوم از این هوک‌ها هدف خاصی دارن و ابزارهای مفیدی برای مدیریت بخش‌های مختلف یک کامپوننت React هستن. درک درست از زمان و نحوه‌ی استفاده‌ی useEffect، useMemo و useCallback می‌تونه به بهینه‌تر شدن عملکرد و نگه‌داری راحت‌تر اپلیکیشن‌های React کمک کنه.

Source : useMemo - useEffect - useCallback

🔵 <CodeHub/>

🎯 فرض کنید یه صفحه‌ی داشبورد داریم که توش یه لیست از کاربران نمایش داده می‌شه. این لیست از یه API دریافت می‌شه و هر کاربر یه دکمه برای انتخاب شدن داره. اما سه تا مشکل وجود داره:

1️⃣ هر بار که داشبورد باز می‌شه، درخواست جدید به سرور ارسال می‌شه، حتی اگه داده‌ها تغییری نکرده باشن.
✅ استفاده از هوک useEffect → داده‌ها رو فقط وقتی دریافت کن که کامپوننت لود می‌شه، نه در هر رندر.

2️⃣ یه محاسبه‌ی سنگین (مثلاً فیلتر کردن کاربران خاص) توی هر رندر دوباره اجرا می‌شه، حتی اگه لیست تغییر نکرده باشه.
✅ استفاده از هوک useMemo → لیست فیلتر شده‌ی کاربران رو فقط وقتی محاسبه کن که داده‌ها تغییر کنن، نه در هر رندر.

3️⃣ هر بار که یه کاربر انتخاب می‌شه، تابعی که هندلر کلیک هست دوباره ساخته می‌شه، که باعث رندر غیرضروری کامپوننت‌های فرزند می‌شه.
✅ استفاده از هوک useCallback → تابع کلیک روی کاربران رو ثابت نگه دار تا باعث رندر اضافی نشه.

📌 نتیجه: عملکرد بهتر، جلوگیری از درخواست‌های غیرضروری به سرور، و کاهش رندرهای غیرضروری! 🚀

🔵 <CodeHub/>