DEV Community: Takuro Goto

Important thoughts on JavaScript

Takuro Goto — Sat, 16 Nov 2024 03:20:26 +0000

1.Closures
A closure occurs when a function retains access to variables from its outer (enclosing) scope, even after the outer function has finished executing. This means that even though the outer function has returned, its local variables are still accessible by the inner function.

function counter() {
    let count = 0;
    return function() {
        return ++count;
    };
}

const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2

the outter function is counter()
the inner function is return function() in the outter function
So a closure let the inner function access to the count variable in the outter function's scope even after the outert funcion has done with execution.

2.Prototypes
In JavaScript, prototypes allow you to share functions across multiple instances of an object. Instead of defining the same function in each instance, you can define it once on the object's prototype. This way, all instances of the object can access the same function, reducing redundancy and improving efficiency by saving memory and resources in your code.

// Constructor function (similar to a class in other languages)
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// Adding a method to the `Person` prototype
Person.prototype.greet = function() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
};

// Creating new instances
const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);

// Calling the method on the instances
console.log(person1.greet()); // "Hello, my name is Alice and I am 30 years old."
console.log(person2.greet()); // "Hello, my name is Bob and I am 25 years old."

Person1 and Person2 can access the greet function even though they don't have the greet function defined on their own.

Important thoughts on JavaScript

Takuro Goto — Sat, 16 Nov 2024 03:20:26 +0000

function counter() {
    let count = 0;
    return function() {
        return ++count;
    };
}

const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2

// Constructor function (similar to a class in other languages)
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// Adding a method to the `Person` prototype
Person.prototype.greet = function() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
};

// Creating new instances
const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);

// Calling the method on the instances
console.log(person1.greet()); // "Hello, my name is Alice and I am 30 years old."
console.log(person2.greet()); // "Hello, my name is Bob and I am 25 years old."

Person1 and Person2 can access the greet function even though they don't have the greet function defined on their own.

Reuse the same exception logic in Python

Takuro Goto — Mon, 04 Nov 2024 07:17:36 +0000

Purpose
When coding, it's essential to handle exceptions carefully. Today, I want to share a method that allows you to reuse the same exception handling logic in Python, making your code more readable and maintainable for others.

CHandling Exceptions with a Decorator
Below is a simple implementation of a decorator designed to manage exceptions consistently across different functions.

def error_handler(func):
    def wrapper(*args, **kwargs):
        try:
            return func(*args, **kwargs)
        except FileNotFoundError as e:
            print(f"File not found: {e}")
        except ZeroDivisionError as e:
            print(f"Zero division error occurred: {e}")
        # Additional error handling can be added here
    return wrapper

Using the Decorator

@error_handler
def read_file(filename):
    with open(filename, 'r') as file:
        # Process the file
        print(file.read())  # Example of processing the file

@error_handler
def divide_numbers(a, b):
    return a / b

Example Calls

read_file('test.txt')  # Attempting to read a non-existent file
divide_numbers(2, 0)   # Attempting to divide by zero

Explanation
The code defines a decorator named error_handler, which is used to manage exceptions for any decorated functions. A decorator is a higher-order function that takes another function as an argument and extends or alters its behavior without modifying the original function's code.

When the error_handler decorator is applied to a function, it wraps the function call in a try block. If the decorated function raises a FileNotFoundError or ZeroDivisionError, the decorator catches these exceptions and prints a user-friendly error message. This approach not only enhances code readability but also promotes code reuse, as the same error handling logic can be applied to multiple functions.

By employing this technique, you can create cleaner, more robust Python code that is easier for others to understand and maintain.

How to mosic your face!?

Takuro Goto — Sun, 03 Nov 2024 06:39:21 +0000

Today, I want to share how to create a mosaic effect on human faces in Python. If you enjoy taking pictures, you probably also want to know how to modify them to make them look even better. This will enhance your photographic experience!
So, let's get started!

Required Documents
Face detection tool
https://github.com/opencv/opencv/blob/master/data/haarcascades/haarcascade_frontalface_alt.xml

import libraries
・cv2
・matplotlib
・mosaic_creator.py(this is one you make by your self)

Detailed Method
mosaic_creator.py
①Calculate mosaic width and height based on the dataset.
②Apply the mosaic effect to a specified area of the original image.
③Combine the modified area with the original image.

mosaic_creator.py------------------------------------------------------
import cv2

def mosaic(img, rect, size):
①Calculate mosaic width and height based on the dataset.
(x1, y1, x2, y2) = rect
w = x2 - x1
h = y2 - y1
i_rect = img[y1:y2, x1:x2]

②Apply the mosaic effect to a specified area of the original image.
i_small = cv2.resize(i_rect, (size, size))
i_mos = cv2.resize(i_small, (w, h), interpolation=cv2.INTER_AREA)

③Combine the modified area with the original image.
img_m = img.copy()
img_m[y1:y2, x1:x2] = i_mos
return img_m

