DEV Community: hirohata

Created My Portfolio

hirohata — Wed, 03 Jul 2024 18:36:38 +0000

Created My Portfolio

I recently built a system to automate the process of updating my portfolio and resume. This approach eliminates the need for frequent manual updates, ensuring that my online presence always reflects my latest accomplishments and skills.

Portfolio

Background

Initially, I set out to create a traditional portfolio website. However, during the planning stage, I realized that the core information for both a portfolio and a resume is essentially the same: showcasing my skills and experience. With this realization, I decided to explore a more integrated approach. This resulted in a system that automatically updates both my portfolio and resume whenever I update my resume content.

Structure

The diagram of this system's overview is the following:

My portfolio system leverages server-side rendering (SSR) within the Astro framework to ensure users always access the latest information. Here's how it works:

User Accesses Portfolio: When a user visits my portfolio website, the server hosting the portfolio initiates a call to my information API (details explained later).
API Data Extraction: The information API returns my most recent data.
Server-Side Rendering: Astro utilizes SSR to render the portfolio on the server, incorporating the fetched data from the API.
Fresh Content Delivered: The server then delivers the fully rendered HTML content, including the latest information, to the user's browser.

Modular System Design

My portfolio system is comprised of two well-defined modules, each housed in its own dedicated GitHub repository with integrated deployment via GitHub Actions to Cloudflare Pages or Cloudflare Workers.

Modules

Portfolio Frontend

This Astro-based module is solely responsible for the visual presentation of the portfolio. It retrieves and displays information from the information management module but doesn't store any user data itself.

Information Management Module

This comprehensive module manages all user information and related functionalities. It consists of four distinct components:

Information Storage

This component leverages TypeScript to define the structure and types for user data in JSON format. This file acts as a schema, ensuring data consistency and enabling type safety within the system. The user information itself is stored directly within this TypeScript file, utilizing the defined JSON structure.

Resume Generation

This component leverages Astro to dynamically generate a resume in HTML format based on the user's information. A subsequent automated process within GitHub Actions converts the HTML to PDF and ensures its deployment to both GitHub artifacts and Cloudflare.

REST API

This component, built with Hono and Swagger UI middleware, provides a RESTful interface for accessing and potentially manipulating user information.

GraphQL API

This component, built with GraphQL Yoga, offers a GraphQL interface for interacting with user data.

Summary

By providing my latest information as API, it allows users to create my portfolio as they like. So you can create a cool portfolio for me. I cannot wait to see my nice and cool portfolio site that will be created by YOU!😜

Created Result Type in TypeScript

hirohata — Wed, 15 Nov 2023 05:23:23 +0000

I created my result type. Repository / NPM

Motivation

Handling errors is a crucial aspect of creating reliable and readable code. While TypeScript (JavaScript) offers a try-catch syntax, it can be challenging to clearly recognize whether a function returns an error or not.
By using the Result type, we can explicitly express that a function has the potential to return an error.

In a recent personal project I joined, we opted for TypeScript. Consequently, we chose to implement and utilize the following Result type:

type Result<T, E> = {
    ok: true,
    value: V
} | {
    ok: false,
    error: E
}

const Ok = <T, E>(value: V): Result<T, E> => ({ ok: true, value });
const Err = <T, E>(error: E): Result<T, E> => ({ ok: false, error });

It works well in the code. We can explicitly express that a function may return an error state, allowing us to handle errors without using try-catch.


const result: Result<T, E> = someFunction();


if (result.ok) {
    // this result is inferred to the OK.
    // do something
} else {
    // this result is error.
    // do error handling.
}

However, this result type resulted in pain in testing.

When writing tests, there are instances where we need to create dummy objects convincing an 'OK' type. In such cases, we found ourselves needing to check if the result is 'OK' or 'Err' using an if-condition. If we attempt to access the value without checking the 'ok' field in the result type, the IDE raises a warning. This can be quite bothersome and affects code readability.


let okValue;

const result = someFunction();

if (result.ok) {
    okValue = result.value;
} else {
    // this is used in tests, so we don't need error handling.
    throw new Error("error message")
}

Created Result Type

To address this situation, I created my result type.


export type Result<T, E> = IOk<T> | IErr<E>;

interface IOk<T> {
    ok: true;
    value: T;
    unwrap(): T;
    unwrapOrElse(defaultValue: T): T;
    unwrapError(): never;
}

interface IErr<E> {
    ok: false;
    error: E;
    unwrap(): never;
    unwrapOrElse(DefaultValue: any): any;
    unwrapError(): E;
}

This key feature of this result type is an implementation of the unwrap method, inspired by Rust's approach. With this method, there is no longer a need to explicitly check the 'ok' field.


const okValue = someFunction().unwrap();

