🚀 Custom Elements در JavaScript

Custom Elements بهت اجازه می‌ده المان‌های HTML سفارشی بسازی و رفتارشون رو کنترل کنی! 😍

### 🛠 نمونه ساده:

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.shadowRoot!.innerHTML = `<button>Click Me!</button>`;
  }
}

customElements.define("my-button", MyButton);

حالا توی HTML می‌تونی اینو استفاده کنی:

<my-button></my-button>

✅ سبک، سریع و قابل استفاده در همه فریمورک‌ها!

🔗 منبع: MDN – Custom Elements

@NextPro_Ch

خسته شدی از نوشتن تایپ‌های دستی توی Next.js؟ 😩

همه ما تو getServerSideProps و getStaticProps بارها تایپ‌ها رو دستی نوشتیم، ولی دیگه وقتشه که Next.js خودش برامون تایپ بسازه! 🎯

با TypeScript و InferGetServerSidePropsType یا InferGetStaticPropsType می‌تونی تایپ خروجی رو اتوماتیک بسازی! 😍

---

✨ دیگه لازم نیست اینجوری بنویسی:

export const getServerSideProps = async () => {
  return { props: { name: "Ali", age: 25 } };
};

type Props = { name: string; age: number }; // 😵‍💫 دستی نوشتن تایپ؟ نه دیگه!

---

🚀 فقط اینو بنویس و راحت باش:

import { InferGetServerSidePropsType } from "next";

export const getServerSideProps = async () => {
  return { props: { name: "Ali", age: 25 } };
};

type Props = InferGetServerSidePropsType<typeof getServerSideProps>; // 🎯 تایپ خودکار!

یا برای getStaticProps:

import { InferGetStaticPropsType } from "next";

export const getStaticProps = async () => {
  return { props: { posts: ["Post 1", "Post 2"] } };
};

type Props = InferGetStaticPropsType<typeof getStaticProps>; // 🎉 تایپ آماده!

---

💡 نتیجه؟
✅ بدون دردسر، تایپ دقیق داری!
✅ خطایابی بهتر و دیباگ راحت‌تر 🛠
✅ همیشه تایپ‌ها به‌روز می‌مونن 🔥

دیگه وقتشه که از این روش استفاده کنی و Next.js رو تایپ‌سیف‌تر کنی! 😎

#NextJS #TypeScript #InferType

@NextPro_Ch

معرفی ag-grid-react برای توسعه‌دهندگان React 😍

کتابخانه ag-grid-react یک کتابخانه قدرتمند و حرفه‌ای برای نمایش و مدیریت داده‌ها در قالب جدول (Grid) در برنامه‌های React است. این کتابخانه با امکانات پیشرفته‌ای مانند مرتب‌سازی، فیلتر کردن، صفحه‌بندی، ویرایش سلول‌ها و پشتیبانی از داده‌های بزرگ، یکی از بهترین گزینه‌ها برای ساخت جداول تعاملی و پویا است.

🟢 ویژگی‌های کلیدی:

🔹 سازگاری با اکثر کتابخانه و فریم‌ورک ها: #Reactjs, #VueJS, #AngularJS
🔹انعطاف‌پذیری: امکان شخصی‌سازی ظاهر و رفتار جدول.
🔹 کارایی بالا: حتی با داده‌های حجیم به‌صورت بهینه عمل می‌کند.

🚀 امکانات پیشرفته: مانند گروه‌بندی داده‌ها، درخت داده‌ها، و قابلیت‌های کشیدن و رها کردن (Drag & Drop).

نصب:

npm i ag-grid-react

📚 لینک داکیومنت این کتابخانه

@NextPro_Ch 🚀

🚀 کتابخونه Zustand: مدیریت State ساده و بهینه در React

کتابخونه Zustand یه کتابخونه سبک، سریع و ساده برای مدیریت state در React.js هست که جایگزین خیلی خوبی برای Redux و Context API محسوب می‌شه.

