⚡️ یه سایت فوق‌العاده برای هرکاری که میخواید با DOM انجام بدید! تو این سایت برای هرموضوعی از ساده(مثل اضافه کردن کلاس به یک المنت) تا پیشرفته(مثل زوم کردن یه عکس) راه‌حل به همراه کد وجود داره 😍

👨🏻‍💻 آدرس سایت
🚀 لینک گیتهاب

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ یه توصیه برای نوشتن فانکشن‌هایی که بیشتر از یک پارامتر دارند; لطفا به مثالی که تو تصویر هست توجه کنید:

❌ موقع کال کردن فانکشن، عدد ۱۲۳ و استرینگ jack_franklin تا حدی با توجه به اسم فانکشن(saveUserData) قابل حدس هستند که دقیقا به چه دردی میخورن ولی اون بولین false رو واقعا نمیشه به سادگی تشخیص داد که چیه مگه اینکه بریم و کد فانکشن رو بخونیم 🙃

✅ راه حل اینه که بیایم و از آبجکت برای پارامترهای فانکشنمون استفاده کنیم. تو حالت دوم و با استفاده از آبجکت کاملا واضحه که عدد ۱۲۳ برای id یوزرمون هست و استرینگ jack_franklin مربوط به username میشه و بولین false مربوط به resetPassword میشه. اینجوری خوانایی و تمیزی کدمون به شدت بالا میره و نیازی نیست که یکنفر مستقیما به کد فانکشنمون رجوع کنه تا بفهمه هرکدوم از این مقادیر برای چه کاری هستن. از نحوه استفاده کامل متوجه میشه 😊


🆔 @frontcode01 | 👩‍💻🧑‍💻

✅ تمام یونیت های 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 | 👩‍💻🧑‍💻