DEV Community: Melissa

Understanding Regex in Python: A Practical Example

Melissa — Fri, 03 Jan 2025 13:45:59 +0000

Intro

Regular expressions, commonly known as regex, are powerful tools for pattern matching and text manipulation. They allow developers to search, match, and manipulate strings with precision. In this blog post, we'll explore how regex is used in Python through a practical example from a customer validation function.

The Context

Consider a scenario where we need to validate customer information, specifically their first name, last name, and mobile number. The following code snippet demonstrates how regex is used to validate a mobile number in a Python class:

from sqlalchemy.orm import validates
import re

class Customer:
    @validates('first_name', 'last_name', 'mobile')
    def validate(self, key, value):
        if key == 'first_name' or key == 'last_name':
            if len(value) == 0:
                raise ValueError(f'Server validation error: No {"first name" if key == "first_name" else "last name"}')
        elif key == 'mobile':
            mobile = r"((([\(]?[0-9]{3,4}[\)]\s?)|([0-9]{3,4}[\-]))[0-9]{3,4}[\-][0-9]{4})|([0-9]{10,12})"
            mobile_regex = re.compile(mobile)
            if not mobile_regex.fullmatch(value):
                raise ValueError('Server validation error: Invalid mobile number')

        return value

Breaking Down the Regex

In the validate method, we use regex to ensure that the mobile number provided by the customer adheres to a specific format. Let's break down the regex pattern used:

mobile = r"((([\(]?[0-9]{3,4}[\)]\s?)|([0-9]{3,4}[\-]))[0-9]{3,4}[\-][0-9]{4})|([0-9]{10,12})"

Parentheses and Hyphens:
([(]?[0-9]{3,4}[)]\s?): This part of the regex matches an optional opening parenthesis (, followed by 3 or 4 digits, an optional closing parenthesis ), and an optional space.
([0-9]{3,4}[-]): This part matches 3 or 4 digits followed by a hyphen -.

Main Number:
[0-9]{3,4}[-][0-9]{4}: This part matches 3 or 4 digits, a hyphen, and then 4 digits.
Alternative Format:

([0-9]{10,12}):
This part matches a sequence of 10 to 12 digits, allowing for a more compact mobile number format without separators.

Using Regex for Validation

The regex pattern is compiled using re.compile(mobile), and the fullmatch method is used to check if the entire string matches the pattern:

mobile_regex = re.compile(mobile)
if not mobile_regex.fullmatch(value):
    raise ValueError('Server validation error: Invalid mobile number')

If the mobile number does not match the regex pattern, a ValueError is raised, indicating an invalid mobile number.

Conclusion

Regex is a versatile tool for string validation and manipulation. In this example, we used regex to validate a mobile number, ensuring it adheres to specific formats. By understanding and utilizing regex, developers can perform complex string operations with ease and precision.

Whether you're validating user input, searching for patterns in text, or performing text manipulation, regex provides a robust solution for your needs. Happy coding!

Building RESTful APIs with Flask

Melissa — Thu, 14 Nov 2024 19:35:44 +0000

RESTful APIs have become a common standard for enabling communication between different parts of an application. Flask, a flexible web framework for Python, can be used to build RESTful APIs. In this blog post, we'll explore the basics of Flask and how it can be used to create powerful and efficient RESTful APIs.

What is Flask?

Flask is a micro web framework written in Python. It is designed to be simple and easy to use, making it a popular choice for both beginners and experienced developers. Flask provides the essential tools needed to build web applications and APIs, without imposing any dependencies or project structure.

Key Features of Flask

Lightweight: Flask is minimalistic and does not include unnecessary features, allowing developers to add only what they need.
Flexible: Flask provides the flexibility to structure your application as you see fit.
Extensible: Flask supports extensions that add functionality to your application, such as database integration, form handling, and authentication.
Easy to Learn: Flask's simplicity and clear documentation make it easy for developers to get started quickly.

What is a RESTful API?

A RESTful API (Representational State Transfer) is an architectural style for designing networked applications. It uses HTTP requests to perform CRUD (Create, Read, Update, Delete) operations on resources. RESTful APIs are stateless, meaning each request from a client contains all the information needed to process the request.

Building a RESTful API with Flask

Let's walk through the steps to create a simple RESTful API using Flask.

Install Flask: First, you need to install Flask. You can do this using pip:

   pip install Flask

Create a Flask Application: Create a new Python file (e.g., app.py) and set up a basic Flask application:

   from flask import Flask, jsonify, request

   app = Flask(__name__)

   @app.route('/')
   def home():
       return "Welcome to the Flask RESTful API!"

   if __name__ == '__main__':
       app.run(debug=True)

