refactor: resolve file conflict

.all-contributorsrc

@@ -3,16 +3,26 @@
   "projectOwner": "tomalaforge",
   "repoType": "github",
   "repoHost": "https://github.com",
-  "files": [
+  "files": ["README.md"],
-    "README.md"
-  ],
   "imageSize": 100,
   "commit": true,
   "commitConvention": "angular",
   "types": {
     "challenge": {
       "symbol": "🧩",
-      "description": "Created a challenge"
+      "description": "Create a challenge"
+    },
+    "translation-es": {
+      "symbol": "🇪🇸",
+      "description": "Translate in Spanish"
+    },
+    "translation-fr": {
+      "symbol": "🇫🇷",
+      "description": "Translate in French"
+    },
+    "translation-pt": {
+      "symbol": "🇵🇹",
+      "description": "Translate in Portugese"
     }
   },
   "contributors": [
@@ -27,7 +37,8 @@
         "doc",
         "content",
         "ideas",
-        "design"
+        "design",
+        "translation-fr"
       ]
     },
     {
@@ -35,104 +46,77 @@
       "name": "Alan Dragicevich",
       "avatar_url": "https://avatars.githubusercontent.com/u/31838230?v=4",
       "profile": "https://github.com/alan-bio",
-      "contributions": [
+      "contributions": ["doc"]
-        "doc"
-      ]
     },
     {
       "login": "edimitchel",
       "name": "Michel EDIGHOFFER",
       "avatar_url": "https://avatars.githubusercontent.com/u/2922851?v=4",
       "profile": "https://github.com/edimitchel",
-      "contributions": [
+      "contributions": ["doc"]
-        "doc"
-      ]
     },
     {
       "login": "gsgonzalez88",
       "name": "Gerardo Sebastian Gonzalez",
       "avatar_url": "https://avatars.githubusercontent.com/u/39884678?v=4",
       "profile": "https://github.com/gsgonzalez88",
-      "contributions": [
+      "contributions": ["doc"]
-        "doc"
-      ]
     },
     {
       "login": "marryday",
       "name": "Evseev Yuriy",
       "avatar_url": "https://avatars.githubusercontent.com/u/57489315?v=4",
       "profile": "https://github.com/marryday",
-      "contributions": [
+      "contributions": ["bug"]
-        "bug"
-      ]
     },
     {
       "login": "tomer953",
       "name": "Tomer953",
       "avatar_url": "https://avatars.githubusercontent.com/u/1807493?v=4",
       "profile": "https://github.com/tomer953",
-      "contributions": [
+      "contributions": ["bug", "doc", "code"]
-        "bug",
-        "doc",
-        "code"
-      ]
     },
     {
       "login": "jdegand",
       "name": "J. Degand",
       "avatar_url": "https://avatars.githubusercontent.com/u/70610011?v=4",
       "profile": "https://github.com/jdegand",
-      "contributions": [
+      "contributions": ["doc"]
-        "doc"
-      ]
     },
     {
       "login": "DeveshChau",
       "name": "Devesh Chaudhari",
       "avatar_url": "https://avatars.githubusercontent.com/u/9509673?v=4",
       "profile": "https://github.com/DeveshChau",
-      "contributions": [
+      "contributions": ["code", "bug", "challenge"]
-        "code",
-        "bug",
-        "challenge"
-      ]
     },
     {
       "login": "dmmishchenko",
       "name": "Dmitriy Mishchenko",
       "avatar_url": "https://avatars.githubusercontent.com/u/51910160?v=4",
       "profile": "https://github.com/dmmishchenko",
-      "contributions": [
+      "contributions": ["doc"]
-        "doc"
-      ]
     },
     {
       "login": "Sagardevkota",
       "name": "Sagar Devkota",
       "avatar_url": "https://avatars.githubusercontent.com/u/30800393?v=4",
       "profile": "http://www.sagardev.com.np",
-      "contributions": [
+      "contributions": ["doc", "code"]
-        "doc",
-        "code"
-      ]
     },
     {
       "login": "nelsongutidev",
       "name": "Nelson Gutierrez",
       "avatar_url": "https://avatars.githubusercontent.com/u/62297014?v=4",
       "profile": "https://nelsonguti.dev/",
-      "contributions": [
+      "contributions": ["translation-es"]
-        "doc"
-      ]
     },
     {
       "login": "ho-ssain",
       "name": "Hossain K. M.",
       "avatar_url": "https://avatars.githubusercontent.com/u/61125174?v=4",
       "profile": "https://github.com/ho-ssain",
-      "contributions": [
+      "contributions": ["doc"]
-        "doc"
-      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -24,7 +24,7 @@ If you would like to propose a challenge, this project is open source, so feel f
 
 ## Challenges
 
-Check [all 39 challenges](https://angular-challenges.vercel.app/)
+Check [all 40 challenges](https://angular-challenges.vercel.app/)
 
 ## Contributors ✨
 
@@ -34,7 +34,7 @@ Check [all 39 challenges](https://angular-challenges.vercel.app/)
 <table>
   <tbody>
     <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://thomaslaforge.dev/home"><img src="https://avatars.githubusercontent.com/u/30832608?v=4?s=100" width="100px;" alt="Laforge Thomas"/><br /><sub><b>Laforge Thomas</b></sub></a><br /><a href="#challenge-tomalaforge" title="Created a challenge">🧩</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=tomalaforge" title="Code">💻</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=tomalaforge" title="Documentation">📖</a> <a href="#content-tomalaforge" title="Content">🖋</a> <a href="#ideas-tomalaforge" title="Ideas, Planning, & Feedback">🤔</a> <a href="#design-tomalaforge" title="Design">🎨</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://thomaslaforge.dev/home"><img src="https://avatars.githubusercontent.com/u/30832608?v=4?s=100" width="100px;" alt="Laforge Thomas"/><br /><sub><b>Laforge Thomas</b></sub></a><br /><a href="#challenge-tomalaforge" title="Create a challenge">🧩</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=tomalaforge" title="Code">💻</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=tomalaforge" title="Documentation">📖</a> <a href="#content-tomalaforge" title="Content">🖋</a> <a href="#ideas-tomalaforge" title="Ideas, Planning, & Feedback">🤔</a> <a href="#design-tomalaforge" title="Design">🎨</a> <a href="#translation-fr-tomalaforge" title="Translate in French">🇫🇷</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/alan-bio"><img src="https://avatars.githubusercontent.com/u/31838230?v=4?s=100" width="100px;" alt="Alan Dragicevich"/><br /><sub><b>Alan Dragicevich</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=alan-bio" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/edimitchel"><img src="https://avatars.githubusercontent.com/u/2922851?v=4?s=100" width="100px;" alt="Michel EDIGHOFFER"/><br /><sub><b>Michel EDIGHOFFER</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=edimitchel" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/gsgonzalez88"><img src="https://avatars.githubusercontent.com/u/39884678?v=4?s=100" width="100px;" alt="Gerardo Sebastian Gonzalez"/><br /><sub><b>Gerardo Sebastian Gonzalez</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=gsgonzalez88" title="Documentation">📖</a></td>
@@ -43,10 +43,10 @@ Check [all 39 challenges](https://angular-challenges.vercel.app/)
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/jdegand"><img src="https://avatars.githubusercontent.com/u/70610011?v=4?s=100" width="100px;" alt="J. Degand"/><br /><sub><b>J. Degand</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=jdegand" title="Documentation">📖</a></td>
     </tr>
     <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/DeveshChau"><img src="https://avatars.githubusercontent.com/u/9509673?v=4?s=100" width="100px;" alt="Devesh Chaudhari"/><br /><sub><b>Devesh Chaudhari</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=DeveshChau" title="Code">💻</a> <a href="https://github.com/tomalaforge/angular-challenges/issues?q=author%3ADeveshChau" title="Bug reports">🐛</a> <a href="#challenge-DeveshChau" title="Created a challenge">🧩</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/DeveshChau"><img src="https://avatars.githubusercontent.com/u/9509673?v=4?s=100" width="100px;" alt="Devesh Chaudhari"/><br /><sub><b>Devesh Chaudhari</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=DeveshChau" title="Code">💻</a> <a href="https://github.com/tomalaforge/angular-challenges/issues?q=author%3ADeveshChau" title="Bug reports">🐛</a> <a href="#challenge-DeveshChau" title="Create a challenge">🧩</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/dmmishchenko"><img src="https://avatars.githubusercontent.com/u/51910160?v=4?s=100" width="100px;" alt="Dmitriy Mishchenko"/><br /><sub><b>Dmitriy Mishchenko</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=dmmishchenko" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://www.sagardev.com.np"><img src="https://avatars.githubusercontent.com/u/30800393?v=4?s=100" width="100px;" alt="Sagar Devkota"/><br /><sub><b>Sagar Devkota</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=Sagardevkota" title="Documentation">📖</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=Sagardevkota" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://nelsonguti.dev/"><img src="https://avatars.githubusercontent.com/u/62297014?v=4?s=100" width="100px;" alt="Nelson Gutierrez"/><br /><sub><b>Nelson Gutierrez</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=nelsongutidev" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://nelsonguti.dev/"><img src="https://avatars.githubusercontent.com/u/62297014?v=4?s=100" width="100px;" alt="Nelson Gutierrez"/><br /><sub><b>Nelson Gutierrez</b></sub></a><br /><a href="#translation-es-nelsongutidev" title="Translate in Spanish">🇪🇸</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/ho-ssain"><img src="https://avatars.githubusercontent.com/u/61125174?v=4?s=100" width="100px;" alt="Hossain K. M."/><br /><sub><b>Hossain K. M.</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=ho-ssain" title="Documentation">📖</a></td>
     </tr>
   </tbody>

apps/performance/christmas-web-worker/.eslintrc.json

@@ -0,0 +1,19 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {}
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

apps/performance/christmas-web-worker/README.md

@@ -0,0 +1,13 @@
+# Web workers
+
+> Author: Thomas Laforge
+
+### Run Application
+
+```bash
+npx nx serve performance-christmas-web-worker
+```
+
+### Documentation and Instruction
+
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/performance/40-christmas-web-worker/).

apps/performance/christmas-web-worker/project.json

@@ -0,0 +1,79 @@
+{
+  "name": "performance-christmas-web-worker",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "prefix": "app",
+  "sourceRoot": "apps/performance/christmas-web-worker/src",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@angular-devkit/build-angular:application",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/apps/performance/christmas-web-worker",
+        "index": "apps/performance/christmas-web-worker/src/index.html",
+        "browser": "apps/performance/christmas-web-worker/src/main.ts",
+        "polyfills": ["zone.js"],
+        "tsConfig": "apps/performance/christmas-web-worker/tsconfig.app.json",
+        "assets": [
+          "apps/performance/christmas-web-worker/src/favicon.ico",
+          "apps/performance/christmas-web-worker/src/assets"
+        ],
+        "styles": ["apps/performance/christmas-web-worker/src/styles.scss"],
+        "scripts": []
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "500kb",
+              "maximumError": "1mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "2kb",
+              "maximumError": "4kb"
+            }
+          ],
+          "outputHashing": "all"
+        },
+        "development": {
+          "optimization": false,
+          "extractLicenses": false,
+          "sourceMap": true,
+          "namedChunks": true
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "configurations": {
+        "production": {
+          "buildTarget": "performance-christmas-web-worker:build:production"
+        },
+        "development": {
+          "buildTarget": "performance-christmas-web-worker:build:development"
+        }
+      },
+      "defaultConfiguration": "development"
+    },
+    "extract-i18n": {
+      "executor": "@angular-devkit/build-angular:extract-i18n",
+      "options": {
+        "browserTarget": "performance-christmas-web-worker:build"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "apps/performance/christmas-web-worker/**/*.ts",
+          "apps/performance/christmas-web-worker/**/*.html"
+        ]
+      }
+    }
+  }
+}

