Add new til

Author: konekoya

js/use-object-hasown-to-check-properties-in-javascript.md

@@ -0,0 +1,58 @@
+# Use Object.hasOwn to check Object properties in JavaScript
+
+The `Object.hasOwn()` is a modern JavaScript feature that allows you to check if a given property exists in an object. It's recommended over the `Object.prototype.hasOwnProperty()` function since [it's safer and more intuitive](<https://igorgonchar.medium.com/javascript-hasown-new-way-to-check-if-object-has-property-b93810e47070#:~:text=The%20main%20difference%20is%20that,checks%20only%20the%20object%20itself.&text=hasOwnProperty()%20besides%20focusing%20only,also%20omits%20getters%20and%20setters.>)
+
+For example, if we have a custom object of a person:
+
+```js
+const person = {
+  name: 'John',
+  age: 24,
+  gender: 'male',
+  bloodType: 'O',
+};
+```
+
+We can use `Object.hasOwn()` function to check if the `bloodType` property is present in the `person` object:
+
+```js
+Object.hasOwn(person, 'bloodType'); // true
+```
+
+The above example would have the same result as calling `Object.proptype.hasOwnerProperty.call(person, 'bloodType');`. However, `Object.hasOwn()` is much shorter and more convenient to use.
+
+Here is another example of checking the property in a loop:
+
+```js
+const people = [
+  {
+    name: 'Carly',
+    yearOfBirth: 1942,
+    yearOfDeath: 1970,
+  },
+  {
+    name: 'Ray',
+    yearOfBirth: 1962,
+    yearOfDeath: 2011,
+  },
+  {
+    name: 'Jane',
+    yearOfBirth: 1912,
+    yearOfDeath: 1941,
+  },
+  {
+    name: 'Josh',
+    yearOfBirth: 1933,
+  },
+];
+
+const findTheOldest = (array) =>
+  array.filter((person) => Object.hasOwn(person, 'yearOfDeath'));
+
+console.log(findTheOldest(people));
+```
+
+References:
+
+- [Object.hasOwn()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn) - MDN docs
+- [JavaScript: hasOwn() — new way to check if Object has property](<https://igorgonchar.medium.com/javascript-hasown-new-way-to-check-if-object-has-property-b93810e47070#:~:text=The%20main%20difference%20is%20that,checks%20only%20the%20object%20itself.&text=hasOwnProperty()%20besides%20focusing%20only,also%20omits%20getters%20and%20setters.>)

python/use-playwright-codegen-to-automatically-record-ui-interactions.md renamed to python/use-playwright-codegen-to-automate-ui-interactions.md

@@ -1,36 +1,32 @@
-# Use Playwright Codegen to Automatically Record UI Interactions
+# Use Playwright Codegen to Automate UI Interactions
 
-Playwright has a neat feature of recording user interaction and automatically
-generate source code for you. This would save you a lot of time and automate many
-of your day to day work if the tasks can be done by a browser.
+Playwright has a useful codegen feature that allows you to record your user interactions and generate source code automatically, saving you time and effort in your day-to-day work. If your tasks can be completed through a browser, Codegen can automate them for you.
 
-The following example will show you how to record an UI operation that we visit
-the playwright.dev docs and search for this codegen feature and then move on to
-the next page:
+In the following example, we'll demonstrate how to record an UI interactions that involves visiting the playwright.dev documentation, searching for the Codegen feature docs and navigating to the next page.
 
-First, create a venv:
+To get started, create a virtual environment:
 
 ```sh
 python3 -m venv venv
 ```
 
-Then, install the package
+Next, install the `pytest-playwright` package:
 
 ```sh
 pip install pytest-playwright
 ```
 
-And run the codegen command:
+Then, run the codegen command:
 
 ```sh
 playwright codegen
 ```
 
-> Note that you might need to run `playwright install` command if you haven't installed any chromium browser on your machine before
+Note that if you haven't installed any Chromium browser on your machine before, you may need to run the `playwright install` command.
 
-After running the codegen, you should now have two browsers opened, one is the main chromium browser and the other is a UI for recorded actions.
+Once you've run the codegen, two browser windows should open - one main Chromium browser and an UI for recording your UI interactions.
 
-Here is a piece of code that's generated by the codegen after running thru the actions that we mentioned in the above:
+Here is an example of the code that is generated by the codegen after performing the actions mentioned above:
 
 ```py
 import time
@@ -54,10 +50,10 @@ def run(playwright: Playwright) -> None:
     page.get_by_role(
         "heading", name="Running CodegenDirect link to Running Codegen").click()
 
-    # The next page link is located in the bottom of the view
+    # The next page link is located at the bottom of the view
     page.mouse.wheel(0, 4000)
 
-    # These sleeps help to slow down the UI interactions so you can see what's actually done during the run
+    # These sleeps commands help to slow down the UI interactions, allowing you to observe what is happening during the run.
     time.sleep(2)
     page.locator(".pagination-nav__link--next").click()
 

readme.md

@@ -8,6 +8,7 @@ Inspired by [Josh Branchaud](https://dev.to/jbranchaud/how-i-built-a-learning-ma
 
 - [Get All Elements From a Form](js/get-all-elements-from-a-form.md)
 - [Convert NodeList and HTMLCollection to JS Array](js/convert-nodelist-and-htmlcollection-to-js-array.md)
+- [Use Object.hasOwn to check Object properties in JavaScript](js/use-object-hasown-to-check-properties-in-javascript.md)
 
 ## Python
 
@@ -16,7 +17,7 @@ Inspired by [Josh Branchaud](https://dev.to/jbranchaud/how-i-built-a-learning-ma
 - [Display Web Scraping Data with Pandas](/python/display-web-scraping-data-with-pandas.md)
 - [Scrape Data From an API Endpoint](/python/scrape-data-from-an-api-endpoint.md)
 - [Scrape Dynamic Data with Playwright](/python/scrape-dynamic-data-with-playwright.md)
-- [Use Playwright Codegen to Automatically Record UI Interactions](python/use-playwright-codegen-to-automatically-record-ui-interactions.md)
+- [Use Playwright Codegen to Automate UI Interactions](python/use-playwright-codegen-to-automate-ui-interactions.md)
 
 ## CSS