🚀 یه راهنمای سریع و باحال برای useTransition در React JS

⭐️هوک useTransition یه هوک خفن تو Reactه که بهت کمک می‌کنه به‌روزرسانی‌های سنگین رو بدون لگ کردن UI انجام بدی. 😎

🛠 چطور کار می‌کنه؟
🍽 همینطور که داخل لاین 7 ام می‌بینید یک [isPending, startTransition] از هوک useTransition گرفته شده و شما می‌تونید داخل startTransition هر عملیات asynchronous ای دارید داخلش انجام بدید و این هوک به صورت اتوماتیک isPending رو برای شما مدیریت می‌کنه !

💠 استفاده این هوک باعث بالارفتن پرفورمنس پروژه و مدیریت شما میشه.

🚀 @NextPro_Ch

دوستان موقع نصب WSL رو سیستم با این خطا مواجه میشم و داخل گوگل و Ai هم چیزی پیدا نکردم که کمک کنه
آیا برای شما پیش اومده؟ راهکاری براش دارید؟ 🤔

🚀 @NextPro_Ch

کتابخانه Lenis/React: اسکرولینگ نرم و جادویی! 🚀

کتابخانه Lenis یه ابزار متن‌باز و فوق‌العاده سبک (~10KB) برای ایجاد اسکرولینگ نرم و روان در وب‌سایته که تجربه کاربری رو مثل اپ‌های موبایل ارتقا می‌ده. با wrapper React، ادغامش با پروژه‌های React ساده و بدون دردسره – بدون وابستگی‌های اضافی، سازگار با تمام مرورگرها و حتی GSAP برای انیمیشن‌های پیشرفته! اگر دولوپر فرانت‌اند هستی، این کتابخانه زندگی‌تو راحت‌تر می‌کنه. 👌

🔥 چی کار می‌کنه؟

🔵 اسکرولینگ روان: حرکات نرم و طبیعی، بدون لگ یا پرش.
🔵 انعطاف‌پذیر: از صفحات ساده تا سایت‌های پیچیده با parallax.
🔵 سبک و performant: فقط کد ضروری، بدون اضافه‌بار روی عملکرد.
🔵 ادغام آسان با React: با هوک‌های آماده، سریع راه‌اندازی می‌شه.

🎯 کاربردها: لندینگ پیج‌ها، پورتفولیوها، سایت‌های e-commerce یا هر جایی که اسکرولینگ شیک و حرفه‌ای مهمه.

💙 مستندات

#Nextjs #FrontEnd #JavaScript #Developer

🚀 @NextPro_Ch

کل کل بنز و ‌BMW رو ول کن، بیا دعوای پر از قند پشمکارو ببین! 😁

به نظرم حاج‌عبدالله مثل بنز میمونه، حتی تو دعوا هم اصیل و مقتدره...
و دوستی هم شبیه BMW پرانرژی و اهل رقابت و جوون!

من اگه جای دوستی بودم بیلبورد بعدی اینو می‌رفتم:
بعضی دوستی‌ها زودگذرم که باشن، شیرینیشون تا آخر عمر یادت می‌مونه! 😏

#Fun

📱 Shahrzad Valipour

🚀 @NextProCh

نحوه عملکرد if else به رسم شکل 💻🔲

#Fun

🚀 @NextPro_Ch

آیا اینجا UI/UX دیزاینر داریم؟ لطفا رزومه اش رو ارسال کنه

✅ Done

🚀 @NextPro_Ch

❓ معرفی AetherCSS: ساخت بک‌گراند های Glassmorphism در کسری از ثانیه. 🎁

🎁 مثل همیشه داشتم تو اینترنت گشت و گذار می‌کردم که چشمم خورد به یک پروژه شخصی و واسم جذاب اومد و گفتم با شما هم به اشتراک بذارم 🎁

🎁 شما با استفاده از این وبسایت می‌تونید به سادگی بک‌گراند های "یخی", "شیشه ای" و Neumorphism ایجاد کنید

🔗 مشاهده وبسایت
📱 لینکدین سازنده

🚀 @NextPro_Ch

🎁 اگر علاقه داشته باشید که قواعد UI/UX رو درحد فرانت‌اند دولوپر بلد باشید, آقای Emil Kowalski ( اِمیل کووالسکی ) رو بهتون معرفی می‌کنم — که حتی با پروژه های ShadcnUI & HeroUI & Vercel همکاری داشته/داره. 🎁

🌐 His personal website's link


🚀 @NextPro_Ch

اگر علاقه داشتید تو لینکدین فالوم کنید و منم متقابلا فالو بک کنم.
📱 https://www.linkedin.com/in/peyman-geek/

🚀 @NextPro_Ch

به به :)) 👌

