Forem: nabbisen

jwt-encde 1.1: npm packages for cross-platform published

nabbisen — Fri, 30 Jan 2026 09:11:20 +0000

jwt-encde, local and fast GUI JWT encoder/decoder, 1.1 🎉 now supports installation via npm 🤍

npm install -g jwt-encde
npx jwt-encde

jwt-encde: A simple way to handle JWTs on your desktop

nabbisen — Wed, 21 Jan 2026 13:20:08 +0000

If you're looking for a way to analyze JWTs without using online tools, jwt-encde might be helpful.

It is a dedicated GUI app that brings JWT decoding and encoding to your local desktop. The first stable version was released today, built with Rust and iced.

Why and when jwt-encde ?

100% Offline: Total privacy and information security. No logs, no tracking, no leaks.
Robust Design. Simple & Intuitive: Just a clean, high-performance and error-prevention UI ensures you focus on what's relevant to your current data.
Smart Analysis: Includes JSON syntax highlighting and a built-in Unix timestamp converter to make debugging easier.

And NOT when:

It doesn't support signature verification, as typically handled during integration tests with an IDaaS.

Available for Windows, macOS, and Linux: https://github.com/nabbisen/jwt-encde

MariaDB 11.4 on OpenBSD 7.8: Install

nabbisen — Wed, 03 Dec 2025 14:27:55 +0000

Summary

MariaDB is one of the most popular relational database management systems (RDBMS), forked from MySQL by some of the original developers.
It is open source licensed under GNU GPL 2, and ready for both community and enterprise use with long history and large knowledge to manage and maintain.

To Install it on OpenBSD, the solid and clean operating system, is easy thanks to the Package Management system ("ports") maintained by the great project and the community.

This post shows how to do it.

Environment

OS: OpenBSD 7.8
Database: MariaDB 11.4.9
- It's LTS.

Basic steps

Just a few !!

# pkg_add mariadb-server
# rcctl enable mysqld

# mariadb-install-db

# rcctl start mysqld

# mariadb-secure-installation
# # several questions will be given

All of the description is below.

Tutorial

Install the package

$ doas pkg_add mariadb-server

The result was:

quirks-7.147 signed on 2025-12-01T09:05:47Z
mariadb-server-11.4.9v1:(...): ok
mariadb-server-11.4.9v1: ok
The following new rcscripts were installed: /etc/rc.d/mysqld
See rcctl(8) for details.
New and changed readme(s):
    /usr/local/share/doc/pkg-readmes/mariadb-server

As above, the pkg-readme is brought as /usr/local/share/doc/pkg-readmes/mariadb-server.

Activate daemon

$ doas rcctl enable mysqld

Run `mariadb-install-db`

Create the default database:

$ doas mariadb-install-db

The result was:

Installing MariaDB/MySQL system tables in '/var/mysql' ...
OK


Two all-privilege accounts were created.
One is root@localhost, it has no password, but you need to
be system 'root' user to connect. Use, for example, sudo mariadb
The second is _mysql@localhost, it has no password either, but
you need to be the system '_mysql' user to connect.
After connecting you can set the password, if you would need to be
able to connect as any of these users with a password and without sudo

See the MariaDB Knowledgebase at https://mariadb.com/kb

You can start the MariaDB daemon with:
/etc/rc.d/mysqld start

Please report any problems at https://mariadb.org/jira

The latest information about MariaDB is available at https://mariadb.org/.

Consider joining MariaDB's strong and vibrant community:
https://mariadb.org/get-involved/

Start daemon

$ doas rcctl start mysqld
mysqld(ok)

Run `mariadb-secure-installation`

$ doas mariadb-secure-installation

Start (Before the questions)

NOTE: RUNNING ALL PARTS OF THIS SCRIPT IS RECOMMENDED FOR ALL MariaDB
      SERVERS IN PRODUCTION USE!  PLEASE READ EACH STEP CAREFULLY!

Several questions given

Q1: Current root password

It must be none for the first time. Just push Enter.

In order to log into MariaDB to secure it, we'll need the current
password for the root user. If you've just installed MariaDB, and
haven't set the root password yet, you should just press enter here.

Enter current password for root (enter for none): 
OK, successfully used password, moving on...

At all the questions below, my choice is written down. Actually, they are up to your environment.

Q2: Use unix_socket authentication instead of root password

Setting the root password or using the unix_socket ensures that nobody
can log into the MariaDB root user without the proper authorisation.

You already have your root account protected, so you can safely answer 'n'.

Switch to unix_socket authentication [Y/n] n
 ... skipping.

Q3: Set root password

You already have your root account protected, so you can safely answer 'n'.

