5c fixes

Author: mluukkai

src/content/5/en/part5b.md

@@ -573,14 +573,6 @@ const Blog = ({ blog }) => {
 
 #### 5.8: Blog List Frontend, step 8
 
-We notice that something is wrong. When a new blog is created in the app, the name of the user that added the blog is not shown in its details:
-
-![browser showing missing name underneath like button](../../images/5/59new.png)
-
-When the browser is reloaded, the information of the person is displayed. This is not acceptable, find out where the problem is and make the necessary correction.
-
-#### 5.9: Blog List Frontend, step 9
-
 Implement the functionality for the like button. Likes are increased by making an HTTP _PUT_ request to the unique address of the blog post in the backend.
 
 Since the backend operation replaces the entire blog post, you will have to send all of its fields in the request body. If you wanted to add a like to the following blog post:
@@ -614,7 +606,15 @@ You would have to make an HTTP PUT request to the address <i>/api/blogs/5a43fde2
 
 The backend has to be updated too to handle the user reference.
 
-**One last warning:** if you notice that you are using async/await and the _then_-method in the same code, it is almost certain that you are doing something wrong. Stick to using one or the other, and never use both at the same time "just in case".
+#### 5.9: Blog List Frontend, step 9
+
+We notice that something is wrong. When a blog is liked in the app, the name of the user that added the blog is not shown in its details:
+
+![browser showing missing name underneath like button](../../images/5/59put.png)
+
+When the browser is reloaded, the information of the person is displayed. This is not acceptable, find out where the problem is and make the necessary correction.
+
+Of course, it is possible that you have already done everything correctly and the problem does not occur in your code. In that case, you can move on.
 
 #### 5.10: Blog List Frontend, step 10
 
@@ -768,6 +768,7 @@ Let's create [.eslintignore](https://eslint.org/docs/latest/use/configure/ignore
 node_modules
 dist
 .eslintrc.cjs
+vite.config.js
 ```
 
 Now the directories <em>dist</em> and <em>node_modules</em> will be skipped when linting.

src/content/5/en/part5c.md

@@ -510,7 +510,7 @@ const NoteForm = ({ createNote }) => {
     event.preventDefault()
     createNote({
       content: newNote,
-      important: Math.random() > 0.5,
+      important: true,
     })
 
     setNewNote('')

src/content/5/fi/osa5b.md

@@ -7,8 +7,6 @@ lang: fi
 
 <div class="content">
 
-### Kirjautumislomakkeen näyttäminen vain tarvittaessa
-
 Muutetaan sovellusta siten, että kirjautumislomaketta ei oletusarvoisesti näytetä:
 
 ![Oletusarvoisesti sovellus näytää ainoastaan muistiinpanojen listan sekä napin "log in"](../../images/5/10e.png)
@@ -569,19 +567,9 @@ const Blog = ({ blog }) => {
 )}
 ```
 
-**Huom 1:** Voit tehdä blogin nimestä klikattavan korostetun koodirivin tapaan.
-
-**Huom 2:** Vaikka tämän tehtävän toiminnallisuus on melkein samanlainen kuin komponentin <i>Togglable</i> tarjoama toiminnallisuus, ei Togglable kuitenkaan sovi tarkoitukseen sellaisenaan. Helpoin ratkaisu lienee lisätä blogille tila, joka kontrolloi sitä missä muodossa blogi näytetään.
-
-#### 5.8*: blogilistan frontend, step8
-
-Huomaamme, että jotain on pielessä. Kun sovellukseen lisätään uusi blogi, ei blogin lisääjän nimeä näytetä blogin tarkempien tietojen joukossa:
-
-![](../../images/5/59new.png)
-
-Kun selain uudelleenladataan, lisääjän tieto tulee näkyviin. Tämä ei ole hyväksyttävää, selvitä missä vika on ja tee tarvittava korjaus.
+**Huom:** Vaikka tämän tehtävän toiminnallisuus on melkein samanlainen kuin komponentin <i>Togglable</i> tarjoama toiminnallisuus, ei Togglable kuitenkaan sovi tarkoitukseen sellaisenaan. Helpoin ratkaisu lienee lisätä blogille tila, joka kontrolloi sitä missä muodossa blogi näytetään.
 
-#### 5.9: blogilistan frontend, step9
+#### 5.8: blogilistan frontend, step8
 
 Toteuta like-painikkeen toiminnallisuus. Like lisätään backendiin blogin yksilöivään urliin tapahtuvalla _PUT_-pyynnöllä.
 
@@ -614,7 +602,15 @@ tulee palvelimelle tehdä PUT-pyyntö osoitteeseen <i>/api/blogs/5a43fde2cbd20b1
 }
 ```
 
-**Varoitus vielä kerran:** Jos huomaat kirjoittavasi sekaisin async/awaitia ja _then_-kutsuja, on 99.9-prosenttisen varmaa, että teet jotain väärin. Käytä siis jompaa kumpaa tapaa, älä missään tapauksessa "varalta" molempia.
+#### 5.9*: blogilistan frontend, step9
+
+Huomaamme, että jotain on pielessä. Kun blogia liketetään, ei blogin lisääjän nimeä näytetä enää blogin tarkempien tietojen joukossa:
+
+![](../../images/5/59put.png)
+
+Kun selain uudelleenladataan, lisääjän tieto tulee näkyviin. Tämä ei ole hyväksyttävää, selvitä missä vika on ja tee tarvittava korjaus.
+
+On toki mahdollista, että olet jo tehnyt kaiken oikein, ja ongelmaa ei koodissasi ilmene. Tässä tapauksessa voit siirtyä eteenpäin.
 
 #### 5.10: blogilistan frontend, step10
 
@@ -768,6 +764,7 @@ Tehdään projektin juureen tiedosto [.eslintignore](https://eslint.org/docs/use
 node_modules
 dist
 .eslintrc.cjs
+vite.config.js
 ```
 
 Näin ainoastaan sovelluksessa oleva itse kirjoitettu koodi huomioidaan linttauksessa. 