Define API Endpoints: Define the endpoints for your API. For example, let's create endpoints to manage a list of users:

   users = []

   @app.route('/users', methods=['GET'])
   def get_users():
       return jsonify(users)

   @app.route('/users', methods=['POST'])
   def add_user():
       user = request.get_json()
       users.append(user)
       return jsonify(user), 201

   @app.route('/users/<int:user_id>', methods=['GET'])
   def get_user(user_id):
       user = next((u for u in users if u['id'] == user_id), None)
       if user:
           return jsonify(user)
       return jsonify({'error': 'User not found'}), 404

   @app.route('/users/<int:user_id>', methods=['PUT'])
   def update_user(user_id):
       user = next((u for u in users if u['id'] == user_id), None)
       if user:
           data = request.get_json()
           user.update(data)
           return jsonify(user)
       return jsonify({'error': 'User not found'}), 404

   @app.route('/users/<int:user_id>', methods=['DELETE'])
   def delete_user(user_id):
       global users
       users = [u for u in users if u['id'] != user_id]
       return '', 204

Run the Application: Run your Flask application by executing the following command:

   python app.py

Test the API: You can use tools like Postman or curl to test your API endpoints.

Conclusion

Flask is a powerful and flexible framework for building RESTful APIs. Its simplicity and easy to use, making it a great choice for developers looking to create efficient and scalable APIs. By following the steps outlined in this blog post, you can get started with Flask and build your own RESTful API.

Sudoku Solving in Python

Melissa — Thu, 24 Oct 2024 17:20:38 +0000

Creating sudoku solvers can be a great way to familiarize yourself with recursive backtracking and algorithm solving. In this blog post, we'll explore the some helper functions from a command-line Sudoku game project I created to demonstrate these methods. This file contains essential helper functions that facilitate solving Sudoku puzzles. We'll break down the key functions: is_valid, find_empty, and solve.

Checking Validity of a Number
The is_valid function checks whether placing a specific number in a given cell is valid according to Sudoku rules.

def is_valid(board, row, col, num):
    # Check if the number is not present in the same row and column
    if num in board[row] or num in [board[i][col] for i in range(9)]:
        return False

    start_row, start_col = 3 * (row // 3), 3 * (col // 3)
    for i in range(start_row, start_row + 3):
        for j in range(start_col, start_col + 3):
            if board[i][j] == num:
                return False
    return True

Row and Column Check: Ensures the number is not already present in the same row or column.
Subgrid Check: Ensures the number is not present in the 3x3 subgrid.

Finding an Empty Cell

The find_empty function locates the next empty cell (represented by 0) on the board.

def find_empty(board):
    for i in range(9):
        for j in range(9):
            if board[i][j] == 0:
                return (i, j)
    return None

Iteration: Iterates through the board to find an empty cell.
Return: Returns the coordinates of the first empty cell found or None if the board is full.

Solving the Sudoku Puzzle

The solve function uses backtracking to solve the Sudoku puzzle.

def solve(board):
    empty_cell = find_empty(board)
    # Board is solved
    if not empty_cell:
        return board

    row, col = empty_cell

    numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]
    random.shuffle(numbers)

    for num in numbers:
        if is_valid(board, row, col, num):
            board[row][col] = num
            if solve(board):
                return board
            # Backtrack if current placement doesn't lead to a solution
            board[row][col] = 0
        # No valid number for current empty cell
    return False

Find Empty Cell: Uses find_empty to locate the next empty cell.
Backtracking: Tries placing numbers 1-9 in the empty cell, checking validity with is_valid.

Recursive Solve: Recursively attempts to solve the board. If a placement leads to a solution, it returns the solved board.
Backtrack: If a placement doesn't lead to a solution, it resets the cell and tries the next number.

Conclusion

Helper functions are crucial for the functionality of our Sudoku solver. The is_valid function ensures that the Sudoku rules are followed, find_empty helps locate the next cell to fill, and solve uses recursive backtracking to find the solution. Understanding these helper functions provides insight into the logic behind solving Sudoku puzzles programmatically.

How to Create a Controlled Form in MUI (Material-UI)

Melissa — Thu, 03 Oct 2024 16:00:01 +0000

Material-UI (MUI) can be a powerful tool in building a responsive user interfaces in React. One useful application of MUI is creating controlled forms. In a controlled form, form elements (such as inputs) are tied to the component state, allowing you to manage and validate user inputs in real-time.

Walkthrough of creating a controlled form using MUI.

Set Up Your Project

Create a new React project and install MUI:

npx create-react-app my-app
cd my-app
npm install @mui/material

Import Necessary Components

For this example, we’ll be using MUI’s TextField, Button, and Box components.

import React, { useState } from "react";
import { TextField, Button, Box } from "@mui/material";

Create the Form State

In a controlled form, the input values are stored in the component’s state. We need to create a useState hook to manage these values.

const [formData, setFormData] = useState({
  name: "",
  email: ""
});

Handle Input Changes

To control the form inputs, each TextField component’s value will be set to the corresponding state value, and onChange will update the state.

const handleChange = (e) => {
  const { name, value } = e.target;
  setFormData((prevState) => ({
    ...prevState,
    [name]: value,
  }));
};

Build the Form

Now, we can put everything together inside a form. Each input field will be controlled by the component’s state. Don't forget to use export default in order to use your component in your other project files!