apps/performance/christmas-web-worker/src/app/app.component.ts

@@ -0,0 +1,32 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { HeavyCalculationService } from './heavy-calculation.service';
+import { UnknownPersonComponent } from './unknown-person/unknown-person.component';
+
+@Component({
+  standalone: true,
+  imports: [CommonModule, UnknownPersonComponent],
+  providers: [HeavyCalculationService],
+  selector: 'app-root',
+  template: `
+    <unknown-person [step]="loadingPercentage()" class="relative grow" />
+    <button
+      class="my-3 w-fit self-center rounded-md border border-white px-4 py-2 text-2xl text-white"
+      (click)="discover()">
+      Discover
+    </button>
+    <div class="p-1 text-white">Progress: {{ loadingPercentage() }}%</div>
+  `,
+  host: {
+    class: `flex flex-col h-screen w-screen bg-[#1f75c0]`,
+  },
+})
+export class AppComponent {
+  private heavyCalculationService = inject(HeavyCalculationService);
+
+  readonly loadingPercentage = this.heavyCalculationService.loadingPercentage;
+
+  discover() {
+    this.heavyCalculationService.startLoading();
+  }
+}

apps/performance/christmas-web-worker/src/app/heavy-calculation.service.ts

@@ -0,0 +1,30 @@
+import { Injectable, computed, signal } from '@angular/core';
+
+@Injectable()
+export class HeavyCalculationService {
+  private finalLength = 664579;
+  private loadingLength = signal(0);
+
+  loadingPercentage = computed(
+    () => (this.loadingLength() * 100) / this.finalLength,
+  );
+
+  startLoading() {
+    this.randomHeavyCalculationFunction();
+  }
+
+  private randomHeavyCalculationFunction() {
+    for (let num = 2; num <= 10000000; num++) {
+      let randomFlag = true;
+      for (let i = 2; i <= Math.sqrt(num); i++) {
+        if (num % i === 0) {
+          randomFlag = false;
+          break;
+        }
+      }
+      if (randomFlag) {
+        this.loadingLength.update((l) => l + 1);
+      }
+    }
+  }
+}