src/content/5/fi/osa5c.md

@@ -514,7 +514,7 @@ const NoteForm = ({ createNote }) => {
     event.preventDefault()
     createNote({
       content: newNote,
-      important: Math.random() > 0.5,
+      important: true,
     })
 
     setNewNote('')
@@ -726,7 +726,7 @@ const input = container.querySelector('#note-input')
 
 Jätämme koodiin placeholderiin perustuvan ratkaisun.
 
-Vielä muutama tärkeä huomio. Jos komponentti renderöisi samaan HTML-elementtiin tekstiä seuraavasti:
+Vielä muutama tärkeä huomio. Oletetaan että komponentti renderöisi samaan HTML-elementtiin tekstiä seuraavasti:
 
 ```js
 const Note = ({ note, toggleImportance }) => {
@@ -744,7 +744,7 @@ const Note = ({ note, toggleImportance }) => {
 export default Note
 ```
 
-Ei testissä käyttämämme _getByText_ löydä elementtiä:
+Nyt testissä käyttämämme _getByText_ ei löydä elementtiä:
 
 ```js 
 test('renders content', () => {

src/content/5/fi/osa5e.md

@@ -11,6 +11,8 @@ lang: fi
 
 Kirjastojen vertailuista on kirjoitettu monia blojeja, esim. [tämä](https://www.lambdatest.com/blog/cypress-vs-playwright/) ja [tämä](https://www.browserstack.com/guide/playwright-vs-cypress).
 
+On vaikea sanoa kumpi kirjastoista on parempi. Eräs Playwrightin etu on sen selaintuki, Playwright tukee Chromea, Firefoxia ja Webkit-pohjaisia selaimia kuten Safaria. Nykyisin Cypress sisältää tuen kaikkiin näihin selaimiin, Webkit-tuki on tosin vasta kokeellinen ja ei tue kaikkia Cypressin ominaisuuksia.
+
 Tutustutaan nyt Playwrightin käyttöön.
 
 ### Testien alustaminen