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

کریسمس دیگه چه صیغه ایه، یلدای خودمونو بچسب یلداتون مبارک رفقا ✌️❤️

شب یلدا مبارک 🌙 امیدوارم شب یلداتون کنار آدمای دوست‌داشتنی، با حال خوب و دل آروم بگذره.

#meme بیاید اعتراف کنید ببینیم کدوماتون اینجوری میشینید 😂😂 Channel | Group | YouTube

گاهی اوقات وسط پروژه می‌فهمی که console.log دیگه جواب نمی‌ده 🤯 خطاها گم می‌شن، لاگ‌ها قاطی می‌شن و درست وقتی بهشون نیاز داری، هیچ‌چی سر جاش نیست. اینجاست که Winston وارد بازی می‌شه یه لایبرری لاگ‌گیری برای Node.js که کمک می‌کنه لاگ‌ها رو هدفمند، دسته‌بندی‌شده و قابل‌ردگیری ثبت کنی . با Winston می‌تونی: لاگ‌ها رو سطح‌بندی کنی (info، warn، error و …) 🎯 مشخص کنی لاگ‌ها کجا برن: فایل، کنسول، دیتابیس یا هرجای دیگه 🗂️ فرمت لاگ‌ها رو استاندارد و تمیز نگه داری 🧹 توی production بفهمی دقیقاً «چی، کِی و کجا» خراب شده 🔍 اگه پروژه‌ت قراره جدی بشه و فقط برای تمرین نیست، لاگ‌گیری حرفه‌ای آپشن نیست، ضرورته و Winston یکی از انتخاب‌های مطمئن برای این کاره 💡 Channel | Group | YouTube

🚨 آسیب‌پذیری بحرانی در 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

گاهی لازم نیست دنبال یه عکس خاص بگردی. همین که یه تصویر رندوم داشته باشی کارتو راه می‌ندازه. سایت Unsplash یه قابلیت خیلی باحال داره: می‌تونی فقط با یه لینک، هر بار یه عکس تصادفی بگیری. مثلاً این لینک: http://source.unsplash.com/random/1200x600 هر بار که صفحه رو رفرش کنی یه عکس جدید با سایز ۱۲۰۰×۶۰۰ میده. از این چیزها شاید به‌نظر ساده بیان، ولی تو بعضی پروژه‌ها مخصوصاً وقتی نمی‌خوای درگیر انتخاب تصویر واقعی بشی واقعاً نجات‌دهنده‌ان. فقط یه نکته: GitHub این لینک‌ها رو کش می‌کنه و همیشه عکس جدید نشون نمی‌ده. ولی هر جایی که کش نکنه، کاملاً درست کار می‌کنه. Channel | Group | YouTube

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

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

بعد از کلون شدن هم مخزن دقیقاً روی همون برنچ باز میشه؛ بدون نیاز به checkout اضافه. 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

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

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

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

میگن نحوه چیدن مانیتورا شخصیت آدمو مشخص می‌کنه! خب… شما کدومش هستید؟ 🤔 Channel | Group | YouTube

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

این ریپازیتوری گیت‌هاب یکی از کامل‌ترین مجموعه‌های منابع مربوط به Micro Frontends را یک‌جا جمع کرده؛ از وب‌سایت‌ها و بلاگ‌ها گرفته تا ویدیوها، کتاب‌ها و دوره‌ها. اگر قصد داری معماری مایکروفِرانت‌اند را اصولی و مرحله‌به‌مرحله یاد بگیری، این لیست می‌تواند یک نقطه شروع محکم و قابل اتکا باشد. 🔗 لینک ریپو: https://github.com/billyjov/microfrontend-resources Channel | Group | YouTube

تا حالا شده تو یه سایت المان‌هایی ببینی که می‌تونی با موس یا انگشت بکشی و جابه‌جا کنی؟ این قابلیت رو می‌شه با یه کتابخونه جاوااسکریپت به اسم Interact.js ایجاد کرد. حتی یه جور حس واقعی حرکت هم به المان‌ها می‌ده؛ مثلا وقتی رهاشون می‌کنید کمی به حرکتشون ادامه می‌ده یا به المان‌های دیگه می‌چسبه. اگر دوست داری ببینی چطور می‌شه باهاش کارهای مختلف ساخت و نحوه استفاده‌ش چیه، سایتش پر از مثال و راهنماست: interactjs.io Channel | Group | YouTube

برید به chatgpt بگید :

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

و جوابی که داد رو کامنت کنید

🚀 رزومه ساز حرفه ای با 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

🚀 نسل جدید ساخت اپلیکیشن‌ها: Tauri اگه تا حالا با Electron کار کردی، احتمالاً می‌دونی ساخت اپ دسکتاپ با HTML، CSS و JS چقدر راحت و جذابه. اما یه مشکل همیشگی هست:

📦 اپ‌ها خیلی سنگین می‌شن، رم زیاد مصرف می‌کنن و گاهی کند عمل می‌کنن 😕 اینجاست که Tauri وارد می‌شه ✨ یه فریم‌ورک مدرن، سریع و فوق‌العاده سبک برای ساخت اپلیکیشن‌های دسکتاپ که از قدرت Rust برای قسمت بک‌اند و از تکنولوژی‌های وب برای رابط کاربری استفاده می‌کنه!

🔹 چرا Tauri محبوب شده؟

✅ حجم خروجی اپ‌ها معمولاً زیر ۱۰ مگابایته 😍 ✅ سرعت و عملکرد عالی (چون Rust پشتشه 🦀) ✅ مصرف رم و CPU خیلی کمتر از Electron ✅ پشتیبانی از React، Vue، Svelte، Solid، و حتی Vanilla JS ✅ امنیت بالا و امکان دسترسی محدود و کنترل‌شده به سیستم ✅ خروجی برای ویندوز، مک و لینوکس

 📊 در عمل یعنی چی؟ یعنی با همون مهارت‌های وب‌ت می‌تونی یه اپ واقعی دسکتاپ بسازی که سبک، امن و زیباست. دیگه لازم نیست برای ساخت اپ سنگین و پرحجم، سراغ Electron بری Channel | Group | YouTube