feat(refactor-frontend-advanced): refactor 01_nodejs.md and 02_linter.md

content/en/docs/web/ide_advanced/01_nodejs.md

@@ -10,16 +10,16 @@ description: >
 ## Node.js
 
 Traditionell wurde JavaScript hauptsächlich im Browser verwendet, um interaktive Webseiten zu erstellen.
-Node.js ermöglicht es jedoch, JavaScript-Code ausserhalb des Browsers (z.B. direkt via Kommandozeile) auszuführen und bietet auch die Möglichkeiten, um serverseitige Anwendungen (Backends) mittles JavaScript zu entwickeln.
+Node.js ermöglicht es jedoch, JavaScript-Code ausserhalb des Browsers (z.B. direkt via Kommandozeile) auszuführen und bietet auch die Möglichkeiten, serverseitige Anwendungen (Backends) mittels JavaScript zu entwickeln.
 Mit Node können wir später diverse Packages installieren und in unserer Webapplikation einsetzen.
 
-NodeJS ermöglicht es also, JavaScript als Programmiersprache im Backend zu verwenden. Zusätzlich verwenden viele Frontends wie Angular und React NodeJS als Grundgerüst für das Projekt.
+NodeJS ermöglicht es also, JavaScript als Programmiersprache im Backend zu verwenden. Zusätzlich verwenden viele Frontends wie Angular oder React NodeJS als Grundgerüst für das Projekt.
 
 ## Installation von Node.js
 
-In diesem Kapitel wir nun Node.js installiert, falls Node.js noch nicht installiert ist.
+In diesem Kapitel werden wir nun Node.js installieren, falls das bei dir noch nicht der Fall ist.
 
-Zuerst prüfen, ob Node.js bereits auf dem System installiert ist:
+Zuerst prüfen wir, ob Node.js bereits auf dem System installiert ist:
 
 ```shell
 node --version
@@ -89,30 +89,30 @@ um eine mit Angular kompatible Version \<version\> (Beispiele `system`, `12.22.7
 
 ### npm
 
-Node.js enthält einem integrierten Package-Manager namens "_npm_" (Node Package Manager). _npm_ ermöglicht es, Libraries und Module von anderen Entwicklern herunterzuladen, zu installieren und in ihren eigenen Projekten zu verwenden. Er bietet Zugriff auf eine riesige Sammlung von Open-Source-Packages.
+Node.js enthält einem integrierten Package-Manager namens "_npm_" (Node Package Manager). _npm_ ermöglicht es, Libraries und Module von anderen Entwicklern herunterzuladen, zu installieren und in eigenen Projekten zu verwenden. _npm_ bietet Zugriff auf eine riesige Sammlung von Open-Source-Packages.
 
-npm ermöglicht es auch eigene Packages zu erstellen und veröffentlichen, sodass andere Entwickler sie verwenden können. Durch das Veröffentlichen der Packages auf npm kann man es für die gesamte Community zugänglich machen und Updates und Verbesserungen bereitstellen.
+_npm_ ermöglicht es auch, eigene Packages zu erstellen und zu veröffentlichen, sodass andere Entwickler sie verwenden können. Durch das Veröffentlichen der Packages auf _npm_ kann man dieses für die gesamte Community zugänglich machen und Updates und Verbesserungen bereitstellen.
 
 ### npm Commands
 
-Hier sind einige wichtige npm-Befehle, die beim Arbeiten mit Node.js Projekten und dem Node Package Manager (npm) hilfreich sind:
+Hier sind einige wichtige npm-Befehle, die beim Arbeiten mit Node.js-Projekten und dem Node Package Manager (npm) hilfreich sind:
 
 - `npm init`: Erstellt eine neue package.json-Datei, um ein neues Projekt zu initialisieren.
-- `npm install`: Installiert alle Dependencies, die in der package.json-Datei aufgeführt sind. Der einfachheit halber kann man auch einfach `npm i` schreiben.
+- `npm install`: Installiert alle Dependencies, die in der package.json-Datei aufgeführt sind. Der Einfachheit halber kann man auch einfach `npm i` schreiben.
 - `npm install <packagename>`: Installiert ein bestimmtes Package und fügt es zur package.json-Datei hinzu.
 - `npm uninstall <packagename>`: Deinstalliert ein Package und entfernt es aus der package.json-Datei.
