DEV Community: Marcos

How to Optimize SQL Queries by Understanding the SQL Execution Order

Marcos — Wed, 31 Jul 2024 20:33:26 +0000

If you find yourself watching the clock more than your query results, it's time to dive deep into the SQL Execution Order—a hidden gem in database optimization.

SQL (Structured Query Language) is one of the essentials in the domain of database management for giving all users command and communication with relational databases.

The crux of mastering this technique lies in the execution order of the SQL query, which is a thing to be must known by the user.

This not only demystifies how the SQL statements are processed but also opens up venues for query optimization to assure efficient and faster database operation.

The execution order in SQL defines the sequence in which the SQL engine processes parts of the query. This predefined order is critical for optimizing performance. Let's break down a typical SQL query to illustrate this process:

SELECT DISTINCT column, AGG_FUNC(column_or_expression), …
FROM mytable
    JOIN another_table
      ON mytable.column = another_table.column
    WHERE constraint_expression
    GROUP BY column
    HAVING constraint_expression
    ORDER BY column ASC/DESC
    LIMIT count OFFSET COUNT;

FROMand JOIN: This initial step assembles the data landscape, collating rows from multiple tables into a working dataset.
WHERE: Acts as a gatekeeper, filtering the dataset early to exclude non-conforming rows, which is crucial for minimizing the data volume for subsequent operations.
GROUP BY: Organizes data into meaningful clusters, a prerequisite for aggregate computations.
HAVING: Further narrows down data, but on an aggregated level, ensuring only relevant groupings proceed.
SELECT: Here, the actual data selection occurs, applying transformations and calculations as defined.
DISTINCT: Refines the output by eliminating duplicates, ensuring the uniqueness of each row in the result set.
ORDER BY: Orders the data, facilitating a structured and interpretable output.
LIMIT / OFFSET: Precisely slices the result set, an essential feature for handling paginated data.

Understanding the execution order is more than an academic exercise; it's a practical tool for query optimization. Here’s how:

Strategic Filtering with WHERE: Knowing that WHERE executes early allows for aggressive filtering, reducing the data footprint from the get-go and enhancing subsequent operation speeds.
Informed Indexing: Awareness of how JOINs and WHERE clauses are processed first informs strategic indexing, drastically cutting down query times by ensuring quick data retrieval.
Optimized Aggregation with GROUP BY: Recognizing GROUP BY's placement after WHERE hints at the efficiency gains from reducing dataset sizes before grouping, thus speeding up aggregate computations.
Selective Column Selection: Understanding that SELECT operates later in the sequence underscores the importance of minimizing selected columns to those strictly necessary, reducing the computational load.

Optimization Strategies

Armed with this execution order, several strategies emerge for query optimization:

Indexing can dramatically speed up data retrieval, especially in WHERE and JOIN clauses.
Selective Aggregation reduces computational load by limiting aggregate functions to necessary columns.
Efficient Joins ensure database engines execute them most effectively, based on a thorough understanding of JOIN operations.
Early Filtering with the WHERE clause minimizes subsequent data processing, enhancing performance.

Application of stated strategies will lead to great efficiency and performance in database interaction, which will eventually reflect in smooth user experience with less operational costs.

This is so invaluable to any software developer and database administrator, in such a way that it helps in the optimization of interactions taking place with the database or efficient handling of data.

How Beautiful Soup is used to extract data out of the Public Web

Marcos — Wed, 31 Jul 2024 16:25:29 +0000

Beautiful Soup is a Python library used to scrape data from web pages. It creates a parse tree for parsing HTML and XML documents, making it easy to extract the desired information.

Beautiful Soup provides several key functionalities for web scraping:

Navigating the Parse Tree: You can easily navigate the parse tree and search for elements, tags, and attributes.
Modifying the Parse Tree: It allows you to modify the parse tree, including adding, removing, and updating tags and attributes.
Output Formatting: You can convert the parse tree back into a string, making it easy to save the modified content.

To use Beautiful Soup, you need to install the library along with a parser such as lxml or html.parser. You can install them using pip

#Install Beautiful Soup using pip.
pip install beautifulsoup4 lxml

Handling Pagination

When dealing with websites that display content across multiple pages, handling pagination is essential to scrape all the data.

Identify the Pagination Structure: Inspect the website to understand how pagination is structured (e.g., next page button or numbered links).
Iterate Over Pages: Use a loop to iterate through each page and scrape the data.
Update the URL or Parameters: Modify the URL or parameters to fetch the next page's content.

