دوستان 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 برای ریکت؟
برای تشخصی جهت اسکرول

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

JavaScript is still the most expensive resource we send to mobile phones
پیشنهاد میکنم لینک زیر رو بخونید:
https://www.linkedin.com/pulse/javanoscript-still-most-expensive-resource-lovlesh-pokra/?articleId=6436322344054165504
#js #javanoscript

اگر مطالب این کانال براتون مفیده ، لطفا روی یوتیوب subscribe کنید و ترجیحا لایک کنید و کامنت بذارید که فعالیتمون رو گسترش بدیم:
https://www.youtube.com/alithecodeguy

از این پنج‌شنبه دورهمی‌های هفتگی و آنلاین alithecodeguy دوباره شروع میشه 🥳 🎉
هر پنج شنبه ساعت ۶ عصر. قبلش هم توی همین کانال اطلاع داده میشه. و احتمالا لایسنس اسکایپ هم تهیه کنیم که دیگه اذیت نکنه 😎
موضوع‌های پیشنهادیتون رو کامنت کنید.
اگر خودم بلد بودم که خودم دورهمی رو اداره میکنم. اگر نه ، سعی میکنم یه نفر متخصص پیدا کنم. از دوستان اگر کسی هم هست که فکر میکنه روی یک موضوعی مسلطه میتونه پیام بده.

How_can_i_become_a_good_programmer

5_Front-end_Development_Skills_to_Land_Your_First_Job

این مناطق تحت پوشش اینترنت استارلینکه پوشش رو ایرانم کامل هست. اون آنتنای زرد هم در حال سرویس گرفتن هستن. پیشنهاد میکنم اگر میخوان اینم فیلتر کنن بهتره تا فراگیر نشده سریع پروژه ی کشیدن یه سقف از جنس زرورق رو فلات ایران رو هندل کنن

@SixtyNinePercent

نمیدونم چه قدر صحت داره ولی خبر جالبیه

اگر توی رمزارز هستید ، همین الان برید DOT و BAKE بخرید. همین امشب سودتون بگیرید بفروشید.
پاورقی : با فکر و درایت خودتون خرید کنید

Apache_Kafka_Tutorial
#kafka