-- `npm update`: Aktualisiert alle Dependencies auf die neuesten Versionen, gemäss den in der package.json-Datei angegebenen Versionsbeschränkungen.
+- `npm update`: Aktualisiert alle Dependencies auf die neuste Version, gemäss den in der package.json-Datei angegebenen Versionsbeschränkungen.
 - `npm run <scriptname>`: Führt ein in der scripts-Sektion der package.json-Datei definiertes Skript aus. Zum Beispiel: `npm run build` oder `npm run start`.
 
-### packages.json
+### package.json
 
-npm verwendet eine Datei namens `package.json`, um Informationen über das Projekt und seine Dependencies zu speichern. Diese Datei enthält Metadaten wie den Namen des Projekts, die Version, die Autorinformationen und die Liste der Dependencies. Man kann das `package.json` manuell erstellen oder den Befehl `npm init` verwenden, um einen interaktiven Assistenten zu starten, der hilft, die Informationen einzugeben.
+_npm_ verwendet eine Datei namens `package.json`, um Informationen über das Projekt und seine Dependencies zu speichern. Diese Datei enthält Metadaten wie den Namen des Projekts, die Version, die Autorinformationen und die Liste der Dependencies. Man kann das `package.json` manuell erstellen oder den Befehl `npm init` verwenden, um einen interaktiven Assistenten zu starten, der hilft, die Informationen einzugeben.
 
-In der `package.json` Datei werden die Dependencies des Projekts aufgelistet. Es gibt zwei Arten von Dependencies: "dependencies" und "devDependencies". "dependencies" sind Packages, die für die Ausführung der Anwendung erforderlich sind, während "devDependencies" Packages sind, die nur für die Entwicklung, Tests und den Build-Prozess verwendet werden. Wenn man ein Packages mit `npm install` installieren, wird es automatisch zur richtigen Kategorie hinzugefügt.
+In der `package.json` Datei werden die Dependencies des Projekts aufgelistet. Es gibt zwei Arten von Dependencies: "dependencies" und "devDependencies". "dependencies" sind Packages, die für die Ausführung der Anwendung erforderlich sind, während "devDependencies" Packages sind, die nur für die Entwicklung, Tests und den Build-Prozess verwendet werden. Wenn man ein Package mit `npm install` installiert, wird es automatisch zur richtigen Kategorie hinzugefügt.
 
 Zudem kann man auch benutzerdefinierte Skripte definieren, die bestimmte Aufgaben ausführen. Diese Skripte können verwendet werden, um Tests durchzuführen, den Code zu kompilieren, den Server zu starten und andere Entwicklungs- oder Build-Aufgaben zu automatisieren. Man kann die Skripte mit dem Befehl `npm run <scriptname>` ausführen.
 
-### packages-lock.json
+### package-lock.json
 
 Die `package-lock.json`-Datei ist eine Datei, die von npm automatisch generiert wird, sobald man das erste Mal `npm install` im Projektverzeichnis ausgeführt hat. Sie dient dazu, die genauen Versionen der heruntergeladenen Pakete und deren Dependencies festzuhalten.
 Das `package-lock.json` ermöglicht eine deterministische Wiederholbarkeit von Paketinstallationen in einem Projekt, was bedeutet, dass jeder Entwickler oder jede Build-Umgebung die gleichen Versionen der Pakete erhält.
@@ -123,13 +123,13 @@ Es ist wichtig, die `package-lock.json`-Datei nicht manuell zu bearbeiten, da di
 
 Die Befehle `npm i` und `npm ci` werden beide verwendet, um die Dependencies eines Node.js-Projekts zu installieren. Es gibt jedoch einen wichtigen Unterschied zwischen den beiden Befehlen.
 
-`npm i` installiert die neuste Version der Dependencies, auch wenn im `packages.json` eine ältere Version angegeben ist. Jedoch ist dies aber nur bei denjenigen die mit `^` beginnen der Fall, also z.B. `^12.2.12` und sich nur die hinterste Zahl ändert. Denn die hinterste Zahl bei einer Version bedeutet das nur fixes gemacht wurden. Wenn man nun so neue Versionen holt, wird die neue Version automatisch ins `packages-lock.json` geschrieben.
+`npm i` installiert die neuste Version der Dependencies, auch wenn im `package.json` eine ältere Version angegeben ist. Jedoch ist dies aber nur bei denjenigen, die mit `^` beginnen, der Fall, also z.B. `^12.2.12`, wobei sich nur die hinterste Zahl ändert. Denn die hinterste Zahl bei einer Version bedeutet, dass nur Fixes gemacht wurden. Wenn man nun so neue Versionen holt, wird die neue Version automatisch ins `package-lock.json` geschrieben.
 