🎯 چرا Zustand؟

✅ کدنویسی ساده: بدون boilerplate اضافی
⚡ عملکرد سریع: فقط کامپوننت‌های لازم رندر می‌شن
🔗 بدون Provider: نیازی به wrapper اضافی نداره

🔥 نصب و استفاده سریع

// Installation ✅👇
npm install zustand

// Use 
import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const { count, increase } = useStore();
  return <button onClick={increase}>Count: {count}</button>;
}

✅ کتابخونه Zustand یه انتخاب عالی برای مدیریت state سریع و ساده تو React هست!

@NextPro_Ch

کتابخانه ECharts: کتابخانه ای ساده و قدرتمند برای ساخت نمودارهای تعاملی

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

چرا ECharts؟
- سادگی و انعطافپذیری: با تنظیمات ساده، میتوانید انواع نمودارها (میله ای، خطی، دایره ای، نقشه و ...) را ایجاد کنید.
- تعاملی بودن: کاربران میتوانند روی نمودارها زوم کنند، دادهها را بررسی کنند و حتی انیمیشنهای جذاب ببینند.
- سازگاری: با فریمورکهایی مثل React، Vue و Angular به راحتی کار میکند.
- داکیومنت کامل: مستندات شفاف و مثالهای متعدد، یادگیری و استفاده را آسان کرده است.

کاربردهای ECharts
- ساخت دشبوردهای مدیریتی
- نمایش دادههای تحلیلی در وبسایتها
- ایجاد گزارشهای تعاملی و گرافیکی

برای شروع، کافیست به وبسایت رسمی Echarts مراجعه کنید و با چند خط کد، اولین نمودار خود را بسازید! 🚀

#JavaScript

@NextPro_Ch 🚀

کتابخانه dnd-kit: یک کتابخانه مدرن برای Drag & Drop در رابط کاربری ⚡️

اگر به دنبال پیادهسازی قابلیت Drag & Drop در پروژههای React خود هستید، @dnd-kit/core یک انتخاب ایده آل است! این کتابخانه سبک، مدرن و قابل تنظیم، به شما امکان میدهد المانهای رابط کاربری را به راحتی جابه جا کنید و تجربه کاربری تعاملی ایجاد کنید.

چرا dnd-kit؟ 🤔

✅ سادگی و انعطافپذیری: با API ساده و قابل درک، قابلیت Drag & Drop را به راحتی پیادهسازی کنید.

✅ پرفورمنس بالا: بهینه شده برای عملکرد سریع و روان.

✅ سازگاری: با تمامی کامپوننتهای React کار میکند.

✅ قابلیت سفارش سازی: تنظیم رفتارها و استایلهای دلخواه.


💻 لینک وبسایت رسمی و مشاهده Demo ها


@NextPro_Ch 🚀

کتابخونه Ant Design: سیستم طراحی جامع برای توسعه رابط کاربری حرفه‌ای

کتابخانه Ant Design یک کتابخانه UI کامپوننت‌محور و سیستم طراحی (Design System) است که برای ساخت رابط‌های کاربری زیبا، حرفه‌ای و یکپارچه در پروژه‌های وب و اپلیکیشن‌ها استفاده می‌شود. این کتابخانه توسط شرکت چینی Ant Financial (بخشی از گروه Alibaba) توسعه یافته و به یکی از محبوب‌ترین ابزارهای طراحی UI در جهان تبدیل شده است.

چرا Ant Design؟ 🚀
کامپوننت‌های آماده و حرفه‌ای:
بیش از ۵۰ کامپوننت از پیش ساخته‌شده (مثل Table، Form، Modal، DatePicker و ...).

یکپارچگی و سازگاری:
طراحی یکپارچه و استاندارد برای رابط‌های کاربری حرفه‌ای.

سفارشی‌سازی آسان:
امکان تغییر تم (Theming) و تنظیم استایل‌ها با استفاده از Less یا CSS Variables.

