🆕 #angular release v19.2.3!

🆕 #angularCLI release v19.2.4!

https://www.youtube.com/watch?v=nLyR2DS27RE&ab_channel=NgAsiaAngular

Thank you @Ilyoskhuja!

🫶🏻 React vs everyone!



PS: no one - me at weekend 😊 happy last minutes 😊

———
@angularMunich

🔥 Frontend System Design – Must-Know Topics for FAANG Interviews! 🚀

💡 Frontend system design interviews are as critical as backend ones at Google, Meta, Amazon & top startups.

If you struggle with:

❌ Breaking down scalable UI systems
❌ CSR vs. SSR vs. ISR vs. SSG
❌ Handling high concurrency & real-time updates
❌ Optimizing state management & caching

Then this is for you! 🎯

🚀 16+ Real-World UI Challenges to Ace System Design Interviews

🔎 AutoComplete (Google Search, YouTube)
✅ Debouncing & throttling
✅ Trie vs. prefix trees for search
✅ Backend vs. frontend caching

🚖 Cab Booking (Uber, Ola)
✅ Live tracking via WebSockets
✅ Real-time driver updates
✅ Surge pricing on frontend

💬 Chat App (WhatsApp, Slack)
✅ WebSockets vs. Long polling
✅ Offline sync & message queues
✅ End-to-end encryption

📧 Email App (Outlook, Gmail)
✅ Virtualized inbox for large datasets
✅ Push notifications & threading
✅ Search indexing & filtering

🍔 Food Delivery (Zomato, Uber Eats)
✅ Real-time order tracking
✅ Location-based recommendations
✅ Optimized image & menu loading

📝 Google Docs (Concurrent Editing)
✅ CRDTs vs. OT
✅ Multi-user sync & conflict resolution
✅ Large document rendering

📊 Google Sheets (Excel Alternative)
✅ Virtualized rendering
✅ Undo/redo implementation
✅ Formula parsing & live collaboration

📸 Image Sharing (Instagram, Pinterest)
✅ Lazy loading & CDN caching
✅ Optimized image formats
✅ Handling high concurrency

🎵 Music Streaming (Spotify, Apple Music)
✅ Adaptive buffering & preloading
✅ Offline mode & caching
✅ Personalized recommendations

👨‍💻 Online Code Editor (VS Code Web)
✅ Real-time collaboration
✅ Syntax highlighting
✅ WebAssembly execution

📌 Pinterest (Masonry Layout Optimization)
✅ Efficient image rendering
✅ Infinite scroll vs. pagination
✅ Grid layout performance

📊 Poll Widget (LinkedIn, Twitter)
✅ Real-time vote updates
✅ Accessibility & animations
✅ Handling high engagement

✍️ Rich Text Editor (Notion)
✅ Draft.js vs. Slate.js
✅ Complex formatting & shortcuts

🛫 Travel Booking (Airbnb)
✅ Dynamic search & pricing
✅ Caching strategies
✅ Secure checkout flows

🎥 Video Conferencing (Zoom)
✅ WebRTC for real-time video
✅ Latency & adaptive streaming
✅ Screen sharing & backgrounds

📺 Video Streaming (Netflix, YouTube)
✅ Adaptive bitrate streaming
✅ CDN caching for fast delivery
✅ Handling millions of users

🛍 E-commerce (Amazon, Flipkart)
✅ CSR vs. SSR for SEO
✅ Optimized checkout flows
✅ High-performance search & filtering

⚡️ How to Prepare?
✅ Break UI systems into scalable components and refer greatFrontend
✅ Understand trade-offs: CSR vs. SSR, Caching, State Management

‼️ATTENTION! Next.JS: CVE-2025-29927 (9.1)

https://zhero-web-sec.github.io/research-and-things/nextjs-and-the-corrupt-middleware

Looks like an internal header can be used from the outside bypassing a lot of authentication checks...

Workaround:

strip the header from external requests! (in your proxy/gw/waf) If patching to a safe version is infeasible, we recommend that you prevent external user requests which contain the x-middleware-subrequest header from reaching your Next.js application.

Affected header:

x-middleware-subrequest

#security

———
@angularMunich

𝙰𝚗𝚐𝚞𝚕𝚊𝚛 𝚟𝟸0 𝚝𝚛𝚢𝚒𝚗𝚐 𝚝𝚘 𝚍𝚎𝚜𝚝𝚛𝚘𝚢 𝚖𝚢 𝚖𝚒𝚗𝚍...

🔘 𝚞𝚜𝚎𝚛.𝚝𝚜 is a component
🔘 𝚞𝚜𝚎𝚛.𝚝𝚜 is a service with requests for backend
🔘 𝚞𝚜𝚎𝚛.𝚝𝚜 is a file describing the user type/interface
🔘 𝚞𝚜𝚎𝚛.𝚝𝚜 is a file with utilities for some mappings necessary for the user entity
🔘 𝚞𝚜𝚎𝚛.𝚝𝚜 is a file with the user class to turn it into a DTO

To avoid confusion, we will 𝐜𝐫𝐚𝐦 everything into one file!

PR-1: kick component
PR-2: kick service

#angular #angularjs

———
@angularMunich

Hey #youtube! What are you doing with my playlist?

99% are

All content is AI-generated, edited and mastered by {{ userName }}.

Any real music bands exists in 2025?

#offtopic #music

⚡️ Angular is deprecating the structural directives ngIf, ngFor, and ngSwitch.

Why?

1️⃣ Apps using both structural directives and control flow blocks end up shipping both implementations, making the bundle size bigger. The new approach is faster and more efficient.

2️⃣ The new control flow block introduces a reconciliation algorithm, which improving performance.

3️⃣ ngFor has a small memory leak, which is fixed in the new @for implementation.

See this PR.

P.S.:
This is not a deprecation of structural directives as a whole — only ngIf, ngFor, and ngSwitch will be affected. They will still work, and if the PR is approved, ng update in Angular v20 will handle the migration automatically.

#angular #angular20

———
@angularMunich

https://frontendnation.com/events/angular-day-2025

with https://www.twitch.tv/summon_the_coder

#fridayITtrend

A student wrote an UI-interface that helped him cheat at interviews using #AI and passed interviews at #Amazon, #Meta, etc.

Then his institute found out about the deception and kicked him out.

Served him right?

https://www.youtube.com/watch?v=AwZ8PtoqCeU

🔄 Angular v20 streamlines your TypeScript configuration by adopting TypeScript 5.4's new module: preserve option

✨ Benefits of this consolidation:
🔘 Less configuration: 3 settings become 1
🔘 Automatic JSON support: resolveJsonModule is included for free
🔘 Smarter import handling: preserves import styles during compilation
🔘 Better package compatibility: properly handles conditional exports in packages

🔍 Now TypeScript correctly resolves paths based on your import style:
🔘 import * as foo from "pkg" → resolves to ESM path
🔘 import bar = require("pkg") → resolves to CommonJS path

https://github.com/angular/angular-cli/commit/03180fe0358662f8fd3255ad546994da3e3bda9c

#angular #angular20 #typenoscript
———
@angularMunich

Show this to people saying that #RxJS is not needed anymore since we have Signals.

Every tool has it’s own use case!

#angular

———
@angularMunich