🔸 اگه می‌خوای اندازه Bundle پروژه‌ات رو کم کنی و سرعت لود سایت رو به شدت بالا ببری، باید چندتا نکته کلیدی رو رعایت کنی. 🚀

۱. تجزیه و تحلیل Bundle 🧐
چی کار می‌کنه؟
قبل از هر کاری، بفهم که چه چیزایی توی Bundle فضا رو می‌گیرند. ابزارهایی مثل Bundle Analyzer با نمودارهای تصویری کمک می‌کنن تا جزئیات و بخش‌های سنگین کد رو به راحتی شناسایی کنی.

۲. حذف وابستگی‌های غیرضروری ✂️
چرا مهمه؟
توی پروژه‌هات ممکنه dependency هایی وجود داشته باشه که یا اصلاً استفاده نمی‌شن یا به بهینه‌ترین شکل نوشته نشده‌اند. حذف یا جایگزینی این وابستگی‌ها می‌تونه اندازه Bundle رو خیلی کاهش بده.

۳. استفاده از Code Splitting 🔀
مفهوم کلی:
به جای اینکه کل کد رو توی یه فایل بزرگ بریزی، اون رو به قسمت‌های کوچکتر تقسیم کن.
مزایا:
- فقط بخش‌هایی که کاربر نیاز داره در ابتدا لود می‌شه.
- زمان بارگذاری اولیه کمتر می‌شود.
- تجربه کاربری بهتری فراهم می‌شود.
❗️تصور کن یه کتاب ضخیم رو بخونی؛ به جای اینکه کل کتاب رو یکجا بخونی، فقط فصل یا بخش مورد نیازت رو می‌خونی!

۴. استفاده از Tree Shaking 🌳
هدف این تکنیک:
حذف قسمت‌های غیرضروری کد که هرگز اجرا نمی‌شن، به طوری که فقط کدهای واقعی و کاربردی داخل Bundle بمونن.
نتیجه:
یک Bundle تمیزتر و بهینه‌تر که باعث بهبود عملکرد برنامه می‌شه.

💡 نتیجه‌گیری:
کاهش حجم Bundle باعث می‌شه سایت یا اپلیکیشن شما سریع‌تر، کارآمدتر و بهینه‌تر عمل کنه. این تغییرات نه تنها رضایت کاربران رو بالا می‌بره، بلکه از نظر SEO هم به بهبود رتبه سایت کمک می‌کن.

🔵</CodeHub>

🔹 چرا Code Splitting مهمه؟ 🚀

1 - افزایش سرعت لود:
با تقسیم کد به بخش‌های کوچکتر، نیاز نیست کل کد یکجا دانلود بشه، بنابراین صفحه سریع‌تر لود می‌شه. ⚡️

2 - صرفه‌جویی در منابع:
فقط زمانی که کاربر به یک بخش خاص از برنامه نیاز داره، اون بخش از سرور دریافت می‌شه، که بهینه‌سازی منابع رو به دنبال داره. 💾

3 - بهبود تجربه کاربری:
کاهش زمان انتظار برای بارگذاری کامل برنامه، مخصوصاً در دستگاه‌هایی با اینترنت کند، تجربه کاربری رو بهبود می‌بخشه. 😊

🔹 چطور Code Splitting در React انجام می‌شه؟ ⚛️

در React، می‌تونیم با استفاده از dynamic imports و ابزارهایی مثل React.lazy و Suspense، کد رو به بخش‌های کوچکتر تقسیم کنیم. برای مثال:

import React, { Suspense } from 'react';

