part 1d

Author: pablo-maff

src/content/1/en/part1d.md

@@ -224,7 +224,7 @@ const handleLeftClick = () => {
 }
 ```
 
-However, __don't__ do this. As mentioned previously, the state of React components like _allClicks_ must not be mutated directly. Even if mutating state appears to work in some cases, it can lead to problems that are very hard to debug.
+However, __don't__ do this. As mentioned previously, the state of React components, like _allClicks_, must not be mutated directly. Even if mutating state appears to work in some cases, it can lead to problems that are very hard to debug.
 
 Let's take a closer look at how the clicking is rendered to the page:
 
@@ -244,7 +244,7 @@ const App = () => {
 }
 ```
 
-We call the [join](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join) method on the _allClicks_ array that joins all the items into a single string, separated by the string passed as the function parameter, which in our case is an empty space.
+We call the [join](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join) method on the _allClicks_ array, that joins all the items into a single string, separated by the string passed as the function parameter, which in our case is an empty space.
 
 ### Update of the state is asynchronous
 
@@ -476,7 +476,7 @@ If and when your code fails to compile and your browser lights up like a Christm
 ![screenshot of error pointing at the code line where it has been generated](../../images/1/6x.png)
 
 don't write more code but rather find and fix the problem **immediately**. There has yet to be a moment in the history of coding where code that fails to compile would miraculously start working after writing large amounts of additional code. I highly doubt that such an event will transpire during this course either.
-  
+
 Old-school, print-based debugging is always a good idea. If the component
 
 ```js
@@ -1134,29 +1134,29 @@ Personally, I mainly use Copilot, which integrates seamlessly with VS Code thank
 
 Copilot is useful in a wide variety of scenarios. Copilot can be asked to generate code for an open file by describing the desired functionality in text:
 
-![](../../images/1/gpt1.png)
+![copilot input on vscode](../../images/1/gpt1.png)
 
 If the code looks good, Copilot adds it to the file:
 
-![](../../images/1/gpt2.png)
+![code added by copilot](../../images/1/gpt2.png)
 
 In the case of our example, Copilot only created a button, the event handler _handleResetClick_ is undefined.
 
 An event handler may also be generated. By writing the first line of the function, Copilot offers the functionality to be generated:
 
-![](../../images/1/gpt3.png)
+![copilot´s code suggestion](../../images/1/gpt3.png)
 
 In Copilot's chat window, it is possible to ask for an explanation of the function of the painted code area:
 
-![](../../images/1/gpt4.png)
+![copilot explaining how the selected code works in the chat window](../../images/1/gpt4.png)
 
 Copilot is also useful in error situations, by copying the error message into Copilot's chat, you will get an explanation of the problem and a suggested fix:
 
-![](../../images/1/gpt5.png)
+![copilot explaining the error and suggesting a fix](../../images/1/gpt5.png)
 
 Copilot's chat also enables the creation of larger set of functionality
 
-![](../../images/1/gpt6.png)
+![copilot creating a login component on request](../../images/1/gpt6.png)
 
 The degree of usefulness of the hints provided by Copilot and other language models varies. Perhaps the biggest problem with language models is [hallucination](https://en.wikipedia.org/wiki/Hallucination_(artificial_intelligence)), they sometimes generate completely convincing-looking answers, which, however, are completely wrong. When programming, of course, the hallucinated code is often caught quickly if the code does not work. More problematic situations are those where the code generated by the language model seems to work, but it contains more difficult to detect bugs or e.g. security vulnerabilities.
 
@@ -1168,7 +1168,7 @@ The rapid development of language models puts the student of programming in a ch
 
 At this point, it is worth remembering the old wisdom of  [Brian Kerningham](https://en.wikipedia.org/wiki/Brian_Kernighan), the developer of the programming language C:
 
-![](../../images/1/kerningham.png)
+![Everyone knows that debugging is twice as hard as writing a program in the first place. So if you're as clever as you can be when you write it, how will you ever debug it? ― Brian Kernighan](../../images/1/kerningham.png)
 
 In other words, since debugging is twice as difficult as programming, it is not worth programming such code that you can only barely understand. How can debugging be even possible in a situation where programming is outsourced to a language model and the software developer does not understand the debugged code at all?
 
@@ -1200,7 +1200,7 @@ If and <i>when</i> you encounter an error message
 
 keep in mind the things told [here](/en/part1/introduction_to_react#do-not-render-objects).
 
-<h4> 1.6: unicafe step1</h4>
+<h4> 1.6: unicafe step 1</h4>
 
 Like most companies, the student restaurant of the University of Helsinki [Unicafe](https://www.unicafe.fi) collects feedback from its customers. Your task is to implement a web application for collecting customer feedback. There are only three options for feedback: <i>good</i>, <i>neutral</i>, and <i>bad</i>.
 
@@ -1242,13 +1242,13 @@ const App = () => {
 export default App
 ```
 
