Skip to content

Commit

Permalink
chore(i18n,learn): processed translations (#90)
Browse files Browse the repository at this point in the history
  • Loading branch information
camperbot authored Oct 23, 2024
1 parent 319a979 commit e248161
Show file tree
Hide file tree
Showing 60 changed files with 1,779 additions and 1,560 deletions.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ dashedName: step-14

You have styled three elements by writing CSS inside the `style` tags. This works, but since there will be many more styles, it's best to put all the styles in a separate file and link to it.

Hemos creado un archivo separado `styles.css` por ti y cambiamos la vista del editor a ese archivo. Puedes moverte entre los archivos mediante las pestañas en la parte superior del editor.
A separate `styles.css` file has been created for you and the editor view has been switched to that file. Puedes moverte entre los archivos mediante las pestañas en la parte superior del editor.

Comienza reescribiendo, los estilos que ya has creado, en el archivo `styles.css`. Asegúrate de excluir las etiquetas `style` de apertura y cierre.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@ During the development process, it is important to be able to check what’s goi

Node is just a JavaScript environment. Like client side JavaScript, you can use the console to display useful debug information. On your local machine, you would see console output in a terminal. On Gitpod, a terminal is open at the bottom of the editor by default.

We recommend to keep the terminal open while working at these challenges. By reading the output in the terminal, you can see any errors that may occur.
It is recommended to keep the terminal open while working at these challenges. By reading the output in the terminal, you can see any errors that may occur.

The server must be restarted after making changes to its files.

You can stop the server from the terminal using `Ctrl + C` and start it using Node directly (`node mainEntryFile.js`) or using a run script in the `package.json` file with `npm run`.

For example, the `"start": "node server.js"` script would be run from the terminal using `npm run start`.

To implement server auto restarting on file save Node provides the `--watch` flag you can add to your start script `"start": "node --watch server.js"` or you can install an npm package like `nodemon`. We will leave this to you as an exercise.
To implement server auto restarting on file save Node provides the `--watch` flag you can add to your start script `"start": "node --watch server.js"` or you can install a npm package like `nodemon`. This will be left to you as an exercise.

# --instructions--

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ dashedName: start-a-working-express-server

# --description--

In the first two lines of the file `myApp.js`, you can see how easy it is to create an Express app object. This object has several methods, and you will learn many of them in these challenges. One fundamental method is `app.listen(port)`. It tells your server to listen on a given port, putting it in running state. For testing reasons, we need the app to be running in the background so we added this method in the `server.js` file for you.
In the first two lines of the file `myApp.js`, you can see how easy it is to create an Express app object. This object has several methods, and you will learn many of them in these challenges. One fundamental method is `app.listen(port)`. It tells your server to listen on a given port, putting it in running state. For testing reasons, the app needs to be running in the background, so this method has been added in the `server.js` file for you.

¡Sirvamos nuestra primer cadena! En Express, las rutas toman la siguiente estructura: `app.METHOD(PATH, HANDLER)`. METHOD es un método http en minúsculas. PATH es una ruta relativa en el servidor (puede ser una cadena, o incluso una expresión regular). HANDLER es una función que Express llama cuando la ruta coincide. Los Handlers toman la forma `function(req, res) {...}`, donde req es el objeto de la solicitud, y res es el objeto de respuesta. Por ejemplo, el handler
¡Sirvamos nuestra primer cadena! En Express, las rutas toman la siguiente estructura: `app.METHOD(PATH, HANDLER)`. METHOD is an HTTP method in lowercase. PATH es una ruta relativa en el servidor (puede ser una cadena, o incluso una expresión regular). HANDLER es una función que Express llama cuando la ruta coincide. Los Handlers toman la forma `function(req, res) {...}`, donde req es el objeto de la solicitud, y res es el objeto de respuesta. Por ejemplo, el handler

```js
function(req, res) {
Expand All @@ -24,7 +24,7 @@ servirá la cadena 'Response String'.

Utiliza el método `app.get()` para servir la cadena "Hello Express" a las peticiones GET que coincidan con la ruta `/` (raíz). Asegúrate de que tu código funciona mirando los registros, luego mira los resultados en la vista previa si estás usando Gitpod.

**Nota:** Todo el código de estas lecciones debe añadirse entre las pocas líneas de código con las que hemos iniciado.
**Note:** All the code for these lessons should be added in between the few lines of code that have been written for you.

# --hints--

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,15 @@ dashedName: serve-an-html-file

# --description--

You can respond to requests with a file using the `res.sendFile(path)` method. You can put it inside the `app.get('/', ...)` route handler. Behind the scenes, this method will set the appropriate headers to instruct your browser on how to handle the file you want to send, according to its type. Then it will read and send the file. This method needs an absolute file path. We recommend you to use the Node global variable `__dirname` to calculate the path like this:
You can respond to requests with a file using the `res.sendFile(path)` method. You can put it inside the `app.get('/', ...)` route handler. Behind the scenes, this method will set the appropriate headers to instruct your browser on how to handle the file you want to send, according to its type. Then it will read and send the file. This method needs an absolute file path. It's recommended that you use the Node global variable `__dirname` to calculate the path like this:

```js
absolutePath = __dirname + '/relativePath/file.ext'
```

# --instructions--

Envía el archivo `/views/index.html` como respuesta a las solicitudes GET a la ruta `/`. Si ves tu aplicación en vivo, debes ver un gran encabezado HTML (y un formulario que usaremos más adelante…), sin ningún estilo aplicado.
Envía el archivo `/views/index.html` como respuesta a las solicitudes GET a la ruta `/`. If you view your live app, you should see a big HTML heading (and a form that you will use later…), with no style applied.

**Nota:** Puedes editar la solución del desafío anterior o crear uno nuevo. Si creas una nueva solución, ten en cuenta que Express evalúa las rutas de arriba a abajo, y ejecuta el manejador para la primera coincidencia. Tienes que comentar la solución anterior, o el servidor seguirá respondiendo con una cadena.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ An HTML server usually has one or more directories that are accessible by the us

En Express, puedes poner en marcha esta funcionalidad utilizando el middleware `express.static(path)`, donde el parámetro `path` es la ruta absoluta de la carpeta que contiene los recursos.

Si no sabes qué es middleware... no te preocupes, hablaremos en detalle más adelante. Básicamente, middleware son funciones que interceptan los manejadores de rutas, añadiendo algún tipo de información. Un middleware necesita ser montado usando el método `app.use(path, middlewareFunction)`. El primer argumento de `path` es opcional. Si no lo pasas, el middleware se ejecutará para todas las peticiones.
If you don’t know what middleware is... don’t worry, this will be discussed in detail later. Básicamente, middleware son funciones que interceptan los manejadores de rutas, añadiendo algún tipo de información. Un middleware necesita ser montado usando el método `app.use(path, middlewareFunction)`. El primer argumento de `path` es opcional. Si no lo pasas, el middleware se ejecutará para todas las peticiones.

# --instructions--

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ dashedName: serve-json-on-a-specific-route

While an HTML server serves HTML, an API serves data. A <dfn>REST</dfn> (REpresentational State Transfer) API allows data exchange in a simple way, without the need for clients to know any detail about the server. The client only needs to know where the resource is (the URL), and the action it wants to perform on it (the verb). The GET verb is used when you are fetching some information, without modifying anything. These days, the preferred data format for moving information around the web is JSON. Simply put, JSON is a convenient way to represent a JavaScript object as a string, so it can be easily transmitted.

Vamos a crear una API simple creando una ruta que responda con JSON en la ruta `/json`. Puedes hacerlo como de costumbre, con el método `app.get()`. Dentro del manejador de ruta, utiliza el método `res.json()`, pasando un objeto como argumento. Este método cierra el bucle de solicitud y respuesta, devolviendo los datos. Tras bambalinas, convierte un objeto JavaScript en una cadena, luego establece las cabeceras apropiadas para decirle a tu navegador que está sirviendo JSON, y devuelve los datos. Un objeto válido tiene la estructura habitual `{key: data}`. `data` puede ser un número, una cadena de texto, un objeto anidado o un arreglo. `data` también puede ser una variable o el resultado de una llamada a una función, en cuyo caso será evaluado antes de ser convertido en una cadena de texto.
The first thing you will create is a simple API. Create a route that responds with JSON at the path `/json`. Puedes hacerlo como de costumbre, con el método `app.get()`. Dentro del manejador de ruta, utiliza el método `res.json()`, pasando un objeto como argumento. Este método cierra el bucle de solicitud y respuesta, devolviendo los datos. Tras bambalinas, convierte un objeto JavaScript en una cadena, luego establece las cabeceras apropiadas para decirle a tu navegador que está sirviendo JSON, y devuelve los datos. Un objeto válido tiene la estructura habitual `{key: data}`. `data` puede ser un número, una cadena de texto, un objeto anidado o un arreglo. `data` también puede ser una variable o el resultado de una llamada a una función, en cuyo caso será evaluado antes de ser convertido en una cadena de texto.

# --instructions--

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Las variables de entorno son accesibles desde la aplicación como `process.env.V

# --instructions--

Añadamos una variable de entorno como opción de configuración.
For this challenge you should add an environment variable as a configuration option.

Crea un archivo `.env` en la raíz del directorio de tu proyecto y almacena la variable `MESSAGE_STYLE=uppercase` en él.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ app.get('/user', function(req, res, next) {
});
```

This approach is useful to split the server operations into smaller units. That leads to a better app structure, and the possibility to reuse code in different places. This approach can also be used to perform some validation on the data. At each point of the middleware stack you can block the execution of the current chain and pass control to functions specifically designed to handle errors. Or you can pass control to the next matching route, to handle special cases. We will see how in the advanced Express section.
This approach is useful to split the server operations into smaller units. That leads to a better app structure, and the possibility to reuse code in different places. This approach can also be used to perform some validation on the data. At each point of the middleware stack you can block the execution of the current chain and pass control to functions specifically designed to handle errors.

# --instructions--

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ dashedName: get-route-parameter-input-from-the-client

# --description--

When building an API, we have to allow users to communicate to us what they want to get from our service. For example, if the client is requesting information about a user stored in the database, they need a way to let us know which user they're interested in. One possible way to achieve this result is by using route parameters. Route parameters are named segments of the URL, delimited by slashes (/). Each segment captures the value of the part of the URL which matches its position. The captured values can be found in the `req.params` object.
When building an API, you have to allow users to communicate to us what they want to get from our service. For example, if the client is requesting information about a user stored in the database, they need a way to let us know which user they're interested in. One possible way to achieve this result is by using route parameters. Route parameters are named segments of the URL, delimited by slashes (/). Each segment captures the value of the part of the URL which matches its position. The captured values can be found in the `req.params` object.

<blockquote>route_path: '/user/:userId/book/:bookId'<br>actual_request_URL: '/user/546/book/6754' <br>req.params: {userId: '546', bookId: '6754'}</blockquote>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ dashedName: get-data-from-post-requests

# --description--

Mount a POST handler at the path `/name`. It’s the same path as before. We have prepared a form in the html frontpage. It will submit the same data of exercise 10 (Query string). If the body-parser is configured correctly, you should find the parameters in the object `req.body`. Have a look at the usual library example:
Mount a POST handler at the path `/name`. It’s the same path as before. A form has been prepared in the html frontpage. It will submit the same data of exercise 10 (Query string). If the body-parser is configured correctly, you should find the parameters in the object `req.body`. Have a look at the usual library example:

<blockquote>route: POST '/library'<br>urlencoded_body: userId=546&#x26;bookId=6754 <br>req.body: {userId: '546', bookId: '6754'}</blockquote>

Responde con el mismo objeto JSON que antes: `{name: 'firstname lastname'}`. Prueba si tu endpoint funciona usando el formulario html que proporcionamos en la página principal de la aplicación.
Responde con el mismo objeto JSON que antes: `{name: 'firstname lastname'}`. Test if your endpoint works using the html form provided in the app frontpage.

Nota: Hay varios métodos de http diferentes a GET y POST. Y por convención hay una correspondencia entre el verbo http y la operación que se va a ejecutar en el servidor. La asignación convencional es:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ dashedName: use-the-caret-character-to-use-the-latest-minor-version-of-a-depende

# --description--

Similar to how the tilde we learned about in the last challenge allows npm to install the latest PATCH for a dependency, the caret (`^`) allows npm to install future updates as well. The difference is that the caret will allow both MINOR updates and PATCHes.
Similar to how the tilde you learned about in the last challenge allows npm to install the latest PATCH for a dependency, the caret (`^`) allows npm to install future updates as well. The difference is that the caret will allow both MINOR updates and PATCHes.

Your current version of `@freecodecamp/example` should be `~1.2.13` which allows npm to install to the latest `1.2.x` version. If you were to use the caret (^) as a version prefix instead, npm would be allowed to update to any `1.x.x` version.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ dashedName: step-23

# --description--

Now we can add the horizontal spacing using `flex`. In your `p` selector, add a `display` property set to `flex` and a `justify-content` property set to `space-between`.
Now you can add the horizontal spacing using `flex`. In your `p` selector, add a `display` property set to `flex` and a `justify-content` property set to `space-between`.

# --hints--

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ dashedName: step-10

# --description--

It's time to test each of the functions. You can use any of the recipes for this, but let's start with `recipe1`.
It's time to test each of the functions. You can use any of the recipes for this, but this tutorial will start with `recipe1`.

Create three new variables: `recipe1AverageRating`, `recipe1TotalIngredients`, and `recipe1DifficultyLevel`. Assign them the values by calling the corresponding function for each variable and passing in the appropriate `recipe1` property.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ dashedName: step-5

# --description--

Before we move on, you should practice how to access properties from an object.
Before you move on, you should practice how to access properties from an object.

You can use either dot (`.`) or bracket (`[]`) notation to do this. Here's an example:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Margin is the area outside of the box, and can be used to control the space betw

Here the bottom element has a larger top margin, pushing it further down the page.

Now that you quickly reviewed the CSS box model, let's get started on the Rothko painting.
Now that you quickly reviewed the CSS box model, it's time to get started on the Rothko painting.

Remove the `<img>` element.

Expand Down
Loading

0 comments on commit e248161

Please sign in to comment.