Merge branch 'source' into ptbr-translation

Author: mayconblopes

src/components/CompaniesBanner/CompaniesBanner.js

@@ -18,7 +18,7 @@ const partners = [
     url: 'https://www.helsinki.fi/',
   },
   {
-    image: { name: 'houston.svg', alt: 'Houston inc.' },
+    image: { name: 'houston2.svg', alt: 'Houston inc.' },
     url: 'https://www.houston-inc.com/careers',
   },
   {

src/components/IndexPage/index.js

@@ -14,7 +14,7 @@ import { SubHeader } from '../SubHeader/SubHeader';
 import { TripleBorder } from '../TripleBorder/TripleBorder';
 import cc from '../../images/cc.svg';
 import content from '../../content/pages/main.json';
-import houstonLogo from '../../images/Houston_big.svg';
+import houstonLogo from '../../images/Houston_big2.svg';
 import landingImage from '../../images/landing.svg';
 import licenceIcon from '../../images/cc-logo.png';
 import mainSEOdescription from '../../content/seo/mainSEOdescription';

src/components/layout.js

@@ -21,8 +21,7 @@ const Layout = props => {
   const [visible, setVisible] = useState(false);
 
   useEffect(() => {
-    const key = localStorage.getItem(BANNER_TO_KEY);
-    console.log(key);
+    const key = localStorage.getItem(BANNER_TO_KEY)
     if (!key) {
       setVisible(true);
     }
@@ -39,7 +38,7 @@ const Layout = props => {
 
       <Header lang={siteLanguage} />
 
-      <InfoBanner onHide={() => hideNote()} visible={visible} />
+      <InfoBanner onHide={() => hideNote()} visible={false} />
 
       <main id="main-content">{children}</main>
 

src/content/1/es/part1b.md

@@ -482,7 +482,7 @@ setTimeout(arto.greet.bind(arto), 1000)
 
 Al llamar a <em>arto.greet.bind(arto)</em> se crea una nueva función donde _this_ está obligado a apuntar a Arto, independientemente de dónde y cómo se llame al método.
 
-Usando [funciones de flecha](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) es posible resolver algunos de los problemas relacionados con _this_. Sin embargo, no deben usarse como métodos para objetos porque entonces _esto_ no funciona en absoluto. Más adelante volveremos al comportamiento de _este_ en relación con las funciones de flecha. 
+Usando [funciones de flecha](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) es posible resolver algunos de los problemas relacionados con _this_. Sin embargo, no deben usarse como métodos para objetos porque entonces _this_ no funciona en absoluto. Más adelante volveremos al comportamiento de _este_ en relación con las funciones de flecha. 
 
 Si desea obtener una mejor comprensión de cómo _this_ funciona en JavaScript, Internet está lleno de material sobre el tema, por ejemplo, la serie de screencasts [Comprender la palabra clave this de JavaScript en profundidad](https://egghead.io/courses/understand-javascript-s-this-keyword-in-depth) de [egghead.io](https://egghead.io) es muy recomendable. 
 

src/content/11/en/part11c.md

@@ -372,6 +372,18 @@ Set up the action to your workflow and ensure that every commit that pass all th
 ```bash
 https://dashboard.render.com/web/srv-crandomcharachtershere
 ```
+Alternatively you could just use [Render Deploy Hook](https://render.com/docs/deploy-hooks) which is a private url to trigger the deployment. You can get it from your app settings ![fsorender1](https://user-images.githubusercontent.com/47830671/230722899-1ebb414e-ae1e-4a5e-a7b8-f376c4f1ca4d.png). 
+DON'T USE the plain url in your pipeline. Instead create github secrets for your key and service id: ![fsorender2](https://user-images.githubusercontent.com/47830671/230723138-77d027be-3162-4697-987e-b654bc710187.png)
+Then you can use them like this: 
+``` bash
+    main:
+    name: Deploy to Render
+    runs-on: ubuntu-latest
+    steps:
+      - name: Trigger deployment
+        run: curl https://api.render.com/deploy/srv-${{ secrets.RENDER_SERVICE_ID }}?key=${{ secrets.RENDER_API_KEY }}
+```
+
 
 The deployment takes some time. See the events tab of the Render dashboard to see when the new deployment is ready:
 

src/content/12/en/part12a.md

@@ -188,7 +188,7 @@ The output contains a few new things for us to learn. <i>Docker daemon</i> is a
 ### Exercise 12.2
 
 Some of these exercises do not require you to write any code or configurations to a file.
-In these exercises you should use [script](https://man7.org/linux/man-pages/man1/script.1.html) command to record the commands you have used; try it yourself with _script_ to start recording, _echo "hello"_ to generate some output, and _exit_ to stop recording. It saves your actions into a file names "typescript" (that has nothing to do with the TypeScript programming language, the name is just a coincidence).
+In these exercises you should use [script](https://man7.org/linux/man-pages/man1/script.1.html) command to record the commands you have used; try it yourself with _script_ to start recording, _echo "hello"_ to generate some output, and _exit_ to stop recording. It saves your actions into a file named "typescript" (that has nothing to do with the TypeScript programming language, the name is just a coincidence).
 
 If _script_ does not work, you can just copy-paste all commands you used into a text file.
 

src/content/13/en/part13a.md

@@ -67,12 +67,14 @@ The reason why the the previous sections of the course used MongoDB is precisely
 
 ### Application database
 
-For our application we need a relational database. There are many options, but we will be using the currently most popular Open Source solution [PostgreSQL](https://www.postgresql.org/). You can install Postgres (as the database is often called) on your machine, if you wish to do so. An easier option would be using Postgres as a cloud service, e.g. [ElephantSQL](https://www.elephantsql.com/). You could also take advantage of the course [part 12](/en/part12) lessons and use Postgres locally using Docker.
+For our application we need a relational database. There are many options, but we will be using the currently most popular Open Source solution [PostgreSQL](https://www.postgresql.org/). You can install Postgres (as the database is often called) on your machine, if you wish to do so. An easier option would be using Postgres as a cloud service, e.g. [ElephantSQL](https://www.elephantsql.com/).
 
 However, we will be taking advantage of the fact that it is possible to create a Postgres database for the application on the Fly.io and Heroku cloud service platforms, which are familiar from the parts 3 and 4.
 
 In the theory material of this section, we will be building a Postgres-enabled version from the backend of the notes-storage application, which was built in sections 3 and 4.
 
+Since we don't need any database in the cloud in this part (we only use the application locally), there is a possibility to use the lessons of the course [part 12](/en/part12) and use Postgres locally with Docker. After the Postgres instructions for cloud services, we also give a short instruction on how to easily get Postgres up and running with Docker.
+
 #### Fly.io
 
 Let us create a new Fly.io-app by running the command _fly launch_ in a directory where we shall add the code of the app. Let us also create the Postgres database for the app:
@@ -130,6 +132,33 @@ Type "help" for help.
 postgres=#
 ```
 
+#### Docker
+
+This instruction assumes that you master the basic use of Docker to the extent taught by e.g. [part 12](/en/part12).
+
+Start Postgres [Docker image](https://hub.docker.com/_/postgres) with the command
+
+```bash
+docker run -e POSTGRES_PASSWORD=mysecretpassword -p 5432:5432 postgres
+```
+
+A psql console connection to the database can be opened using the _docker exec_ command. First you need to find out the id of the container:
+
+```bash
+$ docker ps
+CONTAINER ID   IMAGE      COMMAND                  CREATED          STATUS          PORTS                    NAMES
+ff3f49eadf27   postgres   "docker-entrypoint.s…"   31 minutes ago   Up 31 minutes   0.0.0.0:5432->5432/tcp   great_raman
+docker exec -it ff3f49eadf27 psql -U postgres postgres
+psql (15.2 (Debian 15.2-1.pgdg110+1))
+Type "help" for help.
+
+postgres=#
+```
+
+Defined in this way, the data stored in the database is persisted only as long as the container exists. The data can be preserved by defining a
+[volume](/en/part12/building_and_configuring_environments#persisting-data-with-volumes) fort the data, see more
+[here](https://github.com/docker-library/docs/blob/master/postgres/README.md#pgdata).
+
 #### Using the psql console
 
 Particularly when using a relational database, it is essential to access the database directly as well. There are many ways to do this, there are several different graphical user interfaces, such as [pgAdmin](https://www.pgadmin.org/). However, we will be using Postgres [psql](https://www.postgresql.org/docs/current/app-psql.html) command-line tool.
@@ -291,8 +320,7 @@ $ cat .env
 DATABASE_URL=postgres://<username>:<password>@ec2-54-83-137-206.compute-1.amazonaws.com:5432/<databasename>
 ```
 
-When using Fly.io, the local connection to the database should first be enabled by 
-[tunneling](https://fly.io/docs/reference/postgres/#connecting-to-postgres-from-outside-fly) 
+When using Fly.io, the local connection to the database should first be enabled by [tunneling](https://fly.io/docs/reference/postgres/#connecting-to-postgres-from-outside-fly) 
 the localhost port 5432 to the Fly.io database port using the following command
 
 ```bash
@@ -318,6 +346,12 @@ Password was shown when the database was created, so hopefully you have not lost
 
 The last part of the connect string, <i>postgres</i> refers to the database name. The name could be any string but we use here <i>postgres</i> since it is the default database that is automatically created within a Postgres database. If needed, new databases can be created with the command [CREATE DATABASE](https://www.postgresql.org/docs/14/sql-createdatabase.html).
 
+If you use Docker, the connect string is:
+
+```bash
+DATABASE_URL=postgres://postgres:mysecretpassword@localhost:5432/postgres
+```
+
 Once the connect string has been set up in the file <i>.env</i> we can test for a connection:
 
 ```bash

src/content/13/en/part13c.md

@@ -1514,6 +1514,6 @@ Once you have completed the exercises and want to get the credits, let us know t
 
 ![Submissions](../../images/11/21.png)
 
-**Note** that you need a registration to the corresponding course part for getting the credits registered, see [here](/part0/general_info#parts-and-completion) for more information.
+**Note** that you need a registration to the corresponding course part for getting the credits registered, see [here](/en/part0/general_info#parts-and-completion) for more information.
 
 </div>

src/content/13/fi/osa13a.md

@@ -66,12 +66,14 @@ Syy sille miksi kurssin aiemmat osat käyttivät MongoDB:tä liittyvät juuri se
 
 ### Sovelluksen tietokanta
 
-Tarvitsemme sovellustamme varten relaatiotietokannan. Vaihtoehtoja on monia, käytämme kurssilla tämän hetken suosituinta Open Source -ratkaisua [PostgreSQL:ää](https://www.postgresql.org/). Voit halutessasi asentaa Postgresin (kuten tietokantaa usein kutsutaan) koneellesi. Helpommalla pääset käyttämällä jotain pilvipalveluna tarjottavaa Postgresia, esim. [ElephantSQL:ää](https://www.elephantsql.com/). Voit myös hyödyntää kurssin [osan 12](/en/part12) oppeja ja käyttää Postgresia paikallisesti Dockerin avulla.
+Tarvitsemme sovellustamme varten relaatiotietokannan. Vaihtoehtoja on monia, käytämme kurssilla tämän hetken suosituinta Open Source -ratkaisua [PostgreSQL:ää](https://www.postgresql.org/). Voit halutessasi asentaa Postgresin (kuten tietokantaa usein kutsutaan) koneellesi. Helpommalla pääset käyttämällä jotain pilvipalveluna tarjottavaa Postgresia, esim. [ElephantSQL:ää](https://www.elephantsql.com/).
 
-Käytämme nyt kuitenkin hyväksemme sitä, että osista 3 ja 4 tuttuille pilvipalvelualustoille Fly.io ja Heroku on mahdollista luoda sovellukselle Postgres-tietokanta.
+Käytämme nyt hyväksemme sitä, että osista 3 ja 4 tuttuille pilvipalvelualustoille Fly.io ja Heroku on mahdollista luoda sovellukselle Postgres-tietokanta.
 
 Tämän osan teoriamateriaalissa rakennetaan osissa 3 ja 4 rakennetun muistiinpanoja tallettavan sovelluksen backendendistä Postgresia käyttävä versio.
 
+Koska emme tarvitse tässä osassa mihinkään pilvessä olevaa tietokantaa (käytämme sovellusta ainoastaan paikallisesti) on eräs mahdollisuus hyödyntää kurssin [osan 12](/en/part12) oppeja ja käyttää Postgresia paikallisesti Dockerin avulla. Pilvipalveluiden Postgresohjeiden jälkeen annamme myös lyhyen ohjeen miten Postgresin saa helposti pystyn Dockerin avulla.
+
 #### Fly.io
 
 Luodaan nyt sopivan hakemiston sisällä Fly.io-sovellus komennolla _fly launch_ ja luodaan sovellukselle Postgres-tietokanta:
@@ -124,6 +126,33 @@ Type "help" for help.
 postgres=# 
 ```
 
+#### Docker
+
+Tämä ohje olettaa, että hallitset Dockerin peruskäytön esim. [osan 12](/en/part12) opettamassa laajuudessa.
+
+Käynnistä Postgresin [Docker image](https://hub.docker.com/_/postgres) komennolla
+
+```bash
+docker run -e POSTGRES_PASSWORD=mysecretpassword -p 5432:5432 postgres
+```
+
+Tietokantaan saadaan psql-konsoliyhteys komennon _docker exec_ avulla. Ensin tulee selvittää kontainerin id:
+
+```bash
+$ docker ps
+CONTAINER ID   IMAGE      COMMAND                  CREATED          STATUS          PORTS                    NAMES
+ff3f49eadf27   postgres   "docker-entrypoint.s…"   31 minutes ago   Up 31 minutes   0.0.0.0:5432->5432/tcp   great_raman
+docker exec -it ff3f49eadf27 psql -U postgres postgres
+psql (15.2 (Debian 15.2-1.pgdg110+1))
+Type "help" for help.
+
+postgres=#
+```
+
+Näin määriteltynä tietokantaan talletettu data sailyy ainoastaan niin kauan kontti on olemassa. Data saadaan säilymään määrittelemällä datan talletukseen
+[volume](/en/part12/building_and_configuring_environments#persisting-data-with-volumes), katso lisää 
+[täältä](https://github.com/docker-library/docs/blob/master/postgres/README.md#pgdata).
+
 #### psql-konsolin käyttöä
 
 Erityisesti relaatiotietokantaa käytettäessä on oleellista päästä tietokantaan käsiksi myös suoraan. Tapoja tähän on monia, on olemassa mm. useita erilaisia graafisia käyttöliittymiä, kuten [pgAdmin](https://www.pgadmin.org/). Käytetää nnyt kuitenkin Postgresin [psql](https://www.postgresql.org/docs/current/app-psql.html)-komentorivityökalua.
@@ -303,6 +332,12 @@ DATABASE_URL=postgres://postgres:<password>@localhost:5432/postgres
 
 Salasana on se, jonka on otettu talteen tietokantaa luodessa.
 
+Dockeria käytettäessä connect string on:
+
+```bash
+DATABASE_URL=postgres://postgres:mysecretpassword@localhost:5432/postgres
+```
+
 Connect stringin viimeinen osa <i>postgres</i> viittaa käytettävään tietokannan nimeen. Nyt se on valmiiksi luotava ja oletusarvoisesti käytössä oleva <i>postgres</i>-niminen tietokanta. Komennolla [CREATE DATABASE](https://www.postgresql.org/docs/14/sql-createdatabase.html) on tarvittaessa mahdollista luoda muita tietokantoja Postgres-tietokantainstanssiin.
 
 Kun connect string on määritety tiedostoon <i>.env</i> voidaan kokeilla muodostuuko yhteys:

src/content/2/en/part2a.md

@@ -213,7 +213,7 @@ Even though the application seems to be working, there is a nasty warning in the
 
 ![unique key prop console error](../../images/2/1a.png)
 
-As the linked [React page](https://reactjs.org/docs/lists-and-keys.html#keys) in the error message suggests; the list items, i.e. the elements generated by the _map_ method, must each have a unique key value:  an attribute called <i>key</i>.
+As the linked [React page](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key) in the error message suggests; the list items, i.e. the elements generated by the _map_ method, must each have a unique key value:  an attribute called <i>key</i>.
 
 Let's add the keys:
 
@@ -238,7 +238,7 @@ const App = (props) => {
 
 And the error message disappears.
 
-React uses the key attributes of objects in an array to determine how to update the view generated by a component when the component is re-rendered. More about this is in the [React documentation](https://reactjs.org/docs/reconciliation.html#recursing-on-children).
+React uses the key attributes of objects in an array to determine how to update the view generated by a component when the component is re-rendered. More about this is in the [React documentation](https://react.dev/learn/preserving-and-resetting-state#option-2-resetting-state-with-a-key).
 
 ### Map
 
@@ -348,7 +348,7 @@ As such, one way to define the row generation without getting errors is:
 </ul>
 ```
 
-This is; however, **not recommended** and can create undesired problems even if it seems to be working just fine.
+This is, however, **not recommended** and can create undesired problems even if it seems to be working just fine.
 
 Read more about this in [this article](https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318).