import requests
from bs4 import BeautifulSoup

base_url = 'https://example-blog.com/page/'
page_number = 1
all_titles = []

while True:
    # Construct the URL for the current page
    url = f'{base_url}{page_number}'
    response = requests.get(url)
    soup = BeautifulSoup(response.content, 'html.parser')

    # Find all article titles on the current page
    titles = soup.find_all('h2', class_='article-title')
    if not titles:
        break  # Exit the loop if no titles are found (end of pagination)

    # Extract and store the titles
    for title in titles:
        all_titles.append(title.get_text())

    # Move to the next page
    page_number += 1

# Print all collected titles
for title in all_titles:
    print(title)

Extracting Nested Data

Sometimes, the data you need to extract is nested within multiple layers of tags. Here's how to handle nested data extraction.

Navigate to Parent Tags: Find the parent tags that contain the nested data.
Extract Nested Tags: Within each parent tag, find and extract the nested tags.
Iterate Through Nested Tags: Iterate through the nested tags to extract the required information.

import requests
from bs4 import BeautifulSoup

url = 'https://example-blog.com/post/123'
response = requests.get(url)
soup = BeautifulSoup(response.content, 'html.parser')

# Find the comments section
comments_section = soup.find('div', class_='comments')

# Extract individual comments
comments = comments_section.find_all('div', class_='comment')

for comment in comments:
    # Extract author and content from each comment
    author = comment.find('span', class_='author').get_text()
    content = comment.find('p', class_='content').get_text()
    print(f'Author: {author}\nContent: {content}\n')

Handling AJAX Requests

Many modern websites use AJAX to load data dynamically. Handling AJAX requires different techniques, such as monitoring network requests using browser developer tools and replicating those requests in your scraper.

import requests
from bs4 import BeautifulSoup

# URL to the API endpoint providing the AJAX data
ajax_url = 'https://example.com/api/data?page=1'
response = requests.get(ajax_url)
data = response.json()

# Extract and print data from the JSON response
for item in data['results']:
    print(item['field1'], item['field2'])

Risks of Web Scraping

Web scraping requires careful consideration of legal, technical, and ethical risks. By implementing appropriate safeguards, you can mitigate these risks and conduct web scraping responsibly and effectively.

Terms of Service Violations: Many websites explicitly prohibit scraping in their Terms of Service (ToS). Violating these terms can lead to legal actions.
Intellectual Property Issues: Scraping content without permission may infringe on intellectual property rights, leading to legal disputes.
IP Blocking: Websites may detect and block IP addresses that exhibit scraping behavior.
Account Bans: If scraping is performed on websites requiring user authentication, the account used for scraping might get banned.

Beautiful Soup is a powerful library that simplifies the process of web scraping by providing an easy-to-use interface for navigating and searching HTML and XML documents. It can handle various parsing tasks, making it an essential tool for anyone looking to extract data from the web.

10 Essential Questions to Ask When Starting with NumPy Data Manipulation

Marcos — Wed, 31 Jul 2024 13:52:07 +0000

Get started with NumPy data manipulation by asking these 10 essential questions. Understand the fundamentals, functions, and best practices for effective data analysis.

Starting with NumPy data manipulation can be overwhelming, but asking the right questions can set you on the path to success.

Below 10 essential questions that will help you grasp the fundamentals, learn key functions, and master best practices for efficient data analysis.

1. What is NumPy and Why is it Important?

NumPy, short for Numerical Python, is a library used for numerical computations. It offers support for large, multi-dimensional arrays and matrices, along with a collection of mathematical functions to operate on these arrays.

This makes it a cornerstone for data manipulation in Python, particularly for tasks involving large datasets and complex mathematical computations.

2. How Do I Install NumPy?

Before you can start using NumPy, you'll need to install it. You can easily install NumPy using pip, the Python package installer, with the following command:

pip install numpy

For those using Anaconda, NumPy is typically included, but you can also install it via the Anaconda Navigator or by using:

conda install numpy

3. How Do I Create NumPy Arrays?

You can create arrays from Python lists using the np.array() function. Here's an example:

import numpy as np
array = np.array([1, 2, 3, 4, 5])

You can also create matrices and use functions like np.zeros(), np.ones(), and np.arange() for different types of arrays.