apps/performance/christmas-web-worker/src/app/unknown-person/unknown-person.component.css

@@ -0,0 +1,223 @@
+*,
+*:before,
+*:after {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+body {
+  background-color: #fff2c8;
+}
+.container {
+  width: 380px;
+  height: 500px;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+}
+.container *:before,
+.container *:after {
+  position: absolute;
+  content: '';
+}
+.santa {
+  height: 220px;
+  width: 200px;
+  background-color: #e84701;
+  border-radius: 80px;
+  position: absolute;
+  left: 115px;
+  top: 200px;
+}
+.santa:before,
+.santa:after {
+  width: 40px;
+  margin: auto;
+  left: 0;
+  right: 0;
+  background-color: #fff2c8;
+}
+.santa:before {
+  height: 130px;
+}
+.santa:after {
+  height: 40px;
+  bottom: -15px;
+}
+.hand-l {
+  background-color: #e84701;
+  height: 90px;
+  width: 105px;
+  position: absolute;
+  right: -30px;
+  top: 20px;
+  border-radius: 0 80px 0 0;
+}
+.hand-l:before {
+  margin: auto;
+  width: 35px;
+  height: 15px;
+  background-color: #ffffff;
+  top: 85px;
+  left: 71px;
+}
+.hand-l:after {
+  height: 15px;
+  width: 30px;
+  background-color: #fad2af;
+  left: 74px;
+  top: 101px;
+  border-radius: 0 0 30px 30px;
+}
+.hand-r {
+  height: 150px;
+  width: 180px;
+  border: 30px solid transparent;
+  border-bottom: 40px solid #e84701;
+  position: absolute;
+  left: -100px;
+  bottom: 150px;
+  border-radius: 50%;
+  animation: wave 1.5s infinite;
+  transform-origin: right;
+}
+@keyframes wave {
+  50% {
+    transform: rotate(15deg);
+  }
+}
+.hand-r:before {
+  width: 35px;
+  height: 15px;
+  background-color: #ffffff;
+  transform: rotate(-50deg);
+  top: 68px;
+  left: -22px;
+}
+.hand-r:after {
+  width: 30px;
+  height: 15px;
+  background-color: #fad2af;
+  transform: rotate(-50deg);
+  left: -31px;
+  top: 58px;
+  border-radius: 15px 15px 0 0;
+}
+.face {
+  position: absolute;
+  margin: auto;
+  height: 180px;
+  width: 180px;
+  background-color: #fad2af;
+  border: 25px solid #f2e6da;
+  border-radius: 50%;
+  left: 0;
+  right: 0;
+  bottom: 140px;
+}
+.beard {
+  position: absolute;
+  height: 90px;
+  width: 180px;
+  background-color: #ffffff;
+  border-radius: 0 0 90px 90px;
+  right: -25px;
+  bottom: -25px;
+}
+.beard:before {
+  width: 55px;
+  height: 25px;
+  background-color: #f2e6da;
+  border-radius: 20px 0;
+  left: 34px;
+}
+.beard:after {
+  height: 25px;
+  width: 55px;
+  background-color: #f2e6da;
+  border-radius: 0 20px;
+  right: 34px;
+}
+.eyes {
+  height: 12px;
+  width: 12px;
+  background-color: #0078ca;
+  border-radius: 50%;
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  box-shadow: 38px 0 #0078ca, 19px 20px #f69697;
+}
+.eyes:before {
+  height: 12px;
+  width: 25px;
+  background-color: #ffffff;
+  border-radius: 10px 0;
+  left: -10px;
+  bottom: 20px;
+}
+.eyes:after {
+  height: 12px;
+  width: 25px;
+  background-color: #ffffff;
+  border-radius: 0 10px;
+  left: 32px;
+  bottom: 20px;
+}
+.hat {
+  position: absolute;
+  height: 60px;
+  width: 120px;
+  background-color: #e84701;
+  top: -98px;
+  left: 85px;
+  border-radius: 0 0 60px 60px;
+}
+.hat:before {
+  height: 40px;
+  width: 40px;
+  background-color: #ffffff;
+  left: 100px;
+  top: -15px;
+  border-radius: 50%;
+}
+.belt {
+  position: absolute;
+  width: 100%;
+  height: 30px;
+  background-color: #000000;
+  top: 100px;
+}
+.belt:before {
+  height: 100%;
+  width: 40px;
+  border: 7px solid #ffdc2e;
+  margin: auto;
+  left: 0;
+  right: 0;
+}
+.belt:after {
+  height: 5px;
+  width: 15px;
+  background-color: #ffdc2e;
+  left: 100px;
+  top: 12px;
+}
+.shoe {
+  height: 20px;
+  width: 20px;
+  background-color: #000000;
+  position: absolute;
+  top: 220px;
+  left: 60px;
+  border-radius: 20px 0 0 0;
+}
+.shoe:before {
+  height: 20px;
+  width: 20px;
+  background-color: #000000;
+  top: 0;
+  left: 60px;
+  border-radius: 0 20px 0 0;
+}

apps/performance/christmas-web-worker/src/app/unknown-person/unknown-person.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input } from '@angular/core';
+@Component({
+  selector: 'unknown-person',
+  standalone: true,
+  template: `
+    <div
+      class="absolute inset-0 z-10 bg-black text-center text-3xl text-white"
+      [style.height.%]="100 - step">
+      @if (step !== 100) {
+        <div
+          class="relative left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+          Who is here?
+        </div>
+      }
+    </div>
+    <div class="text-center text-4xl text-white">Happy Christmas !!!</div>
+    <div class="container">
+      <div class="santa">
+        <div class="hand-l"></div>
+        <div class="hand-r"></div>
+        <div class="hat"></div>
+        <div class="face">
+          <div class="beard"></div>
+          <div class="eyes"></div>
+        </div>
+        <div class="belt"></div>
+        <div class="shoe"></div>
+      </div>
+    </div>
+  `,
+  styleUrls: [`unknown-person.component.css`],
+})
+export class UnknownPersonComponent {
+  @Input({ required: true }) step!: number;
+}

apps/performance/christmas-web-worker/src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>performance-christmas-web-worker</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

apps/performance/christmas-web-worker/src/main.ts

@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent).catch((err) => console.error(err));

apps/performance/christmas-web-worker/src/styles.scss

@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* You can add global styles to this file, and also import other style files */

apps/performance/christmas-web-worker/tailwind.config.js

@@ -0,0 +1,14 @@
+const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
+const { join } = require('path');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

apps/performance/christmas-web-worker/tsconfig.app.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+}

apps/performance/christmas-web-worker/tsconfig.editor.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*.ts"],
+  "compilerOptions": {
+    "types": []
+  }
+}

apps/performance/christmas-web-worker/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.editor.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

challenge-number.json

@@ -1,6 +1,6 @@
 {
-  "total": 39,
+  "total": 40,
   "🟢": 14,
-  "🟠": 118,
+  "🟠": 119,
   "🔴": 207
 }

docs/astro.config.mjs

@@ -4,6 +4,7 @@ import { defineConfig } from 'astro/config';
 export const locales = {
   root: { label: 'English', lang: 'en' },
   es: { label: 'Español', lang: 'es' },
+  fr: { label: 'Français', lang: 'fr' },
   'pt-br': { label: 'Português (Brasil)', lang: 'pt-BR' },
 };
 
