Xheldon Blog

How to Use the Same Shortcuts Across Dual Operating Systems

Thu, 07 Aug 2025 00:00:00 +0000

Preface

My last experience with Windows dates back to ten years ago when I was in school, using a Lenovo Y470-P. This laptop had a design flaw—once when I closed the lid, a component somehow burned out, and I had to replace the motherboard in the end.

After graduation, I immediately bought a 15-inch MacBook Pro (2015 model). Over the years, though I’ve upgraded my laptop, I’ve stayed within the Apple ecosystem. As a result, my impression of Windows remained stuck in the past: a fragmented ecosystem, clunky software, ugly design (this hasn’t changed), and bizarre interactions.

During the recent 618 sales, I built a mid-to-high-end PC with a 14700KF, 5070Ti, 64GB of Crucial 6400MHz RAM, and a 2TB Crucial SSD. I’m absolutely loving it—turns out a high-spec Windows machine can be this smooth! Aside from the still-questionable system design language, other aspects like software launch speed and the design language of well-made apps (e.g., the Windows version of Apple Music) are quite impressive. Of course, the main reasons I bought a Windows PC were gaming (80%) and writing platform-specific C# code (20%).

The Essence of Efficient Input

Having used an HHKB on a Mac for a long time (9 years), I prefer mapping Mac’s HHKB keybindings to Windows. Beyond habit, here’s why:

Common text-editing functions like moving the cursor to the start/end of a line or deleting forward require dedicated keys on Windows—Home, End, Del, etc. These can’t be achieved via modifier + key combinations. On macOS, however, Emacs shortcuts are system-wide: Control + A for line start, Control + E for line end, Control + D for forward delete—all effortless.
Similarly, cursor movement: Windows relies on dedicated arrow keys, while macOS allows Control + B/F/N/P (back/forward/next/previous).

You might wonder: Why do I prefer modifier + key combos over dedicated keys?

The answer is also why I love the HHKB’s 60% layout: My palms can perform all operations without significant movement, ensuring input efficiency.

In the programmer world, using a mouse when you could use the keyboard is a punishable offense!

For example, imagine typing rapidly on Windows when you spot a typo a few words back. Here’s the process:

Right hand leaves the home row, fingers fumbling to the arrow keys (unless you’re on an 87+ key layout, where arrows are easier to find).
Press arrow keys to move the cursor.
Right hand leaves arrows, moves to Backspace.
Press Backspace.

On an HHKB with Mac keybindings, the same operation is done with just the left hand:

Left pinky presses Control + B to move the cursor.
Right pinky hits Backspace, or left pinky uses Control + H/D (delete left/right).

That’s it—your hands never leave the home row.

Even after editing, Windows requires your right hand to leave the home row again for End, while macOS just needs Control + E.

The Struggle with Backtick ` Input

Another reason I love the HHKB: As a frontend developer, I frequently use backticks (the ~ key). On most 60% keyboards, this key is mapped to Esc via a combo. But the HHKB places it as a dedicated key in the top-right, relocating Delete downward and ｜ shifting a key upward (splitting the standard Backspace into two 1u keys).

The Awkward Control Key

Another efficiency-killer in standard layouts: Control is at the bottom-left. Pressing Control + anything forces your wrist to bend left and your palm to shift—any input method requiring palm movement is inelegant and slows you down.

Some online even suggest pressing the bottom-left Ctrl with the part of the palm below the pinky—absurd:

I’ll go further: Any language requiring jaw movement to articulate sounds is inelegant. An elegant language should rely solely on the tongue and throat for clear pronunciation, minimizing mouth movement. Thus, I consider Japanese the most elegant language—though this also limits its expressive power, especially for strong emotions like swearing.

The Useless Caps Lock Key

I believe very few people frequently type in uppercase letters for extended periods, so placing the Caps Lock key—a key of such little importance—on the left pinky finger, a crucial position on a standard keyboard layout, is utterly absurd.

In summary, I consider the HHKB layout to be the most perfect, not just for its symmetrical beauty but also for its efficiency in typing. As for keyboard shortcuts on macOS, at least in terms of text editing efficiency, they are superior to those on Windows.

Therefore, I’ll now share how to replicate macOS keybindings on Windows, allowing you to use the same muscle memory across both operating systems for efficient editing.

As for the most criticized aspect of the HHKB—the arrow keys—in almost every scenario where you’d use arrow keys to move the cursor, you can instead use Emacs shortcuts. The exceptions are… certain terminals, like Python, where Control-D exits the CLI, or when remotely accessing a Linux host via SSH. This can be a bit awkward, but using a good terminal can mitigate some of the hassle. Consider Warp, for example, which allows you to input commands in a text-editor-like manner, meaning you can use Emacs shortcuts to edit commands. If this sounds unclear, just try it—you’ll immediately notice the difference from a standard terminal.

Keyboard Requirements

You’ll need a keyboard that supports multiple layers of key remapping, meaning it can handle combinations like FN + another key. Macro support is optional. Some keyboards support up to 6 layers of mapping (accounting for dual-system switching with 3 layers per system). I’m using my newly purchased Nuphy Air75 V3 keyboard. The reason I chose this over the HHKB is that I also game on Windows, making the F-row (F1–F12) indispensable. Thus, a 75% layout is the smallest key count I can accept.

"Who missed the cannon minion? I’m sending a question mark." — Faker

Implementing Emacs Text Editing via FN Layer

Here are the text-editing functions to replicate (formatted as Windows key → macOS shortcut):

Move cursor to line start: Home → Control + A
Move cursor to line end: End → Control + E
Move cursor down: ↓ → Control + N (Next)
Move cursor up: ↑ → Control + P (Previous)
Move cursor left: ← → Control + B (Back)
Move cursor right: → → Control + F (Front)
Delete right: Del → Control + D (Delete)
Delete left: Backspace → Control + H (The “H” stands for delete, though there’s no corresponding word due to historical reasons—feel free to look it up if interested).

Personally, I prefer using Control + C/V for copy/paste on macOS rather than Command + C/V (though I haven’t remapped this). Perhaps due to historical reasons, Emacs doesn’t support copy/paste, and since these aren’t text-editing-specific shortcuts, macOS assigned them to the Command key.

To replicate HHKB’s macOS keybindings on Windows, you’ll need to remap Caps Lock to an FN layer (I set mine to FN6) and then map each key individually:

Then, in the FN6 layer, assign each key to its corresponding Windows function:

Modifying the Alpha Key Area

On the HHKB, the key above Enter is Delete Backspace, not the ｜ key. Initially, I swapped Backspace and the | key, but for some inexplicable reason, my hands adapted to the 75% layout, causing me to consistently hit the | key instead of Backspace. Switching back to the HHKB forced me to relearn the lower row, which was frustrating. So, I simply remapped both keys to Backspace and relegated the rarely used | key to the F13 position in the F-row.

Next, I swapped the Control and Alt keys. This ensures that macOS shortcuts like Command + C/V/T/W align with their Windows counterparts (Control + C/V/T/W), maintaining consistent muscle memory.

Finally, I swapped the Windows key and Alt (placing the Windows key in the bottom-left corner) to match the position of Alt (Opt) on macOS.

Now, pressing the key to the left of the spacebar (Control on Windows, Command on macOS) and combining it with other keys produces identical results: Control/Command + C for copy, Control/Command + V for paste, Control/Command + T to open a new tab, Control/Command + Shift + T to reopen a closed tab, etc.

Other Key Modifications

Since the Home and End shortcuts already exist, the Home and End keys on the far right of the keyboard are unnecessary. Therefore, I made two modifications: I remapped the Home key to a frequently used shortcut—I set it to Win + V, which opens the clipboard history on Windows. On Mac, I mapped it to Cmd + Opt + C, which opens Alfred’s clipboard history window.

The Home key is mapped to an M1 macro to open the copy history, while the End key is set to WinLock to prevent accidental presses of the Win key in the bottom-left corner due to muscle memory. For now, it’s locked during gaming, and I’ll unlock it once I’ve adjusted.

A Minor Drawback

On Windows, Alt + Tab cannot be remapped, and this shortcut is crucial for switching between application windows. With the above setup, the key combination becomes the second key to the left of the spacebar + Tab.

However, the same functionality on Mac—switching between applications—uses Cmd + Tab.

As a result, aside from the application-switching shortcut (which is system-level and unmappable in both systems), all other keybindings in my setup can be executed with the same muscle memory, eliminating the need to distinguish between Windows and Mac shortcut positions.

Afterword

What works best for you is what matters most. There’s no need to debate which keybinding method is superior—habit is a powerful force. Once you’re accustomed to it, efficiency naturally follows.

Happy Hacking to all!

App Development Journey (Part 1): The Marvelous Mystery of Swift

Thu, 27 Mar 2025 00:00:00 +0000

Explanation

Someone asked why not JavaScript—because it's a scripting language without a type system, making it completely incomparable to Swift.

As a front-end developer, I have only a beginner-level understanding of C, Java, and Python, but I’ve reached an advanced level (self-assessed) in TypeScript (hereafter referred to as TS) in terms of features and usage. Therefore, some things that shocked me might seem like “just ordinary language features” to others, or even prompt questions like, “Are the designers of TypeScript geniuses?”

I won’t necessarily feign shock at every difference between Swift and TS, because some differences stem from TS’s own limitations, while others are commonplace in programming languages (e.g., distinguishing between Int and Double instead of having just one Number type). It’s JavaScript’s design that’s truly shocking (after all, it was hastily designed in a week), not Swift’s.

My belief is: If a language has too many rules, too many exceptions, or too many reserved words, it’s not a good language.

Preface

This article follows the order of Swift’s official language introduction, focusing only on the parts that shocked me while omitting those that didn’t or that I didn’t understand, such as 附加宏.

Basics

Comments

Shocking discovery: Xcode doesn’t have a `/** */` block comment shortcut—only `cmd + /` for line comments.

VSCode’s block comment shortcut is also awkward to press: Alt + Shift + A. Do people not use this feature often?

Of course, in both VSCode and Xcode, you can automatically generate block comments by pressing /** and then Enter.

Optional Binding

Shocking discovery: While debugging, I wanted to write a value that’s always `true` in `if` for testing, but it’s not allowed—the optional binding in `if` statements must be an optional value.

if let a = 2 { } // 错误！
```  

Is this really necessary?  

## Collection Types

{% render_quote color="" %} Shocking point: Among array methods, there's `sort` for in-place sorting, and another `sorted` that returns a new array. {% endrender_quote %}

A language doing what frameworks typically do—very fitting for Apple's style. There are many such examples, but let's not dwell on each one.

## Control Flow

### if Expressions

{% render_quote color="" %} Shocking point: To address the issue of `if-else` assigning values to the same variable, it provides the `if` expression syntax. Similarly, `switch` also has an analogous expression form. {% endrender_quote %}

Swift really goes above and beyond:

