امروز می‌خوام در مورد یک آپدیت بزرگ تو دنیای ریکت صحبت کنم که تو مقالات ۲۴ ساعت گذشته حسابی ترند شده و معماری پروژه‌های ما رو تغییر می‌ده: انقلاب React Router v7 و ادغام کاملش با Remix!

(برای دوستانی که تازه‌کار هستن: React Router معروف‌ترین کتابخونه برای ساخت صفحات مختلف تو ریکت هست که اجازه می‌ده کاربر بین صفحاتی مثل "خانه" و "داشبورد" جابجا بشه بدون اینکه کل سایت رفرش بشه. اخیراً تیم سازنده‌ی این ابزار، فریم‌ورک قدرتمند Remix رو هم توسعه دادن و حالا تو نسخه ۷، بهترین قابلیت‌های Remix رو مستقیماً وارد خود React Router کردن!)

وقتی ما روی پروژه‌های پیچیده مثل داشبوردهای امنیتی، پنل‌های مانیتورینگ یا سیستم‌های تحلیل لاگ کار می‌کنیم، یکی از بزرگترین چالش‌ها "آبشار درخواست‌ها" (Network Waterfalls) است. یعنی کامپوننت اول لود می‌شه، بعد دیتای خودش رو می‌گیره، بعد کامپوننت داخلی رندر می‌شه و اونم دیتای خودش رو می‌خواد... و این باعث کندی شدید صفحه می‌شه.

اما با قابلیت‌های جدیدی مثل Loaders و Actions تو React Router v7، ما می‌تونیم قبل از اینکه کاربر حتی وارد صفحه بشه، دیتای مورد نیاز اون مسیر (Route) رو فچ کنیم!

مزایای این تغییر معماری:
۱. سرعت لود شدن صفحات به شدت بالا می‌ره چون دیتا و ظاهر سایت همزمان آماده می‌شن.
۲. مدیریت فرم‌ها و ارسال دیتا به سرور خیلی تمیزتر می‌شه.
۳. نیازی به مهاجرت کامل به یک فریم‌ورک فول‌استک نداریم و می‌تونیم تو همون پروژه‌های کلاسیک ریکت از این قدرت استفاده کنیم.
به نظرم این آپدیت نشون می‌ده که ریکت داره به سمت یکپارچگی بیشتر پیش می‌ره تا دردسرهای کانفیگ ما کمتر بشه.

@DevTwitter | <Reza Khosravi/>

اگه میخواین Qwen 3.8 Max رو تا یک میلیارد توکنبه صورت رایگان داشته باشید و استفاده کنید این TokenRouter لعنتی رو هر چه سریع تر بغل کنید و حسابی شلاق اش بزنین!
https://tokenrouter.com

@DevTwitter | <Javad/>

ورسل یه ابزار جدید داده که میتونید URL سایتتون رو بهش بدید و بهتون میگه چقدر از نظر Agentها قابل دیدن و discoverable عه.
یه پرامپت هم میده که میتونید بدید به ایجنتتون درستش کنه موارد گزارش شده رو.
http://is-agentic.com

@DevTwitter | <Mahdi MirMohamadi/>

مهاجرت بزرگ از ESLint و Prettier به Biome!

ما تو پروژه‌های فرانت‌اند همیشه از ابزارهایی مثل ESLint برای پیدا کردن خطاهای منطقی کد، و از Prettier برای مرتب کردن ظاهر کدها استفاده می‌کنیم. اما چون این ابزارها با خود جاوااسکریپت نوشته شدن، تو پروژه‌های بزرگ و سازمانی خیلی کند می‌شن و موقع ذخیره کردن فایل، چند ثانیه معطلمون می‌کنن.

تو مقالات جدیدی که منتشر شده، تیم‌های بزرگ دارن یکی‌یکی ابزارهای قدیمی رو کنار می‌ذارن و سراغ Biome می‌رن. این ابزارِ جدید که با زبان بسیار سریع Rust نوشته شده، همزمان کار پیدا کردن خطاها (Linting) و مرتب‌سازی (Formatting) رو تو یک پکیج یکپارچه انجام می‌ده.

