fix: many grammar tweaks

Fix some typos. Follow some non-obvious English punctuation rules. remove duplicate md files for 50. Add some links for Angular Testing Library Remove inconsistent colons after "Constraints" headers Fix a broken link on 9. Chrome's tab is "Elements", not "source" Add missing challenges to the performance page Similar changes

Author: LMFinney

docs/src/content/docs/challenges/angular/10-utility-wrapper-pipe.md

@@ -14,13 +14,13 @@ sidebar:
 
 ## Information
 
-This is the third of three `@Pipe()` challenges, the goal of this series is to master **pipes** in Angular.
+This is the third of three `@Pipe()` challenges. The goal of this series is to master **pipes** in Angular.
 
-Pipes are a very powerful way to transform data in your template. The difference between calling a function and a pipe is that pure pipes are memoized. So they won't be recalculated every change detection cycle if their inputs haven't changed.
+Pipes are a very powerful way to transform data in your template. The difference between calling a function and a pipe is that pure pipes are memoized. So, they won't be recalculated every change detection cycle if their inputs haven't changed.
 
-Pipes are designed to be efficient and optimized for performance. They use change detection mechanisms to only recalculate the value if the input changes, to minimize unnecessary calculations and improving rendering performance.
+Pipes are designed to be efficient and optimized for performance. They use change detection mechanisms to only recalculate the value if the input changes, to minimize unnecessary calculations and improve rendering performance.
 
-By default a pipe is pure, you should be aware that setting `pure` to false is prone to be inefficient, because it increases the amount of rerenders.
+By default, a pipe is pure. You should be aware that setting `pure` to false is prone to be inefficient, because it increases the amount of rerenders.
 
 :::note
 A **pure** pipe is only called when the value changes.\
@@ -31,7 +31,7 @@ There are some useful predefined pipes like the DatePipe, UpperCasePipe and Curr
 
 ## Statement
 
-In this exercise, you want to access utils functions. Currently you cannot access them directly from your template. The goal is to create a specific pipe for this utils file, where you will need to pass the name of the function you want to call and the needed arguments.
+In this exercise, you want to access utils functions. Currently, you cannot access them directly from your template. The goal is to create a specific pipe for this utils file, where you will need to pass the name of the function you want to call and the needed arguments.
 
 ## Constraints
 

docs/src/content/docs/challenges/angular/13-highly-customizable-css.md

@@ -14,7 +14,7 @@ sidebar:
 
 ## Information
 
-Styling is an important aspect of a frontend developer's day job, but it is often underestimated. In Angular applications, I frequently see people using `@Input()` to customize the style of their components. However, `@Input()` should only be used for logic. Other techniques, such as **CSS variables** and **host-context** should be used for styling.
+Styling is an important aspect of a frontend developer's day job, but it is often underestimated. In Angular applications, I frequently see people using `@Input()` to customize the style of their components. However, `@Input()` should only be used for logic. Other techniques, such as **CSS variables** and **host-context**, should be used for styling.
 
 In this challenge, you will need to use both CSS variables and `:host-context` to remove all `@Input()` from your code.
 

docs/src/content/docs/challenges/angular/22-router-input.md

@@ -1,6 +1,6 @@
 ---
 title: 🟢 @RouterInput()
-description: Challenge 22 is about using the @Input decorator to retreive router params.
+description: Challenge 22 is about using the @Input decorator to retrieve router params.
 author: thomas-laforge
 contributors:
  - tomalaforge

docs/src/content/docs/challenges/angular/3-directive-enhancement.md

@@ -20,15 +20,15 @@ This exercise can feel obsolete with the new control flow and the empty block in
 
 ## Information
 
-Directive is a very powerful tool only offered by the Angular framework. You can apply the DRY principle by having shared logic inside a directive and applying it to any component you want.
+Directives are a very powerful tool only offered by the Angular framework. You can apply the DRY principle by having shared logic inside a directive and applying it to any component you want.
 
-But the real power is that you can enhance an already existing directive which moreover doesn't **belong** to you.
+But the real power is that you can enhance an already-existing directive, which moreover doesn't **belong** to you.
 
 ## Statement
 
 In this exercise, we have a want to display a list of persons. If the list is empty, you must display _" the list is empty !! "_.
 