-`npm ci` holt die Dependencies dann vom `packages-lock.json` bedeutet es holt die Dependencies direkt vom «resolved» und nicht wie `npm i`, welches beim lokalen Register holt. Zudem holt es mit der Version, welche je nachdem vom `npm i` erneuert wurde.
+`npm ci` holt die Dependencies aus `package-lock.json`, heisst, es holt die Dependencies direkt von «resolved» und nicht wie `npm i`, welches beim lokalen Register ansetzt. Zudem holt es die Version, welche je nachdem vom `npm i` erneuert wurde.
 
 ### node_modules
 
-Um ein Package zu installieren, kann man den Befehl `npm install <packagename>` verwenden. npm lädt das Package und alle seine Dependencies (Dependency) herunter und installiert sie in einem Verzeichnis namens `node_modules` im Projektordner. Wenn man dann den Code schreibt, kann man das installierte Package in den JavaScript-Dateien verwenden.
+Um ein Package zu installieren, kann man den Befehl `npm install <packagename>` verwenden. _npm_ lädt das Package und alle seine Dependencies (Dependency) herunter und installiert sie in einem Verzeichnis namens `node_modules` im Projektordner. Wenn man dann den Code schreibt, kann man das installierte Package in den JavaScript-Dateien verwenden.
 
 ![task3](/images/task.png) 5' - Einzelarbeit
 

content/en/docs/web/ide_advanced/02_linter.md

@@ -7,9 +7,14 @@ description: >
   Hier wird erklärt was Linter sind und wie man diese benutzt.
 ---
 
+#### Ziele
+- Du weisst, was ein Linter ist und was dieser macht. 
+- Du weisst, was Prettier ist, wozu es verwendet wird und wie man es konfiguriert.
+- Du weisst, was ESLint ist, wozu es verwendet wird und wie man es konfiguriert. 
+
 ## Linter
 
-Ein Linter analysiert den Quellcode auf der Grundlage vordefinierter Regeln, Konventionen und Best Practices. Er prüft den Code auf häufige Fehler wie fehlende Semikolons, undefinierte Variablen, nicht verwendete Importe, ungültige Syntax und andere potenzielle Probleme. Darüber hinaus kann ein Linter auch den Code-Stil überprüfen, um sicherzustellen, dass er den vereinbarten Standards im Projekt entspricht.
+Ein Linter analysiert den Quellcode auf der Grundlage vordefinierter Regeln, Konventionen und Best Practices. Er prüft den Code auf häufige Fehler wie fehlende Semikolons, undefinierte Variablen, nicht verwendete Imports, ungültige Syntax und andere potenzielle Probleme. Darüber hinaus kann ein Linter auch den Code-Stil überprüfen, um sicherzustellen, dass er den vereinbarten Standards im Projekt entspricht.
 Der Hauptzweck eines Linters besteht darin, Entwicklern dabei zu helfen, qualitativ hochwertigen Code zu schreiben, der gut strukturiert und leicht wartbar ist.
 
 ### Prettier
@@ -24,16 +29,16 @@ Prettier kann den gesamten Code automatisch formatieren, einschliesslich Einrüc
 
 Prettier benötigt normalerweise keine umfangreiche Konfiguration, da es über standardmässige Formatierungsregeln verfügt. Man kann jedoch bestimmte Einstellungen in einer .`prettierrc`-Datei festlegen, um das Verhalten anzupassen.
 
-Hier ist ein Beispiel wie man dies tun kann:
+Hier ist ein Beispiel wie man das machen kann:
 
-Wenn man z.B.
+Wenn man beispielsweise.
 
 - die Anzahl der Leerzeichen (2) festlegen will, die für einen Tab verwendet werden sollen,
 - doppelte Anführungszeichen `"` mit einfachen `'` ersetzen will,
 - Tabs durch Leerzeichen ersetzen will,
 - fehlende Semikolons (im JavaScript) automatisch hinzufügen will,