اکوسیستم گسترده:
ابزارهای جانبی مثل Ant Design Pro و Ant Motion.

ویژگی‌های کلیدی 🔑
🔹 واکنش‌گرا (Responsive): سازگاری با دستگاه‌های مختلف.
🔹 دسترسی‌پذیری (A11Y): رعایت استانداردهای WCAG.
🔹 داکیومنت جامع: مستندات کامل با مثال‌های گام‌به‌گام.

💻 مشاهده کامپوننت ها و مستندات

@NextPro_Ch 🚀

🎯 پکیج clsx چیست و چه کاربردی دارد؟

کتابخانه clsx یک ابزار سبک و کارآمد در اکوسیستم جاوااسکریپت است که برای مدیریت حرفه‌ای کلاس‌های CSS در پروژه‌های مدرن، به‌ویژه با فریم‌ورک‌هایی مانند React، طراحی شده است. این پکیج امکان ترکیب پویا و شرطی کلاس‌ها را فراهم می‌کند و به توسعه‌دهندگان کمک می‌کند تا کدهایی تمیزتر و بهینه‌تر بنویسند.

✨ ویژگی‌ها و کاربردها:

مدیریت کلاس‌ها بر اساس شرایط منطقی
سازگاری با ساختارهای متنوع (رشته، آرایه، آبجکت)
افزایش سرعت و کارایی در رندرینگ
📋 نمونه کد:

import clsx from 'clsx';
const className = clsx('btn', { active: isActive, disabled: !isEnabled });

در این مثال، کلاس‌ها تنها در صورت برقراری شروط اعمال می‌شوند.

💡کتابخانه clsx انتخابی ایده‌آل برای توسعه‌دهندگانی است که به دنبال ساده‌سازی و حرفه‌ای‌تر کردن پروژه‌های خود هستند. 🧑🏻‍💻


@NextPro_Ch 🚀

🧑‍💻 شورت‌هند ایجاد فرم‌دیتا.

اگر شماهم از نوشتن و ایجاد مکرر FormData خسته شده‌اید, می‌توانید با روش داخل تصویر, در عرض چند ثانیه یک فورم‌دیتا ایجاد کنید و به سمت سرور ارسال کنید :)

#Tip #FormData #JavaScript #Reactjs #Nextjs

@NextPro_Ch 🚀

📢 ابزار جدید و قدرتمند برای توسعه‌دهندگان!

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

🔗 قابلیت‌ها: ساخت انیمیشن‌های سبک، سازگار با انواع فریم‌ورک‌ها

💡 کتابخونه animate-ui.com انتخابی هوشمندانه برای توسعه‌دهندگانی است که به دنبال ارتقای کیفیت UI با انیمیشن‌های حرفه‌ای هستند. 🧑🏻‍💻

#shadcn #UI #UX #reactjs #Nextjs #Javascript

@NextPro_Ch 🚀

🌟 معرفی رسمی Supabase UI - تازه‌وارد قدرتمند دنیای توسعه! 🚀

ابزار جدید Supabase UI به‌تازگی عرضه شده و برای توسعه‌دهنده‌ها و طراح‌هایی که دنبال یه راه‌حل مدرن هستن، گزینه جالبیه.

✨ ویژگی‌ها در یک نگاه:

رابط کاربری آماده و قابل تنظیم 🖌
طراحی ساده و کاربردی برای پروژه‌های مختلف ⚙️
💻 تازه اومده و اگه دنبال یه ابزار جدید برای تست کردن هستید، بد نیست نگاهی بهش بندازید.

👈🏻 اطلاعات بیشتر: supabase.com/ui

#SupabaseUI #توسعه_وب #ابزار_جدید

@NextPro_Ch 🚀

🌐 معرفی: HeroUI Chat - ایده‌ت رو به کد تبدیل کن 🧑🏻‍💻

هوش مصنوعی HeroUI Chat (heroui.chat) یه ابزار هوش مصنوعیه که با کتابخونه HeroUI کار می‌کنه. فقط بگو چی می‌خوای یا یه عکس بده، کد React آماده و تمیز تحویلت می‌ده.