```swift
// 平平无奇的写法
let a = 25
let str: String
if a <= 0 {
    str = "小"
} else if a >= 30 {
    str = "大"
} else {
    str = "中"
}
// 简写法
let str = if a <= 0 {
  "小"
} else if a >= 30 {
  "大"
} else {
  "中"
}

Switch’s Powerful Matching

Shocking point: switch has no implicit fallthrough.

This is understandable and more reasonable—who in their right mind would want case 1 to automatically spill into case 2 without explicitly using break?

Shocking point: switch can match object values!

This is actually considered feature, and intuitively more reasonable—truly an expert’s approach.

In TypeScript, since the switch case statement uses strict equality (===) for comparison, you generally wouldn’t pass an object inside your switch parentheses. This is because objects are compared by reference, and in TypeScript, there are rarely situations where you need to check object equality, let alone using a switch statement for such checks.

However, in Swift, you can “capture” the matched value (officially termed a “pattern”) within a case statement:

let somePoint = (1, 1) // 一个平平无奇的元组罢了
// 我现在，开 始 判 断：
switch somePoint {
case (0, 0):
    print("\(somePoint) 在原点")
case (_, 0): // 忽略第一个值
    print("\(somePoint) 在 x 轴")
case (0, _): // 忽略第二个值
    print("\(somePoint) 在 y 轴")
case (-2...2, -2...2): // 判断元组的两个值是否分别在给定区间，在就匹配成功
    print("\(somePoint) 在盒子内部")
default:
    print("\(somePoint) 在盒子外部")
}

// 还可以值绑定！
switch somePoint {
case (let x, 0): // 匹配第二个值，捕获第一个值
    print("x轴值：\(x)")
case (0, let y): // 匹配第一个值，捕获第二个值
    print("y 轴值：\(y)")
case (let x, let y): // 兜底，因为 x 和 y 都是 let，还可以写作 case let (x, y)
    print("\(x) 和 \(y)")
}
// 还可以加 where 限定：
case let (x, y) where x == y:
//还可以多个匹配
case "a", "b", "c":

It’s worth noting that TypeScript also supports “multiple matches,” but this is entirely different from Swift’s case-based multiple matching.

In Swift, for multiple matches separated by commas, the case statement executes as long as any one of the comma-separated items matches. In contrast, TypeScript’s comma-separated matching essentially only matches the last item, because comma-separated expressions in TypeScript only return the final value:

var a = "d"
switch (a) {
 case "d", "c", "b":
  console.log("OK")// 此处不会执行，因为此 case 匹配 "b" 
}

Functions

Labeled Parameters for Functions

Shocking Point: Formal parameters (labeled parameters) can share the same name??? And the rule (here comes another restriction, sigh): parameters following a variadic parameter must have argument labels (if there's only one, the actual argument becomes the formal parameter) and cannot be omitted.

// 下面两个 a 标签参数，完全合法（因为是 label 无所谓）
// 而且 a b 后面的参数 a c（或者单独的一个参数）必须存在，不能用 _ 省略，
//  也可以理解，要不咋知道是第二个参数，而不是前面的可变参数来的？
func a (a b: Double..., a c: Double) -> Double {
    return b.reduce(0, +) + c
}
a(a: 1, 2, 3, 4, 5, a: 6)

Closures

N Abbreviated Forms of Closures

Shocking Point: There are too many syntactic sugars for closures to list here, but the most outrageous is the form that requires only a `>` symbol.

The essence of why this works is that String has a function called >. Yes, you read that right—a symbol can also be a function! More on this shocking detail later.

1 2	`var num = ["9", "2", "1"] var sortedNum = num.sroted(by: >)`

Absolutely unbelievable.

Omitting Return Statements

Shocking Point: You might understand "single-line returns can omit `return`," but you'll never comprehend "multi-line returns can also omit `return`."

In TS, omitting the return statement works the same as in Swift’s ordinary syntax—single-line returns omit return:

// 省略写法
var a = () => 2
// 正常写法是：
var a = () => {
 return 2
}

Ordinary Swift syntax:

1
2
3

func a()-> Int {
 2 // -> 因为单行，所以省略了 return
}

But! The SwiftUI way of writing it:

VStack {
 Text("Hello")
 Text("World")
}

You read that right—this is also a trailing closure function, where VStack is a function. The closure parameter, being the last and only parameter, allows omitting the parentheses of VStack. But! It returns two Text function calls without writing return. Why?

Because it uses ViewBuilder, which shares the same syntactic sugar as resultBuilder later.

Auto-Closures

Shocking Point: At first glance, assigning a plain closure seems unremarkable, but its lazy evaluation capability left me utterly shocked.

When I first encountered auto-closures, they were introduced with this example, touting their “lazy evaluation” capability:

var customersInLine = ["Chris", "Alex", "Ewa", "Barry", "Daniella"]
print(customersInLine.count)
// 打印 “5”
let customerProvider = { customersInLine.remove(at: 0) }
print(customersInLine.count)
// 打印 ”5“
print("Now serving \(customerProvider())!")
// 打印 “Now serving Chris!”
print(customersInLine.count)
// 打印 “4”

I thought, “Isn’t this just a plain closure, similar to TS, where the customerProvider variable is assigned a closure?” The same implementation in TS looks like this:

1
2
3

let customerProvider = () => {
 // 省略逻辑
}

Of course, the closure’s logic is only executed when it is called—what kind of lazy evaluation is this!

But its lazy evaluation truly shines when closures are passed as parameters:

A plain and straightforward explicit closure invocation, similar to how it’s done in TS, where the closure is passed as a parameter and written within a pair of curly braces:

// customersInLine 是 ["Alex", "Ewa", "Barry", "Daniella"]
func serve(customer customerProvider: () -> String) {
    print("Now serving \(customerProvider())!")
}
serve(customer: { customersInLine.remove(at: 0) } )
// 打印 “Now serving Alex!”

However, once you mark customerProvider as @autoclosuer, things become different. In this case, your serve function call can be written like this:

// customersInLine 是 ["Ewa", "Barry", "Daniella"]
func serve(customer customerProvider: @autoclosure () -> String) {
    print("Now serving \(customerProvider())!")
}
serve(customer: customersInLine.remove(at: 0))
// 打印 “Now serving Ewa!”

Note the invocation of the serve function at the end. Its parameter customer is a statement customersInLine.remove(at: 0). In TS, regardless of the scenario, the call stack would first evaluate this value before invoking the serve function. But in Swift, this syntax is merely a different form of the above—the logic remains the same. That is, the serve function is executed first, and the statement is executed internally only when customerProvider is called. This is what they call 延迟计算, right?

If you write this often, you’ll encounter many cases like the following code:

1 2	`a(b.remove(2)) c(d.add4())`

At this point, it becomes hard to tell whether the statements inside the parentheses or the outer function are executed first. As a result, the Swift official documentation also provides a warning:

Overusing autoclosure can make your code difficult to understand. The context and function name should clearly indicate that evaluation is being deferred.

This is really absurd—if it’s not recommended, why design it in the first place?!

Enums

Shocking fact: In other languages, enums are merely a convenient, optional type for state machine checks, but in Swift, they are a first-class type and one of the most commonly used features—even capable of replacing Structs in certain scenarios. Can you believe it?

Shocking fact 2: Enums are value types.

In TS, enums are just plain old “enums,” nothing more than listing values, mostly used to describe states in state machines:

enum A {
 B = "B"
 C = "c"
}

Of course, the tricks TS plays with runtime and compile-time differences are another story. In TS, you could easily replace an enum with an object:

const enum A {
  B = 0,
  C = 1,
}

const A = {
  B: 0,
  C: 1,
} as const;

Associated Values

Shocking Point: Swift, What Were You Thinking Designing Enums Like This?!

In Swift, enums hold paramount importance. You can iterate through all their cases (requiring conformance to the CaseIterable protocol), treat a case as a function, and pass values during invocation for the enum instance to process—this is called “associated values”:

enum A {
 case b(Int, Int) // 声明方式好像一个协议（也就是抽象类）
 case c(String)
}

Then, when using it, you can pass values:

1	`let a = A.b(1024, 9527)`

Enums are most commonly used in switch statements. Combined with Swift’s surprisingly powerful case matching, you can do this:

switch a {
case .b(let d, let f):
 print("A.b 关联值为:\(d) 和 \(f)")
case let .c(g): // 上面提到的另一种 switch case 写法
 print("A.c:\(g)")
}

The first time I saw this, I found it quite abstract and couldn’t think of any practical use cases (since I’d never done it this way).

Implicit Assignment

Shocking Point: The type declaration in enums doesn't specify the enum's own type (key-value pairs) but rather the type of its cases.

Implicit assignment in Swift is consistent with TypeScript or other C-like languages: the first value is n, and subsequent values are n + 1.

But Swift goes a step further—it performs implicit assignment based on the type you declare, which isn’t the default behavior. For example:

enum A: Int { // <- 声明了 Int 类型，所以隐式赋值了
 case b, c, d // b c d 分别为 0 1 2(需要使用 A.b.rawValue 才能访问，这又是另一个震惊点了）
}
enum B: String { // <- 声明了 String 类型，所以隐式赋值了
 case bb, cc, dd // bb cc dd分别为 "bb" "cc" "dd"
}

In TypeScript, you can’t even specify the Int type that Swift allows (this type actually refers to the case’s type). Instead, you can only specify the enum’s type (usually key-value pairs Record elsewhere).

Structs and Classes

Shocking Point: Structs are actually value types?!

This seemingly straightforward struct is actually a value type (using Immutable optimizations for performance):

struct a {
 var b: Int
 var c: String
}

Something wrapped in curly braces doesn’t look like a value at all! Bizarre! Shocking!

Properties

Various Property Wrappers/Observers

Shocking Point: Swift does way too much. Concepts like computed properties, stored properties, property wrappers (which TypeScript also has), and property observers (TypeScript has these too, bundled with wrappers) are typically framework-level features, such as Vue's `computed` and `watch`. Yet Swift implements them directly in structs and classes—unbelievable!

struct A {
 var b = 2 // <- 存储属性，直接有值，在 struct 实例化的时候就确定了
 var c: Int {
  return b * 2 // <- 一个只读计算属性，不存储值，因为单行，return 可以省略
 }
}

Note: Property wrappers are not available for global variables.

Subscripts

Shocking Point: Honestly, the mere existence of the "subscript" concept is shocking enough. It provides a shortcut for accessing elements in collections, lists, or dictionaries. What's more, subscripts can even accept multiple values, just like functions.

Essentially, subscript calls can be thought of as function calls on data structures (like the aforementioned collections, lists, or dictionaries) to access values. The difference is that function calls use (), while subscripts use [].

Inheritance

Shocking Point: Similar to all the previous shocking points, Swift seems to casually add keywords for every possible purpose or effect. As a result, the number of reserved words (though they can't strictly be called "reserved" since Swift allows using any keyword by wrapping it in backticks—more on that later) related to inheritance is overwhelming. Examples include: `final`, `override`, `open`, `required`, and so on.

Initialization

Memberwise Initializers for Structs

Shocking Point: Because structs are value types, their initialization rules differ from those of traditional classes.

At first glance, structs and classes are just ordinary data structures, no different from classes in TypeScript. But once again, Swift complicates things here.

Since Struct is a value type, it’s special in that it has a constructor form called the “memberwise initializer.” This means when a Struct has no init at all, its properties can be initialized by passing parameters without explicitly writing them out.

// 此 Struct 没有 init，因此适用逐一成员构造器
struct A { 
 var a: Int
 var b: Int
}
// 上述效果等同于：
struct A {
 var a: Int
 var b: Int
 init(a: Int, b: Int) {
  self.a = a
  self.b = b
 }
}
// 上面两个都可以这么用：
A(a: 1, b: 2)

However, this rule doesn’t apply to Classes. A Class must explicitly have an init constructor method to initialize its properties.

Designated Initializers and Convenience Initializers for Classes

Shocking point: What? There are two types of initializers???

The designated initializer of a class functions just like a regular construct in TS—it’s a init method. But its convenience initializer… is marked by adding the convenience keyword before init (here we go again!):

1	`convenience init() {}`

Actually, the Swift documentation doesn’t clearly explain to readers why convenience initializers are needed. Instead, it dives straight into class construction, inheritance, and initializer delegation. Here, I’ll explain to beginners why convenience initializers exist—for a very simple reason: 类中的多个指定构造器不允许互相调用。. That’s it! Can’t resist the urge to call it? Want to simplify the initialization process? Go ahead and use a convenience initializer!

Standard approach:

class A {
 var b: Int
 var c: String
 init(b: Int, c: String) {
  self.b = b
 }
 init() {
  self.b = 0
  self.c = "UnKnown"
 }
}

Doesn’t it feel repetitive writing self.b twice like this? So, in the second init(), you might want to do this:

1
2
3

init() {
 self.init(b: 0, c: "UnKnown")	
}

Sorry, the compiler throws an error: Designated initializer for 'A' cannot delegate (with 'self.init'); did you mean this to be a convenience initializer?

In this case, you must use a convenience initializer:

1
2
3

converience init() {
 self.init(b: 0, c: "UnKnown")	
}

All for the sake of “convenience”!

Failable Initializers

Shocking point: Initializers can fail???

A so-called failable initializer simply means the initialization process (the init function call) might throw an error.

Therefore, if the initializer throws an error, you don’t need to wrap it in a try-catch like in TS. Instead, you can directly indicate it by adding a question mark after init, turning it into init?. Then, at the point where an error might occur, return nil, and when instantiating, check if it’s nil. That’s it!

In Swift, normal constructors don’t return values, which is the same as in TypeScript—but TypeScript constructors can return values. If the return value is an object type, it replaces the this object, which seems even more shocking.

Optional Chaining

Shocking point: Q: Under what circumstances does a function have parentheses written but not execute? A: In the context of optional chaining.

Without further ado, let’s look at an example:

func A() -> Int {
    print("OK")
    return 1
}
class B {
    var c: C?
}
class C {
    var d: Int?
}
var d = B()
// 震惊的事情发生了：
// 这里，A 函数未执行，不会打印 OK，赋值也不会成功，因为 c 是 nil，这个语句返回 nil（通常 Swift 的赋值语句都返回 Void 的，也就是空元组）
// 返回 nil 意味着你可以使用 if-let 语句判断
d.c?.d = A()

Error Handling

Shocking point: Like enums, Swift's try-catch (actually do-catch) is designed to be quite complex.

The catch statement can not only capture arbitrary errors but also specific error types. Using is or similar to a switch statement, there can be multiple catch branches for matching—absurd:

do {
 try someError()
} catch is ErrorA {
 // xxx
} catch ErrorB, ErrorC, ErrorD.a {
 // xxx
}

Concurrency

Shocking point: While reading the documentation, I initially didn't realize that `withTaskGroup` is a built-in method for Group Task...

As for await, it’s used exactly the same way as await in TypeScript—so satisfying!

Extensions

Shocking point: Extensions might be the most powerful design in Swift. Any object, whether built-in or third-party, can be extended freely, at low cost, without any complex declarations or keywords.

Compared to TypeScript, where extending an existing class requires manipulating the prototype chain and then adjusting the object’s this to point to the class, in Swift, you just need a extension, and then you can boldly write any methods or properties you want—their this will point to the instance or the extended type (i.e., static methods or properties).

Absolutely mind-blowing.

Protocols

Shocking point: I believe protocols were introduced to address the abstraction issues of Structs, since in any language, classes themselves can be inherited (this might be an absolute statement), eliminating the need for an additional "protocol"—abstract classes would suffice. Incidentally, while Swift restricts classes to single inheritance, it allows protocols to play a more versatile role across classes, Structs, and enums.

Enough said—my thoughts are all above.

Generics

Shocking point: Generics introduced "associated types," which essentially serve the same purpose as generics declared upfront but are even more powerful.

Swift’s generic associated types look like this:

protocol Container {
    associatedtype Item
    mutating func append(_ item: Item)
    var count: Int { get }
    subscript(i: Int) -> Item { get }
}

As for why it wasn’t designed like this:

protocol Container<Item> {
    mutating func append(_ item: Item)
    var count: Int { get }
    subscript(i: Int) -> Item { get }
}

Presumably because the Item might become too lengthy and inelegant, such as:

protocol SuffixableContainer: Container {
    associatedtype Suffix: SuffixableContainer where Suffix.Item == Item
    func suffix(_ size: Int) -> Suffix
}

If written after the name, generic declarations would often exceed the screen width, which is unbearable.

Opaque Types and Protocol Wrapping

Shocking point: You can achieve an effect where only the compiler knows the concrete type, while the caller only knows it conforms to a certain protocol.

Essentially, opaque types and protocol wrapping aim to hide implementation details from callers while allowing code refactoring with minimal changes. For example:

protocol Shape {
    func area() -> Double
}

struct Circle: Shape {
    var radius: Double
    func area() -> Double {
        return .pi * radius * radius
    }
}

func makeShape() -> some Shape {
    return Circle(radius: 5)
}

Here, makeShape can return any type that conforms to the Shape protocol, without explicitly specifying the Circle type. This way, if new types like Struct that conform to Shape are added later, the function can still return them (a common practice in SwiftUI, such as some View).

Memory Safety

Shocking point: Since Swift allows passing values by reference, it can lead to simultaneous read-write operations on the same memory region (which makes sense, right?).

var a = 1
func add(_ b: inout Int) {
    b += a
}
add(&a)

The above code will crash at runtime, but the compiler won’t warn you. There are many similar cases where extra caution is needed. Since TypeScript doesn’t support pass-by-reference, such issues don’t arise—easy peasy.

Advanced Operators

Mind-blowing point: You can rewrite/customize the implementation of a function with a symbol as its name, thereby enabling operations between instances of the same class or structure.

For example:

struct A {
 var b = 1
 var c = 2
 static func +(left: A, right: A) -> A {
  return A(b: left.b + right.b, c: left.c + right.c)
 }
}
// 然后你就可以
let a = A()
let b = A()
let c = a + b // <- 是的你没看错，struct 实例可以相加！

This design is brilliant—why didn’t I think of it? Amazing, truly amazing.

It’s worth noting that operator methods have their own attributes. For instance, + is a binary operator and also an infix operator, so it takes two functions. - can be either an infix operator (binary operator) or a prefix operator (unary operator, requiring prefix before func), making it overloadable.

However, Swift also specifies that the assignment operator = cannot be overloaded, nor can the ternary conditional operator (a ? b : c).

This operator is so common that you can find operator functions like == for equality checks in almost any Swift built-in object or Foundation object.

You can even implement your own operators!

// 需要先声明，这是一个操作符，因为有两个值在操作符，所以这是个中缀操作符(infix)
infix operator +++++++
// 然后扩展一下整数类型
extension Int {
    static func +++++++(left: Int, right: Int) -> Int {
        return (left + right) * 7 // <- 因为有 7 个 + 号，所以我写了乘以 7
    }
}
// 这么用：
2 +++++++ 7 // <- 63

Absolutely incredible.

Result Builders

Mind-blowing point: Swift goes to extreme lengths for "elegance" and "reusability."

To make the following code look cleaner, Swift “invented” the magical @resultBuilder, as shown below:

Standard approach:

var a = 1
var b = 2

struct A {
 var a: Int
}

// 这里会有一个三元判断
var c = A(a: a > b ? 666 : 999 )

Swift argues that the ternary conditional above is too cumbersome and becomes hard to read with complex logic, so it aims for elegance. Thus, result builders were born (if I understand correctly):

@resultBuilder
struct BBuilder {
    static func buildBlock(_ b: Int) -> Int { // 对应 if/else 分支的执行结果
        return b
    }
    static func buildEither(aaa: Int) -> Int { // 对应 if 分支
        return aaa
    }
    static func buildEither(bbb: Int) -> Int { // 对应 else 分支
        return bbb
    }
}

Then, assign the c variable like this:

func BB(@BBuilder b: () -> Int) -> A {
    return A(a: b())
}
// 终于等到 c 了，这里的 c 和最开始的 c 完全一样
var c = BB {
    if a > b {
        return 666
    } else {
        return 999
    }
}

Reusable, elegant, efficient—brilliant!

Lexical Structure

Mind-blowing point: Despite Swift having an overwhelming number of reserved words, it allows you to use them as identifiers.

The method is simple: enclose them in backticks:

1
2
3

func `func`() {} // <- 一个叫做 `func` 的函数
// 调用也是 
`func`()

However, apart from keywords, x and x refer to the same variable.

How to Develop iOS Apps with Cusor and Preview in Real Time

Tue, 11 Feb 2025 00:00:00 +0000

This article is an expanded version by the original author. The original post can be found at:

在 Cursor 打造高效 iOS 开发环境： AI 编程 + 实时预览完整指南

I’m adding supplementary notes here because when I followed this tutorial, I encountered some pitfalls due to my lack of familiarity with Xcode and iOS development. Hence, I’m documenting these points for reference.

This article serves as a supplement to the original post. Please refer to the original first.

Supplement to “Installing the Swift Plugin and CodeLLDB Plugin”:

The Swift plugin mentioned here is outdated. You should use the latest plugin instead. Search for Swift Programming Language in the plugin marketplace.

Supplement to Step 2 of “Setting Up Hot Reloading”:

Open the corresponding Target settings in your project -> Build Settings -> Search for **Other Linker Flags**, then add **-Xlinker** and **-interposable** separately.

Note that both must be added simultaneously, i.e., copy -Xlinker -interposable and paste it as shown in the image below:

Source Kit File Not Found Error After Adding New Files:

You’ll need to rerun the command mentioned in the original post using Xcode-Build-Server:

// 然后在项目根目录下根据你的项目文件类型执行对应的命令:
xcode-build-server config -workspace *.xcworkspace -scheme <XXX> 
xcode-build-server config -project *.xcodeproj -scheme <XXX>

//例如你用的是 exampleProject.xcodeproj：
xcode-build-server config -project exampleProject.xcodeproj -scheme exampleProject

Issue with SwiftUI Previews Not Updating in Real Time During Debugging:

Certain ViewModifier additions or modifications may indeed fail to update in real time, but changes like modifying a String in Text generally work fine. I’m not entirely sure why.

Migration from Jekyll to Hexo: Issue Log

Tue, 07 Jan 2025 00:00:00 +0000

Preface

As a front-end developer, I’m not particularly familiar with other scripting languages like Ruby. When I first started blogging, I used GitHub Pages as my platform, which defaults to the Jekyll framework. At the time, I believed content mattered more than the framework, so I stuck with it—for a full decade.

Over the years, I tried several themes before settling on the one provided by Hux. It was clean, elegant, and open-source:

黄玄的博客 | Hux Blog

I customized this theme extensively, such as adding custom right-side content, custom data, and rendering using Notion as a data source.

However, with the release of Apple’s M-series chips, I found it increasingly difficult to handle Ruby’s compatibility issues between Intel and Apple silicon. For example, I had to specifically use x86 architecture instructions to occasionally build successfully—and that was only if I didn’t touch any dependencies:

arch -x86_64 bundle exec jekyll server --trace --config=_config.dev.yml --ssl-key local.xheldon.cn.key --ssl-cert local.xheldon.cn.pem
```  

