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

@maloomnisttt امیدوارم به دردتون بخوره اگر شما هم چیزی دارید برام بفرستید که اونجا بذارم که بقیه هم استفاده بکنن

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

افراد علاقه‌مند به علوم کامپیوتر و برنامه‌نویسی 👇 📚 دوره CS50x 2026 – دانشگاه هاروارد این دوره تازه شروع شده و می‌تونید از همین حالا قدم‌به‌قدم همراهش پیش برید. دوره CS50x یکی از معروف‌ترین و معتبرترین دوره‌های مقدماتی علوم کامپیوتر در دنیاست که به‌صورت رایگان منتشر می‌شه و مستقیماً توسط هاروارد ارائه می‌شه. مباحث دوره شامل: تفکر الگوریتمی و حل مسئله برنامه‌نویسی با C، Python و JavaScript ساختار داده‌ها مفاهیم پایه وب (HTML و CSS) 🎯 مناسب برای: مبتدی‌ها کسانی که می‌خوان پایه‌ی محکم و اصولی در CS بسازن ▶️ می‌تونید ویدیوهای دوره رو مستقیم از چنل یوتیوب خودشون تماشا کنید: https://youtube.com/playlist?list=PLhQjrBD2T380hlTqAU8HfvVepCcjCqTg6

📌سایت Patterns.dev — مرجع رایگان برای وب‌اپ‌های مدرن سایت Patterns.dev یه سایت آموزشی برای کسانیه که با JavaScript و React کار می‌کنن. این سایت الگوهای طراحی، رندرینگ و بهینه‌سازی عملکرد رو به صورت ساده و عملی توضیح می‌ده تا مشکلات رایج توسعه وب راحت‌تر حل بشه. با استفاده از Patterns.dev می‌تونی ساختار پروژه‌هات رو مرتب کنی، کد تمیزتری بنویسی و پروژه‌هایی بسازی که نگهداری و توسعه‌شون راحت‌تر باشه. 📎 https://www.patterns.dev/

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

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

#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