Change the root password? [Y/n] y
New password: 
Re-enter new password: 
Password updated successfully!
Reloading privilege tables..
 ... Success!

Q4: Remove anonymous users

By default, a MariaDB installation has an anonymous user, allowing anyone
to log into MariaDB without having to have a user account created for
them.  This is intended only for testing, and to make the installation
go a bit smoother.  You should remove them before moving into a
production environment.

Remove anonymous users? [Y/n] y
 ... Success!

Q5: Disallow root login remotely

Normally, root should only be allowed to connect from 'localhost'.  This
ensures that someone cannot guess at the root password from the network.

Disallow root login remotely? [Y/n] y
 ... Success!

Q6: Remove test database

By default, MariaDB comes with a database named 'test' that anyone can
access.  This is also intended only for testing, and should be removed
before moving into a production environment.

Remove test database and access to it? [Y/n] y
 - Dropping test database...
 ... Success!
 - Removing privileges on test database...
 ... Success!

Q7: Reload privilege tables

Reloading the privilege tables will ensure that all changes made so far
will take effect immediately.

Reload privilege tables now? [Y/n] y
 ... Success!

End (The rest)

Cleaning up...

All done!  If you've completed all of the above steps, your MariaDB
installation should now be secure.

Thanks for using MariaDB!

Conclusion

You may confirm your daemon is fine with:

$ doas rcctl check mysqld
mysqld(ok)

Well, let's login to the server as client with root, the superuser:

$ mysql -u root -p

After entering the password, you must be welcomed:

Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MariaDB connection id is 11
Server version: 11.4.9-MariaDB OpenBSD port: mariadb-server-11.4.9v1

Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

MariaDB [(none)]>

The command line examples:

-- create database
CREATE DATABASE <database> \
    CHARACTER SET utf8mb4 \
    COLLATE utf8mb4_unicode_ci;

-- create user for it
GRANT ALL PRIVILEGES \
    ON <database>.* \
    TO <dbuser>@'localhost' \
    IDENTIFIED BY '<dbpass>';

-- reload privileges
FLUSH PRIVILEGES;

🎵 🐬 Happy storing digitally 🐬 🎵

OpenBSD 7.7 を 7.8 へアップグレード

nabbisen — Sun, 16 Nov 2025 09:50:02 +0000

はじめに

OpenBSD プロジェクトから 2025 年 10 月 22 日に OS の 7.8 がリリースされました 🌷 59 回目のリリースに当たります。

What's New | Changelog

本記事で OpenBSD 7.7 を 7.8 にアップグレードする手順を説明します。
各手順はすばらしい公式ガイド (英語) に基づいています。

チュートリアル

実行するコマンド一式を示しながら、ステップ・バイ・ステップ形式で書いた、アップグレード用のガイドです。

🌊 🐡 🌊

1. アップグレード前準備: 検証とカスタイマイズ

公式のチュートリアルには Before using any upgrade method (私訳: アップグレード方法に関わらずその前に行うこと) セクションが設けられています。

アップグレード方法としては sysupgrade を使うのが、たいていの場合、良い選択になるでしょう。

ディスク空き容量の確認

/usr に 1.1GB 以上の空きがあることが必要です。

$ df -h
Filesystem     Size    Used   Avail Capacity  Mounted on
(...)
/dev/sd1e      7.6G    3.5G    3.7G    50%    /usr

OK のようです :)

現在の利用内容がアップグレード結果に適合することの確認

設定と構文の変更 (英語) と特別なパッケージ (英語) を確認しましょう。
後者に関して、今回は PHP が含まれています。デフォルトバージョンが 8.3 に変更されています:

The default version of PHP in ports has changed from 8.2 to 8.3.

バックアップ (必要な場合)

適宜、事前にバックアップを取得しておきましょう。

アップグレード内容のカスタマイズ (必要な場合)

ここは参照用であり、標準のアップグレードではスキップできます。

/auto_upgrade.conf をレスポンス・ファイルとして利用できます。
OpenBSD の autoinstall のドキュメントに、次のように書かれています:

If either /auto_install.conf or /auto_upgrade.conf is found on bsd.rd's built-in RAM disk, autoinstall behaves as if the machine is netbooted, but uses the local response file. In case both files exist, /auto_install.conf takes precedence.

(私訳: /auto_install.conf または /auto_upgrade.conf が bsd.rd 内蔵の RAM ディスクに存在する場合、autoinstall は、ネットブートモードで起動されたマシンのように振る舞いますが、ローカルにあるレスポンス・ファイルを使用します。両方のファイルが存在する場合、/auto_install.conf が優先されます。)