This result type significantly streamlines our development process.

Conclusion

The use of result type in TypeScript is a subject of much debate, and various packages have been created. In our specific use case, the result type I created meets our requirements satisfactorily at least.

I want to use Rust. 🦀🦀🦀

Creating an App for my wedding party

hirohata — Fri, 03 Nov 2023 08:45:48 +0000

I created an application for my wedding party.
The repository

Objective

To host a wedding party, it's necessary to communicate with the guests regarding details such as the date, venue address, and more.
While we've created invitations on paper, it's not very convenient for checking and sharing updated information.

In Japan, there's a tradition of writing messages to guests on the back of place cards.
However, it can be challenging for me because physical cards lack an "undo" button.

To address these issues, I've developed an application.

Considerations

Interface

The top priority of the interface is to ensure that it doesn't inconvenience our guests. Therefore, I opted for Line, a chat application. This application is widely used and installed on everyone's phone.

The Line has a webhook feature, and I've implemented communication using it.

Message delivery

Messages to guests must be delivered to the specific guests only. To achieve this, I opted to employ a combination of the user's ID and unique keyword for verifying guest inputs. These IDs are generated on Line and are transmitted via webhook, which I utilized.
The keyword essentially functions as a "password" shared with my wife or me and the respective guest, similar to a security question used when resetting a password.
We've written a question or an abstract image on the back of each place card to convey these secrets.
For instance, I've used the notation →↓↘+P, and the answer is "Shoryuken". This is intended for my guest who is a fan of Street Fighter.

This approach ensures that messages are delivered exclusively to the intended recipients.

Application hosting

I've set up the backend infrastructure on AWS, and the application's data is encrypted and stored in the database.

Input messages

We needed to compose messages for the guests.
While it was feasible to write them using the AWS-managed console, it wasn't very convenient for my wife.
Consequently, I developed a web page for crafting messages.
I designed a simple and cost-effective user interface (UI) solely for our use.
To safeguard the database, I made it mandatory to log in before accessing it.

Features

1. Static Information

The Line application provides "rich menus".
It is like a keyboard that can be assigned to arbitrary commands.
I created a "rich menus" with frequently asked questions assigned.

from top left: date time, venue, menu, groom profile, bride profile, seat

pushed: date time, venue

2. Message from Guests

When guests send a message, it's forwarded to the host's account.
In the host's account, the message format appears as follows: "{username} > {input message}".
This format allows us to easily identify who wrote what, facilitating the handling of any issues or inquiries that may arise.

Fortunately, we didn't encounter big trouble.

On the wedding day, this function served as the means of delivering messages to the guests.

3. Message from Hosts

When hosts send a message to the host's account, it is also broadcast to all guests.
This feature enables us to effortlessly inform all guests about any updates or important information.

For Entertain

All of the requirements have been met by the features.
Additionally, I've incorporated some extra features designed to entertain the guests.

Easter Egg Messages

This feature is quite similar to the messaging feature, but it's intended for sending messages to multiple guests.
The messages sent here are very informal and casual in nature.
For instance: IF guests send "Frozen", they get the answer "The season of the film is summer".

Images and Videos

This application supports images and videos.
When guests send images or videos to the application, the data is stored in AWS S3 storage.
Additionally, as a fun feature, guests sending data have a one-tenth chance of receiving an image that someone else uploaded
This feature was added for entertainment purposes and encouraged guests to share more images in the hopes of receiving images from others.

Thanks to this functionality, we were able to easily download all the images and videos the day after the wedding party, making it a convenient way to collect and share memories.

Summary

Due to the nature of this application, I couldn't receive feedback beforehand, which made me skeptical about whether it would meet the guests' expectations.
However, after the party, I'm convinced that this application greatly assisted both the guests and my wife.

Leet Code No.62

hirohata — Wed, 04 Oct 2023 20:50:48 +0000

Leet Code No.62

I'm not good at dynamic programming. So, I searched for it and wrote about it in this article.

Dynamic programming, short for DP, is the way that decompose big problems into small problems to solve. This is not a concrete algorithm like binary search or Gauss' addition and so on, it's like a method of solving problems.

To understand DP, solve some problems.

Problem

I chose this problem from the leet code.

Solution

The answer will be the total combination of m-1 and n-1. To understand, consider the target grid is 4 x 3.

Let's represent the movement as an arrow.
The robot can move right or down, so the possible moving will be the following:

The robot cannot go back, we just count the sum of the possible paths. To calculate the possible paths, I try to write the number in the grid the possibility. The top row will be 1.

The second and subsequent rows are different, there are multiple paths that exist. The number of possible paths will be the sum of the left grid and the above grid.

To continue this way, we can get the answer. In this case, the answer will be 10.

Write code