4. What Are the Basic Operations I Can Perform on NumPy Arrays?

NumPy supports a variety of operations that you can perform on arrays. These include:

Arithmetic operations: Addition, subtraction, multiplication, and division.
Aggregate functions: Sum, mean, max, min, etc.
Array manipulation: Reshaping, concatenation, splitting.

For example:

array1 = np.array([1, 2, 3])
array2 = np.array([4, 5, 6])
result = array1 + array2  # [5, 7, 9]

5. How Do I Access and Modify Elements in NumPy Arrays?

Accessing and modifying array elements is straightforward in NumPy. You can use indexing and slicing, similar to Python lists. For instance:

array = np.array([1, 2, 3, 4, 5])
element = array[0]  # Access first element
array[1] = 10       # Modify second element

For multi-dimensional arrays, you can use multiple indices:

matrix = np.array([[1, 2, 3], [4, 5, 6]])
element = matrix[0, 1]  # Access element in first row, second column
matrix[1, 2] = 9        # Modify element in second row, third column

6. What Are Universal Functions (ufuncs) and How Do They Work?

Universal functions, or ufuncs, are a core feature of NumPy. They perform element-wise operations on arrays, enabling you to apply functions across array elements efficiently.

Examples include np.add(), np.multiply(), np.sin(), and more.

array = np.array([0, np.pi / 2, np.pi])
result = np.sin(array)  # [0.0, 1.0, 0.0]

7. How Do I Handle Missing or NaN Values in NumPy?

Missing values can be problematic in data analysis. NumPy provides np.nan to represent missing values and functions like np.isnan() to detect them. You can also use functions like np.nan_to_num() to replace NaNs with a specified value.

array = np.array([1, 2, np.nan, 4])
clean_array = np.nan_to_num(array)  # [1.0, 2.0, 0.0, 4.0]

8. What Are the Best Practices for Efficient NumPy Array Operations?

Efficiency is key in data manipulation. Some best practices include:

Vectorization - Avoiding explicit loops and using vectorized operations.

# Example with Explicit Loop
import numpy as np

# Create an array
arr = np.array([1, 2, 3, 4, 5])

# Use a loop to add 1 to each element
result = np.zeros_like(arr)
for i in range(len(arr)):
    result[i] = arr[i] + 1

print(result)

#Vectorized Version
import numpy as np

# Create an array
arr = np.array([1, 2, 3, 4, 5])

# Use vectorized operation to add 1 to each element
result = arr + 1

print(result)

In-Place Operations - Modifying arrays directly to save memory.

# Example without In-Place Operation
import numpy as np

# Create an array
arr = np.array([1, 2, 3, 4, 5])

# Create a new array with modified values
result = arr * 2

print(result)
print(arr)  # Original array remains unchanged

#In-Place Version
import numpy as np

# Create an array
arr = np.array([1, 2, 3, 4, 5])

# Modify the original array in-place
arr *= 2

print(arr)  # Original array is modified

Broadcasting - Leveraging NumPy's Ability to Perform Operations on Arrays of Different Shapes

# Example without Broadcasting
import numpy as np

# Create a 2D array and a 1D array
matrix = np.array([[1, 2, 3], [4, 5, 6]])
vector = np.array([1, 2, 3])

# Use a loop to add the vector to each row of the matrix
result = np.zeros_like(matrix)
for i in range(matrix.shape[0]):
    result[i, :] = matrix[i, :] + vector

print(result)

#With Broadcasting
import numpy as np

# Create a 2D array and a 1D array
matrix = np.array([[1, 2, 3], [4, 5, 6]])
vector = np.array([1, 2, 3])

# Use broadcasting to add the vector to each row of the matrix
result = matrix + vector

print(result)

9. How Do I Save and Load NumPy Arrays?

Saving and loading data is crucial for data persistence. NumPy provides functions like np.save() and np.load() for binary files, and np.savetxt() and np.loadtxt() for text files.

array = np.array([1, 2, 3, 4, 5])
np.save('array.npy', array)
loaded_array = np.load('array.npy')

10. How Can I Integrate NumPy with Other Libraries?

NumPy works seamlessly with many other Python libraries like Pandas, Matplotlib, and SciPy. This integration allows for advanced data analysis, visualization, and scientific computations. For instance, converting a NumPy array to a Pandas DataFrame is straightforward:

import pandas as pd
array = np.array([[1, 2, 3], [4, 5, 6]])
df = pd.DataFrame(array, columns=['A', 'B', 'C'])

By asking these ten essential questions, you'll build a strong foundation, enabling you to tackle more complex data analysis tasks efficiently.

NumPy's integration with other libraries further enhances its utility, making it an indispensable tool in the data scientist's toolkit.

Tic-Tac-Toe JavaScript Game for Beginners

Marcos — Tue, 30 Jul 2024 22:57:59 +0000

Tic-tac-toe is a classic game played on a grid of 3x3 squares. Two players take turns marking X or O in empty squares, aiming to get three of their marks in a row, either horizontally, vertically, or diagonally. It's a quick and strategic game often enjoyed by people of all ages.

Is a seemingly straightforward game that offers valuable problem-solving opportunities, particularly for beginners. This article provides a step-by-step explanation of how to create the game using an HTML Canvas element and JavaScript.

The tools

JavaScript: It is versatile, compatible with browsers, and supports both front-end and back-end development.
HTML: It organizes and presents information on the web.
CSS: It separates content and design, facilitating maintenance and updates.

If you want to delve deeper into the subject, I'll leave my recommended readings below:

The Concepts

Class: It's like a template for party invitations, defining the design and basic information. In JavaScript, a class is a blueprint for creating objects with properties and methods.
Object: It's like a personalized party invitation representing a distinct object with unique details. In JavaScript, an object is an instance of a class, representing a specific entity with its own characteristics and actions.
Constructor: It's how you prepare invitations, defining the basic structure and initial information. In JavaScript, the constructor is a special method within a class that initializes the object's properties for use.

Inicial Setup

To start, create an HTML file with the basic structure, including a canvas element and a script tag. While you can separate the JavaScript code into a different file, for this tutorial, we'll keep everything in one file.

The canvas element acts as the background for the game's scene. If desired, you can adapt the game to work with other elements like a div tag, but that would require modifying the code provided in this tutorial.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Educational - Tic-Tac-Toe</title>
</head>
<body>
    <canvas id="canvas" width="320" height="320">
    </canvas>
    <script>
        // Our JavaScript code will reside here.
    </script>
</body>
</html>

Figure 1: This part demonstrates a basic HTML structure that includes a canvas element and a script tag.

The Game’s Classes

Classes in JavaScript provide a way to organize code by creating objects with related properties and methods. In the Tic-Tac-Toe game, we have the TicTacToe class for managing the game instance and the Square class for representing each square on the game board.

The TicTacToe class takes the ID of a canvas element as a parameter, which is used for rendering graphics. The Square class stores position and click information, and has methods for drawing and displaying symbols on the canvas.

Now, let's see how these concepts are applied in the game code.

Figure 2: This is how our basic structure for the game will look like.

When creating a instance, the canvas element ID is passed as a parameter, allowing multiple instances for different screen elements. The Square class represents a square on the game board, storing position, size, and click information. It provides methods to draw the square and display the player's symbol.

The Square class generates square objects for a 3x3 grid. It has properties such as x, y, width, height, ctx, and actor. x and y determine the position, width and height define the dimensions, ctx references the canvas interface, and actor indicates the player's symbol ('x' or 'o').

In JavaScript, a constructor is a special function that creates and initializes objects. It establishes the object's properties and methods. To call a constructor, we use the new keyword followed by the constructor function's name. The constructor function associates the new object with the this variable, allowing us to define the object's properties.

When instantiating a Square object, all properties except actor should be provided to the constructor. The actor property should be set to null within the constructor to ensure it exists on Square objects.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Educational - Tic-Tac-Toe</title>
</head>
<body>
    <canvas id="canvas" width="320" height="320"></canvas>
    <script>
        // The Square contains position, size information and an actor.
        class Square {
            constructor(x, y, width, height, ctx) {
                this.x = x;
                this.y = y;
                this.width = width;
                this.height = height;
                this.ctx = ctx;
                this.actor = null;
            }

            draw() {
                // Draw is a method used to draw the square.
            }
        }
    </script>
</body>
</html>

Figure 3: Demonstrates the implementation of the Square class.

