🔺 مدیا فیچر any-hover
با این مدیا فیچر میتونیم استایل رو زمانی اعمال کنیم که یوزر امکان هاور کردن/نکردن رو داره
مثلا تو صفحات کامیپوتر قراره با هاور کردن روی عکس، توضیحاتش نمایش داده شه ولی توی گوشی طبیعتا به مشکل میخوریم این موقع میتونیم از
استفاده کنیم تا متن عکس رو در حالت اولیه در گوشی نشون بدیم و نیازی به هاور نباشه 👌
🆔 @frontcode01
با این مدیا فیچر میتونیم استایل رو زمانی اعمال کنیم که یوزر امکان هاور کردن/نکردن رو داره
مثلا تو صفحات کامیپوتر قراره با هاور کردن روی عکس، توضیحاتش نمایش داده شه ولی توی گوشی طبیعتا به مشکل میخوریم این موقع میتونیم از
@media (any-hover:none) استفاده کنیم تا متن عکس رو در حالت اولیه در گوشی نشون بدیم و نیازی به هاور نباشه 👌
🆔 @frontcode01
👍21❤1
خروجی console رو شما در کامنت ها حدس بزنید 🤔
اگه دوست داشتین دلیلتون رو هم بنویسید ❤️
🆔 @frontcode01 | 👩💻🧑💻
اگه دوست داشتین دلیلتون رو هم بنویسید ❤️
🆔 @frontcode01 | 👩💻🧑💻
⚡️ با پاس دادن Infinity به عنوان آرگیومنت متد flat، میتونیم حتی آرایه ای رو که n لول هم آرایه nest شده داره، فلت کنیم 👌
🆔 @frontcode01 | 👩💻🧑💻
🆔 @frontcode01 | 👩💻🧑💻
👍32❤2🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
🔺 میدونستین برای کامیت کردن میتونیم از فلگ m- چندبار استفاده کنیم تا به کامیت پاراگراف اضافه کنیم؟
🆔 @frontcode01 | 👩💻🧑💻
🆔 @frontcode01 | 👩💻🧑💻
👍19
⚡️ میتونیم مشابه تگ img تو HTML، برای عکسی که با پراپرتی content تو CSS میدیم هم alt تکستش رو با یه اسلش(/) تعیین کنیم 🔥
سینتکس عجیبی داره...
🆔 @frontcode01 | 👩💻🧑💻
سینتکس عجیبی داره...
🆔 @frontcode01 | 👩💻🧑💻
👍25❤2
👨💼 Interview question / سوال مصاحبه
✅ تفاوت پارامتر (parameter) و آرگیومنت (argument) چیست؟
🔹 پارامتر همان ورودی های تابع هست که هر مقداری میتواند داشته باشد.
🔹 آرگیومنت مقادیر مشخصی هست که هنگام کال کردن تابع ، به آن داده میشود.
#interview_question
💡@frontcode01
✅ تفاوت پارامتر (parameter) و آرگیومنت (argument) چیست؟
🔹 پارامتر همان ورودی های تابع هست که هر مقداری میتواند داشته باشد.
🔹 آرگیومنت مقادیر مشخصی هست که هنگام کال کردن تابع ، به آن داده میشود.
#interview_question
💡@frontcode01
👍19🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ با مشخص کردن اتریبیوت های width و height برای تگ img، مرورگر های مدرن یه فضایی برای عکستون حتی قبل از لود شدنش در نظر میگیرن که با لود شدن عکس، کل layout شیفت نشه یهو و ثابت بمونه 👌🏻
🆔 @frontcode01 | 👩💻🧑💻
🆔 @frontcode01 | 👩💻🧑💻
👍32🔥4❤1
🔺 یه روش فوق العاده برای برای گرفتن آخرین آیتم آرایه با Array Destructing !
تو این مثال اول length آرایه رو گرفتیم و بهش اسم "l" دادیم، بعدش با computed property name آخرین آیتم رو (که ایندکسش یه دونه از کل طول آرایه کمتره) رو گرفتیم.
🆔 @frontcode01 | 👩💻🧑💻
تو این مثال اول length آرایه رو گرفتیم و بهش اسم "l" دادیم، بعدش با computed property name آخرین آیتم رو (که ایندکسش یه دونه از کل طول آرایه کمتره) رو گرفتیم.
🆔 @frontcode01 | 👩💻🧑💻
👍7👎7🔥4
⚡️ با مقدار unset برای پراپرتی all، میتونیم همه استایل های دیفالت مرورگر برای یک المنت رو حذف کنیم!
پ.ن: برای باتن ها خیلی کاربرد داره 🤩
🆔 @frontcode01 | 👩💻🧑💻
پ.ن: برای باتن ها خیلی کاربرد داره 🤩
🆔 @frontcode01 | 👩💻🧑💻
👍31❤2🔥1
⚡️ یه مقاله به شدت پربار در مورد آنالیز کامل پرفورمنس اپ معروف Notion که در اصل با React زده شده
پ.ن: حتما حتما پیشنهاد میکنم همه React دولوپرها بخونن 🚀
🆔 @frontcode01
پ.ن: حتما حتما پیشنهاد میکنم همه React دولوپرها بخونن 🚀
🆔 @frontcode01
PerfPerfPerf
Case study: Analyzing Notion app performance
How to make a React app load ~30% faster – by tuning some configs and delaying some scripts
🔥9
This media is not supported in your browser
VIEW IN TELEGRAM
🔺 با المنت نیتیو meter میتونید سطح یه چیزی رو نسبت به یه مقدار کلی نشون بدید مثلا اینکه چقدر فضای خالی از حافظه باقی مونده.
پ.ن: راستی، شکل این المنت تو مرورگر های مختلف خیلی باهم فرق میکنه. حتما قبل استفاده به این مورد توجه کنید. البته میشه تا حدی کاستومایزش کرد 👌
لینک MDN
🆔 @frontcode01 | 👩💻🧑💻
پ.ن: راستی، شکل این المنت تو مرورگر های مختلف خیلی باهم فرق میکنه. حتما قبل استفاده به این مورد توجه کنید. البته میشه تا حدی کاستومایزش کرد 👌
لینک MDN
🆔 @frontcode01 | 👩💻🧑💻
👍21
👨💼 Interview question / سوال مصاحبه
✅ خروجی تابع چیست؟
🔹 خروجی تابع مقدار undefined هست و دلیل آن نقطه ویرگول خودکاری هست که جاوااسکریپت آخر خط قرار میده.
🔹 بنابراین return بدون هیچ مقداری تفسیر میشود و مقدار undefined خروجی تابع است.
Automatic semicolon insertion in JavaScript
#interview_question
💡@frontcode01
✅ خروجی تابع چیست؟
🔹 خروجی تابع مقدار undefined هست و دلیل آن نقطه ویرگول خودکاری هست که جاوااسکریپت آخر خط قرار میده.
🔹 بنابراین return بدون هیچ مقداری تفسیر میشود و مقدار undefined خروجی تابع است.
Automatic semicolon insertion in JavaScript
#interview_question
💡@frontcode01
👍15🤣1
🚀 با Clipboard API جدیدی که برای کپی/پیست کردن تکست وجود داره، میتونید بدون اشغال کردن thread اصلی مرورگر عملیات کپی/پیست رو با جاواسکریپت انجام بدید!
این روش چون async هستش و thread اصلی رو اشغال نمیکنه، طبیعتا پرفورمنس بالاتری هم داره 👌🏻
🆔 @frontcode01 | 👩💻🧑💻
این روش چون async هستش و thread اصلی رو اشغال نمیکنه، طبیعتا پرفورمنس بالاتری هم داره 👌🏻
🆔 @frontcode01 | 👩💻🧑💻
👍18❤2
⚡️ با پاس دادن آپشن once: true به ایونت لیسنری که با جاواسکریپت تعریف میکنید، میتونید تعیین کنید که لیسنر فقط یکبار اجرا بشه و بعدش خودش اتوماتیک remove کنه لیسنر رو 😍
🆔 @frontcode01 | 👩💻🧑💻
🆔 @frontcode01 | 👩💻🧑💻
👍21🔥5❤1
⚡️ با پلاگین draw.io برای VSCode میتونید یه اپ طراحی SVG رو مستقیم بیارید به ادیتور! تو خود VSCode ادیت کنید و بلافاصله هم استفاده کنید 😊
🔥 لینک پلاگین
🆔 @frontcode01 | 👩💻🧑💻
🔥 لینک پلاگین
🆔 @frontcode01 | 👩💻🧑💻
👍18🔥4❤2
⚡️ یک نمونه کاربردی دیگه از سلکتور "is" و ترکیبش با سلکتور "+"; تو این مثال با استفاده از ترکیب این دو سلکتور تگ های headingی که بعد از پاراگراف ها قرار دارن رو انتخاب کردیم و بهشون یه مارجین دادیم. این تکنیک تو صفحات پست و مقاله فوق العادس 😍
🆔 @frontcode01 | 👩💻🧑💻
🆔 @frontcode01 | 👩💻🧑💻
❤11👍4🔥1