https://github.com/sgarg5858/frontend-mindmaps
Mind maps for Frontend Concepts like: Angular, TypeScript, JavaScript, SCSS, CSS3, Rxjs, Ngrx, Web Performance, Web Accessibility, Web Security
https://github.com/sgarg5858/frontend-mindmaps
angular angular-libraries css3 dependency-injection forms html javascript microfrontends module-federation ngrx nx nx-workspace rxjs typescript webpack
Last synced: 3 months ago
JSON representation
Mind maps for Frontend Concepts like: Angular, TypeScript, JavaScript, SCSS, CSS3, Rxjs, Ngrx, Web Performance, Web Accessibility, Web Security
- Host: GitHub
- URL: https://github.com/sgarg5858/frontend-mindmaps
- Owner: sgarg5858
- Created: 2022-03-12T11:41:54.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-10-28T12:14:37.000Z (over 3 years ago)
- Last Synced: 2025-12-06T03:58:10.680Z (7 months ago)
- Topics: angular, angular-libraries, css3, dependency-injection, forms, html, javascript, microfrontends, module-federation, ngrx, nx, nx-workspace, rxjs, typescript, webpack
- Homepage:
- Size: 289 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
1. LCP : https://app.excalidraw.com/l/lH4oLrYGXv/8kH5MuBZssR
2. FID: https://app.excalidraw.com/l/lH4oLrYGXv/9vydjPDTaNc
3. CLS: https://app.excalidraw.com/l/lH4oLrYGXv/Asu2mc52FmI
4. TOOLS to Measure: https://app.excalidraw.com/l/lH4oLrYGXv/55mQ85C5LAs
5. PageSpeedInsights: https://app.excalidraw.com/l/lH4oLrYGXv/98OhtRv03Nb
6. Efficient Cache Policy: https://app.excalidraw.com/l/lH4oLrYGXv/2QTaNT33QhM
7. 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:
https://github.com/angular/angular-cli/issues/20864#issuecomment-845406758
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