فرانت کد | FrontCode

🚀 کاهش چشمگیر زمان بیلد فرانت‌اند کنسول هم‌روش با استفاده از معماری میکرو فرانت‌اند 🚀 در دنیای توسعه نرم‌افزار، بهینه‌سازی و افزایش بهره‌وری اهمیت بالایی دارد. یکی از رویکردها برای رسیدن به این هدف، استفاده از معماری میکروفرانت‌اند است. این معماری با الهام از میکروسرویس‌ها، امکان توسعه و به‌روزرسانی مستقل بخش‌های مختلف یک برنامه را فراهم می‌کند و به تیم‌ها کمک می‌کند تا با سرعت و انعطاف بیشتری عمل کنند. 📈 تجربه هم‌روش: چالش‌ها و راه‌حل‌ها در پروژه تغییر معماری فرانت‌اند کنسول هم‌روش، از پلاگین Module Federation استفاده شد که چالش‌هایی مانند افزایش زمان بیلد و مصرف بالای رم به همراه داشت. تیم هم‌روش با مهاجرت به Rspack، یک باندلر جاوا اسکریپت مبتنی بر Rust، توانست این مشکلات را به‌طور مؤثری حل کند. 🏆 نتایج و دستاوردها 🔹 زمان بیلد پروژه به‌طور چشمگیری کاهش یافت. 🔹 مصرف رم به حداقل رسید. 🔹 تجربه توسعه فرانت‌اند سریع‌تر و لذت‌بخش‌تر شد. 📖 برای کسب اطلاعات بیشتر مقالات زیر را مطالعه کنید: 🔗 معماری میکروفرانت‌اند و Module Federation 🔗 کاهش 100 برابری زمان بیلد فرانت‌اند کنسول هم‌روش 🔹@hamravesh

🚀 کاهش چشمگیر زمان بیلد فرانت‌اند کنسول هم‌روش با استفاده از معماری میکرو فرانت‌اند 🚀 در دنیای توسعه نرم‌افزار، بهینه‌سازی و افزایش بهره‌وری اهمیت بالایی دارد. یکی از رویکردها برای رسیدن به این هدف، استفاده از معماری میکروفرانت‌اند است. این معماری با الهام از میکروسرویس‌ها، امکان توسعه و به‌روزرسانی مستقل بخش‌های مختلف یک برنامه را فراهم می‌کند و به تیم‌ها کمک می‌کند تا با سرعت و انعطاف بیشتری عمل کنند. 📈 تجربه هم‌روش: چالش‌ها و راه‌حل‌ها در پروژه تغییر معماری فرانت‌اند کنسول هم‌روش، از پلاگین Module Federation استفاده شد که چالش‌هایی مانند افزایش زمان بیلد و مصرف بالای رم به همراه داشت. تیم هم‌روش با مهاجرت به Rspack، یک باندلر جاوا اسکریپت مبتنی بر Rust، توانست این مشکلات را به‌طور مؤثری حل کند. 🏆 نتایج و دستاوردها 🔹 زمان بیلد پروژه به‌طور چشمگیری کاهش یافت. 🔹 مصرف رم به حداقل رسید. 🔹 تجربه توسعه فرانت‌اند سریع‌تر و لذت‌بخش‌تر شد. 📖 برای کسب اطلاعات بیشتر مقالات زیر را مطالعه کنید: 🔗 معماری میکروفرانت‌اند و Module Federation 🔗 کاهش 100 برابری زمان بیلد فرانت‌اند کنسول هم‌روش 🔹@hamravesh

🔺 یه هم‌وطن عزیز اومده با صدای جنگ‌های صلیبی برای تایپ‌اسکریپت اکستنشن نوشته 😅 وقتی یه تایپی رو اشتباه اساین کنید ویس "اینجا قرار نمی‌گیرید” پلی می‌شه :)) 🆔 @frontcode01 | 👩‍💻🧑‍💻

دیس و دیس بک فرانت و بک 🚨 🆔 @frontcode01 | 👩‍💻🧑‍💻

🔰 کاربرد use در React 19 🆔 @frontcode01 | 👩‍💻🧑‍💻

✅ برای دسترسی و راحتی کاربران موبایل ، از type مخصوص برای input ها استفاده کنیم 👌 🆔 @frontcode01 | 👩‍💻🧑‍💻

