✅ تمام یونیت های CSS رو میتونید تو این تصویر با توضیحاتشون ببینید 👌🏻

پ ن : تو جلسات مصاحبه هم معمولا از این موارد سوال پرسیده میشه ✍️


🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ راه های به توان رسوندن عدد 2 تو جاواسکریپت

پ.ن: اون operator راه دوم رو تا حالا تو کد دیده بودین؟😁


🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ با استفاده از فانکشن clamp داخل CSS میتونید اصطلاحا یک مقدار رو clamp کنید! به این مثال توجه کنید:

✅ با وجود اینکه ما مقدار 5vw به font-size دادیم، نباید سایز نهایی بیشتر از ۴۸ پیکسل بشه و همچنین نباید سایز نهایی کوچک‌تر از ۲۴ پیکسل بشه.


🆔 @frontcode01 | 👩‍💻🧑‍💻

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


🎧 اگر از 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 | 👩‍💻🧑‍💻