test.py
①Create a face detection model.
②Read an image file and convert it to grayscale.
③Call the mosaic function.
④Save the mosaic image.

test.py----------------------------------------------------------------
import matplotlib.pyplot as plt
import cv2
from mosaic import mosaic as mosaic

①Create a face detection model.
cascade_file = 'haarcascade_frontalface_alt.xml'
cascade = cv2.CascadeClassifier(cascade_file)

②Read an image file and convert it to grayscale.
img = cv2.imread('face.png')
img_gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)

faces_list = cascade.detectMultiScale(img_gray, minSize=(900, 900))
if len(faces_list) == 0: quit()

③Call the mosaic function.
for (x, y, w, h) in faces_list:
img = mosaic(img, (x, y, x+w, y+h), 10)

④Save the mosaic image.
cv2.imwrite('face-m.png', img)
plt.imshow(cv2.cvtColor(img, cv2.COLOR_BGR2RGB))
plt.show()

The code performs regression analysis on temperature data and visualizes the model's prediction results

Takuro Goto — Sat, 02 Nov 2024 07:20:20 +0000

Today's Purpose
Today, I want to share how you can conduct a simple regression analysis using several libraries.

Libraries Used
LinearRegression
pandas
matplotlib

Data file
Temperature_10y.csv
Year,Month,Day,Temperature,Quality,Homogeneity
2006,1,1,3.6,8,1
・・・
2016,12,31,6.3,8,2
※This file contains 10 years of temperature data

Detailed Method
①Import libraries necessary for regression analysis.
②Read the temperature data file.
③Split the 10 years of temperature data into 9 years (2006–2015) for training and 1 year (2016) for testing.
※The 9 years of data will serve as training data, while the 1 year will be the test data.
④The make_data function prepares the input features and target values from the dataset.
Example:
temps = [3.6, 4.0, 3.7, 4.0, 3.6, 2.1, 2.8,…]
x = [[3.6, 4.0, 3.7, 4.0, 3.6, 2.1], …]
y = [2.8, …]
⑤Create a model using the training data.
⑥Generate predictions using the model and the test data.
⑦Plot a graph showing both the predicted and test data.
⑧Calculate the difference between the predicted and test data.

Source Code
①Import libraries
from sklearn.linear_model import LinearRegression
import pandas as pd
import matplotlib.pyplot as plt

②Read the temperature file
df = pd.read_csv('Temperature_10y.csv', encoding='utf-8')

③Split the data
train_year = df['年'] <= 2015
test_year = df['年'] >= 2016
interval = 6

④Prepare data
def make_data(data):
x = []
y = []
temps = list(data['Temperature'])
for i in range(len(temps)):
if i < interval: continue
y.append(temps[i])
xa = []
for p in range(interval):
d = i + p - interval
xa.append(temps[d])
x.append(xa)
return (x, y)

train_x, train_y = make_data(df[train_year])
test_x, test_y = make_data(df[test_year])

lr = LinearRegression()
⑤Create the model
lr.fit(train_x, train_y)
⑥Make predictions
pre_y = lr.predict(test_x)

⑦Plot the results
plt.figure(figsize=(10, 6), dpi=100)
plt.plot(test_y, c='r') # Actual data in red
plt.plot(pre_y, c='b') # Predicted data in blue
plt.savefig('temperature-lr.png')
plt.show()

⑧Calculate differences
diff_y = abs(pre_y - test_y)
print('Average Difference =', sum(diff_y) / len(diff_y))
print('Maximum Difference =', max(diff_y))
print('Minimum Difference =', min(diff_y))

Result
temperature-lr.png

avg= 1.6640684971954247
max= 8.471949619908472
min= 0.01187698362363232

The first small step in experiencing JavaScript

Takuro Goto — Sat, 05 Oct 2024 13:17:53 +0000

Today, I created my own account on this site, and I wanted to share a small step in learning JavaScript.

What I developed today is
Todo List

Hierarchical Structure Example is
my-todo-app/
│
├── index.html
├── style.css
├── script.js

Detailed Code is
index.html
<!DOCTYPE html>

Todo List in head

Todo List in body

add

style.css
body{
font-family:Arial, sans-serif;
margin: 20px;
}

input{
margin-right: 10px;
}

ul{
list-style-type: none;
padding:0;
}

li{
margin:5px 0;
}

script.js
document.getElementById('add-button').addEventListener('click', function() {
const input = document.getElementById('todo-input');
const newTodo = input.value;
if (newTodo) {
const li = document.createElement('li');
li.textContent = newTodo;
document.getElementById('todo-list').appendChild(li);
input.value = ''; // clear in input field
}else{
alert("type something please");
}
});

There is one input field and one button displayed on the screen when the client accesses index.html.

If the client fills in the input field with text and clicks the button, the text entered will be displayed on the screen.

If the client does not enter anything and clicks the button, an alert saying "Please type something." will pop up.

I believe these codes are very basic but useful for learning JavaScript. They especially help you understand the relationship between the HTML file and the JavaScript file (script.js), and how they interact with each other.