// بارگذاری تنبل (Lazy Loading) یک کامپوننت
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function App() {
  return (
    <div>
      <h1>برنامه من</h1>
      {/* استفاده از Suspense برای نمایش fallback تا زمان بارگذاری کامپوننت */}
      <Suspense fallback={<div>در حال بارگذاری...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

export default App;

در این مثال، OtherComponent فقط زمانی بارگذاری می‌شه که واقعاً لازم باشه. اگر کاربر به بخشی از برنامه که این کامپوننت استفاده می‌شه دسترسی پیدا کنه، کد اون کامپوننت از سرور دریافت و اجرا می‌شه. این روش به بهبود عملکرد و کاهش زمان بارگذاری کمک می‌کنه.


🔹 نکات کاربردی 🛠

تقسیم‌بندی مسیرها (Route-based Splitting):
در برنامه‌های چند صفحه‌ای، هر صفحه رو به صورت جداگانه بارگذاری کنیم تا زمان لود کاهش پیدا کنه.

پیکربندی ابزار Build:
ابزارهایی مثل Vite یا Webpack به‌طور خودکار از تکنیک‌های Code Splitting استفاده می‌کنن، اما می‌تونیم با تنظیمات دستی هم به این کار بپردازیم.

🔵</CodeHub>

در ادامه یک راهنمای کامل و بهبود یافته برای استفاده رایگان از Cursor ارائه شده است. لطفاً مراحل زیر را به ترتیب با دقت دنبال کنید:


---

گام ۱: خروج از حساب کاربری Cursor

1. خروج از حساب (Logout):
ابتدا از حساب کاربری Cursor خود خارج شوید. این کار تضمین می‌کند که تنظیمات قبلی یا اطلاعات ورود مانع روند ثبت‌نام جدید نشوند.


2. راه‌اندازی مجدد برنامه:
پس از خروج، برنامه Cursor را دوباره اجرا کنید تا مطمئن شوید در وضعیت خارج از حساب هستید.




---

گام ۲: اجرای PowerShell

1. باز کردن PowerShell:
برنامه Windows PowerShell را اجرا کنید. این محیط به شما امکان می‌دهد تا دستورات خط فرمان را وارد کرده و اسکریپت‌های لازم را اجرا کنید.


2. اجرای اسکریپت نصب:
در پنجره PowerShell، دستور زیر را وارد کنید:

irm https://raw.githubusercontent.com/yeongpin/cursor-free-vip/main/scripts/install.ps1 | iex

توضیح:

دستور irm مخفف Invoke-RestMethod است که فایل اسکریپت نصب را از گیت‌هاب دانلود می‌کند.

عملگر | خروجی دستور اول را به دستور دوم (که در اینجا liex است) می‌دهد.

با اجرای این دستور، اسکریپت نصب اجرا شده و فرآیند تنظیمات اولیه آغاز می‌شود.





---

گام ۳: ثبت‌نام جدید در Cursor

1. انتخاب گزینه ثبت‌نام:
پس از اجرای موفق اسکریپت، در منوی ارائه شده گزینه "Cursor New Register" را انتخاب کنید.


2. شروع فرآیند ثبت‌نام توسط ربات:
به محض انتخاب گزینه، ربات به صورت خودکار فعال شده و تلاش می‌کند شما را در سیستم ثبت کند.


3. نکات مهم در این مرحله:

فعال بودن فیلترشکن:
مطمئن شوید فیلترشکن (VPN) شما فعال است. این امر به دلیل محدودیت‌های جغرافیایی و دسترسی به سرورهای مورد نیاز ضروری است.

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





---

گام ۴: تکمیل ثبت‌نام و استفاده از Cursor

1. تغییر شناسه دستگاه:
پس از تکمیل فرآیند ثبت‌نام، شناسه (Machine ID) دستگاه شما تغییر می‌کند. این تغییر به معنای موفقیت‌آمیز بودن ثبت‌نام و فعال شدن خدمات رایگان Cursor است.


2. استفاده از نسخه جدید Cursor:
حالا می‌توانید از امکانات و ویژگی‌های جدید Cursor بهره ببرید.


3. پیشنهاد مهم:
توصیه می‌شود پس از تکمیل ثبت‌نام، از به‌روزرسانی (Update) خودداری کنید تا تنظیمات و دسترسی رایگان شما حفظ شود.




---

با دنبال کردن دقیق مراحل فوق، می‌توانید به راحتی از نسخه رایگان Cursor استفاده کرده و از امکانات آن لذت ببرید.

یک نفر اومده پرامتِ یکسانی رو رویِ ۱۸ مدل تست کرده. اینم نتیجه‌ش. فقط DeepSeek R1 که داره برعکس می‌چرخه. :))))

@DevTwitter | <Ayub Kokabi/>

سال نو شد و مثل یه ری‌استارت تازه، وقتشه که کدهای زندگی‌مونو بهینه‌تر و بی‌باگ‌تر بنویسیم! 😃💻

امیدوارم امسال همه‌ی پروژه‌هاتون بدون ارور بیلد بشه، هیچ باگی اذیتتون نکنه و همیشه توی گیت‌لایف موفق باشید! 🎯🚀

⚡️💙 عیدتون پر از شادی و موفقیت! 💙⚡️

#Figma_Template

Figma Template: Shop

Difficulty :  ⭐️⭐️⭐️

🔗Click for Get Link

🔴 </CodeHub>‌

یه لیست فوق‌العاده از ۱۰۰ پروژه در دسته‌های مختلف که کمک می‌کنه در هر سطحی هستید، بتونید مهارت برنامه‌نویسیتون رو بهبود بدید

اگر دنبال ایده برای پروژه هستید از دستش ندید

