با پکیج nextjs-toploader رنگ و بوی جدیدی به پروژت بده🔥

‏nextjs-toploader یه پکیجِ انیمیشنی هست که در پروژه‌های Next.js استفاده میشه. با استفاده از این پکیج، زمانی که بین صفحات مختلف جابه‌جا میشید، در بالای صفحه یه progress bar (نوار لودینگ باریک) نشون داده میشه.

درست مثل نوار باریکی که بالای سایت‌ معروفی مثل YouTube موقع لود صفحه جدید میبینی.

برخی ویژگی‌های nextjs-toploader

🧬 خیلی ساده و سریع راه‌اندازی میشه.

🧬 رنگ، ارتفاع، سرعت پیشروی و شکلش کاملا قابل تغییره.

🧬 با Router Events توی Next.js کار میکنه (مثل routeChangeStart, routeChangeComplete)

برای کسب اطلاعات بیشتر به داکیومنت این پکیج مراجعه کنید.

#animation #toploader
@CodeModule

واقعیت محض😂

#fun
@CodeModule

قابلیت جدید CSS برای ساخت Carousel
تو این ویدئو به قابلیت جدید CSS برای ساخت Carousel می‌پردازیم.

مشاهده ویدئو

این ویدئو بخشی از استریم های هفتگی جامعه ست شما هم میتونید با دنبال کردن کانال توی لایو ها شرکت کنید:
https://twitch.tv/fullstacksjs

عضویت در جامعه:
https://fullstacksjs.com

#wus #carousel #css

اگه برای تمرین و کدنویسی دنبال ui خاصی میگردید، این طرح فیگما رو به هیچ وجه از دست ندید 💀

🔗 Link

#figma
@CodeModule

این خیلی خوب بود 😂😂😂

#fun
@CodeModule

پیغام‌های زیبا با Sonner ☔️

‏Sonner یک کتابخانه toast notification فوق‌العاده ساده، سبک و قابل شخصی‌سازی برای React و سایر فریمورک‌های مبتنی بر React هست، که از لحاظ طراحی و تجربه کاربری بسیار مینیمال و جذابه.

‏Shadcn از این پکیج برای کامپوننت Toast خودش استفاده می‌کنه

برای کسب اطلاعات بیشتر و نحوه استفاده، به داکیومنت این پکیج مراجعه کنید.

🔗 Document

#sonner
@CodeModule

یه موردی خیلی توجهم رو جلب کرده.

توی لینکدین پست های زیادی میبینم که همکار های خانم به دنبال کار هستن و در کنار رزومه، عکسی از خودشون هم قرار میدن.

واقعا رسالت این کار چیه؟ /:

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

@CodeModule

سئوی قدرتمند در Next.js 🛠

سئو نقش بسیار مهمی در دیده شدن وب‌سایت و پروژه داره و شما به عنوان دولوپر، باید اطلاعاتی راجع به این موضوع داشته باشید. مقاله زیر نکته هایی برای سئوی بهتر در پروژه های نکستی جمع اوری کرده و یشنهاد میکنم، حتما مطالعش کنید.

🔗 Article

#seo #tips
@CodeModule

دیگه تویی که کل پروژه هات رو شاخ Ai میچرخه، نباید استوری بزاری و امروز رو به خودت بگیری😔

#fun
@CodeModule

بدرود با نوشتن دستی API ها و تایپ هاشون ☃️

پکیج Orval یک ابزار هوشمنده که از روی فایل OpenAPI یا Swagger (که بک‌اند دولوپر برات می‌فرسته)، به صورت خودکار ریکوست‌ها و تایپ‌ مدل ها و رسپانس هارو برای کار با API می‌سازه.

تو پروژه‌های بزرگ که تعداد APIها زیاده (مثلاً ۵۰ تا endpoint یا بیشتر)، نوشتن دستی اون همه ریکوست و تایپ خیلی وقت‌گیره و امکان بروز اشتباه و باگ هست.

این پکیج ساخته شده تا:

سرعت توسعه رو بالا ببره.

هماهنگی با بک‌اند رو حفظ کنه.

خطاهای تایپی و ارتباطی رو از بین ببره.

ویژگی و مزیت های Orval

🌪تولید خودکار کد API: از روی فایل OpenAPI (.yaml) یا (json.) Swagger، به‌صورت خودکار توابع ریکوست (GET, POST, …) می‌سازه.

