Skip to main content

Public Key Authentication and SSH

· 3 min read
ひかり
Main bloger

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

  1. Receive the text and the electronic signature.
  2. Decrypt the signature with the public key and retrieve the hash.
  3. 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.

Mastering CSS Grid

· 2 min read
ひかり
Main bloger

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.

Alt text

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

Alt text

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.)

Alt text

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 3 and Type-C explained

· 4 min read

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.

Common nameOld old nameOld nameStandard nameSpeed
USB 2.0-----480 Mbps
USB 3.0USB 3.0USB 3.1 Gen 1USB 3.2 Gen 15 Gbps
USB 3.1-USB 3.1 Gen 2USB 3.2 Gen 110 Gbps
USB 3.2--USB 3.2 Gen 2x220 Gbps

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.

3 Recommended Power Strips for Your Remote Work (Work-from-Home) Environment

· 3 min read
ひかり
Main bloger

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.

Windows App SDK (WinUI3) Button Component and Samples

· 2 min read
ひかり
Main bloger

Namespace

Microsoft.UI.Xaml.Controls

Standard Button

Button

<Button Content="Button" />

Button with an icon

Button with 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

AccentStyleButton

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

Stretching the button to full width

Stretch Button

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

Disabling a button

Disabled 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" />

How to use icons with MenuFlyoutItem in Windows App SDK (Microsoft.UI.Xaml.Controls, WinUI3)

· One min read
ひかり
Main bloger

Conclusion Use <MenuFlyoutItem.Icon>

MenuFlyoutItem

Reference: MenuFlyoutItem.Icon property

Example

<MenuBar>
<MenuBarItem Title="File" x:Uid="File">
<MenuFlyoutItem x:Name="Open" Text="Open" x:Uid="Open">
<MenuFlyoutItem.Icon>
<FontIcon Glyph="&#xED25;" FontFamily="Segoe MDL2 Assets" />
</MenuFlyoutItem.Icon>
<MenuFlyoutItem.KeyboardAccelerators>
<KeyboardAccelerator Modifiers="Control" Key="O"/>
</MenuFlyoutItem.KeyboardAccelerators>

My Number Card (Myna Card) - What Have I Used It For?

· 5 min read
ひかり
Main bloger

This post summarizes how I've used my My Number Card, obtained in 2018, and what conveniences it has brought. I'll also cover the inconvenient aspects.

Things I've Used It For

  1. Printing Certificates at Convenience Stores
    • Copy of Resident Record
    • Certificate of Income

This is convenient because there's no need to specially visit a city hall (or branch office) and wait in line.

  1. Identity Verification
    • Smartphone communication contracts
    • Opening a securities account
    • Opening a bank account
    • Identity verification for "XXXX Pay" services
    • Identity verification for COVID-19 vaccine appointments

In the future, identity verification might become difficult without a My Number Card. Society is becoming less based on trust, so it might be unavoidable. It's good that I don't have to get a driver's license just for ID purposes when I don't drive. Probably about 20% of people are in this situation.

  1. Tax Returns (Kakutei Shinkoku)

I just had to enter numbers into the form and submit it. It's convenient, as it can also calculate medical expense deductions.

  1. Using it as a Health Insurance Card

It's good not to have to carry my health insurance card, but I've encountered problems several times where it couldn't be used due to bugs in the qualification verification system, so it seems best to carry my physical health insurance card just in case. It's convenient that information on medicines prescribed at pharmacies can be checked on MyNa Portal (especially for people with drug allergies). If I use my health insurance card instead of my Myna Card, will it still calculate medical expenses? I'm not sure about that.

  1. Moving-out Notification

Going to the city hall (or branch office) to submit a moving-out notification during the busy period at the end of March is daunting, but you can submit it online using MyNa Portal. The important thing to remember is not to forget the moving-in notification. (By the way, going to a branch office is less crowded than going to the main city/ward office.) It was a hassle to have to reset my My Number PIN when moving in.

  1. Smartphone Electronic Certificate

You can load your My Number electronic certificate onto your smartphone. It might be convenient as you can log in to MyNa Portal card-less.

Dissatisfactions

  1. Smartphone App NFC Even though the electronic certificate is on my smartphone, it always requests NFC. It's inconvenient that the app won't open without NFC being enabled, so I hope for improvement.

  2. My Number is Written on It Having the My Number written on the My Number Card creates a risk if it's lost. Although misuse is hard to imagine. I wish it were numberless like a credit card.

  3. Monochrome Photo The photo embedded in the My Number Card is monochrome. Why wasn't it in color?

  4. Troublesome Renewal Due to electronic certificate security, renewals are every 5 years. However, the card's validity period is 10 years. What? It seems it might or might not be improved.

  5. Hospitals Where the Card Cannot Be Used It seems the government provides some subsidies, so I hope they will support it.

  6. Too Many PIN Types There are four types of PINs. I wish there were just one, but is it difficult due to security? I don't know.

  7. Unstylish Card Design I wish it would emulate the design of a radio operator's license.

Probably Misunderstood Things

