حباب هوش مصنوعی شکست! 🫧
اخیراً یک مدل هوش مصنوعی به نام DeepSeek از چین معرفی شد که توجه بسیاری به خودش جلب کرد. این مدل زبانی عملکردی شبیه به GPT داره و از طریق پرامت های کاربران، پاسخهای خودش رو تولید میکنه اما تفاوت اصلی اون در هزینه ها و روشهای توسعه اون هست. گفته میشه DeepSeek با بودجه حدود ۵ تا ۶ میلیون دلار ساخته شده و در برخی آزمون ها حتی از مدل های پیشرفته تری مثل GPT بهتر عمل کرده. این اتفاق تأثیر زیادی روی بازار گذاشته به طوری که ارزش سهام شرکت هایی مثل انویدیا و open ai کاهش پیدا کرده.
قبل از این، شرکتهایی مثل انویدیا و open ai ادعا میکردن توسعه هوش مصنوعی به منابع سخت افزاری عظیم و سرمایه گذاری کلان نیاز داره. انویدیا با فروش سخت افزارهای ویژه به غولهای فناوری مانند آمازون و مایکروسافت سود زیادی کسب میکرد و open ai هم بر پیچیدگی توسعه مدلهای زبانی تأکید داشت، تا این فناوری رو در انحصار خودش نگه داره. اما ظهور دیپ سیک این narrative رو زیر سوال برد. تیم توسعه دهنده دیپ سیک نشون داد با بهینه سازی روشهای قدیمی و کاهش مصرف منابع، میشه مدلی کارآمد حتی روی سیستمهای گیمینگ معمولی ساخت، بدون نیاز به ابررایانه ها یا بودجه های میلیاردی 💸
یکی از نقاط قوت DeepSeek بازنگری در الگوریتم های سنتی یادگیری ماشین بود، که باعث شد مصرف حافظه و انرژی تا حد چشمگیری کاهش پیدا کنه. این بهینه سازی هزینههای توسعه رو از صدها میلیون دلار به کمتر از ۱۰ میلیون دلار رسوند. چنین دستاوردی نه تنها انحصار شرکتهای بزرگ رو شکست، بلکه اثبات کرد دانش کافی و خلاقیت میتونه محدودیت های مالی و سخت افزاری رو جبران کنه.
این اتفاق رو سرآغاز تحولی در حوزه هوش مصنوعی میتونیم بدونیم. حالا دیگه هر تیم کوچیک یا حتی افراد مستقل با دانش فنی مناسب امکان ساخت مدلهای رقابتی رو دارن. موفقیت دیپ سیک همچنین نشون میده ادعاهای شرکتهای بزرگ درباره ضرورت منابع انحصاری همیشه واقعی نیست و تنها راهی برای حفظ سلطه بازار هست. حالا چالش جدیدی پیش روی صنعت قرار گرفته: آیا این روند بازتر شدن فناوری ادامه پیدا میکنه یا غول های تکنولوژی راهی برای بازپسگیری انحصار پیدا میکنن؟ 🤔
🔗 همین الان DeepSeek رو امتحان کن
#ai
@CodeModule
اخیراً یک مدل هوش مصنوعی به نام DeepSeek از چین معرفی شد که توجه بسیاری به خودش جلب کرد. این مدل زبانی عملکردی شبیه به GPT داره و از طریق پرامت های کاربران، پاسخهای خودش رو تولید میکنه اما تفاوت اصلی اون در هزینه ها و روشهای توسعه اون هست. گفته میشه DeepSeek با بودجه حدود ۵ تا ۶ میلیون دلار ساخته شده و در برخی آزمون ها حتی از مدل های پیشرفته تری مثل GPT بهتر عمل کرده. این اتفاق تأثیر زیادی روی بازار گذاشته به طوری که ارزش سهام شرکت هایی مثل انویدیا و open ai کاهش پیدا کرده.
قبل از این، شرکتهایی مثل انویدیا و open ai ادعا میکردن توسعه هوش مصنوعی به منابع سخت افزاری عظیم و سرمایه گذاری کلان نیاز داره. انویدیا با فروش سخت افزارهای ویژه به غولهای فناوری مانند آمازون و مایکروسافت سود زیادی کسب میکرد و open ai هم بر پیچیدگی توسعه مدلهای زبانی تأکید داشت، تا این فناوری رو در انحصار خودش نگه داره. اما ظهور دیپ سیک این narrative رو زیر سوال برد. تیم توسعه دهنده دیپ سیک نشون داد با بهینه سازی روشهای قدیمی و کاهش مصرف منابع، میشه مدلی کارآمد حتی روی سیستمهای گیمینگ معمولی ساخت، بدون نیاز به ابررایانه ها یا بودجه های میلیاردی 💸
یکی از نقاط قوت DeepSeek بازنگری در الگوریتم های سنتی یادگیری ماشین بود، که باعث شد مصرف حافظه و انرژی تا حد چشمگیری کاهش پیدا کنه. این بهینه سازی هزینههای توسعه رو از صدها میلیون دلار به کمتر از ۱۰ میلیون دلار رسوند. چنین دستاوردی نه تنها انحصار شرکتهای بزرگ رو شکست، بلکه اثبات کرد دانش کافی و خلاقیت میتونه محدودیت های مالی و سخت افزاری رو جبران کنه.
این اتفاق رو سرآغاز تحولی در حوزه هوش مصنوعی میتونیم بدونیم. حالا دیگه هر تیم کوچیک یا حتی افراد مستقل با دانش فنی مناسب امکان ساخت مدلهای رقابتی رو دارن. موفقیت دیپ سیک همچنین نشون میده ادعاهای شرکتهای بزرگ درباره ضرورت منابع انحصاری همیشه واقعی نیست و تنها راهی برای حفظ سلطه بازار هست. حالا چالش جدیدی پیش روی صنعت قرار گرفته: آیا این روند بازتر شدن فناوری ادامه پیدا میکنه یا غول های تکنولوژی راهی برای بازپسگیری انحصار پیدا میکنن؟ 🤔
🔗 همین الان DeepSeek رو امتحان کن
#ai
@CodeModule
⚡21❤🔥2👌2🔥1
Trust Proxy توی Express.js چیه و دقیقاً چه کاری میکنه؟ 🤔
Trust Proxy یه تنظیم توی Express هست که به اپلیکیشن میگه آیا باید به اطلاعاتی که توی هدرهای X-Forwarded-For و X-Forwarded-Proto میاد، اعتماد کنه یا نه.
حالا این یعنی چی؟ یعنی وقتی برنامه بک اند یه سرور واسطهای (مثل Nginx یا Cloudflare) قرار داره، IP و پروتکل واقعی کاربر توی این هدرها قرار میگیره. Express بهطور پیشفرض به این اطلاعات اعتماد نداره اما اگه trust proxy رو فعال کنید، Express از این هدرها برای تعیین IP و پروتکل واقعی کاربر استفاده میکنه.
۲. Trust Proxy به چه دردی میخوره؟
وقتی که برنامه شما رو یه پراکسی معکوس (Reverse Proxy) یا یه لود بالانسر اجرا میشه، در حالت عادی Express فقط IP و اطلاعاتی که از سمت اون پراکسی دریافت کرده رو میبینه، نه اطلاعات اصلی کاربر. این یعنی ممکنه req.ip اشتباه باشه، req.protocol به جای
اینجاست که Trust Proxy به درد میخوره 👇🏻
- وقتی فعال بشه، Express مقدار واقعی IP کاربر رو از X-Forwarded-For میخونه.
- req.protocol رو بر اساس X-Forwarded-Proto تنظیم میکنه.
- req.hostname رو درست مقداردهی میکنه
۳. چجوری Trust Proxy رو توی Express فعال کنیم؟
خیلی ساده!
با این تنظیم:
- req.ip مقدار واقعی آیپی کاربر رو میده.
- req.protocol مقدار واقعی http یا https رو نشون میده.
۴. Trust Proxy چه مقدارهایی میگیره؟
مقدار
Trust Proxy یه تنظیم مهمه که وقتی برنامتون یه پراکسی مثل Nginx یا Cloudflare باشه، کمک میکنه Express اطلاعات واقعی کاربر رو تشخیص بده. اما باید دقت کنی که به هر پراکسیای اعتماد نکنید! برای امنیت بیشتر، فقط به آیپیهایی که واقعاً Proxyهای خودتون هستن اجازه بدید.
برای جزئیات بیشتر میتونید به مستندات رسمی Express در مورد TrustProxy مراجعه کنید، که این جنبه ها رو با عمق بیشتری توضیح میده.
#nodejs #express
@CodeModule
Trust Proxy یه تنظیم توی Express هست که به اپلیکیشن میگه آیا باید به اطلاعاتی که توی هدرهای X-Forwarded-For و X-Forwarded-Proto میاد، اعتماد کنه یا نه.
حالا این یعنی چی؟ یعنی وقتی برنامه بک اند یه سرور واسطهای (مثل Nginx یا Cloudflare) قرار داره، IP و پروتکل واقعی کاربر توی این هدرها قرار میگیره. Express بهطور پیشفرض به این اطلاعات اعتماد نداره اما اگه trust proxy رو فعال کنید، Express از این هدرها برای تعیین IP و پروتکل واقعی کاربر استفاده میکنه.
۲. Trust Proxy به چه دردی میخوره؟
وقتی که برنامه شما رو یه پراکسی معکوس (Reverse Proxy) یا یه لود بالانسر اجرا میشه، در حالت عادی Express فقط IP و اطلاعاتی که از سمت اون پراکسی دریافت کرده رو میبینه، نه اطلاعات اصلی کاربر. این یعنی ممکنه req.ip اشتباه باشه، req.protocol به جای
https
مقدار http
داشته باشه و کلی مشکل دیگه. اینجاست که Trust Proxy به درد میخوره 👇🏻
- وقتی فعال بشه، Express مقدار واقعی IP کاربر رو از X-Forwarded-For میخونه.
- req.protocol رو بر اساس X-Forwarded-Proto تنظیم میکنه.
- req.hostname رو درست مقداردهی میکنه
۳. چجوری Trust Proxy رو توی Express فعال کنیم؟
خیلی ساده!
const app = express();
app.set("trust proxy", true);
با این تنظیم:
- req.ip مقدار واقعی آیپی کاربر رو میده.
- req.protocol مقدار واقعی http یا https رو نشون میده.
اما... فعال کردنش به این سادگی هم نیست! چون ممکنه سرورهای پراکسی مختلفی جلوی اپلیکیشن باشن و تو نیاز داشته باشی مشخص کنی که به کدوم پراکسیها اعتماد داری.
۴. Trust Proxy چه مقدارهایی میگیره؟
مقدار
true
همیشه بهترین گزینه نیست. Express چند مدل مقدار رو قبول میکنه: app.set("trust proxy", false); // پیشفرض، هیچ پراکسیای رو قبول نمیکنه.
app.set("trust proxy", true); // به همه پراکسیها اعتماد میکنه.
app.set("trust proxy", "loopback"); // فقط به 127.0.0.1 اعتماد میکنه.
app.set("trust proxy", "127.0.0.1"); // فقط به این IP خاص اعتماد میکنه.
app.set("trust proxy", ["192.168.1.1", "10.0.0.1"]); // لیستی از پراکسیهای قابلاعتماد.
app.set("trust proxy", 2); // از آخرین دو پراکسی مقدار رو میخونه.
- مقدار 2 یعنی چی؟
وقتی مقدار 2 رو میدید، Express میاد ip واقعی کاربر رو از دو پراکسی آخر توی X-Forwarded-For استخراج میکنه. این کار به درد جایی میخوره که چند تا سرور بین کاربر و اپلیکیشن هستن.
- پس مقدار true بدیم یا نه؟
بهتره فقط به پراکسیهایی که میشناسی اعتماد کنید. مثلاً اگه سرور فقط Cloudflare یا Nginx قرار داره، میتونید فقط به اون آیپیها اعتماد کنین تا از IP Spoofing جلوگیری بشه.
Trust Proxy یه تنظیم مهمه که وقتی برنامتون یه پراکسی مثل Nginx یا Cloudflare باشه، کمک میکنه Express اطلاعات واقعی کاربر رو تشخیص بده. اما باید دقت کنی که به هر پراکسیای اعتماد نکنید! برای امنیت بیشتر، فقط به آیپیهایی که واقعاً Proxyهای خودتون هستن اجازه بدید.
برای جزئیات بیشتر میتونید به مستندات رسمی Express در مورد TrustProxy مراجعه کنید، که این جنبه ها رو با عمق بیشتری توضیح میده.
#nodejs #express
@CodeModule
⚡13👌3
یه جوری راجب همه چیز پست زدیم که دیگه واقعا ایده ندارم.
یه ساعت درگیر پست زدن راجب یه موضوع بودم، بعد ک تموم شد فهمیدیم راجب اون موضوع قبلا پست گذاشتیم :)))
نظرتون چیه یکم از دنیای جاوااسکریپت خارج بشیم و یه سری به باقی زبان و اکوسیستم ها بزنیم؟
یه ساعت درگیر پست زدن راجب یه موضوع بودم، بعد ک تموم شد فهمیدیم راجب اون موضوع قبلا پست گذاشتیم :)))
نظرتون چیه یکم از دنیای جاوااسکریپت خارج بشیم و یه سری به باقی زبان و اکوسیستم ها بزنیم؟
👌46⚡1
Code Module | کد ماژول
یه جوری راجب همه چیز پست زدیم که دیگه واقعا ایده ندارم. یه ساعت درگیر پست زدن راجب یه موضوع بودم، بعد ک تموم شد فهمیدیم راجب اون موضوع قبلا پست گذاشتیم :))) نظرتون چیه یکم از دنیای جاوااسکریپت خارج بشیم و یه سری به باقی زبان و اکوسیستم ها بزنیم؟
@CodeModuleGap
دوستان تازه وارد، گروه اصلی چنل اینه.
روزانه کلی بحث، پرسش و پاسخ و ... داریم. انتقادی، صحبتی یا سوالی چیزی داشتید اینجا میتونید مطرح کنید 💙
دوستان تازه وارد، گروه اصلی چنل اینه.
روزانه کلی بحث، پرسش و پاسخ و ... داریم. انتقادی، صحبتی یا سوالی چیزی داشتید اینجا میتونید مطرح کنید 💙
🔥15
از لودینگ های معمولی خسته شدی؟ برو سراغ skeleton 💀
سایت skeletonreact ابزاری برای ایجاد کامپوننتهای اسکلت انیمیشنی هست و از خروجی در قالبهایی نظیر React، React Native، Vue و Vanilla HTML پشتیبانی میکنه. انیمیشن های اسکلتی رو میتونیم به عنوان جایگزینی برای لودینگهای معمولی و خسته کننده در نظر بگیریم، و اونها به ما این قابلیت رو میدن که به کاربران پیشنمایشی از ساختار صفحات، مثل مکاننماهایی برای متون یا تصاویر ارائه بدیم تا تجربه کاربری بهتری در زمان بارگذاری دادهها فراهم بشه.
🔗 Link
#tools #skeleton
@CodeModule
سایت skeletonreact ابزاری برای ایجاد کامپوننتهای اسکلت انیمیشنی هست و از خروجی در قالبهایی نظیر React، React Native، Vue و Vanilla HTML پشتیبانی میکنه. انیمیشن های اسکلتی رو میتونیم به عنوان جایگزینی برای لودینگهای معمولی و خسته کننده در نظر بگیریم، و اونها به ما این قابلیت رو میدن که به کاربران پیشنمایشی از ساختار صفحات، مثل مکاننماهایی برای متون یا تصاویر ارائه بدیم تا تجربه کاربری بهتری در زمان بارگذاری دادهها فراهم بشه.
🔗 Link
#tools #skeleton
@CodeModule
🔥26⚡4👌1💔1
آرشیو کتاب ها و دوره های رایگان برنامه نویسی🔥
توی این پست یه آرشیو بهتون معرفی میکنم که بهتون منابعی نظیر کتابها و دورههای رایگان برای زبانها و تکنولوژیهایی مثل پایتون، جاوااسکریپت، ریاکت، جنگو، لینوکس و ... معرفی میکنه. با استفاده از این منابع، به راحتی میتونید مسیر یادگیری خودتون رو بدون هزینه و به زبان فارسی شروع کنید.
🔗 Link
#repository
@CodeModule
توی این پست یه آرشیو بهتون معرفی میکنم که بهتون منابعی نظیر کتابها و دورههای رایگان برای زبانها و تکنولوژیهایی مثل پایتون، جاوااسکریپت، ریاکت، جنگو، لینوکس و ... معرفی میکنه. با استفاده از این منابع، به راحتی میتونید مسیر یادگیری خودتون رو بدون هزینه و به زبان فارسی شروع کنید.
🔗 Link
#repository
@CodeModule
GitHub
GitHub - barnamenevisi/free-resources: آرشیو منابع رایگان آموزش برنامه نویسی به زبان فارسی ( هر کسی باید بتونه برنامه نویسی رو…
آرشیو منابع رایگان آموزش برنامه نویسی به زبان فارسی ( هر کسی باید بتونه برنامه نویسی رو یاد بگیره، مهم نیست پول داره یا نداره، به امید اینکه کسی به خاطر نداشتن پول از آموزش عقب نمونه ) - barnamenev...
🔥15👌1
TanStack Form بلاخره استیبل شد🗽
TanStack Form یک کتابخانه جدید از تیم TanStack هست که برای مدیریت فرم در پروژه های شما طراحی شده. این کتابخانه به تازگی استیبل شده و بهعنوان جایگزینی برای کتابخانههایی مثل React Hook Form و Formik در نظر گرفته میشه.
ویژگیهای اصلی TanStack Form👇🏻
پشتیبانی از چندین فریمورک و کتابخانه: این کتابخانه از React، Vue، Angular، Solid و Lit پشتیبانی میکنه.
بدون وابستگی خارجی: TanStack Form بدون وابستگی به کتابخانههای دیگه طراحی شده که منجر به حجم کم و عملکرد بهینه میشه.
پشتیبانی قوی از TypeScript: این کتابخانه با پشتیبانی از TypeScript، تجربه توسعه بهتری رو فراهم میکنه.
طراحی بدون رابط کاربری (Headless): امکان استفاده از کامپوننتها و هوکهای بدون رابط کاربری برای انعطافپذیری بیشتر در طراحی فرمها.
واکنشگرایی جزئی: بهبود عملکرد با بهروزرسانیهای جزئی در کامپوننتها.
اعتبارسنجی همزمان و غیرهمزمان: امکان تعریف قوانین اعتبارسنجی مختلف برای فیلدها و فرم.
برای اطلاعات بیشتر و نحوه استفاده، به داکیومنت این کتابخانه مراجعه کنید.
🔗 Link
#tanstack
@CodeModule
TanStack Form یک کتابخانه جدید از تیم TanStack هست که برای مدیریت فرم در پروژه های شما طراحی شده. این کتابخانه به تازگی استیبل شده و بهعنوان جایگزینی برای کتابخانههایی مثل React Hook Form و Formik در نظر گرفته میشه.
ویژگیهای اصلی TanStack Form👇🏻
پشتیبانی از چندین فریمورک و کتابخانه: این کتابخانه از React، Vue، Angular، Solid و Lit پشتیبانی میکنه.
بدون وابستگی خارجی: TanStack Form بدون وابستگی به کتابخانههای دیگه طراحی شده که منجر به حجم کم و عملکرد بهینه میشه.
پشتیبانی قوی از TypeScript: این کتابخانه با پشتیبانی از TypeScript، تجربه توسعه بهتری رو فراهم میکنه.
طراحی بدون رابط کاربری (Headless): امکان استفاده از کامپوننتها و هوکهای بدون رابط کاربری برای انعطافپذیری بیشتر در طراحی فرمها.
واکنشگرایی جزئی: بهبود عملکرد با بهروزرسانیهای جزئی در کامپوننتها.
اعتبارسنجی همزمان و غیرهمزمان: امکان تعریف قوانین اعتبارسنجی مختلف برای فیلدها و فرم.
برای اطلاعات بیشتر و نحوه استفاده، به داکیومنت این کتابخانه مراجعه کنید.
🔗 Link
#tanstack
@CodeModule
🔥15👌1
حالا بریم سراغ چیزی که همه رو توی شبکههای اجتماعی و جاهای دیگه هیجانزده کرده. طبق پستهایی که توی X دیدم و یه اعلامیه که ظاهراً 11 مارس 2025 توی وبلاگ تایپاسکریپت منتشر شده، تیم مایکروسافت داره روی یه نسخه کاملاً جدید کار میکنه که با زبان Go بازنویسی شده. یعنی کمپایلر تایپاسکریپت که الان با خودش نوشته شده و به جاوااسکریپت تبدیل میشه، قراره به یه برنامه مستقل و سریع با Go تبدیل بشه.
هنوز معلوم نیست این تغییر به Go روی خود زبان (مثل دستورات یا ویژگیها) اثر میذاره یا فقط کمپایلر رو عوض میکنه
#typescript #go #news
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥22⚡2👌1
نوروز سال ۲۵۸۴ شاهنشاهی رو بهتون تبریک میگم دوستان🔥🥳
امیدوارم تموم قله های موفقیت رو فتح کنید و امسال، سال شما باشه💙
@CodeModule
امیدوارم تموم قله های موفقیت رو فتح کنید و امسال، سال شما باشه💙
@CodeModule
❤🔥48😁4👌2💔2
معماری میکرو فرانتاند چیه؟! 🪡
تا به حال شده به این فکر کنی که یه پروژه بزرگ مثل یه پازل پیچیدهاست که باید هر قطعهاش به درستی کنار هم قرار بگیره؟ حالا تصور کن که میتونستیم هر یک از این قطعات رو به صورت جداگونه و مستقل توسعه بدیم و بعد به هم وصل کنیم. اینجاست که مفهوم میکرو فرانتاند روشن میشه. میکرو فرانتاندها همونطور که از اسمشون پیداست بخشهای کوچکی از یه پروژه بزرگ هستن که به صورت مستقل و مجزا توسعه، تست و منتشر میشن.
مزایای استفاده از میکروفرانتاند 👇
مستقل بودن تیمها و توسعه سریعتر
هر تیم میتونه روی یک بخش خاص از پروژه کار کنه، بدون اینکه روی سایر بخشها تأثیر بذاره. این موضوع روند توسعه رو سریعتر و مدیریت رو سادهتر میکنه.
چند تکنولوژی در یک پروژه
در یک پروژه میشه از فریمورک و کتابخانه های مختلف مثل React، Vue یا Angular در قسمتهای مختلف استفاده کرد. این ویژگی برای پروژههای قدیمی که نیاز به مهاجرت تدریجی دارن، بسیار مفید هست.
بروزرسانی آسون و بدون تأثیر روی کل پروژه
هر میکروفرانتاند بهصورت مستقل دپلوی میشه و تغییرات در یک بخش، باعث خرابی یا مشکل در سایر بخشها نمیشه.
بهینهسازی عملکرد
بهجای لود شدن یک برنامه بزرگ، فقط بخشهای موردنیاز بارگذاری میشن که باعث بهبود زمان لود صفحه و تجربه کاربری میشه.
مقیاسپذیری بهتر
با افزایش کاربران و نیازهای پروژه، میشه بخشهای مختلف رو بهصورت مستقل گسترش داد.
با این رویکرد هر بخش از فرانتاند میتونه به صورت مستقل توسعه، تست و دیپلوی بشه. دقیقا مثل معماری میکروسرویس ها در بکاند. برای کسب اطلاعات بیشتر این مقاله رو میتونید مطالعه کنید.
#microfrontend
@CodeModule
تا به حال شده به این فکر کنی که یه پروژه بزرگ مثل یه پازل پیچیدهاست که باید هر قطعهاش به درستی کنار هم قرار بگیره؟ حالا تصور کن که میتونستیم هر یک از این قطعات رو به صورت جداگونه و مستقل توسعه بدیم و بعد به هم وصل کنیم. اینجاست که مفهوم میکرو فرانتاند روشن میشه. میکرو فرانتاندها همونطور که از اسمشون پیداست بخشهای کوچکی از یه پروژه بزرگ هستن که به صورت مستقل و مجزا توسعه، تست و منتشر میشن.
مزایای استفاده از میکروفرانتاند 👇
مستقل بودن تیمها و توسعه سریعتر
هر تیم میتونه روی یک بخش خاص از پروژه کار کنه، بدون اینکه روی سایر بخشها تأثیر بذاره. این موضوع روند توسعه رو سریعتر و مدیریت رو سادهتر میکنه.
چند تکنولوژی در یک پروژه
در یک پروژه میشه از فریمورک و کتابخانه های مختلف مثل React، Vue یا Angular در قسمتهای مختلف استفاده کرد. این ویژگی برای پروژههای قدیمی که نیاز به مهاجرت تدریجی دارن، بسیار مفید هست.
بروزرسانی آسون و بدون تأثیر روی کل پروژه
هر میکروفرانتاند بهصورت مستقل دپلوی میشه و تغییرات در یک بخش، باعث خرابی یا مشکل در سایر بخشها نمیشه.
بهینهسازی عملکرد
بهجای لود شدن یک برنامه بزرگ، فقط بخشهای موردنیاز بارگذاری میشن که باعث بهبود زمان لود صفحه و تجربه کاربری میشه.
مقیاسپذیری بهتر
با افزایش کاربران و نیازهای پروژه، میشه بخشهای مختلف رو بهصورت مستقل گسترش داد.
با این رویکرد هر بخش از فرانتاند میتونه به صورت مستقل توسعه، تست و دیپلوی بشه. دقیقا مثل معماری میکروسرویس ها در بکاند. برای کسب اطلاعات بیشتر این مقاله رو میتونید مطالعه کنید.
#microfrontend
@CodeModule
Medium
What is Microfrontend and Why You Should Know About It
In recent years, web applications have grown significantly in size and complexity. This has made traditional approaches to developing…
🔥12❤🔥2⚡1
RFC 4122 چیست؟ 🎲
RFC 4122 یک استاندارد فنی هست که توسط سازمان IETF (Internet Engineering Task Force) تعریف شده، و برای تولید UUID هست که به شناسههای GUID هم شناخته میشه. این استاندارد تعریف میکنه که UUID باید یک مقدار ۱۲۸ بیتی باشه که بهصورت یونیک تولید میشه. هدف اصلی این شناسهها اینه که بتونن بدون نیاز به یک مرجع مرکزی، آیدی های یونیک تولید کنن.
همونطور که گفتیم یکی از دلایل اصلی استفاده از UUIDها اینه که نیازی به یک مرجع متمرکز(Central Authority) برای تولیدشون وجود نداره. یعنی میتونن در هر سیستمی، بدون نگرانی از تداخل، آیدی های جدید تولید کرد. این ویژگی باعث میشه که UUIDها برای سیستمهای توزیعشده و محیطهایی که نیاز به id به فرد دارن، ایدهآل باشن. UUIDها میتونن به صورت خودکار و با سرعت بالا (تا ۱۰ میلیون آیدی در ثانیه) برای اهداف مختلفی مثل transaction IDs, database IDs, or session IDs و ... تولید و استفاده بشن.
IEEE 802 و ارتباط آن با UUID
IEEE 802 مجموعهای از استانداردهای مربوط به شبکههای کامپیوتری هست که در لایههای فیزیکی و پیوند داده مدل OSI فعالیت میکنن. این استانداردها در فناوریهای ارتباطی کاربرد داره.
در برخی نسخههای UUID، یکی از بخشهای این شناسه ۱۲۸ بیتی، از آدرس MAC دستگاه گرفته میشه. آدرس MAC یک مقدار ۴۸ بیتی منحصر به فرد هست که به هر کارت شبکه اختصاص داده شده و معمولاً از یک محدودهی آدرس اختصاصی، که توسط IEEE مدیریت و انتخاب میشه. استفاده از MAC در تولید UUID باعث میشه که شناسهها در بین دستگاههای مختلف یکتا باشن. اما به دلایل امنیتی و حریم خصوصی، این روش همیشه توصیه نمیشه و در برخی نسخههای UUID، روشهای دیگهای جایگزین اون شدن.
ساختار UUID بر اساس RFC 4122
UUIDها از ۱۲۸ بیت تشکیل شدن و به صورت یک استرینگ ۳۶ کاراکتری نمایش داده میشن. این رشته شامل ۳۲ کاراکتر هگزادسیمال (اعداد ۰-۹ و حروف a-f) و ۴ خط تیره (-) است که بخشهای مختلف UUID رو از هم جدا میکنن. فرمت کلی UUID به این صورته:
-
-
-
به صورت کلی RFC-4122 استانداردی هست که به ما اجازه میده، شناسههای منحصر به فرد رو بدون نیاز به هماهنگی با یک مرجع مرکزی تولید کنیم. برای اطلاعات بیشتر در مورد این استاندارد به داکیومنت مراجعه کنید.
#uuid #rfc4122
@CodeModule
RFC 4122 یک استاندارد فنی هست که توسط سازمان IETF (Internet Engineering Task Force) تعریف شده، و برای تولید UUID هست که به شناسههای GUID هم شناخته میشه. این استاندارد تعریف میکنه که UUID باید یک مقدار ۱۲۸ بیتی باشه که بهصورت یونیک تولید میشه. هدف اصلی این شناسهها اینه که بتونن بدون نیاز به یک مرجع مرکزی، آیدی های یونیک تولید کنن.
همونطور که گفتیم یکی از دلایل اصلی استفاده از UUIDها اینه که نیازی به یک مرجع متمرکز(Central Authority) برای تولیدشون وجود نداره. یعنی میتونن در هر سیستمی، بدون نگرانی از تداخل، آیدی های جدید تولید کرد. این ویژگی باعث میشه که UUIDها برای سیستمهای توزیعشده و محیطهایی که نیاز به id به فرد دارن، ایدهآل باشن. UUIDها میتونن به صورت خودکار و با سرعت بالا (تا ۱۰ میلیون آیدی در ثانیه) برای اهداف مختلفی مثل transaction IDs, database IDs, or session IDs و ... تولید و استفاده بشن.
IEEE 802 و ارتباط آن با UUID
IEEE 802 مجموعهای از استانداردهای مربوط به شبکههای کامپیوتری هست که در لایههای فیزیکی و پیوند داده مدل OSI فعالیت میکنن. این استانداردها در فناوریهای ارتباطی کاربرد داره.
در برخی نسخههای UUID، یکی از بخشهای این شناسه ۱۲۸ بیتی، از آدرس MAC دستگاه گرفته میشه. آدرس MAC یک مقدار ۴۸ بیتی منحصر به فرد هست که به هر کارت شبکه اختصاص داده شده و معمولاً از یک محدودهی آدرس اختصاصی، که توسط IEEE مدیریت و انتخاب میشه. استفاده از MAC در تولید UUID باعث میشه که شناسهها در بین دستگاههای مختلف یکتا باشن. اما به دلایل امنیتی و حریم خصوصی، این روش همیشه توصیه نمیشه و در برخی نسخههای UUID، روشهای دیگهای جایگزین اون شدن.
ساختار UUID بر اساس RFC 4122
UUIDها از ۱۲۸ بیت تشکیل شدن و به صورت یک استرینگ ۳۶ کاراکتری نمایش داده میشن. این رشته شامل ۳۲ کاراکتر هگزادسیمال (اعداد ۰-۹ و حروف a-f) و ۴ خط تیره (-) است که بخشهای مختلف UUID رو از هم جدا میکنن. فرمت کلی UUID به این صورته:
xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx
-
x
یک عدد هگزادسیمال (۰ تا ۹ و A تا F) هست -
M
نسخهی UUID رو مشخص میکنه. -
N
مقدار variant رو تعیین میکنه.UUID از چندین بخش اصلی تشکیل شده؟
1. time_low (بخش پایین timestamp) – ۳۲ بیت
2. time_mid (بخش میانی timestamp) – ۱۶ بیت
3. time_hi_and_version (بخش بالایی timestamp + شماره نسخه) – ۱۶ بیت
4. clock_seq_hi_and_reserved (بخش بالایی شماره sequence + مقدار variant) – ۸ بیت
5. clock_seq_low (بخش پایینی شماره sequence) – ۸ بیت
6. node (شناسه گره، معمولاً MAC یا مقدار تصادفی) – ۴۸ بیت
انواع UUID و روشهای تولید آنها
1. نسخه ۱ (UUIDv1): بر اساس زمان و شناسه گره (معمولاً آدرس MAC) ساخته میشه. این نسخه تضمین میکنه که UUIDها به ترتیب زمانی تولید بشن.
2. نسخه ۲ (UUIDv2): مشابه نسخه ۱ هست اما برای استفاده در سیستمهای DCE Security طراحی شده.
3. نسخه ۳ (UUIDv3): بر اساس هش MD5 و یک نام (namespace) ساخته میشه.
4. نسخه ۴ (UUIDv4): به طور کامل تصادفی هست و از اعداد تصادفی برای تولید UUID استفاده میکنه.
5. نسخه ۵ (UUIDv5): مشابه نسخه ۳ است اما از الگوریتم هش SHA-1 استفاده میکنه.
به صورت کلی RFC-4122 استانداردی هست که به ما اجازه میده، شناسههای منحصر به فرد رو بدون نیاز به هماهنگی با یک مرجع مرکزی تولید کنیم. برای اطلاعات بیشتر در مورد این استاندارد به داکیومنت مراجعه کنید.
#uuid #rfc4122
@CodeModule
IETF Datatracker
RFC 4122: A Universally Unique IDentifier (UUID) URN Namespace
This specification defines a Uniform Resource Name namespace for UUIDs (Universally Unique IDentifier), also known as GUIDs (Globally Unique IDentifier). A UUID is 128 bits long, and can guarantee uniqueness across space and time. UUIDs were originally used…
⚡8🔥4
چرا Vitest رو به Jest ترجیح بدیم؟ 🥶
Jest و Vitest یکی از چندین فریمورکهایی هستن که برای نوشتن تست (unit test یا integration test) داخل پروژههامون استفاده میکنیم.
Vitest به عنوان جایگزینی جدیدتر، سریع تر و ساده تر معرفی شد. این فریمورک به دلیل (Hot Module Replacement) HMR و پشتیبانی از ESM (ECMAScript Modules) سرعتی به مراتب بالاتر از jest داره. پشتیبانی داخلی از Ts بدون نیاز به ابزارهای اضافی باعث شده محیط نوشتن کدها دارای ساختاری یکسان باشه و مثل خیلی از فریمورکهای دیگه اجرای تستها در مرورگر و Node.js به راحتی امکان پذیره. مهاجرت از Jest به Vitest کار چندان سختی نیست اگر از قبل با jest کار کرده باشید.
قید Jest رو کلا بزنیم؟
قطعا نه و هنوز تو بعضی شرایط انتخاب منطقیتریه. برای مثال در پروژه های Next.js یکسری محدودیتها برای Vitest وجود داره و استفاده از Jest منطقیتره.
آیا پروژه باید با vite باشه تا بتونیم از Vitest استفاده کنیم؟
Vitest بهعنوان یک فریمورک تست مستقل کار میکنه و میتونیم اون رو در هر پروژه جاوا/تایپ اسکریپت استفاده، و فقط کانفیگهای مربوطه رو اضافه کنیم.
#testing
@CodeModule
Jest و Vitest یکی از چندین فریمورکهایی هستن که برای نوشتن تست (unit test یا integration test) داخل پروژههامون استفاده میکنیم.
Vitest به عنوان جایگزینی جدیدتر، سریع تر و ساده تر معرفی شد. این فریمورک به دلیل (Hot Module Replacement) HMR و پشتیبانی از ESM (ECMAScript Modules) سرعتی به مراتب بالاتر از jest داره. پشتیبانی داخلی از Ts بدون نیاز به ابزارهای اضافی باعث شده محیط نوشتن کدها دارای ساختاری یکسان باشه و مثل خیلی از فریمورکهای دیگه اجرای تستها در مرورگر و Node.js به راحتی امکان پذیره. مهاجرت از Jest به Vitest کار چندان سختی نیست اگر از قبل با jest کار کرده باشید.
قید Jest رو کلا بزنیم؟
قطعا نه و هنوز تو بعضی شرایط انتخاب منطقیتریه. برای مثال در پروژه های Next.js یکسری محدودیتها برای Vitest وجود داره و استفاده از Jest منطقیتره.
آیا پروژه باید با vite باشه تا بتونیم از Vitest استفاده کنیم؟
Vitest بهعنوان یک فریمورک تست مستقل کار میکنه و میتونیم اون رو در هر پروژه جاوا/تایپ اسکریپت استفاده، و فقط کانفیگهای مربوطه رو اضافه کنیم.
#testing
@CodeModule
🔥12👌3
با React Scan بیشتر آشنا بشید 💎
پکیج React Scan در واقع یک ابزار نسبتاً جدید و جالب برای آنالیز و اسکن پروژههای ریکتی هست که به شما، در شناسایی رندرهای غیرضروری در پروژتون کمک میکنه. این ابزار مشکلات عملکردی مربوط به re-render شدن کامپوننتها رو بدون نیاز به تغییر در کد به راحتی شناسایی میکنه.
برخلاف ابزارهای دیگه مثل React Devtools، این پکیج بهصورت دقیق مشخص میکنه که کدوم کامپوننتها باعث کند شدن پروژتون و آسیب به پرفورمنس میشن.
📎 Document
#reactScan
@CodeModule
پکیج React Scan در واقع یک ابزار نسبتاً جدید و جالب برای آنالیز و اسکن پروژههای ریکتی هست که به شما، در شناسایی رندرهای غیرضروری در پروژتون کمک میکنه. این ابزار مشکلات عملکردی مربوط به re-render شدن کامپوننتها رو بدون نیاز به تغییر در کد به راحتی شناسایی میکنه.
برخلاف ابزارهای دیگه مثل React Devtools، این پکیج بهصورت دقیق مشخص میکنه که کدوم کامپوننتها باعث کند شدن پروژتون و آسیب به پرفورمنس میشن.
📎 Document
#reactScan
@CodeModule
🔥21👌1
چطور اکانت گیتهابم رو حفظ کنم؟ مروری بر 2FA و اهمیت مدیریت دسترسیها 🔥
چند روز پیش یک مشکلی با سیستم 2FA داشتم که خیلی به موقع خودش رو نشون داد. به اپ 2FA در گوشیم دسترسی نداشتم و از اون بدتر، ریکاوری کدهایی که باید ذخیره میکردم رو اصلاً نداشتم! (که خب معمولاً خیلیا همینطوری هستن). این شد که یک وضعیت بحرانی پیش اومد و من به از تمام اکانتهای گیتهابم اومده بودم بیرون. تنها راه دسترسی به اکانتم هم یه PAT یا (Personal Access Token) بود که به سختی ساعتها گشتم تا پیداش کنم و در نهایت تونستم وارد بشم. ولی این اتفاق به من یادآوری کرد که چقدر مهمه چند تا نکته امنیتی ساده رو برای اکانت گیتهابمون فعال کنیم تا مثل من یهو از زندگی ناامید نشین!
1- سیو کردن ریکاوری کدها
اولین و مهمترین چیزی که باید انجام بدید اینه که ریکاوری کدها رو دانلود کنید و حتما یه جایی ذخیره کنید. نوشتن اونا توی جایی که به راحتی بهش دسترسی داشته باشید (مثلاً یه فایل امن یا یه اپ مخصوص ذخیرهسازی پسورد) خیلی میتونه کمککننده باشه. این کار رو حتما انجام بدید که اگر روزی روزگاری به اپ 2FA دسترسی نداشتید، راحت بتونید وارد بشید.
2- فعال کردن SSH
یکی دیگه از کارهایی که به شدت توصیه میکنم، فعال کردن SSH برای اکانت گیتهاب هست. این کار کمک میکنه که بدون نیاز به وارد کردن پسورد یا توکن، بتونید به راحتی به گیتهاب دسترسی پیدا کنید.
نحوه فعال سازی SSH:
- ابتدا باید یک کلید SSH بسازید (با استفاده از
- بعد از ساخت کلید، باید اون رو به گیتهاب اضافه کنید از طریق تنظیمات SSH Keys در گیتهاب.
3- اکسس توکن (PAT)
همچنین به جای استفاده از پسورد برای احراز هویت، میتونید از اکسس توکنها (PAT) استفاده کنید. این توکنها برای ارتباط امنتر با گیتهاب خیلی مفید هستند.
نحوه فعال سازی PAT:
- به تنظیمات اکانت گیتهاب برید.
- در قسمت Developer Settings، گزینه Personal Access Tokens رو پیدا کنید.
- توکن جدید بسازید و سطوح دسترسی مورد نظر رو انتخاب کنید.
مهم:
اگر هیچ کدوم از این روشها رو برای اکانتتون فعال نکردید، گیتهاب هیچ تضمینی نمیده که بتونید اکانتتون رو بازیابی کنید. نهایتاً ممکنه مجبور میشید ایمیل رو unlink کنید و یه اکانت جدید بسازید، ولی حتی در این صورت هم تاریخچه کامیتها و اطلاعات دیگه رو ممکنه از دست بدید.
#github
@CodeModule
چند روز پیش یک مشکلی با سیستم 2FA داشتم که خیلی به موقع خودش رو نشون داد. به اپ 2FA در گوشیم دسترسی نداشتم و از اون بدتر، ریکاوری کدهایی که باید ذخیره میکردم رو اصلاً نداشتم! (که خب معمولاً خیلیا همینطوری هستن). این شد که یک وضعیت بحرانی پیش اومد و من به از تمام اکانتهای گیتهابم اومده بودم بیرون. تنها راه دسترسی به اکانتم هم یه PAT یا (Personal Access Token) بود که به سختی ساعتها گشتم تا پیداش کنم و در نهایت تونستم وارد بشم. ولی این اتفاق به من یادآوری کرد که چقدر مهمه چند تا نکته امنیتی ساده رو برای اکانت گیتهابمون فعال کنیم تا مثل من یهو از زندگی ناامید نشین!
1- سیو کردن ریکاوری کدها
اولین و مهمترین چیزی که باید انجام بدید اینه که ریکاوری کدها رو دانلود کنید و حتما یه جایی ذخیره کنید. نوشتن اونا توی جایی که به راحتی بهش دسترسی داشته باشید (مثلاً یه فایل امن یا یه اپ مخصوص ذخیرهسازی پسورد) خیلی میتونه کمککننده باشه. این کار رو حتما انجام بدید که اگر روزی روزگاری به اپ 2FA دسترسی نداشتید، راحت بتونید وارد بشید.
2- فعال کردن SSH
یکی دیگه از کارهایی که به شدت توصیه میکنم، فعال کردن SSH برای اکانت گیتهاب هست. این کار کمک میکنه که بدون نیاز به وارد کردن پسورد یا توکن، بتونید به راحتی به گیتهاب دسترسی پیدا کنید.
نحوه فعال سازی SSH:
- ابتدا باید یک کلید SSH بسازید (با استفاده از
ssh-keygen
در ترمینال).- بعد از ساخت کلید، باید اون رو به گیتهاب اضافه کنید از طریق تنظیمات SSH Keys در گیتهاب.
3- اکسس توکن (PAT)
همچنین به جای استفاده از پسورد برای احراز هویت، میتونید از اکسس توکنها (PAT) استفاده کنید. این توکنها برای ارتباط امنتر با گیتهاب خیلی مفید هستند.
نحوه فعال سازی PAT:
- به تنظیمات اکانت گیتهاب برید.
- در قسمت Developer Settings، گزینه Personal Access Tokens رو پیدا کنید.
- توکن جدید بسازید و سطوح دسترسی مورد نظر رو انتخاب کنید.
مهم:
اگر هیچ کدوم از این روشها رو برای اکانتتون فعال نکردید، گیتهاب هیچ تضمینی نمیده که بتونید اکانتتون رو بازیابی کنید. نهایتاً ممکنه مجبور میشید ایمیل رو unlink کنید و یه اکانت جدید بسازید، ولی حتی در این صورت هم تاریخچه کامیتها و اطلاعات دیگه رو ممکنه از دست بدید.
#github
@CodeModule
⚡10
با پکیج nextjs-toploader رنگ و بوی جدیدی به پروژت بده🔥
nextjs-toploader یه پکیجِ انیمیشنی هست که در پروژههای Next.js استفاده میشه. با استفاده از این پکیج، زمانی که بین صفحات مختلف جابهجا میشید، در بالای صفحه یه progress bar (نوار لودینگ باریک) نشون داده میشه.
برخی ویژگیهای nextjs-toploader
🧬 خیلی ساده و سریع راهاندازی میشه.
🧬 رنگ، ارتفاع، سرعت پیشروی و شکلش کاملا قابل تغییره.
🧬 با Router Events توی Next.js کار میکنه (مثل routeChangeStart, routeChangeComplete)
برای کسب اطلاعات بیشتر به داکیومنت این پکیج مراجعه کنید.
#animation #toploader
@CodeModule
nextjs-toploader یه پکیجِ انیمیشنی هست که در پروژههای Next.js استفاده میشه. با استفاده از این پکیج، زمانی که بین صفحات مختلف جابهجا میشید، در بالای صفحه یه progress bar (نوار لودینگ باریک) نشون داده میشه.
درست مثل نوار باریکی که بالای سایت معروفی مثل YouTube موقع لود صفحه جدید میبینی.
برخی ویژگیهای nextjs-toploader
🧬 خیلی ساده و سریع راهاندازی میشه.
🧬 رنگ، ارتفاع، سرعت پیشروی و شکلش کاملا قابل تغییره.
🧬 با Router Events توی Next.js کار میکنه (مثل routeChangeStart, routeChangeComplete)
برای کسب اطلاعات بیشتر به داکیومنت این پکیج مراجعه کنید.
#animation #toploader
@CodeModule
🔥12❤🔥4👌1
Forwarded from FullstacksJS — Academy
قابلیت جدید CSS برای ساخت Carousel
تو این ویدئو به قابلیت جدید CSS برای ساخت Carousel میپردازیم.
مشاهده ویدئو
این ویدئو بخشی از استریم های هفتگی جامعه ست شما هم میتونید با دنبال کردن کانال توی لایو ها شرکت کنید:
https://twitch.tv/fullstacksjs
عضویت در جامعه:
https://fullstacksjs.com
#wus #carousel #css
تو این ویدئو به قابلیت جدید CSS برای ساخت Carousel میپردازیم.
مشاهده ویدئو
این ویدئو بخشی از استریم های هفتگی جامعه ست شما هم میتونید با دنبال کردن کانال توی لایو ها شرکت کنید:
https://twitch.tv/fullstacksjs
عضویت در جامعه:
https://fullstacksjs.com
#wus #carousel #css
YouTube
قابلیت جدید CSS برای ساخت Carousel
تو این ویدئو به قابلیت جدید CSS برای ساخت Carousel میپردازیم.
این ویدئو بخشی از استریم های هفتگی جامعه ست شما هم میتونید با دنبال کردن کانال توی لایو ها شرکت کنید:
https://twitch.tv/fullstacksjs
عضویت در جامعه:
https://fullstacksjs.com
#fullstacksjs #carousel…
این ویدئو بخشی از استریم های هفتگی جامعه ست شما هم میتونید با دنبال کردن کانال توی لایو ها شرکت کنید:
https://twitch.tv/fullstacksjs
عضویت در جامعه:
https://fullstacksjs.com
#fullstacksjs #carousel…
⚡7❤🔥2