🌪تولید تایپ های TypeScript: تایپ مدل‌های داده و رسپانس هارو کامل جنریت میکنه.

🌪هماهنگی کامل با بک‌اند: وقتی بک‌اند تغییر می‌کنه، فقط نیازه یک بار کامند Orval رو اجرا کنی تا همه‌چی آپدیت بشه.

🌪پشتیبانی از کتابخونه‌های مختلف: بر اساس نیازتون میتونه خروجی رو برای Axios، Fetch API، React Query، SWR و … تولید کنه.

🌪امکان Mock کردن API: بدون نیاز به سرور واقعی، پاسخ‌های فیک Mock می‌سازه.

🌪 ساختار تمیز و سازمان‌یافته کدها: خروجی‌ها منظم، خوانا و آماده استفاده در پروژه هستن.

🔗 Document

#orval
@CodeModule @CodeModuleGap

حالا مگه بک اند دولوپر زیر بار سواگر type safe میره؟😞

اگه برای تمرین و کدنویسی دنبال ui خاصی میگردید، این طرح فیگما رو به هیچ وجه از دست ندید 💀

🔗 Link

#figma
@CodeModule @CodeModuleGap

ترکیبی از مودال و منوی کشویی با Credenza 🐝

پکیج Credenza یک کامپوننت آماده به ما میده که ترکیبی از dialog و drawer هست، یعنی در سایز دسکتاپ، به صورت مودال معمولی باز میشه و در سایز موبایل، به شکل drawer (منو کشویی) نمایش داده میشه.

🔗 Document

#credenza
@CodeModule @CodeModuleGap

خیلی خوب بوددد 😂😂😂

#fun
@CodeModule @CodeModuleGap

با Nuqs بیشتر آشنا بشید 🕷

پکیج Nuqs یک کتابخونه‌ هست که برای مدیریت state از طریق query string در پروژه‌های Next.js طراحی شده.

به زبان ساده‌تر: با nuqs می‌تونی stateهایی مثل فیلترها، سرچ کاربر، پیجینیشن، یا هر متغیری رو که می‌خوای در URL نگه داری و خیلی راحت و type-safe مدیریت کنی. بدون اینکه خودت دستی با useSearchParams یا useRouter سر و کله بزنی.

قابلیت‌های مهم این پکیج

💥 پشتیبانی از انواع داده (string number, boolean, date, array و ...)

💥 سازگاری کامل با App Router

💥 سینک خودکار بین state و URL

💥 ساده‌تر از useSearchParams

خلاصه که اگه از دست useSearchParams و useRouter خسته شدی، پکیج Nuqs دقیقاً همونه که دنبالش بودی.

🔗 Document

#nuqs
@CodeModule @CodeModuleGap

با React Share بیشتر آشنا بشید ☃️

کتابخونه‌ی react-share یکی از کتابخونه‌های محبوب ریکته که برای اضافه‌کردن دکمه‌های اشتراک‌گذاری، در شبکه‌های اجتماعی مثل تلگرام، واتساپ، توییتر، لینکدین، فیسبوک و ... استفاده میشه.

ویژگی‌های کتابخانه React Share

⚡️ پشتیبانی از شبکه‌های اجتماعی مختلف

⚡️ آیکون‌های SVG با قابلیت شخصی‌سازی

⚡️ بسیار کم حجم و سریع


🔗 Document

#react_share
@CodeModule @CodeModuleGap

دوستان یه پول ریکوست بزنید بلکه روبیکا و بله هم اضافه بشه🙏

در کل به نظر من منطقی نیست یه دپندنسی برای چنین تسکی به پروژه اضافه کرد.

حالا هر چقدر هم که این پکیج سبک و کم حجم باشه. لطفا یکم شیرازی بازی رو بزارید کنار و خودتون یه کامپوننت براش بنویسید.

پست‌هایی که پیشنهاد میکنم از دست ندید ;-)

💎 چگونه تبدیل به یک فریلنسر موفق بشیم؟

💎 ۳۰ توصیه از یک برنامه‌نویس سنیور

💎 ایونت لوپ در جاوااسکریپت

💎 زمان کار آموزی به چه نکاتی توجه داشته باشیم؟

💎 ‏5 ماژول کاربردی Node.js

💎 5 دیزاین پترن مطرح Gof

#top
@CodeModule
@CodeModuleGap