Update "Focusing: focus/blur" files

Author: odsantos

2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.view/my.css

@@ -20,6 +20,6 @@
 }
 
 .edit:focus {
-  outline: none;
   /* remove focus border in Safari */
+  outline: none;
 }

2-ui/4-forms-controls/2-focus-blur/3-editable-div/source.view/my.css

@@ -20,6 +20,6 @@
 }
 
 .edit:focus {
-  outline: none;
   /* remove focus border in Safari */
+  outline: none;
 }

2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/my.css

@@ -3,14 +3,15 @@
   margin: 0;
   padding: 0;
   display: block;
-  resize: none;
+  
   /* remove resizing handle in Firefox */
+  resize: none;
 
-  outline: none;
   /* remove outline on focus in Chrome */
+  outline: none;
 
-  overflow: auto;
   /* remove scrollbar in IE */
+  overflow: auto;
 }
 
 .edit-controls {

2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md

@@ -1,5 +1,5 @@
 
-We can use `mouse.onclick` to handle the click and make the mouse "moveable" with `position:fixed`, then then `mouse.onkeydown` to handle arrow keys.
+We can use `mouse.onclick` to handle the click and make the mouse "moveable" with `position:fixed`, then `mouse.onkeydown` to handle arrow keys.
 
 The only pitfall is that `keydown` only triggers on elements with focus. So we need to add `tabindex` to the element.  As we're forbidden to change HTML, we can use `mouse.tabIndex` property for that.
 

2-ui/4-forms-controls/2-focus-blur/article.md

@@ -2,13 +2,13 @@
 
 An element receives the focus when the user either clicks on it or uses the `key:Tab` key on the keyboard. There's also an `autofocus` HTML attribute that puts the focus onto an element by default when a page loads and other means of getting the focus.
 
-Focusing generally means: "prepare to accept the data here", so that's the moment when we can run the code to initialize or load something.
+Focusing on an element generally means: "prepare to accept the data here", so that's the moment when we can run the code to initialize the required functionality.
 
 The moment of losing the focus ("blur") can be even more important. That's when a user clicks somewhere else or presses `key:Tab` to go to the next form field, or there are other means as well.
 
 Losing the focus generally means: "the data has been entered", so we can run the code to check it or even to save it to the server and so on.
 
-There are important peculiarities when working with focus events. We'll do the best to cover them here.
+There are important peculiarities when working with focus events. We'll do the best to cover them further on.
 
 ## Events focus/blur
 
@@ -90,6 +90,8 @@ If we enter something into the input and then try to use `key:Tab` or click away
 
 Please note that we can't "prevent losing focus" by calling `event.preventDefault()` in `onblur`, because `onblur` works *after* the element lost the focus.
 
+In practice though, one should think well, before implementing something like this, because we generally *should show errors* to the user, but *should not prevent their progress* in filling our form. They may want to fill other fields first.
+
 ```warn header="JavaScript-initiated focus loss"
 A focus loss can occur for many reasons.
 
@@ -208,7 +210,6 @@ So here's another working variant:
 
 <script>
 *!*
-  // put the handler on capturing phase (last argument true)
   form.addEventListener("focusin", () => form.classList.add('focused'));
   form.addEventListener("focusout", () => form.classList.remove('focused'));
 */!*