-- automatisch Space bei Klammern hinzufügen will,
-  dann kann dies wie folgt getan werden.
+- automatisch Spaces bei Klammern hinzufügen will,
+  dann kann das wie folgt getan werden.
 
 ```json
 {
@@ -46,11 +51,11 @@ Wenn man z.B.
 }
 ```
 
-Weitere Informationen zu den verfügbaren Optionen und deren Werten finden man in der Prettier-Dokumentation unter https://prettier.io/docs/en/configuration.html.
+Weitere Informationen zu den verfügbaren Optionen und deren Werten findet man in der Prettier-Dokumentation unter https://prettier.io/docs/en/configuration.html.
 
 #### Prettier ausführen
 
-Das Prettier Plugin kann man wie folgt ausführe.
+Das Prettier Plugin kann man wie folgt ausführen:
 
 - **IntelliJ**: Alt-Shift-Ctrl-P auf Windows und Linux oder Alt-Shift-Cmd-P auf macOS.
 
@@ -60,10 +65,10 @@ Das Prettier Plugin kann man wie folgt ausführe.
 
 ESLint ist ein äusserst beliebtes und leistungsstarkes statisches Code-Analysetool für JavaScript- und TypeScript-Projekte.
 
-### ESLinkt installieren
+### ESLint installieren
 
-Bevor ESLint verwendet werden kann, muss es installiert werden (und bei Windows am besten noch den PC neustarten).
-Mit den folgenden drei Befehlen kann man es installere:
+Bevor ESLint verwendet werden kann, muss es installiert werden (und bei Windows am besten noch der PC neu gestartet werden).
+Mit den folgenden drei Befehlen kann man es installeren:
 
 ```shell
 npm install eslint --save-dev
@@ -92,7 +97,7 @@ In der `.eslintrc`-Datei kann man die Einstellungen für eine spezifische Regel
 
 **Hinzufügen neuer Regel**:
 
-Man kann Regeln hinzufügen oder entfernen, indem man die `rules`-Eigenschaft anpassen. Angenommen, man möchten die Regel "no-console" aktivieren, um den Einsatz von console.log zu verhindern.
+Man kann Regeln hinzufügen oder entfernen, indem man die `rules`-Eigenschaft anpasst. Angenommen, man möchte die Regel "no-console" aktivieren, um den Einsatz von console.log zu verhindern:
 
 ```json
 {
@@ -106,10 +111,10 @@ Weitere Informationen findest du in der ESLint-Dokumentation unter https://eslin
 
 #### ESLint ausführen
 
-ESLint kann man über die Konsole ausführen dazu sind folgende Schritte erforderlich:
+ESLint kann man über die Konsole ausführen, dazu sind folgende Schritte erforderlich:
 
 1. In der Konsole zum Wurzelverzeichnis des Projekts navigieren.
-2. Den Befehl `eslint` gefolgt von den Datei- oder Verzeichnisnamen ausführen, die man überprüfen möchten.
+2. Den Befehl `eslint` gefolgt von den Datei- oder Verzeichnisnamen ausführen, die man überprüfen möchte.
 
 ```shell
 eslint src/index.js
@@ -123,7 +128,7 @@ ESLint kann man mit zusätzlichen Optionen und Flags verwenden, die wichtigste F
 eslint --fix src/index.js
 ```
 
-Vielfach ist ESLint bereits als Script im `packages.json` hinterlegt und kann dann so mit dem Befehl `npm run <scriptname>` (beispielsweise `npm run lint`) aufgerufen werden.
+Vielfach ist ESLint bereits als Script im `package.json` hinterlegt und kann dann so mit dem Befehl `npm run <scriptname>` (beispielsweise `npm run lint`) aufgerufen werden.
 
 #### ESLint automatisch beim Speichern
 
@@ -159,7 +164,7 @@ Man navigiert zu `Languages & Frameworks` -> `[Code-Language z.B. JavaScript]` -
 
 ## Überprüfen
 
-Nun hoffen wir, dass alle nötigen Installationen erfolgreich ausgeführt wurden.
+Nun gehen wir davon aus, dass alle nötigen Installationen erfolgreich ausgeführt wurden.
 
 ![task5](/images/task.png) 5' - Einzelarbeit