DEV Community: Shoki Ishii

Computer Networks: Protocol Layering and the OSI Model

Shoki Ishii — Mon, 20 May 2024 02:09:43 +0000

Protocol layering simplifies network protocols by dividing the functions into multiple layers, making it easier to manage and develop network systems.
This article introduces the protocol layering and the basic concept of the OSI model.

What is Protocol Layering?
Overview of the OSI Model
The Layers of the OSI Model and Their Functions
- Physical Layer
- Data Link Layer
- Network Layer
- Transport Layer
- Session Layer
- Presentation Layer
- Application Layer

What is Protocol Layering?

Protocol layering is a design approach that separates network functions into multiple layers that can perform complex tasks in simpler, manageable segments.
Each layer receives specific services from the lower layer and provides specific services to the higher layer after performing certain functions. This is like modulizing functions in software development, by separating functions, it simplifies the management of each service.
In network communication, the interactions between higher and lower layers are called "interfaces," while the interactions between the same layers across different systems are called "protocols."

Overview of the OSI Model

The OSI Model is a conceptual framework used to understand and implement standardized communications protocols in network systems. Developed by the International Organization for Standardization (ISO), the model divides the complexities of network communication into seven distinct layers: Physical, Data Link, Network, Transport, Session, Presentation, and Application. Each layer serves a specific function, working cooperatively with the layers above and below to provide a scalable and interoperable communication system. By segregating the network architecture into manageable layers, the OSI Model simplifies network design and ensures that different technologies can work together seamlessly.

(image from Windows network architecture and the OSI model)

3-1. Application Layer
This layer is responsible for handling the networking functions of applications. For example, in an email application, the functionality that allows messages to be sent is managed by this layer, whereas the process of writing messages is not related to this layer.

3-2. Presentation Layer
This Layer is responsible for translating data between the application layer and the network format. It ensures that data is presented in a format that the application layer can handle. For example, it converts data from a device-specific format to a network-friendly format. Additionally, you might have experienced issues reading a Word file due to version differences. This is usually a bug in this layer.

3-3. Session Layer
This layer establishes, manages, and terminates connections (or sessions) between applications. If communication is interrupted, it can restart or resume the session where it left off.

3-4. Transport Layer
This layer has a role in delivering data safely and reliably from one end system to another. It manages the flow of data, ensuring packets are sent in the correct order, and retransmits any lost packets. It's like ensuring that all friends traveling arrive correctly, without anyone getting lost anywhere.

3-5. Network Layer
This layer is responsible for delivering data to its intended destination across multiple network segments. It involves determining the optimal path for data transmission through various routers. Thanks to this layer, it selects the most efficient path to ensure the data reaches the correct destination efficiently and reliably.

3-6. Data Link Layer
This layer allows devices that are directly connected, like two computers on the same network, to talk to each other. It takes a series of bits (0s and 1s) and groups them into frames. These frames help send and receive data clearly and efficiently between devices.

3-7. Physical Layer
This layer converts a bit (a sequence of the digits 0 and 1) into high and low voltages or flashes of light, and conversely, converts high and low voltages or flashes of light back into bits.

Computer Networks: What is Protocol?

Shoki Ishii — Fri, 03 May 2024 15:12:10 +0000

'Protocol' is a term frequently used in discussions about computer networks, but have you ever paused to consider what it signifies and how it functions?
In this article, I will write about the very basic concept of 'protocol'.

What is the protocol?
Various Types of Protocols
Protocol for Packet Switching

What is the protocol?

In short, a protocol is a set of rules that computers follow to communicate. Just as you use English with your friends, knowing the rules of grammar, vocabulary, and pronunciation, computers also use specific rules for communication, which we call protocols.

If the protocol is different between computers, they cannot do data communications like you cannot communicate with people who use a different language.

Various Types of Protocols

Here are some examples of protocols:

1. IP (Internet Protocol)

Rules used for Internet-like communications

2. FTP (File Transfer Protocol)

Rules used for transferring files

3. SMTP (Simple Mail Transfer Protocol)

Rules used for sending emails

4. POP (Post Office Protocol)

Rules used for retrieving emails

5. IMAP (Internet Message Access Protocol)

Rules used for accessing emails

6. HTTP(Hypertext Transfer Protocol)

Rules used for viewing web pages

7. TCP (Transmission Control Protocol)

Rules used for secure communications

8. UDP (User Datagram Protocol)

Rules used for fast communications

Protocol for Packet Switching

Packet switching is the transfer of small pieces of data across various networks.

The process of packet switching in network communications is quite similar to the way parcels are handled in postal services. When sending data, attach a header to each packet of data, which contains not only the addresses but also a sequence number. These packets are easier to send across the network because they can travel independently of each other. Upon reaching their destination, these packets are then reassembled into their original form.

In my next post, I will write about the concept of protocol layering. This is a model that simplifies network protocols by dividing the necessary functions into seven distinct layers. By segmenting functions, this model helps to manage and optimize communications more efficiently.

Type-Safe Backends with TypeScript: Use Custom Error Handling

Shoki Ishii — Fri, 27 Oct 2023 06:26:21 +0000

Introduction

When working with TypeScript in backend applications (I use next.js), ensuring type safety is important. It not only makes your code less prone to errors but also enhances readability and maintainability. By leveraging TypeScript's advanced type features, we can create a more structured and type-safe error-handling pattern. In this article, I will explore a custom approach to error handling focusing on the backend.

Understanding the Proposed Type

This is the error handling type that I am using in my project.

type ValidValueType<T> = [T, undefined?];
type ErrorValueType = [undefined, Error];
export type ReturnValueType<T> = ValidValueType<T> | ErrorValueType;

Let me explain one by one.

The first line:

type ValidValueType<T> = [T, undefined?];

The first value is the assigned value of generic type T.
The second value is optional and can be undefined.

The second line:

type ErrorValueType = [undefined, Error];

The first value is undefined, indicating the absence of a successful return value.
The second value is an Error object, carrying details about the error that occurred.

The third line:

export type ReturnValueType<T> = ValidValueType<T> | ErrorValueType;

By combining these two types into ReturnValueType, we create a union type that can handle both successful and error returns in a structured manner.

Implementing the Custom Error Handling

Step 1: Setting Up the Function

Let's see the code example to know how it can be useful.
This is a simple function without error handling that can fetch User. (Non-essential parts are omitted for clarity.)

interface User {
 id: number;
 name: string;
// ...
}

const handler = async(req: Request, res: Response) => {
 const user = await retrieveUser(req.query.id);
}

const retrieveUser = async(id: number) => {
 const user = await findUser<User>(query); // find user with id
}

Step 2: Use the Custom Error Handling

Add the custom error type to the function.
In this case, I've added Promise> to retrieveUser.

interface User {
 id: number;
 name: string;
// ...
}

const handler = async(req: Request, res: Response) => {
 const [user, error] = await retrieveUser(req.query.id);
}

const retrieveUser = async(id: number): Promise<ReturnValueType<User>> => {
 const user = await findUser<User>(query); // find user with id
}

Step 3: Return the User to the handler

We only can return the User object thanks to the custom return type.

interface User {
 id: number;
 name: string;
// ...
}

const handler = async(req: Request, res: Response) => {
 const [user, error] = await retrieveUser(req.query.id);
}

const retrieveUser = async(id: number): Promise<ReturnValueType<User>> => {
 const user = await findUser<User>(query); // find user with id

 if(!user) {
 return [undefined, { name :"NotFound", message: `UserId ${id} was not found` }]
 }

 return [User]
}

Step 4: Return the response to the client

Finally, we just return the response to the client.

interface User {
 id: number;
 name: string;
// ...
}

const handler = async(req: Request, res: Response) => {
 const [user, error] = await retrieveUser(req.query.id);
 if(error.name === "NotFound") {
   return res.status(404).json(error.message)
 }
 if(error) {
   return res.status(500).json(error.message)
 }

 return res.status(200).json(user)
}

const retrieveUser = async(id: number): Promise<ReturnValueType<User>> => {
 const user = await findUser<User>(query); // find user with id

 if(!user) {
 return [undefined, { name :"NotFound", message: `UserId ${id} was not found` }]
 }

 return [User]
}

Through this process, we efficiently handle both successful responses and different types of errors, returning appropriate HTTP status codes and messages to the client. This approach not only makes the code more readable but also enhances the reliability of error handling in the application.

This is still a very simple implementation and you can customize more as you need. The real power of this approach lies in its customizability, adding metadata, customizing error types, and more.

Happy Coding!

未経験からアメリカでソフトウェアエンジニアになるまで

Shoki Ishii — Mon, 18 Jul 2022 17:23:21 +0000

僕は未経験から日本の大学（文系）を卒業後、約2年間エンジニアになるための勉強をしました。そして現在、アメリカのスタートアップでソフトウェアエンジニアとして働いています。僕自身の行動ベースですが、どうやってエンジニアになれたのかポイントを絞っておおよそ時系列順に紹介したいと思います。

これからアメリカでエンジニアを目指す方の助けになれば幸いです。

まずアメリカで働くには何が必要か、というところをはじめに簡単に紹介していますが、既にご存知の方は飛ばしてください。

1.

アメリカで働くために必要なもの

まずアメリカでエンジニアとして働くためには、重要順で
ビザ>技術力>英語力
だと個人的に思います。順番に僕の場合はどうやってここをクリアしたか書いていきます。

1-1.

ビザ

ここが一番重要かつ難易度の高いところです。いくつかアメリカで就労するための方法はありますが、ここに関しては割愛させていただきます。
ちなみに僕は、チートですが、アメリカ市民と結婚していたため、クリアできました。

1-2.

技術力

この記事ではここにフォーカスしています。
技術力以外にも、コネクションや経験的なところがアメリカでは重要視されるところがあるので、僕がどうやって0から作り上げたかを書いていきます。

1-3.

英語力

ここはとにかく頑張りました。ただ僕の面接の経験からすると、単語の豊富さや流暢さよりも何を考えているのかを伝えられることが大切だと思うので、面接対策で対応できることが多いかと思います。

2.

アメリカの会社にアプライするまで①行動面

ここからは実際に僕がアメリカでソフトウェアエンジニアになりたいと思い始めて、どうやって2年弱でエンジニアになれたかを書いていきます。
僕自身、ビザの問題がなかったというケースなので、一部参考にできないところもあるかと思いますが、実際にアメリカで就職できた人が行ったこととしてご覧ください。

2-1.

LinkedIn作成

まず第一歩として、
LinkedInというビジネス版Twitterのようなサービスにアカウントを登録しました。
ここに自分の経歴やスキルなどを載せておくと、オファーが来たり、また自分に合ったジョブリストを見られたりします。僕はLinkedInから数十社アプライして、3社ほど面接まで辿り着けました。

2-2.

コンピュータサイエンス系の学位取得

コンピュータサイエンスの学士号取得を目的に、University of the Peopleというオンラインの大学に通い始めました。
アメリカでは全てではないかもしれませんが、取得した学位が重要視される傾向があり、ソフトウェアエンジニアになるためにはコンピュータサイエンスの学部を卒業していることが条件となっている企業もあります。
ただ、オンラインの大学では、卒業してもアメリカで働くための資格(OPT)が取得できないため、卒業後のビザ目的としてUniversity of the Peopleはおすすめはできないです。

2-3.

必要なスキル情報の収集

LinkedInや、Indeed、AngelListなどアメリカの求人サイトへ行き、'software developer'には何が必要なのかの情報を集めました。
求人から何のスキルが必要かを見ることで、勉強する内容、どれくらいかかりそうか、が見えてきて計画を立てやすくなります。
Juniorレベル（経験年数が3年までくらい）の求人だと、

データ構造とアルゴリズムの理解
JavaScript, Python, Javaなどの理解、または開発経験
SQLおよびNoSQLの理解
RESTまたはGraphQLの理解と開発経験

などが条件となっているところが多い印象です。それらをまとめて何を勉強していくかの計画を立て、少しづつ勉強を進めていきました。

2-4.

コネクション作り

LinkedInや、Twitter、Facebook、オフラインなどでエンジニアコミュニティに入る、海外で働いている方に声をかけるなどで繋がりを増やしていきました。
繋がりからエンジニアとして成長できる機会ができたり、アメリカでの就職につながったりすることがあります。
僕の場合は、Yuyaさんというカナダで活躍されているエンジニアの方に出会い、アメリカでの就職が叶いました。
技術系の他にも、アメリカでの就職事情や、他のエンジニアコミュニティなど様々なことを教えてもらいました。そしてYuyaさんの紹介で、今の会社にも就職できました。今でも時々お世話になっていて、本当に良い出会いだったと思います。繋がりからチャンスが生まれる可能性もあるので是非、積極的に声をかけてみたり、コミュニティに参加してみたりしてほしいです。

2-5.

ブログ作成

勉強して学んだことを中心にブログ記事を書きました。
学習記録としてブログを書くことで、自分の勉強したことを整理できるだけでなく、考えるプロセス、勉強したことを形に残すことができます。それをポートフォリオに載せることで、考えるプロセスを面接官に伝えることができ、エンジニアとしてのポテンシャルをアピールできるのかなと思います。

2-6.

ポートフォリオ作成

自分のポートフォリオサイトを作成しました。
アメリカではアプライする時に多くの企業でポートフォリオサイトの提出を求められ、そこに自分のスキルや経験をまとめたサイトを提出します。
僕の場合は、

使えるスキル
今までの経歴
自分で作成したプロジェクト
ブログ記事をポートフォリオサイトに盛り込みました。

2-7.

面接対策

面接で何が聞かれるのかを調べ、対策をしました。
ジュニアポジションの場合、1. 行動に関する質問と、2. 基本知識に関する質問の二種類の質問があると思っていて、検索するとよくある質問集が出てくるので、どちらも対策をしました。
さらにLeetCodeでアルゴリズムの対策もしました。日本のSPIのような感じで練習量が結果に反映されるので、コツコツと勉強していきました。

3.

アメリカの会社にアプライするまで②技術面

下記では自分自身が使ったサービスベースに何を勉強したか簡単にまとめました。下記のサービスで学習した以外に本を読んだり、分からないところを調べたりしたので、これだけで充分ではないですが、基本的なCRUDアプリ(データの作成（Create）、読み出し（Read）、更新（Update）、削除（Delete）の機能があるアプリ)は作成できるようになると思います。

3-1.

コーディング

progateでHTML/CSS, JavaScriptの基本を押さえました。
そこまで多く時間は費やさず、1ヶ月ほどやった後、自分で何かのサイトの模写をして基本を学習しました。

3-2.

コンピュータサイエンスの基礎

Recursionというコンピュータサイエンスを学習できるサービスで、データ構造とアルゴリズム、オブジェクト指向、デザインパターンのようなコンピュータサイエンスの基礎を学習しました。
個人的には、このサービスのおかげで成長曲線を高められ、今でも学んだことが役に立っていると思います。
言語やフレームワークを学習する上でコンピュータサイエンスの知識が必要なことが多々あり、その辺りをカバーしているので、とても役に立ちました。

3-3.

プロジェクト作成

Udemyという学習教材サービスで、データベースやAPI、Google Cloud Platformなどの使い方を学習しつつ、プロジェクトを作成しました。
ここからは何のエンジニアになりたいか、などによって変わってくるかと思いますが、僕はサーバーサイドの知識を中心に学習していきました。
多くのコースでは、プロジェクト作成をしながら学習していきます。僕が必ずやっていてた方法は、コースで作成したプロジェクトに、自分で機能を追加することです。理解力に加え、自分で調べる力、考える力、考えたことを実装する力などがついていきます。
その後、自分オリジナルのアプリを作成し、技術力を高めていきました。

3-4.

アルゴリズム

leetcodeでアルゴリズム対策をしました。
面接対策でも書きましたが、アメリカの企業では、採用の第一ステップとしてアルゴリズムの問題が出されることがあります。ここは勉強して慣れることで対策できるので、少しづつ勉強しました。

3-5.

その他

これらの他にも気になる本を読んだり、知り合ったエンジニアの方に本をお薦めしてもらったり、記事を読んだりしました。ウェブの基礎、データベースの基礎、コードの書き方の基礎のような本を中心に読みました。
今も足りない知識だらけなので、本を読んだり、記事を読んだりして継続的に勉強をしています。

4. まとめ

かなりざっくりとした説明ですが、僕はこの記事で書いたことを実行してきました。

1. アメリカで働くために必要なもの

1-1. ビザ

1-2. 技術力

1-3. 英語力

2. アメリカの会社にApplyするまで（行動面）

2-1. LinkedIn作成

2-2. コンピュータサイエンス系の学位取得

2-3. 必要なスキル情報の収集

2-4. コネクション作り

2-5. ブログ作成

2-6. ポートフォリオ作成

2-7. 面接対策

3. アメリカの会社にApplyするまで（技術面）

3-1. コーディング

3-2. コンピュータサイエンスの基礎

3-3. プロジェクト作成

3-4. アルゴリズム

コツコツと勉強を進められることは前提に、アメリカでエンジニアになるためには手順を踏んで、勉強する方向性を決めることはかなり重要だと感じました。この記事がアメリカでエンジニアを目指している方の助けになれば幸いです。

Learn Advanced Types of TypeScript with type-challenges

Shoki Ishii — Mon, 22 Nov 2021 09:06:13 +0000

One distinctive difference between TypeScript and JavaScript is the difference in typing: JavaScript is dynamically typed, where the data type is determined at runtime, while TypeScript is statically typed, where the type is defined in advance.

While being able to type makes it easier to notice errors at compile time, there are many times when typing does not work. So, let's practice typing!

What I use through this article is open source of type-challenges by Anthony Fu

No.0 Hello World (example)

✳️Problem

/* _____________ Your Code Here _____________ */
type HelloWorld = any // expected to be a string

/* _____________ Test Cases _____________ */
import { Equal, Expect, NotAny } from '@type-challenges/utils'

type cases = [
  Expect<NotAny<HelloWorld>>,
  Expect<Equal<HelloWorld, string>>
]

In this case, you need to change this part type HelloWorld = any and remove the error.

✅My Solution

/* _____________ Your Code Here _____________ */
type HelloWorld = string // expected to be a string

/* _____________ Test Cases _____________ */
import { Equal, Expect, NotAny } from '@type-challenges/utils'

type cases = [
  Expect<NotAny<HelloWorld>>,
  Expect<Equal<HelloWorld, string>>
]

This is an easy one and you simply may change any to string

So now, let's start with easy level problems.

No.1 Pick

✳️Problem

/* _____________ Your Code Here _____________ */

type MyPick<T, K> = any


/* _____________ Test Cases _____________ */
import { Equal, Expect } from '@type-challenges/utils'

type cases = [
  Expect<Equal<Expected1, MyPick<Todo, 'title'>>>,
  Expect<Equal<Expected2, MyPick<Todo, 'title' | 'completed'>>>,
  // @ts-expect-error
  MyPick<Todo, 'title' | 'completed' | 'invalid'>,
]

interface Todo {
  title: string
  description: string
  completed: boolean
}

interface Expected1 {
  title: string
}

interface Expected2 {
  title: string
  completed: boolean
}

To solve this problem, you need to use Mapped types and Lookup types.

Mapped types

The basic form of Mapped Types is { [P in K]: T }. P is an identifier that can be used in T. K should be a type that can be assigned to string, and T is some type that can use P as a type parameter.
It is a little bit hard to understand, so let's think about the word map.
As map is literally used in TypeScript like array.map(), the type is also mapped like below.
K = 'title' | 'completed' | 'invalid'
K.map(k => return {k : T})
Other examples are below:

type Item = { a: string, b: number, c: boolean };

type T1 = { [P in "x" | "y"]: number };  // { x: number, y: number }
type T2 = { [P in "x" | "y"]: P };  // { x: "x", y: "y" }
type T3 = { [P in "a" | "b"]: Item[P] };  // { a: string, b: number }
type T4 = { [P in keyof Item]: Date };  // { a: Date, b: Date, c: Date }
type T5 = { [P in keyof Item]: Item[P] };  // { a: string, b: number, c: boolean }
type T6 = { readonly [P in keyof Item]: Item[P] };  // { readonly a: string, readonly b: number, readonly c: boolean }
type T7 = { [P in keyof Item]: Array<Item[P]> };  // { a: string[], b: number[], c: boolean[] }

Here is more about Mapped types.

Lookup types

A lookup type, also called an indexed access type, allows access to the type of a given key. It is similar to the way you access the value of an object property, but you can access the type.

keyof

keyof T can describe means "the direct sum type of type T".

For example,

interface Person {
  name: string;
  age: number;
}

type PersonKey = keyof Person;

In the example above, PersonKey can be a type 'name' | 'age'.
So in this problem, you can let K extend T, that is 'title' | 'description' | 'completed'.

Applying these features to this problem, my solution got following:

✅My Solution

/* _____________ Your Code Here _____________ */

type MyPick<T, K extends keyof T> = {[P in K]: T[P]}

/* _____________ Test Cases _____________ */
import { Equal, Expect } from '@type-challenges/utils'

type cases = [
  Expect<Equal<Expected1, MyPick<Todo, 'title'>>>,
  Expect<Equal<Expected2, MyPick<Todo, 'title' | 'completed'>>>,
  // @ts-expect-error
  MyPick<Todo, 'title' | 'completed' | 'invalid'>,
]

interface Todo {
  title: string
  description: string
  completed: boolean
}

interface Expected1 {
  title: string
}

interface Expected2 {
  title: string
  completed: boolean
}

It may take some time to understand, but let's go to look at the next problem.

No.2 Readonly

✳️Problem

/* _____________ Your Code Here _____________ */

type MyReadonly<T> = any


/* _____________ Test Cases _____________ */
import { Equal, Expect } from '@type-challenges/utils'

type cases = [
  Expect<Equal<MyReadonly<Todo1>, Readonly<Todo1>>>,
]

interface Todo1 {
  title: string
  description: string
  completed: boolean
  meta: {
    author: string
  }
}

This problem is also a bit similar to the previous one. The main difference is the position of typeof.

In MyPick<T, K extends keyof T>, the constraint type(=K) ({ [P in K]: T }) extends keyof T. But in this case, the constraint type(=K) itself is keyof T.

Depending on the definition (type variable) such as MyPick and MyReadonly,keyof is put in different place.

✅My Solution

/* _____________ Your Code Here _____________ */

type MyReadonly<T> = {readonly [P in keyof T]:T[P]}


/* _____________ Test Cases _____________ */
import { Equal, Expect } from '@type-challenges/utils'

type cases = [
  Expect<Equal<MyReadonly<Todo1>, Readonly<Todo1>>>,
]

interface Todo1 {
  title: string
  description: string
  completed: boolean
  meta: {
    author: string
  }
}

No.3 Tuple to Object

✳️Problem

type TupleToObject<T extends readonly any[]> = any


/* _____________ Test Cases _____________ */
import { Equal, Expect } from '@type-challenges/utils'

const tuple = ['tesla', 'model 3', 'model X', 'model Y'] as const

type cases = [
  Expect<Equal<TupleToObject<typeof tuple>, { tesla: 'tesla'; 'model 3': 'model 3'; 'model X': 'model X'; 'model Y': 'model Y'}>>,
]

// @ts-expect-error
type error = TupleToObject<[[1, 2], {}]>

You need to know you can get each value from an array by using T[number]. For example, from an array ['tesla', 'model 3', 'model X', 'model Y'], you can get each element by using T[number]. And then, with Mapped types, you can create an object like {[P in T[number]]:P}

✅My Solution

type TupleToObject<T extends readonly any[]> = {[P in T[number]]:P}


/* _____________ Test Cases _____________ */
import { Equal, Expect } from '@type-challenges/utils'

const tuple = ['tesla', 'model 3', 'model X', 'model Y'] as const

type cases = [
  Expect<Equal<TupleToObject<typeof tuple>, { tesla: 'tesla'; 'model 3': 'model 3'; 'model X': 'model X'; 'model Y': 'model Y'}>>,
]

// @ts-expect-error
type error = TupleToObject<[[1, 2], {}]>

No.4 First of Array

✳️Problem

/* _____________ Your Code Here _____________ */

type First<T extends any[]> = any

/* _____________ Test Cases _____________ */
import { Equal, Expect } from '@type-challenges/utils'

type cases = [
  Expect<Equal<First<[3, 2, 1]>, 3>>,
  Expect<Equal<First<[() => 123, { a: string }]>, () => 123>>,
  Expect<Equal<First<[]>, never>>,
  Expect<Equal<First<[undefined]>, undefined>>
]

In this problem, you can use T[number] which I explained in the previous problem.
And to solve this problem, conditional types are necessary for the handling of an empty array.

✅My Solution

/* _____________ Your Code Here _____________ */

type First<T extends any[]> = T[number] extends never?never:T[0]


/* _____________ Test Cases _____________ */
import { Equal, Expect } from '@type-challenges/utils'

type cases = [
  Expect<Equal<First<[3, 2, 1]>, 3>>,
  Expect<Equal<First<[() => 123, { a: string }]>, () => 123>>,
  Expect<Equal<First<[]>, never>>,
  Expect<Equal<First<[undefined]>, undefined>>
]

The short explanation of this is:

Get each value from an array by using T[number]
Because T[number] extends never, the default is never
Check if there is no value in the array by conditional type
If no value (=left side), never is returned
Else, the first of array is returned

No.5 Length of Tuple

✳️Problem

/* _____________ Your Code Here _____________ */

type Length<T extends any> = any

/* _____________ Test Cases _____________ */
import { Equal, Expect } from '@type-challenges/utils'

const tesla = ['tesla', 'model 3', 'model X', 'model Y'] as const
const spaceX = ['FALCON 9', 'FALCON HEAVY', 'DRAGON', 'STARSHIP', 'HUMAN SPACEFLIGHT'] as const

type cases = [
  Expect<Equal<Length<typeof tesla>, 4>>,
  Expect<Equal<Length<typeof spaceX>, 5>>,
  // @ts-expect-error
  Length<5>,
  // @ts-expect-error
  Length<'hello world'>,
]

The point in this problem is that you need to use readonly. As you can see from as const in the case data, the passed value is a tuple type, which you cannot make any change on it.
Since it is a tuple type, you need to add readonly to guarantee that the length of the array will not change.

Also, for T["length"], it is referring to the length property of the tuple type.

✅My Solution

/* _____________ Your Code Here _____________ */

type Length<T extends readonly any[]> = T["length"]

/* _____________ Test Cases _____________ */
import { Equal, Expect } from '@type-challenges/utils'

const tesla = ['tesla', 'model 3', 'model X', 'model Y'] as const
const spaceX = ['FALCON 9', 'FALCON HEAVY', 'DRAGON', 'STARSHIP', 'HUMAN SPACEFLIGHT'] as const

type cases = [
  Expect<Equal<Length<typeof tesla>, 4>>,
  Expect<Equal<Length<typeof spaceX>, 5>>,
  // @ts-expect-error
  Length<5>,
  // @ts-expect-error
  Length<'hello world'>,
]

Now, you can solve the problems with the knowledge introduced so far.

I will quickly explain other problems that can be solved with the knowledge

No.6 If

✳️Problem & ✅My Solution

/* _____________ Your Code Here _____________ */
// type If<C, T, F> = any //original code
type If<C, T, F> = C extends true?T:F


/* _____________ Test Cases _____________ */
import { Equal, Expect } from '@type-challenges/utils'

type cases = [
  Expect<Equal<If<true, 'a', 'b'>, 'a'>>,
  Expect<Equal<If<false, 'a', 2>, 2>>,
]

// @ts-expect-error
type error = If<null, 'a', 'b'>

First, make C extend true, then simply write the conditional type.

No.7 Concat

✳️Problem & ✅My Solution

/* _____________ Your Code Here _____________ */
// type Concat<T, U> = any //original code
type Concat<T extends any[], U extends any[]> = [...T, ...U]


/* _____________ Test Cases _____________ */
import { Equal, Expect } from '@type-challenges/utils'

type cases = [
  Expect<Equal<Concat<[], []>, []>>,
  Expect<Equal<Concat<[], [1]>, [1]>>,
  Expect<Equal<Concat<[1, 2], [3, 4]>, [1, 2, 3, 4]>>,
  Expect<Equal<Concat<['1', 2, '3'], [false, boolean, '4']>, ['1', 2, '3', false, boolean, '4']>>,
]

This solution is using a spread operator, and concat the two arrays.
For the type definition, because both arrays can have any type, they will extend any[].

No. 8 Push

✳️Problem & ✅My Solution

/* _____________ Your Code Here _____________ */
// type Push<T, U> = any // original code
type Push<T extends any[], U> = [...T, U]

/* _____________ Test Cases _____________ */
import { Equal, Expect, ExpectFalse, NotEqual } from '@type-challenges/utils'

type cases = [
  Expect<Equal<Push<[], 1>, [1]>>,
  Expect<Equal<Push<[1, 2], '3'>, [1, 2, '3']>>,
  Expect<Equal<Push<['1', 2, '3'], boolean>, ['1', 2, '3', boolean]>>,
]

First, let T extend any[] because the array can have any type of value. Then, by using a spread operator, you can connect T and U like [...T, U].

Summary

You can continue to see the other problems here.

In addition to mapped types and lookup types, there are a variety of other type specifications, so please check them out as you try.

What Makes Your Code More Readable I

Shoki Ishii — Tue, 16 Nov 2021 13:28:35 +0000

Are you naming variables too casually, or writing code without caring about the feelings of reviewers?
This article is divided into several chapters with examples on how to make your code more readable, based on what I understood from the book "The Art of Readable Code".
(Boswell, D., Foucher, T. (2012). The Art of Readable Code. O'Reilly. )

Packing Information into Names
1-1. Choose Specific Words
1-2. Avoid Common Names Such as tmp and val
1-3. Decide Variable Length According to the Scale of the Scope
Naming Clear Variables to Avoid Misunderstandings
2-1. Avoid to Use Ambiguous Words
2-2. Use min and max For Limits
2-3. Use Words Like is and has for boolean Variables

Why Readable Code Is Important

I think all you know the code should be readable, but have you thought about specific advantages of readable codes?
That is simply understandable and easy to review the code. Even you develop your app in your own, the reviewer may be you after a year.
Some of advantages of readable code are:

Less time consuming to debug
Easy to understand for reviewers
Easy to maintain
Easy to extend new function

Now let's see what and how you can make the code more readable.

1. Packing Information into Names

When you name a variable, you need to include information about the value. However, not just anything related to the value can be used, and there are a few tips on how to name them.

1-1. Choose Specific Words

For variables, you should choose specific words by thinking of WHAT, WHERE, sometimes HOW.
For example, the word 'get' is unclear in some cases:

❎
const getFiles = ()=>{...}

This may be understandable for a small application, but for a large application, there may be various scenes where you need to retrieve files.
So,

✅
const downloadFiles = ()=>{...};
const fetchFiles = ()=>{...};

this is more readable since readers know what the function does and returned values are easily.

Another example is

❎
let size;

✅
let areaSize;
let height;
let memoryBytes;

In this way, by having specific information in the variable name, it becomes easier to understand what the variable is for.

1-2. Avoid Common Names Such as `tmp` and `val`

Names like tmp and val are not desirable because they almost do not mean anything. And reviewers need to track what it has.
For example,

❎
function averageScore(participants) {
  // you need to track what it is
  let val;
  participants.map((participant) => {
    val += participant.score;
  });

  return val / participants.length;
}

In the example above, val doesn't have much information, and as a result, you have to keep track of what goes into the value of val every time you see the code.
So using a specific name like sumScore in this case is much better instead of using val to tmp:

✅
function averageScore(participants) {
  // you know what it will have
  let sumScore;
  participants.map((participant) => {
    sumScore += participant.score;
  });

  return sumScore / participants.length;
}

However, tmp or val can be used in some cases, especially for short-lived storage.
For example, in swapping,

✅
function swap(left, right) {
  let tmp = left;
  left = right;
  right = tmp;
}

Because tmp is only used in 3 lines in the function, this is fine.

1-3. Decide Variable Length According to the Scale of the Scope

The length of the variable should be determined according to the scope of use.
For a short scope like 5 lines, it is better to use a short name because you can check what the variable is for easily.
On the other hand, if the variable is used in a large scope, it is better to name the variable with the necessary information so that it can be understood anytime and anywhere.

❎
function eatFood() {
  let amountOfFoodPersonCanEat = 0;
  for (let i = 0; i < Math.floor(Math.random() * 10); i++) {
      amountOfFoodPersonCanEat++;
    }
    console.log('Eat ' + amountOfFoodPersonCanEat + ' apples');
   return
  }

In the example above, amountOfFoodPersonCanEat is shorted-lived and used one time. In that case, a shorter variable name is totally fine.

✅
function eatFood() {
  let amount = 0;
  for (let i = 0; i < Math.floor(Math.random() * 10); i++) {
      amount ++;
    }
    console.log('Eat ' + amount + ' apples');
   return
  }

amount is enough to understand what it has in this short scope code.
But in contrast, if you use the variable in other functions or keep using it in the function, you might want to name like amountOfFoodPersonCanEat.

✅
let amountOfFoodPersonCanEat = 0;
function eatFood() {
  for (let i = 0; i < Math.floor(Math.random() * 10); i++) {
    amountOfFoodPersonCanEat++;
  }
}
amountOfFoodPersonCanEat = eatFood();
.
.
.

2. Naming Clear Variables to Avoid Misunderstandings

"Will someone misinterpret this name to mean something else?" That's what you need to think when choosing a name.

2-1. Avoid to Use Ambiguous Words

filtered...

You may want to use filteredArray or filteredObj for filtered arrays or objects. As I mentioned before, that's fine for short-lived variables. But it may cause misunderstandings or confusion whether filteredArray is a selected array or a deleted array. Therefore when you want to mean select out array for a variable, it may be better to use selectedArray. Also, removedArray, for example, should be used to mean removed array.

❎
const filteredArray = (arr)=>{...}

✅
// These are crystal clear what the arrays are
const selectedArray = (arr)=>{...}
const removedArray = (arr)=>{...}

sliced..., spliced..., clipped... etc.

As same as filtered..., all the words could be misunderstood. So you may want to use something like slicedResultArr and excludedArr.

❎
// It may cause misunderstanding
const slicedArray = (arr)=>{...}
const splicedArray = (arr)=>{...}
const clippedArray = (arr)=>{...}

✅
const slicedResultArr = (arr)=>{...}
const excludedArr = (arr)=>{...}

2-2. Use `min` and `max` For Limits

Putting max_ or min_ in front of what is restricted is a good way to mean limits.
For example, limitNum = 5 may lead misunderstanding in some situations. It could be a minimum value, it could be a maximum value.

❎
let limitNum = 5;
if (boxSelected < limitNum) {
  console.log('Not enough');
}
// or
if (boxSelected > limitNum) {
  console.log('Too much');
}

In the example above, it gets harder to know that limitNum is for a minimum value or maximum value.
So you just simply want to add min or max as a prefix.

✅
let minLimit = 5;
if (boxSelected < minLimit) {
  console.log('Not enough');
}

let maxLimit = 5;
if (boxSelected > maxLimit) {
  console.log('Too much');
}

Now, you know what the variables are and the code is simple and clear.

2-3. Use Words Like `is` and `has` for boolean Variables

This is one of the common rules but let me shortly explain it.
Generally, at least in English, for a question beginning with 'Is this ~~~?' and 'Do you ...?', you answer with 'Yes/No'. In this way, boolean variables should also be asked as is~, can~, or has~ (has is common instead of do).
For example, the following variables are difficult to guess if they have a boolean value.

❎
let dragOver = false;
let updatable = true;
let itemsExist = false;

Instead of these, you should use keywords to easily guess 'Yes/No'

✅
let isDragOver = false;
let canUpdate = true;
let hasItems = false;

Summary

In this article, as a first chapter, I summarized the basic tips that makes your code readable.

Packing Information into Names
1-1. Choose Specific Words
1-2. Avoid Common Names Such as tmp and val
1-3. Decide Variable Length According to the Scale of the Scope
Naming Clear Variables to Avoid Misunderstandings
2-1. Avoid to Use Ambiguous Words
2-2. Use min and max For Limits
2-3. Use Words Like is and has for boolean Variables

Be careful in naming variables so that people reading your code will easily understand what you write as you intend. As a developer, you always need to consider the possibility of misunderstanding.

I will keep writing how you can improve your code readability.
Reference:
Boswell, D., Foucher, T. (2012). The Art of Readable Code. O'Reilly.

REST APIs and Designing Best Practices

Shoki Ishii — Mon, 01 Nov 2021 07:45:09 +0000

APIs (Application Programming Interfaces) are necessary for applications or devices to connect and communicate with each other.

In this article, I will explain what REST Api is, which is vary popular one, and the best practice of designing it.

What is REST?

History of REST

REST was born in 2000, after SOAP.
Amazon started to use REST in 2003, and REST started to be used gradually instead of SOAP.
REST is superior to SOAP in some ways, such as the ability to use caching, better performance due to statelessness, support for many formats such as JSON and XML, and the ability to check operations by simply entering a URI, but security is inferior to SOAP in some cases.

REST Api and Architecture Style

REST is an abbreviation for Representational State Transfer, which was first announced by Roy Fielding in 2000.

It is one of the architectural styles.

What is architectural styles?

Architectural style is a design guideline, and just as there are Japanese and European architectural styles, there are various architectural styles.
There are many other architectural styles, such as object-oriented architecture style, microservice architecture style, etc.

REST is a combination of multiple architectural styles such as client-server architecture style, tiered architecture style, cache architecture style, etc.

Features of REST

REST has the following features:

Published with addressable URI.
- Accessible by URI, such as https:/○○○○/example/rest/01
- Responded in JSON or XML
The interface must be unified in the use of HTTP methods
- Data can be used by using methods such as GET, POST, PUT, DELETE, HEAD, etc.
Statelessness
- All information is thrown in the request, and the server does not retain the session information.
- This makes it possible to reserve server resources and change servers flexibly according to the load of requests
Ability to connect to other information if the resource URI is known
- The information being requested can contain hyperlinks. It is possible to connect from one link to another, and RESTful systems can smoothly link information to each other.
Return processing results in HTTP status code
- Return results in status codes such as 200 (OK), 403 (Forbidden), 404 (Not Found), etc.

Web services that implement this architectural style of REST are called RESTful services.
The HTTP calling interface of a web system built according to such REST principles is called a REST API.

Best Practice of Development of REST API

The detailed rules may vary depending on your development team, but these are the basic rules:

Give names that are easily understood by humans.
Add a noun to the end of the URI, not a verb.
Give Nouns in the URI plural.
Return the processing result as an HTTP status code.
Include the API version in the URI.

So let's talk about it more with examples.

Step1. Give names that are easily understood by humans

1-1. Reveal that it's URI of api and don't duplicate words

ex)
❎ http://*api*.example.com/services/*api*/
✅ http://api.example.com/services/
✅ http://example.com/services/api

1-2. Unify the rules

If URI to obtain friend information is using a query parameter http://api.example.com/friends?id=100,
　
URI to post a message to the friend also should be using a query parameter　　　
✅ http://api.example.com/friends/messages?id=100.

Should not be
❎ http://api.example.com/friends/100/messages

and vise versa.

1-3. Avoid to create deeply nested URIs

ex)
❎ https://api.example.com/sports/1/players/2/friends
✅ https://api.example.com/players/2/friends
The further to the right URI goes, the more resources it will have as a subset.

Step2. Add a noun to the end of the URI, not a verb

GET method:
❎ https://api.example.com/v1/getItems
✅ https://api.example.com/v1/items

POST method:
❎ https://api.example.com/v1/news/createArticles
✅ https://api.example.com/v1/news/articles

Like these examples, avoid using verbs at the end of URIs as much as possible, since they are semantically understood by using the HTTP method at the time of the request.

Step3. Give Nouns in the URI plural

❎ https://api.example.com/v1/item/01
✅ https://api.example.com/v1/items/01

Generally, resources in a path are not one, but sets, like items (= multiple), so always use the plural form consistently.

Step4. Return the results with an HTTP status code

When an error occurs, return the processing result in the HTTP status code so that the API user can understand the cause of the error.

For example, the famous one 404 Not Found will be returned when the endpoint is valid but the resource itself does not exist.
For more information about HTTP status code, you can check it out here

Step5. Include the API version in the URI

The version of the API should be included. This will prevent users from being affected if the API changes over time.
Version management will allow you to change the API structure without compromising compatibility.

Summary

That's about REST and the best practice of designing Rest API. I think the rules are slightly different depending on the team, but I hope it helps you.

Set Your First Alias Command in Mac Terminal(+ z command)

Shoki Ishii — Thu, 28 Oct 2021 15:21:13 +0000

Setting aliases can help you type more efficiently and work faster. In this article, I will explain what aliases are and how to set them from the beginning. And finally, I will introduce some aliases that will help you in your coding life.

Purpose

Understand what an alias is
Set your first alias and use it
Custom some other useful aliases

In the following, I will use the term "terminal" regardless of the type of shell, assuming a UNIX-like OS environment such as Mac or Linux.

1. What an alias is

As it turns out, aliases are like shortcut keys in the terminal.
Just like command+x to cut text and command+v to paste on Macbook, the terminal also has shortcuts.
For example, git branch is one of the most common commands to see what branch you are on. However, typing git branch every time is a bit tedious, isn't it? So, if you create an alias, you can use the git branch command just by typing gb.

2. Set your first alias and use it

Step1. Open your .zshrc file

First, open the terminal, and type


 ~/.zshrc

Then, you may see something and you may not find any in the file.

Step2. Learn a bit about commands in Vim.

If you are knowledgeable about vim commands, you can skip this step.
Vim is one of the editors, just like Visual Studio Code, and by typing commands, you can change modes and perform operations such as editing and saving.

Followings are common commands in Vim editor:



i 
// Insert mode: Start editing from where the cursor is

This is one of the most commonly used commands for changing.



esc
// Exit insert mode:Pressing Esc key will exit insert mode.



dd
// Delete and copy the line containing the cursor



$
// Move the cursor to the end of the line.



p
// Paste the copied content after the cursor position



:wq
// Save your edits and then close Vim. 
// If you don't save your edits, :q works.

There are much more commands to edit in Vim, and you can search others if you are interested in.

Step3. Write an alias

For now, I will show you how you can write an alias for your terminal command.
Basically, you can register an alias in the file you just created with alias name = "command to execute".
For example, if you want to make an alias of clear command, which will clean your terminal, you just write alias c="clear" in insert mode. Then press the esc key, and enter :wq to save and close Vim.

Step4. Apply the change and use the alias

To apply your changes, you need the command source ~/.zshrc.
After applying the changes with the command, you can now use c to clear in your terminal.
Of course, you can also customize other commands to be as short as you like.

3. Custom some other useful aliases

Now that you know how to create aliases, let's list some aliases that will speed up your work.



alias g="g"
alias cm="commit -m"
alias gb="git branch"
alias gbD="git branch -D"
alias st="git status"
alias gp="git pull"
alias gs="git switch"
alias gpo="git push origin"

alias ..="cd ../"
alias ....="cd ../../"
alias ......="cd ../../../"

alias ni="npm i"

Bonus Tier z command

z command is a tool that saves the history of directory names that were once moved by cd, and moves to the directory by simply typing part of the directory name.

Moves by cd will be saved in ~/.zshrc, and you will be able to move to any directory there at once.

For example, once you move the directory myFile, the directory name is stored in ~/.zshrc. After that, you can access to myFile directory wherever you are by z myFile. (Only z myF also works.)

Install z command



brew install z



vim ~/.zshrc

type i to change to insert mode



# z
. `brew --prefix`/etc/profile.d/z.sh

Press esc key, and type :wq to save and quit.

Then, source ~/.zshrc to apply the change.

Now, you can use z command.

Summary

Setting aliases are very helpful for your work.
Why don't you make more aliases for commands frequently using to improve your work efficiency?

What Should Be on Your Portfolio Site?

Shoki Ishii — Mon, 04 Oct 2021 10:17:26 +0000

What is a portfolio site?

When you apply to a company, you will usually be asked to submit a portfolio site. This will provide professional information about you, such as your experience and skills.

So, what should you put on your portfolio site?

For developers, especially entry-level developers, this may be a question that needs to be answered.
In this article, I will list the things you should put on your portfolio site.

Elements You Should Put

First of all, as a premise, a portfolio can be one of the points to be looked at in the hiring process, but a good portfolio does not necessarily mean that you will get an offer.

In addition to your portfolio that shows your skills and experiences, it is also important to know how well you fit in and how much you can immerse yourself in the company's culture.

Point 1 - Introduction 1

1-1 Introduce who you are

The first introduction should be short and simple.
Shortly write who you are, what you can do, what you have done, and other skills and experiences.
You do not need to list all specific names yet, such as languages or projects you worked on.

Example:
Instead of
I build a lot of applications using React, Node.js, TypeScript, Python, and Java for 2 years. Applications I built are including ~~. I like working on the backend, but I prefer the frontend, and I write a lot. And ~~,

it should be
full-stack developer with 2 years of experience.
Love to contribute to open source project.
Like this, write a simple statement that shows who you are.

1-2 Contact Information

In addition to your email address, it is also a good idea to include your social networking accounts such as Github and LinkedIn.
They will be able to see your background and experience and contact you.

Point 2 - Introduction 2

2-1 Describe your skills and experience in a little more detail

In the next section, you provide your skills and experiences.
But it is also not too long.
If you write a long and detailed history, the hiring manager is likely to be too busy to read it all.
So, for each position, write 1-2 sentences and show the important points.

2-2 Doesn't have to be too detailed.

If it is not a key point, you don't have to write everything too detailed.
For example, you don't need to write html5 or css3, just html/css.

Point 3 - Your projects

3-1 Put the projects you created here.

The important point is not what you created, but rather the process of what code you wrote and why you created it.
For example,
instead of
I created this app using react, nodejs.,

you can say
I have understood how to implement the drag-and-drop feature with database through creating this todo list

It's important to show why you created it and show hiring managers what you are thinking.

3-2 About three projects are enough to be listed

You don’t need to put ten projects, but three of your best apps are enough to show how much code you’ve written and understand.

Point 4 - Your articles

4-1 Putting up your blog posts is a great idea

Blog posting is a great way to show how much you understand about a concept or a language deeply.
For example, if you have written a few posts about database’s data types, it is already a good proof showing that you have a deep understanding of databases.

Recap

These are the elements you should put on your portfolio site. This may not be the only way to necessarily perfect your portfolio, but it is one of the ways to create a good portfolio. I hope this helps.

How to Update the Database After a Drag-and-Drop Operation

Shoki Ishii — Mon, 04 Oct 2021 08:17:21 +0000

I researched what happens in the database behind the scenes when drag & drop is done and what happens to the data after the drag & drop.
In this post, I will write about the database operations when dragging and dropping through the implementation of a to-do list.

This is a demo for this post

You will see that the order of tasks will not change even after reloading.

Overview

Problem

Even after changing the order of tasks by drag & drop, the drag & drop order change is not saved when reloading.

Solution

When you do drag and drop, you need to operate the database on the backend side in addition to the frontend side.

How It Works

Step 1. Add a column to the database to control the order

Create a column called index_number in the table. Then, when the task is stored in the database, it will have the number index_number in addition to the id and content.

Step 2. Fill the newly created column with data

When adding the new data,
Case1. if there are no rows in the table,
Insert index_number = 1024

Case2. if the table has at least one row,
Set index_number = current maximum index_number + 1024

This will lead you to create a database table as shown below:

Step 3. Perform drag and drop, update `index_number` of dragged and dropped element

Once you make some data in the table, start the server up and perform drag & drop. In the above figure, for example, if you want to put “study” between “eat” and “sleep” by dragging and dropping,
set (3072(eat) + 4096(sleep)) / 2
as the new index_number for “study”.

(3072 + 4096) / 2 = 3584 ← This will be the new index_number for “study”. The table will be updated as follows:

Step 4. Use ORDER BY when retrieving and displaying the table

By querying this table with “ORDER BY index_number”, you can retrieve the data in ascending order by index_number. Thus, even if the order is changed by drag-and-drop and then reloaded, the order is preserved.

Step 5. If `index_number` overlaps

After dragging and dropping a task, the task’s index_number is calculated by taking the average of index_numbers of the task above and the task below.

So sometimes, the index_number of two tasks may overlap.

Only in this case, it is necessary to arrange the entire table in order of decreasing index_number, and then reassign the index_number by *1024.

Implementation

Languages and libraries used

Frontend
・JavaScript
・SortableJS
Backend
・Node.js
・MySQL

File Structure

Step1. Install the necessary npm

npm i express mysql2 path body-parser util dotenv --save
npm i nodemon --save-dev

Step2. Write a CRUD function for the To-Do list

The code for editing and deleting tasks and retrieving a single piece of data is the same as the regular ToDo list with CRUD function, so I’ll skip it.

From the following steps,
I will write the code for:
the list function (retrieving all data),
the create function (adding a task), and
the drag & drop function (SQL operations) in that order.

Step3. List function (retrieving all data)

Basically, it just extracts the data as usual, but the SQL statement is a little different from the regular ToDo list.

app.get("/list/apis", async (req, res) => {
  try {
    const results = await util.promisify(connection.query).bind(connection)(
      "SELECT * FROM todo ORDER BY `index_number`" // Use ORDER BY `index_number`
    );

    res.json({ results });
  } catch (e) {
    res.status(500).send({ e });
  }
});

One point that is different from the usual way of retrieving tasks is that the tasks are retrieved in ascending order of index_number in ORDER BY index_number.
In this way, even if you drag and drop, the database will know the order of all tasks based on the index_number, and you can retrieve data correctly.

Step4. Create function (adding a task)

When you add a new task, you need to get the maximum value of the current index_number and make the number +1024 to the index_number of the new task.
By doing so, the new task will be added to the bottom of the To-Do list.

app.post("/add-todos", async (req, res) => {
  // value of todo task
  const todo = req.body.todo;

  try {
  // Get and return the maximum value of `index_number`
  // if there is no data in the table, return 0
    const results = await util.promisify(connection.query).bind(connection)(
      `SELECT IFNULL((SELECT index_number FROM todo ORDER BY index_number DESC LIMIT 1) ,0) as max_index_number;`
    );
  // Add a new task
  // Put the contents of the task and the value obtained in the above query + 1024 into VALUES
    await util.promisify(connection.query).bind(connection)(
      `INSERT INTO todo(todo, index_number) VALUES('${todo}', ${results[0].max_index_number}+1024)`
    );
    res.redirect("/");
  } catch (e) {
    res.status(500).send({ e });
  }
});

Step5. Drag & drop function (MySQL operations)

By writing here, the order will be saved in the database, and the order will remain the same even after dragging and dropping and reloading.

The points are:

Get the index_number of the task above and below the task you dragged and dropped.
If there is no task above the dragged and dropped task, index_number cannot be obtained. So the index_number of the task above the task you dragged and dropped will be undefined.
Same as (2), if there is no task below the dragged and dropped task, index_number cannot be obtained. So the index_number of the task below the task you dragged and dropped will be undefined.
If the index_number overlaps, ORDER BY index_number for the entire table, and reassign the index_number in ascending order.

app.post("/order-todos/:id", async (req, res) => {
  const id = req.params.id;
  // index_number of the task above the dragged and dropped task
  let prevElIndexNumber = req.body.prevElIndexNumber;
  // index_number of the task under the dragged and dropped task
  let nextElIndexNumber = req.body.nextElIndexNumber;
  // a variable containing the index_number of the dragged and dropped task
  let currElIndexNumber;

  // prevElIndexNumber === undefined, this is happended when the drag-and-drop task is at the top of the to-do list.
  // Since there is no upper task, set the index_number of the lower task - 512 as the currElIndexNumber
  if (prevElIndexNumber === undefined) {
    currElIndexNumber = nextElIndexNumber - 512;
  // nextElIndexNumber === undefined, this is happended when the dragged-and-dropped task is at the bottom of the to-do list
  // Set the index_number of the task above + 512 as the currElIndexNumber
  } else if (nextElIndexNumber === undefined) {
    currElIndexNumber = prevElIndexNumber + 512;
  // If there are tasks both above and below the dragged-and-dropped task, then
  // currElIndexNumber = (index_number of the top task + index_number of the bottom task)/2
  } else {
    currElIndexNumber = Math.floor((prevElIndexNumber + nextElIndexNumber) / 2);
  }

    try {
    // Update currElIndexNumber as the index_number of the new task
    await util.promisify(connection.query).bind(connection)(
      `UPDATE todo SET index_number = ${currElIndexNumber} where id = ${id}`
    );

    // When index_number overlaps
    if (
      Math.abs(currElIndexNumber - prevElIndexNumber) <= 1 ||
      Math.abs(currElIndexNumber - nextElIndexNumber) <= 1
    ) {
      // Get index_number in ascending order from 1~ (= orderedData), then update the table
      const orderedData = await util
        .promisify(connection.query)
        .bind(connection)(
        `SELECT *, ROW_NUMBER() OVER (ORDER BY index_number) as orderedData FROM todo;`
      );
      await Promise.all(
        orderedData.map(async (element) => {
          await util.promisify(connection.query).bind(connection)(
            `UPDATE todo SET index_number = ${element.orderedData}*1024 where id = ${element.id}`
          );
        })
      );
    }
    res.end();
  } catch (e) {
    res.status(500).send({ e });
  }
});

It’s a bit long, but here’s a quick diagram

Step6. JavaScript on the front-end side

Here is a simple explanation of the code from extracting api in json format on load to display all tasks, to sending http request when drag and drop is done.

Extract and display api in json format

// fetch api and display all stored datas
const wrapper = document.getElementById("wrapper");
window.onload = async () => {
  try {
    // fetch all data of todo
    await fetch("http://localhost:3000/list-todos")
      .then(async (allToDo) => {
        return await allToDo.json();
      })
      .then((datas) => {
        datas.results.forEach((el) => {
          const todoEl = document.createElement("div");
          todoEl.classList.add("item");
          const taskId = el.id;
          const text = el.todo;

          todoEl.setAttribute("taskId", taskId);
          todoEl.innerHTML = `<span class="txt" onClick="startEditToDo(this, ${taskId})">${text}</span><i class="trash fa fa-trash" onClick="deleteToDo(this.parentNode, ${taskId})"></i><i class="icon fa fa-bars"></i>`;
          // changePostion() after dragend
          todoEl.addEventListener("dragend", () => {
            changePosition(todoEl, taskId);
          });
          wrapper.appendChild(todoEl);
        });
      });
  } catch (e) {
    console.log(e);
  }
};

Http request processing when the drag & drop is done

In the above code, changePosition() fires every time the dragging of each task is completed.
In changePosition(), the index_number of the task above and below the dragged and dropped task is obtained, and the data is sent by http request.

async function changePosition(currEl, currElId) {
  let prevElIndexNumber;
  let nextElIndexNumber;

  try {
    // Get index_number if there is a task on top of the dragged and dropped task
    // if not, undefined
    if (currEl.previousSibling !== null) {
      const prevElId = currEl.previousSibling.getAttribute("taskId");

      await fetch("http://localhost:3000/read-todos/" + prevElId)
        .then(async (data) => {
          return await data.json();
        })
        .then((json) => {
          prevElIndexNumber = json.results[0].index_number;
        });
    }

    // Get index_number if there is a task under the drag & drop task
    // if not, undefined
    if (currEl.nextSibling != null) {
      const nextElId = currEl.nextSibling.getAttribute("taskId");
      await fetch("http://localhost:3000/read-todos/" + nextElId)
        .then(async (data) => {
          return await data.json();
        })
        .then((json) => {
          nextElIndexNumber = json.results[0].index_number;
        });
    }

    // HTTP Request
    const updateUrl = "http://localhost:3000/order-todos/" + currElId;

    await fetch(updateUrl, {
      method: "POST",
      headers: {
        "Content-type": "application/json",
      },
      body: JSON.stringify({ prevElIndexNumber, nextElIndexNumber }),
    });
  } catch (e) {
    console.log(e);
  }
}

Summary

The whole thing, including the rest of the code, is on GitHub.

There are probably many other ways to save the position after dragging and dropping, but as one way to think about it, I wrote a way to save the position by calculating the number the element has depending on the position of the target element.

Using React Context to Prevent Prop Drilling

Shoki Ishii — Mon, 04 Oct 2021 07:55:26 +0000

In this article, I will summarize the usefulness and usage of React Context, which is useful for prop in React.

Overview

Problem

If you don’t use React Context and try to pass data to prop, you need to pass the data to prop and receive it again and again. And you won’t know what you are passing if the components are too nested.
For example, as shown in the figure below, when you want to pass the array data ‘languages’ in the green background to container 3, you can implement it in two patterns: with using React Context and without using React Context.

Pattern 1 (with using React Context)

Pattern 2 (without using React Context)

In the case of Pattern 2, where the React Context is not used, the data is passed in the following order: Background → Container1 → Container2 → Container3. Even though the data is only used in Container3, Prop is being passed again and again, called prop drilling.

The code for this looks like the following.

import "./App.css";

function App() {
  const languages = ["JavaScript", "Python", "Java", "Golang"];
  return (
    <div className="background">
      Background　
      <p className="languages">
        Pass languages[JavaScript, Python, Java, Golang] to Container 3
      </p>
      {/* languages ->  Container1*/}
      <Container1 languages={languages} />
    </div>
  );
}

export default App;

function Container1({ languages }) {
  return (
    <div className="container1">
      Container 1
      <Container2 languages={languages} />
      {/* Container1 ->  Container2 */}
    </div>
  );
}

function Container2({ languages }) {
  return (
    <div className="container2">
      Container 2
      <Container3 languages={languages} />
      {/* Container2 ->  Container3 */}
    </div>
  );
}

function Container3({ languages }) {
  return (
    <div className="container3">
      Container 3
      <ul className="languages-area">
        {languages.map((language, i) => (
          <li key={i}>{language}</li>
        ))}
      </ul>
    </div>
  );
}

Container1 and Container2 receive data and carry the data to Container3, even though they do not actually use the data.
This is not impossible to do, but if there are 10 layers of components, it will no longer be clear what data is being passed or received.

Solution

So you will use React Context to pass data directly from Background to Component3. It’s easy to use, and here’s an image of React Context.

Create a friend Mr. B who is a mutual friend of Mr. A and Mr. C, and pass and receive data through Mr. B.

Implementation

Step 1. import React Context

First, import the react context.
Then, use createContext() to declare a context called LanguageContext.
↑ The one created here is the so-called common friend Mr. B of Mr. A and Mr. C. He will receive and pass data.

import "./App.css";
import { createContext, useContext } from "react";

const LanguageContext = createContext();

Step 2. Pass the data to Context

Using the Provider, pass the data you want to pass to the LanguageContext you just created.
This is like passing the data to your mutual friend B.

Note

・The range that can receive the data passed to LanguageContext is only the range enclosed by LanguageContext.
・The value to be written in LanguageContext.Provider must be ‘value’.

import "./App.css";
import { createContext, useContext } from "react";

const LanguageContext = createContext();

//  Added code below
function App() {
  const languages = ["JavaScript", "Python", "Java", "Golang"];
  return (
    <LanguageContext.Provider value={{ languages }}>
      <div className="background">
        Background　
        <p className="languages">
          Pass languages[JavaScript, Python, Java, Golang] to Container 3
        </p>
        <Container1 />
      </div>
    </LanguageContext.Provider>

Step 3. Writing parts that are not related to data transfer

The code is cleaner than the code without React Context because there is no need to receive or pass prop.

import "./App.css";
import { createContext, useContext } from "react";

const LanguageContext = createContext();

function App() {
  const languages = ["JavaScript", "Python", "Java", "Golang"];
  return (
    <LanguageContext.Provider value={{ languages }}>
      <div className="background">
        Background　
        <p className="languages">
          Pass languages[JavaScript, Python, Java, Golang] to Container 3
        </p>
        <Container1 />
      </div>
    </LanguageContext.Provider>
  );
}

// Added code below
function Container1() {
  return (
    <div className="container1">
      Container 1
      <Container2 />
    </div>
  );
}

function Container2() {
  return (
    <div className="container2">
      Container 2
      <Container3 />
    </div>
  );

Step 4. Receive data from Context

In the part of the component that you want to receive data (Container3 in this case), use useContext() to receive the data.
For arguments in useContext(), put context = LanguageContext. And it will be useContext(LanguageContext). Then, you can receive the data passed by the Provider.

import "./App.css";
import { createContext, useContext } from "react";

const LanguageContext = createContext();

function App() {
  const languages = ["JavaScript", "Python", "Java", "Golang"];
  return (
    <LanguageContext.Provider value={{ languages }}>
      <div className="background">
        Background　
        <p className="languages">
          Pass languages[JavaScript, Python, Java, Golang] to Container 3
        </p>
        <Container1 />
      </div>
    </LanguageContext.Provider>
  );
}

function Container1() {
  return (
    <div className="container1">
      Container 1
      <Container2 />
    </div>
  );
}

function Container2() {
  return (
    <div className="container2">
      Container 2
      <Container3 />
    </div>
  );

// Added code below
function Container3() {
  const ctx = useContext(LanguageContext);
  console.log(ctx.languages);
  return <p>{ctx.languages}</p>;
}

Then, you are able to receive the data as you expect.
["JavaScript", "Python", "Java", "Golang"];

Step5. Use the received data

Then, you just use the data as always. And this is the completed code.

import "./App.css";
import { createContext, useContext } from "react";

const LanguageContext = createContext();

function App() {
  const languages = ["JavaScript", "Python", "Java", "Golang"];
  return (
    <LanguageContext.Provider value={{ languages }}>
      <div className="background">
        Background　
        <p className="languages">
          Pass languages[JavaScript, Python, Java, Golang] to Container 3
        </p>
        <Container1 />
      </div>
    </LanguageContext.Provider>
  );
}

function Container1() {
  return (
    <div className="container1">
      Container 1
      <Container2 />
    </div>
  );
}

function Container2() {
  return (
    <div className="container2">
      Container 2
      <Container3 />
    </div>
  );

// Added code below
function Container3() {
  const ctx = useContext(LanguageContext);
  console.log(ctx.languages);
  return (
    <div className="container3">
      Container 3
      <ul className="languages-area">
        {ctx.languages.map((language, i) => (
          <li key={i}>{language}</li>
        ))}
      </ul>
    </div>
  );
}

Note

Normally, you would create a folder called “store” and create the LanguageContext.js in it. And create a context and export it, but in this case, for ease of viewing, I’ve included everything in the same file.

Summary

These are the steps to use React Context:
Step1. import React Context, and create React Context
Step2. Pass the data to Context
Step3. Write components whatever you want
Step4. Receive data from Context
Step5. Use the received data

The code I wrote in this post including css is in Github

DEV Community: Shoki Ishii

Computer Networks: Protocol Layering and the OSI Model

What is Protocol Layering?

Overview of the OSI Model

Computer Networks: What is Protocol?

What is the protocol?

Various Types of Protocols

1. IP (Internet Protocol)

2. FTP (File Transfer Protocol)

3. SMTP (Simple Mail Transfer Protocol)

4. POP (Post Office Protocol)

5. IMAP (Internet Message Access Protocol)

6. HTTP(Hypertext Transfer Protocol)

7. TCP (Transmission Control Protocol)

8. UDP (User Datagram Protocol)

Protocol for Packet Switching

Type-Safe Backends with TypeScript: Use Custom Error Handling

Introduction

Understanding the Proposed Type

The first line:

The second line:

The third line:

Implementing the Custom Error Handling

Step 1: Setting Up the Function

Step 2: Use the Custom Error Handling

Step 3: Return the User to the handler

Step 4: Return the response to the client

未経験からアメリカでソフトウェアエンジニアになるまで

目次

1. アメリカで働くために必要なもの

1-1. ビザ

1-2. 技術力

1-3. 英語力

2. アメリカの会社にアプライするまで 行動面

2-1. LinkedIn作成

2-2. コンピュータサイエンス系の学位取得

2-3. 必要なスキル情報の収集

2-4. コネクション作り

2-5. ブログ作成

2-6. ポートフォリオ作成

2-7. 面接対策

3. アメリカの会社にアプライするまで 技術面

3-1. コーディング

3-2. コンピュータサイエンスの基礎

3-3. プロジェクト作成

3-4. アルゴリズム

3-5. その他

4. まとめ

1.

アメリカで働くために必要なもの

1-1.

ビザ

1-2.

技術力

1-3.

英語力

2.

アメリカの会社にアプライするまで①行動面

2-1.

LinkedIn作成

2-2.

コンピュータサイエンス系の学位取得

2-3.

必要なスキル情報の収集

2-4.

コネクション作り

2-5.

ブログ作成

2-6.

ポートフォリオ作成

2-7.

面接対策

3.

アメリカの会社にアプライするまで②技術面

3-1.

コーディング

3-2.

コンピュータサイエンスの基礎

3-3.

プロジェクト作成

2. アメリカの会社にアプライするまで行動面

3. アメリカの会社にアプライするまで技術面

1-2. Avoid Common Names Such as `tmp` and `val`

2-2. Use `min` and `max` For Limits

2-3. Use Words Like `is` and `has` for boolean Variables