چرا این ابزار اینقدر سر و صدا کرده؟
- سرعت دیوانه‌وار: کاری که ابزارهای قبلی تو چند ثانیه انجام می‌دن، Biome تو چند میلی‌ثانیه (کمتر از یک پلک زدن) انجام می‌ده!
- خداحافظی با کانفیگ‌های خسته‌کننده: دیگه نیازی نیست ده‌ها فایل کانفیگ و پلاگین برای هماهنگ کردن لینتر و فورمت‌کننده بسازید؛ همه‌چیز تو یک فایل خلاصه و بدون تداخل کار می‌کنه.
- ادغام عالی: به راحتی می‌تونید تو پروژه‌های React و داشبوردهای بزرگتون این ابزار رو جایگزین ابزارهای قبلی کنید و سرعت رو بالا ببرید.

@DevTwitter | <Reza Khosravi/>

این ویدیو رو پیشنهاد میکنم نگاه کنید، خروجی دیزاین یک لندینگ پیج که ۰ تا ۱۰۰ با کلاد انجام شده (با بهترین اسکیل و منابع) در مقایسه خروجی با دیزاینری که از هوش مصنوعی‌های مختلف استفاده کرده.

فرق خروجی‌ها زمین تا آسمون واقعا!

https://www.youtube.com/watch?v=inRonh4mTYQ

@DevTwitter | <Hamzeh Ghoreyshi/>

اگه برای کارهای ساده روی ویدیو نمی‌خواید سراغ نرم‌افزارهای سنگین تدوین برید، این پروژه گیت‌هاب رو ببینید.

ابزار FFmpeg WebCLI یک رابط ساده برای FFmpeg هست که مجموعه‌ای از ابزارهای ویرایش و تبدیل ویدیو رو یک‌جا در اختیارتون می‌ذاره.

باهاش می‌تونید:

- حجم و اندازه ویدیو رو تغییر بدید
- صدا رو از ویدیو جدا کنید
- ویدیو رو فشرده یا به GIF تبدیل کنید
- سرعت پخش رو تغییر بدید
- چند فایل رو با هم ترکیب کنید
- Blur، Loop و افکت‌های مختلف اضافه کنید
- فرمت فایل‌های ویدیویی و صوتی رو تغییر بدید

مزیت اصلیش رابط ساده‌ایه که کار با قابلیت‌های FFmpeg رو راحت‌تر می‌کنه؛ مخصوصاً اگه نمی‌خواید برای هر کار با دستورات ترمینال سروکله بزنید.

لینک گیت‌هاب:
https://github.com/tejaswigowda/ffmpeg-webCLI

@DevTwitter | <Bahram Ghorbani/>

یکی اومده بازی ماین‌کرفت رو آورده توی ترمینال!

ریپو terminal-minceraft از ترکیب یه مرورگر مینیمال داخل ترمینال با نسخه‌ی جاوااسکریپتی ماینکرفت (EaglercraftX) ساخته شده و فریم‌های بازی رو با حدود ۹۰ فریم بر ثانیه مستقیم تو ترمینال رندر می‌کنه. حتی چندنفره هم پشتیبانی می‌کنه؛ دو نفر تو دو تا ترمینال جدا، تو یه دنیای مشترک بازی می‌کنن.

نکته‌ی جذاب‌ترش برای دولوپرها اینه که یه لایه‌ی agent هم داره؛ می‌تونی یه ابزار AI مثل Claude Code رو از طریق MCP وصلش کنی تا خودش بازی کنه، حرکت کنه، بلاک بشکنه، بسازه.

نکته: فقط روی مک و لینوکس کار می‌کنه و نیاز به ترمینالی داره که kitty graphics protocol رو ساپورت کنه (مثل ghostty یا kitty).
بیشتر یه پروژه‌ی خلاقانه و باحاله تا ابزار کاری روزمره، مناسب کسایی که عاشق ترمینال‌ان و دنبال یه چیز فان و گیک می‌گردن.