/auto_upgrade.conf の完全な内容の一例は次のようなものです:

Location of sets = disk
Pathname to the sets = /home/_sysupgrade/
Set name(s) = -x*
Set name(s) = +xbase*
Set name(s) = -game*
Set name(s) = done
Directory does not contain SHA256.sig. Continue without verification = yes

この場合、xbase を除く x 一式と game が、インストール対象外になります。

それから /upgrade.site を用いた指定も可能です。

2. `sysupgrade` によるアップグレード

準備は良いですか。

* 注意: 以下のコマンド sysupgrade は、ひとたび実行すると中断はできません。

準備ができたら、以下のコマンドを実行しましょう。実行するのはこれだけです:

$ doas sysupgrade

以下のように出力されるでしょう:

Fetching from https://cdn.openbsd.org/pub/OpenBSD/7.8/amd64/
SHA256.sig   100% |***********************************************************|  2324       00:00    
Signature Verified
BUILDINFO    100% |***********************************************************|    54       00:00    
Verifying old sets.
INSTALL.amd64 100% |**********************************************************| 44889       00:00    
base78.tgz   100% |***********************************************************|   498 MB    00:40    
bsd          100% |***********************************************************| 31408 KB    00:02    
bsd.mp       100% |***********************************************************| 31506 KB    00:02    
bsd.rd       100% |***********************************************************|  4691 KB    00:00    
comp78.tgz   100% |***********************************************************| 88484 KB    00:07    
game78.tgz   100% |***********************************************************|  2742 KB    00:00    
man78.tgz    100% |***********************************************************|  8286 KB    00:00    
xbase78.tgz  100% |***********************************************************| 74882 KB    00:06    
xfont78.tgz  100% |***********************************************************| 23018 KB    00:01    
xserv78.tgz  100% |***********************************************************| 11812 KB    00:00    
xshare78.tgz 100% |***********************************************************|  4553 KB    00:00    
Verifying sets.
Fetching updated firmware.
fw_update: add none; update intel 
Upgrading.

マシンの再起動とシステムのアップグレードが行われます。ふたたび再起動が行われて、sysmerge が自動で実行されます。それから sshd 等のデーモンが、従来のように起動されます。"Checking for available binary patches..." と出力されて、もし対象が存在すれば "Run syspatch(8) to install:" と表示されるでしょう。

最終的に以下が表示されます:

starting local daemons: cron.
Sat Nov 15 16:45:30 JST 2025

OpenBSD/amd64 ... (ttyC0)

login:

ログインメッセージが表示されています。"OpenBSD 7.8 (GENERIC.MP)" とあります。

3. アップグレード後の操作: `sysmerge` (必要に応じて)

公式ドキュメントにアップグレード後に行うこと (英語) が書かれています。大いに参考になるでしょう。

In some cases, configuration files cannot be modified automatically. Run
# sysmerge
to check and perform these configuration changes.

ここで言われているのは、手動で sysmerge を実行することが必要な場合もある、ということです。
以下のような conf ファイルを、手動でマージすることが必要な場合もあります。気を付けてください:

/etc/login.conf

コマンドを実行してみましょう:

$ doas sysmerge

まず差分が出力されるでしょう。それから以下のようにたずねられます:

  Use 'd' to delete the temporary ./etc/login.conf
  Use 'i' to install the temporary ./etc/login.conf
  Use 'm' to merge the temporary and installed versions
  Use 'v' to view the diff results again

  Default is to leave the temporary file to deal with by hand

How should I deal with this? [Leave it for later]

最初の 3 つは、以下のような挙動になります:

d: 現在の (ローカルの) ファイルを保持する。
i: sysupgrade が取得した新しいファイルでローカルを上書きする。
m: 対話型形式で手動でマージする。

m を入力するとマージモードが立ち上がります。一つ一つの差分について、いずれを採用するのかを確認されるでしょう:

l を入力すると左側が採用されます。
r は右側です。

その後に、マージ結果ファイルに対して、どの操作を行うのかをたずねられます:

  Use 'e' to edit the merged file
  Use 'i' to install the merged file
  Use 'n' to view a diff between the merged and new files
  Use 'o' to view a diff between the old and merged files
  Use 'r' to re-do the merge
  Use 'v' to view the merged file
  Use 'x' to delete the merged file and go back to previous menu
  Default is to leave the temporary file to deal with by hand

===> How should I deal with the merged file? [Leave it for later]

e を入力すると、エディタが起動されてマージ結果ファイルを編集できるようになります。

i を入力すると、マージ結果ファイルをマシンにインストールします:

===> Merging /etc/login.conf (running cap_mkdb(1), needs a relog)