https://github.com/florinpop17/app-ideas

➖➖➖➖➖➖➖➖
✅ @Techbookology

چند تا ترفند باحال برای افزایش سرعت اجرای برنامه‌های Next.js , این نکات به بهبود عملکرد برنامه‌ها کمک می‌کنن :

1️⃣ استفاده کمتر از useEffect: اگر بخشی از کدتون رو می‌شه خارج از useEffect مدیریت کرد، حتماً این کار رو بکنید تا رندر اولیه سریع‌تر انجام بشه.

2️⃣ استفاده از next/image: این کامپوننت تصاویر رو به صورت بهینه و lazy load بارگذاری می‌کنه که باعث می‌شه صفحه سریع‌تر نمایش داده بشه. 📸

3️⃣ انتقال محاسبات به سرور: سعی کنید کدهای سنگین محاسباتی رو به سمت سرور بفرستید تا کلاینت از بار اضافی رهایی پیدا کنه.

4️⃣ استفاده از getStaticProps: با این متد، محتواها در زمان build به صورت استاتیک تولید می‌شن، در نتیجه زمان بارگذاری صفحات کاهش پیدا می‌کنه. 🚀

5️⃣ بهینه‌سازی فونت‌ها: انتخاب فونت‌های مناسب و کاهش درخواست‌های اضافی فونت می‌تونه تاثیر زیادی در سرعت لود صفحه داشته باشه.

6️⃣ فشرده‌سازی (compress) و کشینگ: فعال کردن این فیچرها باعث می‌شه تا حجم فایل‌ها کاهش پیدا کنه و کاربرها سریع‌تر به اطلاعات دسترسی پیدا کنن. ⚡️

7️⃣ استفاده از dynamic imports: کدهایی که نیازی به بارگذاری همزمان با صفحه ندارن رو به صورت دینامیک ایمپورت کنید تا تنها زمانی که نیاز هست، لود بشن. 📦

8️⃣ بهینه‌سازی استایل‌ها: استفاده از روش‌های مدرن مثل CSS-in-JS یا استفاده از استایل‌های کم‌حجم، به کاهش زمان رندر کمک می‌کنه.

9️⃣ به کارگیری CDN: استفاده از Content Delivery Network برای فایل‌های استاتیک مثل تصاویر و ویدئوها، زمان بارگذاری رو به طرز چشمگیری کم می‌کنه. 🌐

برای اطلاعات بیشتر می‌تونید این مقاله جالب رو مطالعه کنید: لینک مقاله 📚

🔵 <CodeHub/>

🚀 #WorldBackupDay
۳۱ مارس - روز جهانی بکاپ , امروز یه یادآوری برای همه ست که از داده‌های ارزشمندشون نسخه پشتیبان (بکاپ) تهیه کنن!

آمار جالب درباره بکاپ :
✅ ۳۰٪ افراد هیچ‌وقت از اطلاعاتشون بکاپ نمی‌گیرن!
✅ ۲۹٪ از مواقع، از دست دادن داده‌ها به دلیل خطای انسانی اتفاق می‌افته!
✅ ۱۱۳ تلفن در دقیقه گم یا دزدیده می‌شن! 📱
✅ ۶۰٪ از شرکت‌هایی که اطلاعات مهمشون رو از دست میدن، طی ۶ ماه تعطیل میشن!

📌 امروز وقتشه که یه بکاپ از اطلاعات مهمت بگیری و خیال خودتو راحت کنی! 😉💾

بخونید جالبه
The difference between a $120K developer and a $250K tech lead isn't coding skills.

It's this one thing:

Communication.

Specifically, how you translate technical concepts into business value.
I've watched brilliant coders get stuck at mid-level while others with average technical skills zoom past them into leadership roles.

The secret? Senior developers understand that leadership doesn't speak "code" - they speak business outcomes.

