2020年は仕事を辞めて家にいて、毎日時間に余裕がありました。そこで、開発中に遭遇した問題を解決したり、特定の技術概念をより深く理解できるようにすることを目的として、いくつかの開発関連ツールの開発を開始しました。

毎日小さな道具を書いていて、日に日に時間が過ぎていきました。振り返ってみると、この経験は実に興味深いものでした。

当初、これらのツールの UI は確かに非常に初歩的なものでした。しかし、時間が経つにつれて、私は彼らの外観を改善し続けました。現在ではまだ精巧とは言えないかもしれませんが、大きな進歩を遂げています。

正直に言うと、これらのツールにはユーザー ガイドやドキュメントがほとんどなく、むしろ私だけの小さな世界に似ています。 Google Analytics データを通じて、マイクロ イメージ ホスティングなど、一部のツールにはユーザーとして自分だけが含まれる可能性があることがわかりました。でも、自分で使っているからこそ、最近は新しいツールを追加する頻度は減りましたが、メンテナンスはしっかり続けています。

私がうれしく思っているのは、これらのツールのいくつかを Ruan Yifeng 氏のブログに投稿し、多くの小さなツールが氏の推薦を獲得したことです。これは私にとって大きな励みになりました。

詳細な原則に関連するいくつかのツール

これらのツールは、開発者がいくつかの基本概念と基礎となる原則をより深く理解できるように設計されています。

IEEE754 浮動小数点変換

このツールは、IEEE 754 標準の倍精度浮動小数点数の内部表現を理解するのに役立ちます。 10 進数を対応する 2 進数表現に変換し、符号ビット、指数ビット、仮数ビットを明確に表示できます。これは、コンピュータが浮動小数点数をどのように処理するかを理解するのに非常に役立ちます。

IEEE754 標準によると、Infinity の浮動小数点変換は次のようになります。すべての指数ビットは 1、すべての仮数ビットは 0 です。

Infinity の浮動小数点変換は次のとおりです:

IEEE754 標準によると、0 の浮動小数点変換は次のようになります: 符号ビットは 0、すべての指数ビットは 0、すべての仮数ビットは 0。

0 の浮動小数点変換は次のとおりです:

UTF-8エンコーディング変換

UTF-8 は可変長文字エンコーディングです。このツールは、Unicode 文字がどのように UTF-8 にエンコードされるかを理解するのに役立ちます。任意の Unicode 文字を入力すると、ツールはその UTF-8 でエンコードされたバイナリ表現を表示し、エンコード プロセスを視覚的に確認できます。

Base64エンコーディング変換

Base64 は、特にバイナリ データを扱う場合によく使用されるエンコード方法です。このツールは、Base64 エンコードの原理を理解するのに役立つだけでなく、便利なエンコードおよびデコード機能も提供します。これは、バイナリ データをテキスト環境で送信する必要があるシナリオに特に役立ちます。

ファイルタイプの検出

このツールは、ファイル マジック ナンバーを通じてファイル タイプを判断する方法を理解するのに役立ちます。ファイルをアップロードすると、ツールがファイルのバイナリ データを読み取り、マジック ナンバーに基づいてファイルの種類を判断します。これは、不明なファイルを処理する場合やファイルの種類を確認する場合に非常に便利です。

たとえば、JPEG はマジックナンバーが FF D8 FF DB であるため識別されます

画像関連

画像処理は Web 開発の重要な側面です。画像処理に関するツールをいくつか紹介します。

マイクロ画像

これは、画質を大幅に低下させることなく画像ファイルのサイズを削減できる高速画像圧縮ツールです。

さまざまな画像形式をサポートしており、ファイルサイズや数量に制限はありません。このツールは、ウェブサイトの読み込み速度を最適化するのに特に役立ちます。

最も重要なことは、フロントエンド テクノロジーを使用して実装されており、サーバーのコストが不要であるため、プライバシーの問題を心配する必要がありません。その実装は squoosh に似ており、どちらも WebAssembly.

マイクロ画像ホスティング

これは、GitHub リポジトリを個人イメージ ホストとして使用できるようにする個人イメージ ホスティング ツールです。簡単なアップロード・管理機能があり、記事やWebページ内の画像参照に便利です。これは、オンラインで画像を頻繁に共有する必要がある開発者にとって非常に実用的なツールです。

画像の共有

このツールは、ソーシャル メディアでの共有や簡単なポスターの作成に適した、テキスト付きの画像をすばやく生成するのに役立ちます。テキストと画像を組み合わせるプロセスが簡素化され、複雑な画像編集ソフトウェアを使用せずに魅力的な画像を作成できます。

画像プレースホルダ

これは、カスタム サイズと色のプレースホルダー画像を迅速に作成できる画像プレースホルダー ジェネレーター ツールで、開発プロセスでの使用に非常に適しています。実際の画像がまだ準備できていない場合でも、ページ レイアウトの整合性を維持するのに役立ちます。

エンコーディングと暗号化

Web 開発では、さまざまなエンコーディングや暗号化を処理する必要があることがよくあります。関連ツールは次のとおりです:

URLエンコーディング

このツールは、URL エンコードとデコードを実行するのに役立ちます。これは、特殊文字を含む URL を処理する場合に非常に役立ちます。これにより、URL がさまざまな環境で正しく送信され、解析されることが保証されます。

HTMLエンティティのエンコーディング

HTML エンティティ エンコード ツールを使用すると、特殊文字を HTML エンティティに変換して、HTML で正しく表示されるようにすることができます。これは、XSS 攻撃を防止し、HTML ドキュメントの正しいレンダリングを保証するために重要です。

ハッシュジェネレータ

このツールは、MD5、SHA1、SHA256 など、一般的に使用されるさまざまなハッシュ値を生成できます。データ整合性の検証やパスワードの保存などのシナリオで非常に役立ちます。

カラーツール

色は Web デザインにおいて重要な要素です。以下に色関連のツールをいくつか示します:

色変換

このツールは、RGB、HSL、CMYK などの異なるカラー モデル間で変換できます。デザイナーや開発者が異なる色表現方法を自由に切り替えるのに役立ちます。

パレットジェネレーター

このツールは、色の濃淡や色合いを生成するのに役立ち、一貫したカラー テーマの作成に非常に適しています。これにより、調和のとれた配色をすばやく構築でき、デザイン効率が向上します。

コントラスト比計算ツール

このツールは 2 色のコントラスト比を計算し、背景上のテキストの読みやすさを確保するのに役立ちます。これは、アクセシビリティ基準を満たすデザインを作成するために非常に重要です。

結論

一部のツールは自分だけが使用するものかもしれませんが、学習と創造の継続的なプロセスが私に充実感と幸せを感じさせます。

私は今後もこれらのツールの維持と改善を続けていきますので、皆さんの使用とフィードバックを歓迎します。