In 2020, I quit my job and stayed at home, having plenty of time each day. So, I started developing some development-related tools, aiming to solve problems encountered during development or to help gain a deeper understanding of certain technical concepts.

Writing small tools every day, time passed day by day. Looking back, this experience was actually quite interesting.

At the beginning, the UI of these tools was indeed quite rudimentary. However, as time went on, I continuously improved their appearance. Although they may still not be considered exquisite now, they have made significant progress.

To be honest, these tools have very little user guidance and documentation, more like my own little world. Through Google Analytics data, I found that some tools might only have myself as a user, such as the micro image hosting. But precisely because I use them myself, even though the frequency of adding new tools has decreased recently, I have been maintaining them consistently.

What makes me feel gratified is that I submitted some of these tools to Mr. Ruan Yifeng's blog, and many of the small tools received his recommendation. This was a great encouragement for me.

Some Tools Related to In-depth Principles

These tools are designed to help developers gain a deeper understanding of some basic concepts and underlying principles.

IEEE754 Floating-Point Conversion

This tool can help you understand the internal representation of double-precision floating-point numbers in the IEEE 754 standard. It can convert decimal numbers to their corresponding binary representation, clearly showing the sign bit, exponent bits, and mantissa bits. This is very helpful for understanding how computers handle floating-point numbers.

According to the IEEE754 standard, the floating-point conversion for Infinity is: all exponent bits are 1, all mantissa bits are 0.

Here's the floating-point conversion for Infinity:

According to the IEEE754 standard, the floating-point conversion for 0 is: sign bit is 0, all exponent bits are 0, all mantissa bits are 0.

Here's the floating-point conversion for 0:

UTF-8 Encoding Conversion

UTF-8 is a variable-length character encoding. This tool can help you understand how Unicode characters are encoded into UTF-8. You can input any Unicode character, and the tool will display its UTF-8 encoded binary representation, allowing you to visually see the encoding process.

Base64 Encoding Conversion

Base64 is a commonly used encoding method, especially when dealing with binary data. This tool not only helps you understand the principles of Base64 encoding but also provides convenient encoding and decoding functions. It is particularly useful for scenarios where binary data needs to be transmitted in a text environment.

File Type Detection

This tool can help you understand how to determine file types through file magic numbers. You can upload a file, and the tool will read the binary data of the file and determine the file type based on the magic number. This is very useful when dealing with unknown files or verifying file types.

For example, JPEG is identified because its Magic Number is FF D8 FF DB

Image Related

Image processing is an important aspect of Web development. Here are some tools related to image processing.

Micro Image

This is a fast image compression tool that can help you reduce the size of image files without significantly reducing image quality.

It supports various image formats and has no limitations on file size or quantity. This tool is particularly helpful for optimizing website loading speed.

Most importantly, it is implemented using frontend technologies, requiring no server costs, so you don't need to worry about privacy issues. Its implementation is similar to squoosh, both leveraging WebAssembly.

Micro Image Hosting

This is a personal image hosting tool that allows you to use a GitHub repository as your personal image host. It provides simple upload and management functions, making it convenient for you to reference images in articles or web pages. This is a very practical tool for developers who frequently need to share images online.

Image Share

This tool can help you quickly generate images with text, suitable for social media sharing or creating simple posters. It simplifies the process of combining text and images, allowing you to create attractive images without using complex image editing software.

Image Placeholder

This is an image placeholder generator tool that can quickly create custom-sized and colored placeholder images, very suitable for use during the development process. It can help you maintain the integrity of page layout when actual images are not yet ready.

Encoding and Encryption

In Web development, we often need to deal with various encodings and encryptions. Here are some related tools:

URL Encoding

This tool can help you perform URL encoding and decoding, which is very useful for handling URLs containing special characters. It can ensure that your URLs are correctly transmitted and parsed in various environments.

HTML Entity Encoding

The HTML entity encoding tool can help you convert special characters to HTML entities, ensuring they display correctly in HTML. This is important for preventing XSS attacks and ensuring correct rendering of HTML documents.

Hash Generator

This tool can generate various commonly used hash values, including MD5, SHA1, SHA256, etc. It is very useful in scenarios such as data integrity verification and password storage.

Color Tools

Color is an important element in Web design. Here are some color-related tools:

Color Conversion

This tool can convert between different color models such as RGB, HSL, CMYK, etc. It can help designers and developers switch freely between different color representation methods.

Palette Generator

This tool can help you generate tints and shades of colors, very suitable for creating consistent color themes. It allows you to quickly build harmonious color schemes, improving design efficiency.

Contrast Ratio Calculator

This tool can calculate the contrast ratio between two colors, helping you ensure the readability of text on backgrounds. It is very important for creating designs that meet accessibility standards.

Conclusion

Although some tools might only be used by myself, it is this continuous process of learning and creation that makes me feel fulfilled and happy.

I will continue to maintain and improve these tools, and welcome everyone to use them and provide feedback.