Merge branch 'apify:master' into feat/agno-integration

Author: ohlava

.github/styles/config/vocabularies/Docs/accept.txt

@@ -88,19 +88,20 @@ preconfigured
 
 devs
 asyncio
-Langflow
 backlinks?
 captchas?
 Chatbot
 combinator
 deduplicating
+dev
 Fakestore
 Fandom('s)?
 IMDb
 influencers
 iPads?
 iPhones?
 jQuery
+Langflow
 learnings
 livestreams
 outro

package-lock.json

@@ -57,7 +57,7 @@
         "fs-extra": "^11.1.1",
         "globals": "^16.0.0",
         "globby": "^14.0.0",
-        "markdownlint": "^0.37.0",
+        "markdownlint": "^0.38.0",
         "markdownlint-cli": "^0.44.0",
         "path-browserify": "^1.0.1",
         "patch-package": "^8.0.0",
@@ -66,7 +66,7 @@
         "typescript-eslint": "^8.29.1"
     },
     "dependencies": {
-        "@apify/ui-library": "^0.65.0",
+        "@apify/ui-library": "^0.66.0",
         "@docusaurus/core": "3.7.0",
         "@docusaurus/faster": "3.7.0",
         "@docusaurus/plugin-client-redirects": "3.7.0",

package.json

@@ -2,7 +2,6 @@
 title: Inspecting web pages with browser DevTools
 sidebar_label: "DevTools: Inspecting"
 description: Lesson about using the browser tools for developers to inspect and manipulate the structure of an e-commerce website.
-sidebar_position: 1
 slug: /scraping-basics-python/devtools-inspecting
 ---
 

sources/academy/webscraping/scraping_basics_python/01_devtools_inspecting.md

@@ -2,7 +2,6 @@
 title: Locating HTML elements on a web page with browser DevTools
 sidebar_label: "DevTools: Locating HTML elements"
 description: Lesson about using the browser tools for developers to manually find products on an e-commerce website.
-sidebar_position: 2
 slug: /scraping-basics-python/devtools-locating-elements
 ---
 
@@ -32,13 +31,13 @@ As mentioned in the previous lesson, before building a scraper, we need to under
 
 ![Warehouse store with DevTools open](./images/devtools-warehouse.png)
 
-The page displays a grid of product cards, each showing a product's name and picture. Open DevTools and locate the name of the **Sony SACS9 Active Subwoofer**. Highlight it in the **Elements** tab by clicking on it.
+The page displays a grid of product cards, each showing a product's title and picture. Open DevTools and locate the title of the **Sony SACS9 Active Subwoofer**. Highlight it in the **Elements** tab by clicking on it.
 
-![Selecting an element with DevTools](./images/devtools-product-name.png)
+![Selecting an element with DevTools](./images/devtools-product-title.png)
 
 Next, let's find all the elements containing details about this subwoofer—its price, number of reviews, image, and more.
 
-In the **Elements** tab, move your cursor up from the `a` element containing the subwoofer's name. On the way, hover over each element until you highlight the entire product card. Alternatively, use the arrow-up key. The `div` element you land on is the **parent element**, and all nested elements are its **child elements**.
+In the **Elements** tab, move your cursor up from the `a` element containing the subwoofer's title. On the way, hover over each element until you highlight the entire product card. Alternatively, use the arrow-up key. The `div` element you land on is the **parent element**, and all nested elements are its **child elements**.
 
 ![Selecting an element with hover](./images/devtools-hover-product.png)
 
@@ -66,13 +65,7 @@ document.querySelector('.product-item');
 
 It will return the HTML element for the first product card in the listing:
 
-![Using querySelector() in DevTools Console](./images/devtools-queryselector.png)
-
-:::note About the missing semicolon
-
-In the screenshot, there is a missing semicolon `;` at the end of the line. In JavaScript, semicolons are optional, so it doesn't make a difference here.
-
-:::
+![Using querySelector() in DevTools Console](./images/devtools-queryselector.webp)
 
 CSS selectors can get quite complex, but the basics are enough to scrape most of the Warehouse store. Let's cover two simple types and how they can combine.
 
@@ -167,9 +160,9 @@ On English Wikipedia's [Main Page](https://en.wikipedia.org/wiki/Main_Page), use
   1. Open the [Main Page](https://en.wikipedia.org/wiki/Main_Page).
   1. Activate the element selection tool in your DevTools.
   1. Click on several headings to examine the markup.
-  1. Notice that all headings are `h2` tags with the `mp-h2` class.
+  1. Notice that all headings are `h2` elements with the `mp-h2` class.
   1. In the **Console**, execute `document.querySelectorAll('h2')`.
-  1. At the time of writing, this selector returns 8 headings. Each corresponds to a box, and there are no other `h2` tags on the page. Thus, the selector is sufficient as is.
+  1. At the time of writing, this selector returns 8 headings. Each corresponds to a box, and there are no other `h2` elements on the page. Thus, the selector is sufficient as is.
 
 </details>
 
@@ -185,7 +178,7 @@ Go to Shein's [Jewelry & Accessories](https://shein.com/RecommendSelection/Jewel
   1. Visit the [Jewelry & Accessories](https://shein.com/RecommendSelection/Jewelry-Accessories-sc-017291431.html) page. Close any pop-ups or promotions.
   1. Activate the element selection tool in your DevTools.
   1. Click on the first product to inspect its markup. Repeat with a few others.
-  1. Observe that all products are `section` tags with multiple classes, including `product-card`.
+  1. Observe that all products are `section` elements with multiple classes, including `product-card`.
   1. Since `section` is a generic wrapper, focus on the `product-card` class.
   1. In the **Console**, execute `document.querySelectorAll('.product-card')`.
   1. At the time of writing, this selector returns 120 results, all representing products. No further narrowing is necessary.
@@ -206,7 +199,7 @@ Hint: Learn about the [descendant combinator](https://developer.mozilla.org/en-U
   1. Open the [page about F1](https://www.theguardian.com/sport/formulaone).
   1. Activate the element selection tool in your DevTools.
   1. Click on an article to inspect its structure. Check several articles, including the ones with smaller cards.
-  1. Note that all articles are `li` tags, but their classes (e.g., `dcr-1qmyfxi`) are dynamically generated and unreliable.
+  1. Note that all articles are `li` elements, but their classes (e.g., `dcr-1qmyfxi`) are dynamically generated and unreliable.
   1. Using `document.querySelectorAll('li')` returns too many results, including unrelated items like navigation links.
   1. Inspect the page structure. The `main` element contains the primary content, including articles. Use the descendant combinator to target `li` elements within `main`.
   1. In the **Console**, execute `document.querySelectorAll('main li')`.

sources/academy/webscraping/scraping_basics_python/02_devtools_locating_elements.md

@@ -2,7 +2,6 @@
 title: Extracting data from a web page with browser DevTools
 sidebar_label: "DevTools: Extracting data"
 description: Lesson about using the browser tools for developers to manually extract product data from an e-commerce website.
-sidebar_position: 3
 slug: /scraping-basics-python/devtools-extracting-data
 ---
 
@@ -127,7 +126,7 @@ On the Guardian's [F1 news page](https://www.theguardian.com/sport/formulaone),
   1. Open the [F1 news page](https://www.theguardian.com/sport/formulaone).
   1. Activate the element selection tool in your DevTools.
   1. Click on the first post.
-  1. Notice that the markup does not provide clear, reusable class names for this task. The structure uses generic tags and randomized classes, requiring you to rely on the element hierarchy and order instead.
+  1. Notice that the markup does not provide clear, reusable class names for this task. The structure uses generic tag names and randomized classes, requiring you to rely on the element hierarchy and order instead.
   1. In the **Console**, execute `post = document.querySelector('#maincontent ul li')`. This returns the element representing the first post.
   1. Extract the post's title by executing `post.querySelector('h3').textContent`.
   1. Extract the lead paragraph by executing `post.querySelector('span div').textContent`.

sources/academy/webscraping/scraping_basics_python/03_devtools_extracting_data.md

@@ -2,7 +2,6 @@
 title: Downloading HTML with Python
 sidebar_label: Downloading HTML
 description: Lesson about building a Python application for watching prices. Using the HTTPX library to download HTML code of a product listing page.
-sidebar_position: 4
 slug: /scraping-basics-python/downloading-html
 ---
 

sources/academy/webscraping/scraping_basics_python/04_downloading_html.md

@@ -2,7 +2,6 @@
 title: Parsing HTML with Python
 sidebar_label: Parsing HTML
 description: Lesson about building a Python application for watching prices. Using the Beautiful Soup library to parse HTML code of a product listing page.
-sidebar_position: 5
 slug: /scraping-basics-python/parsing-html
 ---
 
@@ -12,7 +11,7 @@ import Exercises from './_exercises.mdx';
 
 ---
 
-From lessons about browser DevTools we know that the HTML tags representing individual products have a `class` attribute which, among other values, contains `product-item`.
+From lessons about browser DevTools we know that the HTML elements representing individual products have a `class` attribute which, among other values, contains `product-item`.
 
 ![Products have the ‘product-item’ class](./images/product-item.png)
 
@@ -38,9 +37,9 @@ $ pip install beautifulsoup4
 Successfully installed beautifulsoup4-4.0.0 soupsieve-0.0
 ```
 
-Now let's use it for parsing the HTML. The `BeautifulSoup` object allows us to work with the HTML elements in a structured way. As a demonstration, we'll first get the `<h1>` tag, which represents the main heading of the page.
+Now let's use it for parsing the HTML. The `BeautifulSoup` object allows us to work with the HTML elements in a structured way. As a demonstration, we'll first get the `<h1>` element, which represents the main heading of the page.
 
-![Tag of the main heading](./images/h1.png)
+![Element of the main heading](./images/h1.png)
 
 Update your code to the following:
 
@@ -64,15 +63,15 @@ $ python main.py
 [<h1 class="collection__title heading h1">Sales</h1>]
 ```
 
-Our code lists all `<h1>` tags it can find on the page. It's the case that there's just one, so in the result we can see a list with a single item. What if we want to print just the text? Let's change the end of the program to the following:
+Our code lists all `h1` elements it can find on the page. It's the case that there's just one, so in the result we can see a list with a single item. What if we want to print just the text? Let's change the end of the program to the following:
 
 ```py
 headings = soup.select("h1")
 first_heading = headings[0]
 print(first_heading.text)
 ```
 
-If we run our scraper again, it prints the text of the first `<h1>` tag:
+If we run our scraper again, it prints the text of the first `h1` element:
 
 ```text
 $ python main.py
@@ -133,7 +132,7 @@ https://www.formula1.com/en/teams
 
   html_code = response.text
   soup = BeautifulSoup(html_code, "html.parser")
-  print(len(soup.select(".outline")))
+  print(len(soup.select(".group")))
   ```
 
 </details>
@@ -155,7 +154,7 @@ Use the same URL as in the previous exercise, but this time print a total count
 
   html_code = response.text
   soup = BeautifulSoup(html_code, "html.parser")
-  print(len(soup.select(".f1-grid")))
+  print(len(soup.select(".f1-team-driver-name")))
   ```
 
 </details>

sources/academy/webscraping/scraping_basics_python/05_parsing_html.md

@@ -2,7 +2,6 @@
 title: Locating HTML elements with Python
 sidebar_label: Locating HTML elements
 description: Lesson about building a Python application for watching prices. Using the Beautiful Soup library to locate products on the product listing page.
-sidebar_position: 6
 slug: /scraping-basics-python/locating-elements
 ---
 

sources/academy/webscraping/scraping_basics_python/06_locating_elements.md

@@ -2,7 +2,6 @@
 title: Extracting data from HTML with Python
 sidebar_label: Extracting data from HTML
 description: Lesson about building a Python application for watching prices. Using string manipulation to extract and clean data scraped from the product listing page.
-sidebar_position: 7
 slug: /scraping-basics-python/extracting-data
 ---
 
@@ -313,7 +312,7 @@ Max Verstappen wins Canadian Grand Prix: F1 – as it happened 2024-06-09
 
 Hints:
 
-- HTML's `<time>` tag can have an attribute `datetime`, which [contains data in a machine-readable format](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time), such as the ISO 8601.
+- HTML's `time` element can have an attribute `datetime`, which [contains data in a machine-readable format](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time), such as the ISO 8601.
 - Beautiful Soup gives you [access to attributes as if they were dictionary keys](https://beautiful-soup-4.readthedocs.io/en/latest/#attributes).
 - In Python you can create `datetime` objects using `datetime.fromisoformat()`, a [built-in method for parsing ISO 8601 strings](https://docs.python.org/3/library/datetime.html#datetime.datetime.fromisoformat).
 - To get just the date part, you can call `.date()` on any `datetime` object.