4. `syspatch` の適用 (スキップ可能)

ここからの 2 つのタスクは、日常的なメンテナンスで、システムをアップデートする時にも実施するものです。

syspatch は重要なコマンドです。OpenBSD から、必要と判明し次第都度、継続的に提供される公式のバイナリ・パッチです。

$ doas syspatch

5. パッケージのアップデート

What's new (英語) セクションがリリースページにありますが、そこの "Ports and packages" (Ports とパッケージ (英語)) に "Some highlights" (注目点 (英語)) が記載されています。例えば、VMM/VMD が今回も更新されています。

次のコマンドはマシンにインストールされているすべてのパッケージをアップデートします:

$ doas pkg_add -u

大量の出力が現れるでしょう。これらは慎重に読む必要があります。終わりの部分は特に、です。そこに重要な変更点や実施すべきアクションが書かれているかもしれません。私の場合、fish をデフォルトのシェルとして使っているのですが、こちらが正常に起動することをいつも確認しています。というのも、かつて Python のアップグレードの影響でクラッシュするようになったことがあるからです 😅

6. 設定と構文の変更

必要に応じて conf を更新して、設定と構文の変更 (英語) に書かれている内容を適用しましょう。

今回、build ユーザーへの言及があります。LLVM 19 のビルドに関わることで、ログインクラスを変更する必要があります。

7. 古くなったファイルの削除

ここはシンプルな手順です。公式チュートリアルの削除すべきファイル (英語) に書かれていることを行うだけです。

今回の対象はありません。

8. 特別なパッケージ

公式チュートリアルの特別なパッケージ (英語) を確認しましょう。使っているものがあるかもしれません:

freetds
php
rbw

9. 再起動

ゴールが見えて来ました ! 最後に必須では無いですが再起動しておくと良いしれません:

$ doas reboot

おわりに

新しいシステムとあなたが長く楽しい時間を過ごせますように :)

OpenBSD プロジェクトとコミュニティへの深い感謝を込めつつ。

OpenBSD Upgrade 7.7 to 7.8

nabbisen — Sun, 16 Nov 2025 09:37:28 +0000

Summary

The OpenBSD project released 7.8 of their OS on 22 Oct 2025, as their 59th release 💫

What's New | Changelog

This post shows how to upgrade OpenBSD 7.7 to 7.8.
The steps are based on their official guide with appreciation to them.

Tutorial

Here is a step-by-step guide with a set of command-lines to run.

🌷 🐡 🌅

1. Pre-upgrade: Validate and customize

The official tutorial includes Before using any upgrade method section.

Using sysupgrade is usually a good choice.

Validate available disk size

/usr should be greater than 1.1GB.

$ df -h
Filesystem     Size    Used   Avail Capacity  Mounted on
(...)
/dev/sd1e      7.6G    3.5G    3.7G    50%    /usr

OK :)

Validate compatibility with the current usage

See Configuration and syntax changes and Special packages.
The latter this time includes PHP default version switched to 8.3:

The default version of PHP in ports has changed from 8.2 to 8.3.

Backups (Optional)

You might have to create some backups.

Customize upgrade (Optional)

This step is just for reference, skippable with standard upgrade.

/auto_upgrade.conf is available as the response file.

Of course, you can skip this and go next if it's unnecessary. The default behavior is sufficient in most cases.

Well, the OpenBSD manual page on autoinstall says:

If either /auto_install.conf or /auto_upgrade.conf is found on bsd.rd's built-in RAM disk, autoinstall behaves as if the machine is netbooted, but uses the local response file. In case both files exist, /auto_install.conf takes precedence.

The whole example of /auto_upgrade.conf is like:

Location of sets = disk
Pathname to the sets = /home/_sysupgrade/
Set name(s) = -x*
Set name(s) = +xbase*
Set name(s) = -game*
Set name(s) = done
Directory does not contain SHA256.sig. Continue without verification = yes

In this case, x sets except xbase and game are excluded.

Also, /upgrade.site can be applied.

2. Upgrade with `sysupgrade`

OK. You must be ready.

* Caution: The command below, sysupgrade, is unable to stop once it is run.

Let's just run it, if ready:

$ doas sysupgrade

It will print out like this:

Fetching from https://cdn.openbsd.org/pub/OpenBSD/7.8/amd64/
SHA256.sig   100% |***********************************************************|  2324       00:00    
Signature Verified
BUILDINFO    100% |***********************************************************|    54       00:00    
Verifying old sets.
INSTALL.amd64 100% |**********************************************************| 44889       00:00    
base78.tgz   100% |***********************************************************|   498 MB    00:40    
bsd          100% |***********************************************************| 31408 KB    00:02    
bsd.mp       100% |***********************************************************| 31506 KB    00:02    
bsd.rd       100% |***********************************************************|  4691 KB    00:00    
comp78.tgz   100% |***********************************************************| 88484 KB    00:07    
game78.tgz   100% |***********************************************************|  2742 KB    00:00    
man78.tgz    100% |***********************************************************|  8286 KB    00:00    
xbase78.tgz  100% |***********************************************************| 74882 KB    00:06    
xfont78.tgz  100% |***********************************************************| 23018 KB    00:01    
xserv78.tgz  100% |***********************************************************| 11812 KB    00:00    
xshare78.tgz 100% |***********************************************************|  4553 KB    00:00    
Verifying sets.
Fetching updated firmware.
fw_update: add none; update intel 
Upgrading.

The machine will reboot and upgrade the system. It will reboot again and sysmerge will follow automatically. Then daemons such as sshd will be started as usual. It will print out "Checking for available binary patches...", and you will see "Run syspatch(8) to install:" if there are.

Finally, you will see:

starting local daemons: cron.
Sat Nov 15 16:45:30 JST 2025

OpenBSD/amd64 ... (ttyC0)

login:

After all, when login is successful, you will see the login message including "OpenBSD 7.8 (GENERIC.MP)".

3. Post-upgrade: `sysmerge` if necessary

The official documentation describes on them and helps a lot.

In some cases, configuration files cannot be modified automatically. Run
# sysmerge
to check and perform these configuration changes.

It means manually running sysmerge in addition may be sometimes necessary.
Remember you sometimes have to manually merging conf files such as:

/etc/login.conf

Run:

$ doas sysmerge

When there is difference to be manually merged, you will see the results first. Then you will be asked:

  Use 'd' to delete the temporary ./etc/login.conf
  Use 'i' to install the temporary ./etc/login.conf
  Use 'm' to merge the temporary and installed versions
  Use 'v' to view the diff results again

  Default is to leave the temporary file to deal with by hand

How should I deal with this? [Leave it for later]

Each of the top 3 options work like:

d: to preserve the current file.
i: to overwrite it with the new file sysupgrade brought.
m: to merge them manually and interactively.

If you type m to start merge mode, you will be asked to type each of them at each difference:

l to choose the left diff,
r to choose the right.

Then you will see the options to deal with the merged file:

  Use 'e' to edit the merged file
  Use 'i' to install the merged file
  Use 'n' to view a diff between the merged and new files
  Use 'o' to view a diff between the old and merged files
  Use 'r' to re-do the merge
  Use 'v' to view the merged file
  Use 'x' to delete the merged file and go back to previous menu
  Default is to leave the temporary file to deal with by hand

===> How should I deal with the merged file? [Leave it for later]

If you type e, editor will run with the merged file.

If you type i, the merged file will be installed directly:

===> Merging /etc/login.conf (running cap_mkdb(1), needs a relog)

4. Apply `syspatch` (skippable)

The next two tasks below are usual just in order to update the system, too.

syspatch is an important command to install binary patches officially offered by OpenBSD successively as found to be needed.

$ doas syspatch

5. Update packages

What's new section in the release page also shows "Some highlights" in "Ports and packages". For example, VMM/VMD was improved this time, too.

The command-line below will update all of the packages installed in the machine:

$ doas pkg_add -u

You will see a lot printed out, but should be careful to read, especially the trailings. They may tell there are some important changes or tasks to do. As to me, I always check if fish, my default shell, starts normally, because I have experienced trouble which crashed it with Python upgrade 😅

6. Configuration and syntax changes

Update some conf as needed to apply what Configuration and syntax changes describes.

This time build user is referred to around LLVM 19 build: the login class needs to be modified.

7. Remove old files

This is a simple step. All what to do is just follow Files to remove in the official tutorial.

There is nothing this time.

8. Special packages

Check Special packages in the official tutorial. You may use some of:

freetds
php
rbw

9. Reboot

Almost done ! Finally and optionally run:

$ doas reboot

Conclusion

Hope the new system and you enjoy together long :)

With great appreciation to the OpenBSD project and the community.

apimock-rs features: external interfaces and ipv6 support

nabbisen — Sun, 09 Nov 2025 10:57:58 +0000

Confirmation was finished ✅️ ✅️

Our apimock-rs supports both of:

🚪 Listener to external interfaces (all interfaces)
❄️ IPv6

https://apimokka.github.io/apimock-rs/advanced-topics/listener/index.html

It is a developer-friendly, featherlight and functional HTTP(S) mock server built in Rust 🩵

