ARTS Check-in Day 10 - The asChild mode in React, LLM fine-tune framework, and patience in listening.

These past few days have been so busy that I haven't had time to check in daily. I still owe some days, but I will make up for them over the weekend.

A: 58. Length of Last Word #

Given a string s consisting of some words separated by some number of spaces, return the length of the last word in the string.
A word is a maximal substring consisting of non-space characters only.
Example 1:
Input: s = "Hello World"
Output: 5
Explanation: The last word is "World" with a length of 5.
Example 2:
Input: s = " fly me to the moon "
Output: 4
Explanation: The last word is "moon" with a length of 4.

function lengthOfLastWord(s: string): number {
  const result = s.trim().split(/\s+/)
  return result[result.length - 1].length
}

The submission result is:

58/58 cases passed (68 ms)
Your runtime beats 42.36% of typescript submissions
Your memory usage beats 93.1% of typescript submissions (42.2 MB)

This is a very simple problem. Since the regular expression is set to greedy mode by default, the split function will split the string based on the maximum number of spaces. Therefore, it is easy to solve.

R: Implement Radix's asChild pattern in React #

Q: What is the asChild pattern?
It is difficult for a component in a UI library to meet all the requirements of the user for options and components. Therefore, an as pattern was invented, which passes a component as the default component and supports the passing of as component properties to the upper-level component.

<Button as={Link} />

Radix UI has made some improvements to this pattern, turning it into an asChild attribute. When it is true, the child component is rendered; otherwise, the component is rendered in its default form.

<Button asChild>
  <a href="https://www.jacobparis.com/" />
</Button>

Only rendering one child component is supported, and the implementation is as follows:

function Button({ asChild, ...props }: any) {
  const Comp = asChild ? Slot : "button"
  return <Comp {...props} />
}
function Slot({
  children,
}: {
  children?: React.ReactNode
}) {
  if (React.Children.count(children) > 1) {
    throw new Error("Only one child allowed")
  }
  if (React.isValidElement(children)) {
    return React.cloneElement(children)
  }
  return null
}

Q: What is the purpose of the Slot component?
The Slot component is used to render the passed-in child component, including merging props, className, and style, as well as ensuring that only one child component is passed in.

Q: What are some implementation details?

Type handling: When asChild is false, it needs to accept the default properties of the component; when asChild is true, it is recommended that the user pass all the properties to the child component.

type AsChildProps<DefaultElementProps> =
  | ({ asChild?: false } & DefaultElementProps)
  | { asChild: true; children: React.ReactNode }
type ButtonProps = AsChildProps<
  React.ButtonHTMLAttributes<HTMLButtonElement>
>
function Button({ asChild, ...props }: ButtonProps) {
  const Comp = asChild ? Slot : "button"
  return <Comp {...props} />
}

When merging styles, the style of the child component takes precedence over the style of the parent component, so it needs to be spread later.
When merging className, if using tailwindcss, the tailwind-merge library can be used for merging; otherwise, simple string concatenation can be used.
Use the React.Children.only(null) method to throw an error if only one child element is supported.

I don't quite understand this pattern at first glance, but after reading it, I don't know what it is doing. It seems like it is extracting some props from the original ability to directly render child elements and passing them to the empty shell parent element for transmission. In addition, the type definition of the props of this child component is not easy to write. Suppose some attributes are required but passed through the parent component. In this case, the related props of the child component have to be written as optional types. I don't understand it, but I am deeply impressed. Overall, it seems that the practice of renderProps is better than this.

T: LLaMa-Efficient-Tuning - Fine-Tuning Framework for LLaMA-2 and other models#

Currently, to complete my tasks using large language models, besides using OpenAI and Anthropic's API services, another main approach is to fine-tune open-source models like LLaMA-2 to meet the requirements of my tasks and then deploy and use them. This project is a simple and easy-to-use engineering framework for fine-tuning these models, which can be used to fine-tune popular open-source LLMs such as LLaMA-2, BLOOM, Falcon, Baichuan, Qwen, and ChatGLM2.

S: Patience in Listening#

Recently, I have been reflecting on the fact that I haven't had much patience in attentive listening in the past. I always thought that I understood what others wanted to say and didn't want to listen to more explanations that I already understood. As a result, I felt very anxious to express my own views when responding, and I spoke quickly, which may not have been good for communication with the other person, and my thinking was not calm enough. So I took a moment to think and realized that I seemed to only have such a strong desire to express myself in areas where I am good at, but in general, I am more like a closed jar. This is not good, so I need to have more patience in listening. Here are some specific reflections:

I don't express myself in ordinary situations because I lack the ability to express myself in many areas. Once I encounter a situation where I have the ability to express myself, I lack the patience to listen and have a strong desire to express myself. This is not a good thing.
I need to shift from proving value through speaking to verifying value through listening.
Being good at listening can not only give the other person a better sense of communication, but also improve my "demeanor" and allow me to have more calm and meticulous thinking.
I remembered a sharing from Teacher Tinyfool, who said that when discussing a problem with someone else, he doesn't express his own views for the first half hour, just listens to the other person's words. After the other person finishes speaking and clarifies their thoughts, he then expresses his own views, without showing targeted refutations, just stating what he believes to be correct.

Reference:

ARTS Challenge