https://github.com/dcouple/terminal-minceraft

@DevTwitter | <Ladoya/>

مجموعه کامپوننت‌های رابط کاربری برای وب‌سایت‌های فارسی

پروژه PersianLabs UI نسخه‌ای RTL-first و بهینه‌شده از اکوسیستم shadcn/ui است که در کنار کامپوننت‌های اصلی، کامپوننت‌های اختصاصی برای پروژه‌های ایرانی هم ارائه می‌دهد.
شامل بیش از ۷۰ کامپوننت مثل انتخاب استان و شهر، ورودی بانک، تاریخ شمسی، ورودی قیمت، QR Code، چاپ رسید و ابزارهای کاربردی فارسی.
کامپوننت‌ها به‌صورت Copy-Paste و از طریق Registry سازگار با shadcn قابل استفاده‌اند و نیازی به نصب پکیج جداگانه ندارند.

Website:
https://ui.persian-labs.ir/
Github:
https://github.com/persianlabs/ui

@DevTwitter | <TaymaZ/>

یک قالب آماده برای پروژه‌های Django REST Framework

من Technology Stackی که استفاده میکنم معمولاً Python, Django, Django REST Framework, PostgreSQL, Docker, Redis, RabbitMQ, Nginx و موارد مرتبط دیگه هست که خودتون به احتمال زیاد بهتر و بیشتر از من میدونید. یه مشکلی که من همیشه داشتم این بود که در پروژه‌های جدیدی که شروع می‌کردم، همیشه یه سری پیکربندی و تنظیمات مشترک و ثابت وجود داشت که باید اونا رو از اول برای همه پروژه‌ها انجام میدادم و یا این که از پروژه‌های قبلی کپی میکردم.

به طور مثال: ایجاد ساختار منظم برای فایل‌های تنظیمات مربوط به هرکدوم از ابزارهایی که اسمشون رو نوشتم و جداسازی اون‌ها از فایل اصلی تنظیمات جنگو، پشتیبانی از داکر برای محیط‌های توسعه و پروداکشن، تنظیمات مربوط به Code Formatter و غیره. همچنین من در پروژه‌های DRF برای تست معمولاً از ابزار Pytest استفاده می‌کنم و برای بیشتر منظم شدن، اپ‌های پروژه رو داخل دایرکتوری apps قرار میدم.

مدتی قبل تصمیم گرفتم که این مشکل رو برای خودم حل کنم. به این صورت که یه پروژه کلی با تنظیمات مشترک و اولیه ایجاد کنم و در همه پروژه‌های بعدی ازش استفاده کنم و فقط قسمت‌های مورد نیاز رو تغییر بدم و موارد جدید رو بهشون اضافه کنم.

اسم این پروژه رو گذاشتم drf2go و در Github/گیتهاب قرارش دادم که از این به بعد هم خودم و هم هرکس دیگه‌ای که حس میکنه بهش نیاز داره بتونه ازش استفاده کنه و یا در بهتر کردنش به من کمک کنه.
بعضی از ویژگی‌هایی که این پروژه داره و مواردی که پشتیبانی میکنه رو اینجا می‌نویسم و بقیه رو هم خودتون می‌تونید داخل README.md و یا کد منبعش پیدا و مطالعه کنید.

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

بیشتر هدف این بوده که یک Starting Point مناسب برای پروژه‌های Backend با Django و DRF داشته باشیم؛ یعنی قسمت‌هایی که تقریباً در اکثر پروژه‌ها مشترک هستند یک بار به شکل منظم و قابل استفاده مجدد پیاده‌سازی شده باشند و وقتی یک پروژه جدید شروع می‌کنیم، به جای این که چند ساعت یا حتی چند روز رو صرف Setup اولیه کنیم، سریع‌تر به سراغ قسمت اصلی پروژه بریم.
البته این پروژه هنوز جای بهتر شدن خیلی زیادی داره و قطعاً تنظیمات و ابزارهای دیگه‌ای هم هست که میشه بهش اضافه کرد. بنابراین اگر شما هم تجربه‌ای در این زمینه دارید و فکر میکنید چیزی میتونه ساختار پروژه رو بهتر کنه، خوشحال میشم روی پروژه Contribution داشته باشید.

