#javascript


اپراتور ?? یکی از ویژگی‌های جدیدیه که تو ورژن‌های جدید جاوااسکریپت (JavaScript) اضافه شده. این اپراتور برای بررسی و بازگرداندن یک مقدار پیش‌فرض استفاده میشه، به ویژه زمانی که باید یک مقدار را از یک متغیری برگردانید که null یا undefined باشد.


مثال :

Const num = null;

num = num ?? 10

Console.log(num)

خروجی کد بالا ۱۰ میباشد زیرا متغیر num مقدارش null است


Channel | Group | YouTube

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


https://youtu.be/nyHDaYnI34s?si=jBgoc_m1d5nobDrJ

#javascript

خروجی کد بالا چیست ؟

سلام به همه دوستان✋🏻

یک مشکلی که همه برنامه نویس های تازه کار باهاش سرکار دارند ، فراموش کردن مطالبی هست که یاد گرفتند😢.

اول از همه باید بگم که کاملا یک چیز عادی هست و حتی برنامه نویس های ارشد هم بسیاری از موارد رو یادشون میره🫡

فقط نباید ناامید بشید و مسیر رو ادامه بدید💪🏻

در ادامه یک چیت شیت بامزه از جاوااسکریپت براتون میزارم تا بتونم اکثر موارد مهم جاوااسکریپت رو یکجا داشته باشید تا اگر مطلبی رو یادتون رفت بتونید سریع مرور کنید
#javascript

Channel | Group | YouTube

📊 دوست جدیدت برای ساخت نمودارهای جذاب و تعاملی! ApexCharts.js

📌برای نمایش داده‌ها، ApexCharts.js دقیقاً همون چیزیه که نیاز داری! این کتابخانه جاوا اسکریپت بهت کمک می‌کنه بدون دردسر، نمودارهای شیک و داینامیک بسازی.

🔹 چرا ApexCharts رو امتحان کنیم؟

✅ انواع نمودارهای متنوع مثل خطی، ستونی، دایره‌ای، پراکندگی و…
✅ طراحی واکنش‌گرا، بدون مشکل در موبایل و دسکتاپ
✅ تنظیمات گسترده برای شخصی‌سازی نمودارها
✅ امکان ترکیب چندین نمودار برای نمایش بهتر داده‌ها
✅ کاملاً رایگان و متن‌باز – راحت ازش استفاده کن!

🔹 چند ابزار مکمل که تجربه کار با نمودارها رو بهتر می‌کنن:

✨ یه گزینه عالی برای نمودارهای سبک و سریع Chart.js
✨ برای نمودارهای پیچیده و سفارشی‌سازی‌شده D3.js
✨ ابزار قدرتمند با قابلیت‌های متنوع Google Charts

🔗آدرس وب سایت
تجربه و پیشنهاد شما چیه؟🤔
#charts #Frontend
#JavaScript_library

Channel | Group | YouTube

#React #Form #Survey #WebDevelopment #JavaScript #ReactHookForm #SurveyJS

💡 کتابخانه‌های React برای ساخت فرم و نظرسنجی ها:
📌اگر تو هم از ساخت فرم‌ها و نظرسنجی‌ها توی React خسته شدی، باید بدونی که تنها نیستی! 😅

🔰اما خبر خوب اینه که کتابخانه‌هایی مثل SurveyJS وReact Hook Form به راحتی می‌تونن این کار رو برات ساده کنن. 🚀

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

🔍 روی این لینک بزن تا مقاله اش رو بخونی😉

Channel | Group | YouTube

🚀 چرا #ESLint انقلابی در کیفیت کدهای شما ایجاد می‌کند؟

📌ابزار قدرتمندESLint یه لینتر برای JavaScript هست که کمک می‌کنه کدهای تمیز، خوانا و بدون خطا بنویسی.

💠چرا باید از ESLint استفاده کنیم؟

1⃣کد تمیز و استاندارد: باعث می‌شه کدهای شما قابل فهم‌تر و بدون خطا باشن.
2⃣همکاری بهتر در تیم‌ها: وقتی همه از یه استاندارد مشخص پیروی کنن، کار تیمی راحت‌تر می‌شه.

🔗ویژگی‌های جدید در نسخه ۹:

🔰تنظیمات پیش‌فرضFlat Config
🔰بهینه‌سازی عملکرد، بررسی کد سریع‌تر و دقیق‌تر.

💡چطور شروع کنیم؟

npm init @eslint/config@latest

🛠 یادت باشه: کد خوب، کدیه که بعداً خودت هم بتونی تغییرش بدی! 😉

#ESLint #JavaScript

Channel | Group | YouTube

سرعت بی نظیر در کامپایل کد با #SWC 🚀

🔍 میدونیSWC یه کامپایلر مبتنی بر Rust هستش که سرعتش بی‌نظیره و اینکه جایگزین قدرتمندی برای Babel شده!؟

♻️ دیگه نیازی نیست وقت زیادی برای Build Time صرف کنی، چون SWC با بهینه‌سازی عالی، فرایند کامپایل رو تا چندین برابر سریع‌تر می‌کنه! ⚡