🔰اگر نیاز دارید از css variable درون جاوااسکریپت استفاده کنید خیلی راحت میتونید از getComputedStyle() استفاده کنید 🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ یه مورد از مزیت هایی که CSS grid نسبت به فلکس باکس داشت این بود که یه پراپرتی grid-gap داشتیم که خیلی راحت باهاش فاصله بین آیتما رو تنظیم میکردیم منتها تو فلکس باکس باید مارجین داده میشد. الان با این پراپرتی جدید flex-gap میشه مشابه CSS grid فاصله انداخت بین آیتما 😍 🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 یه مشکلی که با height:100vh داریم اینه که توی موبایل اسکرول میخوره و تمام ارتفاع صفحه مرورگر همراه آدرس بار (نه فاصله از آدرس بار تا انتهای صفحه) ولی با این تکنیک میشه حلش کرد 😇 🆔 @frontcode01 | 👩‍💻🧑‍💻

📌اگه تو پروژه وبتون عکسی دارید که پس زمینش transparent هستش و می‌خواید بهش سایه بدید به جای box-shodow از drop-shadow استفاده کنید تا اینطوری زیبا شه 🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ اگر با اضافه کردن سایه به عکس های ترنسپرنت مشکل دارید میتونید با filter: drop-shadow مشکلتون رو حل کنید 🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ از تب compatibility فایرفاکس ، میتونین ساپورت مرورگرها از کدهای #CSS که میزنید رو ببینید ✅ این دیتا رو هم بر اساس جدول ساپورت MDN نشون میده 🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 با pseudo سلکتور placeholder-shown میتونید استایل #CSS رو فقط زمانی که placeholder اینپوت نمایش داده میشه اعمال کنید 🆔 @frontcode01 | 👩‍💻🧑‍💻

⚛️ با هوک useWorker میتونید تسک های به شدت سنگین (مثل sort کردن یه آرایه با ۵ میلیون عضو رندوم!) که تو اپ #React انجام میدید رو بجای thread اصلی مرورگر، بفرستید به Web Worker تا جلوی رندر شدن UI رو نگیره لینک گیتهاب این پکیج 🎉 🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 با Web Share API میتونید مشابه اپ های نیتیو، منوی share رو باز کنید تا از اون طریق، کاربر قادر باشه لینک، تکست و فایل رو ارسال کنه پ.ن: مرز بین وب اپ ها و اپ های نیتیو روز به روز داره باریک تر میشه 😍 🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ خیلی وقتا میشه که یه چیزو ایمپورت میکنیم ولی استفاده نمیکنیم. در #VSCode میتونیم با Shift + Alt + O (در ویندوز و لینوکس) یا Shift + Option + O (در مک)، این ایمپورت های اضافی رو به طور خودکار حذف کنیم. پ.ن: این دستور ترتیب ایمپورت‌ها رو هم مرتب میکنه 🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️نکته CSS: ❌ یه مشکلی که تو خیلی از کدهای CSS میبینم اینه که برای فاصله انداختن بین آیتم های یک لیست، به همه آیتم ها یه مارجینی میدن، بعد چون آیتم آخر نیازی به فاصله نداره، مارجین اونو صفر میدن. این پترن جالبی نیست ✅ بجاش میتونید از سلکتور not داخل CSS استفاده کنید که نیازی هم به override کردن استایل ها نباشه. اینجوری میتونید مستقیم به همه آیتم ها "به جز" آیتم آخر یه مارجین بدید که نیازی هم به override کردن نباشه پ.ن: سلکتور not خیلی کاربردهای دیگه هم داره. اینجا فقط یه موردشو بررسی کردم 🆔 @frontcode01 | 👩‍💻🧑‍💻

✅ یه مقاله فوق العاده در مورد ساخت و مدیریت اپلیکیشن های "غول" جاواسکریپت 🔥 لینک مقاله مدیوم 📝 لینک ویدیو YouTube 📹 🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️چیزی که راه حل اصلیش جاواسکریپت نیست، با جاواسکریپت انجام ندید!‌ نشون دادن متن انگلیسی با حروف بزرگ یکی از اون کاراست که دقیقا باید با CSS هندل بشه نه جاواسکریپت. با پراپرتی text-transform میتونید هر تکستی رو که میخواید capitalize کنید. 🆔 @frontcode01 | 👩‍💻🧑‍💻