توضیح انواع مخفف‌ها در حوزه طراحی وب و مخصوصا NextJS :
Server-Side Rendering (SSR)‍‍‍ : Renders the app on the Server in response to each request, and then sends the hydrated HTML and Javanoscript back to the Client.
Static Rendering (SR) - Static Site Generation (SSG) : Renders the app at build time. This is NextJS’s default approach.
Incremental Static Regeneration (ISR) : Next.js allows you to create or update static pages after you’ve built your site and it enables you to use static-generation on a per-page basis, without needing to rebuild the entire site.
Client-Side Rendering (CSR): Renders the app on the Client in the browser at run time.
#nextjs

Next.js lets you choose which pre-rendering form to use for each page.
#nextjs

SSG with data vs SSG without data
#nextjs

SSG without data + fetch data on client side = Client side rendering (only in nextjs)
use SWR(React Hooks library for data fetching) in this approach.
It's different from Client-Side-Rendering in create-react-app
#nextjs

اضافه کردن TailwindCSS به NextJS
از روی داکیومنت اصلیش داره آموزش میده :
https://tailwindcss.com/docs/guides/nextjs
نکته : به خاطر فیچر جدید Just-in-Time Mode دیگه فایل cssای تو devtools نمیبینید.
#nextjs #tailwind

از Tailwind استفاده کنیم یا نکنیم؟
#tailwind

what is Tailwind?
#tailwind #css

Tailwind CSS Crash Course
#tailwind #css

You must know CSS very well to use Tailwind
#tailwind

آقا این tailwind هر چی میخونیم خفن‌تر میشه. فیچر جدید داده که دیگه css رو همون اولgenerate نمیکنه بلکه on-demand این کار رو میکنه. یعنی هر موقع خواستید یه کامپوننت رو ببینید همون موقع css رو براش میذاره. این یعنی عملا دیگه هیچ فایل css ای نه تنها موقع develop وجود نداره ، بلکه سمت client هم وجود نداره و علاوه بر کم شدن حجم پروژه ، سرعتش هم خیلی میره بالا.
یه نکته دیگه : توضیح بالا معنیش این نیست که کل کتابخونش سمت کلاینت لود میشه. بلکه یه آپشن داره به نام purge ، قبل از اینکه پروژه سمت کاربر لود شه نگاه میکنه میبینه چیا استفاده شده ، فقط همونا رو لود میکنه.
تقریبا تمام نیازهای یک پروژه کاملا بزرگ رو تامین میکنه. فقط اگر روزی روزگاری به نیازی رسیدید که Tailwind داخل خودش نداشت میتونید با استفاده از راهی که گذاشته استایل خودتونو بهش اضافه کنید تا با استایل شما هم مثل استایلای خودش رفتار کنه.
این کتابخونه جایگزین css نیست ، بلکه مکمل خیلی خوبیه براش.
حجت رو بر ما تکمیل کرد لعنتی.
#tailwind

ویژگی‌های جدید Tailwind 2.2
#tailwind

ELECTRIC_GUITAR_RELAXING_MUSIC_EVER_1_HOUR_MEDITATION_RELAXATION
#music

(۲ تا عکس بالا رو ببینید)
توی کد زدن صبور باشید ، ۲بار فکر کنید و ۱ بار کد بزنید ولی توی نسخه دادن عجول باشید.
کارتون به یه حد خاصی رسید که فیچرهای اولیه رو داشت ، نسخه بدید هر چند ضعیف.
دوباره یه مقدار کار کنید دوباره نسخه بدید و همینطور الی آخر.
گوگل اگر صبر میکرد به جایی که الان هست برسه بعد نسخه میداد ، مطمن باشید اینقدر غول های نرم‌افزاری دیگه جایگزینش شده بودن که ۱ روز هم دووم نمیآورد.
بازار IT خیلی بیشتر از چیزی که فکرشو میکنید وحشیه.

درود دوستان، ریاکتی ها جواب بدن روی دکمه (-) کلیک بشه چی چاپ میشه

دوستان فرانت‌اند کار... سوال 🧐
فرض کنید روی صفحه سه ستون داریم ، که ارتفاع هاشون متفاوته و وسطی خیلی بزرگتر از بقیس. مثل توییتر.
چه جوری کاری کنیم که وقتی صفحه اسکرول میشه هر ستون نهایتا تا انتهای خودشون برن؟ مثلا دو ستون دیگه خیلی سریع به انتهاشون میرسن ولی وسطی خیلی طولانیه. نمیخوام دو ستون دیگه ناپدید بشن.
لطفا اگه راه حل تست شده دارید بگید و همینجوری یه چی نپرونید.
راه حلتون اگر روی tailwind باشه که چه بهتر.
هر کدوم اسکرول‌بار مجزای خودشون رو ندارن و همشون با همدیگه با اسکرول صفحه کار میکنن.
مثال عملیش همون توییتر

دوستان tailwind کار :
توی ورژن جدید tailwind چه جوری میشه darkMode رو از کار انداخت؟
نمیخوام از استراتژی calss یا media استفاده کنم. کلا میخوام disable بشه. حتی false هم گذاشتم نشد ، خودش darkmode دیوایس رو detect میکنه. به "false" هم خطا میده.
حتی کلا خط darkmode رو توی هم کانفیگ tailwind پاک کردم ولی باز کار کرد. کسی نظری داره؟
آپدیت : مشکل حل شد. پلاگین tailwindcss-tooltip-arrow-after به صورت خودکار darkmod رو فعال میکرد. حذفش کردم درست شد. اگر هم احتیاج شد باید بازش کنیم کدشو درست کنیم.