⚡️با استفاده از تگ نیتیو datalist و بدون نیاز به جاواسکریپت!، میتونید اینپوت های suggestion رو ایجاد کنید که کاربر با تایپ مقدار سرچ، آپشن های فیلتر شده بر اساس اون مقدار رو مشاهده کنه :)

🆔 @frontcode01 | 👩‍💻🧑‍💻

یه دموی خیلی خوب برای Intersection Observer داخل کدپن 🔥

پ.ن: اگه هنوز با Intersection Observer کار نکردید یا اسمشو نشنیدید، یه سر به MDN بزنید.


🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️با استفاده از pseudo سلکتور :empty میتونید به یه المنت در حالی که محتوایی نداره و خالی هسنش استایل بدید

MDN

🆔 @frontcode01 | 👩‍💻🧑‍💻

در حالت عادی بخواید همچین چیزی رو پیاده کنید باید از position: absolute استفاده کنید. ولی با CSS Grid خیلی راحت با پراپرتی grid-area این قضیه هندل میشه و مشکلات position: absolute رو هم نداره 😍

📌 Learn Css Grid

🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 با وبسایت caniuse.com حتما آشنا هستید که برای چک کردن پشتیبانی مرورگر ها از تکنولوژی های وب استفاده میشه. یه وبسایت مشابه هم هست caniemail.com که میتونید باهاش پشتیبانی ایمیل-کلاینت ها از تکنولوژی های وب رو چک کنید 😊

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️چیزی که راه حل اصلیش جاواسکریپت نیست، با جاواسکریپت انجام ندید!‌ نشون دادن متن انگلیسی با حروف بزرگ یکی از اون کاراست که دقیقا باید با CSS هندل بشه نه جاواسکریپت. با پراپرتی text-transform میتونید هر تکستی رو که میخواید capitalize کنید.

🆔 @frontcode01 | 👩‍💻🧑‍💻

✅ یه مقاله فوق العاده در مورد ساخت و مدیریت اپلیکیشن های "غول" جاواسکریپت 🔥

لینک مقاله مدیوم 📝

لینک ویدیو YouTube 📹

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️نکته CSS:

❌ یه مشکلی که تو خیلی از کدهای CSS میبینم اینه که برای فاصله انداختن بین آیتم های یک لیست، به همه آیتم ها یه مارجینی میدن، بعد چون آیتم آخر نیازی به فاصله نداره، مارجین اونو صفر میدن. این پترن جالبی نیست

✅ بجاش میتونید از سلکتور not داخل CSS استفاده کنید که نیازی هم به override کردن استایل ها نباشه. اینجوری میتونید مستقیم به همه آیتم ها "به جز" آیتم آخر یه مارجین بدید که نیازی هم به override کردن نباشه

پ.ن: سلکتور not خیلی کاربردهای دیگه هم داره. اینجا فقط یه موردشو بررسی کردم

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ خیلی وقتا میشه که یه چیزو ایمپورت میکنیم ولی استفاده نمیکنیم. در #VSCode میتونیم با Shift + Alt + O (در ویندوز و لینوکس) یا Shift + Option + O (در مک)، این ایمپورت های اضافی رو به طور خودکار حذف کنیم.

پ.ن: این دستور ترتیب ایمپورت‌ها رو هم مرتب میکنه

🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 با Web Share API میتونید مشابه اپ های نیتیو، منوی share رو باز کنید تا از اون طریق، کاربر قادر باشه لینک، تکست و فایل رو ارسال کنه

پ.ن: مرز بین وب اپ ها و اپ های نیتیو روز به روز داره باریک تر میشه 😍

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚛️ با هوک useWorker میتونید تسک های به شدت سنگین (مثل sort کردن یه آرایه با ۵ میلیون عضو رندوم!) که تو اپ #React انجام میدید رو بجای thread اصلی مرورگر، بفرستید به Web Worker تا جلوی رندر شدن UI رو نگیره

لینک گیتهاب این پکیج 🎉

🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 با pseudo سلکتور placeholder-shown میتونید استایل #CSS رو فقط زمانی که placeholder اینپوت نمایش داده میشه اعمال کنید

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ از تب compatibility فایرفاکس ، میتونین ساپورت مرورگرها از کدهای #CSS که میزنید رو ببینید
✅ این دیتا رو هم بر اساس جدول ساپورت MDN نشون میده

🆔 @frontcode01 | 👩‍💻🧑‍💻

📌اگه تو پروژه وبتون عکسی دارید که پس زمینش transparent هستش و می‌خواید بهش سایه بدید به جای box-shodow از drop-shadow استفاده کنید تا اینطوری زیبا شه

🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 یه مشکلی که با height:100vh داریم اینه که توی موبایل اسکرول میخوره و تمام ارتفاع صفحه مرورگر همراه آدرس بار (نه فاصله از آدرس بار تا انتهای صفحه) ولی با این تکنیک میشه حلش کرد 😇

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ یه مورد از مزیت هایی که CSS grid نسبت به فلکس باکس داشت این بود که یه پراپرتی grid-gap داشتیم که خیلی راحت باهاش فاصله بین آیتما رو تنظیم میکردیم منتها تو فلکس باکس باید مارجین داده میشد. الان با این پراپرتی جدید flex-gap میشه مشابه CSS grid فاصله انداخت بین آیتما 😍

🆔 @frontcode01 | 👩‍💻🧑‍💻

🔰اگر نیاز دارید از css variable درون جاوااسکریپت استفاده کنید
خیلی راحت میتونید از getComputedStyle() استفاده کنید

🆔 @frontcode01 | 👩‍💻🧑‍💻

✅ برای دسترسی و راحتی کاربران موبایل ، از type مخصوص برای input ها استفاده کنیم 👌

🆔 @frontcode01 | 👩‍💻🧑‍💻

🔰 کاربرد use در React 19

🆔 @frontcode01 | 👩‍💻🧑‍💻

دیس و دیس بک فرانت و بک 🚨

🆔 @frontcode01 | 👩‍💻🧑‍💻