🔺 در حالت عادی حتی اگه مقدار 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

⚡️ یه سایت فوق‌العاده برای هرکاری که میخواید با 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 | 👩‍💻🧑‍💻