Review German translation (Tutorial only)

langs/de/tutorials/async_lazy/lesson.md

@@ -1,15 +1,15 @@
-Die meisten Bundler (wie Webpack, Rollup, Parcel, Vite) splitten den Code automatisch, wenn ein dynamischer Import verwendet wird. Solids `lazy`-Methode erlaubt es uns, den Komponenten-Import für verzögert nachzuladene Komponenten zu kapseln. Die Ausgabe ist eine Komponente, die ganz normal im JSX verwendet werden kann, außer dass sie intern den unterliegenden Code lädt, wenn sie zum ersten Mal gerendert wird und den Render-Zweig unterbricht, bis der Code verfügbar ist.
+Die meisten Bundler (wie Webpack, Rollup, Parcel, Vite) splitten den Code automatisch, wenn ein dynamischer Import verwendet wird. Solids `lazy`-Methode erlaubt es uns, den dynamischen Import einer Komponente als verzögert nachladend zu kennzeichnen. Eine solche Komponente kann ganz normal im JSX verwendet werden, außer dass sie intern den unterliegenden Code erst lädt, wenn er zum ersten Mal gerendert wird. Das Rendern wird unterbrochen, bis der Code verfügbar ist.
 
-Um `lazy` zu nutzen, ersetze man die import-Anweisung:
+Um `lazy` zu nutzen, ersetze man die Import-Anweisung:
 ```js
 import Greeting from "./greeting";
 ```
-with:
+mit:
 ```js
 const Greeting = lazy(() => import("./greeting"));
 ```
 
-Das wird vermutlich immer noch zu schnell laden, um es zu sehen. Aber man kann eine künstliche Verzögerung einbauen, um das Laden sichtbarer zu machen.
+Das wird vermutlich immer noch zu schnell laden, um den Effekt zu sehen. Aber man kann eine künstliche Verzögerung einbauen, um das Laden sichtbarer zu machen.
 
 ```js
 const Greeting = lazy(async () => {

langs/de/tutorials/async_resources/lesson.md

@@ -1,6 +1,6 @@
 Ressourcen sind spezielle Signale, die speziell für asynchrones Laden gedacht sind. Ihr Sinn besteht darin, asynchrone Werte so zu kapseln, dass man innerhalb von Solids verteiltem Ausführungsmodell einfach damit arbeiten kann. Das ist das Gegenteil zu `async`/`await` oder Generatoren, die sequentielle Ausführungsmodelle bieten. Das Ziel ist, dass Asynchronität nicht die Ausführung blockiert und nicht auf den Code abfärbt.
 
-Ressourcen können durch ein source-Signal getrieben werden, das die Anfrage für eine asynchrone Datenabfrage-Funktion beinhaltet, welche ein Promise zurückgibt. Der Inhalt der Abfrage-Funktion kann alles Mögliche sein. Man kann typische REST-Endpunkte abfragen oder GraphQL oder irgendwas, das ein Promise zurückgibt. Ressourcen sind nicht auf bestimmte Wege festgelegt, Daten zu holen, nur darauf, sie in Promises zu bekommen.
+Ressourcen können in ein spezielles Signal gekapselt werden, das eine asynchrone Datenabfrage-Funktion entgegennimmt, welche ein [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) zurückgibt. Der Inhalt der Abfrage-Funktion kann alles Mögliche sein. Man kann typische REST-Endpunkte abfragen oder GraphQL oder irgendwas, das ein Promise zurückgibt. Ressourcen sind nicht auf bestimmte Wege festgelegt, Daten zu holen, nur darauf, sie in Promises zu bekommen.
 
 Das resultierende Ressourcen-Signal enthält außerdem die reaktiven Eigenschaften `loading` und `error`, die es einfach machen, unseren View je nach Status zu kontrollieren.
 
@@ -10,7 +10,7 @@ const [user] = createResource(userId, fetchUser);
 ```
 Sie wird vom `userId` Signal angetrieben und ruft unsere fetch-Methode bei Änderung auf. Ganz unkompliziert.
 
