Tech Stuff
Open in Telegram
سیدمهدی جلالی یوتوب: https://www.youtube.com/@SeyedTechStuff حمایت (دونیت): https://reymit.ir/seyedmahdi بوست: https://t.me/boost/techstuff100 لینکدین: https://www.linkedin.com/in/seyed-mahdi-jalali توییتر: https://twitter.com/seyedmahdii_
Show moreThe country is not specifiedThe category is not specified
792
Subscribers
No data24 hours
-27 days
-230 days
Posts Archive
792
+4
توی این پست درباره دستور
git commit --amend صحبت کردم. این دستور وقتی بدرد میخوره که بخوایم آخرین کامیت رو اصلاح کنیم، مثلا پیامش رو عوض کنیم یا فایل جاافتاده رو بهش اضافه کنیم.
@techstuff100792
ویژگی Navigation Preload در Service Worker
وقتی کاربر به صفحهای میره که از service worker استفاده میکنه، مرورگر باید اول این worker رو راهاندازی کنه. Navigation Preload به مرورگر میگه که همزمان با راهاندازی worker، شروع کن به دانلود کردن صفحه. توی این ویدئو Navigation Preload رو پیادهسازی و ریکوئستهای preload رو توی مرورگر بررسی میکنیم.
ویدئوی یوتوب:
https://www.youtube.com/watch?v=6Z2uqN-vGA0&list=PL1bBcWODwsLMUPOu1Vz7orH2brAgKlWAU
@techstuff100
792
کتاب Building Micro-Frontends فصل ۸: Backend Patterns برای میکروفرانتاند
مطالبی که توی فصل هشتم صحبت شده:
- کار با Service Dictionary
- کار با API Gateway
- کار با BFF
- کار با GraphQL
- تعدادی از Best Practices
پ.ن: خلاصه فصلهای قبل رو با این هشتگ میتونین پیدا کنین:
#Building_Micro_Frontends
@techstuff100
792
کتاب Building Micro-Frontends فصل ۷: Automation Pipeline برای میکروفرانتاندها
مطالبی که توی فصل هفتم صحبت شده:
- Version Control
- Pipeline Initialization
- Code-Quality Review
- Build
- Post-Build Review
- Deployment
توی این فصل به Lerna، ابزار مدیریت پروژههای Monorepo اشاره شده. از این ویدئو میتونین برای آشنایی بیشتر استفاده کنین.
پ.ن: خلاصه فصلهای قبل رو با این هشتگ میتونین پیدا کنین:
#Building_Micro_Frontends
@techstuff100
792
سابسکرایبرای کانال یوتیوب ۳ رقمی شد. شاید عدد کوچیکی باشه؛ ولی برای من کلی انگیزهست ❤️
https://www.youtube.com/@SeyedTechStuff
@techstuff100
792
کشینگ حرفهای؛ PWA حالت آفلاین
توی این ویدیو یه پروژه PWA رو با Next.js پیادهسازی میکنیم و میبینیم چطور میشه با تکنیکهای کشینگ سرعت لود صفحات رو بالا برد و اپلیکیشن رو توی حالت آفلاین هم قابل استفاده کرد. از مفاهیم اولیه Service Worker و Life Cycle شروع میکنیم، معماری App Shell رو بررسی میکنیم، assetهای استاتیک و APIها رو کش میکنیم و در نهایت Background Sync رو به پروژه اضافه میکنیم.
ویدئو یوتوب:
https://www.youtube.com/watch?v=p7CCPI8phWs&list=PL1bBcWODwsLMUPOu1Vz7orH2brAgKlWAU
@techstuff100
792
کتاب Building Micro-Frontends فصل ۶
مطالبی که توی فصل ششم صحبت شده:
- اتوماتسازی
- تجربه توسعهدهنده (DX)
- ورژن کنترل (Version Control)
- استراتژیهای CI
- استراتژیهای دیپلوی
توی این فصل به Lerna، ابزار مدیریت پروژههای Monorepo اشاره شده. از این ویدئو میتونین برای آشنایی بیشتر استفاده کنین.
پ.ن: خلاصه فصلهای قبل رو با این هشتگ میتونین پیدا کنین:
#Building_Micro_Frontends
@techstuff100
792
توی این مقاله به این موضوع پرداخته شده که چرا Interaction to Next Paint (INP) یکی از دقیقترین معیارهای Core Web Vitals برای سنجش responsiveness حساب میشه. INP طولانیترین تأخیر بین تعامل کاربر (مثل کلیک، تاچ یا فشار دادن دکمه) تا لحظهای که مرورگر اولین فریم واکنش رو رندر میکنه اندازهگیری میکنه. نکته مهم اینجاست که حتی اگه عملیات پشت صحنه طول بکشه، اون چیزی که کاربر میبینه و براش مهمه، سرعت اولین بازخورد بصریه. این متریک کمک میکنه تا مشکلات واقعی تجربه کاربر شناسایی و بهینهسازی بشن.
@techstuff100
792
سری ۴ قسمتی Inside the Browser یه مرور فنی روی معماری مرورگر Chrome داره. از multi-process architecture و فرایند navigation گرفته تا renderer process و نقش compositor توی تعامل کاربر بررسی میشن. این مقاله به درک عمیقتر از پشتصحنه مرورگر کمک میکنه.
@techstuff100
792
توی این ویدیو، پروژهای که توی فصل ۵ کتاب Building Micro-Frontends گفته شده رو بررسی کردم؛ میبینیم که چطور میکروفرانتاندهای مختلف توی app shell با Module Federation لود و نمایش داده میشن.
ویدئو یوتوب:
https://www.youtube.com/watch?v=HdpFvw_B5R0&list=PL1bBcWODwsLMYe8Gor4PDwT5U5CK_S36x&index=5&pp=gAQBiAQB
@techstuff100
792
کتاب Building Micro-Frontends فصل ۵
مطالبی که توی فصل پنجم صحبت شده:
- توضیح پروژه
- پلاگین Module Federation
- پیادهسازی فنی
- تکامل پروژه
پ.ن ۱: سورس پروژهای که توی کتاب گفته شده رو بررسی کردم و توی یوتوب گذاشتم:
https://www.youtube.com/watch?v=HdpFvw_B5R0&list=PL1bBcWODwsLMYe8Gor4PDwT5U5CK_S36x&index=5&pp=gAQBiAQB
پ.ن ۲: از Module Federation توی بخش بزرگی از این فصل استفاده میشه. برای آشنایی با این پلاگین webpack این ویدئو رو پیشنهاد میکنم:
https://www.youtube.com/watch?v=uvzu54M8ef8&list=PL1bBcWODwsLMYe8Gor4PDwT5U5CK_S36x&index=3
پ.ن ۳: خلاصه فصلهای قبل رو با این هشتگ میتونین پیدا کنین:
#Building_Micro_Frontends
@techstuff100
792
+4
تو HTML اگه تگها رو اشتباه ببندیم نه تنها خطا نمیگیریم، بلکه مرورگر هم درست نمایششون میده. توی این پست درباره Misnested Tags صحبت کردم و اینکه مرورگر چطوری با الگوریتم Adoption Agency مشکل رو هندل میکنه.
منبع پست
@techstuff100
792
کتاب Building Micro-Frontends فصل ۴
مطالبی که توی فصل چهارم صحبت شده:
— اعمال چارچوب تصمیمگیری
— تحلیل معماریها
— معماری Vertical-Split شامل:
-ا App Shell
- چالشها
- پیادهسازی Design System
- تجربه توسعهدهنده (DX)
-ا SEO
- پرفورمنس
- فریمورکها
— معماری Horizontal-Split شامل:
- پیادهسازی Client Side
- چالشها
-ا SEO
- تجربه توسعهدهنده (DX)
- پلاگین Module Federation
- تگهای Iframe
- وب کامپوننتها
- پیادهسازی Server Side
- پیادهسازی Edge Side
این فصل بنظرم یکی از مهمترین فصلای کتابه. موارد زیر رو برای درک بهتر این فصل پیشنهاد میکنم:
- پلاگین Module Federation (لینک)
- آشنایی با SystemJS (لینک)
- ویژگی sandbox در iframe (لینک)
- فریمورک Single-Spa (لینک)
پ.ن: خلاصه فصلهای قبل رو با این هشتگ میتونین پیدا کنین:
#Building_Micro_Frontends
@techstuff100
792
ساخت پروژه میکروفرانتاند با فریمورک Single-Spa
توی این ویدیو درباره این صحبت کردم که فریمورک single-spa چیه و چطوری به کمکش میتونیم یه پروژه فروشگاهی میکروفرانتاند از صفر بسازیم. با استفاده از create-single-spa کار رو شروع میکنیم، میکروفرانتاندهایی مثل auth، home، navbar، و products رو به همراه root config قدمبهقدم پیادهسازی و به هم وصل میکنیم. در آخر هم import map overrides رو یاد میگیریم که چطوری میتونیم فقط یه بخش از پروژه رو لوکال اجرا کنیم و تو محیط واقعی تست کنیم.
ویدئو یوتوب:
https://www.youtube.com/watch?v=Pe69hfq1IPA&list=PL1bBcWODwsLMYe8Gor4PDwT5U5CK_S36x&index=1
@techstuff100
792
ویژگی sandbox در iframe
گاهی وقتا موقع نمایش یه صفحه خارجی با iframe توی سایت خودمون، نمیخوایم اون صفحه هر کاری دلش خواست بکنه؛ مثلا اسکریپت اجرا کنه، فرم بفرسته یا به کوکیها و localStorage دسترسی داشته باشه. با sandbox میتونیم روی iframe محدودیت بذاریم.
وقتی از sandbox استفاده میکنیم، مرورگر بهصورت پیشفرض همه قابلیتهای حساس صفحه داخل iframe رو غیرفعال میکنه. اما میتونیم با اضافه کردن چندتا مقدار خاص، اجازه بدیم فقط بعضی چیزا فعال باشن. توی این مثال، فقط اجازه اجرای اسکریپتها و ارسال فرم داده شده. بقیه چیزا مثل باز کردن popup یا دسترسی به storage غیرفعال هستن.
@techstuff100
792
آشنایی با SystemJS و importmap در جاوااسکریپت
توی این ویدیو درباره این صحبت کردم که SystemJS چیه و چطوری میتونه به ما کمک کنه که ماژولهای جاوااسکریپتی رو توی مرورگر لود کنیم. با ایمپورت داینامیک شروع میکنیم، بعد میریم سراغ importmap و پروژه رو با SystemJS تغییر میدیم. SystemJS اینجا بهکار میاد چون حتی وقتی مرورگر از importmap پشتیبانی نکنه هم ماژولها رو لود میکنه و با همه مرورگرهای مدرن سازگاره. تفاوت بین UMD و ESM رو بررسی میکنیم و در آخر babel رو به پروژه اضافه میکنیم.
ویدئو یوتوب:
https://www.youtube.com/watch?v=jPcTelWAO8Q&list=PL1bBcWODwsLMYe8Gor4PDwT5U5CK_S36x
@techstuff100
792
کتاب Building Micro-Frontends فصل ۳
مطالبی که توی فصل سوم صحبت شده:
- معماریها و چالشهای Micro-Frontend
- چارچوب تصمیمگیری برای معماری Micro-Frontend
- مشخص کردن Micro-Frontend ها
- میکروفرانتاندها و DDD
- ترکیب Micro-Frontendها
- مسیریابی Micro-Frontendها (routing)
- ارتباط بین مایکروفرانتاندها
پ.ن: خلاصه فصلهای قبل رو با این هشتگ میتونین پیدا کنین:
#Building_Micro_Frontends
@techstuff100
792
لرنا (Lerna) یکی از ابزارهاییه که برای مدیریت پروژههای مونوریپو جاوااسکریپتی استفاده میشه.
توی این ویدیو درباره این صحبت کردم که Lerna چیه و چطوری میتونیم ازش توی یه پروژه مونوریپو جاوااسکریپتی استفاده کنیم. لرنا رو راهاندازی میکنیم، اسکریپتها رو کش میکنیم، پکیجها رو ورژن میزنیم و پابلیششون میکنیم.
لینک ویدئو:
https://www.youtube.com/watch?v=LoFhDi5dbIg&list=PL1bBcWODwsLMYe8Gor4PDwT5U5CK_S36x&index=3
@techstuff100
792
موسپوینتر لحظهای در Canva؛ از WebSocket تا WebRTC
توی Canva برای پیادهسازی قابلیت نمایش لحظهای موس کاربران روی وایتبرد، چالش اصلی scalability و پایداری زیرساخت بود؛ چون همه کاربران باید موقعیت موس خودشون رو همزمان ارسال کنن. توی فاز اول، با ترکیب WebSocket و Redis یه معماری backend-centric ساختن که از طریق PubSub و Streams دادهها رو بین سرورها جابجا میکرد.
اما برای کاهش latency و بار روی سرورها، تو فاز دوم رفتن سراغ WebRTC تا کلاینتها مستقیما با هم ارتباط بگیرن. با استفاده از mesh topology، هر کلاینت به بقیه وصل میشه و موقعیت موسها از طریق DataChannel رد و بدل میشه. در نهایت با یه لایه abstraction تونستن بهصورت تدریجی از WebSocket به WebRTC مهاجرت کنن.
مقاله
پ.ن: آرزوی سلامتی و امنیت برای همه ❤️
@techstuff100
792
کتاب Building Micro-Frontends فصل ۲
مطالبی که توی فصل دوم صحبت شده:
- مشکل اپلیکیشنهای Monolith
- حرکت به سمت Microservices
- از Monolith تا Microservices
- معرفی Micro-Frontendها
- اصول Microservices و کاربردشون توی Micro-Frontends
پ.ن: خلاصه فصل قبل رو با این هشتگ میتونین پیدا کنین:
#Building_Micro_Frontends
@techstuff100
