mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-10 04:00:52 -04:00
chore(i18n,docs): processed translations (#48826)
This commit is contained in:
camperbot
@@ -1,5 +1,25 @@
|
||||
# Codebase Best Practices
|
||||
|
||||
## Styling a component
|
||||
|
||||
We recommend styling components using our [design style guide](https://design-style-guide.freecodecamp.org/).
|
||||
|
||||
The colors are defined in [`variable.css`](/client/src/components/layouts/variables.css), and the fonts are in [`fonts.css`](/client/src/components/layouts/fonts.css).
|
||||
|
||||
We are strongly opinionated about adding new variables/tokens to the colors. After careful research, the colors have been chosen to respect the freeCodeCamp brand identity, developer experience, and accessibility.
|
||||
|
||||
The `!important` keyword may be used to override values in some cases (for ex.: accessibility concerns). You should add a comment describing the issue, so it doesn't get removed in future refactoring.
|
||||
|
||||
### RTL support
|
||||
|
||||
We are striving to support right-to-left (RTL) layout in the codebase for languages that are read in this direction. For this you need be mindful of how to style components. Here are a quick role of thumbs to follow:
|
||||
|
||||
- Don't use `float` properties: Although it may seem best to have the component in the "perfect position", you will be climbing mountains to reach that perfect positioning in responsive layout, and you will need to reach higher heights to have it supported in RTL.
|
||||
- - Use Flexbox and Grid layouts instead, as they have RTL support already built-in, and those will be easier to maintain and review.
|
||||
- Don't define the direction while using `margin` and `padding`: it may seem harmless to use `padding-right` and `margin-left`, but these directions aren't mirrored when the layout changes to RTL, and adding counter values for them in the RTL file makes maintaining the codebase harder.
|
||||
- - Use logical properties for them: You can add the same spacing by using `padding-inline-end` and `margin-inline-start`, and you won't need to worry about RTL layout, as they follow where the line start and ends, and you won't need to add any extra values in the RTL files, so people won't need to remember to change the same values in two files.
|
||||
- Don't use `!important` in `font-family`: RTL layout is using different font from the LTR layout, when you add `!important` in the `font-family` property it affects the RTL layout too, which causes a UI bug.
|
||||
|
||||
## General JavaScript
|
||||
|
||||
In most cases, our [linter](how-to-setup-freecodecamp-locally.md#follow-these-steps-to-get-your-development-environment-ready) will warn of any formatting which goes against this codebase's preferred practice.
|
||||
|
||||
@@ -1,5 +1,25 @@
|
||||
# Codebase Best Practices
|
||||
|
||||
## Styling a component
|
||||
|
||||
We recommend styling components using our [design style guide](https://design-style-guide.freecodecamp.org/).
|
||||
|
||||
The colors are defined in [`variable.css`](/client/src/components/layouts/variables.css), and the fonts are in [`fonts.css`](/client/src/components/layouts/fonts.css).
|
||||
|
||||
We are strongly opinionated about adding new variables/tokens to the colors. After careful research, the colors have been chosen to respect the freeCodeCamp brand identity, developer experience, and accessibility.
|
||||
|
||||
The `!important` keyword may be used to override values in some cases (for ex.: accessibility concerns). You should add a comment describing the issue, so it doesn't get removed in future refactoring.
|
||||
|
||||
### RTL support
|
||||
|
||||
We are striving to support right-to-left (RTL) layout in the codebase for languages that are read in this direction. For this you need be mindful of how to style components. Here are a quick role of thumbs to follow:
|
||||
|
||||
- Don't use `float` properties: Although it may seem best to have the component in the "perfect position", you will be climbing mountains to reach that perfect positioning in responsive layout, and you will need to reach higher heights to have it supported in RTL.
|
||||
- - Use Flexbox and Grid layouts instead, as they have RTL support already built-in, and those will be easier to maintain and review.
|
||||
- Don't define the direction while using `margin` and `padding`: it may seem harmless to use `padding-right` and `margin-left`, but these directions aren't mirrored when the layout changes to RTL, and adding counter values for them in the RTL file makes maintaining the codebase harder.
|
||||
- - Use logical properties for them: You can add the same spacing by using `padding-inline-end` and `margin-inline-start`, and you won't need to worry about RTL layout, as they follow where the line start and ends, and you won't need to add any extra values in the RTL files, so people won't need to remember to change the same values in two files.
|
||||
- Don't use `!important` in `font-family`: RTL layout is using different font from the LTR layout, when you add `!important` in the `font-family` property it affects the RTL layout too, which causes a UI bug.
|
||||
|
||||
## General JavaScript
|
||||
|
||||
In most cases, our [linter](how-to-setup-freecodecamp-locally.md#follow-these-steps-to-get-your-development-environment-ready) will warn of any formatting which goes against this codebase's preferred practice.
|
||||
|
||||
@@ -71,21 +71,21 @@ Por lo general, no asignamos los temas a nadie más que a los colaboradores con
|
||||
|
||||
### Estoy interesado en ser moderador en freeCodeCamp. ¿Dónde debería empezar?
|
||||
|
||||
Los moderadores de la comunidad son nuestros héroes. Sus contribuciones voluntarias hacen a freeCodeCamp una comunidad segura y acogedora.
|
||||
Los moderadores de la comunidad son nuestros héroes. Their voluntary contributions make freeCodeCamp a safe and welcoming community.
|
||||
|
||||
En primer lugar, necesitamos que seas un participante activo en la comunidad, y vivas nuestro [código de conducta](https://www.freecodecamp.org/news/code-of-conduct/) (No solo hacerlo cumplir).
|
||||
First and foremost, we would need you to be an active participant in the community, and live by our [code of conduct](https://www.freecodecamp.org/news/code-of-conduct/) (not just enforce it).
|
||||
|
||||
Aquí hay algunas rutas para algunas de nuestras plataformas:
|
||||
|
||||
- Para ser un moderador de **Discord/Chat**, hay que tener una presencia activa en nuestro chat y tener tratos positivos con los demás, mientras que también aprender y practicar cómo para hacer frente a los posibles conflictos que puedan surgir.
|
||||
- To be a **Forum** moderator, similar to a chat moderator, have an active presence and engage with other forum posters, supporting others in their learning journey, and even giving feedback when asked. Echa un vistazo a [El manual del líder del subforo](https://forum.freecodecamp.org/t/the-subforum-leader-handbook/326326) para más información.
|
||||
- Para ser un moderador de **GitHub**, ayuda para procesar problemas de GitHub que son planteados para ver si son válidos e (idealmente) tratar de proponer soluciones para estos problemas que deben ser recogidos por otros (o por ti mismo).
|
||||
- To be a **Discord/Chat** moderator, have an active presence in our chat and have positive engagements with others, while also learning and practicing how to deal with potential conflicts that may arise.
|
||||
- To be a **Forum** moderator, similar to a chat moderator, have an active presence and engage with other forum posters, supporting others in their learning journey, and even giving feedback when asked. Take a look at [The Subforum Leader Handbook](https://forum.freecodecamp.org/t/the-subforum-leader-handbook/326326) for more information.
|
||||
- To be a **GitHub** moderator, help process GitHub issues that are brought up to see if they are valid and (ideally) try to propose solutions for these issues to be picked up by others (or yourself).
|
||||
|
||||
En total, sé respetuoso con los demás. We are humans from all around the world. Con esto en mente, por favor considera usar un lenguaje animado o de apoyo y ser consciente de la comunicación intercultural.
|
||||
En total, sé respetuoso con los demás. We are humans from all around the world. With that in mind, please also consider using encouraging or supportive language and be mindful of cross-cultural communication.
|
||||
|
||||
Si practicas lo anterior de forma consistente **durante un tiempo** y nuestros compañeros moderadores los recomiendan, un miembro del personal se pondrá en contacto contigo con el equipo de moderadores. El trabajo de código abierto es voluntario, y nuestro tiempo es limitado. Reconocemos que esto probablemente también sea cierto en su caso. Así que enfatizamos ser **consistente** en lugar de comprometerse en la comunidad 24/7.
|
||||
If you practice the above **consistently for a while** and our fellow moderator members recommend you, a staff member will reach out and onboard you to the moderators' team. El trabajo de código abierto es voluntario, y nuestro tiempo es limitado. Reconocemos que esto probablemente también sea cierto en su caso. So we emphasize being **consistent** rather than engaging in the community 24/7.
|
||||
|
||||
Echa un vistazo a nuestro [Manual de Moderadores](moderator-handbook.md) para una lista más exhaustiva de otras responsabilidades y expectativas que tenemos de nuestros moderadores.
|
||||
Take a look at our [Moderator Handbook](moderator-handbook.md) for a more exhaustive list of other responsibilities and expectations we have of our moderators.
|
||||
|
||||
### Estoy atascado en algo que no está incluido en esta documentación.
|
||||
|
||||
|
||||
@@ -1,20 +1,40 @@
|
||||
# Las mejores prácticas de la base de código
|
||||
|
||||
## JavaScript en general
|
||||
## Styling a component
|
||||
|
||||
En la mayoría de los casos, nuestro [linter](how-to-setup-freecodecamp-locally.md#follow-these-steps-to-get-your-development-environment-ready) advertirá de cualquier formato que vaya en contra de la práctica definida de la base de código.
|
||||
We recommend styling components using our [design style guide](https://design-style-guide.freecodecamp.org/).
|
||||
|
||||
Se recomienda utilizar componentes funcionales en vez de componentes basados en clases.
|
||||
The colors are defined in [`variable.css`](/client/src/components/layouts/variables.css), and the fonts are in [`fonts.css`](/client/src/components/layouts/fonts.css).
|
||||
|
||||
## TypeScript específico
|
||||
We are strongly opinionated about adding new variables/tokens to the colors. After careful research, the colors have been chosen to respect the freeCodeCamp brand identity, developer experience, and accessibility.
|
||||
|
||||
### Migrando un archivo JavaScript a TypeScript
|
||||
The `!important` keyword may be used to override values in some cases (for ex.: accessibility concerns). You should add a comment describing the issue, so it doesn't get removed in future refactoring.
|
||||
|
||||
### RTL support
|
||||
|
||||
We are striving to support right-to-left (RTL) layout in the codebase for languages that are read in this direction. For this you need be mindful of how to style components. Here are a quick role of thumbs to follow:
|
||||
|
||||
- Don't use `float` properties: Although it may seem best to have the component in the "perfect position", you will be climbing mountains to reach that perfect positioning in responsive layout, and you will need to reach higher heights to have it supported in RTL.
|
||||
- - Use Flexbox and Grid layouts instead, as they have RTL support already built-in, and those will be easier to maintain and review.
|
||||
- Don't define the direction while using `margin` and `padding`: it may seem harmless to use `padding-right` and `margin-left`, but these directions aren't mirrored when the layout changes to RTL, and adding counter values for them in the RTL file makes maintaining the codebase harder.
|
||||
- - Use logical properties for them: You can add the same spacing by using `padding-inline-end` and `margin-inline-start`, and you won't need to worry about RTL layout, as they follow where the line start and ends, and you won't need to add any extra values in the RTL files, so people won't need to remember to change the same values in two files.
|
||||
- Don't use `!important` in `font-family`: RTL layout is using different font from the LTR layout, when you add `!important` in the `font-family` property it affects the RTL layout too, which causes a UI bug.
|
||||
|
||||
## General JavaScript
|
||||
|
||||
In most cases, our [linter](how-to-setup-freecodecamp-locally.md#follow-these-steps-to-get-your-development-environment-ready) will warn of any formatting which goes against this codebase's preferred practice.
|
||||
|
||||
It is encouraged to use functional components over class-based components.
|
||||
|
||||
## Specific TypeScript
|
||||
|
||||
### Migrating a JavaScript File to TypeScript
|
||||
|
||||
#### Retención del historial de archivos Git
|
||||
|
||||
A veces, cambiar el archivo de `<filename>.js` a `<filename>.ts` (o `.tsx`) causa que el archivo original se elimine, y crea uno nuevo. Otras veces, el nombre del archivo solo cambia - en términos de Git. Preferiblemente, queremos que el historial del archivo se conserve.
|
||||
Sometimes changing the file from `<filename>.js` to `<filename>.ts` (or `.tsx`) causes the original file to be deleted, and a new one created, and other times the filename just changes - in terms of Git. Ideally, we want the file history to be preserved.
|
||||
|
||||
La mejor manera de lograr esto es:
|
||||
The best bet at achieving this is to:
|
||||
|
||||
1. Renombrar el archivo
|
||||
2. Comenta con la etiqueta `--no-verify` para evitar que Husky se queje de los errores de lint
|
||||
@@ -22,13 +42,13 @@ La mejor manera de lograr esto es:
|
||||
|
||||
> [!NOTE] Es probable que los editores como VSCode te muestren que el archivo se ha eliminado y que se ha creado uno nuevo. Si utilizas CLI para `git add .`, entonces VSCode mostrará el archivo como renombrado en stage
|
||||
|
||||
### Convenciones de nomenclatura
|
||||
### Naming Conventions
|
||||
|
||||
#### Interfaces y Tipos
|
||||
|
||||
Por lo general, se recomienda utilizar declaraciones de interfaz en lugar de declaraciones de tipo.
|
||||
For the most part, it is encouraged to use interface declarations over type declarations.
|
||||
|
||||
Propiedades de componentes React - Sufijo de `Props`
|
||||
React Component Props - suffix with `Props`
|
||||
|
||||
```typescript
|
||||
interface MyComponentProps {}
|
||||
@@ -36,7 +56,7 @@ interface MyComponentProps {}
|
||||
const MyComponent = (props: MyComponentProps) => {};
|
||||
```
|
||||
|
||||
Componentes React con Estado - sufijo con `State`
|
||||
React Stateful Components - suffix with `State`
|
||||
|
||||
```typescript
|
||||
interface MyComponentState {}
|
||||
@@ -44,7 +64,7 @@ interface MyComponentState {}
|
||||
class MyComponent extends Component<MyComponentProps, MyComponentState> {}
|
||||
```
|
||||
|
||||
Predeterminado - nombre del objeto en PascalCase
|
||||
Default - object name in PascalCase
|
||||
|
||||
```typescript
|
||||
interface MyObject {}
|
||||
@@ -58,7 +78,7 @@ const myObject: MyObject = {};
|
||||
|
||||
## Redux
|
||||
|
||||
### Definición de acciones
|
||||
### Action Definitions
|
||||
|
||||
```typescript
|
||||
enum AppActionTypes = {
|
||||
@@ -73,7 +93,7 @@ export const actionFunction = (
|
||||
});
|
||||
```
|
||||
|
||||
### Cómo reducir
|
||||
### How to Reduce
|
||||
|
||||
```typescript
|
||||
// Base reducer action without payload
|
||||
@@ -100,9 +120,9 @@ export const reducer = (
|
||||
};
|
||||
```
|
||||
|
||||
### Cómo enviar
|
||||
### How to Dispatch
|
||||
|
||||
Dentro de un componente, importa las acciones y los selectores necesarios.
|
||||
Within a component, import the actions and selectors needed.
|
||||
|
||||
```tsx
|
||||
// Add type definition
|
||||
@@ -128,7 +148,7 @@ export default connect(null, mapDispatchToProps)(MyComponent);
|
||||
<!-- ### Redux Types File -->
|
||||
<!-- The types associated with the Redux store state are located in `client/src/redux/types.ts`... -->
|
||||
|
||||
## Lectura Adicional
|
||||
## Further Literature
|
||||
|
||||
- [Documentos de TypeScript](https://www.typescriptlang.org/docs/)
|
||||
- [TypeScript con hoja de trucos de React](https://github.com/typescript-cheatsheets/react#readme)
|
||||
- [TypeScript Docs](https://www.typescriptlang.org/docs/)
|
||||
- [TypeScript with React CheatSheet](https://github.com/typescript-cheatsheets/react#readme)
|
||||
|
||||
@@ -71,21 +71,21 @@ Normalerweise weisen wir die Issues nur langjährigen Mitwirkenden zu. Stattdess
|
||||
|
||||
### Ich bin daran interessiert, beim freeCodeCamp als Moderator zu mitzuwirken. Wo sollte ich anfangen?
|
||||
|
||||
Unsere Community-Moderatoren sind unsere Helden. Ihre freiwilligen Beiträge machen das freeCodeCamp zu einer sicheren und einladenden Gemeinschaft.
|
||||
Unsere Community-Moderatoren sind unsere Helden. Their voluntary contributions make freeCodeCamp a safe and welcoming community.
|
||||
|
||||
In erster Linie möchten wir, dass du ein aktiver Teilnehmer in der Gemeinschaft bist und dich an unseren [Verhaltenskodex](https://www.freecodecamp.org/news/code-of-conduct/) hältst (und ihn nicht nur durchsetzt).
|
||||
First and foremost, we would need you to be an active participant in the community, and live by our [code of conduct](https://www.freecodecamp.org/news/code-of-conduct/) (not just enforce it).
|
||||
|
||||
Hier sind einige empfohlene Wege für einige unserer Plattformen:
|
||||
|
||||
- Ein **Discord/Chat**-Moderator zu sein, eine aktive Präsenz in unserem Chat zu haben und positiv auf andere einzugehen und gleichzeitig zu lernen und zu üben, wie man mit möglichen Konflikten umgeht, die entstehen können.
|
||||
- Ein **Forum**-Moderator zu sein, ähnlich wie ein Chat-Moderator, eine aktive Präsenz zu zeigen und mit anderen Forenpostern in Kontakt zu treten, andere bei ihrem Lernprozess zu unterstützen und sogar Feedback zu geben, wenn du gefragt wirst. Sieh dir das [Das Handbuch für Subforenleiter](https://forum.freecodecamp.org/t/the-subforum-leader-handbook/326326) für weitere Informationen an.
|
||||
- Als **GitHub**-Moderator hilfst du bei der Bearbeitung von GitHub-Issues, die aufgeworfen werden und versuchst (idealerweise), Lösungen für diese Issues vorzuschlagen, die dann von anderen (oder von dir selbst) aufgegriffen werden.
|
||||
- To be a **Discord/Chat** moderator, have an active presence in our chat and have positive engagements with others, while also learning and practicing how to deal with potential conflicts that may arise.
|
||||
- To be a **Forum** moderator, similar to a chat moderator, have an active presence and engage with other forum posters, supporting others in their learning journey, and even giving feedback when asked. Take a look at [The Subforum Leader Handbook](https://forum.freecodecamp.org/t/the-subforum-leader-handbook/326326) for more information.
|
||||
- To be a **GitHub** moderator, help process GitHub issues that are brought up to see if they are valid and (ideally) try to propose solutions for these issues to be picked up by others (or yourself).
|
||||
|
||||
Sei insgesamt respektvoll gegenüber anderen. Wir sind Menschen aus allen Teilen der Welt. Mit Blick darauf denke auch daran, eine ermutigende oder unterstützende Sprache zu verwenden und achte auf die interkulturelle Kommunikation.
|
||||
Sei insgesamt respektvoll gegenüber anderen. Wir sind Menschen aus allen Teilen der Welt. With that in mind, please also consider using encouraging or supportive language and be mindful of cross-cultural communication.
|
||||
|
||||
Wenn du das oben genannte **eine Weile lang konsequent praktizierst** und unsere anderen Moderatoren dich empfehlen, wird ein Mitarbeiter auf dich zukommen und dich in das Moderatorenteam aufnehmen. Open-Source-Arbeit ist freiwillige Arbeit und unsere Zeit ist begrenzt. Wir erkennen an, dass dies wahrscheinlich auch in deiner Situation der Fall ist. Deshalb betonen wir **konsequent** zu sein, anstatt sich rund um die Uhr (24/7) in der Community zu engagieren.
|
||||
If you practice the above **consistently for a while** and our fellow moderator members recommend you, a staff member will reach out and onboard you to the moderators' team. Open-Source-Arbeit ist freiwillige Arbeit und unsere Zeit ist begrenzt. Wir erkennen an, dass dies wahrscheinlich auch in deiner Situation der Fall ist. So we emphasize being **consistent** rather than engaging in the community 24/7.
|
||||
|
||||
In unserem [Moderatorenhandbuch](moderator-handbook.md) findest du eine ausführliche Liste mit weiteren Aufgaben und Erwartungen, die wir an unsere Moderatoren haben.
|
||||
Take a look at our [Moderator Handbook](moderator-handbook.md) for a more exhaustive list of other responsibilities and expectations we have of our moderators.
|
||||
|
||||
### Ich komme mit etwas nicht weiter, das in dieser Dokumentation nicht enthalten ist.
|
||||
|
||||
|
||||
@@ -1,20 +1,40 @@
|
||||
# Best Practices für die Codebasis
|
||||
|
||||
## JavaScript allgemein
|
||||
## Styling a component
|
||||
|
||||
In den meisten Fällen warnt unser [Linter](how-to-setup-freecodecamp-locally.md#follow-these-steps-to-get-your-development-environment-ready) vor jeder Formatierung, die gegen die bevorzugte Vorgehensweise dieser Codebasis verstößt.
|
||||
We recommend styling components using our [design style guide](https://design-style-guide.freecodecamp.org/).
|
||||
|
||||
Es wird empfohlen, funktionale Komponenten gegenüber klassenbasierten Komponenten zu verwenden.
|
||||
The colors are defined in [`variable.css`](/client/src/components/layouts/variables.css), and the fonts are in [`fonts.css`](/client/src/components/layouts/fonts.css).
|
||||
|
||||
## Spezifisches TypeScript
|
||||
We are strongly opinionated about adding new variables/tokens to the colors. After careful research, the colors have been chosen to respect the freeCodeCamp brand identity, developer experience, and accessibility.
|
||||
|
||||
### Migration einer JavaScript-Datei zu TypeScript
|
||||
The `!important` keyword may be used to override values in some cases (for ex.: accessibility concerns). You should add a comment describing the issue, so it doesn't get removed in future refactoring.
|
||||
|
||||
### RTL support
|
||||
|
||||
We are striving to support right-to-left (RTL) layout in the codebase for languages that are read in this direction. For this you need be mindful of how to style components. Here are a quick role of thumbs to follow:
|
||||
|
||||
- Don't use `float` properties: Although it may seem best to have the component in the "perfect position", you will be climbing mountains to reach that perfect positioning in responsive layout, and you will need to reach higher heights to have it supported in RTL.
|
||||
- - Use Flexbox and Grid layouts instead, as they have RTL support already built-in, and those will be easier to maintain and review.
|
||||
- Don't define the direction while using `margin` and `padding`: it may seem harmless to use `padding-right` and `margin-left`, but these directions aren't mirrored when the layout changes to RTL, and adding counter values for them in the RTL file makes maintaining the codebase harder.
|
||||
- - Use logical properties for them: You can add the same spacing by using `padding-inline-end` and `margin-inline-start`, and you won't need to worry about RTL layout, as they follow where the line start and ends, and you won't need to add any extra values in the RTL files, so people won't need to remember to change the same values in two files.
|
||||
- Don't use `!important` in `font-family`: RTL layout is using different font from the LTR layout, when you add `!important` in the `font-family` property it affects the RTL layout too, which causes a UI bug.
|
||||
|
||||
## General JavaScript
|
||||
|
||||
In most cases, our [linter](how-to-setup-freecodecamp-locally.md#follow-these-steps-to-get-your-development-environment-ready) will warn of any formatting which goes against this codebase's preferred practice.
|
||||
|
||||
It is encouraged to use functional components over class-based components.
|
||||
|
||||
## Specific TypeScript
|
||||
|
||||
### Migrating a JavaScript File to TypeScript
|
||||
|
||||
#### Beibehalten des Git-Dateiverlaufs
|
||||
|
||||
Manchmal führt das Ändern der Datei von `<Dateiname>.js` zu `<Dateiname>.ts` (oder `.tsx`) dazu, dass die ursprüngliche Datei gelöscht und eine neue erstellt wird, und manchmal ändert sich nur der Dateiname - im Sinne von Git. Idealerweise möchten wir, dass der Dateiverlauf erhalten bleibt.
|
||||
Sometimes changing the file from `<filename>.js` to `<filename>.ts` (or `.tsx`) causes the original file to be deleted, and a new one created, and other times the filename just changes - in terms of Git. Ideally, we want the file history to be preserved.
|
||||
|
||||
Um dies zu erreichen, gehe am besten wie folgt vor:
|
||||
The best bet at achieving this is to:
|
||||
|
||||
1. Umbenennen der Datei
|
||||
2. Commit mit dem Flag `--no-verify`, damit Husky sich nicht über die Lint-Fehler beschwert
|
||||
@@ -22,13 +42,13 @@ Um dies zu erreichen, gehe am besten wie folgt vor:
|
||||
|
||||
> [!NOTE] Editoren wie VSCode zeigen dir wahrscheinlich trotzdem an, dass die Datei gelöscht und eine neue erstellt wurde. Wenn du die CLI für `git add .` verwendest, zeigt VSCode die Datei als umbenannt im Stage an
|
||||
|
||||
### Namenskonventionen
|
||||
### Naming Conventions
|
||||
|
||||
#### Schnittstellen und Typen
|
||||
|
||||
In den meisten Fällen wird empfohlen, Schnittstellendeklarationen gegenüber Typdeklarationen zu verwenden.
|
||||
For the most part, it is encouraged to use interface declarations over type declarations.
|
||||
|
||||
React Component Props - Suffix mit `Props`
|
||||
React Component Props - suffix with `Props`
|
||||
|
||||
```typescript
|
||||
interface MyComponentProps {}
|
||||
@@ -36,7 +56,7 @@ interface MyComponentProps {}
|
||||
const MyComponent = (props: MyComponentProps) => {};
|
||||
```
|
||||
|
||||
React Stateful Components - Suffix mit `State`
|
||||
React Stateful Components - suffix with `State`
|
||||
|
||||
```typescript
|
||||
interface MyComponentState {}
|
||||
@@ -44,7 +64,7 @@ interface MyComponentState {}
|
||||
class MyComponent extends Component<MyComponentProps, MyComponentState> {}
|
||||
```
|
||||
|
||||
Standard - Objektname in PascalCase
|
||||
Default - object name in PascalCase
|
||||
|
||||
```typescript
|
||||
interface MyObject {}
|
||||
@@ -58,7 +78,7 @@ const myObject: MyObject = {};
|
||||
|
||||
## Redux
|
||||
|
||||
### Aktionsdefinitionen
|
||||
### Action Definitions
|
||||
|
||||
```typescript
|
||||
enum AppActionTypes = {
|
||||
@@ -73,7 +93,7 @@ export const actionFunction = (
|
||||
});
|
||||
```
|
||||
|
||||
### Wie man Reducer verwendet
|
||||
### How to Reduce
|
||||
|
||||
```typescript
|
||||
// Base reducer action without payload
|
||||
@@ -100,9 +120,9 @@ export const reducer = (
|
||||
};
|
||||
```
|
||||
|
||||
### Wie man Dispatch verwendet
|
||||
### How to Dispatch
|
||||
|
||||
Importiere innerhalb einer Komponente die benötigten Aktionen und Selektoren.
|
||||
Within a component, import the actions and selectors needed.
|
||||
|
||||
```tsx
|
||||
// Add type definition
|
||||
@@ -128,7 +148,7 @@ export default connect(null, mapDispatchToProps)(MyComponent);
|
||||
<!-- ### Redux Types File -->
|
||||
<!-- The types associated with the Redux store state are located in `client/src/redux/types.ts`... -->
|
||||
|
||||
## Weitere Literatur
|
||||
## Further Literature
|
||||
|
||||
- [TypeScript Dokumentation](https://www.typescriptlang.org/docs/)
|
||||
- [TypeScript mit React CheatSheet](https://github.com/typescript-cheatsheets/react#readme)
|
||||
- [TypeScript Docs](https://www.typescriptlang.org/docs/)
|
||||
- [TypeScript with React CheatSheet](https://github.com/typescript-cheatsheets/react#readme)
|
||||
|
||||
@@ -77,9 +77,9 @@ Prima di tutto, avremmo bisogno che tu sia un partecipate attivo della nostra co
|
||||
|
||||
Ecco alcuni percorsi consigliati per alcune delle nostre piattaforme:
|
||||
|
||||
- Per essere un moderatore per **Discord/Chat**, abbi una presenza attiva nella nostra chat e interazioni positive con gli altri, e intanto impara a e pratica come gestire i potenziali conflitti che possono verificarsi.
|
||||
- Per essere un moderatore per **Discord/Chat**, abbi una presenza attiva nella nostra chat e interazioni positive con gli altri, e intanto impara come gestire i potenziali conflitti che possono verificarsi.
|
||||
- Per essere un moderatore del **Forum**, in maniera simile ai moderatori della chat, abbi una presenza attiva e interagisci con gli utenti, supportando gli altri nel loro percorso di crescita e dando feedback quando richiesto. Dai un occhiata al [The Subforum Leader Handbook](https://forum.freecodecamp.org/t/the-subforum-leader-handbook/326326) per maggiori informazioni.
|
||||
- Per essere un moderatore su **GitHub**, aiuta a processare le issue su GitHub che sono create per vedere se sono valide e (idealmente) prova a proporre soluzioni per queste issue che possono essere applicate da altri (o da te stesso).
|
||||
- Per essere un moderatore su **GitHub**, aiuta a processare le issue create su GitHub per vedere se sono valide e (idealmente) prova a proporre soluzioni per queste issue che possono essere applicate da altri (o da te stesso).
|
||||
|
||||
Nel complesso, rispetta gli altri. Siamo tutti umani. Con questo in mente, per favore considera anche l'uso di un linguaggio incoraggiante e supportivo e tieni a mente la comunicazione tra culture diverse.
|
||||
|
||||
|
||||
@@ -1,5 +1,25 @@
|
||||
# Buone pratiche per il codebase
|
||||
|
||||
## Definire lo stile di un componente
|
||||
|
||||
Consigliamo di definire lo stile dei componenti seguendo la nostra [guida di stile](https://design-style-guide.freecodecamp.org/).
|
||||
|
||||
I colori sono definiti in [`variable.css`](/client/src/components/layouts/variables.css) e i font in [`fonts.css`](/client/src/components/layouts/fonts.css).
|
||||
|
||||
Siamo estremamente categorici circa l'aggiunta di nuove variabili/token ai colori. Dopo un'attenta ricerca, i colori sono stati scelti per rispettare l'identità del marchio freeCodeCamp, l'esperienza dello sviluppatore e l'accessibilità.
|
||||
|
||||
La parola chiave `!important` può essere usata per sovrascrivere i valori in alcuni casi (per esempio: problemi di accessibilità). È necessario aggiungere un commento che descriva il problema, in modo che non venga rimosso in un futuro refactoring.
|
||||
|
||||
### Supporto RTL
|
||||
|
||||
Stiamo cercando di supportare il layout da destra a sinistra (right-to-left, RTL) nel codebase per le lingue che sono lette in questa direzione. Per questo è necessario essere consapevoli di come definire lo stile dei componenti. Ecco alcune rapide regole pratiche da seguire:
|
||||
|
||||
- Non utilizzare le proprietà `float`: anche se può sembrare meglio avere il componente in "posizione perfetta", dovrai scalare una montagna per raggiungere quel posizionamento perfetto nel layout responsivo e dovrai fare ancora più fatica per averlo supportato in RTL.
|
||||
- Invece, utilizza i layout Flexbox e Grid poiché hanno già integrato il supporto RTL e saranno più facili da gestire e revisionare.
|
||||
- Non definire la direzione usando `margin` e `padding`: potrebbe sembrare innocuo usare `padding-right` e `margin-left`, ma queste direzioni non sono rispecchiate quando il layout cambia in RTL e l'aggiunta di valori contatori per loro nel file RTL rende il mantenimento del codebase più difficile.
|
||||
- Usa le proprietà logiche per loro: puoi aggiungere la stessa spaziatura usando `padding-inline-end` e `margin-inline-start` e non dovrai preoccuparti del layout RTL, dato che seguono l'inizio e la fine della riga e non è necessario aggiungere alcun valore aggiuntivo nei file RTL, così le persone non dovranno ricordarsi di cambiare gli stessi valori in due file.
|
||||
- Non usare `!important` in `font-family`: il layout RTL utilizza caratteri diversi dal layout LTR, quando si aggiunge `!important` alla proprietà `font-family` influisce anche sul layout RTL, causando un bug della UI.
|
||||
|
||||
## JavaScript generale
|
||||
|
||||
Nella maggior parte dei casi, il nostro [linter](how-to-setup-freecodecamp-locally.md#follow-these-steps-to-get-your-development-environment-ready) darà un avvertimento nel caso di un format che va contro le preferenze del nostro codebase.
|
||||
@@ -12,7 +32,7 @@ Si incoraggia l'utilizzo di componenti funzionali invece di componenti basati su
|
||||
|
||||
#### Mantenere la cronologia del file con Git
|
||||
|
||||
A volte cambiare il file da `<filename>.js` a `<filename>.ts` (o `.tsx`) causa che il file originale viene cancellato e uno nuovo viene creato, altre volte è solo il nome del file a cambiare - per quanto riguarda Git. Idealmente, vogliamo che la storia del file sia conservata.
|
||||
A volte cambiare il file da `<filename>.js` a `<filename>.ts` (o `.tsx`) fa sì che il file originale venga cancellato e ne venga creato uno nuovo, altre volte è solo il nome del file a cambiare - per quanto riguarda Git. Idealmente, vogliamo che la cronologia dei file sia conservata.
|
||||
|
||||
Il modo migliore per assicurarsene è:
|
||||
|
||||
|
||||
@@ -71,21 +71,21 @@ If you think you've found a bug, first read the ["How to Report a Bug"](https://
|
||||
|
||||
### freeCodeCamp のモデレーターになりたいです。 何から始めればいいですか？
|
||||
|
||||
コミュニティモデレーターは、私たちのヒーローです。 モデレーターの自発的な貢献により、freeCodeCamp は安全で快適なコミュニティになっています。
|
||||
コミュニティモデレーターは、私たちのヒーローです。 Their voluntary contributions make freeCodeCamp a safe and welcoming community.
|
||||
|
||||
何よりもまず、コミュニティの積極的な参加者となり、[行動規範](https://www.freecodecamp.org/japanese/news/code-of-conduct/) を強制するだけでなくその規範に従って行動する必要があります。
|
||||
First and foremost, we would need you to be an active participant in the community, and live by our [code of conduct](https://www.freecodecamp.org/news/code-of-conduct/) (not just enforce it).
|
||||
|
||||
いくつかのプラットフォームで推奨されるパスを以下に示します。
|
||||
|
||||
- **Discord／チャット** のモデレーターになるには、チャットに積極的に参加し、発生する可能性のある潜在的な衝突への対処方法を学ぶとともに実践しながら、他の人と積極的に関わってください。
|
||||
- To be a **Forum** moderator, similar to a chat moderator, have an active presence and engage with other forum posters, supporting others in their learning journey, and even giving feedback when asked. 詳細については、[サブフォーラムリーダーハンドブック](https://forum.freecodecamp.org/t/the-subforum-leader-handbook/326326) をご覧ください。
|
||||
- **GitHub** モデレーターになるには、提起された GitHub Issue の処理を手伝います。それらが有効であるかどうかを確認し、(理想的には) Issue に対するソリューションを提案して、他の人 (または自分自身) が対応できる状態にします。
|
||||
- To be a **Discord/Chat** moderator, have an active presence in our chat and have positive engagements with others, while also learning and practicing how to deal with potential conflicts that may arise.
|
||||
- To be a **Forum** moderator, similar to a chat moderator, have an active presence and engage with other forum posters, supporting others in their learning journey, and even giving feedback when asked. Take a look at [The Subforum Leader Handbook](https://forum.freecodecamp.org/t/the-subforum-leader-handbook/326326) for more information.
|
||||
- To be a **GitHub** moderator, help process GitHub issues that are brought up to see if they are valid and (ideally) try to propose solutions for these issues to be picked up by others (or yourself).
|
||||
|
||||
つまり、他の人に敬意を払ってください。 We are humans from all around the world. これを念頭に置いて、励ましの言葉または応援する言葉を使用し、異文化間のコミュニケーションを意識してください。
|
||||
つまり、他の人に敬意を払ってください。 We are humans from all around the world. With that in mind, please also consider using encouraging or supportive language and be mindful of cross-cultural communication.
|
||||
|
||||
**一定期間、着実に** 上記を実行し、仲間のモデレーターがあなたを推薦した場合に、スタッフから連絡が来て、モデレーターチームに加わることができます。 オープンソース作業はボランティアであり、私たちの時間は限られています。 皆様も、おそらく同じだと思います。 したがって、24 時間年中無休でコミュニティに参加するのではなく、**着実に** 取り組んでいただきたいです。
|
||||
If you practice the above **consistently for a while** and our fellow moderator members recommend you, a staff member will reach out and onboard you to the moderators' team. オープンソース作業はボランティアであり、私たちの時間は限られています。 皆様も、おそらく同じだと思います。 So we emphasize being **consistent** rather than engaging in the community 24/7.
|
||||
|
||||
モデレーターの責任と期待に関する包括的なリストは、[モデレーターハンドブック](moderator-handbook.md) をご覧ください。
|
||||
Take a look at our [Moderator Handbook](moderator-handbook.md) for a more exhaustive list of other responsibilities and expectations we have of our moderators.
|
||||
|
||||
### このドキュメントに記載されていない問題で困っています。
|
||||
|
||||
|
||||
@@ -1,20 +1,40 @@
|
||||
# コードベースのベストプラクティス
|
||||
|
||||
## 一般的な JavaScript
|
||||
## Styling a component
|
||||
|
||||
ほとんどの場合、[リンター](how-to-setup-freecodecamp-locally.md#以下の手順に従って、開発環境を準備してください。) は、コードベースの好ましいプラクティスに反するフォーマットを警告します。
|
||||
We recommend styling components using our [design style guide](https://design-style-guide.freecodecamp.org/).
|
||||
|
||||
クラスベースのコンポーネントよりも関数コンポーネントの使用を推奨します。
|
||||
The colors are defined in [`variable.css`](/client/src/components/layouts/variables.css), and the fonts are in [`fonts.css`](/client/src/components/layouts/fonts.css).
|
||||
|
||||
## 特定の TypeScript
|
||||
We are strongly opinionated about adding new variables/tokens to the colors. After careful research, the colors have been chosen to respect the freeCodeCamp brand identity, developer experience, and accessibility.
|
||||
|
||||
### JavaScript ファイルを TypeScript に移行する
|
||||
The `!important` keyword may be used to override values in some cases (for ex.: accessibility concerns). You should add a comment describing the issue, so it doesn't get removed in future refactoring.
|
||||
|
||||
### RTL support
|
||||
|
||||
We are striving to support right-to-left (RTL) layout in the codebase for languages that are read in this direction. For this you need be mindful of how to style components. Here are a quick role of thumbs to follow:
|
||||
|
||||
- Don't use `float` properties: Although it may seem best to have the component in the "perfect position", you will be climbing mountains to reach that perfect positioning in responsive layout, and you will need to reach higher heights to have it supported in RTL.
|
||||
- - Use Flexbox and Grid layouts instead, as they have RTL support already built-in, and those will be easier to maintain and review.
|
||||
- Don't define the direction while using `margin` and `padding`: it may seem harmless to use `padding-right` and `margin-left`, but these directions aren't mirrored when the layout changes to RTL, and adding counter values for them in the RTL file makes maintaining the codebase harder.
|
||||
- - Use logical properties for them: You can add the same spacing by using `padding-inline-end` and `margin-inline-start`, and you won't need to worry about RTL layout, as they follow where the line start and ends, and you won't need to add any extra values in the RTL files, so people won't need to remember to change the same values in two files.
|
||||
- Don't use `!important` in `font-family`: RTL layout is using different font from the LTR layout, when you add `!important` in the `font-family` property it affects the RTL layout too, which causes a UI bug.
|
||||
|
||||
## General JavaScript
|
||||
|
||||
In most cases, our [linter](how-to-setup-freecodecamp-locally.md#follow-these-steps-to-get-your-development-environment-ready) will warn of any formatting which goes against this codebase's preferred practice.
|
||||
|
||||
It is encouraged to use functional components over class-based components.
|
||||
|
||||
## Specific TypeScript
|
||||
|
||||
### Migrating a JavaScript File to TypeScript
|
||||
|
||||
#### Git のファイル履歴を保持する
|
||||
|
||||
ファイル形式を `<filename>.js` から `<filename>.ts` (もしくは `.tsx`) へ変更すると、元のファイルが削除され新しいファイルが作成される場合があります。それ以外の場合は、Git においてファイル名が変更されます。 ファイルの履歴を保存できるのが理想です。
|
||||
Sometimes changing the file from `<filename>.js` to `<filename>.ts` (or `.tsx`) causes the original file to be deleted, and a new one created, and other times the filename just changes - in terms of Git. Ideally, we want the file history to be preserved.
|
||||
|
||||
そのための最善策は次のとおりです。
|
||||
The best bet at achieving this is to:
|
||||
|
||||
1. ファイル名を変更する
|
||||
2. フラグ `--no-verify` でコミットして、Husky がリントエラーについて不平を言うことを防ぐ
|
||||
@@ -22,13 +42,13 @@
|
||||
|
||||
> [!NOTE] VScode 等のエディターは、ファイルが削除され新しいファイルが作成されたことを表示する可能性があります。 `git add .` に CLI を使用すると、VSCode はファイル名が変更されたものとしてステージに表示します。
|
||||
|
||||
### 命名規則
|
||||
### Naming Conventions
|
||||
|
||||
#### インターフェースと型
|
||||
|
||||
ほとんどの場合、型宣言にインターフェース宣言を使用することを推奨します。
|
||||
For the most part, it is encouraged to use interface declarations over type declarations.
|
||||
|
||||
React コンポーネントプロパティ - サフィックスは `Props`
|
||||
React Component Props - suffix with `Props`
|
||||
|
||||
```typescript
|
||||
interface MyComponentProps {}
|
||||
@@ -36,7 +56,7 @@ interface MyComponentProps {}
|
||||
const MyComponent = (props: MyComponentProps) => {};
|
||||
```
|
||||
|
||||
React ステートフルコンポーネント - サフィックスは `State`
|
||||
React Stateful Components - suffix with `State`
|
||||
|
||||
```typescript
|
||||
interface MyComponentState {}
|
||||
@@ -44,7 +64,7 @@ interface MyComponentState {}
|
||||
class MyComponent extends Component<MyComponentProps, MyComponentState> {}
|
||||
```
|
||||
|
||||
デフォルト - PascalCase 内のオブジェクト名
|
||||
Default - object name in PascalCase
|
||||
|
||||
```typescript
|
||||
interface MyObject {}
|
||||
@@ -58,7 +78,7 @@ const myObject: MyObject = {};
|
||||
|
||||
## Redux
|
||||
|
||||
### Action 定義
|
||||
### Action Definitions
|
||||
|
||||
```typescript
|
||||
enum AppActionTypes = {
|
||||
@@ -73,7 +93,7 @@ export const actionFunction = (
|
||||
});
|
||||
```
|
||||
|
||||
### Reduce の方法
|
||||
### How to Reduce
|
||||
|
||||
```typescript
|
||||
// Base reducer action without payload
|
||||
@@ -100,9 +120,9 @@ export const reducer = (
|
||||
};
|
||||
```
|
||||
|
||||
### Dispatch の方法
|
||||
### How to Dispatch
|
||||
|
||||
コンポーネント内で、必要なアクションとセレクターをインポートします。
|
||||
Within a component, import the actions and selectors needed.
|
||||
|
||||
```tsx
|
||||
// Add type definition
|
||||
@@ -128,7 +148,7 @@ export default connect(null, mapDispatchToProps)(MyComponent);
|
||||
<!-- ### Redux Types File -->
|
||||
<!-- The types associated with the Redux store state are located in `client/src/redux/types.ts`... -->
|
||||
|
||||
## その他資料
|
||||
## Further Literature
|
||||
|
||||
- [TypeScript ドキュメント](https://www.typescriptlang.org/docs/)
|
||||
- [React CheatSheet 付き TypeScript](https://github.com/typescript-cheatsheets/react#readme)
|
||||
- [TypeScript Docs](https://www.typescriptlang.org/docs/)
|
||||
- [TypeScript with React CheatSheet](https://github.com/typescript-cheatsheets/react#readme)
|
||||
|
||||
@@ -1,5 +1,25 @@
|
||||
# Práticas recomendadas da base de código
|
||||
|
||||
## Estilizando um componente
|
||||
|
||||
Recomendamos estilizar componentes usando nosso [guia de estilo de design](https://design-style-guide.freecodecamp.org/).
|
||||
|
||||
As cores são definidas no arquivo [`variable.css`](/client/src/components/layouts/variables.css) e as fontes estão em [`fonts.css`](/client/src/components/layouts/fonts.css).
|
||||
|
||||
Temos uma opinião forte sobre a adição de novas variáveis/tokens às cores. Após uma pesquisa cuidadosa, as cores foram escolhidas para respeitar a identidade da marca freeCodeCamp, a experiência do desenvolvedor e a acessibilidade.
|
||||
|
||||
A palavra-chave `!important` pode ser usada para substituir valores em alguns casos (por exemplo, questões de acessibilidade). Você deve adicionar um comentário descrevendo a questão para que ela não seja removida em futura refatoração.
|
||||
|
||||
### Suporte a RTL
|
||||
|
||||
Estamos nos esforçando para apoiar o layout da direita para a esquerda (do inglês, right-to-left, ou RTL) na base de código para os idiomas que são lidos nessa direção. Por isso, você precisa estar atento à maneira como estilizar os componentes. Seguem aqui algumas dicas práticas para isso:
|
||||
|
||||
- Não use as propriedades `float`: embora possa parecer o melhor para ter o componente na "posição perfeita", você estará fazendo um esforço incrível para alcançar o posicionamento perfeito no layout responsivo e precisará de um esforço ainda maior para dar o suporte aos idiomas lidos da direita para a esquerda.
|
||||
- - Em vez disso, use layouts com Flexbox e Grid, pois eles já têm incorporado o suporte a esses idiomas e serão mais fáceis de manter e revisar.
|
||||
- Não defina a direção ao usar `margin` e `padding`: pode parecer inofensivo usar `padding-right` e `margin-left`, mas essas direções não são espelhadas quando o layout muda para RTL. Adicionar valores opostos para eles no arquivo RTL torna a manutenção da base de código mais difícil.
|
||||
- - Use as propriedades lógicas para eles: você pode adicionar o mesmo espaço, usando `padding-inline-end` e `margin-inline-start`. Você não precisará se preocupar com o layout RTL, já que ele seguirá onde a linha começa e termina. Além disso, você não precisará adicionar valores a mais nos arquivos RTL. Então, não será necessário lembrar de alterar os mesmos valores em dois arquivos.
|
||||
- Não use `!important` em `font-family`: o layout RTL usará uma fonte diferente do layout da esquerda para a direita (do inglês, left-to-right, ou LTR). Quando você adiciona `!important` na propriedade `font-family`, isso afeta o layout RTL também, o que causa um bug de UI.
|
||||
|
||||
## JavaScript em geral
|
||||
|
||||
Na maioria dos casos, nosso [linter](how-to-setup-freecodecamp-locally.md#follow-these-steps-to-get-your-development-environment-ready) avisará sobre qualquer formatação que contradiga as práticas recomendadas desta base de código.
|
||||
@@ -131,4 +151,4 @@ export default connect(null, mapDispatchToProps)(MyComponent);
|
||||
## Mais informações
|
||||
|
||||
- [Documentação do TypeScript](https://www.typescriptlang.org/docs/)
|
||||
- [TypeScript com a cheatsheet do React](https://github.com/typescript-cheatsheets/react#readme)
|
||||
- [Ficha informativa de TypeScript com React](https://github.com/typescript-cheatsheets/react#readme)
|
||||
|
||||
@@ -71,21 +71,21 @@ freeCodeCamp працює на сучасному стеку JavaScript. Якщ
|
||||
|
||||
### Я хочу бути модератором freeCodeCamp. З чого мені варто почати?
|
||||
|
||||
Модератори нашої спільноти – наші герої. Їхні добровільні внески роблять freeCodeCamp безпечною та гостинною спільнотою.
|
||||
Модератори нашої спільноти – наші герої. Their voluntary contributions make freeCodeCamp a safe and welcoming community.
|
||||
|
||||
Перш за все, ви повинні бути активним учасником нашої спільноти та дотримуватись нашого [кодексу поведінки](https://www.freecodecamp.org/news/code-of-conduct/) (а не просто обіцяти його виконання).
|
||||
First and foremost, we would need you to be an active participant in the community, and live by our [code of conduct](https://www.freecodecamp.org/news/code-of-conduct/) (not just enforce it).
|
||||
|
||||
Декілька рекомендацій стосовно наших платформ:
|
||||
|
||||
- Щоб бути модератором **дискорду/чату**, будьте активними у нашому чаті та взаємодійте з іншими, навчаючись та практикуючи вирішення потенційних конфліктів.
|
||||
- Щоб бути модератором **форуму**, будьте активними та взаємодійте з іншими людьми на форумі, підтримуйте їх та надавайте зворотний зв'язок за потреби. Див. [посібник керівника підфоруму](https://forum.freecodecamp.org/t/the-subforum-leader-handbook/326326) для додаткової інформації.
|
||||
- Щоб бути модератором **GitHub**, допомагайте з обробкою завдань GitHub, перевіряючи, чи вони дійсні та (в ідеалі) пропонуйте їх вирішення (власне чи чуже).
|
||||
- To be a **Discord/Chat** moderator, have an active presence in our chat and have positive engagements with others, while also learning and practicing how to deal with potential conflicts that may arise.
|
||||
- To be a **Forum** moderator, similar to a chat moderator, have an active presence and engage with other forum posters, supporting others in their learning journey, and even giving feedback when asked. Take a look at [The Subforum Leader Handbook](https://forum.freecodecamp.org/t/the-subforum-leader-handbook/326326) for more information.
|
||||
- To be a **GitHub** moderator, help process GitHub issues that are brought up to see if they are valid and (ideally) try to propose solutions for these issues to be picked up by others (or yourself).
|
||||
|
||||
Коротко: поважайте інших. Ми – люди з усього світу. Зважаючи на це, будь ласка, слідкуйте за своїм спілкуванням із людьми інших культур.
|
||||
Коротко: поважайте інших. Ми – люди з усього світу. With that in mind, please also consider using encouraging or supportive language and be mindful of cross-cultural communication.
|
||||
|
||||
Якщо ви практикували вищезгадане **деякий час** та хтось із модераторів рекомендує вас, з вами зв'яжеться співробітник та залучить до команди модераторів. Відкрита робота є волонтерською роботою, і наш час обмежений. Ми розуміємо, що в вашому випадку це правда. Тому ми наголошуємо на тому, щоб бути **послідовними**, а не взаємодіяти у спільноті 24/7.
|
||||
If you practice the above **consistently for a while** and our fellow moderator members recommend you, a staff member will reach out and onboard you to the moderators' team. Відкрита робота є волонтерською роботою, і наш час обмежений. Ми розуміємо, що в вашому випадку це правда. So we emphasize being **consistent** rather than engaging in the community 24/7.
|
||||
|
||||
Див. наш [довідник модератора](moderator-handbook.md) для детальнішого списку обов'язків модератора та наших очікувань від них.
|
||||
Take a look at our [Moderator Handbook](moderator-handbook.md) for a more exhaustive list of other responsibilities and expectations we have of our moderators.
|
||||
|
||||
### Моя проблема не висвітлена у цій документації.
|
||||
|
||||
|
||||
@@ -1,20 +1,40 @@
|
||||
# Рекомендації щодо кодової бази
|
||||
|
||||
## Загально про JavaScript
|
||||
## Styling a component
|
||||
|
||||
У більшості випадків наш [linter](how-to-setup-freecodecamp-locally.md#follow-these-steps-to-get-your-development-environment-ready) попереджатиме про будь-яке форматування, яке суперечить бажаному варіанту кодової бази.
|
||||
We recommend styling components using our [design style guide](https://design-style-guide.freecodecamp.org/).
|
||||
|
||||
Рекомендовано використовувати функціональні компоненти замість класових компонентів.
|
||||
The colors are defined in [`variable.css`](/client/src/components/layouts/variables.css), and the fonts are in [`fonts.css`](/client/src/components/layouts/fonts.css).
|
||||
|
||||
## Специфіка TypeScript
|
||||
We are strongly opinionated about adding new variables/tokens to the colors. After careful research, the colors have been chosen to respect the freeCodeCamp brand identity, developer experience, and accessibility.
|
||||
|
||||
### Перенесення файлу JavaScript до TypeScript
|
||||
The `!important` keyword may be used to override values in some cases (for ex.: accessibility concerns). You should add a comment describing the issue, so it doesn't get removed in future refactoring.
|
||||
|
||||
### RTL support
|
||||
|
||||
We are striving to support right-to-left (RTL) layout in the codebase for languages that are read in this direction. For this you need be mindful of how to style components. Here are a quick role of thumbs to follow:
|
||||
|
||||
- Don't use `float` properties: Although it may seem best to have the component in the "perfect position", you will be climbing mountains to reach that perfect positioning in responsive layout, and you will need to reach higher heights to have it supported in RTL.
|
||||
- - Use Flexbox and Grid layouts instead, as they have RTL support already built-in, and those will be easier to maintain and review.
|
||||
- Don't define the direction while using `margin` and `padding`: it may seem harmless to use `padding-right` and `margin-left`, but these directions aren't mirrored when the layout changes to RTL, and adding counter values for them in the RTL file makes maintaining the codebase harder.
|
||||
- - Use logical properties for them: You can add the same spacing by using `padding-inline-end` and `margin-inline-start`, and you won't need to worry about RTL layout, as they follow where the line start and ends, and you won't need to add any extra values in the RTL files, so people won't need to remember to change the same values in two files.
|
||||
- Don't use `!important` in `font-family`: RTL layout is using different font from the LTR layout, when you add `!important` in the `font-family` property it affects the RTL layout too, which causes a UI bug.
|
||||
|
||||
## General JavaScript
|
||||
|
||||
In most cases, our [linter](how-to-setup-freecodecamp-locally.md#follow-these-steps-to-get-your-development-environment-ready) will warn of any formatting which goes against this codebase's preferred practice.
|
||||
|
||||
It is encouraged to use functional components over class-based components.
|
||||
|
||||
## Specific TypeScript
|
||||
|
||||
### Migrating a JavaScript File to TypeScript
|
||||
|
||||
#### Збереження історії файлів Git
|
||||
|
||||
Іноді зміна файлу з `<filename>.js` на `<filename>.ts` (або `.tsx`) призводить до видалення вихідного файлу та створення нового, а в інших випадках назва файлу просто змінюється, згідно Git. В ідеалі ми хочемо, щоб історія файлів була збережена.
|
||||
Sometimes changing the file from `<filename>.js` to `<filename>.ts` (or `.tsx`) causes the original file to be deleted, and a new one created, and other times the filename just changes - in terms of Git. Ideally, we want the file history to be preserved.
|
||||
|
||||
Щоб цього досягти потрібно:
|
||||
The best bet at achieving this is to:
|
||||
|
||||
1. Перейменувати файл
|
||||
2. Затвердити прапорцем `--no-verify`, щоб запобігти скаргам Хаскі на помилки lint
|
||||
@@ -22,13 +42,13 @@
|
||||
|
||||
> [!NOTE] Такі редактори, як VSCode, однаково показуватимуть, що файл видалено та створено новий. Якщо ви використовуєте CLI для `git add .`, то VSCode показуватиме файл як перейменований
|
||||
|
||||
### Конвенції про іменування
|
||||
### Naming Conventions
|
||||
|
||||
#### Інтерфейси та типи
|
||||
|
||||
Рекомендовано використовувати оголошення інтерфейсу замість оголошення типів.
|
||||
For the most part, it is encouraged to use interface declarations over type declarations.
|
||||
|
||||
React Component Props - суфікс `Props`
|
||||
React Component Props - suffix with `Props`
|
||||
|
||||
```typescript
|
||||
interface MyComponentProps {}
|
||||
@@ -36,7 +56,7 @@ interface MyComponentProps {}
|
||||
const MyComponent = (props: MyComponentProps) => {};
|
||||
```
|
||||
|
||||
React Stateful Components - суфікс `State`
|
||||
React Stateful Components - suffix with `State`
|
||||
|
||||
```typescript
|
||||
interface MyComponentState {}
|
||||
@@ -44,7 +64,7 @@ interface MyComponentState {}
|
||||
class MyComponent extends Component<MyComponentProps, MyComponentState> {}
|
||||
```
|
||||
|
||||
За замовчуванням - ім'я об'єкта ВерблюдячимРегістром
|
||||
Default - object name in PascalCase
|
||||
|
||||
```typescript
|
||||
interface MyObject {}
|
||||
@@ -58,7 +78,7 @@ const myObject: MyObject = {};
|
||||
|
||||
## Redux
|
||||
|
||||
### Визначення дій
|
||||
### Action Definitions
|
||||
|
||||
```typescript
|
||||
enum AppActionTypes = {
|
||||
@@ -73,7 +93,7 @@ export const actionFunction = (
|
||||
});
|
||||
```
|
||||
|
||||
### Як використовувати Reduce
|
||||
### How to Reduce
|
||||
|
||||
```typescript
|
||||
// Base reducer action without payload
|
||||
@@ -100,9 +120,9 @@ export const reducer = (
|
||||
};
|
||||
```
|
||||
|
||||
### Як використовувати Dispatch
|
||||
### How to Dispatch
|
||||
|
||||
Усередині компонента імпортуйте необхідні дії та селектори.
|
||||
Within a component, import the actions and selectors needed.
|
||||
|
||||
```tsx
|
||||
// Add type definition
|
||||
@@ -128,7 +148,7 @@ export default connect(null, mapDispatchToProps)(MyComponent);
|
||||
<!-- ### Redux Types File -->
|
||||
<!-- The types associated with the Redux store state are located in `client/src/redux/types.ts`... -->
|
||||
|
||||
## Додаткова література
|
||||
## Further Literature
|
||||
|
||||
- [Документація по TypeScript](https://www.typescriptlang.org/docs/)
|
||||
- [Підказки по TypeScript з React](https://github.com/typescript-cheatsheets/react#readme)
|
||||
- [TypeScript Docs](https://www.typescriptlang.org/docs/)
|
||||
- [TypeScript with React CheatSheet](https://github.com/typescript-cheatsheets/react#readme)
|
||||
|
||||
Reference in New Issue
Block a user