🔺 با کی‌ورد globalThis که به صورت دیفالت تو ES2020 اضافه شده،‌ میتونید بدون مشکلات زیادی که خود کی‌ورد this داره، به آبجکت گلوبال دسترسی داشته باشید.

پ.ن:‌این آبجکت گلوبال در محیط مرورگر، همون window هستش و در ران‌تایم های مختلف میتونه به چیزای دیگه اشاره کنه

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ موقع destructure کردن میتونید مقدار دیفالت وریبل رو از وریبل قبلیش بگیرید! تو این مثال، مقدار دیفالت nickname، همون مقدار name هستش

🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 یه راه جالب برای اینکه پاس دادن پارامتر فانکشنتون رو اجباری کنید. لطفا به تصویر توجه کنید:‌

اینجا یه فانکشن isRequired داریم که returnش مقدار دیفالت پارامتر num هستش، بنابراین اگه موقع کال کردن فانکشن print، پارامتر num رو پاس ندیم، مقدار دیفالت رو میگیره و چون isRequired داره ارور throw میکنه، عملا فانکشن print هم خط های بعدیشو ران نمیکنه و ارور رو نمایش میده.

🆔 @frontcode01 | 👩‍💻🧑‍💻

🚀 با پراپرتی backdrop-filter میتونید به هرچیزی که پشت یک المنت دیده میشه افکت بدید. مثلا افکت blur بدید

پ.ن: این افکت تو UIهای اپل خیلی استفاده میشه

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ یه کار جالب که میتونید با وریبل‌های "گلوبال" CSS انجام بدید اینه که مقدارشون رو "فقط برای یه کلاس خاص" override کنید

✅ تو این مثال در کلاس remove-shadow مقدار وریبل گلوبال component-shadow رو none میدیم تا هر المنتی که این کلاس رو داره shadowش حذف بشه در حالی که خود وریبل component-shadow بدون تغییر در جاهای دیگه کد قابل استفاده هستش!

🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 در حالت عادی حتی اگه مقدار z-index برای pseudo elements (همون after و before) رو کمتر از مقدار z-index برای parentشون بدید، بازم روی parent قرار میگیرن(شکل داخل کادر قرمز). برای اینکه pseudo المنت‌ها زیر parent قرار بگیرن "حتما" باید z-index منفی بهشون بدید!

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ با پلاگین typescript-expect-plugin میتونید تست‌های فانکشنتون رو مستقیم چند خط بالاتر از جایی که دارید فانکشن رو تعریف میکنید، بنویسید و نیازی به فایل جدای تست ندارید

پ.ن: برای کسایی که تازه دارن تست نوشتن رو شروع میکنن میتونه مناسب باشه ولی یکمی که scale بزرگتر بشه، اصلا پیشنهاد نمیشه 😁

#typescript
#ts

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ استایل های دیفالت جدید برای فرم‌ها در کروم ۸۳ و مقایسش با ورژن قبلی کروم رو میتونید در تصویر مشاهده کنید

#chrome

🆔 @frontcode01 | 👩‍💻🧑‍💻

وقتی تو بیمارستان داری میمیری و کارفرما میپرسه تغییرات چیشد

🆔 @frontcode01 | 👩‍💻🧑‍💻

مقدار X رو شما در کامنت ها حدس بزنید ❓
اگه دوست داشتین دلیلتون رو هم بنویسید ❤️

🆔 @frontcode01 | 👩‍💻🧑‍💻

🚀 با سلکتور not: میتونیم اون المنت های که فرزند برخی المنت های دیگر نیستند را تشخیص دهیم و استایل اعمال کنیم.

🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 با استفاده از شبه‌کلاس focus-within: میشه برای زمانی که خود اِلِمان یا نوادگانش در وضعیت focus قرار گرفته، استایل جداگانه‌ای تعریف کرد.
مثلا تاکید کردن رو فیلدی که کاربر پر می‌کنه، مرحله‌ای که در اون قرار داره یا هر استفاده‌ی دیگه‌ای که منجر به تجربه‌ی بهتر کاربر بشه!

🆔 @frontcode01 | 👩‍💻🧑‍💻

💊 با داشبورد CrUX کروم به راحتی میتونید تجربه کاربری وبسایتتون رو با متریک های مدرنی نظیر Web Vitals و خیلی جزئیات دیگه بسنجید 🔥

🆔 @frontcode01 | 👩‍💻🧑‍💻

✅ معجزه مهارت های نرم در برنامه نویسی

📣 این تجربیات ارزشمند رو از دستش ندید


♦️ https://youtu.be/RoC1vMOBzOc?si=aB_5aHgqFGRVf0-t


🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ یه مشکلی که ایونت mousemove داره اینه که فقط تو دیوایس هایی که ماوس دارن کار میکنه و مثلا توی گوشی ها که با تاچ کار میکنن این ایونت عملا کار نمیکنه! برای حل این مشکل میشه:

۱- یه ایونت لیسنر هم برای touchmove نوشت که روی گوشی هم ساپورت بشه(عملا دو تا ایونت لیسنر خواهید داشت; یکی mousemove، یکی هم touchmove) که پیشنهاد نمیشه ❌

۲- از ایونت pointermove استفاده کنید که شامل این دو تا ایونت هم میشه و مشکلی در هیچ دیوایسی نخواهید داشت ✅


🆔 @frontcode01 | 👩‍💻🧑‍💻

👨‍💼 Interview question / سوال مصاحبه

✅ انواع داده در جاوااسکریپت :

🔹 Primitive value :
🔸 Boolean
🔸 Null
🔸 Undefined
🔸 Number
🔸 String
🔸 Symbol

🔹 Reference value :
🔸 Object
🔸 Array
🔸 Function

🔻 البته که توابع و آرایه ها هم از نوع آبجکت هستن

🔗 مقایسه مقادیر Primitive و Reference در جاوااسکریپت

#interview_question

💡@frontcode01