فرانت کد | FrontCode

🔺 با وبسایت caniuse.com حتما آشنا هستید که برای چک کردن پشتیبانی مرورگر ها از تکنولوژی های وب استفاده میشه. یه وبسایت مشابه هم هست caniemail.com که میتونید باهاش پشتیبانی ایمیل-کلاینت ها از تکنولوژی های وب رو چک کنید 😊 🆔 @frontcode01 | 👩‍💻🧑‍💻

در حالت عادی بخواید همچین چیزی رو پیاده کنید باید از position: absolute استفاده کنید. ولی با CSS Grid خیلی راحت با پراپرتی grid-area این قضیه هندل میشه و مشکلات position: absolute رو هم نداره 😍 📌 Learn Css Grid 🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️با استفاده از pseudo سلکتور :empty میتونید به یه المنت در حالی که محتوایی نداره و خالی هسنش استایل بدید MDN 🆔 @frontcode01 | 👩‍💻🧑‍💻

یه دموی خیلی خوب برای Intersection Observer داخل کدپن 🔥 پ.ن: اگه هنوز با Intersection Observer کار نکردید یا اسمشو نشنیدید، یه سر به MDN بزنید. 🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️با استفاده از تگ نیتیو datalist و بدون نیاز به جاواسکریپت!، میتونید اینپوت های suggestion رو ایجاد کنید که کاربر با تایپ مقدار سرچ، آپشن های فیلتر شده بر اساس اون مقدار رو مشاهده کنه :) 🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 با Box Sizing Module Level 4 در CSS یه پراپرتی aspect-ratio خواهیم داشت که باهاش خیلی راحت میتونیم نسبت width و height رو کنترل کنیم 🤌🏻 لینک درفت W3 📝 🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ایمپورت و parse کردن JSON از تعریف آبجکت به شکل دستی سریعتره! پ.ن:‌ از فردا نیاید همه دیتاهاتون رو به شکل JSON ذخیره کنید 😁 ✅ فقط وقتی دیتا خیلی خیلی زیاده و سنگینه میتونید اینکارو بکنید 🆔 @frontcode01 | 👩‍💻🧑‍💻

سال 10101111011 همه رفقا مبارک باشه 😍🎊 سالی پر از پیشرفت و پول باشه برای همگی ❤️ 🆔 @frontcode01 | 👩‍💻🧑‍💻

✅ تفاوت type و interface در typescript https://vrgl.ir/b5NY8 🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 با متد نیتیو scrollIntoView روی المنت های DOM، میتونید بدون نیاز به هیچ پکیج اضافه ای، اسکرول کنید به المنت دلخواهتون 😍 ▫️این متد برای لیست ها خیلی کاربردیه داکیومنت MDN 🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ با اضافه کردن Quicklink، این پکیج میاد و از طریق لینک هایی که تو صفحه فعلی دارید، صفحاتی که بعدا قراره یوزر به اونها هدایت بشه رو تشخیص میده و اونارو prefetch میکنه تا سرعت و پرفورمنس بالاتر بره 👌 لینک وبسایت 🆔 @frontcode01 | 👩‍💻🧑‍💻

وقتی کدهای سه ماه پیشم رو میبینم : 🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 با متد vibrate روی window.navigator میتونید کاری کنید که گوشی کاربر ویبره بره 😁 آرگیومنتی که بهش پاس میدید مدت زمان ویبره به میلی ثانیه رو مشخص میکنه 🆔 @frontcode01 | 👩‍💻🧑‍💻

وقتی بدون خوندن داکیومنت میخوای از یه ماژول استفاده کنی 😂 🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ بدون استفاده از پکیج اضافه، میتونید query params رو از URL به شکل نیتیو بخونید. کافیه آدرس رو پاس بدید به constructorی که به شکل نیتیو برای URL وجود داره 🔥 🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 برای نشون دادن زمانای relative (مثلا "۲ دقیقه قبل" یا "۳ ماه بعد") خیلیا از moment و moment-jalaali استفاده میکنن که به نظرم خیلی سنگینن و استفاده از اینها برای نشون دادن یه چیز ساده مثل بریدن مرغ با اره برقیه! ✅ خود جاواسکریپت متد نیتیو برای اینکار داره! با Intl.RelativeTimeFormat میتونید دقیقا همینکارو بکنید. اگه مقدار عددی که بهش پاس میدید منفی باشه، متن زمان رو بر اساس گذشته تولید میکنه و اگه عددی که میدید مثبت باشه، متن زمانو بر اساس آینده تولید میکنه پ.ن: locale رو fa پاس بدید 🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ اگر در مسیر مهاجرت هستید یا در برنامه آیندتون قرار داره این تجربیات ارزشمند رو از دست ندین 👌🏻 🎧 اگر از Castbox گوش میکنید ♦️ اگر از Youtube تماشا میکنید 🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ با استفاده از فانکشن clamp داخل CSS میتونید اصطلاحا یک مقدار رو clamp کنید! به این مثال توجه کنید: ✅ با وجود اینکه ما مقدار 5vw به font-size دادیم، نباید سایز نهایی بیشتر از ۴۸ پیکسل بشه و همچنین نباید سایز نهایی کوچک‌تر از ۲۴ پیکسل بشه. 🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ راه های به توان رسوندن یک عدد تو جاواسکریپت پ.ن: اون operator راه دوم رو تا حالا تو کد دیده بودین؟😁 🆔 @frontcode01 | 👩‍💻🧑‍💻