apimock-rs 4.4.0 is released: HTTPS is now supported

nabbisen — Sat, 08 Nov 2025 12:21:25 +0000

apimock-rs is a developer-friendly, featherlight and functional HTTP(S) mock server built in Rust.

We are happy to announce HTTPS is now supported after much effort made :)

https://apimokka.github.io/apimock-rs/user-guide/getting-started/https-support.html

おわりに - Vue フロントエンド開発入門

nabbisen — Tue, 24 Jun 2025 14:00:00 +0000

おつかれさまでした ! この学習セットを通じて、あなたはフロントエンド開発、特に Vue を使った Web アプリ開発の基礎から始めて、多くのことを学びました。

ふりかえり

Web 開発の全体像: フロントエンドとバックエンドの役割、そしてそれらが連携して Web アプリを構成するしくみを理解しました。
開発環境の構築: Node.js、npm、VS Code、Vite といった開発に必要なツールをセットアップしました。
Vue の基本: Composition API を使ったリアクティブなデータ管理、v-bind や v-if といった Vue 独自の強力な構文を学びました。
Vue コンポーネント: アプリを再利用可能な部品に分割し、props と emit を使ってコンポーネント間でデータをやり取りする方法を学びました。
SPA と状態管理: Vue Router で複数ページを扱う SPA の概念と、Pinia を使ってアプリ全体のデータを効率的に管理する方法を学びました。
型安全な開発: TypeScript を導入することで、バグを減らし、コードの品質を高める方法を知りました。
UI/UX の重要性: ユーザー視点に立ったデザインの考え方と、 CSS / SCSS を使ったスタイリングの基本を学びました。

これらは、現代のフロントエンド開発において非常に重要なスキルセットです。

さらなる向上のために

学習はこれで終わりではありません。ここからが、あなたの本当の旅の始まりです。

実際に手を動かす: 学習セットで学んだ知識を使い、自分自身のアイデアで小さな Web アプリをつくってみましょう。例えば、簡単な Todo アプリ、天気予報アプリ、お気に入りのレストランリストなど。
エラーを恐れない: エラーは、あなたが次に何を学ぶべきかを教えてくれる最高の先生です。エラーメッセージを読み、AI や検索エンジンを活用して解決策を探しましょう。
公式ドキュメントを読む: Vue、Vue Router、Pinia、TypeScript などの 公式ドキュメント は、最も正確で最新の情報源です。困ったときや、より深く理解したいときに活用しましょう。
コミュニティに参加する: 技術系のイベント、オンラインフォーラム、SNS などで他の開発者と交流し、質問したり、自分の知識を共有したりするのも、良い経験になります。
新しい技術に挑戦する: Web 開発の世界は常に進化しています。新しいライブラリやツール、トレンドにアンテナを張り、興味を持ったものには積極的に挑戦してみましょう。
バックエンドに興味を持つ: フロントエンドだけでなく、サーバーサイドの技術 (Node.js の Express、Python の Django / Flaskなど) を学ぶと、フルスタック開発者として、より幅広いアプリを構築できるようになります。

あなたの Web 開発の旅がすばらしいものになることを、こころから願って、応援しています !

UI/UX - 大規模な CSS への対応

nabbisen — Mon, 23 Jun 2025 21:00:00 +0000

大規模なスタイルセットを記述する場合、CSS では限界があります。そこで登場するのが、CSS プリプロセッサ と呼ばれるツールです。その中でも代表的なのが SCSS (サス、Sassy CSS) です。

SCSS - CSS プリプロセッサ

SCSS は CSS をより効率的かつ構造的に書くための拡張言語です。SCSS コードは、CSS に変換可能であり、実行時には CSS としてブラウザに解釈されます。

SCSS の主な機能とメリット

メリット	SCSS 記法	メリット
変数	`$primary-color: #007bff;`	一括変更、管理のしやすさ
ネスト	`.parent { .child { ... } }`	コードの可読性、構造の把握が容易
ミックスイン	`@mixin my-btn { ... }`	スタイルの再利用、記述量の削減
インポート	`@import 'variables';`	ファイル分割、管理のしやすさ

解説

変数: 色やフォントサイズなど、繰り返し使う値を定義して管理できます。変更があった際に一箇所修正するだけで済むため、メンテナンスが容易です。
ネスト: CSS セレクタを入れ子 (ネスト) にして書くことができ、HTML の構造を反映した、より読みやすいコードにできます。
ミックスイン: 繰り返し使う CSS のまとまりを関数のように定義し、必要な場所で呼び出して使えます。ベンダープレフィックスの管理などにも役立ちます。
インポート: CSS ファイルを分割して管理し、必要な場所でまとめて読み込むことができます。