🚀 @NextPro_Ch

یه منبع عالی برای پس‌زمینه‌های مدرن وب: Pattern Craft 🎨

اخیراً با یه ابزار جالب به اسم Pattern Craft آشنا شدم که واقعاً نظرم رو جلب کرد.
اگر تو هم مثل من همیشه دنبال یه راه تمیز و سریع برای ساخت پس‌زمینه‌های جذاب بدون افت سرعت یا استفاده از تصویر هستی، حتماً یه نگاهی بهش بنداز. 👌

وبسایت Pattern Craft یه مجموعه بزرگ از الگوها و گرادیانت‌های CSS و Tailwind داره (۲۴۱ تا دقیق‌ترش 😅) که می‌تونی خیلی راحت کدشون رو کپی و توی پروژه‌ت استفاده کنی.
نیازی به نصب چیزی نیست، فقط چند خط کد — و تمام!

نتیجه؟ یه پس‌زمینه‌ی سبک، واکنش‌گرا و حرفه‌ای که حس “تمیزی طراحی” رو منتقل می‌کنه.

چند تا ویژگی که من خیلی دوست داشتم 🎁
🔘 پیش‌نمایش تعاملی (خیلی باحاله روی موبایل و دسکتاپ)
🔘 تنوع بالا از بافت‌های ظریف تا گرادیانت‌های چشم‌نواز
🔘 کدنویسی تمیز با Tailwind و CSS مدرن
🔘 بدون افت عملکرد یا نیاز به تصاویر سنگین
🔘 به نظرم برای هر کسی که روی UI/UX یا Frontend کار می‌کنه، یه ابزار الهام‌بخشه و واقعاً کاربردیه.
🔘 من خودم چند تا از الگوهاش رو تست کردم و به‌نظرم تو پروژه‌های بعدی قطعاً ازش استفاده می‌کنم.

🌐 Craft beautiful's website
📱 My Linkedin page
📱 My personal website

🚀 @NextPro_Ch

ولی خدایی #وایب_کدینگ هم حد و اندازه‌ای داره ها!🤦‍♂️

بازار کار برنامه نویسی تو وضعیت عجیبیه !

انبوهی از تازه کارهایی رو میبینییم که فقط با AI "کد میزنن" و میگن که برنامه نویسن..

بنظرم نتیجه این مدل کار کردن میشه :
رشد سریع در کمیت، سقوط آزاد در کیفیت!

بد نیست به خودمون یادآوری کنیم:
برنامه‌نویسی یعنی فهمیدن سیستم، نه فقط تولید خروجی.

وگرنه این مسیر میره به جایی که
«کد کار میکنه ولی هیچکس نمیدونه چرا».

البته خود ماهیت وایب کدینگ بد نیست، تا وقتی پشتش درک، مسئولیت و یه ذره فهم سیستم باشه.

نه وایب کدینگ مطلق!


📱 Ahmad Ahmad-Nejad

🚀@NextPro_Ch

مفهوم CSR در Next.js یعنی چی؟ ❔

وقتی از Client-Side Rendering (CSR) حرف می‌زنیم، منظور اینه که محتوای صفحه بعد از لود شدن در مرورگر کاربر ساخته می‌شه، نه روی سرور.
یعنی مرورگر یه فایل HTML خالی می‌گیره، بعد با جاوااسکریپت React شروع می‌کنه به رندر کردن محتوا.

👨‍💻 مثلاً چی؟

فرض کن وارد یه صفحه محصول می‌شی و چند لحظه طول می‌کشه تا اطلاعات ظاهر بشه — این یعنی داده‌ها از API گرفته شدن و در مرورگر رندر شدن (نه از قبل روی سرور آماده بودن).

⚠️ اما CSR همیشه انتخاب خوبی نیست. چند تا از معایبش:

⏳ تاخیر در نمایش محتوا:
کاربر باید صبر کنه تا جاوااسکریپت دانلود و اجرا بشه، پس اولین محتوای قابل‌مشاهده دیرتر لود می‌شه.

🔍 ضعف در سئو:
چون محتوای اولیه خالیه، خزنده‌های موتور جستجو ممکنه نتونن اطلاعات درست بخونن (مگر با تنظیمات خاص).

📉 مصرف بالای منابع سمت کاربر:
رندر کامل در مرورگر یعنی استفاده بیشتر از CPU و RAM دستگاه کاربر.

✅ کی از CSR استفاده کنیم؟
وقتی صفحه‌ای کاملاً وابسته به تعامل کاربره (مثل داشبوردها یا اپ‌های تحت وب که سئو براشون مهم نیست)، CSR انتخاب خوبیه.


#Nextjs #Frontend #CSR #WebDevelopment #React

🚀 @NextPro_Ch