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

سلام همگی. امروز با یک کاستوم هوک داغ برای ریکت در خدمتتونم 😁🔥🔥
با این کاستوم هوک میتونید تشخصی بدید که کاربر خارج از یک المنت یا کامپوننت کلیک کرده یا نه.
مثلا میتونید کلیک خارج از یک دیالوگ رو با استفاده از این هوک تشخصی بدید.
برای استفادش هم یک ref به المنت یا کامپوننت مد نظر بدید بعد ref رو بفرستید برای این هوک و تمام.
Hook name : useOutsideClick.js
لینک گیت‌هاب:
https://github.com/alithecodeguy/react-custom-hooks
#react #hook @alithecodeguy

بریم سراغ هوک useScrollDirection برای ریکت؟
برای تشخصی جهت اسکرول

انگولار کار ماهر و علاقه مند به تدریس توی گروه داریم که بخواد دورهمی آنلاین برگزار کنه؟ مثل دورهمی های قبلا خودمون که رکوردش توی یوتیوب هست.
دوستان درخواست کردن