There are many off-base criticisms of the My Number Card, so I'll summarize them. Please understand the system before criticizing.

  1. Personal Information Linked from the My Number Card is Extracted This is partially correct. The My Number Card itself only contains basic personal information like address, name, gender, and date of birth. It probably contains less information than a driver's license. To view information linked to the My Number Card, you need to open the linked site and authenticate using the My Number Card. Linked information cannot be viewed without the My Number Card and its PIN. Of course, if you write the PIN on the card and then lose it, various pieces of personal information could be extracted. This point is similar to a cash card.

  2. The PIN is only 4 digits, and security is weak It's incorrect that security is weak. Consider logging into SNS on a computer; you can log in with an ID and password. On SNS, the ID is easily known, so you can log in if you have the password. No matter how complex the password, it's a single-factor authentication. On the other hand, the My Number Card uses two-factor authentication: possession of the card + knowledge of the PIN. The reason Windows and other systems allow logging in with a PIN is that two-factor authentication (possession + memory) is said to be more secure than single-factor authentication using a complex password.

  3. Errors in Health Insurance Card Linkage This is a linkage error by the health insurance association, a human error. The My Number Card is merely a personal authentication mechanism and is not the problem itself. However, there is an argument to be made about how to deal with errors in linkage by health insurance associations. Health insurance information can be checked on MyNa Portal, so it's advisable to check it once.

  4. 100% burden at the counter without a My Number Card is outrageous As before, you can receive a refund by processing it through your health insurance association. However, it seems they will introduce a "qualification certificate" system, which defeats the purpose.

Getting Started with Poetry: A Python Package Manager

· One min read
ひかり
Main bloger

Installing Poetry

Install Poetry using pip. (It's also a good idea to upgrade pip at the same time.)

python -m pip install --upgrade pip
pip install poetry

Creating a Python Project with Poetry

1. Creating a New Python Project

To create a new Python project, run poetry new. A Python project template will be generated.

poetry new xxxxxxxx

2. Existing Python Project

If you already have a Python project, run poetry init to add the necessary configuration files for Poetry.

poetry init

Entering the Poetry Virtual Environment

Run poetry shell to start a shell in the Poetry virtual environment. You can use the packages added using Poetry.

poetry shell

Adding Packages to Poetry

You can add dependency packages using poetry add.

poetry add xxxxxxxx

Other Commonly Used Commands

  • poetry list: Displays a list of commands.
  • poetry build: Creates packages (.tar.gz, .whl).
  • poetry install: Installs dependency packages.
  • poetry publish: Publishes created packages to PyPI, etc.
  • poetry search: Searches for packages.
  • poetry run: Executes commands in the Poetry environment.
  • poetry show: Displays available packages.
  • poetry update: Executes dependency package updates.

About My Personal Site

· 2 min read
ひかり
Main bloger

While Twitter and Instagram are major platforms for information dissemination, they are limited by terms of service and regulations, restricting freedom of expression. Returning to a personal website is a viable option. This site is user-friendly as it does not utilize W○X and therefore lacks advertising or promotion.

Design Aspects

This site is built using the Jekyll framework, and all themes are custom-made. Here, "theme" refers to font sizes, site structure, margins, etc. It also supports responsive design (adapting to various devices like smartphones and PCs) and dark mode. Although it appears simple, the CSS alone amounts to 13.5 KiB. There's a reason for this. A common pitfall in presentations by those unfamiliar with design is the overuse of accent colors, rainbow gradients, or small margins, resulting in a gaudy design. In other words, poorly executed design can actually make things look worse. Therefore, using accent colors sparingly and setting appropriate margins is beneficial. The result of these meticulous efforts is the large amount of CSS. If anyone finds this homepage gaudy, please share your opinion. Personally, I believe a website with a simple design and no unnecessary animations is the best.

Homepage Design

This homepage is built with Jekyll. Jekyll simplifies web page creation by allowing you to write HTML templates and combine them with Markdown content. Typically, creating web pages would require writing HTML for each one, and modifying them would involve changing each page individually, which is cumbersome. However, using Jekyll makes modifications easier.

Deployment to GitHub Pages

This site utilizes GitHub Pages. GitHub Pages allows you to publish web pages for free and even set up a custom domain. However, the free tier has limitations, such as only allowing Pages for public repositories. For Jekyll deployment, GitHub Actions are used to generate the web page whenever a push is made. While Jekyll can be configured to generate pages on every push, workflows enable the use of plugins.

Required Technologies

The technologies necessary to create such a personal site are:

  • Jekyll
  • HTML
  • CSS / Sass
  • GitHub
  • JavaScript / TypeScript (not essential)

Considering that creating a personal site alone equips you with these skills, I recommend that programming beginners start by creating a personal site.

Function to return MD5 (string) from string (C#)

· One min read
ひかり
Main bloger

Functions used

  • byte[] Encoding.UTF8.GetBytes(string) Converts a string to a byte[]
  • MD5 MD5.Create() Creates an MD5 instance
  • byte[] md5.ComputeHash(byte[]) Generates an MD5 hash from a byte[]

Example

string str2MD5(string src)
{
byte[] srcBytes = Encoding.UTF8.GetBytes(src);
string MD5src;
using (MD5 md5 = MD5.Create())
{
byte[] MD5srcBytes = md5.ComputeHash(srcBytes);
StringBuilder sb = new();
for (int i = 0; i < MD5srcBytes.Length; i++)
sb.Append(MD5srcBytes[i].ToString("x2"));
MD5src = sb.ToString();
}
return MD5src;
}