سری ۴ قسمتی Inside the Browser یه مرور فنی روی معماری مرورگر Chrome داره. از multi-process architecture و فرایند navigation گرفته تا renderer process و نقش compositor توی تعامل کاربر بررسی میشن. این مقاله به درک عمیقتر از پشتصحنه مرورگر کمک میکنه.
@techstuff100
@techstuff100
👍2❤1🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
توی این مقاله به این موضوع پرداخته شده که چرا Interaction to Next Paint (INP) یکی از دقیقترین معیارهای Core Web Vitals برای سنجش responsiveness حساب میشه. INP طولانیترین تأخیر بین تعامل کاربر (مثل کلیک، تاچ یا فشار دادن دکمه) تا لحظهای که مرورگر اولین فریم واکنش رو رندر میکنه اندازهگیری میکنه. نکته مهم اینجاست که حتی اگه عملیات پشت صحنه طول بکشه، اون چیزی که کاربر میبینه و براش مهمه، سرعت اولین بازخورد بصریه. این متریک کمک میکنه تا مشکلات واقعی تجربه کاربر شناسایی و بهینهسازی بشن.
@techstuff100
@techstuff100
❤7🔥2
Tech Stuff
Building Micro-Frontends Chapter 5.pdf
Building Micro-Frontends Chapter 6.pdf
2.6 MB
کتاب Building Micro-Frontends فصل ۶
مطالبی که توی فصل ششم صحبت شده:
- اتوماتسازی
- تجربه توسعهدهنده (DX)
- ورژن کنترل (Version Control)
- استراتژیهای CI
- استراتژیهای دیپلوی
توی این فصل به Lerna، ابزار مدیریت پروژههای Monorepo اشاره شده. از این ویدئو میتونین برای آشنایی بیشتر استفاده کنین.
پ.ن: خلاصه فصلهای قبل رو با این هشتگ میتونین پیدا کنین:
#Building_Micro_Frontends
@techstuff100
مطالبی که توی فصل ششم صحبت شده:
- اتوماتسازی
- تجربه توسعهدهنده (DX)
- ورژن کنترل (Version Control)
- استراتژیهای CI
- استراتژیهای دیپلوی
توی این فصل به Lerna، ابزار مدیریت پروژههای Monorepo اشاره شده. از این ویدئو میتونین برای آشنایی بیشتر استفاده کنین.
پ.ن: خلاصه فصلهای قبل رو با این هشتگ میتونین پیدا کنین:
#Building_Micro_Frontends
@techstuff100
❤9🤔2
کشینگ حرفهای؛ PWA حالت آفلاین
توی این ویدیو یه پروژه PWA رو با Next.js پیادهسازی میکنیم و میبینیم چطور میشه با تکنیکهای کشینگ سرعت لود صفحات رو بالا برد و اپلیکیشن رو توی حالت آفلاین هم قابل استفاده کرد. از مفاهیم اولیه Service Worker و Life Cycle شروع میکنیم، معماری App Shell رو بررسی میکنیم، assetهای استاتیک و APIها رو کش میکنیم و در نهایت Background Sync رو به پروژه اضافه میکنیم.
ویدئو یوتوب:
https://www.youtube.com/watch?v=p7CCPI8phWs&list=PL1bBcWODwsLMUPOu1Vz7orH2brAgKlWAU
@techstuff100
توی این ویدیو یه پروژه PWA رو با Next.js پیادهسازی میکنیم و میبینیم چطور میشه با تکنیکهای کشینگ سرعت لود صفحات رو بالا برد و اپلیکیشن رو توی حالت آفلاین هم قابل استفاده کرد. از مفاهیم اولیه Service Worker و Life Cycle شروع میکنیم، معماری App Shell رو بررسی میکنیم، assetهای استاتیک و APIها رو کش میکنیم و در نهایت Background Sync رو به پروژه اضافه میکنیم.
ویدئو یوتوب:
https://www.youtube.com/watch?v=p7CCPI8phWs&list=PL1bBcWODwsLMUPOu1Vz7orH2brAgKlWAU
@techstuff100
❤19👍2👏1
سابسکرایبرای کانال یوتیوب ۳ رقمی شد. شاید عدد کوچیکی باشه؛ ولی برای من کلی انگیزهست ❤️
https://www.youtube.com/@SeyedTechStuff
@techstuff100
https://www.youtube.com/@SeyedTechStuff
@techstuff100
❤28👏3🤬1🤣1
Tech Stuff
Building Micro-Frontends Chapter 6.pdf
Building Micro-Frontends Chapter 7.pdf
1.7 MB
کتاب Building Micro-Frontends فصل ۷: Automation Pipeline برای میکروفرانتاندها
مطالبی که توی فصل هفتم صحبت شده:
- Version Control
- Pipeline Initialization
- Code-Quality Review
- Build
- Post-Build Review
- Deployment
توی این فصل به Lerna، ابزار مدیریت پروژههای Monorepo اشاره شده. از این ویدئو میتونین برای آشنایی بیشتر استفاده کنین.
پ.ن: خلاصه فصلهای قبل رو با این هشتگ میتونین پیدا کنین:
#Building_Micro_Frontends
@techstuff100
مطالبی که توی فصل هفتم صحبت شده:
- Version Control
- Pipeline Initialization
- Code-Quality Review
- Build
- Post-Build Review
- Deployment
توی این فصل به Lerna، ابزار مدیریت پروژههای Monorepo اشاره شده. از این ویدئو میتونین برای آشنایی بیشتر استفاده کنین.
پ.ن: خلاصه فصلهای قبل رو با این هشتگ میتونین پیدا کنین:
#Building_Micro_Frontends
@techstuff100
❤8👏1
Tech Stuff
Building Micro-Frontends Chapter 7.pdf
Building Micro-Frontends Chapter 8.pdf
4.1 MB
کتاب Building Micro-Frontends فصل ۸: Backend Patterns برای میکروفرانتاند
مطالبی که توی فصل هشتم صحبت شده:
- کار با Service Dictionary
- کار با API Gateway
- کار با BFF
- کار با GraphQL
- تعدادی از Best Practices
پ.ن: خلاصه فصلهای قبل رو با این هشتگ میتونین پیدا کنین:
#Building_Micro_Frontends
@techstuff100
مطالبی که توی فصل هشتم صحبت شده:
- کار با Service Dictionary
- کار با API Gateway
- کار با BFF
- کار با GraphQL
- تعدادی از Best Practices
پ.ن: خلاصه فصلهای قبل رو با این هشتگ میتونین پیدا کنین:
#Building_Micro_Frontends
@techstuff100
❤10👍1🤔1
ویژگی Navigation Preload در Service Worker
وقتی کاربر به صفحهای میره که از service worker استفاده میکنه، مرورگر باید اول این worker رو راهاندازی کنه. Navigation Preload به مرورگر میگه که همزمان با راهاندازی worker، شروع کن به دانلود کردن صفحه. توی این ویدئو Navigation Preload رو پیادهسازی و ریکوئستهای preload رو توی مرورگر بررسی میکنیم.
ویدئوی یوتوب:
https://www.youtube.com/watch?v=6Z2uqN-vGA0&list=PL1bBcWODwsLMUPOu1Vz7orH2brAgKlWAU
@techstuff100
وقتی کاربر به صفحهای میره که از service worker استفاده میکنه، مرورگر باید اول این worker رو راهاندازی کنه. Navigation Preload به مرورگر میگه که همزمان با راهاندازی worker، شروع کن به دانلود کردن صفحه. توی این ویدئو Navigation Preload رو پیادهسازی و ریکوئستهای preload رو توی مرورگر بررسی میکنیم.
ویدئوی یوتوب:
https://www.youtube.com/watch?v=6Z2uqN-vGA0&list=PL1bBcWODwsLMUPOu1Vz7orH2brAgKlWAU
@techstuff100
❤4👍3🔥1
توی این پست درباره دستور
@techstuff100
git commit --amend صحبت کردم. این دستور وقتی بدرد میخوره که بخوایم آخرین کامیت رو اصلاح کنیم، مثلا پیامش رو عوض کنیم یا فایل جاافتاده رو بهش اضافه کنیم.@techstuff100
❤12👏5
استراتژیهای Caching با Workbox
ورکباکس (Workbox) یک کتابخونه قدرتمند برای ساخت PWA هست که توسط گوگل توسعه داده شده و پکیجهای معروفی مثل next-pwa هم ازش استفاده میکنن. Workbox استراتژیهای کشینگ، background sync، پشتیبانی از حالت آفلاین و ... رو خیلی ساده کرده.
توی این ویدئو Workbox رو به پروژه اضافه میکنیم، فایلها و روتهای مهم رو precache میکنیم، فرایند routing رو بررسی میکنیم، assetهای استاتیک و APIهامون رو با استراتژیهای caching، کش و درنهایت background sync رو اضافه میکنیم.
ویدئوی یوتوب:
https://www.youtube.com/watch?v=-dVW58yqtHQ&list=PL1bBcWODwsLMUPOu1Vz7orH2brAgKlWAU
@techstuff100
ورکباکس (Workbox) یک کتابخونه قدرتمند برای ساخت PWA هست که توسط گوگل توسعه داده شده و پکیجهای معروفی مثل next-pwa هم ازش استفاده میکنن. Workbox استراتژیهای کشینگ، background sync، پشتیبانی از حالت آفلاین و ... رو خیلی ساده کرده.
توی این ویدئو Workbox رو به پروژه اضافه میکنیم، فایلها و روتهای مهم رو precache میکنیم، فرایند routing رو بررسی میکنیم، assetهای استاتیک و APIهامون رو با استراتژیهای caching، کش و درنهایت background sync رو اضافه میکنیم.
ویدئوی یوتوب:
https://www.youtube.com/watch?v=-dVW58yqtHQ&list=PL1bBcWODwsLMUPOu1Vz7orH2brAgKlWAU
@techstuff100
❤11👍1🤔1
Tech Stuff
Building Micro-Frontends Chapter 8.pdf
Building Micro-Frontends Chapter 9.pdf
3.3 MB
کتاب Building Micro-Frontends فصل ۹: مهاجرت از Monolith به میکروفرانتاند
مطالبی که توی فصل نهم صحبت شده:
- زمینه (context) پروژه
- استراتژیهای مهاجرت
- جزئیات پیادهسازی (وظایف app shell، ادغام بکاند، پیادهسازی Canary Release، چندزبانه و ...)
پ.ن: خلاصه فصلهای قبل رو با این هشتگ میتونین پیدا کنین:
#Building_Micro_Frontends
@techstuff100
مطالبی که توی فصل نهم صحبت شده:
- زمینه (context) پروژه
- استراتژیهای مهاجرت
- جزئیات پیادهسازی (وظایف app shell، ادغام بکاند، پیادهسازی Canary Release، چندزبانه و ...)
پ.ن: خلاصه فصلهای قبل رو با این هشتگ میتونین پیدا کنین:
#Building_Micro_Frontends
@techstuff100
❤9🤔3
مهاجرت تدریجی با Strangler Fig
این پست درباره برای مهاجرت از سیستمهای Legacy به سیستم جدیده. Strangler Fig pattern کمک میکنه بخش به بخش سیستم رو جایگزین کنیم و همزمان سیستم قدیمی هم کار کنه.
@techstuff100
این پست درباره برای مهاجرت از سیستمهای Legacy به سیستم جدیده. Strangler Fig pattern کمک میکنه بخش به بخش سیستم رو جایگزین کنیم و همزمان سیستم قدیمی هم کار کنه.
@techstuff100
❤9👍4🔥1