The class should include a draw() method responsible for rendering a square and displaying the symbol of the player who interacted with it. The draw() method utilizes the strokeRect(x, y, width, height) method, accessed through the ctx property, to draw the square on the canvas. Additionally, the ctx property provides access to the strokeStyle property, allowing for customization of the border color.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Educational - Tic-Tac-Toe</title>
</head>
<body>
    <canvas id="canvas" width="320" height="320"></canvas>
    <script>
        // The Square contains position, size information and an actor.
        class Square {
            //...
            draw() {
                // This part draws the rectangle
                this.ctx.strokeStyle = 'black';
                this.ctx.strokeRect(this.x, this.y, this.width, this.height);

                // This part draws the actor if it is not null.
                if (this.actor) {
                    this.ctx.fillStyle = 'black';
                    this.ctx.font = '30px Verdana';
                    this.ctx.textAlign = 'center';
                    this.ctx.fillText(this.actor, this.x + this.width / 2, this.y + this.height / 2 + 10);
                }
            }
        }
    </script>
</body>
</html>

Figure 4: Demonstrates the implementation of the draw() method.

The draw method utilizes the fillText(text, x, y) method from the ctx property to inscribe the symbol of the player who interacted with the square. The text is precisely placed at the square's center by adding half of its width and height to its x and y positions. The ctx property also possesses a textAlign property that can be set to center, ensuring the text is perfectly aligned towards the center.

Next, we proceed with creating the TicTacToe class, which entails a constructor and three essential methods: click(event), checkForWinner(), and reset().

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Educational - Tic-Tac-Toe</title>
</head>
<body>
    <canvas id="canvas" width="320" height="320"></canvas>
    <script>
        // The Square contains position, size information and an actor.
        class Square {
        }

        // The TicTacToe class represents the concrete implementation of the game.
        class TicTacToe {
            constructor(id) {
            }

            // The click method is responsible for checking if the mouse clicked within one of the empty squares when the canvas is clicked.
            click(event) {
            }

            // The checkForWinner method determines the game's outcome.
            checkForWinner() {
            }

            // The reset method initiates a fresh start of the game.
            reset() {
            }
        }
    </script>
</body>
</html>

Figure 5: Demonstrates the implementation of a TicTacToe class.

The TicTacToe class constructor requires a canvas element id as input. The id is used to fetch the corresponding HTML canvas element using getElementById(id) and assigned to the canvas property. The canvas property is then used to obtain a CanvasRenderingContext2D instance assigned to the ctx property, serving as the drawing interface within the canvas.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Educational - Tic-Tac-Toe</title>
</head>
<body>
    <canvas id="canvas" width="320" height="320"></canvas>
    <script>
        // The Square contains position, size information and an actor.
        class Square {
        }

        // The TicTacToe class represents the concrete implementation of the game.
        class TicTacToe {
            constructor(id) {
                // Get the canvas element and its 2D rendering context.
                this.canvas = document.getElementById(id);
                this.ctx = this.canvas.getContext('2d');

                // This is the empty array that stores the squares.
                this.squares = [];

                // The constants w and h represent the width and height.
                const w = this.canvas.width / 3;
                const h = this.canvas.height / 3;

                // These sequence of for loops create 3x3 squares.
                for (let x = 0; x < 3; x++) {
                    for (let y = 0; y < 3; y++) {
                        this.squares.push(new Square(x * w, y * h, w, h, this.ctx));
                    }
                }

                // This is the array that creates the actors.
                this.actors = ["x", "o"];

                // Here we define the current actor.
                this.turn = 0;

                // Here we define a checker to see if the game has ended.
                this.gameOver = false;

                // Render all squares on the screen
                this.squares.forEach(squares => squares.draw());

                // Adds a click event listener to the canvas to execute the 'click' function.
                this.canvas.addEventListener('click', function(event) { this.click(event); }.bind(this));
            }

            // The click function verifies if the mouse was clicked on an empty square when the canvas is clicked.
            click(event) {
            }

            // The checkForWinner function determines the result of the game.
            checkForWinner() {
            }

            // The reset function initiates a new game session.
            reset() {
            }
        }
    </script>
</body>
</html>

Figure 6: Demonstrates the implementation of a TicTacToe class constructor.

To instantiate the Square objects, a loop of 3x3 is performed, creating a Square object for each iteration and adding it to the squares property. The loop starts at (x=0, y=0) and continues until 9 squares are created.