This made me realize that if I didn’t switch frameworks soon, I might eventually lose the ability to publish my blog altogether.  

## Technical Selection  

This section is straightforward. You could essentially think of Hexo as the JavaScript implementation of Jekyll. Most of the concepts—about 95%—are identical, making the migration effortless.  

More importantly, someone had already ported Hux’s blog theme to Hexo, so I adopted it directly. Here’s a brief record of the process.  

## Migration Process  

### Plugin Migration  

This was relatively easy. For plugins in Jekyll, I implemented helper functions in Hexo. For example, here’s how I handled the Bookmark tag from Notion (path: `_plugins/add-attribute.rb`):  

```ruby
module Jekyll
    class RenderBookMarkBlock < Liquid::Block
        def initialize(tag_name, attr, tokens)
            super
            # 普通的链接没有 yid 和 bid
            attrs = attr.scan(/url\=\"(.*)\"\stitle\=\"(.*)\"\simg\=\"(.*)\"\syid\=\"(.*)\"\sbid\=\"(.*)\"/)
            if !attrs.empty?
                @url = attrs[0][0]
                @title = attrs[0][1]
                @img = attrs[0][2]
                @yid = attrs[0][3]
                @bid = attrs[0][4]
                @firstChar = @title.empty? ? "" : (@title)[0].upcase
                @error = ""
            else
                attrs = attr.scan(/url\=\"(.*)\"\stitle\=\"(.*)\"\simg\=\"(.*)\"/)
                @url = attrs[0][0]
                @title = attrs[0][1]
                @img = attrs[0][2]
                @firstChar = @title.empty? ? "" : (@title)[0].upcase
                @error = ""
            end
        end
        def render(context)
            @desc = super
            if !@yid.nil? && !@yid.empty?
                "<p class='embed-responsive embed-responsive-16by9'><iframe src='https://www.youtube.com/embed/#{@yid}?rel=0' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></p>"
            elsif !@bid.nil? && !@bid.empty?
                "<p class='embed-responsive embed-responsive-16by9' style='border-bottom: 1px solid #ddd;'><iframe src='//player.bilibili.com/player.html?bvid=#{@bid}&high_quality=1&as_wide=1' scrolling='no' border='0' frameborder='no' framespacing='0' allowfullscreen></iframe></p>"
            else
                "<p><a class='link-bookmark' href='#{@url}' target='_blank'><span data-bookmark-img='#{@img}' data-bookmark-title='#{@firstChar}'><img src='#{@img}'/></span><span><span>#{@title}</span><span>#{@desc}</span><span>#{@url}</span></span></a></p>"
            end
        end
    end
end

Liquid::Template.register_tag('render_bookmark', Jekyll::RenderBookMarkBlock)
```  

In Hexo, I rewrote it like this (path: `scripts/liquid.js`):  