اگر هم دنبال یه شروع سریع و مرتب برای پروژه‌های Django/DRF هستید، شاید drf2go بتونه براتون مفید باشه.

 اگر براتون مفید بود، خوشحال میشم یه Star به پروژه بدید.

https://github.com/pbarjoueian/drf2go

@DevTwitter | <Peyman Barjoueian/>

مجموعه آیکون برندهای ایرانی

پروژه Persian Icons شامل بیش از ۴۱۰ برند و ۸۲۰ آیکون SVG رنگی و تک‌رنگ، آماده استفاده در React و Vue است.
شامل بانک‌ها، درگاه‌های پرداخت، خودرو، اپلیکیشن‌ها، بیمه، دانشگاه‌ها و دسته‌بندی‌های بیشتر.

website:
https://icons.persian-labs.ir/
Github:
https://github.com/persianlabs/icons

@DevTwitter | <TaymaZ/>

‼️ ٪۶۰ تخفیف روی تمام دوره‌های آموزشی کوئرا کالج فقط تا ساعت ۲۳:۰۰ امشب.

📚 از برنامه‌نویسی و هوش‌ مصنوعی تا کار با ابزارهای AI

💳 امکان پرداخت قسطی

✨ الان با تخفیف ثبت‌نام کن و هر وقت خواستی دوره‌هارو شروع کن.
🔗 quera.org/r/zjzr2

یکی از مهمترین و پایه‌ای‌ترین سوالاتی که هر متخصص سئو و فرانت‌اند دولوپری باید از خودش بپرسه، اینه که بات‌های گوگل چگونه صفحات من رو بررسی و کراول میکنند؟

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

این اکستنشن فقط با یک کلیک، صفحه مدنظر شما رو به حالت Googlebot Mobile تغییر میده و هم‌زمان JavaScript رو غیرفعال می‌کنه تا بتونید خروجی خام و رندرشده رو فوراً بررسی کنید.

ویژگی‌های اصلی Midi Crawler:
تغییر حالت با یک کلیک: بدون نیاز به باز کردن DevTools و انجام تنظیمات دستی.
شبیه‌سازی دقیق: اعمال خودکار User-Agent گوگل‌بات موبایل و بلاک کردن جاوااسکریپت.
بررسی عمیق SSR و CSR: امکان مقایسه سورس‌کد قبل و بعد از فعال‌سازی برای کشف خطاهای ایندکس.

لینک نصب افزونه در کروم :‌
https://chromewebstore.google.com/detail/midi-crawler/mmijlnphgnfioppbdamppomcjhfidagb

https://github.com/mmahdi008/midi-crawler

@DevTwitter | <Mahdi Asgari/>

یه مشکلی داشتم که احتمالا خیلی‌هاتون باهاش درگیر شدید!

هر وقت می‌خواستم از صفحه سایت اسکرین‌شات بگیرم، داستان شروع می‌شد
یا باید چند تا عکس جدا جدا می‌گرفتم، یا از افزونه‌هایی استفاده می‌کردم که خروجی‌شون قشنگ به هم می‌ریخت؛ یه جا عکس‌ها روی هم می‌افتادن، یه جا نصف صفحه جا می‌موند، بعضی وقت‌ها هم کلاً بخش‌های Lazy Load اصلاً توی تصویر نبودن.

اولش فکر کردم مشکل از خود سایته… ولی بعد فهمیدم نه، مشکل از روش کار این ابزارهاست؛ چون میان صفحه رو اسکرول می‌کنن و بعد تیکه‌ها رو به هم می‌چسبونن.

همون‌جا با خودم گفتم چرا خودم یه ابزار درست نکنم؟

چند روز رفتم تو دل افزونه‌های کروم کلی تست زدم، کلی خراب کردم
آخرش رسیدم به یه افزونه که مستقیم از خود موتور Chrome برای گرفتن اسکرین‌شات استفاده می‌کنه و تونستم با AI یه افزونه‌ای رو بسازم که به راحتی این کار رو انجام بده.