SCSS コード例

変数

$primary-color: #007bff;
$font-size-base: 16px;

ネスト

.header {
  background-color: #f8f9fa;
  padding: 20px;

  h1 {
    color: $primary-color;
    // 変数を使った計算も可能
    font-size: $font-size-base * 1.5;
  }

  nav {
    ul {
      list-style: none;
      padding: 0;

      li {
        display: inline-block;
        margin-right: 15px;

        a {
          color: #333;
          text-decoration: none;

          // & で親セレクタを参照
          &:hover {
            // 色を暗くする関数
            color: darken($primary-color, 10%);
          }
        }
      }
    }
  }
}

ミックスイン (mixin)

@mixin button-style($bg-color, $text-color: white) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.primary-button {
  // ミックスインを呼び出す
  @include button-style($primary-color);
}

.secondary-button {
  @include button-style(#6c757d);
}

Vue プロジェクトとの統合

Vue プロジェクトで SCSS を使うには、SCSS をコンパイルするためのローダー (sass 等) をインストールする必要があります。

npm install -D sass

そして Vue コンポーネントの <style> タグに lang="scss" を追加します。

<style lang="scss" scoped>
  // ここに SCSS を記述
  .my-component {
    h2 {
      color: blue;
    }
  }
</style>

SCSS を導入することで、CSS によるスタイル定義を構造的に整理できるようになります。それによって大規模アプリでもスタイリングの管理がしやすくなります。

UI/UX - CSS でスタイル定義

nabbisen — Mon, 23 Jun 2025 14:00:00 +0000

CSS とは

Web ページの見た目を装飾するのが CSS (Cascading Style Sheets) です。HTML でページの骨格を作り、それに対して CSS で色、フォント、レイアウトなどを指定します。

CSS 基本構文

CSS では、HTML 要素にスタイルを適用するためのルールを記述します。

セレクタ {
  プロパティ: 値;
  プロパティ: 値;
}

用語	説明	例
セレクタ	どの HTML 要素にスタイルを適用するかを指定します。	(下記「セレクタの種類」参照)
プロパティ	変更したいスタイルの種類	`color`, `font-size`, `margin`
値	プロパティに設定する具体的な値	`blue`, `16px`, `10px 20px`

セレクタの種類

セレクタは以下の 3 種類に大別されます。(疑似要素を含めるともう少し増えます。) これらを使い分けることで、スタイル適用範囲に幅と柔軟性を持たせることができます。

種類	例
要素セレクタ	`p { color: blue; }` (すべての `<p>` 要素)
class セレクタ	`.my-button { background-color: green; }` (タグに　`class="my-button"` 属性を持つ要素)
ID セレクタ	`#header { font-size: 24px; }` (タグに `id="header"` 属性を持つ要素)

CSS コード例

テキスト: 色やフォントサイズ

h1 {
  /* 文字色を濃いグレーに */
  color: #333;
  /* フォントサイズを 32 ピクセルに */
  font-size: 32px;
  /* テキストを中央揃えに */
  text-align: center;
}

ボタン: UI 要素のスタイル

.button {
  /* 背景色を青に */
  background-color: #007bff;
  /* 文字色を白に */
  color: white;
  /* 内側の余白 */
  padding: 0.2em 0.4em;
  /* 枠線をなくす */
  border: none;
  /* 角を丸くする */
  border-radius: 0.2rem;
  /* マウスカーソルをポインターに */
  cursor: pointer;
}

レイアウト (Flexbox の基本)

.container {
  /* この要素を Flexbox コンテナにする */
  display: flex;
  /* 子要素の水平方向: 両端に配置 */
  justify-content: space-between;
  /* 子要素の垂直方向: 中央に配置 */
  align-items: center;
}

Vue ではスタイルをどこに書くのでしょうか。

一つの方法は、すでに見た単一ファイルコンポーネント (SFC) すなわち .vue ファイルの中で <style> タグに記述する方法です。そのコンポーネントに特化した CSS を記述できます。
共通のスタイルやユーティリティ class 定義を外部ファイル (.css) に記述することも可能です。希望の場所で読み込んで使用します。

apimock-rs v4.3: Dynamic response generation support

nabbisen — Sun, 22 Jun 2025 22:00:00 +0000

API mock (apimock-rs) is a developer-friendly, featherlight and functional HTTP mock server built in Rust.

Docs: https://apimokka.github.io/apimock-rs/

We've rolled out its new minor version which brings upgrade on crafting responses. While the server has supported flexible routing for static responses based on file paths and rule sets, this update focuses on improving the Rhai middleware scripting.

The key improvement is that Rhai scripts now can dynamically generate response data. Previously, a script could only point to a static file path once a condition was met. Now, your scripts can directly create the response body, whether it's a JSON string or plain text. This means more powerful mocking capabilities with programmatically generated content for your development workflow.

let json_str = "{ \"greetings\": \"Hello, world.\" }";

// debug print:
print(url_path);

if url_path == "/middleware-test/map/json" {
    return #{ "json": json_str };
}

We've also updated our documentation to guide you through these new features.

UI/UX - デザインの基本的な原則

nabbisen — Sun, 22 Jun 2025 17:00:00 +0000

デザインの基本的な原則について概説します。これらはシンプルながら強力で、ユーザーにとって直感的で快適なフロントエンドを実現するのに役立ちます。

デザインの基本的な原則

情報の階層化 - 見やすさ

「何が大事か」をハッキリ見せる こと。

強弱をつける: タイトルは大きく、本文は小さく。見出しは太くするなど、メリハリで情報の重要度を示します。
まとまりを作る: 関連する情報を近くに置いたり、グループ化したりして、ゴチャつきを無くします。

視線の誘導

ユーザーの目が自然と動く ように、うながすこと。

目印を作る: 重要なボタンや情報は、色を変えるなどして「次、ここ !」と示します。
流れを作る: ユーザーが読みやすいように、要素を配置します (例: 左上から始めて、右下へ)。

一貫性 - 統一感

どこでも「いつもの感じ」 を保つこと。

ルールを決める: 色、フォント、ボタンの形など、サイト全体で統一します。
同じ機能は同じ場所: 検索ボタンなど、同じ機能は常に同じ見た目・位置にします。同じ場所にあるのでユーザーは迷わずにたどり着けます。

Forem: nabbisen

jwt-encde 1.1: npm packages for cross-platform published

jwt-encde: A simple way to handle JWTs on your desktop

MariaDB 11.4 on OpenBSD 7.8: Install

Summary

Environment

Basic steps

Tutorial

Install the package

Activate daemon

Run mariadb-install-db

Start daemon

Run mariadb-secure-installation

Start (Before the questions)

Several questions given

Q1: Current root password

Q2: Use unix_socket authentication instead of root password

Q3: Set root password

Q4: Remove anonymous users

Q5: Disallow root login remotely

Q6: Remove test database

Q7: Reload privilege tables

End (The rest)

Conclusion

OpenBSD 7.7 を 7.8 へ アップグレード

はじめに

チュートリアル

1. アップグレード前準備: 検証とカスタイマイズ

ディスク空き容量の確認

現在の利用内容がアップグレード結果に適合することの確認

バックアップ (必要な場合)

アップグレード内容のカスタマイズ (必要な場合)

2. sysupgrade によるアップグレード

3. アップグレード後の操作: sysmerge (必要に応じて)

4. syspatch の適用 (スキップ可能)

5. パッケージのアップデート

6. 設定と構文の変更

7. 古くなったファイルの削除

8. 特別なパッケージ

9. 再起動

おわりに

OpenBSD Upgrade 7.7 to 7.8

Summary

Tutorial

1. Pre-upgrade: Validate and customize

Validate available disk size

Validate compatibility with the current usage

Backups (Optional)

Customize upgrade (Optional)

2. Upgrade with sysupgrade

3. Post-upgrade: sysmerge if necessary

4. Apply syspatch (skippable)

5. Update packages

6. Configuration and syntax changes

7. Remove old files

8. Special packages

9. Reboot

Conclusion

apimock-rs features: external interfaces and ipv6 support

apimock-rs 4.4.0 is released: HTTPS is now supported

おわりに - Vue フロントエンド開発入門

ふりかえり

さらなる向上のために

UI/UX - 大規模な CSS への対応

SCSS - CSS プリプロセッサ

SCSS の主な機能とメリット

解説

SCSS コード例

変数

ネスト

ミックスイン (mixin)

Vue プロジェクトとの統合

UI/UX - CSS でスタイル定義

CSS とは

CSS 基本構文

セレクタの種類

CSS コード例

テキスト: 色やフォントサイズ

ボタン: UI 要素のスタイル

レイアウト (Flexbox の基本)

Run `mariadb-install-db`

Run `mariadb-secure-installation`

OpenBSD 7.7 を 7.8 へアップグレード

2. `sysupgrade` によるアップグレード

3. アップグレード後の操作: `sysmerge` (必要に応じて)

4. `syspatch` の適用 (スキップ可能)

2. Upgrade with `sysupgrade`

3. Post-upgrade: `sysmerge` if necessary

4. Apply `syspatch` (skippable)