```javascript
hexo.extend.tag.register('render_bookmark', function(args, content) {
    const [url, title, img, yid, bid] = args.map(getValue);
    const firstChar = title ? title[0].toUpperCase() : '';
    const strip_html = hexo.extend.helper.get('strip_html').bind(hexo);
    const trim = hexo.extend.helper.get('trim').bind(hexo);
    if (yid) {
        return `<p class='embed-responsive embed-responsive-16by9'><iframe src='https://www.youtube.com/embed/${yid}?rel=0' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></p>`
    } else if (bid) {
        return `<p class='embed-responsive embed-responsive-16by9' style='border-bottom: 1px solid #ddd;'><iframe src='//player.bilibili.com/player.html?bvid=${bid}&high_quality=1&as_wide=1' scrolling='no' border='0' frameborder='no' framespacing='0' allowfullscreen></iframe></p>`;
    }
    return `<p><a class='link-bookmark' href='${url}' target='_blank'><span data-bookmark-img='${img}' data-bookmark-title='${firstChar}'><img src='${img}'/></span><span><span> ${title}</span><span> ${strip_html(trim(content))}</span><span> ${url}</span></span></a></p>`;
}, {
    ends: true,
});
```  

### Permalink Issues  

For some reason, even though I set `:category/:name.html` in Hexo, it still generated `life/2024-life-xxx.html` (using `-` as a directory separator), when the expected format was `life/xxx.html`. Looking at the source code `name`, it uses `slug` with `basename`, but `slug` generates URLs based on folder paths with hyphens. As a workaround, I had to manually modify filenames.  

In Jekyll, the date prefix in filenames (e.g., `2024-02-12-xxx.md`) is ignored, and the title is simply `xxx`. In Hexo, however, the title is read from the `title` field in the post’s front matter. To fix this, I wrote a filter plugin to finalize the permalink:  

```javascript
/**
 * permalink 中的 name 不符合预期，对于 _posts/life/2015/xxx.md 来说，在文档中 :name 表示的是 xxx，但是实际是 life-2015-xxx
 */
hexo.extend.filter.register('post_permalink', function (data) {
  // 在这里修改 post.name 的值
  const arr = data.split('/').filter(Boolean);
  const categories = arr[0];
  const name = arr[1];
  return `${categories}/${name.split('-').filter(Boolean).slice(3).join('-')}`;
});
```  

Additionally, permalinks can’t be pure numbers—they must be strings:  

{% render_caption caption="" img="https://static.xheldon.cn/img/in-post/2025/jekyll-2-hexo/147800e8-7a61-8006-a660-e8ecfbe7da9a.webp" %}  
![](https://static.xheldon.cn/img/in-post/2025/jekyll-2-hexo/147800e8-7a61-8006-a660-e8ecfbe7da9a.webp)  
{% endrender_caption %}  

Otherwise, errors occur (the `.endsWith` method explains why):  

{% render_caption caption="" img="https://static.xheldon.cn/img/in-post/2025/jekyll-2-hexo/147800e8-7a61-8032-8e51-d6528f277306.webp" %}  
![](https://static.xheldon.cn/img/in-post/2025/jekyll-2-hexo/147800e8-7a61-8032-8e51-d6528f277306.webp)  
{% endrender_caption %}  

### EJS Template Syntax Issues  

Unlike Jekyll’s Liquid syntax, EJS templates don’t allow custom front matter within nested templates. Parameters can only flow from outer to inner layers, not the other way around. For instance, if the `index` layout is `page` and includes front matter, `page.ejs` can’t read it. As a result, I had to pass parameters explicitly wherever needed.  

### Markdown Rendering Differences  

Hexo’s built-in `marked` renderer behaves differently from Jekyll’s `kramdown`. For example, `marked` ignores empty lines + paragraphs in cases like `## h2 (line break + empty line) paragraph`, while `kramdown` preserves them.  

Though minor, this discrepancy affected post excerpts on the homepage, causing slight inconsistencies. To maintain SEO stability and avoid search engines flagging major content changes, I switched to `markdown-it` by installing `hexo-renderer-markdown-it`.  

### Liquid Sorting Issues  

In Jekyll, I used Liquid sorting like this: `{{ tags | split:'`**`SEPARATOR`**`' | sort }}`:  

{% render_caption caption="" img="https://static.xheldon.cn/img/in-post/2025/jekyll-2-hexo/0389dcbb-8bb7-413c-a968-4a77a8b76b71.webp" %}  
![](https://static.xheldon.cn/img/in-post/2025/jekyll-2-hexo/0389dcbb-8bb7-413c-a968-4a77a8b76b71.webp)  
{% endrender_caption %}  

The problem is that Liquid sorts identical `sort` values alphabetically by `href`. This behavior carried over:  

{% render_caption caption="" img="https://static.xheldon.cn/img/in-post/2025/jekyll-2-hexo/a24e2d73-ab8b-4b5d-a57d-7e0f2f5f0a66.webp" %}  
![](https://static.xheldon.cn/img/in-post/2025/jekyll-2-hexo/a24e2d73-ab8b-4b5d-a57d-7e0f2f5f0a66.webp)  
{% endrender_caption %}  

### Mermaid Syntax Issues  

Mermaid diagrams couldn’t be highlighted properly, so I excluded them in Hexo’s config:  

```yaml
exclude_languages:
 - mermaid
```  

### Markdown Unable to Use EJS Syntax  

I haven’t addressed this yet—found a workaround instead.  

### Pagination Generation Issues

The `hexo-generator-index` generates pagination in the format `page/2`, `page/3`, whereas Jekyll uses `page2`, `page3`. To address this, I copied the plugin's source code locally and modified it (located at `scripts/pagination.js`):

```javascript
'use strict';
const pagination = require('hexo-pagination');
hexo.config.index_generator = Object.assign(
  {
    per_page:
      typeof hexo.config.per_page === 'undefined' ? 10 : hexo.config.per_page,
    order_by: '-date',
  },
  hexo.config.index_generator
);
hexo.extend.generator.register('index', function (locals) {
  const config = this.config;
  const posts = locals.posts.sort(config.index_generator.order_by);
  posts.data.sort((a, b) => (b.sticky || 0) - (a.sticky || 0));
  const paginationDir = config.pagination_dir || 'page';
  const path = config.index_generator.path || '';
  return pagination(path, posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '%d/',
    data: {
      __index: true,
    },
  });
});

Strikethrough Implementation Issue

The default strikethrough uses the <s> tag, but Jekyll uses <del>. I resolved this by directly replacing it via after_render:html (located at scripts/tag-del.js):

1
2
3

hexo.extend.filter.register('after_render:html', function (str) {
  return str.replace(/<s>/g, '<del>').replace(/<\/s>/g, '</del>');
});

Redundant Files After Build

Some files are unnecessary and should be deleted after the build:

Specifically:

categories/*
i_dont_wanna_use_default_archives/*
i_dont_wanna_use_default_tags/*
less/*

RSS Issue

I used custom tag styles to render Notion Bookmarks, aiming to match Notion’s aesthetic. However, this caused RSS readers like Reeder to fail in rendering the styles correctly. To fix this, I processed it as follows: in Jekyll, I used template syntax and functions to dynamically replace the custom styles during the build:

module Jekyll
    module BookmarkFilter
      def bookmark_filter(input)
        input.gsub(/^\<p\>\<a\s+class=\"link-bookmark\"\shref=(.*)\starget=\"_blank\"\>\<span\>(.*)\<\/span\>\<span\>\<span\>(.*)\<\/span\>\<span\>\n(.*)\n\<\/span\>\<span\>(.*)\<\/span\>\<\/span\>\<\/a\>\<\/p\>$/, '<p><a href=\1 target="_blank">\3</a></p>');
      end
    end
  end
  
  Liquid::Template.register_filter(Jekyll::BookmarkFilter)

In Hexo, I handled this by patching after the build (located at scripts/rss-gene.js):

const fs = require('fs');
const path = require('path');
const ejs = require('ejs');
const rootDate = new Date();

function getDate(_date) {
  const date = _date ? new Date(_date) : rootDate;
  // 获取各个部分
  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  const months = [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec',
  ];
  const dayName = days[date.getDay()];
  const day = String(date.getDate()).padStart(2, '0');
  const month = months[date.getMonth()];
  const year = date.getFullYear();
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  // 获取时区偏移（以分钟为单位）
  const timezoneOffset = -date.getTimezoneOffset();
  const sign = timezoneOffset >= 0 ? '+' : '-';
  const offsetHours = String(
    Math.floor(Math.abs(timezoneOffset) / 60)
  ).padStart(2, '0');
  const offsetMinutes = String(Math.abs(timezoneOffset) % 60).padStart(2, '0');

  // 格式化为 RFC 2822 格式的字符串
  return `${dayName}, ${day} ${month} ${year} ${hours}:${minutes}:${seconds} ${sign}${offsetHours}${offsetMinutes}`;
}

hexo.extend.generator.register('xml', function (locals) {
  // 仿照 Liquid 内置的日期格式写法
  // 注意如果前面不加这个 \uFEFF 则不会被识别为 xml
  const template =
    '\uFEFF' +
    `<?xml version="1.0" encoding="UTF-8"?>
    <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>Xheldon Blog</title>
        <description>The Answer to Life, the Universe and Everything is...</description>
        <link>https://www.xheldon.com</link>
        <atom:link href="https://www.xheldon.com/feed.xml" rel="self" type="application/rss+xml" />
        <pubDate><%= getDate() %></pubDate>
        <lastBuildDate><%= getDate() %></lastBuildDate>
        <generator>Hexo v<%= version %></generator>
        <% for (post of posts.sort((a, b) => (new Date(b.date).getTime()) - (new Date(a.date).getTime())).slice(0, 10)) { %>
        <item>
            <title><%= post.title %></title>
            <description><%= bookmark_filter(post.content) %></description>
            <pubDate><%= getDate(post.date) %></pubDate>
            <link><%= post.permalink %></link>
            <guid isPermaLink="true"><%= post.permalink %></guid>
            <% for (tag of post.tags.data) { %>
                <category><%= tag.name %></category>
            <% } %>
            <% for (cat of post.categories.data) { %>
                <category><%- escape_html(cat.name) %></category>
            <% } %>
        </item>
        <% } %>
    </channel>
    </rss>`;

  const bookmark_filter = hexo.extend.helper.get('bookmark_filter').bind(hexo);
  const escape_html = hexo.extend.helper.get('escape_html').bind(hexo);

  const data = {
    posts: locals.posts.toArray(),
    getDate,
    version: hexo.version,
    escape_html,
    bookmark_filter,
  };

  const jsonContent = ejs.render(template, data);

  const outputPath = path.join('source/_posts', 'feed.xml');
  fs.writeFileSync(outputPath, jsonContent, { encoding: 'utf8' });

  return {
    path: 'feed.xml',
    data: jsonContent,
  };
});

Service-Worker Issue

I removed the service worker because, with every build, the tags section of the pages inevitably changes, causing the HTML pages to update. This frequently required manual page refreshes, which became tedious, so I removed it entirely.

Other Issues

Some necessary files were missing and needed to be added after the build, such as ads.txt.
Articles with layout values of type post, where the page.path value does not start with /, require special attention.

Final Notes

That’s essentially it. After a line-by-line comparison using BeyondCompare, the migration was optimized to minimize changes.

Cyberpunk 2024: The Tools I'm Currently Using

Thu, 12 Dec 2024 00:00:00 +0000

Preface

As 2024 comes to an end, with my WeChat content boost coupons about to expire, I’ve decided to summarize the various efficiency tools I frequently use in my daily development work this year. These include both software and hardware, and are shared here for reference.

Paid Subscription Software

Cursor

When it comes to AI programming, Cursor is the first to come to mind (note: “first to come to mind” is an idiom meaning the first to be considered or encountered—author’s note).

In comparisons with Windsurf and GitHub Copilot, its ability to generate new code is roughly on par. However, Cursor’s capability to modify/refactor existing code is a whole dimension ahead of other AI coding assistants. You mostly just need to press the Tab key—it automatically positions the cursor where refactoring/modification is needed. You accept with Tab, and pressing Tab again jumps to the next spot requiring changes. Its Composer/Agent is also a pioneer in AI pair programming, with undeniable prowess.

Notion

The free version meets my needs, while the paid version is more for collaboration, so I won’t be renewing my subscription next year.

The two most important features I look for in note-taking software are “unrestricted import/export” and “cross-platform compatibility.” Notion delivers on both:

It supports API functionality, so there’s no worry about data being trapped in proprietary formats (looking at you, Evernote and other domestic note-taking apps).
With its API and the Notion-Flow browser extension, you can write static blogs hosted on GitHub anytime, anywhere.
Its database module can function as a web database with just a bit of server-side code, as I’ve used on my blog page:

订阅&付费软件 - Xheldon Blog

TickTick

I previously bought Things outright, but its integration with calendars was clunky. A friend recommended TickTick.

Its calendar, tasks, and list views are incredibly convenient, and task details support rich text. This is likely why it’s subscription-based rather than a one-time purchase—ongoing server storage costs are involved.

1Password

The undisputed leader in password management software, it liberates you from typing passwords in various scenarios. It supports storing API tokens, credit card info, SSH details, recovery codes, and even WiFi credentials.

Its deep system integration takes “no-password entry” to the next level. On iOS, you’ll need to use the system keyboard to activate it, which is the main reason I avoid third-party keyboards on my phone.

When it comes to security, I trust commercial software more.

YouTube Premium

I count this as an efficiency tool because I primarily use it to learn new things. Searching for unfamiliar topics usually yields relevant content—recently for AI, earlier for Swift, and even relationship advice (though from self-proclaimed experts, so take it with a grain of salt). Of course, there’s also low-quality content, so surf wisely.

As a “perk” of Premium, YouTube Music is included. You can import Apple Music playlists (via third-party services) or upload your own music files. Compared to Apple Music, its advantages include:

YouTube Music won’t replace your uploaded tracks with online library versions.
It allows up to 100,000 uploaded songs.
Even if you cancel YouTube Premium, you retain access to your uploaded music, essentially making it a music cloud drive.

So, embracing frugality, I canceled Apple Music at the end of 2024 and switched to YouTube Premium.

One-Time Purchase Software

PopClip

Enables right-handed, zero-lag searching, translation, and other operations—no left hand or keyboard needed.

My workflow involves selecting text to trigger OpenAI Translator, where I’ve predefined tasks (more on this later).

Alfred 5

Upgraded from the buy-once version 4, mainly for app launching and querying AI via OpenAITranslate. I wrote a custom script for this, activated the same way as above.

BetterMouse

I’ve been using Logitech gaming mice, which come with G HUB software. However, G HUB has numerous issues:

Only black icons appear in the taskbar, which stand out conspicuously among the white icons.

The interaction logic is bizarre. To open the software, I need to click the taskbar and then click “Launch G HUB” to start it, whereas most software opens the main window directly upon clicking and displays an interaction menu only when right-clicked. At the very least, provide an optional setting for users to decide the interaction behavior.
The operation is sluggish. Launching takes half a minute, and occasionally it fails to start, getting stuck on the animation screen.
The wording is odd. Please tell me, if I want to save my mouse settings onboard, should I click “Enable” for this option now, or leave it as is?

Bettermouse, in addition to allowing custom mouse movement speed, also supports advanced interactions like smooth scrolling and right-click drag-and-slide (e.g., in Figma, scrolling requires holding cmd + left-clicking and moving, whereas Bettermouse lets you drag the page by simply right-clicking).

Magnet

A window management tool I bought many years ago, installed on one Mac after another with my Apple ID. Adjusting window splits with shortcuts is su~per~ con~ve~nient~. There are many similar tools on the market, but this one is more than enough for me. After multiple version iterations, its features have only grown richer, leaving me with zero motivation to switch.

CleanshotX

Major version purchase

The ultimate screenshot/screen recording tool—I even paid for a major version upgrade once. No need for lengthy introductions. My favorite features: one-click copy to clipboard after screenshotting and one-click pin to screen (most frequently used). The use case? When you can’t remember something at a glance (sorry, my brain’s context capacity declines with age) and need to switch back and forth repeatedly, pinning the screenshot eliminates this hassle.

Surge/QuantumultX

Major version purchase

I abandoned ClashX (Little Cat) because its core is no longer updated and joined a 5-person Mac Surge group buy with friends. On my phone, I use QuantumultX.

xPic (Shameless Plug)

This is a personal recommendation—I developed it, haha

At work, I often need to compress and convert images, but online tools either fail to meet expectations, are cumbersome to upload/download, or raise privacy concerns. So, I developed xPic, which supports image/video compression, format conversion, image sequence frame compositing, and video-to-GIF conversion.

Since SVGA is used in my work, I also added convenient SVGA previews. The app still has bugs and is in beta testing.

Free/Open-Source Software

OpenAI Translator

It’s just a translation tool, nothing particularly noteworthy, but it supports PopClip invocation (the principle is sending data to a Unix socket registered by the app with the command: curl -d "$1" --unix-socket /tmp/openai-translator.sock http://openai-translator to trigger it), enabling quick AI queries with PopClip. The same applies to Alfred.

I added a new task:

WeChat Input Method

I don’t use WeChat Input Method on my iPhone—only on my Mac at work/home. The shared word library is excellent. I used Sogou Input before, but whether due to intentional dumbing-down post-Tencent acquisition to push users to switch or other reasons, Sogou often suggests words I’ve never typed instead of the most common ones. For example, when I type zhuomian, the first candidate is “卓面” (Zhuómian) instead of “桌面” (desktop).

Another awkward issue: I admit I’ve typed the character “屄” (bī) during keyboard battles. Somehow, Sogou seemed to pick up on this “preference.” Even after deliberately typing other homophones of “bi” multiple times to push “屄” down the candidate list via “frequency adjustment,” it kept failing. Sometimes it would temporarily move to the second page, only to reappear as the top candidate later (I swear I didn’t type it during that time).

A related problem: no matter when (even right after “training”), if I type vi, the input method might assume I meant bi (since the keys for v and b are adjacent, this logic makes sense). At this point, it ignores my manual candidate adjustments for bi and prioritizes showing “屄,” leading to awkward moments during screen sharing.

The reason I don’t use it on my iPhone is that only the native keyboard supports 1Password autofill/verification code autofill.

OrbStack

A native Docker/Linux/k8s management tool with an elegant interface, user-friendly operation, and low memory usage. The free version is fully functional. It’s leagues ahead of Docker Desktop. Here’s an official comparison:

OrbStack vs. Docker Desktop · OrbStack Docs

Immersive Translate

An AI translation plugin that allows full-page translation with hotkeys or hover-to-translate selected content during web browsing. Supports custom API integration and YouTube subtitle translation—far superior to Google’s built-in machine translation.

(PS: Why doesn’t Google prioritize AI-translating all its documentation first instead of sticking with painfully unreadable machine translations despite their advancements in large language models?)

Warp

Killer feature: Edit bash commands like text.

Traditional terminals like iTerm2 impose limitations, such as the inability to use vim shortcuts. Without this feature, I’d never use Warp due to its excessive additions (AI, collaboration tools, etc.) that are unnecessary for me.

Syntax Highlight

Open-source

Press spacebar to preview files with extensive format support—extremely convenient.

MonitorControl

Open-source

As the name suggests, a display brightness control tool with hotkey support—very handy.

Cracked Software

TablePlus

Occasionally used for connecting to server databases (low frequency since I’m not a professional DevOps/backend engineer). Features a sleek interface and simple operation.

Hardware

G309 Mouse

Four-word review: Absolutely love it.

Crisp tactile feedback, dual-mode Bluetooth/wireless (Bluetooth is mediocre), pinpoint wireless accuracy (polling rate), slightly arched back, vertical sides, and included anti-slip grips—everything is perfect.

Note: Previously used asymmetrical mice (G403 and G502 wired, where right-click sits lower). Switching to the symmetrical G309 required adjusting to level-clicking—initially prone to accidental right-clicks until adapting to lifting fingers slightly.

Apple Watch Bands

Purchased from a mysterious Taobao store claiming to sell genuine unpackaged bands at 1/3 to 1/2 retail price. Arrived indistinguishable from OEM. The store also sells loose “99% new” or refurbished items—likely factory overruns/returns. I opted for boxed versions for resale value, but loose bands are highly rated.

AirPods 4 (Noise Cancelling)

Retired AirPods Pro 2 due to discomfort after nearly two years. The noise cancellation on the 4th gen is noticeably weaker but acceptable. Surprised by the lack of stem-slide volume control—otherwise satisfactory.

Xiaomi IH Rice Cooker S1

Replaced an 8-year-old Midea cooker (still functional). Works well, though shocked by its 1.5-hour congee cooking time.

Merida Explorer X Flat-Bar Road Bike

Not strictly electronics, but part of a programmer’s lifestyle. Perfect for my 20-minute daily commute.

Afterword

Share your favorite tools in the comments!

How to Dial-Up Internet After Disabling DHCP on TP-Link

Mon, 04 Nov 2024 00:00:00 +0000

Since the network is already configured, I'll use text descriptions instead of images for some pages—it would be too troublesome to reset the network just for writing this blog post.

Preface

My TP-Link XDR-5480 has a peculiar design choice: when you disable the router’s DHCP service, all its ports (including the SPF-converted port) become LAN ports. This makes it impossible to use the modem in bridge mode + router PPPoE dial-up for internet access. Additionally, your LAN port IPs can no longer be manually assigned and will instead be obtained from the upstream router (i.e., the modem).

Older TP-Link routers didn’t have this issue—you could freely disable DHCP without affecting the WAN port. Perhaps the product manager for newer TP-Link models thought this would “waste” a WAN port, especially since all newer routers support WAN/LAN port mixing, which inadvertently exposed this problem.

With the recent release of the M4 Mac mini—smaller in size and more energy-efficient—the internet has been swept by the “Mac mini as a soft router + Mac Surge managing the home network” trend. My current network setup has been stable for over a year without any tinkering, but the itch to experiment returned. Then it hit me: my Mac Studio is always running anyway, so why not use it as a soft router like the mini? Plus, the hype around Surge (hereafter referring to Mac Surge) taking over DHCP for seamless whole-house proxy access and “elegant” real-time monitoring of device connections got to me. Embracing the mantra “elegance never goes out of style,” I started brainstorming how to solve this TP-Link issue.

After scouring the web, I found posts like:

tp link 的路由器如何能在关闭 dhcp 服务的同时让 wan 口能够拨号上网？ - V2EX

And:

请教各位大佬关于华硕和tplink路由器关闭dhcp设置的问题 - 电脑讨论(新) - Chiphell - 分享与交流用户体验

Current Situation

Note: Before proceeding, back up your TP-Link (here referring to my XDR-5480 model) router settings to avoid losing configurations if you make a mistake and can’t access the router. Simply export the settings as shown below. Note that the exported config won’t include port or network settings—a thoughtful design by TP-Link’s product team to prevent importing faulty configurations after a reset. Kudos to them!

Network Topology Diagram:

Goal

Without changing the current connection method or subnet of any device (to avoid complaints), use Mac Studio’s Surge as the gateway to manage DHCP services.

Challenges

After disabling DHCP on the TP-Link, a pop-up warns that all ports (including the SPF port) will become LAN ports, making it impossible to customize port addresses.
Disabling DHCP on the TP-Link also triggers a notification that all LAN port IPs will be obtained from the upstream router (the modem). While logical for a pure AP, this means Surge can still detect the modem’s DHCP service.
If Mac Surge acts as the gateway, it will start its own DHCP service and requires no other DHCP services on the network to avoid conflicts and disconnections.
Combining points 2 and 3: You’d need to disable DHCP on both the modem and the router. But! Without pre-configuring IP-MAC binding on the modem/router, you’d lose WiFi access to both and be forced to reset them (don’t ask how I know). Thus, the modem’s DHCP cannot be disabled.

Solution

Given the above goals and challenges, “Friends, take notes—here’s my deployment plan”:

Step 1: Power Off the Modem

Technically, just disconnecting the modem from the TP-Link suffices. I suggest powering it off to prevent accidentally connecting to the modem’s WiFi. If you’ve forgotten the modem’s WiFi network, simply disconnecting the modem from the TP-Link is enough.

Let’s not configure the optical modem first to prevent its DHCP service from being detected by Surge, which would otherwise prevent Surge from enabling its own DHCP service. Additionally, since the connection between the optical modem and the TP-Link router has already been disabled, when we proceed to turn off the TP-Link’s DHCP service in the next step, the TP-Link won’t automatically detect the DHCP service of the upstream router and change its own LAN port IP anymore.

Step 2: Disable the Router’s DHCP Service

Simply turn it off in the settings. Here, we select “Disable.” After the setup is successful, we’ll change it back to “Auto” later. The reason for switching to “Auto” is for network robustness, which I’ll explain further on.

Step 3: Enable Surge DHCP

This step can be accessed from either the “Overview” or “Devices” tab in Surge:

It will prompt you that Surge will change your Mac’s IP address to manual and fixed. In my case, it’s 192.168.5.100. There are plenty of tutorials online for this, and since you’ve made it this far, you likely know how to set it up, so I won’t elaborate here.

One thing to note is that it will display the router’s address as 192.168.5.1, with the address pool ranging from 192.168.5.100 to 192.168.5.200. I expanded the address pool to 192.168.5.2 to 192.168.5.254 for a broader range.

Step 4: Find the New Router Address

After setting up Surge, if you try to access the router at 192.168.5.1, you’ll find it’s no longer reachable! Don’t panic—because your Mac Studio is now the DHCP server, it will “somehow” assign a new IP address to your TP-Link router (why this happens, I have no idea). Click on “Devices,” look for the one labeled “Hostname Unsuitable for Printing” (it might not be exactly this), and access it via the address bar. You’ll see the familiar router interface again! In my case, the new router IP address is 192.168.5.114.

Step 5: Modify the Router’s LAN Port and Enable PPPoE

At this point, you won’t have internet access because your optical modem isn’t even powered on! Now you can power on the optical modem, wait a few minutes, and you’ll still find that clicking Wan 口已经断开连接 in the router settings does nothing.

But don’t give up! Think about it: isn’t your Studio’s role now similar to when you were tinkering with a soft router? Back then, the optical modem handled the PPPoE dial-up, while the soft router was plugged into the main router or optical modem and managed the DHCP service. Now, my friend, you’ve moved the dial-up device to the router, and your Studio is connected to the main router, effectively turning your Studio into a soft router that handles the DHCP service itself.

The key step here is to manually set the TP-Link’s LAN port IP address to 192.168.5.1 in the settings (otherwise, there won’t be any device on the network with the 192.168.5.1 IP address)!

After manually setting the LAN port IP (even though it’s called a LAN port, it’s connected to the optical modem and can handle PPPoE dial-up!), go back to the internet settings and click “Connect.” You might need to click it 4 or 5 times because the first dial-up attempt can take a while, but it will eventually succeed.

Step 6: Final Steps

At this point, your setup is complete. Now, you need to right-click on connected devices, select “Set Surge as their gateway,” and then reconnect the devices to the network:

You can also enable “Set Surge as the default gateway for new devices”:

Now, all your devices will treat Surge as the gateway, allowing you to monitor their real-time traffic.

Remember how I mentioned in Step 2 that we disabled the TP-Link’s DHCP service? Now you can go back to the TP-Link and change the DHCP service to “Auto.” This is a fail-safe: if Surge’s DHCP service crashes or your Mac fails, you and your household devices can still access the internet, and you, my friend, won’t get yelled at! This is because the TP-Link’s “Auto” setting will detect the LAN’s DHCP service—if none exists, it will enable its own DHCP; if one exists, it will disable it:

Note: If you click “Disable” and save, your router’s address will revert to 192.168.5.114, and you won’t be able to modify it (because you’ve connected the optical modem and disabled DHCP, triggering the issues mentioned earlier in the tricky parts). In this case, you’ll need to start over from the beginning (by powering off the optical modem).

Conclusion

That’s it! Along the way, I encountered some odd issues and made a few failed attempts—like why I thought of powering off the optical modem first, setting up the router, and then turning it back on.

Wishing you all WiFi freedom!

How to Use Notion Flow Blocks for Conversion

Sun, 31 Mar 2024 00:00:00 +0000

A week ago, I built the Notion Flow browser extension:

Xheldon on Twitter / X

And now, the freshly updated 0.4.1 version:

0.4.1 | Notion Flow

Supports self-hosted OSS services compatible with the AWS S3 API, such as Cloudflare R2:

Cloudflare R2 | 零出口费用分布式对象存储 | Cloudflare | Cloudflare

This post briefly explains how I use this browser extension for my Github Jekyll blog.

Jekyll static blogs are built on Ruby and support plugins. So I wrote a few plugins myself (Jekyll blog plugins are located in the _plugins directory—just drop the Ruby file there and restart the service) to handle Liquid templating, with content sourced from Notion via Notion Flow conversion. For example, here’s the plugin code for processing bookmarks:

module Jekyll
    class RenderBookMarkBlock < Liquid::Block
        def initialize(tag_name, attr, tokens)
            super
            # 普通的链接没有 yid 和 bid
            attrs = attr.scan(/url\=\"(.*)\"\stitle\=\"(.*)\"\simg\=\"(.*)\"\syid\=\"(.*)\"\sbid\=\"(.*)\"/)
            if !attrs.empty?
              # 外部的 video 链接，youtube、bilibili（如本文上一篇博客就是）
                @url = attrs[0][0]
                @title = attrs[0][1]
                @img = attrs[0][2]
                @yid = attrs[0][3]
                @bid = attrs[0][4]
                @firstChar = (@title)[0].upcase
                @error = ""
            else
             # 正常和 notion 一样的 bookmark（如本文上面三个链接就是）
                attrs = attr.scan(/url\=\"(.*)\"\stitle\=\"(.*)\"\simg\=\"(.*)\"/)
                @url = attrs[0][0]
                @title = attrs[0][1]
                @img = attrs[0][2]
                @firstChar = (@title)[0].upcase
                @error = ""
            end
        end
        def render(context)
            @desc = super
            if !@yid.nil? && !@yid.empty?
                "<p class='embed-responsive embed-responsive-16by9'><iframe src='https://www.youtube.com/embed/#{@yid}?rel=0' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></p>"
            elsif !@bid.nil? && !@bid.empty?
                "<p class='embed-responsive embed-responsive-16by9' style='border-bottom: 1px solid #ddd;'><iframe src='//player.bilibili.com/player.html?bvid=#{@bid}&high_quality=1&as_wide=1' scrolling='no' border='0' frameborder='no' framespacing='0' allowfullscreen></iframe></p>"
            else
                "<p><a class='link-bookmark' href='#{@url}' target='_blank'><span data-bookmark-img='#{@img}' data-bookmark-title='#{@firstChar}'><img src='#{@img}'/></span><span><span>#{@title}</span><span>#{@desc}</span><span>#{@url}</span></span></a></p>"
            end
        end
    end
end

# 上传的 video
module Jekyll
    class RenderVideoBlock < Liquid::Block
        def initialize(tag_name, attr, tokens)
            super
            attrs = attr.scan(/caption\=\"(.*)\"\simg\=\"(.*)\"\ssuffix\=\"(.*)\"/)
            @caption = attrs[0][0]
            @img = attrs[0][1]
            @suffix = attrs[0][2]
        end
        def render(context)
            text = super
            "<p caption='#{@caption}'><video controls muted><source src='#{@img}' type='video/#{@suffix}' /></video></p>"
        end
    end
end

Liquid::Template.register_tag('render_bookmark', Jekyll::RenderBookMarkBlock)
Liquid::Template.register_tag('render_video', Jekyll::RenderVideoBlock)

The logic here is: if a Notion bookmark module link points to YouTube or Bilibili, it’s converted to embedded video HTML (iframe); otherwise, it’s transformed into HTML resembling Notion bookmarks (requiring CSS for styling).

Thus, while using Notion Flow to convert Notion content into Markdown format, I customized the conversion rules for modules like bookmarks to ensure the blog displays YouTube, Bilibili, and Notion-style bookmark content, as shown here:

video: function video(block) {
  if (block.type === 'file') {
    // 用户自己上传的 video 文件，用默认 video 插件处理
    return `{% render_video caption="${block.caption}" img="${block.url}" suffix="${block.suffix}" %}\n![${block.caption}](${block.url})\n{% endrender_video %}\n`;
  } else if (block.type === 'external') {
    // 外部链接、youtube 和 bilibili 视频链接，用 bookmark 处理
    return `{% render_bookmark url="${block.url}" title="${
      block.caption || ''
    }" img="" yid="${block.yid}" bid="${
      block.bid
    }" %}{% endrender_bookmark %}\n`;
  }
}

One thing to note (I’m not deeply familiar with Ruby): Liquid template tags must enclose text content (even if unused), or the Ruby plugin won’t generate HTML. For example:

1	`{% render_video %}这里必须有任意内容！{% endrender_video %}`

In the Ruby plugin, the super variable will receive the phrase “There must be some content here!” (you may choose not to use this variable). If this content is absent, the plugin will not return anything at all.

【Video】Streamline Your Blog Publishing Process with Notion Flow

Thu, 21 Mar 2024 00:00:00 +0000

This article shares a video on using Notion Flow to streamline your blog publishing process. For the official website, see:

Notion Flow | Notion Flow

YouTube:

Bilibili:

Settings to Make VSCode More Efficient – From a Front-End Development Perspective

Thu, 21 Dec 2023 00:00:00 +0000

☝🏻I plan to create a video tutorial later because some settings' effects require demonstration to show the differences, and I'm too lazy to make animated GIFs for the blog.

Preface

When I first started learning front-end development, VSCode didn’t exist yet—I was using WebStorm (pirated version as a student back then). The out-of-the-box experience was incredibly satisfying. Later, due to the declining performance of my office computer, WebStorm’s persistent lag issues with 4K and multi-monitor setups, influence from colleagues, and the final blow being “configuration sync,” I eventually switched to VSCode.

After adapting to the absence of a dedicated floating search box (an epic-level disconnect), I quickly figured out configurations that work well for me. Below, I’ll detail them. If anyone thinks their setup is better, feel free to leave a comment with reasons and screenshots.

📖I won't cover default settings much (unless they're exceptionally good), focusing instead on my modifications. Most configurations in VSCode can be tweaked—even settings like "whether to show the cursor line in the minimap area"—which is fantastic.

Style

Theme/Font

Theme: One Dark Pro:

marketplace.visualstudio.com

Font: Fira Code:

GitHub - tonsky/FiraCode: Free monospaced font with programming ligatures

Fira Code is the officially recommended font, used internally as well.

Fira Code’s variant support for certain symbols is visually pleasing, such as === and <= (some require manual activation of character sets and variants):

Many dislike Fira Code’s default & symbol, but this can be disabled via configuration. Refer to its GitHub documentation for details. My setting:

{
  "workbench.colorTheme": "One Dark Pro",
  "editor.fontFamily": "'Fira Code', Monaco, 'Courier New', monospace",
  "editor.fontLigatures": "'ss01', 'ss02' off, 'ss03', 'ss04', 'ss05', 'ss07', 'cv29', 'cv28', 'cv13'"
}

Additionally, line height is 1.4, and font size is 13.

Editor

The most crucial part is editor settings—good configurations boost coding efficiency. Let’s break it down.

Render Whitespace Characters

I use the default “selection” setting: whitespace characters (like spaces) only appear when selected, otherwise hidden to avoid visual clutter. boundary’s setting forces them to always show, which looks messy:

Auto-Pairing/Deleting Brackets

These settings handle bracket pairing. For example, typing an opening bracket like ({[ automatically adds a closing )}]. The deletion logic works similarly. By default, pairing occurs during both insertion and deletion.

Bracket Coloring (Pool)

The first setting adds colors to brackets (instead of plain white). The second assigns each bracket type its own color scheme (though duplicates may occur—my understanding is that coloring follows bracket type order rather than display sequence).

Rectangular Selection

By default, vertical selection from top to bottom highlights entire lines if spanning line starts/ends:

Enabling this turns selection into a rectangular area (based on mouse position, not code structure). Useful for editing similarly indented lines, like JSON keys:

Side note: Holding Opt during terminal selection achieves the same effect.

Copy with Syntax Highlighting

Some rich-text editors don’t handle this well—copying code from VSCode might carry over colors unintentionally. This setting ensures copied content is plain.

Drag-and-Drop

In years of coding, I’ve rarely used drag-and-drop to move code blocks, so I recommend disabling it. The second setting: holding Shift while dragging media files into VSCode only shows filenames; releasing without Shift opens the files—a handy fallback (enabled by default).

Copy Current Line on Empty Selection

If nothing is selected (just a cursor), copying grabs the entire current line—simpler workflow (enabled by default).

Auto-Folding

Code folding is definitely necessary. Highlighting the folded range is also needed (it will follow the mouse hover effect with line-by-line highlighting of the current line), otherwise, it’s unclear whether the current line is folded. The last feature, auto-folding the import section, seems unnecessary to me.

For folding, I personally prefer it to always be visible because this feature is used so frequently. I often need to hover over the area to see which lines are folded before clicking to unfold them, which is inefficient. I like to see at a glance where the folds are, so I set it to “always”:

Bracket/Indentation Guides

As shown in the image below, though I haven’t figured out what “indentation guides” are—I’ll enable them for now.

Generally, we read code from top to bottom. With this setting, hovering over code makes the tooltip appear above, blocking the content. You then have to move the mouse to dismiss it and hover again to see it. I recommend disabling this.

Moving the mouse away usually means you don’t want it to display anymore, so set it directly to 0.

Mouse Wheel Font Scaling

Frequently triggered accidentally—turn it off.

Editor Top Padding

I set it to 2. Bottom padding isn’t necessary.

Scrollbars

Horizontal scrollbar width: 6; vertical: 25 (default is 12 horizontal, 14 vertical):

Personally, I dislike scrolling beyond the content range, as it causes scrollbars to appear even when the content fits entirely on one screen. So, I disable “Scroll Beyond Last Line.”

Here’s why I increased the vertical scrollbar width to 20: that area isn’t just for scrolling—it also displays three types of information:

Bright yellow on the right side of the scrollbar indicates editor warnings.
Dark yellow blocks in the middle represent matched search terms (including global and editor searches). These blocks can also be gray (for cursor-selected content and similar matches) or light pink (for declarations of the selected content).
A blue line spanning the entire scrollbar row marks the cursor’s current line.
Green sections on the left side of the scrollbar show code changes. If Git is enabled, these may appear as light yellow for modified sections.

Given the richness of this information display, a wider scrollbar is justified.

Smooth Scrolling

Highly recommended. It lets you track how many lines you’ve scrolled instead of abruptly jumping to a new position and losing your place.

Scroll Sticky Headers

When scrolling, you might need to check content outside the current screen’s scope—enable this option. However, horizontal scrolling can move sticky functions out of view. I prefer to keep them fixed, so I disable the last option.

Cursor

The first setting enables a fade-in/fade-out effect for cursor blinking. The second adds an animation when clicking different positions, showing the cursor’s movement from its previous location. This provides more context about where the new edit position is relative to the last one.

Recommend disabling this. During searches, if left on, it creates unnecessary space at the file’s top, causing the editor to jump when closing the search box—annoying.

Enabling this might obscure editor content, though it’s usually just import sections or blank lines at the top, so it’s tolerable.

Recommend turning this off. I often search, select something, then search again (for non-selected content). The editor “helpfully” auto-fills the search box with my selection, erasing my previous search—frustrating.

Minimap

I always keep the minimap on the editor’s right side visible. It helps me track my current position in the file and relative to functions/components. I prefer the minimap to stay static and only render color blocks, not every line.

Suggestions

Recommend keeping this off (default). It might conflict with Copilot suggestions. Here’s a Copilot suggestion:

And here’s a preview suggestion:

This option defaults to “first,” meaning it always uses the default first suggestion. However, I often encounter the issue that when typing wid in CSS, I naturally expect width, but it suggests widow, which I never use. Yet, it consistently ranks first, forcing me to toggle with arrow keys each time. Therefore, I suggest changing this to “recently used,” similar to the “dynamic frequency adjustment” in input methods:

Workspace

Command Prompt Box

Sometimes, I frequently repeat a command, so opening this command history list is very useful. Additionally, retaining input content is helpful, such as commands starting with “toggle” (e.g., Toggle Screen Capture Mode).

Note: If the input box disappears after pressing Esc, the content will not be retained the next time it is invoked. Only after selecting and executing a command will the previous input content be retained upon the next invocation.

Directory Tree

I usually enable animations because “elegance never goes out of style.” This setting also affects scrolling in the “Settings” interface (previously, enabling smooth scrolling in the editor did not affect the scrolling behavior in the “Settings” interface or the directory tree).

Quick Open History

Pressing Cmd + P brings up the Quick Open input box, and remembering history is great. There’s also an option for whether the box automatically disappears when losing focus. In most scenarios, auto-disappearance is preferred, though occasionally it isn’t. For now, I’ll keep the default auto-disappearance.

Reduce Animation Effects in Workspace

With my 64GB M1 Max, reducing animations is unnecessary (the default is “auto,” which adapts based on system configuration, useful for syncing settings across multiple computers).

Font Smoothing

Similar to -webkit-font-smoothing: antialiased; in CSS, “default” displays the sharpest text on most non-retina screens (subpixel level), while “antialiased” provides pixel-level smoothing, which may make fonts appear thinner. See the comparison:

Although this setting is under the “Workspace” section, it also affects the editor area. Enabling “antialiased” makes fonts darker (lower contrast) and thinner in both the editor and workspace areas. I prefer the latter, so I enable it.

Note: “Subpixel level” does not mean finer than pixels but rather “below pixel level,” indicating a lower level, not a higher one.

Directory Tree Sticky

Extremely useful—it shows the current scroll path while scrolling. The only drawback is that adding a box-shadow would improve visual distinction:

The maximum sticky level can also be adjusted. The default is 7, which is sufficient (the editor’s default sticky level is 5).

Note: This setting also applies to the “Settings” interface (originally, the settings interface belongs to the workspace, not the editor):

I changed the directory tree indentation to 14 and prefer always showing the reference lines, as it helps locate files among many siblings:

Directory navigation is necessary, but file/folder icons are not needed. This significantly distinguishes them from arrays and classes within files, making it very useful:

Modified Tabs

Several related settings exist, such as displaying a highlight line above unsaved modified files:

By default, a dot is shown. Enabling this option displays both the dot and the line. After restarting the editor, only the blue line above remains (possibly a bug—it should work without restarting).

Effect:

Since the “dot” occupies part of the tab space, it reduces the room for tab content. Thus, enabling this option is recommended.

This is a default option, but I’ll mention it: For mice with left-side buttons (for right-handed users, i.e., buttons 4 and 5), navigation becomes effortless and highly convenient.

Tab Pinning

Pinned tabs default to the left side of the editor group. However, placing them in a separate row would visually distinguish them from unpinned tabs, as shown here:

Note: By default, pinned tabs cannot be closed with the middle mouse button or Cmd + W (pressing these opens an unpinned tab instead of closing the pinned one). This behavior can be modified.

Tab Close Button

I’ve always used the left-hand cmd + w shortcut to close tabs, so this option can be disabled. Additionally, I’m more accustomed to double-clicking tabs to close them, but the official response indicates this feature won’t be implemented, as seen here:

Allow to double click on a tab to close it · Issue #52628 · microsoft/vscode

Tab Wrap

When many tabs are open, scrolling through them becomes cumbersome and makes it hard to maintain an overview. I prefer wrapping tabs, which looks like this:

One awkward aspect is that the multi-line tabs created by wrapping might conflict with the “modified tab blue highlight” mentioned earlier (it’s unclear whether the blue line belongs to the tab above or below, requiring a moment to process, which isn’t intuitive). It’s a trade-off between displaying more tab content and maintaining clarity:

Tab Height

A compact layout helps with maintaining an overview and saving space.

Double-Click to Close Tab (?)

This option appears to be the “double-click to close tab” feature the official team claimed they wouldn’t implement (as mentioned above). Even after disabling the potentially conflicting “double-click to auto-expand editor groups,” this setting still doesn’t work. It’s unclear whether I misunderstood it or if it’s a bug.

Native Tabs

There are two related settings:

The first setting, when enabled, allows merging multiple project windows into a single window. The “Window” menu will then include a “Merge All Windows” option, making it convenient to switch between multiple projects within one window:

However, this disables the ability to use custom titles (though I don’t find this particularly useful). A custom title looks like this:

If the first setting is enabled, the second becomes ineffective, regardless of whether it’s set to “native” or “custom.” If the first setting is disabled and the second is set to “native,” neither “Merge All Windows” nor “Custom Title Bar” will be available (making the purpose of this setting unclear).

File Tree Drag-and-Drop

I often accidentally trigger this, leading to hundreds of unintended changes… so I’ve turned it off.

Auto-Collapse Search Results

By default, results are always expanded. However, if there are too many results (often because the search query isn’t fully entered yet), expanding them is unnecessary and can hinder the overview.

Additionally, if you haven’t added “excluded files” to the search bar, you might encounter an overwhelming number of results (e.g., the .next directory in a NextJS project), making this setting essential.

Note that the “expand”/“collapse” threshold of 10 files refers to the number of matching files within a single folder in the search results, not the total number of folders in the entire search:

Thus, if a folder contains too many matching files (causing it to collapse), it usually indicates the need to refine the search query.

Typically, when you select text, you want to search for it. The “Seed On Focus” option saves you a cmd + v step.

Note that this differs from the “search widget” behavior where selected text is automatically inserted when focusing on the search bar. In the editor, selecting text and then focusing on the search widget might not always be for searching—it could simply be to highlight matching text in the current editor for reference. Automatically replacing the search query in this case often doesn’t align with expectations.

However, if you select text and then focus on the search view (right panel), it’s likely for searching purposes.

Additionally, I find it helpful to see line numbers in search results to locate matches within their documents, so displaying line numbers is also necessary.

The “Smart Case” feature is a handy trick: if the query is all lowercase, it assumes you’re unsure about the exact name; if it includes uppercase letters (e.g., camelCase function names), it performs a case-sensitive search. Very useful.

Lastly, if the search box remembers the last input, it’s ideal for it to remain selected. If it doesn’t match your current intent, you can simply type over it. If the previous search is still relevant, even better: ↓

Ignore Global .ignore Files in Search

Git has a global default ignore feature. Enabling this option allows files and folders listed in it to be ignored during searches, which is usually necessary.

There’s also an option to enable ignore in parent directories. I’m not entirely sure what it means—possibly related to multi-level Git management—but I checked it anyway. Since we’re ignoring things, might as well:

Debugging and Testing

Admittedly, my technical skills are limited, so I rarely use VSCode’s debugging and testing features. I’ve only used them for debugging NodeJS applications like NextJS, where the experience is similar to Chrome. Since I don’t use these features often, I haven’t encountered any pain points or found any optimizations worth mentioning here.

File Modification Effects

In the line number column, you can choose to display differences as solid lines or “gutters,” as shown here:

I prefer solid lines, so I unchecked both of these options.

Disable Git Commit Button

To be honest, I’ve never used the commit button on the left—I always use the command line for Git operations—so I disabled this option.

Similarly, this button (which appears to be for GitHub Copilot, automatically generating commit messages) is also disabled. Especially for company projects where we’re required to include task/bug card numbers in commit messages, this “smart” feature becomes even more useless:

Extensions

Disable Notifications

I don’t need any extensions telling me what to do. If I need something, I’ll seek it out myself.

Terminal

Right-Click Behavior

Normally, you select text with the left mouse button and then right-click for context actions. But VSCode’s default behavior is to show the right-click menu after selecting content (a word). It works, but it’s unnecessary.

Terminal Maximum Lines

This isn’t a critical setting, but I occasionally need to review very old log information. With my 64GB of RAM, increasing this value doesn’t hurt.

Terminal Scroll Animation

While I love animations (elegant!), the terminal’s scroll animation seems to have some inertia, making it hard to control the scroll amount. It feels very different from the scrolling behavior in the editor or workspace, so I turned it off.

CSS/Less/Sass

Lint Duplicate Property Warnings

This is very useful. Sometimes you copy multiple property values (e.g., from browser-inspected styles) and then remove duplicates.

Git

Auto Stash

As shown in the image, the description is clear. It’s recommended to enable this to save a step in your workflow.

Third-Party Extensions

There’s not much to say here. If you’ve installed an extension, it’s because you have a specific need for it, so configure it accordingly.

GitLens

However, some plugins, like GitLens, can disable paid feature prompts. For example, when I (accidentally) check Git branch merge status, I might trigger a paid feature prompt. Thankfully, this can be turned off (kudos to the plugin developer for being considerate):

One Dark Pro

I love this feature—it makes method and function names stand out more clearly:

Closing Thoughts

After all these settings, remember: what works for you is what matters most. Here’s to efficient work and leaving the office early!

Watching Beijing Unicom IPTV on Apple TV

Mon, 30 Oct 2023 00:00:00 +0000

Preface

In a previous blog post, I discussed home theater solutions, mentioning the use of IPTV program addresses (with .m3u extension) scraped by others online, which can be directly played in iPlayTV. However, these addresses often expire after some time because China Unicom’s IPTV servers periodically update the program streaming URLs, while the address entered on Apple TV remains static and cannot update in time. This article aims to solve this issue.

🚧**Important Notes Before Proceeding:** I use Beijing Unicom broadband, with the **optical modem in bridge mode, the router handling PPPoE, and a soft router R4S connected as a side router**. This tutorial is tailored to this network topology. Other setups, such as "optical modem in bridge mode + R4S as the main router for PPPoE" or "optical modem handling PPPoE + R4S as a side router," may also work, but the key R4S settings might differ slightly from this guide. I recommend researching further to grasp the core principles rather than copying my setup exactly.

🚧Similarly, if your optical modem handles PPPoE directly, you can connect a cable from the modem to a side/main router to convert multicast to unicast. Alternatively, you can play multicast streams directly on supported devices, avoiding the complexity of my method. The approach depends on your home network topology.

🚧This tutorial has only been tested successfully with Beijing Unicom IPTV. Other regions may differ. If you encounter content strongly tied to a specific region, replace it with the appropriate details for your location.

🚧Before making any changes, back up all router and device settings as a precaution.

🚧I use a soft router R4S with two network ports. If your network topology matches mine, ensure your soft router has at least two ports—one to connect to the main router and another to the optical modem.

🚧My home network setup: - Optical modem subnet: 192.168.1.x - Main router subnet: 192.168.5.x - Optical modem IP: 192.168.1.1 - R4S IP: 192.168.5.2 - Main router LAN IP: 192.168.5.1 - Router WAN IP: 192.168.1.2

Verifying Free Access Support

🚧Currently, Beijing Unicom IPTV does not enforce authentication. However, based on my research, some carriers in other regions encrypt or authenticate IPTV, requiring the use of the MAC address from the carrier-provided IPTV box (which handles decryption) to enable playback on any LAN device via a soft router without the box. Implementing this is complex and beyond the scope of this tutorial.

Download VLC in Advance

When using the optical modem in bridge mode with the router handling PPPoE, connecting directly to the modem won’t provide internet access. Therefore, download the VLC media player on your computer beforehand for testing. Download VLC here:

Official download of VLC media player, the best Open Source player - VideoLAN

Connecting to the Optical Modem

Connect your computer to the IPTV port of the optical modem using a wired connection (if no IPTV port is found on the modem, it means the modem supports hybrid insertion, meaning the ports are not differentiated between broadband and IPTV—any port will work). Then, in the VLC software:

Go to File > Open Network.
Click on Open RTP/UDP Stream below.
Select RTP for Protocol, Multicast for Mode, and enter 239.3.1.241 (or rtp://239.3.1.241—can’t recall which one exactly) for IP Address, and 8000 for the port.

After clicking Open, if you can see Beijing TV, it means you can enjoy it for free.

💡Here, `rtp://239.3.1.241:8000` is the multicast address for Beijing TV. This address may change in the future. For the most accurate address, you can go to https://raw.githubusercontent.com/qwerttvv/Beijing-IPTV/master/IPTV-Unicom.m3u` and test any IP address following an rtp path.

Explanation of Basic Concepts

Skip to the next section if you’re not interested in the details.

IPTV

According to Wikipedia’s definition of IPTV:

📖Internet Protocol Television (abbreviated as IPTV) is a form of broadband television. IPTV is a system that delivers television content via broadband networks, transmitting broadcast programs through the Internet Protocol (IP) to provide digital TV services to subscribers. Since it requires internet access, IPTV service providers often bundle related services such as internet connectivity and IP telephony, also known as "Triple Play" services. As a type of digital television, conventional TVs need a corresponding set-top box to receive channels, which is why providers typically offer video-on-demand services alongside. Although it uses broadband networks and the Internet Protocol, IPTV does not necessarily rely on the public internet—it often transmits via local area networks to ensure quality.

From this, we can see that IPTV is generally a service provided by broadband providers, allowing users to watch TV through it.

Multicast

A technical method for implementing IPTV playback, known as “multicast” in English. The exact concept isn’t crucial to grasp, but it’s helpful to understand its advantages over unicast:

Advantages include:

Does not consume internet bandwidth.
The IPTV box serves as an authentication device. Since IPTV operators broadcast to a group, the load on their servers is relatively light.

Disadvantages include:

Must be connected via cable to the IPTV port of the optical modem (some modems support mixed ports, meaning they don’t distinguish between IPTV and broadband ports). This restricts usage to devices connected to the IPTV box, preventing WiFi-enabled devices from watching network TV.

Unicast

An older technical method for implementing IPTV playback, used when IPTV had fewer users. Compared to multicast, its disadvantages are the other’s advantages, and vice versa:

Advantages include:

Once connected, the local network supports WiFi, allowing any device to play the stream.

Disadvantages include:

Requires a one-to-one connection with the server, increasing server load. Playback may lag when there are many users.
Consumes broadband bandwidth, as playback is directly conducted over the internet (similar to watching live streams today).

udpxy

udpxy is **a proxy server that converts UDP streams into HTTP streams**, enabling IPTV streams to be played on various devices.

When multicast addresses cannot be obtained directly, they can be converted to unicast addresses. For example, if the multicast addresses are a:b and d:e (where a and d are IP addresses, and b and e are ports), they can be converted into uniform unicast addresses like z/a/b and z/d/e. The player simply needs to listen to the address z.

M3U

**M3U** (short for MP3 URL) is a file format designed for multimedia playlists. Initially created for audio files like MP3, it is now increasingly used by software to play video file lists.

An M3U file is a plain text file containing all the multicast addresses for playback. By reading this file on an Apple TV or computer, the player can access and stream the video addresses listed within.

EPG

EPG (Electronic Program Guide) contains program schedule information. After obtaining the M3U address in the previous step, which consists of individual IP addresses, how does one identify which channel each IP address corresponds to? This is where EPG comes into play—it pairs each address with program details, including brief channel descriptions. EPG data is typically broadcast alongside the video signal.

Network Topology

Hands-on Practice

🚧Before starting, check if free usage is supported as mentioned at the beginning.

Setting Up a Soft Router

Installing udpxy and luci-udpxy

This step involves standard operations. The UI installation is the most convenient method, as shown in the image (do not enable it immediately after installation; enable it in the final step):

Creating/Configuring Network Interfaces

This step ensures the software router can recognize data coming from the optical modem.

Under Network > Interfaces, create a new interface and name it arbitrarily, such as IPTV:

Pay attention to the arrow-marked part—I’ve already created it, so it shows “IPTV” in parentheses (it wasn’t there when first created). Here, eth1 is my LAN port connected to the main router, while eth0 is another interface connected to the optical modem (IPTV port). I modified this earlier—by default, eth0 is the LAN port and eth1 is the WAN port, but that’s irrelevant. This step repurposes the WAN port as the IPTV port.

Configure the gateway hop and firewall settings for the “IPTV” interface:

Configure the gateway hop count for the WAN port:

Configure LAN Port IGMP Snooping:

Configure network firewall

Configuring the udpxy Service

Configure as shown in the diagram, noting that eth0 here refers to the WAN port—don’t mix it up:

Finally, attempt to open [http://192.168.5.2:4022/status]([object Object]) to verify whether the udpxy service has started successfully:

Afterwards, change the address rtp://239.3.1.241:8000 that was previously opened with VLC to `http://192.168.2.1:4022/rtp/239.3.1.241:8000`` and try opening it again (no need to click the “Open RTP/UDP Stream” below; just open it directly in the URL).

Then simply double-click to play:

Using Playback Software

I watch TV on Apple TV 4K and have tried several playback apps. Here’s a brief overview:

iPlayTV couldn’t play the streams—no idea why.
Fileball allowed channel switching up and down, but crashed immediately when selecting a channel.
Eventually, I chose “TV+” by the same developer as IIVA, priced at 38 HKD in the Hong Kong region (awkwardly, it went free the day after I bought it).

How to Automatically Update Addresses

The playback addresses for China Unicom’s IPTV change periodically—sometimes the port changes, sometimes the IP address. When this happens, the playback method stops working. So, what’s the solution?

Some kind folks online have performed complex monitoring operations, such as this:

光纤入户光猫改桥接+内网转发IPTV=任意设备看电视直播 - Botian's Blog

They captured the communication data between the IPTV set-top box and China Unicom’s servers, extracting the addresses. Thus, we can directly use them, such as:

github.com

However, there’s one key point here: your home’s soft router address needs to match this kind person’s address (192.168.123.1), and then change the udpxy port to 23234. This way, you can directly input this address into TV+:

raw.githubusercontent.com

Otherwise, you’ll have to actively monitor changes to this file and update accordingly.

Here, I spent ten minutes deploying an API service on Vercel while also enabling Vercel’s Cron Jobs service to periodically execute functions for detecting changes. The code is as follows—you can deploy your own setup as well:

import type { NextApiRequest, NextApiResponse } from 'next';

type ResponseData = {
  msg: string,
};

/**
 * 该函数用来将网友通过 IPTV 盒子抓包获取的联通单播地址，转成自己的单播地址
 * 该函数每天 3 点触发一次，定时检测网友的单播地址是否有更新，使用 vercel corn 任务进行
 * TODO: 该函数未做鉴权，任何人都可以手动触发检测，为了防止滥用可以加上鉴权，但是 corn 似乎没这个功能
 */
export default function handler(
  request: NextApiRequest,
  response: NextApiResponse<ResponseData>
) {
  // Note: 步骤
  // 1. 获取网友通过监听盒子数据包抓取的（自己搞比较费劲，直接用现成的了）联通 IPTV 永久地址（rtp 协议的组播地址，多用户通用），获取其内容
  // 2. 添加本地 udpxy 转发地址
  // 3. 获取之前的 github gist 内容以对比二者
  // 4. 有差异，则更新 github gist 内容
  // 5. 没有，则不做操作
  // Note: 环境变量，自己在 Vercel 中设置好
  const token = process.env.GITHUB_TOKEN;
  const gist = process.env.GIST_URL;
  const id = process.env.GIST_ID;
  return fetch(
    'https://raw.githubusercontent.com/qwerttvv/Beijing-IPTV/master/IPTV-Unicom.m3u'
  )
    .then(async (res) => {
      if (!res.ok) {
        console.log('获取源地址异常');
        return response.status(200).json({
          msg: '获取源地址异常',
        });
      }
      const src = await res.text();
      // Note: 替换网友的本地单播地址为我的，其实你也可以将自己家的路由器网段设置成跟网友的一样（192.168.123.x），udpxy 端口转发设置成跟网友一样（23234），你就可以直接使用该地址了
      const newGist = src.replace(
        /http\:\/\/192\.168\.123\.1\:23234/g,
        'http://192.168.5.2:4022'
      );
      response.setHeader('Content-Type', 'text/html; charset=utf-8');
      // Note: 获取 gist 的 raw 内容，需要加个 cache-bust 否则每次请求会被缓存
      return fetch(`${gist}?cache-bust=${Math.floor(Math.random() * 100000)}`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      })
        .then(async (pre) => {
          const preGist = await pre.text();
          // console.log('preGist:', preGist);
          if (JSON.stringify(newGist) !== JSON.stringify(preGist)) {
            // Note: 更新 Gist
            const files = {
              'IPTV.m3u': {
                content: newGist,
              },
            };
            return fetch(`https://api.github.com/gists/${id}`, {
              method: 'PATCH',
              headers: {
                Authorization: `Bearer ${token}`,
                'Content-Type': 'text/plain',
              },
              body: JSON.stringify({ files }),
            })
              .then((s) => {
                console.log(
                  `更新成功: ${gist}?cache-bust=${Math.floor(
                    Math.random() * 1000000
                  )}`
                );
                return response.status(200).json({
                  msg: `更新成功: ${gist}?cache-bust=${Math.floor(
                    Math.random() * 1000000
                  )}`,
                });
              })
              .catch((e) => {
                console.log(`更新失败: ${e}`);
                return response.status(200).json({
                  msg: `更新失败: ${e}`,
                });
              });
          }
          console.log(
            `未变化: ${gist}?cache-bust=${Math.floor(Math.random() * 1000000)}`
          );
          return response.status(200).json({
            msg: `未变化: ${gist}?cache-bust=${Math.floor(
              Math.random() * 1000000
            )}`,
          });
        })
        .catch((e) => {
          console.log(`获取自己的 gist 失败: ${e}`);
          return response.status(200).json({
            msg: `获取自己的 gist 失败: ${e}`,
          });
        });
    })
    .catch((e) => {
      console.log(`获取别人的源失败: ${e}`);
      return response.status(200).json({
        msg: `获取别人的源失败: ${e}`,
      });
    });
}

Corn Jobs Service Configuration:

{
  "crons": [
    {
      "path": "/api/get",
      "schedule": "0 15 * * *"
    }
  ]
}

After pulling this file, if there are updates, the gist file will be automatically updated:

gist.githubusercontent.com

In this way, I only need to hardcode this gist address in TV+, and it will automatically update when the author updates the address.

Reference Links

单线融合IPTV到家庭局域网最简单的方法：路由+桥接混合模式

光纤入户光猫改桥接+内网转发IPTV=任意设备看电视直播 - Botian's Blog

北京联通白嫖 IPTV