✨ چیکار می‌کنه؟

ایده یا اسکرین‌شات رو به کامپوننت‌های React با Tailwind CSS تبدیل می‌کنه.
سریع، مدرن و قابل تغییره.
وقتت رو برای ساخت UI اولیه آزاد می‌کنه.
💻 برای ProtoType، بازسازی UI یا تولید سریع کامپوننت عالیه.

#HeroUIChat #React #هوش_مصنوعی

@NextPro_Ch 🚀

انعطاف‌پذیری - مهارتی که کریر تو رو نجات می‌ده! 🌿

وقتی پروژه آخر شب عوض میشه یا تکنولوژی جدید میاد...

🔹 چطور انعطاف‌پذیر باشیم؟
✅ ذهنیت Growth Mindset رو پرورش بده
✅ از تغییرات نترس (هر تغییر = فرصت جدید)
✅ تاب‌آوری رو تمرین کن


🔥 جمله کلیدی:
"در دنیای تکنولوژی، تنها ثابت‌ها، تغییرات هستند!"

#انعطاف‌پذیری #رشد_شغلی #توسعه_دهنده
🎯 @NextPro_Ch

کتابخونه React Email - رفیق مشکل‌گشای ایمیل‌های ریاکتی 📧
با کامپوننت‌های آماده، ایمیل رو مثل آب خوردن بساز!
دیگه با HTML قدیمی کلنجار نرو!
🔗 react.email
#توسعه_وب #ریاکت #کامپوننت
🔥 @NextPro_Ch

🌚نکست و گودرت هاش

به نظر شما از چه ابعادی بزرگتر بهتره از بک‌اند اکسترنال استفاده کنیم؟ 🤔

#NextJS #Backend #ExternalAPI #ServerActions
#fun

@NextPro_Ch

:واکنش v0.dev وقتی می‌خوای یه UI بسازی اما تنبلی! 🛋️😂
(طنز + کاربرد واقعی)

📌 هوش مصنوعی v0.dev – "دستیار شخصیِ تنبل‌های حرفه‌ای!"
🔹 یه توضیح متنی بده (مثلاً: "یه دکمه آبی با انیمیشن hover باحال")
🔹 این هوش مصنوعی مثل پیتزای داغ یه UI آماده تحویلت میده!
🎯 دیگه بهانه‌ای برای شروع پروژه نداری... 🚀
🔗 v0.dev
@NextPro_Ch

تفکر انتقادی - سلاح مخفی توسعه‌دهندگان! 💡

وقتی همه دارن با flow کد می‌زنن، تو یه سوال بپرس:
«آیا این بهترین راه حل ممکنه؟»

🔹 چرا مهمه؟

جلوی باگ‌های آینده رو می‌گیره

کد تمیزتر و قابل نگهداری‌تر میشه

تو رو از بقیه متمایز می‌کنه

🔹 چطور تقویتش کنم؟

قبل از کد زدن، ۵ دقیقه فکر کن

از همکارت بازخورد بخواه

راه‌حل‌های جایگزین رو بررسی کن

🔥 جمله چالش‌برانگیز:
"مهارت‌های سخت تو رو استخدام می‌کنن، مهارت‌های نرم تو رو ارتقا می‌دن!"

#مهارت_های_نرم #توسعه_دهنده #حرفه_ای
🎯 @NextPro_Ch

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

اگه تقویت نشه ، خدماتی که اون بیزینس/ دولپر ارائه میده رو کسی استفاده نمیکنه و در نهایت بی بهره میمونه 🎩

در آینده مانور ویژه ای بر این موضوع خواهیم داشت 🧑‍💻✅

#مهارت_های_نرم #توسعه_دهنده #حرفه_ای
🎯 @NextPro_Ch

🎙️چونش رو شما بگید 😁
#fun
🎯 @NextPro_Ch