رقصنده با کد (و غیره)

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

..::ادامه پست قبل::.. لینکهای زیر بعضی از لینکهاییه که در طول حل این مشکل پیدا کردم که خلاصش میشه همینی که بالا گفتم: 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

..::ادامه پست قبل::.. توی این حالت مرورگر موبایل به خاطر لبه اتوماتیکی که برای نوار آدرس قرار میده ارتفاع صفحه رو دستکاری میکنه و 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

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

گاهی اوقت صفحه وبی که طراحی میکنید روی دسکتاپ کاملا اوکیه ، حتی روی دسکتاپ توی حالت موبایل هم اوکیه. ولی روی خود موبایل اوکی نیست و چند سانت پایین صفحه دیده نمیشه و این چند سانت برای همه گوشی ها هم یکسان نیست. بعد از ۲ روز تلاش راه حلش رو برای React پیدا کردم و امشب یک پست طولانی با معرفی همه منابع و همه راه حلهای درست و غلط در موردش میذارم. آپدیت : دارم یه پست کامل تهیه میکنم. موند برای فردا #expriment

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

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

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

Hello here is Farbod

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

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