و نتیجه شد این:
- اسکرین‌شات کامل و تمیز از کل صفحه
- کیفیت بالا بدون افت
- پشتیبانی از صفحات خیلی بلند
- حالت موبایل، تبلت و دسکتاپ
- بدون دردسرهای معمول اینجور ابزارها

https://github.com/abolfazltalebi/screenShot-pro

@DevTwitter | <Abolfazl talebi/>

چند ماه قطعی‌های اینترنت ایران رو یادتونه؟

وسط همون روزا، یه پروژه‌ی NestJS + Prisma داشتیم که باید دیپلوی می‌شد ولی همه چی خاموش بود!!!!.

روی سیستم لوکال همه‌چی عادی بود. ولی همین که npx prisma generate رو تو Container زدیم، گیر کردیم !!
چون Prisma برای Generate کردن Client، یه Engine باینری از سرور خودش (نه npm) دانلود می‌کنه. و اون سرور رو اصلاً دسترسی نداشتیم.

یعنی یه دستور که همیشه چند ثانیه طول می‌کشید، تبدیل شد به یه مشکل واقعی که باید حلش می‌کردیم اونم بدون اینکه اینترنت بین المللی داشته باشیم.

تو این پست کامل نوشتم چطور با پیدا کردن Environment Variable درست، و آوردن Engine باینری سازگار از ریپوی خود Prisma، مشکل رو بدون نیاز به اینترنت حل کردیم:
لینک مقاله

@DevTwitter | <Mahdi Heydari/>

همه میدونیم دنیای برنامه‌نویسی هر روز در حال تغییره؛ از آپدیت زبان‌ها و فریم‌ ورک‌ها گرفته تا ابزارها و منابع جدید.

کداکسپلور اینجاست تا چیزهای کاربردی دنیای برنامه‌نویسی رو یک‌ جا براتون جمع کنه.

از منابع یادگیری و چیت‌ شیت‌های مفید گرفته تا چالش‌های برنامه‌نویسی و محتوای فان🚀

اگه میخوای بدون از دست دادن وقت محتوای جدید رو داشته باشی، کداکسپلور رو دنبال کن😉👇🏻

@CodeExplore

منتظرتیم🧡

اگه این روزا استک پروژه تون NextJs هست و نمیدونین چه مدلی مناسب تره برای کد زدن بهتره که این بنچ مارک که توسط تیمشون انجام شده رو بهش یه نگاه بندازین اینطوری خیلی سیف تر و مطمئن تر روی مدل هایی که استفاده می کنید سرمایه گذاری می‌کنید!
بنچ مارک این موارد رو براتون به نسبت مدل شفاف میکنه:
-امتیازدهی‌ بر اساس نرخ موفقیت
-میانگین مدت‌زمان
-میانگین هزینه
https://nextjs.org/evals

@DevTwitter | <Javad/>

بدون اسکیل unslop نمیتونم از ai استفاده کنم.
حتی output توکن رو کمتر میکنه هزینه رو یه مقداری میاره پایین تر.
مخصوصا اگه از مدل های gpt استفاده میکنید کلا عادت به اینکار دارن بدون این نمیشه استفاده کرد ازشون.

https://github.com/cursor/plugins/blob/main/pstack/skills/unslop/SKILL.md

@DevTwitter | <Mohammad Sadeghian/>

این پروژه ی اوپن سورس ربات بخشی از مجموعه‌ی Awesome Telegram Bots هست، جایی که چند تا سورس کاربردی (از جمله ربات فروشگاهی، ربات اقتصادی گروهی و بازی‌ساز و دانلودر اینستا تیک تاک و یوتیوب و چت با ai ها ) با آموزش نصب کامل منتشر شده.
اگه این سورس به کارت اومد، حتماً یه سر به بقیه‌شون هم بزن:

github.com/Abolfazlrwm/awesome-telegram-bots

@DevTwitter | <Abolfazl/>