Deep Devs | فرانت اند | بک اند | جاوااسکریپت | برنامه نویسی

#javascript

✌️رست اپراتور (Rest operator) یک ویژگی از اکما اسکریپت ۶ هستش که به برنامه‌نویسان این امکان رو میده تا تعداد زیادی از آرگومان‌ها را به عنوان یک آرایه در تابع یا متد دریافت کنیم. این اپراتور با سه نقطه (...) استفاده میشه

‼️ مثال استفاده از Rest Operator:

// تابعی که تعداد زیادی عدد را جمع می‌کند
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2)); // Output: 3
console.log(sum(1, 2, 3, 4)); // Output: 10
console.log(sum(1, 2, 3, 4, 5)); // Output: 15

Channel | Group | YouTube

Please open Telegram to view this post

VIEW IN TELEGRAM

👍14🔥2

2.93K viewsᎷᏫᎻᎪᎷᎷᎪᎠ, 10:38

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

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

YouTube

تست و بررسی درگاه پرداخت با استفاده از Postman و زدن خرید فیک برای تست و بررسی

🔥14❤‍🔥4❤2😁1

3.15K viewsAmir Nobari, 13:21

#javascript

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

3K viewsᎷᏫᎻᎪᎷᎷᎪᎠ, 10:29

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

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

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

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

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

Channel | Group | YouTube

❤38👍7🔥2😎2❤‍🔥1

7.33K viewsReza Shirali, edited 16:21

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

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

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

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

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

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

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

Channel | Group | YouTube

👍17❤4

3.46K viewsedited 09:53

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

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

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

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

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

Channel | Group | YouTube

❤9👍1

3.28K viewsedited 19:02

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

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

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

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

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

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

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

npm init @eslint/config@latest

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

#ESLint #JavaScript

Channel | Group | YouTube

👍12❤3👌2

3.73K viewsedited 16:16

سرعت بی نظیر در کامپایل کد با #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

👍7👌1🤝1😎1

4.7K viewsedited 11:19

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

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

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

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

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

#JavaScript #Memento

Channel | Group | YouTube

👍6❤5

5.18K views13:36

⭐️ ساختار پروژه (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

🔥22👍5❤4❤‍🔥3👌1

4.38K viewsHossein, 09:20

About

Blog

Apps

Platform