-<h4>1.7: unicafe step2</h4>
+<h4>1.7: unicafe step 2</h4>
 
 Expand your application so that it shows more statistics about the gathered feedback: the total number of collected feedback, the average score (good: 1, neutral: 0, bad: -1) and the percentage of positive feedback.
 
 ![average and percentage positive screenshot feedback](../../images/1/14e.png)
 
-<h4>1.8: unicafe step3</h4>
+<h4>1.8: unicafe step 3</h4>
 
 Refactor your application so that displaying the statistics is extracted into its own <i>Statistics</i> component. The state of the application should remain in the <i>App</i> root component.
 
@@ -1276,13 +1276,13 @@ const App = () => {
 }
 ```
 
-<h4>1.9: unicafe step4</h4>
+<h4>1.9: unicafe step 4</h4>
 
 Change your application to display statistics only once feedback has been gathered.
 
 ![no feedback given text screenshot](../../images/1/15e.png)
 
-<h4>1.10: unicafe step5</h4>
+<h4>1.10: unicafe step 5</h4>
 
 Let's continue refactoring the application. Extract the following two components:
 
@@ -1309,7 +1309,7 @@ const Statistics = (props) => {
 
 The application's state should still be kept in the root <i>App</i> component.
 
-<h4>1.11*: unicafe step6</h4>
+<h4>1.11*: unicafe step 6</h4>
 
 Display the statistics in an HTML [table](https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics), so that your application looks roughly like this:
 
@@ -1321,11 +1321,11 @@ Remember to keep your console open at all times. If you see this warning in your
 
 Then perform the necessary actions to make the warning disappear. Try pasting the error message into a search engine if you get stuck.
 
-<i>Typical source of an error _Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist._ is Chrome extension. Try going to _chrome://extensions/_ and try disabling them one by one and refreshing React app page; the error should eventually disappear.</i>
+<i>Typical source of an error _Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist._ is from a Chrome extension. Try going to _chrome://extensions/_ and try disabling them one by one and refreshing React app page; the error should eventually disappear.</i>
 
 **Make sure that from now on you don't see any warnings in your console!**
 
-<h4>1.12*: anecdotes step1</h4>
+<h4>1.12*: anecdotes step 1</h4>
 
 The world of software engineering is filled with [anecdotes](http://www.comp.nus.edu.sg/~damithch/pages/SE-quotes.htm) that distill timeless truths from our field into short one-liners.
 
@@ -1366,7 +1366,7 @@ Your finished application could look something like this:
 
 ![random anecdote with next button](../../images/1/18a.png)
 
-<h4>1.13*: anecdotes step2</h4>
+<h4>1.13*: anecdotes step 2</h4>
 
 Expand your application so that you can vote for the displayed anecdote.
 
@@ -1396,7 +1396,7 @@ copy[2] += 1
 
 Using an array might be the simpler choice in this case. Searching the Internet will provide you with lots of hints on how to [create a zero-filled array of the desired length](https://stackoverflow.com/questions/20222501/how-to-create-a-zero-filled-javascript-array-of-arbitrary-length/22209781).
 
-<h4>1.14*: anecdotes step3</h4>
+<h4>1.14*: anecdotes step 3</h4>
 
 Now implement the final version of the application that displays the anecdote with the largest number of votes: