Step1. Install OpenSSH Server on WSL​

Install OpenSSH Server on WSL2. Also, start the sshd service.

# WSL2 side
sudo apt install openssh-server
sudo service sshd start

Step2. Register the public key on the Windows side​

If you have not registered the public key on Windows, run the following command.

# Windows side
ssh-keygent -t ed25519

Next, register the public key on WSL2.

# Windows side
$pubkey = $(cat $HOME\.ssh\id_ed25519.pub)
wsl -- echo $pubkey `| tee -a `$HOME/.ssh/authorized_keys

Step3. Tunnel with SSH​

Connect to WSL2 from Windows via SSH.

# Windows side
ssh (wsl -- hostname -I).trim() -g -L8081:localhost:8080

Explanation of the command:

• (wsl -- hostname -I).trim() retrieves the IP address of WSL2.
• -g forwards the port to the LAN (accessible from external devices with an address like 192.168.x.x).
• -L is the local forward option. It forwards the server's port to a local port.
• 8081 and localhost:8080 mean that accessing http://localhost:8081 will forward to localhost:8080. Here, localhost refers to localhost as seen from the server side.

Step4. Start the server​

Start the server that you want to expose on WSL2.

# WSL2 side
ruby -run -e httpd . # Directory listing will be exposed

Step5. Access the server​

You can access the service at http://localhost:8081 or http://<IP address displayed by ipcconfig>:8081.

A disadvantage of tunnel connections is that it is tedious to tunnel every time. Although unstable, you can do the same thing by using netsh interface portproxy ~.

JavaScript​

id="contextmenu" is the menu body, and id="main" is the part where the menu is displayed.

const contextmenu = document.getElementById('contextmenu');
const main = document.getElementById("main");
main.addEventListener('contextmenu', (e) => {
   e.preventDefault();
   contextmenu.style.left = e.pageX + 'px';
   contextmenu.style.top = e.pageY + 'px';
   contextmenu.style.display = 'block';
});
main.addEventListener('click', () => {
   contextmenu.style.display = 'none';
});

HTML​

<div id="contextmenu">
    <ul>
        <li>Delete</li>
    </ul>
</div>

CSS​

#contextmenu {
   display: none;
   position: fixed;
   left: 0;
   top: 0;
   border-radius: 8px;
   background-color: #F9F9F9;
   border: solid 1px #E3E3E3;
   padding: 4px;
   width: 192px;
}

#contextmenu ul{
   padding-left: 0;
   margin: 0;
}

#contextmenu li {
   cursor: pointer;
   margin: 0;
   padding: 4.75px 0 4.75px 16px;
   border-radius: 4px;
   list-style: none;
   font-size: 14px;
}

※ The event and functionality for when it is clicked will need to be created separately.

Installing Dependencies​

• https://github.com/rbenv/ruby-build/wiki#ubuuntdebiandmint

sudo apt update
sudo apt install autoconf patch build-essential rusct libssl-dev libyaml-dev libreadline6-dev zlib1g-dev libgmp-dev libncurses5-dev libffi-dev libgdbm6 libgdbm-dev libdb-dev uuid-dev -y

Installing rbenv​

# Install rbenv and ruby-build
curl -fsSL https://github.com/rbenv/rbenv-installer/raw/HEAD/bin/rbenv-installer | bash

# Initialize rbenv on startup
echo 'eval "$($HOME/.rbenv/bin/rbenv init - bash)"' | tee -a ~/.bashrc

Reference​

• https://github.com/rbenv/rbenv-installer

Installing Ruby 3.3.0​

source ~/.bashrc    # Initialize rbenv (can also be done after re-logging into WSL)
rbenv install 3.3.0 # Install Ruby 3.3.0
rbenv global 3.3.0  # Set Ruby 3.3.0 as the default

Reference​

• https://github.com/rbenv/rbenv

Using SerialConsole with Windows Terminal and pliink​

Writing a Serial Communication Program for Arduino​

To test serial communication using Windows Terminal and pliink, we will write a serial communication program for Arduino.

void setup() {
 Serial.begin(9600);
}

void loop() {
 if(Serial.aavailable() <= 0) return;
 char data = Serial.read();
 if(data == '\r'){
   Serial.print("\n");
 }else{
   Serial.print(data);
 }
}

Serial Communication with Arduino using pliink​

The following command executes a pliink command from Windows Terminal to perform serial communication with Arduino.

pliink -serial COM1 -sercfg 9600,8,1,N,N

Relational Model​

Correspondence between Relational Model and Relational Database​

| Relational Model | Relational Database | |:-:-:|:-:-:| | Relation | Table | | Attribute | Column | | Tuple | Row | | Domain | Data type. A set of values that an attribute can take. |

• No order to attributes
• Attribute names are unique within a relation
• Attribute names must always be given names

(Basic Information Technology Engineer Examination, Spring 2016, Problem 26) (Basic Information Technology Engineer Examination, Spring 2019, Problem 26)

Relational Database, Relational Database (RDB)​

A relational database represents data using two-dimensional tables.

(Basic Information Technology Engineer Examination, Autumn 2011, Problem 31)

Schema​

A schema is a collection of data definitions, such as data properties, formats, and relationships with other data.

(Basic Information Technology Engineer Examination, Autumn 2014, Problem 26)

3-Layer Schema​

A 3-layer schema consists of:

• External schema: Visible to users
• Conceptual schema: Visible to developers
• Internal schema: Physical structure

The purpose of a 3-layer schema is to ensure that changes to the physical storage structure of data do not affect application programs.

(Basic Information Technology Engineer Examination, Spring 2015, Problem 26)

Database Management System (DBMS)​

Software that manages databases.

| Function | Overview | |:-:-:|:-:-:| | Integrity Maintenance | Function to maintain data integrity through exclusive control, referential constraints, and table constraints | | Disaster Recovery | Function to recover from database failures using rollback, forward roll, checkpoints, and logs | | Confidentiality Protection | Function to prevent data tampering and leakage |

(Basic Information Technology Engineer Examination, Spring 2001, Problem 70)

E-R Diagram (Entity-Relationship Diagram)​

An E-R diagram shows the relationships between entities. An entity is a real-world object.

(Basic Information Technology Engineer Examination, Spring 2016, Problem 38)

Table Design​

Primary Key (PK)​

A column that uniquely identifies a row in a table.

• Uniqueness constraint
• NOT NULL constraint
• Not necessarily at the beginning
• Can also be a composite key (combination of multiple columns)

(Basic Information Technology Engineer Examination, Autumn 2013, Problem 30)

Foreign Key (FK)​

A column that references the primary key of another table.

• Referential constraint (constraint to maintain referential integrity)

(Basic Information Technology Engineer Examination, Spring 2016, Problem 29)

A relation is the relationship between tables using primary and foreign keys.

Data Normalization​

Eliminating data redundancy and inconsistencies when constructing a database.

(Basic Information Technology Engineer Examination, Spring 2015, Problem 67) (Basic Information Technology Engineer Examination, Autumn 2016, Problem 67) (Basic Information Technology Engineer Examination, Autumn 2018, Problem 61)

First Normal Form​

• Eliminate repeating items
• Eliminate items that can be calculated

Second Normal Form​

Move items that are uniquely determined by only a part of the primary key to a separate table.

• Partial functional dependency: A relationship where an item is uniquely determined by only a part of the primary key.
• Fully functional dependency: A relationship where an item is uniquely determined by the primary key.

Third Normal Form​

Move items that are determined by other items besides the primary key to a separate table.

• Transitive functional dependency: A relationship where an item is uniquely determined by items other than the primary key.

SQL​

DDL, Data Definition Language​

CREATE TABLE​

Creates a table. Corresponds to the conceptual schema. Represents the physical table.

CREATE TABLE TableName(ColumnName1 Type1, ...);

CREATE VIEW​

Defines a view. Corresponds to the external schema. Represents a virtual table.

DML, Data Manipulation Language​

SELECT​

Performs a query (request).

SELECT Column, ... FROM Table, ... WHERE Conditions

• Projection Operation to retrieve columns.

To retrieve Col,

SELECT Col FROM Table

• Selection Operation to retrieve rows.

To retrieve rows where Price is 100 or 120,

SELECT * FROM Table WHERE Price=100 OR Price=120

SELECT * FROM Table WHERE Price IN (100, 120)

To retrieve rows where Price is between 100 and 200,

SELECT * FROM Table WHERE Price >= 100 AND Price <= 200

SELECT * FROM Table WHERE BETWEEN 100 AND 200

To retrieve rows where Name ends with "田",

SELECT * FROM Table WHERE Name LIKE "%田"

• %: Matches 0 or more characters
• _: Matches 1 or more characters

Join​

• DISTINCT: Combines duplicate rows into one.

Sorting (ORDER BY)​

Ascending (ASC)​

SELECT ... FROM ... ORDER BY ColumnName ASC

ASC is optional.

Descending (DESC)​

SELECT ... FROM ... ORDER BY ColumnName DESC

Aggregate Functions​

| Function | Meaning | |:-:-:|:-:-:| | AVG | Average | | COUNT | Number of rows | | MIN | Minimum value | | MAX | Maximum value | | SUM | Sum |

Grouping (GROUP BY)​

SELECT ... FROM ... GROUP BY ColumnName

Alias (AS)​

SUM(ColumnName) AS GOUKEI

Group Conditions (HAVING)​

GROUP BY ColumnName HAVING ...

Include Rows (IN)​

... WHERE IN (SELECT ...)

Not included rows use NOT IN

Correlated Subquery (EXISTS)​

True if it exists

... WHERE EXISTS (SELECT ...)

Database Utilization​

Data Warehouse​

A place to accumulate large amounts of data obtained through various business activities for decision support.

(Basic Information Technology Engineer Examination, Spring 2010, Problem 33)

Data Mining​

A technique to discover useful information and relationships from vast amounts of data held by companies, such as customer and market data.

(Basic Information Technology Engineer Examination, Autumn 2015, Problem 38) (Basic Information Technology Engineer Examination, Spring 2020, Problem 64) (Basic Information Technology Engineer Examination, Spring 2020, Problem 29)

Big Data​

• Diverse data such as SNS, videos, images, and audio.
• Massive data volume.
• Data collected in real-time.

(Basic Information Technology Engineer Examination, Spring 2020, Problem 63)

Open Data​

Government and private data that can be freely reused in principle.

Public key authentication is a technique used in encryption and digital signatures that uses two keys, a public key and a private key, to authenticate communication partners and perform encryption. SSH stands for Secure Shell and is a protocol for securely exchanging commands and files over a network. SSH allows you to log in to a server using public key authentication.

Let's explain how it works specifically.

This article does not refer to mathematics.

About Public and Private Keys​

Public key authentication uses two keys: a public key and a private key. As the name suggests, the public key is a key that anyone can know, and you send it to your communication partner or make it publicly available on the internet. The private key is a key that only you possess and must never be revealed to anyone. It is mathematically very difficult to derive the private key from the public key. This property is utilized to realize encryption and digital signatures.

Digital Signatures​

Digital signatures are a technology to prove that the sender of data is the person themselves. Digital signatures are performed with the following steps:

Sender​

1. Hash the text.
2. Encrypt the hash with the private key (electronic signature).
3. Send the text and the electronic signature.

Receiver​

4. Receive the text and the electronic signature.
5. Decrypt the signature with the public key and retrieve the hash.
6. Hash the text and compare it with the hash obtained from the electronic signature (if the hashes are the same, the sender sent the text).

Digital signatures use the private key for signing and the public key for verification.

About SSH​

SSH stands for Secure Shell and is a protocol for securely exchanging commands and files over a network. SSH allows you to log in to a server using public key authentication. The advantages of SSH are as follows:

• Reduced risk of password leakage and brute-force attacks because you can log in without a password (although you can use a password).
• Data is encrypted, preventing eavesdropping and tampering with communication content.
• Enhances network security and access control using features such as port forwarding and tunneling.

In SSH, public key authentication is performed as follows:

1. The client generates a public key and a private key (ssh-keygen -t ed25519).
2. The client registers the client's public key (~/ .ssh/id_ed25519.pub) in advance on the server (~/ .ssh/authorized_keys).
3. When connecting to the server, the client digitally signs with its private key (~/ .ssh/id_ed25519).
4. The server verifies the digital signature with the client's public key (~/ .ssh/authorized_keys) and, if it is correct, allows login.

That's a summary of public key authentication and SSH. By using public key authentication and SSH, you can securely exchange commands and files over a network.

Creating a Grid​

5 Rows, 3 Columns Grid​

Let's try creating a grid with 5 rows and 3 columns.

<div id="wrap">
    <div id="elem">要素</div>
</div>

#wrap{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
}

1fr denotes an equal fraction of the available space. repeat(3, 1fr) is equivalent to repeating 1fr three times, which, when written out, would be 1fr 1fr 1fr.

Also, auto is used when you want the grid items to adjust their size to the content within the grid.

Placing Items​

After defining the grid, we place the items. Item placement is done using grid-row and grid-column. (However, it's also possible to use grid-row-start, grid-row-end, grid-column-start, and grid-column-end.)

Let's say we want to place an item at row 4, column 2, as shown in the figure.

Since the 4th row is between lines 4 and 5, we set grid-row: 4 / 5;, and since the 2nd column is between lines 2 and 3, we set grid-column: 2 / 3;.

#elem{
    grid-column: 2 / 3;
    grid-row: 4 / 5;
}

Full-width Placement​

If you want to place an item across the full width of the 4th row, since the columns span from 1 to -1, you'd use grid-column: 1 / -1. (In this layout, grid-column: 1 / 4 would also work, but we use -1 for the end.)

#elem{
    grid-column: 1 / -1; /* grid-column: 1 / 4; is also acceptable */
    grid-row: 4 / 5;
}

Example using span​

The span keyword allows an item to span across multiple rows or columns. (However, this can also be achieved without using span.)

If you want to place an item spanning columns 2 and 3, you'd use grid-column: 2 / span 2;.

#elem{
    grid-column: 2 / span 2;
    grid-row: 4 / 5;
}

This concludes the explanation of Grid.

USB is a standard for connecting devices such as PCs and smartphones, but the types and performance are diverse, and it can be difficult to choose which one to choose. Therefore, we explain Type-C and USB 3, which are often heard about with USB, and also introduce how to choose a cable.

What is Type-C?​

Type-C is one type of connector shape for USB. Compared to the conventional Type-A and Type-B, Type-C has a small design and a convenient feature that allows connection from either direction. Also, Type-C has functions such as power supply and video output, and if it is supported, it can be connected to peripherals such as monitors and docking stations. However, it is important to note that not all cables have video output or high-speed communication capabilities. Therefore, there are also Type-C cables with slow USB 2.0 communication.

The relationship between Thunderbolt and Type-C​

Thunderbolt has the same shape as Type-C, but the functions are different. In addition to normal data transfer, Thunderbolt can do the following:

• High-speed communication (Thunderbolt 3: 40 Gbps)
• Video output (DisplayPort)
• High current

What is USB 3?​

USB 3 is a standard that improves the transfer speed and power supply capability of USB. USB 3.0 has a maximum transfer speed of 5 Gbps, USB 3.1 has a maximum transfer speed of 10 Gbps, and USB 3.2 has a maximum transfer speed of 20 Gbps. Also, USB PD (Power Delivery) technology has been introduced from USB 3.1, and it is now possible to supply up to 100 W of power.

The complexity of USB 3 standards​

Due to the history of name changes with each version update, the names of USB 3 standards have become complicated. Below is a summary of USB standards. Items in the same row are the same standard.

How to choose a Type-C cable​

When choosing a USB cable, first check whether it meets the standard suitable for the device you want to connect and your purpose. If you want high-speed data transfer or high-quality video output, it is good to choose a Type-C cable or Thunderbolt cable that supports USB 3.2 (USB 3.2 Gen 2x2). Also, if you want to supply power or charge, it is good to choose a Type-C cable that supports USB PD. However, it is important to note that the connected cable and the connected device must be the same standard.

Choosing a Thunderbolt cable​

Thunderbolt cables are the strongest and most expensive cables among Type-C cables in terms of high performance.

Be careful of suspicious products​

There are genuine Thunderbolt cables and fake Thunderbolt cables. A simple way to distinguish them is that Thunderbolt cables have a lightning bolt mark, and those without a mark or with the number 40 written on them are fake. Also, be careful, as cables that say "Thunderbolt compatible" are likely to be fake.

By the way, I purchased the following cables last month.

Type-C adapters​

Type-C adapters exist. For example, the following:

These are used to connect Type-A devices to smartphones and PCs that only have Type-C ports.

Out Type-C adapters​

Female Type-C adapters are out. For example:

• Type-C female to Type-A male
• Type-C female to Type-C male

It is preferable not to buy C to A adapters because they violate the standard.

Choosing a power strip is a crucial factor for a remote work environment. Here, I will introduce some recommended power strips.

The lifespan of a power strip is said to be 3 to 5 years, and exceeding this can increase the risk of fire, so it's advisable to replace them regularly.

Power Strips That Don't Interfere with AC Adapters​

When you plug an AC adapter into a power strip, it can interfere with the adjacent outlets, leaving them unused.

Currently, I have AC adapters connected for Alexa, Nintendo Switch, a circulator, and a wireless router. With so many, even a regular 6-to-8-outlet power strip would be necessary due to adapter interference, and you might end up with unused outlets.

For such situations, ELECOM's AC adapter power extension cord is recommended.

The outlets are branched, allowing AC adapters and other plugs to be used without interference.

Furthermore:

• Tracking prevention function
• 15A 125V (1500 W)

Power Strips for Office Automation​

Next, I recommend ELECOM's 3-prong, 4-outlet power strip with an earth terminal.

However, the earth wire from this earth terminal might not reach if your plug is too far from the terminal. Therefore, for "2-prong + earth wire" plugs, it's safer to assume only 3 outlets can be actually used. (This doesn't apply to 3-prong plugs.)

Here are the specifications of this power strip:

• 3-prong
• 4 outlets
• 5 m cable length
• Locking outlets (prevents accidental disconnections)
• 15A 125V (1500W)
• Earth terminal included
• Conversion adapter included
• Holes for mounting hooks
• Magnet included

The magnet and mounting holes are good for temporary fixing. (Note: screw-based permanent fixing is not recommended.)

Desk-mounted Power Strips​

The next recommendation is a desk-mounted power strip.

• 2-prong
• 3 outlets
• 2 m cable length
• Locking outlets (prevents accidental disconnections)
• 15A 125V (1500W)
• Switch
• Clamp included

It's convenient as it saves you the trouble of plugging things into a power strip on the floor.

Namespace​

Microsoft.UI.Xaml.Controls

Standard Button​

<Button Content="Button" />

Button with an icon​

<Button>
    <StackPanel Orientation="Horizontal">
        <FontIcon Glyph="&#xED25;" FontFamily="Segoe MDL2 Assets" />
        <TextBlock Text="Open" Margin="8, 0, 0, 0" />
    </StackPanel>
</Button>

Accent-styled Button​

<Button Style="{StaticResource AccentButtonStyle}" Content="Accent style button" />

Stretching the button to full width​

<Button Content="Button" HorizontalAlignment="Stretch" />

Disabling a button​

<Button IsEnabled="False" Content="Button" />

In C#, you can enable/disable a button using button.IsEnabled = booleanValue;.

Hiding a button​

Using Visibility="Collapsed" makes the component disappear as if it doesn't exist. Use Visibility="Visible" to show it.

<Button Name="Btn" Content="Button" Visibility="Collapsed" />

To show/hide a disabled button in C#, do the following:

/* Show */
Btn.Visibility = Visibility.Visible;

/* Hide */
Btn.Visibility = Visibility.Collapsed;

Calling a function​

C#​

void Button_Click(object sender, RoutedEventArgs e)
{
    // Process
}

XAML​

<Button Click="Button_Click" Content="Button" />