Deep Devs | فرانت اند | بک اند | جاوااسکریپت | برنامه نویسی | برنامه نویسی وب – Telegram
Deep Devs | فرانت اند | بک اند | جاوااسکریپت | برنامه نویسی | برنامه نویسی وب
9.18K subscribers
657 photos
354 videos
90 files
813 links
اگر با جاوااسکریپت مشکل داری، این چنل مخصوص خودته 🤝

دوبله بهترین دوره های جاوااسکریپت و ریکت دنیا رایگان:
https://news.1rj.ru/str/DeepDevs/2166

تبلیغات و تبادل نداریم

گروه اصلی برای پرسش و پاسخ:
@DeepDevsGpOriginal

گروه چت:
@InstaDevsGp
Download Telegram
Forwarded from Hossein Rezaei Channel
🚀 رزومه ساز حرفه ای با Next.js

سلام دوستان! 👋

امروز میخوام پروژه جدیدم رو باهاتون به اشتراک بذارم. یک رزومه ساز کاملاً رایگان و حرفه ای که با Next.js و TypeScript ساخته شده!

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

🎨 7 تم زیبا و متنوع:
📄 ساختار A4 استاندارد: با صفحه بندی مناسب برای چاپ PDF
🌍 پشتیبانی کامل از فارسی: RTL و فونتهای زیبا
ویرایشگر پیشرفته: با پیش نمایش زنده
📱طراحی واکنشگرا: روی همه دیوایس ها عالی کار میکنه


🛠️ تکنولوژی های استفاده شده:
- Next.js 15 (App Router)
- TypeScript
- Tailwind CSS
- Radix UI
- Lucide Icons


🎯 دو لایوت مختلف:
استاندارد: چند صفحه ای برای رزومه های کامل
مینیمال: تک صفحه ای برای درخواسته ای سریع


🌐 دمو آنلاین:
https://cv-builder-gilt-three.vercel.app

🔗 لینک پروژه:
https://github.com/h3nrzi/cv-builder-nextjs

اگه این پروژه براتون مفید بود، یه بهش بدید و نظراتتون رو بگید!

#NextJS #TypeScript #OpenSource #Resume #CV #Persian #Farsi #WebDevelopment
1🔥204👌4❤‍🔥1
برید به chatgpt بگید :

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

واقع گرایانه این قضیه را توصیف کن و هیچ گونه اغراقی نکن




و جوابی که داد رو کامنت کنید
15
تا حالا شده تو یه سایت المان‌هایی ببینی که می‌تونی با موس یا انگشت بکشی و جابه‌جا کنی؟
این قابلیت رو می‌شه با یه کتابخونه جاوااسکریپت به اسم Interact.js ایجاد کرد. حتی یه جور حس واقعی حرکت هم به المان‌ها می‌ده؛ مثلا وقتی رهاشون می‌کنید کمی به حرکتشون ادامه می‌ده یا به المان‌های دیگه می‌چسبه.

اگر دوست داری ببینی چطور می‌شه باهاش کارهای مختلف ساخت و نحوه استفاده‌ش چیه، سایتش پر از مثال و راهنماست: interactjs.io



Channel | Group | YouTube
26👌1
این ریپازیتوری گیت‌هاب یکی از کامل‌ترین مجموعه‌های منابع مربوط به Micro Frontends را یک‌جا جمع کرده؛ از وب‌سایت‌ها و بلاگ‌ها گرفته تا ویدیوها، کتاب‌ها و دوره‌ها.
اگر قصد داری معماری میکروفرانت اند را اصولی و مرحله‌به‌مرحله یاد بگیری، این لیست می‌تواند یک نقطه شروع محکم و قابل اتکا باشد.

🔗 لینک ریپو:
https://github.com/billyjov/microfrontend-resources



Channel | Group | YouTube
21🔥1
باریستاها دنبال برنامه‌نویس شدن، برنامه‌نویسا دنبال باز کردن کافه. 😂

#fun

Channel | Group | YouTube
137💔9😎6🤯3👍1🆒1
میگن نحوه چیدن مانیتورا شخصیت آدمو مشخص می‌کنه!
خب… شما کدومش هستید؟ 🤔


Channel | Group | YouTube
#git
#trick

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

git clone --depth 1 https://github.com/username/repository.git

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

