✅ بررسی Server Action در Next.js

https://frontcast.ir/nextjs-server-actions

🆔 @frontcode01

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

✅ تفاوت پارامتر (parameter) و آرگیومنت (argument) چیست؟

🔹 پارامتر همان ورودی های تابع هست که هر مقداری میتواند داشته باشد.
🔹 آرگیومنت مقادیر مشخصی هست که هنگام کال کردن تابع ، به آن داده میشود.

#interview_question

💡@frontcode01

⚡️ با مشخص کردن اتریبیوت های width و height برای تگ img، مرورگر های مدرن یه فضایی برای عکستون حتی قبل از لود شدنش در نظر میگیرن که با لود شدن عکس، کل layout شیفت نشه یهو و ثابت بمونه 👌🏻

🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 یه روش فوق العاده برای برای گرفتن آخرین آیتم آرایه با Array Destructing !
تو این مثال اول length آرایه رو گرفتیم و بهش اسم "l" دادیم، بعدش با computed property name آخرین آیتم رو (که ایندکسش یه دونه از کل طول آرایه کمتره) رو گرفتیم.

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ با مقدار unset برای پراپرتی all، میتونیم همه استایل های دیفالت مرورگر برای یک المنت رو حذف کنیم!

پ.ن: برای باتن ها خیلی کاربرد داره 🤩

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ یه مقاله به شدت پربار در مورد آنالیز کامل پرفورمنس اپ معروف Notion که در اصل با React زده شده

پ.ن:‌ حتما حتما پیشنهاد میکنم همه React دولوپرها بخونن 🚀

🆔 @frontcode01

🔺 با المنت نیتیو meter میتونید سطح یه چیزی رو نسبت به یه مقدار کلی نشون بدید مثلا اینکه چقدر فضای خالی از حافظه باقی مونده.

پ.ن: راستی، شکل این المنت تو مرورگر های مختلف خیلی باهم فرق میکنه. حتما قبل استفاده به این مورد توجه کنید. البته میشه تا حدی کاستومایزش کرد 👌

لینک MDN

🆔 @frontcode01 | 👩‍💻🧑‍💻

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

✅ خروجی تابع چیست؟

🔹 خروجی تابع مقدار undefined هست و دلیل آن نقطه ویرگول خودکاری هست که جاوااسکریپت آخر خط قرار میده.
🔹 بنابراین return بدون هیچ مقداری تفسیر میشود و مقدار undefined خروجی تابع است.

Automatic semicolon insertion in JavaScript


#interview_question

💡@frontcode01

مرسی که رعایت میکنید 😅❤️

🆔 @frontcode01 | 👩‍💻🧑‍💻

🚀 با Clipboard API جدیدی که برای کپی/پیست کردن تکست وجود داره، میتونید بدون اشغال کردن thread اصلی مرورگر عملیات کپی/پیست رو با جاواسکریپت انجام بدید!
این روش چون async هستش و thread اصلی رو اشغال نمیکنه، طبیعتا پرفورمنس بالاتری هم داره 👌🏻

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ با پلاگین draw.io برای VSCode میتونید یه اپ طراحی SVG رو مستقیم بیارید به ادیتور! تو خود VSCode ادیت کنید و بلافاصله هم استفاده کنید 😊

🔥 لینک پلاگین

🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 با کی‌ورد 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 | 👩‍💻🧑‍💻