فرانت‌اند
- اون رابط کاربری تمیز، زود قدیمی می‌شه
یه دیزاینر می‌گه هرچی ساختن نرم‌افزار ارزون‌تر می‌شه، محصول‌ها شبیه‌تر به هم می‌شن؛ و راه فرار اینه که عمداً از پیش‌فرض مدل‌های هوش مصنوعی فاصله بگیری.
۳ هفته پیش۳ دقیقهmarieclairedean.substack.com - حرکت تصادفی روی لبهٔ باکس با CSS خالص
یه ترکیب کم‌استفادهٔ CSS: به offset-path مقدار border-box بده تا المان بچسبه به لبهٔ والد، بعد با تابع random() ببرش به نقطه‌های اتفاقی. فقط هر کی‌فریم به seed جدا نیاز داره.
۳ هفته پیش۳ دقیقهblog.master.dev - Precise Type؛ مقیاس تایپوگرافی رو دقیق بچین
یه ابزار وب که با گرفتن سه عدد پایه کل پله‌های اندازه فونت سایت رو می‌سازه، نسبت‌هاش از فاصله‌های موسیقی الهام گرفته و خروجی رو هم به شکل CSS و CSV می‌ده.
۴ هفته پیش۲ دقیقهprecise-type.com - ماژول رسمی Better Auth برای Nuxt
یه ماژول تازه اومده که Better Auth رو به سبک خود Nuxt سوار پروژه می‌کنه: محافظت از مسیرها، دسترسی امن به سشن موقع SSR و هلپرهای auto-import.
۴ هفته پیش۲ دقیقهgithub.com - سنتری حالا bfcache رو اندازه می‌گیره
مرورگر صفحه رو برای دکمهٔ Back فریز می‌کنه، ولی هیچ ابزاری نمی‌گفت این کار کِی شکست می‌خوره. اینتگریشن جدید Sentry دقیقاً همین رو عدد می‌کنه.
۴ هفته پیش۳ دقیقهblog.sentry.io - Redact: ری‌اکتِ سینکرون و ۶۶ درصد سبک‌تر
TanStack یه runtime سازگار با React منتشر کرده که رندر رو کاملاً سینکرون انجام می‌ده. باندلش ۶۶ درصد کوچیک‌تره و بیشتر بنچمارک‌ها سریع‌تر، ولی transitionها و چند هوک فرم دیگه واقعی کار نمی‌کنن.
۴ هفته پیش۳ دقیقهgithub.com - Vue Router اسکرول رو دست کامپوننت می‌ده
یه PR آزمایشی تو مخزن Vue Router پلاگین Scroll Restoration رو اضافه می‌کنه: می‌تونه چند موقعیت اسکرول رو همزمان ذخیره کنه، داخل خود کامپوننت مصرف بشه و دستی هم اجرا بشه.
۴ هفته پیش۳ دقیقهgithub.com - رنگ دادن به SVG از بیرون با CSS
اسپک تازهٔ CSS Linked Parameters اجازه می‌ده مقدارهای CSS رو به یه فایل لینک‌شده پاس بدی؛ یعنی رنگ تصویری که با img گذاشتی رو هم می‌شه از صفحه عوض کرد. فعلاً فقط تو فایرفاکس نایتلی.
۴ هفته پیش۳ دقیقهpepelsbey.dev - PixelCrew: بریف بده، طراحی بگیر
PixelCrew یه سرویس آلفاست که بریف متنی رو می‌ده دست یه تیم ایجنت تخصصی و آخرش HTML و Tailwind بیرون می‌ده. خودش پولی نمی‌گیره؛ فقط مصرف کلید API خودتون حساب می‌شه.
۴ هفته پیش۲ دقیقهpixelcrew.ai - فیگما به کد، قبل از عصر LLM
سال ۲۰۲۳ تیم Builder.io برای تبدیل فیگما به HTML ریسپانسیو از یه مدل درخت تصمیم کوچیک استفاده کرد که فقط ۴۲ عدد ورودی می‌گرفت و اصلاً متن و رنگ رو نمی‌دید.
۴ هفته پیش۳ دقیقهmanualmeida.dev - هالمارک: ایجنتت رو از طراحی کلیشه‌ای درمیاره
پنج نشونه‌ای که لو می‌دن یه صفحه رو LLM ساخته، از گرادیان بنفش هیرو تا Inter برای همه‌چی، حالا یه اسکیل دارن که جلوشون رو می‌گیره.
۴ هفته پیش۳ دقیقهusehallmark.com - Playroom: زمین بازی کدمحور برای دیزاین سیستم
یه محیط طراحی بدون نصب که کد JSX رو همون لحظه روی همهٔ تم‌ها و عرض‌های صفحه رندر می‌کنه، و برای اشتراک‌گذاری فقط لینک رو کپی می‌کنی.
۴ هفته پیش۲ دقیقهgithub.com - ریتون: استایل رو تو مرورگر بچین، کد رو ایجنت بنویسه
انتخاب المان تو مرورگر، تنظیم فاصله و رنگ و فونت، و بعد ایجنت همون تغییرات رو مستقیم تو سورس می‌نویسه. یه لایه بصری برای Claude Code و Cursor که از راه MCP وصل می‌شه.
۴ هفته پیش۲ دقیقهretune.dev - react-redux ۹.۴ آلفا: سلکتورهای سیگنالی
تیم ریداکس یه هوک تجربی به react-redux اضافه کرده که با ردگیری مسیرهای state، فقط سلکتورهایی رو دوباره اجرا می‌کنه که داده‌شون واقعاً عوض شده.
۴ هفته پیش۳ دقیقهgithub.com - محصولت از نقشهٔ ساختمونش بزرگ‌تر شده؟
یسنیا پرز-کروز می‌گه دیزاین سیستم فقط نصف مشکل رشد محصول رو حل می‌کنه؛ نصف دیگه اینه که کاربر بفهمه با هر کلیک چقدر جابه‌جا شده.
۴ هفته پیش۳ دقیقهyeseniaperezcruz.substack.com - اسکرولر اصلی صفحه رو ناخواسته از دست نده
هر صفحه یه اسکرول‌کنندهٔ اصلی داره که مرورگر امکانات ویژه‌ای بهش می‌ده، از بازگردوندن جای اسکرول تا پرینت کامل. یه wrapper با ارتفاع قفل‌شده کافیه که بی‌سروصدا از دستش بدی.
۴ هفته پیش۳ دقیقهpolypane.app - show-keystrokes: کلیدهایی که می‌زنی رو روی صفحه نشون بده
سیاست امنیتی شرکت، اپ نیتیو نمایش کلیدها رو بلاک کرد؛ نتیجه‌ش یه وب‌کامپوننت شد که با Popover API و CSS Anchor Positioning کلیدها رو روی هر صفحه‌ای نشون می‌ده.
۴ هفته پیش۳ دقیقهbram.us - اسکیل‌های VueUse برای ایجنت‌های کدنویس
تیم VueUse یه بسته Agent Skill آزمایشی ساخته تا ایجنت‌های کدنویس کامپوزبل‌های ویو رو درست‌تر و با توکن خیلی کمتر به کار ببرن.
۴ هفته پیش۲ دقیقهgithub.com - راهنمای طراحی رابط کاربری تو واقعیت افزوده
تو AR دیگه قاب صفحه محدودت نمی‌کنه، بدن کاربر محدودت می‌کنه. این مقاله با عدد می‌گه محتوا رو تو چه زاویه و چه فاصله‌ای بذاری که چشم و گردن کاربر اذیت نشه.
۴ هفته پیش۳ دقیقهixdf.org - تست WebGL و WebGPU بدون کروم
به‌جای بالا آوردن کروم headless برای هر تست رندر، این محیط‌های تست WebGL و WebGPU واقعی رو داخل خود Node اجرا می‌کنن، با همون موتورهایی که کروم استفاده می‌کنه.
۴ هفته پیش۳ دقیقهben3d.ca
