Merge branch 'source' into patch-1

Author: mluukkai

gatsby-config.js

@@ -16,7 +16,7 @@ const createSearchConfig = (indexName, language) => {
                 letter
                 part
               }
-              id      
+              id
               rawMarkdownBody
             }
           }
@@ -43,6 +43,7 @@ const createSearchConfig = (indexName, language) => {
 const plugins = [
   createSearchConfig('finnish', 'fi'),
   createSearchConfig('english', 'en'),
+  createSearchConfig('spanish', 'es'),
   createSearchConfig('chinese', 'zh'),
   createSearchConfig('portuguese', 'ptbr'),
   {

src/components/Navigation/Navigation.js

@@ -37,7 +37,7 @@ export const getNavigation = (language, t) => {
 };
 
 const searchIsEnabledForLang = lang => {
-  return ['fi', 'en', 'zh', 'ptbr'].includes(lang);
+  return ['fi', 'en', 'es', 'zh', 'ptbr'].includes(lang);
 };
 
 const handleCloseMenu = () =>

src/content/0/en/part0a.md

@@ -341,6 +341,7 @@ Despite changes *all the submitted exercises remain valid*, and the course can b
 Recent major changes
 
 - Parts 1-9 (11th September - 5th October): Create React app replaced with Vite
+- Part 11 (16th January 2024): Example project dependencies updated
 
 ### Expanding on a previously completed course
 

src/content/0/es/part0a.md

@@ -334,7 +334,7 @@ La transcripción te será entregada electrónicamente por correo electrónico.
 
 ### No hay más versiones anuales
 
-No hay más "versiones anuales" del curso, el curso está abierto todo el tiempo. Cada parte se actualiza una o dos veces al año. Las actualizaciones son en su mayoría menores: se actualizan las versiones de las bibliotecas y se mejora la claridad del texto. Sin embargo, también puede haber algunos cambios más significativos.
+No hay más "versiones anuales" del curso, el curso está abierto todo el tiempo. Cada parte se actualiza una o dos veces al año. Las actualizaciones son en su mayoría menores: se actualizan las versiones de las librerías y se mejora la claridad del texto. Sin embargo, también puede haber algunos cambios más significativos.
 
 A pesar de los cambios *todos los ejercicios enviados siguen siendo válidos*, y puedes continuar el curso sin preocuparte por las actualizaciones. Además, la política para obtener certificados, créditos universitarios, etc., seguirá siendo la misma, sin importar lo que suceda.
 

src/content/0/es/part0b.md

@@ -118,7 +118,7 @@ Escribir HTML en medio del código no es muy inteligente, pero para los programa
 
 En las aplicaciones web tradicionales, el navegador es "tonto". Solo obtiene datos HTML del servidor, y toda la lógica de la aplicación reside en el servidor. Un servidor puede ser creado utilizando [Java Spring](https://spring.io/projects/spring-framework), [Python Flask](https://flask.palletsprojects.com/en/2.2.x/), o [Ruby on Rails](http://rubyonrails.org/), por mencionar solo algunos ejemplos.
 
-El ejemplo utiliza la biblioteca [Express](https://expressjs.com/) con Node.js. Este curso utilizará Node.js y Express para crear servidores web.
+El ejemplo utiliza la librería [Express](https://expressjs.com/) con Node.js. Este curso utilizará Node.js y Express para crear servidores web.
 
 ### Ejecución de la lógica de la aplicación en el navegador
 
@@ -584,8 +584,8 @@ El auge de las aplicaciones de una sola página trajo varias formas más "modern
 
 Sin embargo, la popularidad de Angular se desplomó después de que el [equipo de Angular anunció que el soporte para la versión 1 terminaría](https://web.archive.org/web/20151208002550/https://jaxenter.com/angular-2-0-announcement-backfires-112127.html), y que Angular 2 no sería retrocompatible con la primera versión. Angular 2 y las versiones más nuevas no recibieron una bienvenida muy cálida.
 
-Actualmente, la herramienta más popular para implementar la lógica del lado del navegador en las aplicaciones web es la biblioteca [React](https://react.dev/) de Facebook.
-Durante este curso, nos familiarizaremos con React y la biblioteca [Redux](https://github.com/reactjs/redux), que se usan juntos con frecuencia.
+Actualmente, la herramienta más popular para implementar la lógica del lado del navegador en las aplicaciones web es la librería [React](https://react.dev/) de Facebook.
+Durante este curso, nos familiarizaremos con React y la librería [Redux](https://github.com/reactjs/redux), que se usan juntos con frecuencia.
 
 El estado de React parece sólido, pero el mundo de JavaScript cambia constantemente. Por ejemplo, recientemente un recién llegado -[VueJS](https://vuejs.org/)- ha estado captando cierto interés.
 

src/content/0/fi/osa0a.md

@@ -164,7 +164,7 @@ Koe tehdään tehtävien palautusjärjestelmässä. Pääset tekemään kokeen s
 
 ![](../../images/0/enroll1.png)
 
-Tallettaa Helsingin Yliopiston opiskelijanumerosi [palautussovellukseen](https://studies.cs.helsinki.fi/stats/myinfo) ilmoittautumisen jälkeen:
+Tallenna Helsingin Yliopiston opiskelijanumerosi [palautussovellukseen](https://studies.cs.helsinki.fi/stats/myinfo) ilmoittautumisen jälkeen:
 
 ![](../../images/0/28b.png)
 
@@ -283,6 +283,7 @@ Muutoksista huolimatta <i>kaikki jo tehdyt palautukset säilyvät voimassa</i>,
 
 Viimeaikaisia isompia muutoksia
 - Osat 1-9 (11.9-5.10.2023): Create React app korvattu Vitellä
+- Osa 11 (16.1.2024): Esimerkkiprojektin riippuvuudet päivitetty
 
 ### Aiemmin suoritetun kurssin täydentäminen
 

src/content/0/fi/osa0b.md

@@ -17,7 +17,7 @@ Avataan selaimella [esimerkkisovellus](https://studies.cs.helsinki.fi/exampleapp
 
 Kurssimateriaali olettaa, että käytössä on Chrome-selain.
 
-**Web-sovelluskehityksen sääntö numero yksi**: pidä selaimen Developer-konsoli koko ajan auki. Konsoli avautuu Macilla painamalla yhtä aikaa _alt_ _cmd_ ja _i_. Windowsilla konsolin saa auki painamalla _F12_ tai yhtä aikaa _ctrl_ _shift_ ja _i_.
+**Web-sovelluskehityksen sääntö numero yksi**: pidä selaimen Developer-konsoli koko ajan auki. Konsoli avautuu Macilla painamalla yhtä aikaa _option_ _cmd_ ja _i_. Windowsilla konsolin saa auki painamalla _F12_ tai yhtä aikaa _ctrl_ _shift_ ja _i_.
 
 Ennen kuin jatkat eteenpäin, selvitä, miten saat koneellasi konsolin auki (googlaa tarvittaessa), ja muista pitää se auki <i>aina</i>, kun teet web-sovelluksia.
 
@@ -479,7 +479,7 @@ Ennen AJAX:in aikakautta jokainen sivu toimi aiemmassa luvussa olevan [perinteis
 
 Muistiinpanojen sivu siis lataa näytettävän datan AJAX:illa. Lomakkeen lähetys sen sijaan tapahtuu perinteisen web-lomakkeen lähetysmekanismin kautta.
 
-Sovelluksen urlit heijastavat vanhaa, huoletonta aikaa. JSON-muotoinen data haetaan urlista <https://studies.cs.helsinki.fi/exampleapp/data.json>, ja uuden muistiinpanon tiedot lähetetään urliin <https://studies.cs.helsinki.fi/exampleapp/new_note>. Nykyään näin valittuja urleja ei pidetä ollenkaan hyvinä – ne eivät noudata ns. [RESTful](https://en.wikipedia.org/wiki/Representational_state_transfer#Applied_to_Web_services)-apien yleisesti hyväksyttyjä konventioita. Käsittelemme asiaa tarkemmin [osassa 3](/osa3).
+Sovelluksen urlit heijastavat vanhaa, huoletonta aikaa. JSON-muotoinen data haetaan urlista <https://studies.cs.helsinki.fi/exampleapp/data.json>, ja uuden muistiinpanon tiedot lähetetään urliin <https://studies.cs.helsinki.fi/exampleapp/new_note>. Nykyään näin valittuja urleja ei pidetä ollenkaan hyvinä – ne eivät noudata ns. [RESTful](https://en.wikipedia.org/wiki/REST#Applied_to_web_services)-apien yleisesti hyväksyttyjä konventioita. Käsittelemme asiaa tarkemmin [osassa 3](/osa3).
 
 AJAXiksi kutsuttu asia on arkipäiväistynyt ja muuttunut itsestäänselvyydeksi. Koko termi on hiipunut unholaan, ja nuori polvi ei ole sitä edes ikinä kuullut.
 
@@ -506,7 +506,7 @@ Avaa nyt <i>Network</i>-välilehti ja tyhjennä se &#x29B8;-symbolilla. Kun luot
 
 ![](../../images/0/26e.png)
 
-Pyyntö kohdistuu osoitteeseen <i>new_note_spa</i>, on tyypiltään POST ja se sisältää JSON-muodossa olevan uuden muistiinpanon, johon kuuluu sekä sisältö (<i>content</i>) että aikaleima (<i>date</i>):
+Pyyntö kohdistuu osoitteeseen <i>new\_note\_spa</i>, on tyypiltään POST ja se sisältää JSON-muodossa olevan uuden muistiinpanon, johon kuuluu sekä sisältö (<i>content</i>) että aikaleima (<i>date</i>):
 
 ```js
 {
@@ -521,7 +521,7 @@ Pyyntöön liitetty headeri <i>Content-Type</i> kertoo palvelimelle, että pyynn
 
 Ilman headeria palvelin ei osaisi parsia pyynnön mukana tulevaa dataa oikein.
 
-Palvelin vastaa kyselyyn statuskoodilla [201 created](https://httpstatuses.com/201). Tällä kertaa palvelin ei pyydä uudelleenohjausta kuten aiemmassa versiossamme. Selain pysyy samalla sivulla, ja muita HTTP-pyyntöjä ei suoriteta.
+Palvelin vastaa kyselyyn statuskoodilla [201 created](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/201). Tällä kertaa palvelin ei pyydä uudelleenohjausta kuten aiemmassa versiossamme. Selain pysyy samalla sivulla, ja muita HTTP-pyyntöjä ei suoriteta.
 
 Ohjelman Single Page App ‑versiossa lomakkeen tietoja ei lähetetä selaimen normaalin lomakkeiden lähetysmekanismin avulla. Lähettämisen hoitaa selaimen lataamassa JavaScript-tiedostossa määritelty koodi. Katsotaan hieman koodia, vaikka yksityiskohdista ei tarvitse nytkään välittää liikaa.
 
@@ -563,7 +563,7 @@ var sendToServer = function(note) {
 
 Koodissa siis määritellään, että kyse on HTTP POST ‑pyynnöstä, että headerin <i>Content-type</i> avulla lähetettävän datan tyyppi on JSON ja että data lähetetään JSON-merkkijonona.
 
-Sovelluksen koodi on osoitteessa <https://github.com/mluukkai/example_app>. Kannattaa huomata, että sovellus on tarkoitettu ainoastaan kurssin käsitteistöä demonstroivaksi esimerkiksi. Koodi on osin tyyliltään huonoa, ja siitä ei tule ottaa mallia omia sovelluksia tehdessä. Sama koskee käytettyjä urleja, Single Page App ‑tyyliä noudattavan sivun käyttämä uusien muistiinpanojen kohdeosoite <i>new_note_spa</i> ei noudata nykyisin suositeltavia käytäntöjä.
+Sovelluksen koodi on osoitteessa <https://github.com/mluukkai/example_app>. Kannattaa huomata, että sovellus on tarkoitettu ainoastaan kurssin käsitteistöä demonstroivaksi esimerkiksi. Koodi on osin tyyliltään huonoa, ja siitä ei tule ottaa mallia omia sovelluksia tehdessä. Sama koskee käytettyjä urleja, Single Page App ‑tyyliä noudattavan sivun käyttämä uusien muistiinpanojen kohdeosoite <i>new\_note\_spa</i> ei noudata nykyisin suositeltavia käytäntöjä.
 
 ### JavaScript-kirjastot
 
@@ -585,7 +585,7 @@ Reactin asema näyttää tällä hetkellä vahvalta, mutta JavaScript-maailma ei
 
 Mitä tarkoitetaan kurssin nimellä <i>Full stack ‑web-sovelluskehitys</i>? Full stack on hypenomainen termi – kaikki puhuvat siitä, mutta kukaan ei oikein tiedä, mitä se tarkoittaa, tai ainakaan mitään yhteneväistä määritelmää termille ei ole.
 
-Käytännössä kaikki web-sovellukset sisältävät (ainakin) kaksi "kerrosta" ylempänä eli lähempänä loppukäyttäjää olevan selaimen ja alla olevan palvelimen. Palvelimen alapuolella on usein vielä tietokanta. Näin websovelluksen <i>arkkitehtuurin</i> voi ajatella muodostavan pinon, englanniksi <i>stack</i>.
+Käytännössä kaikki web-sovellukset sisältävät (ainakin) kaksi "kerrosta". Ylin kerros on lähempänä loppukäyttäjää oleva selain, joka suorittaa JavaScript-koodin ja renderöi sovelluksen HTML:n. Alempi kerros taas on sivuston tiedostot sisältämä palvelin. Palvelimen alapuolella on usein vielä tietokanta. Näin websovelluksen <i>arkkitehtuurin</i> voi ajatella muodostavan pinon, englanniksi <i>stack</i>.
 
 Web-sovelluskehityksen yhteydessä puhutaan usein myös "frontista" ([frontend](https://en.wikipedia.org/wiki/Front_and_back_ends)) ja "backistä" ([backend](https://en.wikipedia.org/wiki/Front_and_back_ends)). Selain on frontend, ja selaimessa suoritettava JavaScript on frontend-koodia. Palvelimella taas pyörii backend-koodi.
 
@@ -687,7 +687,7 @@ Kirjoita tarvittaessa palvelimella tai selaimessa tapahtuvat operaatiot sopivina
 
 Kaavion ei ole pakko olla sekvenssikaavio. Mikä tahansa järkevä kuvaustapa käy.
 
-Voit tehdä kaaviot, millä ohjelmistolla haluat, mutta suositeltava tapa on tehdä ne suoraan GitHubiin Markdown- eli md-päätteisiksi tiedostoiksi käyttäen [Mermaid](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams)-syntaksia.
+Voit tehdä kaaviot millä ohjelmistolla haluat, mutta suositeltava tapa on tehdä ne suoraan GitHubiin Markdown- eli md-päätteisiksi tiedostoiksi käyttäen [Mermaid](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams)-syntaksia.
 
 Kaikki oleellinen tieto tämän ja seuraavien kahden tehtävän tekemiseen on [tässä osassa](../osa0). Näiden tehtävien ideana on, että luet tekstin vielä kerran ja mietit tarkkaan, mitä missäkin tapahtuu. Ohjelman [koodin](https://github.com/mluukkai/example_app) lukemista ei näissä tehtävissä edellytetä, vaikka sekin on toki mahdollista.
 

src/content/0/fr/part0a.md

@@ -340,7 +340,7 @@ Ne codez pas avec nano, Notepad ou Gedit. NetBeans n'est pas non plus très bon
 
 Installez également [Node.js](https://nodejs.org/en/). Le matériel a été réalisé avec la version 16.13.2, n'installez donc aucune version antérieure à celle-ci. Voir [Instructions d'installation de Node.js](https://nodejs.org/en/download/package-manager/).
 
-Le gestionnaire de packages de nœuds [npm](https://www.npmjs.com/get-npm) sera automatiquement installé avec Node.js. Nous utiliserons activement npm tout au long du cours. Node est également fourni avec [npx](https://www.npmjs.com/package/npx), dont nous aurons besoin plusieurs fois.
+Le gestionnaire de packages de noeuds [npm](https://www.npmjs.com/get-npm) sera automatiquement installé avec Node.js. Nous utiliserons activement npm tout au long du cours. Node est également fourni avec [npx](https://www.npmjs.com/package/npx), dont nous aurons besoin plusieurs fois.
 
 ### Fautes de frappe dans le matériel
 

src/content/0/fr/part0b.md

@@ -303,7 +303,7 @@ Document Object Model, ou [DOM](https://en.wikipedia.org/wiki/Document_Object_Mo
 
 Le code JavaScript introduit dans le chapitre précédent utilisait l'API DOM pour ajouter une liste de notes à la page.
 
-Le code suivant crée un nouveau nœud pour la variable <em>ul</em> et y ajoute des nœuds enfants :
+Le code suivant crée un nouveau noeud pour la variable <em>ul</em> et y ajoute des noeuds enfants :
 
 ```js
 var ul = document.createElement('ul')
@@ -323,7 +323,7 @@ document.getElementById('notes').appendChild(ul)
 
 ### Manipulation du l'objet document depuis la console
 
-Le nœud le plus haut de l'arborescence DOM d'un document HTML est appelé l'objet <em>document</em>. Nous pouvons effectuer diverses opérations sur une page Web à l'aide de l'API DOM. Vous pouvez accéder à l'objet <em>document</em> en tapant <em>document</em> dans l'onglet Console :
+Le noeud le plus haut de l'arborescence DOM d'un document HTML est appelé l'objet <em>document</em>. Nous pouvons effectuer diverses opérations sur une page Web à l'aide de l'API DOM. Vous pouvez accéder à l'objet <em>document</em> en tapant <em>document</em> dans l'onglet Console :
 
 ![](../../images/0/15e.png)
 

src/content/0/ptbr/part0b.md

@@ -511,7 +511,7 @@ Abra a guia <i>Rede (Network)</i> e esvazie-a. Quando você criar uma nova nota,
 
 ![Guia Rede nas Ferramentas do Desenvolvedor](../../images/0/26e.png)
 
-A requisição POST para o endereço <i>new_note_spa</i> contém a nova nota como dados JSON, contendo tanto o conteúdo da nota (<i>content</i>) quanto o timestamp (<i>date</i>):
+A requisição POST para o endereço <i>new\_note\_spa</i> contém a nova nota como dados JSON, contendo tanto o conteúdo da nota (<i>content</i>) quanto o timestamp (<i>date</i>):
 
 ```js
 {