-Der zweite Wert, der von `createResource` zurückgegeben wird, enthält die Methode `mutate`, um das interne Signal direkt zu aktualisieren und `refetch`, um die Ressource neu zu laden, auch wenn sich die source nicht gendert hat.
+Der zweite Wert, der von `createResource` zurückgegeben wird, enthält die Methode `mutate`, um das interne Signal direkt zu aktualisieren und `refetch`, um die Ressource neu zu laden, auch wenn sich die Quelle nicht geändert hat.
 
 ```js
 const [user, { mutate, refetch }] = createResource(userId, fetchUser);

langs/de/tutorials/async_suspense/lesson.md

@@ -1,6 +1,6 @@
-Während `lazy` und `createResource` auch allein benutzt werden können, bringt Solid einen Mechanismus mit, um koordiniert unterschiedliche asynchrone Events anzuzeigen. `Suspense` dient als Begrenzung, die ein Fallback anstelle eines teilweise geladenen Inhalts anzeigt, bis alle asynchronen Anfragen darin beantwortet sind.
+Während `lazy` und `createResource` auch allein genutzt werden können, bringt Solid einen Mechanismus mit, um die Anzeige von mehreren asynchronen Ereignissen zu koordinieren. `Suspense` dient als Begrenzung, die ein Fallback anstelle eines teilweise geladenen Inhalts anzeigt, bis alle asynchronen Anfragen darin aufgelöst sind.
 
-Das kann die Nutzererfahrung verbessern, indem visuelles Stottern, das durch zu viele partielle Ladezustände ausgelöst wird, entfernt wird. `Suspense` erkennt automatisch alle Nachkommen, die asynchron sind und handelt entsprechend. Man kann so viele `Suspense`-Komponenten schachteln, wie man möchte und nur der nächste Vorfahr wird zum Fallback transformiert, wenn der Ladezustand erkannt wurde.
+Das kann die Nutzererfahrung verbessern, indem visuelles Stottern, das durch zu viele partielle Ladezustände ausgelöst wird, entfernt wird. `Suspense` erkennt automatisch alle inneren asynchronen Lesevorgänge und handelt entsprechend. Man kann so viele `Suspense`-Komponenten schachteln, wie man möchte und nur der nächste Vorfahre wird zu `fallback` transformiert, wenn der `loading`-Zustand besteht.
 
 Fügen wir eine `Suspense`-Komponente zu unserem Nachlade-Beispiel hinzu:
 
@@ -15,9 +15,9 @@ Fügen wir eine `Suspense`-Komponente zu unserem Nachlade-Beispiel hinzu:
 
 Schon haben wir einen Lade-Platzhalter.
 
-Es ist wichtig, sich zu merken, dass es das Lesen einer von einem asynchronen Wert abgeleiteten reaktiven Funktion ist, die `Suspense` auslöst und nicht die asynchrone Abfrage selbst. Wenn ein Ressourcen-Signal (einschließlich `lazy`-Komponenten) nicht innerhalb der `Suspense`-Grenzen gelesen wird, wird es nicht von dessem Effekt betroffen sein.
+Es ist wichtig, sich zu merken, dass es das Lesen des asynchron abgeleiteten Wertes ist, das die `Suspense` auslöst und nicht die asynchrone Abfrage selbst. Wenn ein Ressourcen-Signal (einschließlich `lazy`-Komponenten) nicht innerhalb der `Suspense`-Grenzen gelesen wird, wird es nicht von dessen Effekt betroffen sein.
 
-`Suspense` ist in vielerlei Hinsicht nur wie eine `Show`-Komponente, die beide Zweige rendert. Während `Suspense` wichtig für asynchrones Server-Rendering ist, sollte man sich nicht verpflichtet fühlen, es zu nutzen, wenn alles im Client gerendert wird. Solids feingranulares Rendering hat keine zusätzlichen Kosten für das manuelle Aufspalten von Dingen.
+`Suspense` ist in vielerlei Hinsicht nur eine `Show`-Komponente, die beide Zweige rendert. Während `Suspense` wichtig für asynchrones Server-Rendering ist, sollte man sich nicht verpflichtet fühlen, es zu nutzen, wenn alles im Client gerendert wird. Solids feingranulares Rendering hat keine zusätzlichen Kosten für das manuelle Aufspalten von Dingen.
 
 ```jsx
 function Deferred(props) {

langs/de/tutorials/async_suspense_list/lesson.md

@@ -1,4 +1,4 @@
-Manchmal hat man mehrere `Suspense`-Komponenten, die man koordinieren möchte. Ein möglicher Ansatz ist, alles unter ein einzelnes `Suspense` zu packen, aber das limitiert uns zu einem einzigen Ladeschritt. Ein einzelner Fallback-Zustand bedeutet, dass alles immer warten muss, bis der letzte Teil geladen ist. Stattdessen bietet Solid die `SuspenseList`-Komponente, um das Laden zu koordinieren.
+Manchmal hat man mehrere `Suspense`-Komponenten, die man koordinieren möchte. Ein möglicher Ansatz ist, alles unter ein einzelnes `Suspense` zu packen, aber das limitiert uns zu einem einzigen Ladeverhalten. Ein einzelner Fallback-Zustand bedeutet, dass alles immer warten muss, bis der letzte Teil geladen ist. Stattdessen bietet Solid die `SuspenseList`-Komponente, um das Laden zu koordinieren.
 
 Man stelle sich vor, es gibt mehrere `Suspense`-Komponenten wie in unserem Beispiel. Wenn wir sie in eine `SuspenseList` kapseln, die mit der `revealOrder` auf `forwards` eingestellt ist, werden sie in der Reihenfolge, in der sie in der Komponentenstruktur stehen, dargestellt, unabhängig davon, in welcher Reihenfolge sie geladen werden. Das reduziert das Herumspringen der Seite. Man kann `revealOrder` auf `backwards` oder `together` setzen, was die Reihenfolge umkehrt oder wartet, bis alle `Suspense`-Komponenten geladen sind. Zusätzlich gibt es eine `tail`-Option, die man auf `hidden` oder `collapsed` setzen kann. Das überschreibt das normale Verhalten, alle Fallbacks anzuzeigen, damit, kein oder nur das nächste Fallback anzuzeigen, in der Reihenfolge, die `revealOrder` vorgibt.
 

langs/de/tutorials/async_transitions/lesson.md

@@ -1,10 +1,10 @@
-`Suspense` erlaubt es uns, einen Platzhalter anzuzeigen, während Daten geladen werden. Das ist toll für das initiale Laden, aber bei folgenden Navigationen ist es meist schlechtere UX, auf einen Platzhalter-Zustand zurückzufallen.
+`Suspense` erlaubt es uns, einen Platzhalter anzuzeigen, während Daten geladen werden. Das ist toll für das anfängliche Laden, aber bei folgenden Navigationen ist es meist ein schlechtes Nutzererlebnis, auf einen Platzhalter-Zustand zurückzufallen.
 
-Wir können es vermeiden, in diesen Platzhalter-Zustand zurückzufallen, indem wir `useTransition` verwenden. Es bietet einen Wrapper und einen Lade-Indikator. Der Wrapper steckt alle darunterliegenden Aktualisierungen in eine Transaktion, die nicht ausgeführt wird, bis alle asynchronen Events vollständig sind.
+Wir können es vermeiden, in diesen Platzhalter-Zustand zurückzufallen, indem wir `useTransition` verwenden. Es bietet einen Wrapper und einen Lade-Indikator. Der Wrapper steckt alle darunterliegenden Aktualisierungen in eine Transaktion, die nicht ausgeführt wird, bis alle asynchronen Events vollständig geladen sind.
 
-Das heisst, wenn der Kontrollfluss unterbrochen ist, zeigt es weiterhin den gegenwärtigen Zweig, während der nächste außerhalb des Dokuments gerendert wird. Ressourcenzugriffe unter existierenden Boundaries werden zu der Transition hinzugefügt. Allerdings werden alle verschachtelten `Suspense`-Komponenten ihren Platzhalter anzeigen, wenn sie nicht fertig geladen waren, bevor sie gerendert wurden.
+Das heißt, wenn der Kontrollfluss unterbrochen ist, zeigt es weiterhin den gegenwärtigen Zweig, während der nächste versteckt gerendert wird. Ressourcenzugriffe innerhalb der Grenzen werden zu der Transition hinzugefügt. Allerdings werden alle neuen verschachtelten `Suspense`-Komponenten ihren Platzhalter anzeigen, wenn sie nicht fertig geladen waren, bevor sie gerendert wurden.
 
-Man achte darauf, dass beim Navigieren innerhalb des Beispiels der Inhalt mit einem Lade-Platzhalter wechselt. Fügen wir eine transition zu unserer `App`-Komponente hinzu. Zuerst ersetzen wir die `updateTab`-Funktion:
+Man achte darauf, dass beim Navigieren innerhalb des Beispiels der Inhalt mit einem Lade-Platzhalter wechselt. Fügen wir eine Transition zu unserer `App`-Komponente hinzu. Zuerst ersetzen wir die `updateTab`-Funktion:
 
 ```js
 const [pending, start] = useTransition();

langs/de/tutorials/bindings_classlist/lesson.md

@@ -1,6 +1,6 @@
-Solid unterstützt sowohl `class` als auch `className`, um die `className`-Eigenschaft eines Elements zu setzen. Allerdings ist es häufig bequemer, bestimmte Klassen fallweise zu setzen. Aus diesem Grund hat Solid ein eingebautes `classList`-JSX-Attribut, das ein Objekt entgegen nimmt, in dem unter den Klassennamen ein Boolean gespeichert ist. Wenn der Boolean wahr ist, wird die Klasse gesetzt, ansonsten entfernt.
+Solid verwendet `class`, um die `className`-Eigenschaft eines Elements zu setzen. Allerdings ist es häufig bequem, CSS-Klassen abhängig von Bedingungen zu setzen. Aus diesem Grund hat Solid ein eingebautes `classList`-JSX-Attribut, das ein Objekt entgegennimmt, bei dem die Schlüssel die Klassennamen und die Werte Boolesche Ausdrücke sind. Wenn ein Wert nach wahr auswertet, wird die Klasse gesetzt, ansonsten entfernt.
 
-In diesem Beispiel können wir folgendes ersetzen:
+Im Beispiel können wir folgendes:
 
 ```jsx
 <button
@@ -9,7 +9,7 @@ In diesem Beispiel können wir folgendes ersetzen:
 >foo</button>
 ```
 
-mit:
+ersetzen mit:
 
 ```jsx
 <button
@@ -18,7 +18,7 @@ mit:
 >foo</button>
 ```
 
-Hinweis: Klassennamen kann man auch dynamisch setzen, etwa aus CSS-Modulen:
+Hinweis: Klassennamen kann man auch dynamisch setzen, etwa solche importiert aus CSS-Modulen:
 
 ```jsx
 import { active } from "./style.module.css"

langs/de/tutorials/bindings_directives/lesson.md

@@ -1,18 +1,18 @@
-Solid unterstützt benutzerdefinierte Direktiven im `use:`-namespace. Das ist nur syntaktischer Zucker über `ref`, aber durchaus nützlich insofern, dass es typischen Bindings gleicht und es mehrere solcher Bindings auf dem gleichen Element geben kann, ohne dass dies zu Konflikten führt. Das macht es zu einem besseren Werkzeug für wiederverwendbare DOM-Verhalten.
+Für benutzerdefinierte Direktiven hat Solid den `use:`-Namensraum. Das ist nur syntaktischer Zucker für `ref`, aber nützlich, da es typischen Bindungen gleicht und es mehrere solcher Bindungen auf dem gleichen Element geben kann, ohne dass dies zu Konflikten führt. Das macht es zu einem besseren Werkzeug für das Verhalten von wiederverwendbaren DOM-Elementen.
 
-Benutzerdefinierte Direktiven sind einfache Funktionen, die mit den Parametern `(element, valueAccessor)` aufgerufen werden, wobei `element` das jeweilige DOM-Element mit dem `use:`-Attribut ist und `valueAccessor` eine Getter-Funktion für den Wert, der an das `use:`-Attribut übergeben wird. So lange die Funktion importiert ist, kann man sie mit `use:` verwenden.
+Eine benutzerdefinierte Direktive ist eine Funktion, die mit den Argumenten `(element, valueAccessor)` aufgerufen wird, wobei `element` das jeweilige DOM-Element mit dem `use:`-Attribut ist und `valueAccessor` eine Getter-Funktion für den Wert, der an das Attribut übergeben wird. Solange die Funktion importiert ist, kann man sie mit `use:` verwenden.
 
-> Wichtig: `use:` wird vom Compiler als Transformations-Ziel erkannt und die Funktion muss dafür im Scope sein, also kann sie nicht Teil von spread-Props oder auf eine Komponente angewendet sein.
+> Wichtig: `use:` wird vom Compiler transformiert und die Funktion muss dafür im Geltungsbereich sein, also kann es nicht Teil von Spread-Objekten sein, oder auf eine Komponente angewendet werden.
 
-In diesem Beispiel machen wir einen einfachen Wrapper für ein Klick-außerhalb-Verhalten, um etwa einen Dialog zu schliessen. Zuerst müssen wir die `clickOutside`-Direktive zu unserem Element importieren:
+In diesem Beispiel erstellen wir einen einfachen Wrapper für ein Klick-außerhalb-Verhalten, um etwa einen Dialog zu schließen. Zuerst müssen wir die `clickOutside`-Direktive importieren und auf unserem Element anwenden:
 
 ```jsx
 <div class="modal" use:clickOutside={() => setShow(false)}>
   Some Modal
 </div>
 ```
 
-In `click-outside.tsx` definieren wir nun unsere benutzerdefinierte Direktive. Diese Direktive erzeugt einen Klick-Handler, der an den body gebunden und am Schluss wieder aufgeräumt wird:
+In `click-outside.tsx` definieren wir nun unsere benutzerdefinierte Direktive. Diese Direktive erzeugt einen Klick-Handler, der an den body-Knoten gebunden und entfernt wird, wenn die Zeit gekommen ist:
 
 ```jsx
 export default function clickOutside(el, accessor) {
@@ -23,4 +23,4 @@ export default function clickOutside(el, accessor) {
 }
 ```
 
-Jetzt sollte man in der Lage sein, zwischen Öffnen und Schliessen des Dialogs hin und her zu springen.
+Jetzt sollte man in der Lage sein, zwischen Öffnen und Schließen des Dialogs hin und her zu springen.

langs/de/tutorials/bindings_events/lesson.md

@@ -1,6 +1,6 @@
-Events sind in Solid attribute mit einem `on`-Präfix. Sie werden in ein paar Dingen besonders gehandhabt. Zunächst folgen sie nicht der normalen Heuristik für Kapselung. In vielen Fällen ist es schwierig, den Unterschied zwischen einem Signal und einem Event Handler zu erkennen. Und da Events aufgerufen werden und keine Reaktivität zum AKtualisieren bruachen, werden sie ausschließlich initial gebunden. Man kann immer noch den Handler unterschiedlichen Code je nach dem gegenwärtigen Zustand der Anwendung ausführen lassen.
+Events sind in Solid Attribute mit einem `on`-Präfix. Sie werden in ein paar Dingen besonders gehandhabt. Zunächst folgen sie nicht der normalen Heuristik für Kapselung. In vielen Fällen ist es schwierig, den Unterschied zwischen einem Signal und einem Event Handler zu erkennen. Und da Events aufgerufen werden und keine Reaktivität zum Aktualisieren brauchen, werden sie nur einmal gebunden. Man kann immer noch den Handler unterschiedlichen Code je nach dem gegenwärtigen Zustand der Anwendung ausführen lassen.
 
-Normale UI Events (die bubbeln und zusammengestellt sind) werden automatisch zum document delegiert. Um die Performanz des Delegierens zu verbessern, unterstützt Solid einen Array-Syntax, der den Handler mit Daten als erstes Argument aufruft, ohne zusätzliche Closures zu generieren:
+Normale UI Events (die bubbeln und zusammengestellt sind) werden automatisch zum document delegiert. Um die Performanz des Delegierens zu verbessern, unterstützt Solid eine Array-Syntax, die den Handler mit Daten als erstes Argument aufruft, ohne zusätzliche Closures zu generieren:
 
 ```jsx
 const handler = (data, event) => /*...*/
@@ -15,7 +15,7 @@ In unserem Beispiel fügen wir einen Handler für das `mousemove` Event hinzu:
 </div>
 ```
 
-Alle `on`-Bindungen sind unabhängig von Groß-/Kleinschreibung, so dass die Namen der tatsächlichen Events immer klein geschrieben werden. Beispielsweise überwacht `onMouseMove` das `mousemove`-Event. Falls etwa für ein benutzerdefiniertes Event Groß-Kleinschreibung benötigt wird oder die Event-Delegation umgangen werden soll, kann der `on:`-Namespace dazu verwendet werden um Event-Handler zu übergeben, deren Name dann nach dem Doppelpunkt kommt:
+Alle `on`-Bindungen sind unabhängig von Groß-/Kleinschreibung, sie beziehen sich also auf Events, die kleingeschrieben werden. Beispielsweise überwacht `onMouseMove` das `mousemove`-Event. Falls etwa für ein benutzerdefiniertes Event Groß-Kleinschreibung benötigt wird oder die Event-Delegation umgangen werden soll, kann der `on:`-Namensraum dazu verwendet werden, um Event-Handler zu übergeben, deren Name dann nach dem Doppelpunkt kommt:
 
 ```jsx
 <button on:DOMContentLoaded={() => /* Mache etwas */} >Click Me</button>

langs/de/tutorials/bindings_forward_refs/lesson.md

@@ -1,8 +1,8 @@
-Oftmals möchte man eine Referenz von innerhalb einer Komponente deren Eltern-Komponente verfügbar machen. Der Weg, dies zu tun, ist immer noch das `ref`-Attribut. Von außerhalb `ref` einer Komponente zu nutzen funktioniert sehr ähnlich wie `ref` auf einem nativen Element zu verwenden. Man kann entweder eine Variable zur Zuweisung oder eine Setter-Funktion übergeben.
+Oftmals möchte man eine Referenz von innerhalb einer Komponente einer Eltern-Komponente verfügbar machen. Der Weg, das zu tun, ist immer noch das `ref`-Attribut. Von außerhalb funktioniert `ref` auf einer Komponente so wie wie `ref` auf einem nativen Element. Man kann entweder eine Variable zur Zuweisung oder eine Setter-Funktion übergeben.
 
-Allerdings ist es die Verantwortung des Authors, diese `ref` zu einem internen Element zu verbinden, um diese aufwärts weiterzuleiten. Um dies zu tun, verwenden wir `props.ref`. Dies ist eine callback-Form von `ref`, unabhängig davon, welcher Typ von `ref` übergeben wird, obwohl dieses Detail weitgehend versteckt bleiben wird, da es vermutlich ohnehin an das `ref`-Attribut eines der internen Elemente oder Komponenten innerhalb des JSX übergeben wird.
+Allerdings ist es die Verantwortung des Autors, diese `ref` an ein inneres Element zu binden, damit es nach außen zurückgegeben werden kann. Um das zu tun, verwenden wir `props.ref`. Dies ist immer die Callback-Variante von `ref`, unabhängig davon, welcher Typ von `ref` von außen übergeben wurde. Jedoch bleibt dieses Detail in der Regel versteckt, da die `ref` sowieso nur an das `ref`-Attribut eines der inneren Elemente oder Komponenten im JSX dieser Komponente übergeben wird.
 
-Um das Logo wieder animieren zu können, müssen wir die die ref von `canvas.tsx` weiterleiten:
+Um das Logo wieder animieren zu können, müssen wir die ref von `canvas.tsx` weiterleiten:
 
 ```jsx
 <canvas ref={props.ref} width="256" height="256" />