gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore(i18n,docs): processed translations (#45554)

Browse Source
This commit is contained in:
camperbot
2022-03-29 01:36:56 +05:30
committed by GitHub
parent 07cfc8b83b
commit 0ec459d7ff
2 changed files with 66 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
docs/i18n/espanol/how-to-work-on-localized-client-webapp.md
View File

@ -1,20 +1,20 @@
# How to work on localized client webapp # Cómo trabajar en una aplicación web de cliente localizada
The react based client web app that powers our learning platform is built using Gatsby. It is translated into various world languages using [react-i18next](https://react.i18next.com/) and [i18next](https://www.i18next.com/). La aplicación web de cliente basada en react que impulsa nuestra plataforma de aprendizaje se construyo utilizando Gatsby. Se traduce a varios idiomas utilizando [react-i18next](https://react.i18next.com/) y [i18next](https://www.i18next.com/).
You can learn more about setting up the client application locally for development by following [our local setup guide here](how-to-setup-freecodecamp-locally.md). By default the application is available only in English. Puedes obtener más información sobre cómo configurar la aplicación cliente localmente para su desarrollo siguiendo [nuestra guía de configuración local aquí](how-to-setup-freecodecamp-locally.md). Por defecto, la aplicación solo está disponible en inglés.
Once you have setup the project locally you should be able to follow this documentation to run the client in the language of your choice from the list of available languages. Una vez que hayas configurado el proyecto localmente, deberías poder seguir esta documentación para ejecutar el cliente en el idioma de tu elección de la lista de idiomas disponibles.
This could be helpful when you are working on a feature that specifically targets something that involves localization, and requires you to validate for instance a button's label in a different language. Esto podría ser útil cuando se está trabajando en una función que se dirige específicamente a algo que implica la localización, y requiere que valides, por ejemplo, la etiqueta de un botón en un idioma diferente.
> [!TIP] You do not need to follow this document for translating freeCodeCamp's curriculum or contributing documentation. Read [this guide here](how-to-translate-files.md) instead. > [!TIP] No necesitas seguir este documento para traducir el currículo de freeCodeCamp o para contribuir con la documentación. En su lugar, lee [esta guia](how-to-translate-files.md).
Let's understand how the i18n frameworks and tooling work. Veamos cómo funcionan los marcos de trabajo y las herramientas de i18n.
## File Structure ## Estructura de archivos
Most of files for translating the platform are located in the [`client/i18n`](https://github.com/freeCodeCamp/freeCodeCamp/tree/main/client/i18n) folder. Each language has a directory within that containing JSON files with the translations. La mayoría de los archivos para traducir la plataforma se encuentran en la carpeta [`client/i18n`](https://github.com/freeCodeCamp/freeCodeCamp/tree/main/client/i18n). Cada idioma tiene una carpeta dentro que contiene archivos JSON con las traducciones.
```console ```console
config/i18n config/i18n
@ -59,29 +59,29 @@ Most of files for translating the platform are located in the [`client/i18n`](ht
└── validate-keys.ts └── validate-keys.ts
``` ```
Some of these files are translated on our translation platform (Crowdin), some are not. Algunos de estos archivos son traducidos en nuestra plataforma de traducción (Crowdin), otros no lo son.
**Files translated on our translation platform:** **Archivos traducidos en nuestra plataforma de traducción:**
- The `translations.json` file contains the majority of the text that appears on the user interface elements. The keys are used in the codebase to get the correct text for whatever language is set. This file needs to have the exact same keys in all languages. - El archivo `translations.json` contiene la mayor parte del texto que aparece en los elementos de la interfaz de usuario. Las claves son usadas en el código base para obtener el texto correcto de cualquier lenguaje que sea seleccionado. Este archivo debe tener exactamente las mismas claves en todos los idiomas.
- The `intro.json` file contains the key-value pairs for the introduction text on the certification pages. - El archivo `intro.json` contiene los pares clave-valor para el texto de introducción en las páginas de certificación.
If you want to add/update translations for the keys please [read this guide here](how-to-translate-files.md). Si quieres añadir/actualizar las traducciones para las claves por favor lee [esta guía aquí.](https://freecodecamp.crowdin.com/how-to-translate-files.md).
**Files NOT translated on our translations platform:** **Archivos que NO son traducidos en nuestra plataforma de traducciones:**
- The `motivation.json` files are not required to have the same quotes, compliments, or array length. Just the same JSON structure. - Los archivos `motivation.json` no requieren que tengan las mismas comillas, complementos o tamaños u orden. Simplemente la misma estructura JSON.
- The `trending.json` file contains the titles and links for the trending news articles in the website's footer. - El archivo `trending.json` contiene los títulos y enlaces para los artículos noticiosos en tendencia dentro del footer del sitio web.
- The `meta-tags.json` file contains the information for our website's meta tag information. - El archivo`meta-tags.json` contiene la información para nuestra informacion de la Meta etiqueta del sitio web.
Changes to these files are typically done by the staff team. If you see something out of the ordinary we recommend you reach us in the [contributors chat room](https://chat.freecodecamp.org/channel/contributors). Los cambios en estos archivos son usualmente realizados por nuestro personal. Si ves algo raro o fuera de lo normal, deberías comunicarte con nosotros en el [chat de colaboradores](https://chat.freecodecamp.org/channel/contributors).
## Testing the client app in a world language ## Probando la app cliente en un idioma mundial
You can test the client app in any language available in the [list of languages here](https://github.com/freeCodeCamp/freeCodeCamp/blob/6b4a6a02568b809fc216ea8566ff5df446d1da4e/config/i18n/all-langs.js#L5). Puedes probar la app cliente en cualquier lenguaje disponible en la [lista de idiomas aquí](https://github.com/freeCodeCamp/freeCodeCamp/blob/6b4a6a02568b809fc216ea8566ff5df446d1da4e/config/i18n/all-langs.js#L5).
```js ```js
const availableLangs = { const availableLangs = {

90
docs/i18n/espanol/how-to-work-on-the-component-library.md
View File

@ -1,31 +1,31 @@
Welcome to freeCodeCamp's `ui-components` library. The components are built mostly from scratch with basic HTML elements and [Tailwind CSS](https://tailwindcss.com/). Bienvenido a la librería `ui-components` de freeCodeCamp. Los componentes se construyen principalmente desde cero con elementos HTML básicos y [Tailwind CSS](https://tailwindcss.com/).
# How to Work on the Component Library # Cómo trabajar en la biblioteca de componentes
> [!NOTE] > [!NOTE]
> >
> freeCodeCamp has been using Bootstrap components in the UI. However, we are moving away from it and building our own component library, which helps standardize our UX/UI patterns and improve accessibility. The project is tracked in [this GitHub issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/44668). > freeCodeCamp ha estado usando componentes de Bootstrap en la interfaz de usuario. Sin embargo, nos estamos alejando de ella y construyendo nuestra propia biblioteca de componentes, lo que ayuda a estandarizar nuestros patrones UX/UI y a mejorar la accesibilidad. El proyecto está rastreado en [este problema de GitHub](https://github.com/freeCodeCamp/freeCodeCamp/issues/44668).
The following steps are recommended when working on a new component: Se recomiendan los siguientes pasos al trabajar en un nuevo componente:
- Research and planning - Investigación y planificación
- Implement the component - Implementar el componente
- Display the use cases on Storybook - Mostrar los casos de uso en el Storybook
- Write unit tests - Escribir pruebas unitarias
## Researching and planning ## Investigación y planificación
Before building a component, you need to research and document on how the existing version behaves and looks, to ensure that the new one has matching styles and supports all the current usages. In order to meet the web accessibility requirements, you should also pay attention to the accessibility aspect of the component, see which HTML elements and ARIA attributes are used under the hood. Antes de construir un componente, necesita investigar y documentar cómo se comporta y se ve la versión existente, para asegurarse de que el nuevo tiene estilos coincidentes y soporta todos los usos actuales. Para cumplir con los requisitos de accesibilidad web, también debe prestar atención al aspecto de accesibilidad del componente, ver qué elementos HTML y atributos ARIA se utilizan bajo el capó.
Once you have gathered enough information about the component, you can start thinking about the props interface. Ideally, the interface should be as similar to the current version as possible, to ease the adoption later on. Since we are using Bootstrap components, the simplest approach is to mimic [their implementation](https://github.com/react-bootstrap/react-bootstrap/tree/master/src). Una vez que haya reunido suficiente información sobre el componente, puede empezar a pensar en la interfaz de accesorios. Idealmente, la interfaz debe ser tan similar a la versión actual como sea posible, para facilitar la adopción más adelante. Puesto que estamos utilizando componentes de Bootstrap, el enfoque más simple es imitar [su implementación](https://github.com/react-bootstrap/react-bootstrap/tree/master/src).
We prefer smaller pull requests rather than a large one, because they speed up the review time and reduce cognitive overload for the reviewers. For that reason, you should think about how you would break down the implementation and come up with a delivery plan. Preferimos solicitudes de extracción más pequeñas que grandes porque aceleran el tiempo de revisión y reducen la sobrecarga cognitiva de los revisores. Por este motivo, debería pensar en cómo desglosar la aplicación y elaborar un plan de entrega.
We recommend opening a separate GitHub issue for each component and include all the notes in the issue description. It can be used as a place to host all of your working notes, as well as a way to communicate the approach with the reviewers. We will use the issue thread for further discussion if needed. [The issue for Button component](https://github.com/freeCodeCamp/freeCodeCamp/issues/45357) can be used as a reference. Recomendamos abrir un número separado de GitHub para cada componente e incluir todas las notas en la descripción de incidencias. Se puede utilizar como un lugar para alojar todas sus notas de trabajo, así como una forma de comunicar el enfoque con los revisores. Utilizaremos el tema para seguir debatiendo, si es necesario. [El problema para el componente Button](https://github.com/freeCodeCamp/freeCodeCamp/issues/45357) puede ser utilizado como referencia.
## Implementing the component ## Implementando el componente
A new component can be created using the following command from the root directory: Se puede crear un nuevo componente utilizando el siguiente comando desde el directorio raíz:
```bash ```bash
cd tools/ui-components cd tools/ui-components
@ -33,55 +33,55 @@ cd tools/ui-components
npm run gen-component MyComponent npm run gen-component MyComponent
``` ```
The command will generate a new folder inside the `ui-components` directory, with the following files: El comando generará una nueva carpeta dentro del directorio `ui-components`, con los siguientes archivos:
| File name | Purpose | | Nombre del archivo | Propósito |
| -------------------------- | ------------------------------------------------------ | | -------------------------- | ------------------------------------------------------------ |
| `index.ts` | It is used for exporting the component and its types. | | `index.ts` | Se utiliza para exportar el componente y sus tipos. |
| `my-component.stories.tsx` | It is used for demoing the component on Storybook. | | `my-component.stories.tsx` | Se utiliza para demostrar el componente en Storybook. |
| `my-component.test.tsx` | It is a test file. | | `my-component.test.tsx` | Se trata de un archivo de prueba. |
| `my-component.tsx` | It is where we implement the component. | | `my-component.tsx` | Ahí es donde aplicamos el componente. |
| `types.ts` | Is is where we locate component's interface and types. | | `types.ts` | Es donde localizamos la interfaz y los tipos del componente. |
Each component is different, but in general a component should: Cada componente es diferente, pero en general un componente debería:
- Support forwarding ref - Apoyar el reenvío de ref
- Be styled for both light and dark themes - Estilo tanto para temas claros como oscuros
- Be styled internally based on their props (the consumers should not need to restyle the component with the `className` prop) - Estilo internamente basado en sus accesorios (los consumidores no deben necesitar reponer el componente con el accesorio `className`)
- Utilize the built-in styling system from Tailwind instead of having custom styles - Utilizar el sistema de estilo incorporado desde Tailwind, en lugar de tener estilos personalizados
### Useful links ### Enlaces útiles
- [Tailwind CSS Configuration](https://tailwindcss.com/docs/configuration) - [Configuración de Tailwind CSS](https://tailwindcss.com/docs/configuration)
- [React Bootstrap v0.33 Docs](https://react-bootstrap-v3.netlify.app) - [Documentación de React Bootstrap v0.33](https://react-bootstrap-v3.netlify.app)
- [Bootstrap 3.3.7 stylesheet](https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css) - [Hoja de estilos de Bootstrap 3.3.7](https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css)
- [React Bootstrap current implementation](https://github.com/react-bootstrap/react-bootstrap/tree/master/src) - [Implementación actual de React Bootstrap](https://github.com/react-bootstrap/react-bootstrap/tree/master/src)
- [React Bootstrap current tests](https://github.com/react-bootstrap/react-bootstrap/tree/master/test) - [Pruebas actuales de React Bootstrap](https://github.com/react-bootstrap/react-bootstrap/tree/master/test)
## Displaying the use cases on Storybook ## Mostrar los casos de uso en el Storybook
Use cases of the component should be added to the Storybook file (`.stories.tsx`). Los casos de uso del componente deben añadirse al archivo Storybook (`.stories.tsx`).
To start Storybook, run the following command from the root directory: Para iniciar Storybook, ejecute el siguiente comando desde el directorio raíz:
```bash ```bash
npm run storybook npm run storybook
``` ```
The Storybook page is available on [http://localhost:6006](http://localhost:6006). La página de Storybook está disponible en [http://localhost:6006](http://localhost:6006).
## Writing unit tests ## Escribir pruebas unitarias
We use [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) to write unit tests. The tests should assert that the components behave as expected and are accessible. Utilizamos [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) para escribir pruebas unitarias. Las pruebas deben asegurar que los componentes se comportan como se espera y son accesibles.
To run tests against the component library, run the following command from the root directory: Para ejecutar pruebas contra la biblioteca de componentes, ejecute el siguiente comando desde el directorio root:
```bash ```bash
npm run test-ui-components npm run test-ui-components
``` ```
### Useful links ### Enlaces útiles
- [Testing for Accessibility](https://testing-library.com/docs/dom-testing-library/api-accessibility) - [Pruebas de Accesibilidad](https://testing-library.com/docs/dom-testing-library/api-accessibility)
- [Order of priority of React Testing Library's queries](https://testing-library.com/docs/queries/about/#priority) - [Orden de prioridad de las consultas de React Testing Library](https://testing-library.com/docs/queries/about/#priority)
- [Common mistakes with React Testing Library](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library) - [Errores comunes con React Testing Library](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library)