Channel | Group | YouTube
👌85🔥2❤‍🔥1
⭐️ ساختار پروژه (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👍54❤‍🔥3👌1
Forwarded from ᎷᏫᎻᎪᎷᎷᎪᎠ
#git
#trick

وقتی می‌خوایم پروژه‌ای رو مستقیم از یک برنچ خاص کلون کنیم، لازم نیست کل مخزن رو بگیریم و بعداً سوییچ کنیم.
با این دستور می‌تونیم از همون اول روی برنچ موردنظر کلون کنیم:

git clone --branch branch-name https://github.com/username/repository.git


بعد از کلون شدن هم مخزن دقیقاً روی همون برنچ باز میشه؛ بدون نیاز به checkout اضافه.

Channel | Group | YouTube
8👍2
گاهی لازم نیست دنبال یه عکس خاص بگردی. همین که یه تصویر رندوم داشته باشی کارتو راه می‌ندازه.
سایت Unsplash یه قابلیت خیلی باحال داره: می‌تونی فقط با یه لینک، هر بار یه عکس تصادفی بگیری.

مثلاً این لینک:

https://picsum.photos/1200/600


هر بار که صفحه رو رفرش کنی یه عکس جدید با سایز ۱۲۰۰×۶۰۰ میده.
از این چیزها شاید به‌نظر ساده بیان، ولی تو بعضی پروژه‌ها مخصوصاً وقتی نمی‌خوای درگیر انتخاب تصویر واقعی بشی واقعاً نجات‌دهنده‌ان.

فقط یه نکته: GitHub این لینک‌ها رو کش می‌کنه و همیشه عکس جدید نشون نمی‌ده. ولی هر جایی که کش نکنه، کاملاً درست کار می‌کنه.




Channel | Group | YouTube
👍95😡2🤝1
🚨 آسیب‌پذیری بحرانی در React Server Components (CVE-2025-55182)

در ۲۹ نوامبر ۲۰۲۵ یک آسیب‌پذیری بسیار جدی در React کشف شد که امکان اجرای کد از راه دور بدون نیاز به احراز هویت را فراهم می‌کند.

حتی اگر از Server Functionها استفاده نکنید، تا زمانی که پروژه شما RSC را پشتیبانی می‌کند، احتمال دارد آسیب‌پذیر باشید.

این ضعف با امتیاز CVSS = 10.0 (حداکثر شدت) ثبت شده است.

🛑 پکیج‌های آسیب‌پذیر
🧩 react-server-dom-webpack
🧩 react-server-dom-parcel
🧩 react-server-dom-turbopack

❗️ نسخه‌های درگیر
📌 19.0
📌 19.1.0
📌 19.1.1
📌 19.2.0

🔧 نسخه‌های اصلاح‌شده
19.0.1
19.1.2
19.2.1

📌 چه پروژه‌هایی آسیب‌پذیرند؟
⚡️ پروژه‌هایی که از React Server Components پشتیبانی می‌کنند و از یکی از پکیج‌های آسیب‌پذیر استفاده می‌کنند.

> پروژه‌هایی که سرور ندارند یا از باندلر/فریم‌ورک مرتبط با RSC استفاده نمی‌کنند، تحت تأثیر نیستند.



🛠 فریم‌ورک‌ها و ابزارهای تحت تأثیر
🚀 Next.js
🔀 React Router
🛰 Waku
📦 @parcel/rsc
⚡️ @vitejs/plugin-rsc
🛡 rwsdk

📚 منبع رسمی برای راهنمای آپدیت
https://react.dev/blog/2025/12/03/critical-security-vulnerability-in-react-server-componentsu




Channel | Group | YouTube
18👍2🔥1🤝1
گاهی اوقات وسط پروژه می‌فهمی که console.log دیگه جواب نمی‌ده 🤯
خطاها گم می‌شن، لاگ‌ها قاطی می‌شن و درست وقتی بهشون نیاز داری، هیچ‌چی سر جاش نیست.

اینجاست که Winston وارد بازی می‌شه
یه لایبرری لاگ‌گیری برای Node.js که کمک می‌کنه لاگ‌ها رو هدفمند، دسته‌بندی‌شده و قابل‌ردگیری ثبت کنی .

با Winston می‌تونی: لاگ‌ها رو سطح‌بندی کنی (info، warn، error و …) 🎯
مشخص کنی لاگ‌ها کجا برن: فایل، کنسول، دیتابیس یا هرجای دیگه 🗂️
فرمت لاگ‌ها رو استاندارد و تمیز نگه داری 🧹
توی production بفهمی دقیقاً «چی، کِی و کجا» خراب شده 🔍

اگه پروژه‌ت قراره جدی بشه و فقط برای تمرین نیست،
لاگ‌گیری حرفه‌ای آپشن نیست، ضرورته و Winston یکی از انتخاب‌های مطمئن برای این کاره 💡


Channel | Group | YouTube
15👍4🤝2
#meme


بیاید اعتراف کنید ببینیم کدوماتون اینجوری میشینید 😂😂

Channel | Group | YouTube
😎27👀6👍51💔1
شب یلدا مبارک 🌙
امیدوارم شب یلداتون کنار آدمای دوست‌داشتنی، با حال خوب و دل آروم بگذره.
50
کریسمس دیگه چه صیغه ایه، یلدای خودمونو بچسب

یلداتون مبارک رفقا ✌️❤️
81🤝7👍3😡1
📌سایت Patterns.dev — مرجع رایگان برای وب‌اپ‌های مدرن

سایت Patterns.dev یه سایت آموزشی برای کسانیه که با JavaScript و React کار می‌کنن. این سایت الگوهای طراحی، رندرینگ و بهینه‌سازی عملکرد رو به صورت ساده و عملی توضیح می‌ده تا مشکلات رایج توسعه وب راحت‌تر حل بشه.

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

📎 https://www.patterns.dev/


Channel | Group | YouTube
17👍4❤‍🔥1