@@ -29,6 +30,7 @@ export default defineConfig({
           autogenerate: { directory: 'guides' },
           translations: {
             es: 'Guías',
+            fr: 'Guides',
             'pt-BR': 'Guias',
           },
         },
@@ -37,6 +39,7 @@ export default defineConfig({
           autogenerate: { directory: 'challenges' },
           translations: {
             es: 'Desafíos',
+            fr: 'Challenges',
             'pt-BR': 'Desafios'
           },
         },
@@ -76,6 +79,10 @@ export default defineConfig({
           label: 'Español',
           lang: 'es',
         },
+        fr: {
+          label: 'Français',
+          lang: 'fr',
+        },
         'pt-br': {
           label: 'Português (Brasil)',
           lang: 'pt-BR',

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

@@ -6,7 +6,6 @@ challengeNumber: 39
 command: angular-injection-token
 sidebar:
   order: 118
-  badge: New
 ---
 
 ## Information

docs/src/content/docs/challenges/performance/40-christmas-web-worker.md

@@ -0,0 +1,32 @@
+---
+title: 🟠 Web workers
+description: Challenge 40 is about learning how to create and use a web worker
+author: thomas-laforge
+challengeNumber: 40
+command: performance-christmas-web-worker
+sidebar:
+  order: 119
+  badge: New
+---
+
+## Information
+
+This challenge has been created for Angular Advent Calendar 2023.
+
+This application is basic. We click on the **Discover** button to reveal the surprise hidden behind the black screen. However, the current application provides an awful user experience. When we click on the button, the page freezes, and after a while, it reveals the secret all at once without a smooth animation.
+
+> Note: To create the application freeze, the loader is based on a very heavy computation function. We could have used a basic timer, but that's not the point of this challenge.
+
+Since JavaScript is single-threaded, when we perform a heavy task, the browser cannot update the UI or respond to mouse clicks or any events. To free the main thread, the goal is to isolate the heavy computation into a different thread. To do so, we will need to use web workers. Web workers can run any scripts in the background, in isolation from the main thread, allowing the browser to still provide your user with a good experience.
+
+In Angular, this technology is often underused, however, it's straightforward to create one. There is a schematic that you can find here.
+
+## Statement
+
+The goal of this challenge is to create a smooth animation by isolating the heavy computation function into a web worker.
+
+First, create a web worker using the schematics, then move the issuing function. Finally, the animation should be smooth and provide an awesome user experience.
+
+### Note
+
+Since we are inside an Nx workspace, simply replace the `ng` command with `nx` when running the schematic.

docs/src/content/docs/fr/guides/getting-started.md

@@ -0,0 +1,57 @@
+---
+title: Comment démarrer
+description: Un guide sur la manière de commencer avec sur Angular Challenges.
+sidebar:
+  order: 1
+---
+
+Pour commencer avec les <b>Challenges Angular</b>, suivez ces étapes :
+
+## Créez un compte Github
+
+Si vous souhaitez soumettre une réponse, vous devrez avoir votre propre compte GitHub. De plus, avoir un compte GitHub est toujours bénéfique et c'est gratuit.
+
+## Forkez le projet GitHub
+
+Accédez au [répertoire des Challenges Angular](https://github.com/tomalaforge/angular-challenges) et cliquez sur le bouton <span class="github-neutral-btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked mr-2">
+<path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path></svg>Fork</span> dans l'en-tête. Cela créera une copie de ce dépôt sur votre propre page GitHub.
+
+## Clonez le dépôt sur votre machine locale
+
+Sélectionnez un répertoire sur votre ordinateur local et clonez ce dépôt.
+
+Ouvrez un terminal, accédez au répertoire choisi et tapez la commande suivante :
+
+```bash
+git clone https://github.com/[VOTRE_NOM_GITHUB]/angular-challenges.git
+```
+
+:::note
+Vous pouvez trouver l'URL de clonage en cliquant sur le bouton <span class="github-success-btn"><> Code</span> dans votre <b>propre instance</b> du dépôt des Challenges Angular.
+
+![Header of github workpspace](../../../../assets/header-github.png)
+
+:::
+
+## Ouvrez le projet dans votre IDE préféré
+
+Ouvrez le projet dans n'importe quel IDE de votre choix.
+
+## Installez toutes les dépendances
+
+```bash
+npm ci
+```
+
+## Choisissez un challenge
+
+Votre projet est maintenant opérationnel. La seule étape restante est de choisir un challenge 🚀
+
+Chaque challenge se compose de :
+
+- <b>Nom</b> : indiquant de quoi traite le défi.
+- <b>Numéro</b> : ordre de création. Le numéro n'a pas de signification particulière mais aide pour la référence dans la section des Demandes de Tirage (Pull Requests) GitHub.
+- <b>Badge</b> : aide à visualiser le degré de difficulté. C'est entièrement subjectif 😅
+  - 🟢 facile
+  - 🟠 moyen
+  - 🔴 difficile

docs/src/content/docs/fr/guides/resolve-challenge.md

@@ -0,0 +1,93 @@
+---
+title: Résoudre un Challenge
+description: Guide pour résoudre un challenge
+sidebar:
+  order: 2
+---
+
+Dans ce guide, vous apprendrez comment résoudre un challenge et soumettre une réponse sur le répertoire principal de Github.
+
+## Introduction
+
+Ce répertoire utilise [Nx](https://nx.dev/getting-started/intro). <b>Nx</b> est un monorépo qui vous permet de stocker plusieurs applications à l'intérieur du même espace de travail. Chaque challenge est une application distincte. Si vous ouvrez le répertoire `apps`, vous trouverez plusieurs dossiers, chacun lié à un challenge spécifique. Chaque dossier représente une application autonome complète `Nx`. Pour exécuter et démarrer l'une d'entre elles, ouvrez votre terminal et exécutez :
+
+```bash
+npx nx serve <NOM_APPLICATION>
+```
+
+:::note
+Si vous n'êtes pas sûr de votre `NOM_APPLICATION`, ouvrez le fichier README.md. La commande `serve` y est écrite, avec un lien vers la documentation du challenge.
+:::
+
+:::note
+Si vous installez `nx` globalement sur votre ordinateur, vous éviterez de préfixer chaque commande par `npx`.
+
+Pour installer `nx` globalement, exécutez
+
+```bash
+npm i -g nx
+```
+
+:::
+
+## Créer une Branche Git
+
+Avant de commencer à résoudre un challenge, créez une branche git pour y ajouter vos modifications.
+
+```bash
+git checkout -b <BRANCH_NAME>
+```
+
+## Résoudre un Challenge
+
+Suivez les instructions décrites sur chaque Challenge pour le résoudre.
+
+## Commitez et Pousser votre Travail
+
+La dernière étape consiste à valider votre travail en suivant les [Conventional Guidelines](https://www.conventionalcommits.org/en/v1.0.0/).
+
+Enfin, poussez votre travail vers le répertoire distant avec la commande suivante
+
+```bash
+    git push --set-upstream origin <BRANCH_NAME>
+```
+
+:::tip[Pas besoin de retenir la commande par coeur]
+Vous n'avez pas besoin de mémoriser précisément la commande. Il vous suffit de vous rappeler `git push `et si c'est la première fois que vous poussez cette branche, `git` vous fournira la commande complète.
+:::
+
+## Soumettre votre Travail sur le répertoire Principal
+
+Maintenant, tout votre travail se trouve dans votre instance locale du dépôt de Angular Challenges.
+
+La prochaine étape est de vous rendre sur la page principale de Angular Challenges et de créer une nouvelle Pull Request.
+
+Github devrait afficher en en-tête une notification pour vous aider à créer la pull request.
+
+Si ce n'est pas le cas, vous avez soit mal effectué l'une des étapes précédentes, soit vous pouvez vous rendre sur l'onglet <b>Pull Request</b> et cliquer sur le bouton <span class="github-success-btn">New pull request</span>.
+
+Une fois que vous avez choisi les deux branches à comparer, vous devriez arriver sur la page suivante :
+
+![New pull request screen](../../../../assets/new-pull-request.png)
+
+Dans la section du titre, commencez par <b>Réponse :</b> suivi de votre <b>numéro de challenge</b>. Ensuite, vous êtes libre d'ajouter tout ce que vous souhaitez.
+
+:::danger
+C'est très important. Cela permet aux autres de savoir quel challenge vous tentez de résoudre.
+:::
+
+Dans la section de description, vous pouvez ajouter des questions, des problèmes rencontrés ou tout autre contenu que vous souhaitez partager. Vous pouvez laisser vide si vous n'avez rien à dire.
+
+Vous pouvez maintenant cliquer sur <span class="github-success-btn">Créer pull request</span>.
+
+Je la lirai et commenterai <b>quand j'aurai du temps libre.</b>
+
+<p class="important-block">Ne vous inquiétez pas si votre réponse n'est pas examinée immédiatement. Je le fais <b>gratuitement</b> et pendant mon <b>temps libre</b>. Si vous souhaitez me soutenir, vous pouvez le faire en me <a href="https://github.com/sponsors/tomalaforge">sponsorisant sur github</a>. Cela validera que mon travail vous aide, vous ou votre équipe.</p>
+
+:::note
+Tout le monde peut commenter ou lire les Pull Requests des autres participants.
+:::
+
+:::tip[Champion OSS]
+🔥 Une fois que vous avez terminé ce tutoriel, vous êtes prêt à contribuer à n'importe quel répertoire public Github et à soumettre une PR. C'est aussi simple que ça. 🔥
+:::

docs/src/content/docs/fr/index.mdx

@@ -0,0 +1,78 @@
+---
+title: Bienvenue sur Angular Challenges
+description: Commence par résoudre ces défis et deviens un meilleur ingénieur FrontEnd Angular.
+template: splash
+noCommentSection: true
+banner:
+  content: J'aurai moins de temps libre dans les deux prochains mois, donc ne vous inquiétez pas si vos pull requests prennent du temps à être examinées.
+hero:
+  tagline: Commence maintenant et deviens un expert Angular !
+  image:
+    file: ../../../assets/angular-challenge.webp
+  actions:
+    - text: C'est parti !
+      link: /guides/getting-started/
+      icon: right-arrow
+      variant: primary
+    - text: Aller au dernier Challenge
+      link: /challenges/performance/40-christmas-web-worker/
+      icon: rocket
+    - text: Donne une étoile
+      link: https://github.com/tomalaforge/angular-challenges
+      icon: github
+      variant: secondary
+---
+
+import { Card, CardGrid } from '@astrojs/starlight/components';
+import MyIcon from '../../../components/MyIcon.astro';
+
+<CardGrid>
+<Card title="40 Défis">
+    Ce répertoire rassemble 40 défis liés à <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> et <b>Typescript</b>. Ces défis portent sur des problèmes réels ou des fonctionnalités spécifiques pour améliorer vos compétences.
+</Card>
+
+<Card title="Devenir un Mainteneur OSS">
+  L'un des objectifs de ce répertoire est de rendre plus accessible les
+  contributions aux logiciels Open Source (OSS). En résolvant ces défis, vous
+  apprendrez comment commencer à contribuer à n'importe quel projet Open Source.
+</Card>
+
+<Card title="Apprendre aux Côtés des Autres">
+  Apprendre et démarrer sur un nouveau framework est toujours difficile. Cette
+  série de défis propose des cas d'utilisation réels pour appliquer ce que vous
+  avez appris. N'importe qui peut commenter ou aider.{' '}
+  <b>
+    Apprendre seul est bien, mais apprendre aux côtés des autres vous fera
+    progresser davantage et plus rapidement.
+  </b>
+</Card>
+
+<Card title="Contribuer">
+  Avez-vous un problème, un bug intéressant ou une idée ? N'hésitez pas ;{' '}
+  <b>créez vos propres challenges</b> sans perdre de temps.
+</Card>
+
+<Card title="Se Préparer pour les Entretiens">
+  Résoudre ces challenges vous préparera aux éventuels défis techniques que vous
+  pourriez rencontrer lors d'un entretien pour un rôle d'ingénieur frontend.
+</Card>
+
+<Card title="Sponsoring">
+    Ce projet est gratuit et vise à le rester le plus longtemps possible. Cependant, tout est réalisé pendant mon temps libre, y compris la création de challenges et la relecture des pull requests. <b>Le sponsoring peut me soutenir et contribuer à la croissance du projet.</b>
+</Card>
+</CardGrid>
+
+---
+
+<div class="article-footer">
+  <a href="https://github.com/sponsors/tomalaforge" alt="Sponsor link">
+    <MyIcon name="fillHeart" size="1.2rem" color="white" />
+    Sponsoriser le Project
+  </a>
+</div>
+
+<div class="main-page-footer">
+  Créer par{' '}
+  <a href="https://github.com/tomalaforge?tab=repositories">Thomas Laforge</a> -
+  Réaliser grâce à 🌟 <a href="https://starlight.astro.build/">Starlight</a>
+</div>

docs/src/content/docs/index.mdx

@@ -15,7 +15,7 @@ hero:
       icon: right-arrow
       variant: primary
     - text: Go to the latest Challenge
-      link: /challenges/angular/39-injection-token/
+      link: /challenges/performance/40-christmas-web-worker/
       icon: rocket
     - text: Give a star
       link: https://github.com/tomalaforge/angular-challenges
@@ -27,8 +27,8 @@ import { Card, CardGrid } from '@astrojs/starlight/components';
 import MyIcon from '../../components/MyIcon.astro';
 
 <CardGrid>
-<Card title="39 Challenges">
+<Card title="40 Challenges">
-    This repository gathers 39 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>. 
+    This repository gathers 40 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>. 
     These challenges resolve around real-life issues or specific features to elevate your skills.
 </Card>