export default function ControlledForm() {
  const [formData, setFormData] = useState({
    name: "",
    email: ""
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevState) => ({
      ...prevState,
      [name]: value,
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
    // Add form submission logic here
  };

  return (
    <Box
      component="form"
      onSubmit={handleSubmit}
      sx={{ display: "flex", flexDirection: "column", gap: 2 }}
    >
      <TextField
        label="Name"
        name="name"
        value={formData.name}
        onChange={handleChange}
        fullWidth
      />
      <TextField
        label="Email"
        name="email"
        value={formData.email}
        onChange={handleChange}
        fullWidth
      />
      <Button type="submit" variant="contained">
        Submit
      </Button>
    </Box>
  );
}

Explanation

TextField: Renders a material-styled text input. The value is controlled by formData.name and formData.email, and onChange updates the state when the user types in the input field.
Button: Triggers form submission, which is handled using handleSubmit.
Box: A wrapper from MUI that handles layout and styling.

Final Thoughts

Creating controlled forms in MUI allows you to handle user input efficiently. Using MUI helps customize validation, formatting, and submission handling. MUI’s components not only makes the form look more appealing, but also simplifies the development process with their user-friendly APIs.

A Brief Intro to Arrow Functions in JavaScript

Melissa — Fri, 30 Aug 2024 07:04:58 +0000

Arrow Functions in JavaScript

Arrow functions are a concise and modern way to write functions in JavaScript. They simplify syntax and provide a few notable benefits over traditional function expressions. Here’s a quick guide to understanding and using arrow functions in JavaScript.

What Are Arrow Functions?

Arrow functions are a shorthand syntax for writing functions. They offer a more streamlined way to define functions and have some key differences compared to traditional function expressions, especially in how they handle the this keyword.

Basic Syntax

The syntax for an arrow function is compact and straightforward. Here’s the basic format:

const functionName = (parameters) => {
  // function body
};

Single Parameter

If your arrow function has a single parameter, you can omit the parentheses:

const greet = name => {
  return `Hello, ${name}!`;
};

console.log(greet('Melissa')); 
// Outputs: Hello, Melissa!

No Parameters

For functions with no parameters, use empty parentheses:

const sayHello = () => {
  return 'Hello, World!';
};

console.log(sayHello()); 
// Outputs: Hello, World!

Multiple Parameters

If the function has multiple parameters, include parentheses around them:

const add = (a, b) => {
  return a + b;
};

console.log(add(5, 3)); 
// Outputs: 8

Concise Body

Arrow functions can have a more concise syntax if the function body consists of a single expression. In this case, the braces and return keyword are omitted:

const square = x => x * x;

console.log(square(4)); 
// Outputs: 16

Key Differences from Traditional Functions

1. `this` Binding

Arrow functions do not have their own this context. Instead, they inherit this from the surrounding lexical context. This makes them useful for situations where you need to preserve the this value, such as in callbacks.

Traditional Function Example:

function counter() {
  this.value = 0;

  setInterval(function() {
    this.value++; // `this` refers to the global object or undefined in strict mode
    console.log(this.value);
  }, 1000);
}

new counter(); 
// `this.value` will not behave as expected

Arrow Function Example:

function counter() {
  this.value = 0;

  setInterval(() => {
    this.value++; 
    // `this` refers to the instance of counter
    console.log(this.value);
  }, 1000);
}

new counter();

2. No `arguments` Object

Arrow functions do not have their own arguments object. If access to function arguments is needed, traditional functions may be better suited for these applications.

When to Use Arrow Functions

Short Functions: When you need a simple, one-liner function, arrow functions provide a cleaner syntax.
Callbacks: Arrow functions are handy in callback functions, especially when you want to preserve the this context.

Conclusion

Arrow functions offer a concise and expressive way to write functions in JavaScript. Their simplified syntax and lexical scoping of this make them a valuable tool in modern JavaScript development.

DEV Community: Melissa

Understanding Regex in Python: A Practical Example

Intro

The Context

Breaking Down the Regex

Using Regex for Validation

Conclusion

Building RESTful APIs with Flask

What is Flask?

Key Features of Flask

What is a RESTful API?

Building a RESTful API with Flask

Conclusion

Sudoku Solving in Python

Finding an Empty Cell

Solving the Sudoku Puzzle

Conclusion

How to Create a Controlled Form in MUI (Material-UI)

Walkthrough of creating a controlled form using MUI.

Set Up Your Project

Import Necessary Components

Create the Form State

Handle Input Changes

Build the Form

Explanation

Final Thoughts

A Brief Intro to Arrow Functions in JavaScript

Arrow Functions in JavaScript

What Are Arrow Functions?

Basic Syntax

Single Parameter

No Parameters

Multiple Parameters

Concise Body

Key Differences from Traditional Functions

1. this Binding

2. No arguments Object

When to Use Arrow Functions

Conclusion

1. `this` Binding

2. No `arguments` Object