The class requires three additional properties: actors (an array of two strings representing the players and their symbols 'x' and 'o'), turn (a number between 0-1 specifying the next player's turn), and gameOver (a boolean indicating if the game has ended).

In the constructor, the square objects draw() method is called, and a click event listener is added to the class click() method.

The click method is triggered when the user clicks on the canvas, and it retrieves the cursor's position from the event argument. The first section of the click method includes a guard clause that resets the game if the gameOver property is set to true, allowing the user to start a new game by clicking on the canvas.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Educational - Tic-Tac-Toe</title>
</head>
<body>
    <canvas id="canvas" width="320" height="320"></canvas>
    <script>
        // The Square contains position, size information and an actor.
        class Square {
        }

        // The TicTacToe class represents the concrete implementation of the game.
        class TicTacToe {
            constructor(id) {
            }

            // The click method is called whenever the canvas is clicked.
            // The method is used to check if the mouse clicked within one of the empty squares.
            click(event) {
                // Reset the game if it has ended.
                if (this.gameOver) {
                    this.reset();
                    return;
                }

                // Retrieve the mouse position.
                const x = event.offsetX;
                const y = event.offsetY;

                // Verify if one of the squares was clicked.
                for (let square of this.squares) {
                    // Allow only empty squares to be clicked.
                    if (square.actor != null) continue;
                    // Validate if the mouse is inside the square.
                    if (x >= square.x && x <= square.x + square.width && y >= square.y && y <= square.height) {
                        // Assign the actor.
                        square.actor = this.actors[this.turn];
                        square.draw();

                        // Toggle the turn.
                        this.turn = (this.turn + 1) % this.actors.length;

                        // Determine if the game should end.
                        this.checkForWinner();
                    }
                }
            }

            // The checkForWinner function determines the result of the game.
            checkForWinner() {
            }

            // The reset function initiates a new game session.
            reset() {
            }
        }
    </script>
</body>
</html>

Figure 7: Demonstrates the implementation of a TicTacToe class click method.

The method iterates over Square objects, checking if the mouse position is within a square. If true, the actor is added to the square's actor property to indicate selection. The turn property allows the next player to choose.

The method then calls checkForWinner() to determine if there is a winner. It checks for three squares selected in a horizontal, vertical, or diagonal line.

Using an array of arrays, the method checks if three squares match any winning combinations. If true, gameOver is set to true, resetting the game on the next canvas click.

The method also draws a line and displays the winner's text representing the winning combination.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Educational - Tic-Tac-Toe</title>
</head>
<body>
    <canvas id="canvas" width="320" height="320"></canvas>
    <script>
        // The Square contains position, size information and an actor.
        class Square {
        }

        // The TicTacToe class represents the concrete implementation of the game.
        class TicTacToe {
            constructor(id) {
            }

            // The click method is called whenever the canvas is clicked.
            // The method is used to check if the mouse clicked within one of the empty squares.
            click(event) {
                // Reset the game if it has ended.
                if (this.gameOver) {
                    this.reset();
                    return;
                }

                // Retrieve the mouse position.
                const x = event.offsetX;
                const y = event.offsetY;

                // Verify if one of the squares was clicked.
                for (let square of this.squares) {
                    // Allow only empty squares to be clicked.
                    if (square.actor != null) continue;
                    // Validate if the mouse is inside the square.
                    if (x >= square.x && x <= square.x + square.width && y >= square.y && y <= square.height) {
                        // Assign the actor.
                        square.actor = this.actors[this.turn];
                        square.draw();

                        // Toggle the turn.
                        this.turn = (this.turn + 1) % this.actors.length;

                        // Determine if the game should end.
                        this.checkForWinner();
                    }
                }
            }

            // The checkForWinner function determines the result of the game.
            checkForWinner() {
                // Determine whether the game has concluded.
                const winnerCombinations = [
                    // Columns
                    [0, 1, 2], [3, 4, 5], [6, 7, 8],
                    // Rows
                    [0, 3, 6], [1, 4, 7], [2, 5, 8],
                    // Diagonals
                    [0, 4, 8], [2, 4, 6]
                ];

                // Verify the combinations.
                for (let i = 0; i < winnerCombinations.length; ++i) {
                    // Get combination
                    let combination = winnerCombinations[i];

                    // Get squares
                    let s1 = this.squares[combination[0]];
                    let s2 = this.squares[combination[1]];
                    let s3 = this.squares[combination[2]];

                    // Make sure the combination does not consist of three empty squares.
                    if (s1.actor != null) {
                        // Verify whether the three squares have the same actor.
                        if (s1.actor == s2.actor && s1.actor == s3.actor) {
                            // Set game over.
                            this.gameOver = true;

                            // Draw the combination line.
                            this.ctx.beginPath();
                            this.ctx.moveTo(s1.x + s1.width / 2, s1.y + s1.height / 2);
                            this.ctx.lineTo(s3.x + s3.width / 2, s3.y + s3.height / 2);
                            this.ctx.stroke();

                            // Draw winner text.
                            this.ctx.fillStyle = 'black';
                            this.ctx.font = '30px Arial';
                            this.ctx.textAlign = 'center';
                            this.ctx.fillText(s1.actor + " wins!", this.canvas.width / 2, this.canvas.height / 2);
                        }
                    }
                }
            }

            // The reset function initiates a new game session.
            reset() {
            }
        }
    </script>
</body>
</html>

Figure 8: Displays the implementation of the checkForWinner() method in the TicTacToe class.

The final part of the method checks if all squares have a non-null actor, indicating that the game is a draw. This check is performed after determining if there is a winner to ensure that the game is not mistakenly considered a draw when the last empty square is selected and a winner is found.

The reset method is responsible for restoring the properties of a TicTacToe instance to their initial values, preparing for a new game.

Firstly, the method clears the canvas by using the clearRect(x, y, width, height) method of the ctx property.

After clearing the canvas, the actor property of each square is set to null, and the squares are redrawn on the canvas.

Finally, the method resets the turn to 0, allowing players to take turns again, and sets gameOver to false. This indicates that the click() method can assign players to squares and search for a new winner or a draw.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Educational - Tic-Tac-Toe</title>
</head>
<body>
    <canvas id="canvas" width="320" height="320"></canvas>
    <script>
        // The Square contains position, size information and an actor.
        class Square {
        }

        // The TicTacToe class represents the concrete implementation of the game.
        class TicTacToe {
            constructor(id) {
            }

            // The click method is called whenever the canvas is clicked.
            // The method is used to check if the mouse clicked within one of the empty squares.
            click(event) {
                // Retrieve the mouse position.
                const x = event.offsetX;
                const y = event.offsetY;

                // Verify if one of the squares was clicked.
                for (let square of this.squares) {
                    // Allow only empty squares to be clicked.
                    if (square.actor != null) continue;
                    // Validate if the mouse is inside the square.
                    if (x >= square.x && x <= square.x + square.width && y >= square.y && y <= square.height) {
                        // Assign the actor.
                        square.actor = this.actors[this.turn];
                        square.draw();

                        // Toggle the turn.
                        this.turn = (this.turn + 1) % this.actors.length;

                        // Determine if the game should end.
                        this.checkForWinner();
                    }
                }
            }

            // The checkForWinner function determines the result of the game.
            checkForWinner() {
            }

            // The reset function begins a fresh game session.
            reset() {
                // Clear canvas
                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

                // Reset all actors.
                this.squares.forEach(squares => squares.actor = null);

                // Draw the board.
                this.squares.forEach(squares => squares.draw());

                // Reset turn.
                this.turn = 0;

                // Reset game over.
                this.gameOver = false;
            }
        }
    </script>
</body>
</html>

Figure 9: Illustrates how the reset() method is implemented within the TicTacToe class.

The game is now fully prepared and ready for players to engage. To begin, simply add a new line below the class definitions to instantiate a fresh instance of the class. This will initialize all the necessary game components and set the stage for an exciting gameplay experience.

So go ahead, create a new instance and let the gaming fun begin!

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Educational - Tic-Tac-Toe</title>
</head>
<body>
    <canvas id="canvas" width="320" height="320"></canvas>
    <script>
        // The Square contains position, size information and an actor.
        class Square {}

        // The TicTacToe class represents the concrete implementation of the game.
        class TicTacToe {
            // Create a new game.
            new TicTacToe('canvas');
        }
    </script>
</body>
</html>

Figure 10: Demonstrates the process of initiating the Tic-tac-toe game.

You can find this code through the following link: https://github.com/marcosconci1/educational-tic-tac-toe. Additionally, you can also access my GitHub page through it.

21 Data Science Terms Everyone Should Know

Marcos — Tue, 30 Jul 2024 22:44:58 +0000

Would you agree that every field has its set of special words or expressions that are difficult for others to understand?

In the realm of business, phrases such as 'trim the fat', 'S.W.O.T.', 'pain point', and 'white paper' are commonly tossed around as industry jargon.

So, as you’d have guessed, Data Science just like every other field out there has its unique lexicon.

Hence, I've compiled a list of essential terms below to ensure we're all on the same page and moving towards a shared objective. Let's dive right in, shall we?

Learn Your ABC's:

Accuracy: The measure of how often a classification model correctly predicts outcomes among all instances it evaluates. For example, if a model correctly identifies 90 out of 100 instances, its accuracy is 90%.

A/B Testing: A statistical method used to compare two versions of a product, webpage, or model to determine which performs better. For instance, testing two different landing page designs to see which results in more sign-ups.

API (Application Programming Interface): A set of rules that allows one software application to interact with another. For example, a weather app using an API to fetch current weather data from a weather service.

BI (Business Intelligence): Technologies, processes, and tools that help organizations make informed business decisions. Tools like Tableau or Power BI help visualize and analyze business data.

Bias: An error in a model that causes it to consistently predict values away from the true values. For example, a model trained on biased data may favor certain outcomes.

Correlation: A statistical measure that describes the degree of association between two variables. For instance, a high correlation between hours studied and exam scores.

Covariance: A measure of how much two random variables change together. If two variables increase together, they have positive covariance.

D and beyond:

Data Cleaning: The process of identifying and correcting errors or inconsistencies in datasets. This step is crucial for ensuring data quality before analysis.

Data Mining: Extracting valuable patterns or information from large datasets. Techniques include clustering, classification, and association.

Data Visualization: Presenting data in graphical or visual formats to aid understanding. Tools like charts, graphs, and heatmaps are common.

Exploratory Data Analysis (EDA): Analyzing and visualizing data to understand its characteristics and relationships. This involves summarizing main characteristics, often with visual methods.

False Positive and False Negative: Incorrect predictions in binary classification. A false positive is when the model incorrectly predicts the positive class, while a false negative is when it incorrectly predicts the negative class.

Gaussian Distribution: A type of probability distribution often used in statistical modeling, also known as the normal distribution. It is characterized by its bell-shaped curve.

Hypothesis Testing: A statistical method to test a hypothesis about a population parameter based on sample data. It involves determining whether there is enough evidence to reject the null hypothesis.

Linear Regression: A statistical method for modeling the relationship between a dependent variable and one or more independent variables. For example, predicting house prices based on size and location.

Null Hypothesis: A statistical hypothesis that assumes there is no significant difference between observed and expected results. It is the default assumption to be tested against.

Predictive Analytics: Using data, statistical algorithms, and machine learning techniques to identify the likelihood of future outcomes. For instance, predicting customer churn based on past behavior.

P-value: The probability of obtaining a result as extreme as, or more extreme than, the observed result during hypothesis testing. A low p-value indicates strong evidence against the null hypothesis.

Standard Deviation: A measure of the amount of variation or dispersion in a set of values. It indicates how much the values deviate from the mean.

Variance: The degree of spread or dispersion of a set of values, and also the variability of model predictions. High variance indicates a large spread around the mean.

How Important is a Bachelor's Degree for Developers

Marcos — Tue, 30 Jul 2024 22:32:40 +0000

Have you ever wondered if getting a bachelor's degree is necessary for becoming a successful developer?

A bachelor's degree can equip you with technical knowledge and soft skills such as critical thinking, problem-solving, and communication. These skills are valuable when starting out in the industry and can help you stand out in a crowded job market. Additionally, earning a degree demonstrates your ability to commit to and achieve long-term goals, while also providing experience in group work and project management. These are aspects you might not gain as readily through self-teaching or short online courses.

However, self-taught or online certification programs may offer advantages over traditional bachelor's degrees. These programs are often more adaptable to changes in the industry, ensuring that students receive the most current skills and knowledge. They also tend to be more flexible and affordable, making them an attractive option for those seeking to gain skills without incurring significant debt.

While it can be helpful, experience and continuous learning are also important factors to consider.

Degrees provide structured environments to learn new concepts, technologies, and presentation skills.
Employer expectations vary; some require degrees and offer higher compensation to degree holders. Certifications (e.g., Oracle) and hands-on experience can bridge this gap.

What do you think? Do you believe a bachelor's degree is necessary for becoming a successful developer, or do you think experience and continuous learning are more important?