از 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 رو فعال میکرد. حذفش کردم درست شد. اگر هم احتیاج شد باید بازش کنیم کدشو درست کنیم.

دوستان فرانت‌کار ، این نکته رو در نظر داشته باشید که وقتی سایتی رو طراحی می‌کنید ، این سایت باید روی همه مرورگرهای معروف از جمله کروم ، فایرفاکس و سافاری و اغلب مرورگرهای باقی مانده درست کنه. این یعنی به هر حال یه مرورگری پیدا میشه که سایت شما روش درست کار نکنه و این مهم نیست. مرورگرهای معروف اگر درست کار کنن یعنی روی اکثرش درست کار میکنه.
حالا این وسط میخواید دیگه اپلیکیشن موبایل نزنید و از همین سایتی که طراحی میکنید روی موبایل هم استفاده کنید. اینجا میرید سمت PWA و ریسپانسیو و همون تستی که روی محیط توسعه انجام میدید کفایت میکنه و معمولا توی محیط واقعی مشکلی پیش نمیاد.
ولی یکی از مشکلات شناخته شده‌ای که وجود داره اینه که روی موبایل از pwa استفاده نکنید و بخواهید با مرورگر به شکل عادی صفحه طراحی شده رو ببینید.
..::ادامه در پست بعد::..
#html #css #react #bug @alithecodeguy

..::ادامه پست قبل::..
توی این حالت مرورگر موبایل به خاطر لبه اتوماتیکی که برای نوار آدرس قرار میده ارتفاع صفحه رو دستکاری میکنه و 100vh شما دیگه واقعی نیست.
برای این کار دو تا راه حل وجود داره:
۱- استفاده از کتابخانه آماده که پیشنهاد نمیکنم
۲- هندل کردن به صورت دستی که این هم ۲ تا روش داره:
۱- روش آسان و سی اس اسی :
height: 100%;
min-height: -webkit-fill-available;
min-height: -moz-available;
min-height: stretch;
اینارو میتونید روی html یا body یا روی container اصلیتون قرار بدید.
۲- روش سخت و اسکریپتی : محاسبه innerHeight در هر تغییر سایز
1vh = window.innerHeight*0.1
بعد حالا اگر از چیزی مثل ریکت استفاده می‌کنید میتونید useEffect بذارید که ارتفاع کامپوننتون رو عوض کنه.
اگر هم میخواید روی resize صفحه listener بذارید میتونید توی ریکت از هوک useWindowSize استفاده کنید.
فقط حواستون باشه با توجه به نوع کد زدنتون ممکنه به sticky کردن هدر یا فوتر نیاز داشته باشید.
به زودی از این دو تا پست یک ویدیو هم میسازم و آپلود میکنم.
این باگ ، یک باگ شناخته شده است و webkit مرتبط میشه و هر مرورگری برای حل کردنش موضوع‌های مختلفی مطرح کرده.
..::ادامه در پست بعد::..
#html #css #react #bug @alithecodeguy

..::ادامه پست قبل::..
لینکهای زیر بعضی از لینکهاییه که در طول حل این مشکل پیدا کردم که خلاصش میشه همینی که بالا گفتم:
https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
https://developers.google.com/web/updates/2017/09/visual-viewport-api
https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/
https://www.npmjs.com/package/vh-check
https://github.com/Hiswe/vh-check
https://stackoverflow.com/questions/26275982/putting-moz-available-and-webkit-fill-available-in-one-width-css-property
https://bugs.webkit.org/show_bug.cgi?id=141832
https://stackoverflow.com/questions/62717621/white-space-at-page-bottom-after-device-rotation-in-ios-safari
#html #css #react #bug @alithecodeguy

آمار استفاده از مرورگرهای مختلف روی دیوایس‌هایی با ابعاد مختلف
#html #css #browser