-Currently we have:
+Currently, we have:
 
 ```typescript
  <ng-container *ngIf="persons.length > 0; else emptyList">

docs/src/content/docs/challenges/angular/32-change-detection-bug.md

@@ -19,7 +19,7 @@ This challenge is inspired by a real-life example that I simplified to create th
 
 ## Information
 
-In this small application, we have a navigation menu to route our application to either `BarComponent` or `FooComponent`. However our application is not loading and no errors are displayed inside the console.
+In this small application, we have a navigation menu to route our application to either `BarComponent` or `FooComponent`. However, our application is not loading and no errors are displayed inside the console.
 
 ## Statement
 

docs/src/content/docs/challenges/angular/33-decoupling-components.md

@@ -18,9 +18,9 @@ sidebar:
 
 The goal of this challenge is to separate the behavior of a component from its style. For the purpose of this challenge, we will be working on a button element. When we click on it, we will toggle a _disabled_ property which will change the style of the element. This is quite useless in real life but the challenge aims to demonstrate a useful concept.
 
-The behavior of the component (referred to as the _brain_ in the Spartan stack) is located in the brain library. The styling part (referred to as the _helmet_) is located inside the helmet library. Both libraries cannot depend on each other because we want to be able to publish them separately. To help us address the issue, we are using the Nx enforce eslint rule. You can find more details [here](https://nx.dev/core-features/enforce-module-boundaries).
+The behavior of the component (referred to as the _brain_ in the Spartan stack) is located in the brain library. The styling part (referred to as the _helmet_) is located inside the helmet library. Both libraries cannot depend on each other because we want to be able to publish them separately. To help us address the issue, we are using the Nx `enforce-module-boundaries` eslint rule. You can find more details [here](https://nx.dev/core-features/enforce-module-boundaries).
 
-However the button's helmet needs to access the state of the component to style the button differently based on its state. As mention above, we cannot import the `BtnDisabledDirective` directly into the helmet library as done currently. If you go to [`BtnHelmetDirective`](../../libs/decoupling/helmet/src/lib/btn-style.directive.ts), you will encounter a linting error. **A project tagged with `type:hlm` can only depend on libs tagged with `type:core`**.
+However, the button's helmet needs to access the state of the component to style the button differently based on its state. As mentioned above, we cannot import the `BtnDisabledDirective` directly into the helmet library as done currently. If you go to [`BtnHelmetDirective`](../../libs/decoupling/helmet/src/lib/btn-style.directive.ts), you will encounter a linting error. **A project tagged with `type:hlm` can only depend on libs tagged with `type:core`**.
 
 ## Statement
 

docs/src/content/docs/challenges/angular/39-injection-token.md

@@ -1,6 +1,6 @@
 ---
 title: 🟠 InjectionToken
-description: Challenge 39 is about learning the power of dependancy injection
+description: Challenge 39 is about learning the power of dependency injection
 author: thomas-laforge
 contributors:
  - tomalaforge

docs/src/content/docs/challenges/angular/4-typed-context-outlet.md

@@ -18,7 +18,7 @@ sidebar:
 
 You can improve template type checking for custom directives by adding template guard properties to your directive definition. Angular offers the static function [`ngTemplateContextGuard`](https://angular.dev/guide/directives/structural-directives#improving-template-type-checking-for-custom-directives) to strongly type structural directives.
 
-However the context of **NgTemplateOutlet** type is **Object**. But with the help of the above guard, we can improve that behavior.
+However, the context of **NgTemplateOutlet** type is **Object**. But with the help of the above guard, we can improve that behavior.
 
 ## Statement
 
@@ -28,17 +28,17 @@ This exercise has two levels of complexity.
 
 ### Level 1: Known Interface
 
-Currently we have the following piece of code.
+Currently, we have the following piece of code.
 
-![Unkown Person](../../../../assets/4/unknown-person.png 'Unkown Person')
+![Unknown Person](../../../../assets/4/unknown-person.png 'Unknown Person')
 
 As we can see, `name` is of type `any`. We want to infer the correct type using the custom directive `PersonDirective`.
 
 ### Level 2: Generic Interface
 
-Currently we have the following piece of code.
+Currently, we have the following piece of code.
 
-![Unkown Student](../../../../assets/4/unknown-student.png 'Unkown Student')
+![Unknown Student](../../../../assets/4/unknown-student.png 'Unknown Student')
 
 As we can see, `student` is of type `any`. We want to infer the correct type using the custom directive `ListDirective`.
 

docs/src/content/docs/challenges/angular/44-view-transition.md

@@ -13,9 +13,9 @@ sidebar:
 
 ## Information
 
-This is the second of two animation challenges, the goal of this series is to master animations in Angular.
+This is the second of two animation challenges. The goal of this series is to master animations in Angular.
 
-The View Transition API is a brand new API that provides a set of features that allow developers to control and manipulate the transitions and animations between views within an application.
+The View Transition API is a brand-new API that provides a set of features that allow developers to control and manipulate the transitions and animations between views within an application.
 It plays a pivotal role in enhancing the user experience (UX), bringing applications to life with engaging and captivating transitions to guide users through different pages or sections of the app.
 
 The goal of this challenge is to learn about and manipulate all types of transitions proposed by the API.

docs/src/content/docs/challenges/angular/45-react-in-angular.md

@@ -57,7 +57,7 @@ npm i --save-dev @types/react @types/react-dom
 
 <details>
  <summary>Hint 2 - Initialization</summary>
- Create a react root with `createRoot(...)`
+ Create a React root with `createRoot(...)`
 </details>
 
 <details>
@@ -76,5 +76,5 @@ npm i --save-dev @types/react @types/react-dom
 
 <details>
  <summary>Hint 4 - Design</summary>
- Do not forget to allow the react file in Tailwind.
+ Do not forget to allow the React file in Tailwind.
 </details>