Let me show you what this looks like:
JUNIOR DEV: "We need to refactor our authentication service because the JWT implementation has significant technical debt. The current singleton pattern is causing memory leaks."
[Leadership's reaction: blank stares, immediate mental checkout]

SENIOR DEV: "Our user login system is at risk of failing during peak traffic, which could cost us $20K per hour in lost transactions. I've identified a two-week solution that would prevent these outages AND reduce our AWS costs by 15% monthly."
[Leadership's reaction: immediate prioritization and resources]

After observing successful senior devs, I've identified their 3-part "Business Translation Framework":
1️⃣ Business Impact First - Always lead with cost, revenue, risk, or time savings
2️⃣ Stakeholder-Specific Language - Executives care about strategy, PMs care about features, designers care about user experience
3️⃣ Visual Simplification - Use analogies and simple diagrams ("Our current architecture is like a single-lane highway during rush hour")

The truth is, your technical expertise only matters if others understand its value. The career multiplier isn't writing more code - it's communicating that code's value to decision-makers.

#js

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

🔴<CodeHub/>

یه ویدئوی عالی درباره‌ی نحوه کار Event Loop، Web APIs و Task Queue در جاوااسکریپت که خیلی جالب بود!

https://youtu.be/eiC58R16hb8?si=rFgZIo_I0Lh3rQ03

🔴<CodeHub/>

جاوااسکریپت یک زبان تک‌ترد است، به این معنی که در هر لحظه فقط می‌تواند یک عملیات را اجرا کند. برای مدیریت عملیات‌های غیرهم‌زمان (asynchronous)، مفاهیمی مانند حلقه رویداد (Event Loop)، وب APIها (Web APIs) و صف‌های وظیفه (Task Queues) در این زبان وجود دارند.

پشته فراخوانی (Call Stack): محل ذخیره‌سازی توابعی است که قرار است اجرا شوند. هر زمان که تابعی فراخوانی می‌شود، به بالای پشته افزوده می‌شود و پس از اتمام اجرا، از پشته خارج می‌شود.

وب APIها (Web APIs): مرورگرها مجموعه‌ای از APIها را فراهم می‌کنند که امکان انجام عملیات‌های غیرهم‌زمانی مثل تایمرها (setTimeout)، درخواست‌های شبکه‌ای (fetch) و مدیریت رویدادها را می‌دهند. این عملیات‌ها خارج از پشته فراخوانی و در محیط مرورگر انجام می‌شوند.

صف وظایف (Task Queue): زمانی که یک عملیات غیرهم‌زمان به پایان می‌رسد، تابع بازگشتی آن در صف وظایف قرار می‌گیرد تا زمانی که پشته فراخوانی خالی شود، در نوبت اجرا قرار گیرد.

حلقه رویداد (Event Loop): مکانیزمی است که به‌طور مداوم بررسی می‌کند آیا پشته فراخوانی خالی است یا خیر. اگر خالی باشد، اولین تابع از صف وظایف را به پشته اضافه کرده و اجرا می‌کند. این فرایند به جاوااسکریپت این امکان را می‌دهد که عملیات‌های غیرهم‌زمان را مدیریت کند و یک رابط کاربری پاسخ‌گو ایجاد نماید.

صف میکروتسک‌ها (Microtask Queue): این صف حاوی وظایفی با اولویت بالاتر است، مانند توابع بازگشتی مربوط به Promiseها. حلقه رویداد ابتدا تمام میکروتسک‌ها را قبل از پردازش تسک‌های عادی از صف وظایف اجرا می‌کند.

🔴<CodeHub/>

‏من کتاب مهندسی پرامپت گوگل که چند روزه وایرال شده رو به فارسی ترجمه کردم و گذاشتم روی گیتهاب.

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

بخونین و به اشتراک بذارید
https://teal33t.github.io/prompt-engineering/

@DevTwitter | <Saman/>

برخلاف نظرات این همه آدم مبنی بر یاد نگرفتن Programming حالا نظر مدیر عامل GitHub برعکس هست، میگه از دوران کودکی باید Programming در مدرسه آموزش داده بشه چون آینده در اختیار Software خواهد بود و هرکسی میتونه وارد این فضا بشه و با AI این امکان راحت تر شده.

https://www.youtube.com/watch?v=5UhnQ2h-5BY

@DevTwitter | <Max Shahdoost/>

🔥 یه ابزار خفن برای دولوپرای React!
اگه می‌خوای بدون دردسر بفهمی کدوم کامپوننت‌ها توی پروژه‌ت باعث کندی شدن اپ شدن، React Scan رو از دست نده!

🧠 چی کار می‌کنه؟
ابزار React Scan به‌صورت خودکار مشکلات پرفورمنس رو توی اپ Reactت شناسایی می‌کنه. لازم نیست هیچ تغییری تو کدت بدی یا دیباگرهای پیچیده استفاده کنی. فقط اسکریپتش رو بذار، خودش باقی کارا رو انجام می‌ده 😎

✅ بدون نیاز به تغییر کد
✅ کامپوننت‌هایی که نیاز به بهینه‌سازی دارن رو هایلایت می‌کنه
✅ با همه‌چی سازگاره: Next.js، Vite، Remix و حتی با یه تگ ساده <script> توی HTML هم راه می‌افته!

دموی آنلاینشم داره،
🧪 لینک دمو

🔵 <CodeHub/>

این کتابخونه ی FastAPI-MCP خیلی کار و آسون کرده..

یه نگاهی بش بندازین، باش می‌تونین به‌صورت خودکار تمام endpoint‌هاتون رو به ابزار MCP تبدیل کنین

لینکش:
https://github.com/tadata-org/fastapi_mcp

@DevTwitter | <Sam92/>

تفاوت بین SSR, CSR, SSG و ISR : بررسی دقیق و کاربردی

بعضی وقتا توی دنیای وب، وقتی میخوایم سایت‌هامون رو بسازیم، با اصطلاحاتی مثل SSR، CSR، SSG و ISR روبه‌رو میشیم. اما اینا چیا هستن و چه تفاوت‌هایی با هم دارن؟ 🤔

🔸 (رندر سمت کلاینت) CSR :

در این روش، محتوا در مرورگر کاربر با استفاده از جاوا اسکریپت رندر میشه. در اینجا، سرور فقط داده‌های خام رو میفرسته و بارگذاری صفحه با استفاده از جاوا اسکریپت و استایل‌ها در مرورگر کاربر اتفاق میفته. این روش برای اپلیکیشن‌های پیچیده و با محتوای پویا مناسب‌تره، ولی یه مشکل اصلی داره: SEO به خاطر اینکه موتورهای جستجو نمی‌تونن محتوای جاوا اسکریپت رو درست ایندکس کنن.

🔸 (رندر سمت سرور) SSR :

این روش یه مزیت بزرگ برای سئو داره چون محتوای HTML قبل از ارسال به مرورگر روی سرور رندر میشه. یعنی سرور مسئولیت ساخت محتوای صفحه رو بر عهده می‌گیره و به کاربر یک صفحه کامل و آماده میده. البته بار سرور بالا میره و ممکنه واکشی داده‌ها زمان‌بر بشه.

🔸 (تولید سایت ایستا) SSG :

در این روش، تمام صفحات سایت در زمان ساخت به صورت HTML ایستا رندر میشن. این یعنی صفحات از قبل آماده‌سازی میشن و وقتی کاربر درخواست میده، سریع بهش داده میشه. این استراتژی برای سایت‌هایی که نیاز به محتوای ثابت دارن عالیه، چون بارگذاری خیلی سریع‌تره و امنیت بیشتره.

🔸(بازسازی استاتیک افزایشی) ISR :

این روش ترکیبی از SSR و SSG هست. یعنی میشه صفحات ایستا رو پیش از زمان ساخت آماده کرد و به‌طور دوره‌ای صفحات خاصی رو با داده‌های جدید به‌روز کرد. این مدل برای سایت‌هایی که هم نیاز به سرعت بالا و هم نیاز به داده‌های به‌روز دارند، بهترین گزینه است.

🕔 زمان مناسب استفاده از هر کدوم:

🔹 (رندر سمت کلاینت) CSR: برای اپلیکیشن‌های پیچیده و پویا

🔹 (رندر سمت سرور) SSR: برای سایت‌هایی که نیاز به SEO بالا و سرعت بارگذاری اولیه دارند

🔹 (تولید سایت ایستا) SSG : برای سایت‌های ثابت و کم تغییر

🔹 (بازسازی استاتیک افزایشی) ISR : برای سایت‌هایی که نیاز به محتوای ثابت و به‌روز دارند بدون نیاز به استقرار مجدد


🔵 <CodeHub/>

اگر از Git استفاده می‌کنید، احتمالاً با gitignore. آشنا هستید. ولی یه فایل دیگه هم هست به اسم exclude
حالا این دوتا چه فرقی دارن؟

gitignore.
این فایل توی ریشه‌ی پروژه‌ است و برای نادیده گرفتن فایل‌هایی استفاده میشه که همه‌ی اعضای تیم نباید پیگیری‌شون کنن. خودش هم commit میشه و داخل repo میمونه.

exclude
مسیرش توی git/info/exclude. هست و فقط روی سیستم شخصی شما تأثیر داره. ایده‌آله برای فایل‌هایی که فقط خودت نمی‌خوای track بشن، بدون اینکه توی repo دیده بشن.

پس اگر فایل لوکال خاصی داری و نمی‌خوای توی gitignore. بذاری، برو سراغ exclude

@DevTwitter | <Amir Mohammad Rezvaninia/>

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

🆔 @IranCoderz | 👩‍💻🧑‍💻

🚀 فایرفاکس سورس‌کدش رو پابلیک کرده!
می‌خوای ببینی یه مرورگر واقعی چجوری ساخته می‌شه؟
https://github.com/mozilla-firefox/firefox