💡 چرا SWC انتخاب بهتریه؟

✅ سرعت بالا – چون با Rust نوشته شده، کامپایل و تبدیل کد رو خیلی سریع انجام می‌ده! 🚀
✅ مصرف کمتر منابع – با بهینه‌سازی فوق‌العاده، نیاز به پردازش سنگین رو کاهش می‌ده. 🎯
✅ سازگاری عالی / از JavaScript و TypeScript پشتیبانی می‌کنه و توی پروژه‌های فرانت‌اند قابل استفاده‌ست! 💻

مقایسه با Babel:

❎میدونی کهBabel به‌خاطر اینکه با JavaScript نوشته شده، سرعتش کمتره.
✅خب SWC با Rust توسعه داده شده؛بهینه و سبکه .
✅راستش SWC تقریباً ۲۰ برابر سریع‌تر از Babel عمل می‌کنه، که یه تفاوت خیلی خوبه! 🔥

🌐اگه دنبال یه راه حل سریع‌تر برای کامپایل جاوااسکریپت هستی، SWC رو امتحان کن و از تجربه‌ی بی‌نظیر سرعت بالا لذت ببر! ⚡🎯


#SWC #Compiler #JavaScript #Frontend

Channel | Group | YouTube

💡چطور از State Loss فرار کنیم؟ الگوی Memento پاسخ می‌دهد!

📱وقتی اپلیکیشن می‌سازی، حفظ وضعیت برنامه (State) خیلی مهمه. مخصوصا برای اینکه قابلیت‌های مثل undo/redo درست کار کنن و کاربر بتونه به راحتی به حالت قبلی برگرده.

🔰الگوی Memento توی جاوااسکریپت بهت این امکان رو میده که حالت شی‌هات رو بدون اینکه جزییات داخلی‌ش رو منتشر کنی، ذخیره و بازیابی کنی. با این روش می‌تونی تاریخچه تغییرات رو مدیریت کنی و ساختار مطمئن بهتری برای اپلیکیشن داشته باشی.

📌این الگو باعث میشه برنامه‌هات قابل اعتمادتر و حرفه‌ای‌تر بشن و تجربه کاربر رو بالاتر ببرن. اگه می‌خوای از دست دادن داده‌ها و وضعیت برنامه جلوگیری کنی، یادگیری و به‌کارگیری Memento یک قدم روبه جلوئه😉

🔗اینجا رو ببین👈 لینک

#JavaScript #Memento

Channel | Group | YouTube

⭐️ ساختار پروژه (Project Structure) در Next.js

🗂️ 1. پوشه‌های سطح بالا (Top-level folders)

- دایرکتوری app: قلب اپلیکیشن؛ جایی‌که مسیرها، صفحات، layout ها و کامپوننت‌ها قرار دارند.
- دایرکتوری pages: روتینگ قدیمی (Pages Router).
- دایرکتوری public: فایل‌های استاتیک (تصاویر، آیکون‌ها، و …).
- دایرکتوری src: اختیاری؛ برای جداسازی کد اپلیکیشن از فایل‌های پیکربندی.

📄 2. فایل‌های مهم سطح بالا (Top-level files)

- فایل next.config.js: تنظیمات Next.js
- فایل package.json: وابستگی‌ها و اسکریپت‌ها
- فایل env. : متغیرهای محیطی
- فایل eslint.config.mjs: پیکربندی ESLint
- فایل tsconfig.json / jsconfig.json: تنظیمات مسیرها و TypeScript/JS

🧭 3. فایل‌های روتینگ

در Next.js از فایل‌های خاصی برای کنترل UI، رندر و رفتار مسیر استفاده میشه:

- فایل page.js: صفحه قابل دسترسی
- فایل layout.js: لایوت مشترک
- فایل loading.js: اسکلت لودینگ
- فایل error.js: مرتبط به خطاهای اپلیکشن
- فایل not-found.js: برای 404
- فایل route.js: برای API endpoint

🧩 4. مسیرهای تو در تو (Nested Routes)

هر پوشه یک بخش از URL را نشان می‌دهد.
مثال: app/blog/authors/page.tsx: مسیر blog/authors/

🔢 5. مسیرهای داینامیک (Dynamic Routes)

- مسیر [slug]: پارامتر تک
- مسیر [slug...]: همه مسیرها (catch-all)
- مسیر [[slug...]]: catch-all اختیاری

🗃️ 6. گروه‌بندی مسیرها (Route Groups)

برای سازماندهی بدون تغییر URL:

app/(marketing)/page.js → URL = /

🔒 7. پوشه‌های خصوصی (folder_)

پوشه‌هایی که با علامت _ شروع می‌شوند، وارد روتینگ نمی‌شوند و برای نگه‌داری:
- تابع‌ها
- یوآی داخلی
- فایل‌های کمکی

#Nextjs #NextjsAppRouter #ProjectStructure #WebDevelopment #Frontend #ReactJS #JavaScript #WebDev #Coding #Programmer #DevCommunity
#LearnNextJS

Channel | Group | YouTube