⚡️ اگر در مسیر مهاجرت هستید یا در برنامه آیندتون قرار داره این تجربیات ارزشمند رو از دست ندین 👌🏻


🎧 اگر از Castbox گوش میکنید

♦️ اگر از Youtube تماشا میکنید


🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 برای نشون دادن زمانای relative (مثلا "۲ دقیقه قبل" یا "۳ ماه بعد") خیلیا از moment و moment-jalaali استفاده میکنن که به نظرم خیلی سنگینن و استفاده از اینها برای نشون دادن یه چیز ساده مثل بریدن مرغ با اره برقیه!

✅ خود جاواسکریپت متد نیتیو برای اینکار داره! با Intl.RelativeTimeFormat میتونید دقیقا همینکارو بکنید. اگه مقدار عددی که بهش پاس میدید منفی باشه، متن زمان رو بر اساس گذشته تولید میکنه و اگه عددی که میدید مثبت باشه، متن زمانو بر اساس آینده تولید میکنه

پ.ن: locale رو fa پاس بدید


🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ بدون استفاده از پکیج اضافه، میتونید query params رو از URL به شکل نیتیو بخونید. کافیه آدرس رو پاس بدید به constructorی که به شکل نیتیو برای URL وجود داره 🔥


🆔 @frontcode01 | 👩‍💻🧑‍💻

وقتی بدون خوندن داکیومنت میخوای از یه ماژول استفاده کنی 😂

🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 با متد vibrate روی window.navigator میتونید کاری کنید که گوشی کاربر ویبره بره 😁 آرگیومنتی که بهش پاس میدید مدت زمان ویبره به میلی ثانیه رو مشخص میکنه


🆔 @frontcode01 | 👩‍💻🧑‍💻

وقتی کدهای سه ماه پیشم رو میبینم :

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ با اضافه کردن Quicklink، این پکیج میاد و از طریق لینک هایی که تو صفحه فعلی دارید، صفحاتی که بعدا قراره یوزر به اونها هدایت بشه رو تشخیص میده و اونارو prefetch میکنه تا سرعت و پرفورمنس بالاتر بره 👌

لینک وبسایت

🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 با متد نیتیو scrollIntoView روی المنت های DOM، میتونید بدون نیاز به هیچ پکیج اضافه ای، اسکرول کنید به المنت دلخواهتون 😍
▫️این متد برای لیست ها خیلی کاربردیه

داکیومنت MDN

🆔 @frontcode01 | 👩‍💻🧑‍💻

✅ تفاوت type و interface در typescript

https://vrgl.ir/b5NY8


🆔 @frontcode01 | 👩‍💻🧑‍💻

سال 10101111011 همه رفقا مبارک باشه 😍🎊

سالی پر از پیشرفت و پول باشه برای همگی ❤️

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ایمپورت و parse کردن JSON از تعریف آبجکت به شکل دستی سریعتره!

پ.ن:‌ از فردا نیاید همه دیتاهاتون رو به شکل JSON ذخیره کنید 😁

✅ فقط وقتی دیتا خیلی خیلی زیاده و سنگینه میتونید اینکارو بکنید

🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 با Box Sizing Module Level 4 در CSS یه پراپرتی aspect-ratio خواهیم داشت که باهاش خیلی راحت میتونیم نسبت width و height رو کنترل کنیم 🤌🏻

لینک درفت W3 📝

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️با استفاده از تگ نیتیو 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 | 👩‍💻🧑‍💻