Frontend-Mindmaps

Modern Angular Development Practices:

https://www.edrawmind.com/online/map.html?sharecode=635bc78b37ffd8a72959637

Angular Forms:

https://www.edrawmind.com/online/map.html?sharecode=622c86d5b268a2a27301323

---

Structural Directives: https://www.edrawmind.com/online/map.html?sharecode=622dd7f11a1838a38334581

---

ng-template(Template Ref)

https://www.edrawmind.com/online/map.html?sharecode=622eeafb2ee214a25223961

---

Dom Abstraction in Angular

https://www.edrawmind.com/online/map.html?sharecode=62e3bad1739f86a46798816

---

Querying DOM in Angular

https://www.edrawmind.com/online/map.html?sharecode=62e2168fcdaac3a76631168

---

Async Pipe

https://www.edrawmind.com/online/map.html?sharecode=62e21654e5c018a11241357

---

TypeScript:

https://www.edrawmind.com/online/map.html?sharecode=63175513b344b3a15395987

---

Promises:

https://www.edrawmind.com/online/map.html?sharecode=62d0f54915a665a90117362

---

Content Projection:

https://www.edrawmind.com/online/map.html?sharecode=623193d90b6d87a17709872

---

Dom Abstractions in Angular:

https://www.edrawmind.com/online/map.html?sharecode=62e3bad1739f86a46798816

---

Querying Dom in Angular:

https://www.edrawmind.com/online/map.html?sharecode=62e2168fcdaac3a76631168

---

Dependency Injection In Angular:

https://www.edrawmind.com/online/map.html?sharecode=62581193343051a11371010

---

Change Detection, NgZone in Angular:

https://www.edrawmind.com/online/map.html?sharecode=626a4ba531fca7a40529356

---

RxJS

https://www.edrawmind.com/online/map.html?sharecode=62502b0ead5a14a62204094

---

Styling in Angular:

https://www.edrawmind.com/online/map.html?sharecode=6318214146dc91a08969453

https://app.excalidraw.com/l/lH4oLrYGXv/3jgWZDqcQnk

https://app.excalidraw.com/l/lH4oLrYGXv/4qWjrSY69uf

---

Analyzing Angular Bundles & Why Analyze Bundles:

https://www.edrawmind.com/online/map.html?sharecode=6308ab957281c4a43871296 https://www.edrawmind.com/online/map.html?sharecode=63147c38bfa1b1a69020555

---

Angular Router:

https://www.edrawmind.com/online/map.html?sharecode=63022d43b04c61a00243978

---

Error Handling in Angular:

https://www.edrawmind.com/online/map.html?sharecode=625e8f5fbc77b6a10346328

---

NgRx:

https://www.edrawmind.com/online/map.html?sharecode=627b46599ef763a37245543

---

Testing Angular Apps: https://www.edrawmind.com/online/map.html?sharecode=6245617b766f60a85744816

Async Testing in Angular: https://medium.com/@menloinnovations/testing-asynchronous-operations-in-angular-components-45d1ebad3864

Rxjs Marble Testing: https://betterprogramming.pub/rxjs-testing-write-unit-tests-for-observables-603af959e251

---

DOM Manipulation:

https://www.edrawmind.com/online/map.html?sharecode=631c4572081307a83877268

---

Lazy Loading Components & Modules In Depth With and Without Router

https://github.com/sgarg5858/lazy-loading/blob/main/README.md

https://www.youtube.com/watch?v=jaP1SX33uYQ&list=PLIG0QvRvxgMMnRiSi1fUxlA73nEMgGp9O&index=4&t=9s

---

SCAM & Standalone Components:

MindMap: https://www.edrawmind.com/online/map.html?sharecode=6337da9a376797a20188185

---

Images in Web:

https://app.excalidraw.com/l/lH4oLrYGXv/6Aayq9n9hmN

---

Web Performance:

1. Critical Rendering Path:

https://app.excalidraw.com/l/lH4oLrYGXv/AUw4wJvBsLI

2. Rendering Performance

https://app.excalidraw.com/l/lH4oLrYGXv/18A322zRDGK

3. preload,prefetch,preconnect

https://app.excalidraw.com/l/lH4oLrYGXv/5sigHCbUZpT

4. Optimize CSS

https://app.excalidraw.com/l/lH4oLrYGXv/AugmJrvr8s8

5. Optimize WebFonts

https://app.excalidraw.com/l/lH4oLrYGXv/wwnP3Hdhon

6. Loading Performance

https://app.excalidraw.com/l/lH4oLrYGXv/A8hViB85OCy

7. Web Vitals:

8. LCP : https://app.excalidraw.com/l/lH4oLrYGXv/8kH5MuBZssR

9. FID: https://app.excalidraw.com/l/lH4oLrYGXv/9vydjPDTaNc

10. CLS: https://app.excalidraw.com/l/lH4oLrYGXv/Asu2mc52FmI

