Live Note

In modern web development, enhancing user experience by highlighting specific text within a larger body of content is a common requirement. Whether it’s for search results, annotations, or emphasizing key information, a Highlight Text component can be incredibly useful. In this article, we’ll walk through the process of building a simple yet effective Highlight Text component using React.

Here is the Example captured:

In this post, I want to share how I built a custom slider component that comes packed with useful features. This slider not only supports basic functionalities like step increments and configurable maximum/minimum values, but it also offers advanced features such as displaying scale tick values, suffix rendering, and custom value formatting. Whether you’re building a finance dashboard, a settings panel, or a data visualization tool, this component can be tailored to your needs.

Features

Step Increments

The slider supports step increments, allowing you to specify how much the slider’s value should increase or decrease with each move. This is particularly useful for ensuring users select values within a desired precision.

Scale Tick Values

To improve usability, the slider renders tick values along its track. These ticks provide a visual reference for users, making it easier to gauge the range and current value.

Maximum and Minimum Values

You can easily define the slider’s range by setting the maximum and minimum values. This ensures that users can only select a value within a valid, predetermined range.

Suffix Rendering

Often, slider values need to be accompanied by a unit (e.g., %, $, kg). With suffix rendering, you can easily append a suffix to the displayed value, making it clear what the number represents.

Custom Value Formatting

In some cases, the raw slider value might not be in the ideal format for display. This slider component allows you to pass a formatter function that converts the numeric value into a user-friendly string format.

Implementation Overview

Below is a simplified example of how the slider component is implemented using React and TypeScript:

買了個阿里雲服務

有點太貴了。隨便跑點什麽 Memory 就 100%。

時常掉綫，不知道是不是網絡的問題。拿到公司 Network 環境一樣掉綫。

想搭個 Gatsby 玩玩，還是用自己的電腦吧。

写题时遇见的一个东西

1
2
3

char* s = "hello world";
printf("%15.2s", s);
//result: he

找到如下用法：

• *%ms:输出的字符串占 m 列，如字符串本身长度大于 m,则突破获 m 的限制，将字符串全部输出。若串长小于 m,则左补空格。
• *%-ms:如果串长小于 m,则在 m 列范围内，字符串向左靠，右补空格。
• *%m.ns:输出占 m 列，但只取字符串中左端 n 个字符。这 n 个字符输出在 m 列的右侧，左补空格，注意：如果 n 未指定，默认为 0.
• *%-m.ns:其中 m、n 含义同上，n 个字符输出在 m 列范围的左侧，右补空格。如果 n>m,则自动取 n 值，即保证 n 个字符正常输出，注意：如果 n 未指定，默认为 0.

如果是 sprintf(desc, “%m.ns”, sour);

• 如果 desc 空间够的话，会在%m.ns 串 的结尾自动补 null 字符，不同于 strncpy.例如 :sprintf(desc, “%.3s”, “123456”);
• desc 如果空间>=4 字节的话，第 4 个字节将是 null 字符。

Binary Search Tree

• 若左子树不空，则左子树上所有结点的值均小于它的根结点的值。
• 若右子树不空，则右子树上所有结点的值均大于它的根结点的值。
• 左、右子树也分别为二叉排序树。
• 没有键值相等的节点。

实现

Node:

1
2
3
4
5
6
7
8

let print = (key) => console.log(key)
class Node {
  constructor(key) {
    this.key = key
    this.left = null
    this.right = null
  }
}