فرانت کد | FrontCode

✅ تمام یونیت های CSS رو میتونید تو این تصویر با توضیحاتشون ببینید 👌🏻 پ ن : تو جلسات مصاحبه هم معمولا از این موارد سوال پرسیده میشه ✍️ 🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ یه توصیه برای نوشتن فانکشن‌هایی که بیشتر از یک پارامتر دارند; لطفا به مثالی که تو تصویر هست توجه کنید: ❌ موقع کال کردن فانکشن، عدد ۱۲۳ و استرینگ jack_franklin تا حدی با توجه به اسم فانکشن(saveUserData) قابل حدس هستند که دقیقا به چه دردی میخورن ولی اون بولین false رو واقعا نمیشه به سادگی تشخیص داد که چیه مگه اینکه بریم و کد فانکشن رو بخونیم 🙃 ✅ راه حل اینه که بیایم و از آبجکت برای پارامترهای فانکشنمون استفاده کنیم. تو حالت دوم و با استفاده از آبجکت کاملا واضحه که عدد ۱۲۳ برای id یوزرمون هست و استرینگ jack_franklin مربوط به username میشه و بولین false مربوط به resetPassword میشه. اینجوری خوانایی و تمیزی کدمون به شدت بالا میره و نیازی نیست که یکنفر مستقیما به کد فانکشنمون رجوع کنه تا بفهمه هرکدوم از این مقادیر برای چه کاری هستن. از نحوه استفاده کامل متوجه میشه 😊 🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ یه سایت فوق‌العاده برای هرکاری که میخواید با DOM انجام بدید! تو این سایت برای هرموضوعی از ساده(مثل اضافه کردن کلاس به یک المنت) تا پیشرفته(مثل زوم کردن یه عکس) راه‌حل به همراه کد وجود داره 😍 👨🏻‍💻 آدرس سایت 🚀 لینک گیتهاب 🆔 @frontcode01 | 👩‍💻🧑‍💻

👨‍💼 Interview question / سوال مصاحبه ✅ انواع داده در جاوااسکریپت : 🔹 Primitive value : 🔸 Boolean 🔸 Null 🔸 Undefined 🔸 Number 🔸 String 🔸 Symbol 🔹 Reference value : 🔸 Object 🔸 Array 🔸 Function 🔻 البته که توابع و آرایه ها هم از نوع آبجکت هستن 🔗 مقایسه مقادیر Primitive و Reference در جاوااسکریپت #interview_question 💡@frontcode01

⚡️ یه مشکلی که ایونت mousemove داره اینه که فقط تو دیوایس هایی که ماوس دارن کار میکنه و مثلا توی گوشی ها که با تاچ کار میکنن این ایونت عملا کار نمیکنه! برای حل این مشکل میشه: ۱- یه ایونت لیسنر هم برای touchmove نوشت که روی گوشی هم ساپورت بشه(عملا دو تا ایونت لیسنر خواهید داشت; یکی mousemove، یکی هم touchmove) که پیشنهاد نمیشه ❌ ۲- از ایونت pointermove استفاده کنید که شامل این دو تا ایونت هم میشه و مشکلی در هیچ دیوایسی نخواهید داشت ✅ 🆔 @frontcode01 | 👩‍💻🧑‍💻

✅ معجزه مهارت های نرم در برنامه نویسی 📣 این تجربیات ارزشمند رو از دستش ندید ♦️ https://youtu.be/RoC1vMOBzOc?si=aB_5aHgqFGRVf0-t 🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ با مقدار wavy برای text-decoration میتونید underline موج‌دار به تکستتون بدید! 🆔 @frontcode01 | 👩‍💻🧑‍💻

💊 با داشبورد CrUX کروم به راحتی میتونید تجربه کاربری وبسایتتون رو با متریک های مدرنی نظیر Web Vitals و خیلی جزئیات دیگه بسنجید 🔥 🆔 @frontcode01 | 👩‍💻🧑‍💻

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

🚀 با سلکتور not: میتونید با اون المنت های که فرزند برخی المنت های دیگر نیستند را تشخیص دهید و استایل اعمال کنید. 🆔 @frontcode01 | 👩‍💻🧑‍💻

مقدار X رو شما در کامنت ها حدس بزنید ❓ اگه دوست داشتین دلیلتون رو هم بنویسید ❤️ 🆔 @frontcode01 | 👩‍💻🧑‍💻

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

⚡️ استایل های دیفالت جدید برای فرم‌ها در کروم ۸۳ و مقایسش با ورژن قبلی کروم رو میتونید در تصویر مشاهده کنید #chrome 🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ با پلاگین typescript-expect-plugin میتونید تست‌های فانکشنتون رو مستقیم چند خط بالاتر از جایی که دارید فانکشن رو تعریف میکنید، بنویسید و نیازی به فایل جدای تست ندارید پ.ن: برای کسایی که تازه دارن تست نوشتن رو شروع میکنن میتونه مناسب باشه ولی یکمی که scale بزرگتر بشه، اصلا پیشنهاد نمیشه 😁 #typescript #ts 🆔 @frontcode01 | 👩‍💻🧑‍💻

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

⚡️ یه کار جالب که میتونید با وریبل‌های "گلوبال" CSS انجام بدید اینه که مقدارشون رو "فقط برای یه کلاس خاص" override کنید ✅ تو این مثال در کلاس remove-shadow مقدار وریبل گلوبال component-shadow رو none میدیم تا هر المنتی که این کلاس رو داره shadowش حذف بشه در حالی که خود وریبل component-shadow بدون تغییر در جاهای دیگه کد قابل استفاده هستش! 🆔 @frontcode01 | 👩‍💻🧑‍💻

🚀 با پراپرتی backdrop-filter میتونید به هرچیزی که پشت یک المنت دیده میشه افکت بدید. مثلا افکت blur بدید پ.ن: این افکت تو UIهای اپل خیلی استفاده میشه 🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 یه راه جالب برای اینکه پاس دادن پارامتر فانکشنتون رو اجباری کنید. لطفا به تصویر توجه کنید:‌ اینجا یه فانکشن isRequired داریم که returnش مقدار دیفالت پارامتر num هستش، بنابراین اگه موقع کال کردن فانکشن print، پارامتر num رو پاس ندیم، مقدار دیفالت رو میگیره و چون isRequired داره ارور throw میکنه، عملا فانکشن print هم خط های بعدیشو ران نمیکنه و ارور رو نمایش میده. 🆔 @frontcode01 | 👩‍💻🧑‍💻