11. TOOLS to Measure: https://app.excalidraw.com/l/lH4oLrYGXv/55mQ85C5LAs

12. PageSpeedInsights: https://app.excalidraw.com/l/lH4oLrYGXv/98OhtRv03Nb

13. Efficient Cache Policy: https://app.excalidraw.com/l/lH4oLrYGXv/2QTaNT33QhM

14. Optimizing Third Party Resources: https://app.excalidraw.com/l/lH4oLrYGXv/26QwEHpVwZq

---

JavaScript:

https://www.edrawmind.com/online/map.html?sharecode=6283ce55948670a19721355

https://www.edrawmind.com/online/map.html?sharecode=62d639103a1557a15496938

https://www.edrawmind.com/online/map.html?sharecode=627213cd634119a13063775

1. Prototypal Inheritance: https://app.excalidraw.com/l/lH4oLrYGXv/45yLxbx6N87

2. Classes: https://app.excalidraw.com/l/lH4oLrYGXv/3H8RuWkmcHk

3. Object Property Descriptors: https://app.excalidraw.com/l/lH4oLrYGXv/3L39YwQKasM

4. Data Types: https://app.excalidraw.com/l/lH4oLrYGXv/4UaUGqbo7uj

5. Type Coercion: https://app.excalidraw.com/l/lH4oLrYGXv/32ckuFD9Hvp

6. Lexical ENV,EC,Hoisting: https://app.excalidraw.com/l/lH4oLrYGXv/ZYrZ9chqUf

7. Programming Paradigms: https://app.excalidraw.com/l/lH4oLrYGXv/4DY351NEb12

8. Functions in JS: https://app.excalidraw.com/l/lH4oLrYGXv/8R4nB4SvX87

9. this : https://app.excalidraw.com/l/lH4oLrYGXv/7Gfp2d8IiQB

10. Promise: https://www.edrawmind.com/online/map.html?sharecode=62d0f54915a665a90117362 , https://app.excalidraw.com/l/lH4oLrYGXv/3g8up0MLRey

11. Object & Map: https://app.excalidraw.com/l/lH4oLrYGXv/yktQzMa0N7

---

CSS

1. CSS Parsing, Box Model,BLOCK,INLINE BLOCK, POSITION: https://app.excalidraw.com/l/lH4oLrYGXv/2dGrluRnLwU

2. min-max content, flexbox, css-grid: https://app.excalidraw.com/l/lH4oLrYGXv/8dZBJlgAIpn

3. Selectors, Psuedo Classes, Elements, Overflow: https://app.excalidraw.com/l/lH4oLrYGXv/6iJWhrM1Hsn

4. SCSS: https://app.excalidraw.com/l/lH4oLrYGXv/6qLOdNowx6

5. min-max-fit content : https://app.excalidraw.com/l/lH4oLrYGXv/pnWvI0vpUE

---

Web Security:

1. Problem with inlining critical CSS from Content Security Policy View Point

https://0xdbe.github.io/AngularSecurity-DisableInlineCriticalCSS/

https://content-security-policy.com/

Work Around: angular/angular-cli#20864 (comment)

2. CSS Injection : https://www.invicti.com/blog/web-security/private-data-stolen-exploiting-css-injection/

3. Content Security Policy :

https://web.dev/csp/.

https://content-security-policy.com/

---

SCSS in Angular:

1. MindMap: https://www.edrawmind.com/online/map.html?sharecode=633c1620907c26a10509601

2. Folder Structure: https://medium.com/swlh/how-to-structure-scss-in-an-angular-app-a1b8a759a028

3. Architecture: https://sass-guidelin.es/#architecture

4. Theming using Angular Material: https://app.excalidraw.com/l/lH4oLrYGXv/3jgWZDqcQnk

5. How to access SCSS Variables in Components :

https://netbasal.com/angular-cli-and-global-sass-variables-a1b92d8ca9b7

https://stackoverflow.com/questions/55131372/global-scss-variables-for-angular-components-without-importing-them-everytime

6. Dark Mode Using Angular Material And Css Variables and :root psuedo selector

https://medium.com/@lisa.berteau.smith/dont-be-left-in-the-dark-how-to-design-a-dark-mode-with-angular-material-theme-7046920af8fb

7. SCSS Variables vs CSS variables:

https://dev.to/nicm42/combining-sass-variables-with-css-custom-properties

https://css-tricks.com/difference-between-types-of-css-variables/

https://stackoverflow.com/questions/55131372/global-scss-variables-for-angular-components-without-importing-them-everytime

8. SCSS Module System @use and @forward over @import !

https://css-tricks.com/introducing-sass-modules/

https://stefaniefluin.medium.com/the-new-sass-module-system-out-with-import-in-with-use-e1bd8ba032d0

https://sass-lang.com/blog/the-module-system-is-launched