I solved this problem with Rust and TypeScript.
The solution is the following:

In Rust:

pub fn unique_paths(m: i32, n: i32) -> i32 {
    let mut grid = vec![vec![1; n as usize]; m as usize];


    for i in 1..(m as usize) {
        for j in 1..(n as usize) {
            grid[i][j] = grid[i - 1][j] + grid[i][j - 1];
        };
    }

    grid[(m - 1) as usize][(n - 1) as usize]
}

In TypeScript:

function uniquePaths(m: number, n: number): number {
    const grid = new Array(m).fill(new Array(n).fill(1));

    for (let i = 1; i < m; i++) {
        for (let j = 1; j < n; j++) {
            grid[i][j] = grid[i - 1][j] + grid[i][j - 1];
        }
    }

    return grid[m - 1][n - 1]

};

First, create a 2D array filled with 1. The reason for filing with 1 is the top rows and most left columns will be 1 and others are updated during the calculation.

Rust

let mut grid = vec![vec![1; n as usize]; m as usize];

TypeScript

const grid = new Array(m).fill(new Array(n).fill(1));

Then calculate the unique paths. The unique paths are calculated using the left and above cells as it was mentioned above. That is calculated by the loop.

Rust

for i in 1..(m as usize) {
    for j in 1..(n as usize) {
        grid[i][j] = grid[i - 1][j] + grid[i][j - 1];
    };
}

TypeScript

for (let i = 1; i < m; i++) {
    for (let j = 1; j < n; j++) {
        grid[i][j] = grid[i - 1][j] + grid[i][j - 1];
    }
}

In this way, the unique paths are calculated and the answer will be the most right and bottom cell.

Projects in 2015 - 2023

hirohata — Wed, 06 Sep 2023 00:05:31 +0000

Introduction

This article introduces my experience in 2015 - 2023. Now I quit my local country's company and came to Vancouver, Canada. Originally, I wrote this article for my college's task and I think that was a good opportunity to review my experience. However, it got too long to read for that purpose, so I decided to divide and post this independently. Only the parts that have permission to publish by ex-company are described.

Projects Index and Overview

I am writing this in 2023, and I have worked for 8 years on software-related works for now. I'll introduce 3 projects in this article that I'm passionate about. Besides these, there are other projects that I have experienced.
In a department that I belonged to, there was only one developer that is me. So, I worked from planning to maintenance and instructed other developers.

1.1. Visual Inspection Machine

To help workers work and to generalize inspection work, create a visual inspection machine.

1.2. Core Business System

This project started in 2020 the year of the COVID-19 pandemic. We had to change our work style from Onsite to Remote (Hybrid) without any cost. So, I created this system. I set the priority to speed rather than quality. Then I realized this system was (going to) the technical debit. Therefore, I had to redesign and refactor this system after this system was released.

1.3. IoT System

Data aggregation system. This system aggregates data on equipment or the environment of the factory, then visualizes and analyze it to prevent equipment defect. Finally, This system was merged into a company-wide system.

1.1. Visual Inspection Machine

Problem

In the factory where I worked, there are visual inspection process, and workers used a loupe to check parts and write down in parts detail on paper. This process seems difficult in addition this process is a critical process. But there were only two workers, a total worker of this team is five people, who could do this process at that time. Therefore this process sometimes could become a bottleneck.

Solution

I created a visual inspection machine. It is a fundamentally XY table that holds a web camera. I created it by modifying this kind of product. I chose the Raspberry Pi as the PC that controls the table because I need a digital I/O pin to communicate with the driver board of the table. We can know the coordination of parts and it can easily convert to a .csv file, so I created a GUI and a table control program using Python. Users (workers) just need to set a work and click a button. Then, the camera moves to target parts and the display of the PC (RPi) shows the parts with expanding

Using this machine, every member of the team can now do this work. And working time also reduced.

Skills

Python

1.2. Core Business System

Problem

In 2020, the COVID-19 pandemic covered the world, and we had to change the work style from Onsite to Remote (Hybrid). However, the department's system was created by MS Excel and MS Access. So, to share the data, a person who went to work had to upload that data to cloud storage and, persons who work from home downloaded it from a cloud. Some of those data sizes were over 1 GB, so downloading took sometimes 1 hour. At the same time, spending was curtailed so we couldn't prepare enough budget.
Creating a product needs several processes. maintenance master data, process-designing, publishing designed processes to workers, keeping a record of work (who and when did), and so on. These days, these are managed by some strongly bounded independent systems. To publish data to workers, papers were used which means someone has to print, write to it, scan, and upload data to some server(s).

Solution

We had to change this situation as soon as possible. It could handle this situation by hand but it was very time-consuming. To handle this situation, I reviewed the business process and created a new core business system using AWS.
The system is a serverless web system. In the first phase, it was quite simple, the backend was the web three-layer application and just handled CRUD using Python, and the frontend was React with Typescript. The interface between frontend and backend is GraphQL, but since this system is also used by legacy systems or tools, this system exposes read-only REST API. After I created this system, it seemed to work very well. The spending time related to is reduced 1000 hours/year and 1 person who works for ex-system.
And I noticed this system was very hard to maintain.

You already know the process of work is not stable. Some problems will come out, the restriction will change, and external environments force to change process. This application had just rolled out so there are many feedback from users. In addition, new requests came for new features that integrate with other systems.
As I mentioned above, I had to create a new system as soon as possible so my priority was speed rather than quality. But I realized that this was the wrong decision. It was hard to understand the overall picture, it was had poor models, and it hard to check influence when trying to make changes because I used Python as a backend language which has weak typing. Therefore I had asked permission to redesign and started creating version 2.
I adapted TypeScript as a backend language because it has a strong typing system and is already used to frontend and IaC (CDK). And I decided to adopt Domain Driven Development. Fortunately, I was familiar with the domain of my department's work, we could easily reach an agreement about definitions of each word (ubiquitous language). In addition, there was a plan that scale this system that developing a production planning system asking for outsourcing. Thus, I divided this system, into a microservice, and adapted an event-driven architecture to publish events to other systems.

Skills

Version 1: Python, React.js, TypeScript, AWS(Lambda, CDK, AppSync, API Gateway, Aurora Serverless)
Version 2: TypeScript, React.js, AWS(Lambda, CDK, AppSync, API Gateway, DynamoDB, Aurora Serverless, Event Bridge)

1.3. IoT System

Problem

For factory productivity, it is important to prevent machine defects or to gather data to determine the cause of some production defective. Actually, this project started as an experimental project. There was a few problems like some data was written down to papers and hard to access to it. But in most cases, there were few chances to need that kind of thing. Although 2018 this project started, it was also a fact that some factories get profit by preventing machine defects or detecting some problems not only with machines but also with products by correcting and analyzing data from equipment.

Solution

I created some small systems that were designed for a single kind of equipment and sensor. I think it worked well especially, with a checking mechanism we could know some bad conditions before it gets to the defect. Using this, we could reduce the cost and time spent on recovering defects.
Some years later after deploying those systems, similar needs emerged in other equipment. However, those systems were designed for each equipment thus I need to design a new system that will be more general.
Before explaining a new system, I would like to explain the data in this context. Generally, the equipment in the machine industry is controlled using PLC or the same kinds of devices. The equipment data is mainly generated by sensors and the PLC aggregates those data for controlling equipment. For example, if there was an equipment having a furnace. It may have temperature sensors and heaters and PLC gets temperature data and controls heaters if exceeds the temperature limit, heaters turn off. It means the PLC has numerical data.
The previous one was deployed on a server that I managed, but it was hard to manage it. The previous one has access to the PLC to extract data. To reduce management costs, the new system uses AWS and changes the data-extracting strategy. I created a server program that receives data from equipment and converts it to HTTP then send data with credential to AWS IoT Core. This program accepts UDP requests from equipment and extracts data from its datagram. Generally, the PLC cannot create HTTP requests or even if it can, the using it are very restricted and cannot modify but it has an L-4 connection TCP or UDP. Therefore I created a server program that accepts UDP requests from equipment. The frequency of requests from equipment is predicted to be less than 10 msec in the worst case, and this program will run on the shared PC in my department. What's more, the number of equipment was not predictable. Hence I had to create a light wait and avoid using a gavage collection so I used Rust for this server program.

The previous one accessed the PLC or sensor. This means when the change occurs (like when new equipment is installed, the new sensor is attached to equipment), the system must be changed. But there is a lot of equipment there and each equipment is assigned person in charge. So the target of the element (i.e. temperature, air pressure, and so on) must be decided by those people. Because those people have deep knowledge about equipment or problems with equipment but they don't have software knowledge. So, to change occur, the person in charge must ask me to update the program. It robs us of productivity and speed. So new one takes a strategy that just accepts data from equipment. Of course, it needs to change the settings of the program. But it is outsourced, so the person in charge can change settings themselves then the settings are reflected in the program.

This system works well and the same needs exist in other factories in the ex-company, as a result, this system is integrated into a company-wide system.

Skills

Previous one: Python, Django, TypeScript, React.js, MariaDB
New one: Rust, TypeScript, AWS(IoT Core, Kinesis Firehose, S3, CDK, API Gateway, DynamoDB, Aurora Serverless, Event Bridge)

Conclusion

This was a good opportunity to review what I did. I learned many things from these experiences. When I start a new project, I will remember these experiences to reduce unnecessary nightmare maintenance.