Attention overload has become a new kind of modern-day "sub-health."

On average, a person encounters 6,000 to 10,000 ads every day, whether they mean to or not.

That number is twice what it was 20 years ago.

You can see how much money is involved by looking at companies like Tencent, whose ad business has grown from around 200 million to now being worth hundreds of billions.

To protect my attention, I recently made some changes. I started with WeChat, the app I rely on most in daily life.

WeChat brings together chat, official accounts, video accounts, livestreams, music, shopping, games, and even mini-programs—essentially a full mini operating system in one app. But at the beginning, it was only for logging in, adding friends, and sending messages.

Because it is deeply tied to personal relationships and social networks, WeChat has become almost impossible to fully avoid in everyday life. Since that is the case, I decided to take a scalpel to it and make some changes:

First, I unfollowed all official accounts and service accounts, and turned off personalized recommendations and video account recommendations.

Second, I deleted more than 200 friends and left over 40 group chats, then folded the remaining conversations away.

Third, I turned off every feature in the Discover tab, including Moments, video accounts, livestreams, "Top Stories," search, and more.

Fourth, I disabled all services, including credit card payments, phone top-ups, utility bills, travel services, hotels, and homestays.

Fifth, I turned off WeChat's focus notifications, app icon badges, floating notifications, lock screen notifications, sound alerts, and vibration—leaving only incoming calls.

After doing all of this, I got a kind of "lite" version of WeChat. The only regrettable part is that WeChat still doesn't let me turn off the profile sections for status, Moments, Works, Store, Wallet, and stickers.

Of course, this process involved a period of withdrawal. I used to love scrolling through Moments, official accounts, and video accounts. But once the constant stream of messages and information attacks was reduced, I realized that the attention WeChat had stolen from me was coming back. And now I’m already used to it—I don't want to go back.

But sometimes, the state comes from somewhere else. As shown in the classic example from the React docs, we may need to track whether the browser is online:

If the network is available, show ✅ Online; otherwise show ❌ Disconnected.

Use Chrome DevTools > Network to simulate online/offline states.

Here, the online status comes from the external value navigator.onLine, so useSyncExternalStore is a perfect fit:

import { useSyncExternalStore } from 'react';

export default function ChatIndicator() {
  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
}

function getSnapshot() {
  return navigator.onLine;
}

function subscribe(callback) {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);
  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
}

As you can see, the basic setup for useSyncExternalStore includes a subscribe function and a getSnapshot function:

const isOnline = useSyncExternalStore(subscribe, getSnapshot);

If you look closely at the subscribe function, it runs logic inside the function, calls callback, and finally returns a cleanup function. This feels very similar to the usual effect hook useEffect:

function subscribe(callback) {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);
  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
}

That callback is important: React calls it like a delivery person, and it asks getSnapshot for the latest value. If the value has changed, React immediately updates the component.

At this point, you might think that useEffect could also do the same thing:

import { useState, useEffect } from 'react';

export default function ChatIndicator() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
}

If useEffect can do the same thing, is useSyncExternalStore just unnecessary extra work?

This is where React tearing becomes important. Consider a simple component like this:

If you look carefully, when the page first opens, these counters show different values such as 218, 219, and 220, and then they all eventually become 221.

In reality, all of these counters are reading from the same external data source. In theory, they should always stay in sync.

But React 18’s concurrent rendering model doesn’t always behave politely.

Because rendering happens concurrently, some components may update to the latest external value while others lag behind.

That lag creates the visual effect of components being “torn” apart.

This is exactly why useSyncExternalStore exists. It calls getSnapshot during rendering to check whether the value is still current. If not, React discards the current render and performs a synchronous, non-blocking rerender with the latest value:

@tanstack/react-query （下称 RQ）在 GitHub 上已经累积了 4w+ 的 ⭐，称得上 React 技术栈中必不可少的工具。

它并不像 Zustand 这些通用的状态管理库，而是针对请求这一场景，做了相关的深度优化和功能定制。

RQ 在当前项目已经引入将近两个月，但是使用情况并不多，障碍可能来自于 RQ 的学习曲线和心智认知，所以开展本次 RQ 分享，让团队各位更多地了解 RQ 的能力，进而利用好 RQ，提高开发效率。

RQ 和 Axios 的关系​

目前我们的项目中使用 Axios 作为请求器，而 RQ 并不是用来替代 Axios，而是用来增强 Axios 的。

看一下例子：

// 👉 这是用 Axios 去实现的获取站内信未读总数的接口方法
export function getUnreadNotificationCount(): Promise<number> {
  return clientApi.get(URL.GET_UNREAD_NOTIFICATION_COUNT, {
    fetchOptions: {
      experimental_throw_all_errors: true,
      experimental_no_toast_when_error: true,
    },
  });
}

// 👉 使用 RQ 通过 hook 封装的方式，去增强未读总信接口
import { useQuery } from '@tanstack/react-query';
export const useUnreadNotificationCount = () => {
  return useQuery({
    queryKey: ['notification', 'unread-count'],
    // 👉 RQ 最终调用我们提供给接口方法
    queryFn: getUnreadNotificationCount, 
  });
};

所以 RQ 其实是请求框架无关的工具，它可以和 Axios，GraphQL，或者原生 fetch() 方法等结合使用。

功能一：减少样板代码​

不使用 RQ​

假设我们不使用 RQ，那么正常调用一个接口就是：

import { useState, useEffect } from 'react';

function NotificationBadge() {
  // 👉 定义一堆状态
  const [count, setCount] = useState(0);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 👉 手动控制各个状态
    const fetchCount = async () => {
      try {
        setIsLoading(true);
        const count = await getUnreadNotificationCount();
        setCount(count);
        setError(null);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    };

    fetchCount();
  }, []);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading notifications</div>;

  return <div>Unread: {count}</div>;
}

如果这个接口在多个地方使用，我们需要封装为一个自定义 hook：

// 👉 创建自定义 hook
import { useState, useEffect } from 'react';

export function useUnreadNotificationCount() {
  const [count, setCount] = useState(0);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchCount = async () => {
      try {
        setIsLoading(true);
        const count = await getUnreadNotificationCount();
        setCount(count);
        setError(null);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    };

    fetchCount();
  }, []);

  return [count, isLoading, error];
}

function NotificationBadge() {
  const { count, isLoading, error } = useUnreadNotificationCount();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading notifications</div>;

  return <div>Unread: {count}</div>;
}

使用 RQ​

使用 RQ 之后：

// 1. 用 RQ 封装自定义 hook
import { useQuery } from '@tanstack/react-query';
export const useUnreadNotificationCount = () => {
  return useQuery({
    queryKey: ['notification', 'unread-count'],
    queryFn: getUnreadNotificationCount,
  });
};

// 2. 引用该 hook
function NotificationBadge() {
  const { data: count, isLoading, error } = useUnreadNotificationCount();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading notifications</div>;

  return <div>Unread: {count}</div>;
}

RQ 相当于语法糖，简化了自定义 hook 的封装，可以大大减少我们写样板代码。

功能二：减少重复请求​

在我们的通知页中，中间菜单和右侧内容都有标题【点赞】以及未读数【3】，这里的未读数都是通过接口获取：

不使用 RQ​

那么两个地方引用了相同的数据，没有 RQ 的情况下，处理方式有：

状态提升。把请求接口提升到他们的共同的父组件中。

• 优点: 简单直接，单一数据源。
• 缺点: 父组件需要知道子组件的数据需求

function NotificationPage() {
  const [unreadCount, setUnreadCount] = useState(0);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetchUnreadCount();
  }, []);

  const fetchUnreadCount = async () => {
    try {
      setIsLoading(true);
      const count = await getUnreadNotificationCount();
      setUnreadCount(count);
    } catch (err) {
      console.error(err);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      <MiddleMenu unreadCount={unreadCount} />
      <RightContent unreadCount={unreadCount} onRefresh={fetchUnreadCount} />
    </div>
  );
}

Context API：使用 <Context> 组件，跨层级共享数据。

• 优点: 避免 Props 穿透（props drilling），组件解耦。
• 缺点: 任何 context 值变化会导致所有消费者重新渲染，需要额外的 Provider 包裹

const NotificationContext = createContext();

function NotificationProvider({ children }) {
  const [unreadCount, setUnreadCount] = useState(0);
  const [isLoading, setIsLoading] = useState(true);

  const fetchUnreadCount = async () => {
    try {
      setIsLoading(true);
      const count = await getUnreadNotificationCount();
      setUnreadCount(count);
    } catch (err) {
      console.error(err);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    fetchUnreadCount();
  }, []);

  return (
    <NotificationContext.Provider value={{ unreadCount, isLoading, refetch: fetchUnreadCount }}>
      {children}
    </NotificationContext.Provider>
  );
}

// 使用
function MiddleMenu() {
  const { unreadCount, isLoading } = useContext(NotificationContext);
  return <div>未读: {unreadCount}</div>;
}

function RightContent() {
  const { unreadCount, refetch } = useContext(NotificationContext);
  return <div>未读: {unreadCount}</div>;
}

封装 Hook：把请求封装到 hook 中

• 优点：共享请求状态
• 缺点：每个组件都会重复请求

使用 RQ​

使用 RQ 之后：

function useUnreadNotificationCount() {
  return useQuery({
    queryKey: ['notificationCount'],
    queryFn: getUnreadNotificationCount,
  });
}

function MiddleMenu() {
  const { data: unreadCount, refresh } = useUnreadNotificationCount();
  return <div>未读: {unreadCount}</div>;
}

function RightContent() {
  const { data: unreadCount } = useUnreadNotificationCount();
  return <div>未读: {unreadCount}</div>;
}

优点： ✅ 自动去重: 两个组件同时挂载只发 1 次请求（queryKey 相同）
✅ 无需 Provider: 不需要包裹父组件
✅ 组件独立: 每个组件独立使用，不依赖父组件传递

这里提到"两个组件同时挂载只会发起 1 次请求"，其原理就是 RQ 会缓存请求的数据。RQ 的很多功能都是基于缓存来操作。

功能三：重刷新​

还是通知的例子，当用户打开"点赞"页面，在这里查看消息的时候，【未读数】需要动态更新：

不使用 RQ​

没有 RQ 的情况下，我们需要对这么多个组件做数据联动，方案还是状态提升、Context，当然，还可以通过事件总线（EventEmitter）的方式：

// 定义一个事件总线通用方法：eventBus.js
class EventBus {
  constructor() {
    this.events = {};
  }
  
  on(event, callback) {
    if (!this.events[event]) this.events[event] = [];
    this.events[event].push(callback);
  }
  
  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data));
    }
  }
  
  off(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    }
  }
}

export const eventBus = new EventBus();


// 对于左侧菜单
function LeftMenu() {
  const [totalUnreadCount, setTotalUnreadCount] = useState(0);

  useEffect(() => {
    const fetchCount = async () => {
      const count = await getUnreadTotalNotificationCount();
      setTotalUnreadCount(count);
    };
    
    fetchCount();
    
    // ⚠️ 监听刷新事件
    const handleRefresh = () => fetchCount();
    eventBus.on('notification:read', handleRefresh);
    
    return () => {
      eventBus.off('notification:read', handleRefresh);
    };
  }, []);

  return <div>通知 ({totalUnreadCount})</div>;
}

// 对于中间的菜单
function MiddleMenu() {
  const [unreadCount, setUnreadCount] = useState(0);

  useEffect(() => {
    const fetchCount = async () => {
      const count = await getUnreadNotificationCount();
      setUnreadCount(count);
    };
    
    fetchCount();
    
    // ⚠️ 监听刷新事件
    const handleRefresh = () => fetchCount();
    eventBus.on('notification:read', handleRefresh);
    
    return () => {
      eventBus.off('notification:read', handleRefresh);
    };
  }, []);

  return <div>点赞 ({unreadCount})</div>;
}

// 对于右侧内容
function RightContent() {
  const handleMarkAsRead = async (id) => {
    await markNotificationAsRead(id);
    
    // ⚠️ 触发刷新事件
    eventBus.emit('notification:read');
  };

  return (
    <button onClick={() => handleMarkAsRead(123)}>
      标记已读
    </button>
  );
}

使用 RQ​

使用 RQ，利用它的 invalidateQueries() 方法可以实现同样的效果：

// 对于左侧菜单
function LeftMenu() {
  const { data: unreadTotalCount, refresh } = useQuery({
    queryKey: ['totalNotificationCount'],
    queryFn: getTotalUnreadNotificationCount,
    staleTime: Infinite,
  });

  return <div>点赞 ({unreadCount})</div>;
}


// 对于中间的菜单
function MiddleMenu() {
  const { data: unreadCount } = useQuery({
    queryKey: ['notificationCount'],
    queryFn: getUnreadNotificationCount,
  });

  return <div>点赞 ({unreadCount})</div>;
}

// 对于右侧内容
function RightContent() {
  const queryClient = useQueryClient();
  const { data: unreadCount } = useQuery({
    queryKey: ['notificationCount'],
    queryFn: getUnreadNotificationCount,
  });

  const { data: notifications } = useQuery({
    queryKey: ['notifications', 'print-and-collect'],
    queryFn: () => getNotifications('print-and-collect'),
  });

  const markAsReadMutation = useMutation({
    mutationFn: markNotificationAsRead,
    onSuccess: () => {
      // ✅ 自动让所有相关查询失效并重新获取
      queryClient.invalidateQueries({ queryKey: ['totalNotificationCount'] });
      queryClient.invalidateQueries({ queryKey: ['notificationCount'] });
      queryClient.invalidateQueries({ queryKey: ['notifications'] }); 
    },
  });

  return (
    <div>
      <h2>点赞 (未读: {unreadCount})</h2>
      {notifications?.map(n => (
        <div key={n.id}>
          {n.content}
          {!n.isRead && (
            <button onClick={() => markAsReadMutation.mutate(n.id)}>
              标记已读
            </button>
          )}
        </div>
      ))}
    </div>
  );
}

优势: ✅ 零配置自动同步: invalidateQueries 一个方法搞定
✅ 组件完全解耦: <RightMenu>，<MiddleMenu> 和 <RightContent> 互不依赖
✅ 数据一致性: 始终从服务器获取最新数据
✅ 无需手动管理: 不需要回调、Context、事件总线
✅ 乐观更新: 可以先更新 UI，再同步服务器

RQ 底层也是使用发布/订阅（pub/sub）设计模式。

功能四：乐观更新​

什么是乐观更新？​

乐观更新对应的是悲观更新，悲观更新也就是比较传统的做法——先请求 API，再更新 UI。
而乐观更新是先更新 UI，再请求 API。

了解了乐观更新，我们来引用它去优化上一节提到的内容，先更新未读数的 UI，再请求 API：

const markAsReadMutation = useMutation({
  mutationFn: markNotificationAsRead,
  
  // ✅ 乐观更新：立即更新 UI，不等待服务器响应
  onMutate: async (notificationId) => {
    // 取消正在进行的查询
    await queryClient.cancelQueries({ queryKey: ['notificationCount'] });
    
    // 保存之前的值（用于回滚）
    const previousCount = queryClient.getQueryData(['notificationCount']);
    
    // 立即更新未读数
    queryClient.setQueryData(['notificationCount'], (old) => old - 1);
    
    return { previousCount };
  },
  
  // ❌ 如果失败，回滚
  onError: (err, variables, context) => {
    queryClient.setQueryData(['notificationCount'], context.previousCount);
  },
  
  // ✅ 无论成功失败，最终都重新获取确保数据一致
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ['notificationCount'] });
  },
});

DevTools​

RQ 提供了一个 Devtools，可以作为调试使用，可以提升我们的开发效率。

可以在项目本地开发环境下集成 Devtools，在右下角这个浮动按钮：

TODO

对于 Devtools 来说，比较好用的主要有 Actions 和 Data Explorer，可以手动查看相关数据，也可以触发 RQ 的相关方法：

TODO

深入学习​

1. 中文文档
   目前官方文档只有英文，目前有挺多的相关中文文档镜像，比如：
   https://tanstack.com.cn/query/latest/docs/framework/react/overview
   也可以自行 google "tanstack 中文文档"

2. 沉浸式翻译
   一款 web 插件，一键把英文翻译成中文，原汁原味，适合 RQ 原文档学习。
   https://chromewebstore.google.com/detail/bpoadfkcbjbfhfodiogcnhhhpibjhbnh?utm_source=item-share-cb

3. Zread
   如果想进一步了解 RQ 的源码或者功能，可以使用 Zread，它已经索引了 RQ 的 GitHub 仓库，并且提供 AI 问答，目前免费： https://zread.ai/TanStack/query

扩展：服务端组件中如何使用？​

留一个问题

相信很多人都和我一样，看完 TypeScript 的相关文档，对这个关键字还是一头浆糊。

satisfies 关键字是 TypeScript 4.9 版本引入的，用于类型断言。

先看一下连接数据库的例子：

type Connection = {}

declare function createConnection(
  host: string,
  port: string,
  reconnect: boolean,
  poolSize: number,
): Connection;

这里，我们声明了一个函数 createConnection，它接收四个参数，返回一个 Connection 类型。

接着：

type Config = {
  host: string;
  port: string | number;
  tryReconnect: boolean | (() => boolean);
  poolSize?: number;
}

我们又声明了一个 Config 类型，它包含了四个属性：host、port、tryReconnect 和 poolSize。

接下来：

const config: Config = {
  host: "localhost",
  port: 3000,
  tryReconnect: () => true,
}

我们声明了一个 config 变量，它包含这三个属性的值：host、port、tryReconnect。

OK，现在我们来调用 createConnection 函数，并传入 config 参数：

function main() {
  const { host, port, tryReconnect, poolSize } = config;
  const connection = createConnection(host, port, tryReconnect, poolSize);
}

问题出现了：

这里 port 的类型是 string | number，而 createConnection 函数的参数类型是 string，所以会报错。

为了解决类型定义问题，我们需要加上类型断言的逻辑代码：

function main() {
  let { host, port, tryReconnect, poolSize } = config;

  if (typeof port === "number") {
    port = port.toString();
  }

  const connection = createConnection(host, port, tryReconnect, poolSize);
}

port 类型正确了，但 tryReconnect 类型错误了：

我们一次性将这些类型修复：

function main() {
  let { host, port, tryReconnect, poolSize } = config;

  if (typeof port === "number") {
    port = port.toString();
  }
  if (typeof tryReconnect === "function") {
    tryReconnect = tryReconnect();
  }
  if (typeof poolSize === "undefined") {
    poolSize = 10;
  }

  const connection = createConnection(host, port, tryReconnect, poolSize);
}

port、tryReconnect、poolSize 都进行了类型断言，问题解决了。

但是，这样写起来很麻烦，有没有更简单的方法呢？

一种方式是，去掉 config 的类型定义，放飞自我，让它自动被推断：

const config = {
  host: "localhost",
  port: 3000,
  tryReconnect: () => true,
}

这样，我们可以一步到位：

function main() {
  let { host, port, tryReconnect } = config;

  const connection = createConnection(host, port.toString(), tryReconnect(), 10);
}

但这样放飞类型，会引起另外的错误，比如 config 随便添加一个属性：

const config = {
  host: "localhost",
  port: 3000,
  tryReconnect: () => true,
  pool: 10, // 新增了一个属性
}

这样 TypeScript 是一点都不会报错，但却会埋下隐藏炸弹，在代码上线的时候，可能会抓马，为什么 poorSize 不生效？

层层排查，最后才发现原来 poolSize 写错成了 pool。

这个时候，satisfies，千呼万唤始出来：

const config = {
  host: "localhost",
  port: 3000,
  tryReconnect: () => true,
  pool: 10,
} satisfies Config;

不负众望，TypeScript 终于报错，告诉我们 pool 属性不存在。

satisfies 关键字为我们提供了一种两全其美的解决方案：

1. 保证类型安全：它会检查我们的对象结构是否满足（satisfies）指定的类型（如 Config）。如果你写了多余的属性（如 pool），或者属性类型不匹配，TypeScript 会立刻报错。这避免了“放飞自我”带来的隐患。
2. 保留原始类型：与使用类型注解 (: Config) 不同，satisfies 不会改变变量被推断出的原始具体类型。变量 config 的 port 属性类型仍然是 number，tryReconnect 属性类型仍然是 () => boolean。

总结来说，satisfies 的核心优势在于：在不丢失（泛化）原始推断类型的前提下，对该值进行类型检查。

这使得我们既能获得编辑器对于具体类型的智能提示和类型推断的好处，又能确保这个值的结构符合我们预先定义好的更宽泛的类型约束，从而写出更安全、更灵活的代码。

REFERENCES​

• TypeScript 4.9
• Satisfies Operator - new TypeScript 4.9 feature!

Today I want to share a small Chrome tip: you can spin up multiple clean, isolated Chrome instances at once to make your development smoother.

Quick poll: which browsers do you usually use for development?

• Chrome
• Firefox
• Safari
• Other

My daily driver for development is Chrome.

Chrome DevTools are powerful and cover the vast majority of frontend debugging needs.

But one thing has long bothered me: my everyday browsing and development are coupled together.

For example, I have lots of extensions installed:

These extensions can affect development because they may inject HTML or CSS into pages and generate extra network requests, which interferes with debugging.

For example, the sidebar HTML injected by an extension:

At this point, the usual choices are either opening an Incognito window or switching to another browser.

Both are fine, but Incognito still uses the same Chrome instance, and every time you reopen it, all state is cleared.

Switching to another browser is another option—I tried it but eventually gave up. It’s like moving to a brand-new dev environment: different UI, habits, shortcuts, etc. It feels awkward.

Recently I learned a better way: create separate Chrome instances by using different user data directories.

Run:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="/tmp/chrome_user_dir_1"

You’ll get a brand-new Chrome instance whose settings, extensions, history, etc. are all isolated.

You’ll even see two Chrome icons in the Dock:

This newly created instance is effectively a separate Chrome browser.

You can change its theme to distinguish it from other instances:

Or sign into a different account, etc.—it’s your second Chrome.

By running this command, you can theoretically create unlimited Chrome instances—just change the --user-data-dir parameter, for example:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="/tmp/chrome_user_dir_2"
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="/tmp/chrome_user_dir_3"
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="/tmp/chrome_user_dir_4"
......

In practice, I usually keep two instances and switch between them: one for casual browsing, one for development and debugging.

If launching a new Chrome instance every time during development feels a bit annoying, consider adding the command to your frontend project’s package.json scripts:

  "scripts": {
    "dev": "next dev --turbopack",
    "open-chrome": "/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome --args --user-data-dir=/tmp/ChromeNewProfile http://localhost:3000",
    "dev:chrome": "npm run open-chrome && npm run dev"
  },

Now you can run npm run dev:chrome to open the Chrome instance and automatically start next dev.

Windows PowerShell users can use:

 "scripts": {
   "dev": "next dev --turbopack",
   "open-chrome": "powershell -Command \\\"Start-Process 'C:\\\\Program Files\\\\Google\\\\Chrome\\\\Application\\\\chrome.exe' -ArgumentList '--user-data-dir=D:\\\\temp\\\\ChromeNewProfile', 'http://localhost:3000'\\\"",
   "dev:chrome": "npm run open-chrome && npm run dev"
 },

If you want the Chrome instance to open localhost:3000 automatically so you can see the page right away, append http://localhost:3000 to the command:

{
  "scripts": {
    "dev": "next dev",
    "dev:chrome": "/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome --user-data-dir=\\\"/tmp/chrome_user_dir_1\\\" http://localhost:3000 && npm run dev"
  }
}

That’s it for this post. If it helped, feel free to like, bookmark, and share.

I’m Kaipeng—see you next time.

This tutorial is also available as a video on YouTube 👉 【Next.js】Route Navigation Progress Bar

Hello, I'm Kaypen.

Let's start with a bad example.

In Dify.ai, when you click to navigate to another page, there's a waiting period before the page actually transitions.

However, during this waiting time, I don't know whether the navigation was successful or not, so I end up clicking multiple times until the page finally changes.

This is a poor user experience 👎

The solution is simple. Let's look at how GitHub handles navigation interactions.

As you can see, GitHub displays a progress bar during navigation, clearly telling users - "I'm navigating, please wait."

So how can we implement this effect in Next.js?

We can achieve this using the BProgress library.

BProgress is a lightweight progress bar component library that supports Next.js 15+, as well as other frameworks like Remix and Vue.

For using BProgress, I've created a demo project nextjs-progress-bar-demo. Let's clone this project first:

git clone git@github.com:wukaipeng-dev/nextjs-progress-bar-demo.git

Then enter the project directory:

cd nextjs-progress-bar-demo

First, install the dependencies:

npm install @bprogress/next

Start the project:

npm run dev

As you can see, this is a simple Next.js project with three pages: Home, Login, and Register.

The main branch already has the progress bar configured. Let's switch to the without-progress-bar-demo branch:

git checkout without-progress-bar-demo

In this branch, we haven't configured the progress bar, so no progress bar will be displayed during page navigation.

Next, let's import ProgressProvider in the root layout app/layout.tsx:

'use client';

import "./globals.css";
import { ProgressProvider } from '@bprogress/next/app';

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <ProgressProvider
          height="4px"
          color="#4c3aed"
          options={{ showSpinner: false }}
          shallowRouting
          >
          {children}
        </ProgressProvider>
      </body>
    </html>
  );
}

Now, we can see that when navigating between the home page and login page, or between login and register pages, a progress bar will be displayed.

The ProgressProvider parameters are:

• height: The height of the progress bar
• color: The color of the progress bar
• options: Progress bar configuration. Here showSpinner is set to false, meaning no animated loading icon will be displayed.
• shallowRouting: Whether to enable shallow routing. If enabled, when only the route's query parameters change (e.g., ?page=1 to ?page=2), the progress bar won't reload.

However, after successful login, clicking to navigate won't show the progress bar.

This is because navigation between the home page and login page, or between login and register pages, uses the <Link> component.

The <Link> component actually renders as an <a> tag, and BProgress adds click events to all <a> components to show the progress bar.

We can check in DevTools → Elements → <a> → Event Listeners whether a click event has been added:

But after successful login, we use router.push for navigation.

BProgress doesn't add click events to router.push, so naturally it won't show a progress bar.

Don't worry, BProgress provides us with a useRouter method.

Replace Next.js's useRouter with the useRouter provided by BProgress:

// import { useRouter } from 'next/navigation';
import { useRouter } from '@bprogress/next/app';

Then use it as normal:

const router = useRouter();

router.push('/');

Now you can see that after successful login, when automatically navigating to the home page, the progress bar displays correctly.

But if your project has already wrapped its own useRouter, you can pass the wrapped useRouter as a parameter customRouter for a second wrapping:

import { useRouter } from '@bprogress/next/app';
import { useRouter as useNextIntlRouter } from '@/i18n/navigation';

export default function Home() {
  const router = useRouter({
    customRouter: useNextIntlRouter,
  });

  return (
    <button
      onClick={() =>
        router.push('/about', {
          startPosition: 0.3,
          locale: 'en',
        })
      }
    >
      Go to about page
    </button>
  );
}

Finally, let's go back to app/layout.tsx, where we imported ProgressProvider but turned app/layout into a client component. Let's extract ProgressProvider elsewhere and keep app/layout as a server component.

// app/components/ProgressWrapper.tsx
'use client';

import { ProgressProvider } from '@bprogress/next/app';

interface ProgressWrapperProps {
  children: React.ReactNode;
}

export function ProgressWrapper({ children }: ProgressWrapperProps) {
  return (
    <ProgressProvider
      height="4px"
      color="#0000ff"
      options={{ showSpinner: false }}
      shallowRouting
    >
      {children}
    </ProgressProvider>
  );
}

In app/layout.tsx, we import ProgressWrapper:

import { ProgressWrapper } from './components/ProgressWrapper';

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <ProgressWrapper>
          {children}
        </ProgressWrapper>
      </body>
    </html>
  );
}

Great job! You've completed the integration of a route navigation progress bar in Next.js.

That's all for this tutorial. I hope you found it helpful.

Thanks for reading! 👏

I just had one of these moments recently.

A new colleague joined our company, and during lunch chat, I heard him mention he had worked on Next.js projects before.

Since our company's new project is based on Next.js, I thought, "Great! Our new project is saved!"

But later in the group chat, he clarified that he had actually worked on Nest.js projects.

That really threw me off.

As an ordinary developer speaking ordinary Mandarin, it's completely normal not to be able to distinguish between the pronunciations of Next /nekst/ and Nest /nest/.

The authors who named these frameworks were really "clever."

These names are like wholesale products - all following the pattern N__t.js. The last time I was this confused was with the jewelry brands "Chow Tai Fook, Chow Luk Fook, Chow Sang Sang, Luk Fook Jewellery..."

This brand piggybacking actually peaked around 2016 when frontend frameworks were exploding.

That was a time when the frontend industry was blooming with various frameworks emerging constantly.

On October 25, 2016, Next.js 1.0 was released, making its debut as an open-source project.

Next.js is based on the React framework, providing Server-Side Rendering (SSR) and Static Site Generation (SSG) capabilities, along with features like automatic code splitting and routing systems.

Just one day later, on October 26, Nuxt.js was released.

I have to say, Nuxt.js copied really fast - it's based on Vue.js and created another version of Next.js.

Nest.js came later, releasing on February 26, 2017. It's quite different from Next.js and Nuxt.js.

It's a pure Node.js backend framework - essentially the JavaScript world's Spring Boot.

All three frameworks are doing well now. Besides their own technical merits, could their success be partly due to their "trend-riding" names?

Maybe next time when developing a new framework, we should just call it Not.js.

When we first started installing Node.js, we could only download the installation package from the official website to install a specific version, like 18.17.1.

But for different projects, we might need different Node.js versions, like 18.17.1 and 20.17.1.

To switch versions, you'd need to uninstall the old version, install the new one, then switch projects - extremely troublesome (pain mask).

So Node.js version managers emerged, like NVM, Volta, etc.

They support installing specific Node.js versions and allow free switching between versions.

However, NVM has some issues. For example, it can't automatically switch versions based on projects, doesn't support Windows platform (though there's an unofficial nvm-windows that works), etc.

The new generation Node.js version manager Volta solves these problems.

It can automatically switch Node.js versions based on projects and supports Mac, Windows, and Linux platforms.

Volta is built with Rust, making it faster and better.

Installing Volta​

According to the installation guide, enter the following command in your terminal to install Volta:

curl -fsSL https://get.volta.sh | bash

After installation, open a new terminal and enter the following command to check the current Volta version:

volta -v
2.0.2

Congratulations, Volta is successfully installed!

Now we can use Volta to manage Node.js versions.

Enter the following command in the terminal to install Node.js:

volta install node

This command will install the latest LTS version of Node.js.

LTS: Long Term Support version.

Of course, you can also use the at symbol @ to install a specific Node.js version, for example:

volta install node@20.17.1

Project-Level Node.js Version Management​

Open a Node.js project you're maintaining, like "shit-mountain", find the package.json file, and add the following content:

{
  //...
  "volta": {
    "node": "20.17.1"
  }
}

When you run npm i, Volta will look for Node.js version 20.17.1.

If it can't find it, Volta will automatically install Node.js 20.17.1, then execute npm i.

This ensures the project uses Node.js version 20.17.1.

Volta has other features, like various Volta commands - list, uninstall, etc., as well as Hooks that can specify download sources. I won't elaborate here.

Visit the Volta website for more information 👉 https://volta.sh

So what is Vercel? It's a modern deployment platform designed specifically for frontend developers, particularly suitable for building, previewing, and deploying static websites and frontend applications.

So, if your open source project is a static website or frontend application, consider adding Vercel one-click deploy to your README.md to increase your project's attractiveness.

Adding one-click deployment is quite simple. Vercel provides a button generator tool: deploy-button

The button generator creates three formats: Markdown, HTML, and URL - you can choose what you need.

Just a heads up, the interaction here might feel a bit odd. The form input is at the bottom of the page. For example, after filling in the Git repository URL, the Markdown link above will automatically change without any success notification. You'll need to get used to this.

The only required field is your Git repository URL:

Other options include environment variables, default project name, redirects, demos, integrations, etc. Fill these as needed, then paste the generated Markdown into your open source project's README.md:

That's the entire process - very simple!

From the user's perspective, when they click the deploy button, they'll be redirected to the Vercel website:

Users need to log in to Vercel, and Vercel will request read/write permissions for Git repositories because Vercel needs to clone the target repository and deploy based on the cloned repository.

Fill in the project name and click create:

Then just wait for completion:

Congratulations!

You can already see the preview screenshot of the successfully running website. You can also click "Continue to Dashboard" to go to the control panel, then click the domain URL to see that the website has been successfully deployed:

Looking back at the whole process, Vercel's deployment service is incredibly smooth. I didn't even need to provide framework information, run commands, etc.

So, if you think Vercel one-click deployment is a good idea, consider adding it to your project!

If needed, you can check out the example project from this article: https://github.com/wukaipeng-dev/ken

TickTick's Chinese name: 滴答清单

This year was my first year trying and gradually becoming a heavy user of TickTick. Initially, I just wanted to find a task management software. After comparing many other todo apps, TickTick's free version is what I personally consider the most generous - covering most features.

While the free aspect was tempting, it wasn't enough to win me over. What really convinced me was how it solved my long-standing pain points.

When working on tasks, I use the Pomodoro Technique, which means focusing for 25 minutes (1 Pomodoro), then taking a 5-minute short break, and after accumulating 4 Pomodoros, taking a long break - this cyclical rhythm for focus.

Previously, I bought a desktop timer clock. Students preparing for exams should be familiar with this - something like this:

This timer can count up or count down, perfect for a 25-minute Pomodoro countdown. I used this for over 2 years, buying one for home and another for the office.

It's convenient - physical buttons, one press to start a Pomodoro. But its advantage is also its disadvantage.

Physical limitations mean I can't carry a timer everywhere. More troublesome, at the end of the day, I don't know how many Pomodoros I spent, when I started them, or what tasks I worked on during each Pomodoro.

In TickTick, after adding a task, you can directly start a Pomodoro for that task, or associate tasks with ongoing Pomodoros, while adding notes. Opening the statistics page clearly shows the start and end of each Pomodoro.

This basically solved my major pain point. Another minor itch was its notification feature. I often forget to start Pomodoros, but TickTick shows focus progress explicitly in the computer's menu bar:

If cross-device sync is enabled, both phone and computer will sync current focus progress in real-time:

What pleasantly surprised me was that after enabling focus mode on mobile, it automatically enters immersive mode. Besides the flip clock mode, there's this pixel mode with particularly beautiful UI:

After TickTick solved my Big Trouble, I started exploring other features.

For the core function - task management, the first point is task categorization. I believe many people's categories are quite messy, adding a "Reading" category today, a "Project Management" category tomorrow. Once categories multiply, they become hard to manage.

Here I recommend a very practical categorization method: categorizing by "roles"

At work, the role is "Employee"; at school, it's "Student"; on the track, it's "Athlete". In any social relationship, everyone plays different roles.

In my personal TickTick categories, I have roles like Admin, Worker, Developer, Friend, Reader, etc.

This division method is very stable. Once my task categories were divided, there were almost no major changes. It's also flexible enough - for example, if you become a father, just add a "Father" role, and tasks like buying formula and changing diapers go under this role.

Categorizing by roles covers almost everything, but some roles need horizontal expansion. For instance, as an employee, you need to work on project a, project b, project c, etc. You can use tags to label tasks accordingly, distinguishing different task types under roles:

Through role division + tag system, you can basically establish an orderly and stable categorization system.

The second point is task processing. TickTick hides many thoughtful features, like setting the estimated number of Pomodoros for a task:

Or setting task progress percentage:

After selecting multiple tasks by holding Shift or Command/Control, you can batch process them:

On mobile, long-press the app icon to add tasks. The task box has a voice-to-text function in the lower right corner to speed up task addition:

Another feature is the calendar. I didn't have the habit of using it before, but recently discovered two points that made me realize calendars are amazing.

First discovery: you can use filter panels to view target tasks. Previously without filters, seeing all tasks piled together on the calendar gave me a headache:

Now using filters by list, tags, etc., you can easily view tasks corresponding to schedules:

Second discovery: calendars have a universal protocol - CalDAV, a protocol for calendar data sharing and synchronization, applicable to Android, iPhone, Windows, macOS, and all devices. Just need the calendar source to import and sync schedules anywhere.

In TickTick, by importing Feishu's CalDAV configuration, I can subscribe to all Feishu meetings and schedules:

There's also a habit function, for which I discovered three usage methods:

First is the most common positive habits:

Second is bad habits:

This is opposite to positive habits - only recording when these bad habits occur. Scenarios for recording bad habits include:

1. Recording low-frequency, occasional bad habits
2. When successfully cultivated as daily habits, no need for frequent recording, just record exceptions when not done

Third is data recording

Habits have built-in calendars, which can be used for data recording. For example, during weight loss, you can record daily weight:

That's my personal use of TickTick over this year. It's indeed excellent software, but undeniably has limitations. For example, the Eisenhower Matrix merely divides tasks by importance and urgency in two dimensions:

But no software in this world is perfect. When there are problems, solve them. Throughout 2024, I submitted nearly 30 bugs and feature requests to TickTick:

So, does this make me an unofficial tester + product manager? 😆

That stumped me for a moment. I usually only use simple Q&A AIs like ChatGPT, Kimi, or Doubao. For actual PDF document translation scenarios, I hadn't encountered that.

In the end, my friend had to pay for it on Xiaohongshu, spending 50 yuan 💰

Because I didn't know how to use AI, I actually missed a money-making opportunity!

Fortunately, I recently discovered an intelligent AI reading assistant called "Baoyue AI".

Testing it with a PDF document, the translation results were quite impressive:

Not only that, clicking to generate a mind map, a clearly structured mind map appears beautifully:

Moreover, Baoyue AI also automatically generated a summary:

Besides PDF documents, it also supports word, ppt, epub, mobi, txt, markdown, jpg/png, webp, wps, caj, and even video and audio files.

To help me read documents easily, Baoyue AI really went the extra mile.

Baoyue has a deep understanding of current AI large language model capabilities.

Current large models are actually not good at generating information - asking them to write articles just results in repetitive content going in circles.

But when it comes to deconstructing and understanding information, they excel.

Baoyue leverages AI's strengths, maximizing the advantages in deconstructing and understanding information.

In terms of specific product implementation, Baoyue does several things:

First, through easy-to-understand "reading scenarios" categorization, letting users quickly match their needs.

Current scenarios include academic papers, contracts, office work, self-media, teaching assistant, books, official documents, technical R&D, etc., meeting most requirements.

For example, recently while learning Coco's "CSS Technology Decryption and Practical Mastery", I used "Technical R&D > Line-by-line Code Explanation".

Line-by-line explanation of all CSS code properties, learning efficiency Max 💪

Second is rich information processing methods - it's not just a chatbot.

For example, using the "Self-media > Tech News Deep Reading" scenario, I had Baoyue analyze this article "Can Zed Beat VS Code?"

Besides the mind map mentioned earlier, there's also an introduction to help users quickly understand the article's core points, as well as rewriting features for secondary creation and more.

Third is adding "AI Search" to let users connect to more related information - external enhancement.

Fourth is having "note-taking capabilities", allowing users to record their divergent thoughts - internal enhancement.

Through this four-in-one approach, closing the entire loop from need identification, information processing, information expansion, to information digestion, perfectly solving reading scenarios.

I sincerely hope that domestic companies developing AI applications can be like Baoyue AI, truly focusing on and perfecting a vertical scenario, improving efficiency and saving time for users, creating real value.

👉 Baoyue AI official website: baoyueai.com

Most apps required opening the note software first, then creating a new note, and finally typing - too many steps and too cumbersome.

After switching to macOS, what surprised me was the built-in Notes app. Just simply move your mouse to the bottom right corner of the screen to create a Quick Note.

Amazing!

This method is called Hot Corners, which can be set in "System Settings » Desktop & Dock » Hot Corners":

The four hot corners can be freely configured:

Besides hot corners, the keyboard shortcut fn(🌐) + Q can also create a Quick Note.

There's another issue - hot corners or shortcuts will open the last edited note by default. If you want to create a new Quick Note every time, you can change the setting here:

Uncheck "Always resume last Quick Note".

Notes supports most frequently used text styles. After selecting text, you can modify styles from the Aa button in the top navigation bar:

It also supports checklists:

The table function is quite basic - just a simple table without advanced features like merging or freezing.

There are also images and links, which I won't elaborate on here.

Notes supports folder categorization by default, and also supports tag categorization. Just use the hashtag (#) followed by text in your note, and Mac will generate the corresponding tag list:

Previously when browsing web pages, I really wanted to highlight certain content and make some extended notes. I installed the Weava Highlighter plugin, but it wasn't user-friendly - Weava would pop up whenever I selected text, which was very annoying.

Surprisingly, Mac Notes natively supports this feature!

In Safari, you can select content you want to save, right-click "Add to Quick Note":

After creating the Quick Note, the selected text will be highlighted in Safari:

In the latest macOS 15 update, Notes now supports audio recording:

It also supports real-time speech-to-text, but currently it only supports English (again).

Cook's native language is English, mine is speechless 😅

Additionally, there are new highlight colors - purple, pink, orange, mint, and blue. Have to say, these colors are quite nice looking.

The most useful feature has to be the math function.

Just type formulas like (27/3)^2= or 47*96=, and Notes will automatically calculate the result:

It also supports custom variables:

Overall, Mac Notes is a decent note-taking app. While it lacks advanced features like Notion's document structure and block editing, it has native support and can meet the needs for quick note-taking and basic editing.

Excluding HIV patients, for programmers from ordinary families, interviews are an inevitable path.

Generally speaking, interviews have four difficulties:

1. Weak technical skills: Shaky foundation? Unfamiliar with algorithms?
2. Insufficient projects: No impressive projects? All failed projects?
3. Poor communication: Can't express yourself? No logic when speaking?
4. Mindset issues: Anxious about resumes being ignored? Depressed after failing first round? Stressed about resigning without a new job?

These are actually just symptoms. The real root cause is:

Lack of systematic understanding and preparation for interviews

Next, I'll share my personal interview preparation approach from several aspects.

1. Have a Clear Understanding of Yourself​

Many people have sky-high ambitions but often paper-thin fate.

Without clear self-awareness and planning, they enter the job market full of ambition, but quickly get slapped by reality.

At the start of interviews, you need to clarify your existing resources. For example, for me:

• Education: Non-prestigious bachelor's degree
• Technical skills: Average foundation, no algorithm knowledge
• Work experience: Never worked at a major tech company
• Projects: No medium or large-scale project experience

These are my disadvantages in interviews. So what are my advantages:

• Young and affordable, three years of work experience with some project experience, good value for companies
• Some writing achievements, maintaining a personal technical blog
• Open mindset, willing to learn and try new things

After comprehensively analyzing my resources, my conclusion was:

• I have some market competitiveness, but haven't reached the threshold for major tech companies yet. Can try for mid-tier companies
• Second-best outcome would be small companies or startups
• Worst case would be subsidiaries of major companies, outsourcing companies, or Huawei OD

2. Prepare Well for a Protracted Battle​

Interviews are like warfare, and it's a protracted battle.

Money​

First is the financial aspect, especially if you resign without a new job - do you have enough savings to support yourself?

Don't expect to find a satisfactory job in one or two months - that's unrealistic.

Especially in the current environment, plan for at least 6+ months of savings.

Downgrade consumption where necessary, save where you can.

Mindset​

Second is mindset. Most people start job hunting full of confidence.

But as time passes, with no responses to resumes, failed interviews, and concerned inquiries from family and friends, pressure builds.

It's easy to become anxious or even depressed. I've experienced this too.

My approach is to document it - accept your emotions and give yourself positive psychological reinforcement.

As Professor Luo Xiang once said: For uncontrollable things, we should remain optimistic; for controllable things, we should remain cautious.

Physical Strength​

Finally, physical strength. Since job hunting is a protracted battle, you need sufficient physical stamina.

Staying at home browsing job sites, mass applying without results, constant rejections - under this double drain of mental and physical energy, people easily break down.

Better to go out for walks, breathe fresh air, do some exercise.

Maintaining healthy body and mind actually helps maintain confidence and improve job search efficiency.

3. Tools for Efficiency​

During this preparation, I mainly used these tools:

Flomo​

Flomo is a "simple, efficient" fragment note-taking tool that helps you record, organize, and review your preparation process.

In Flomo, I mainly recorded my interview experiences, questions, feelings, reflections, etc.

Feishu​

Feishu supports personal version, and I mainly used "Feishu Docs" and "Feishu Minutes" for preparation.

First, Feishu Docs is really great - rich document types, block documents like Notion, plus mind maps, Base tables, canvases, etc.

I created a ✨ Frontend Job Hunting Guide with Feishu Docs, which I'll mention in the next section.

For Feishu Minutes, you can upload audio MP3s and convert them to text - mainly used for post-interview self-review.

You can click on text to jump directly to the corresponding audio position - very convenient, with features like speed control and skip silence.

If you haven't used Feishu yet 👉 Try Feishu

TickTick​

TickTick is a task management tool, mainly used for preparation planning.

TickTick also has a nice Pomodoro focus feature for tracking daily task progress and status.

If you haven't used TickTick yet 👉 Try TickTick

AI Tools​

I have to admit, AI tools are really effective now.

I originally wanted to pay for guidance from seniors, but AI tools can achieve good results for free.

• ChatGPT, Claude: Good answer quality, but requires VPN 🪜

• Doubao: ByteDance's AI Q&A product. For non-technical questions, answer quality matches ChatGPT, supports PC client. My favorite feature is keyboard shortcuts like Spotlight - directly ask AI questions.

• Tencent Yuanbao: Average answer quality, but can search WeChat articles before answering - after all, high-quality Chinese content is trapped in WeChat's closed platform.

4. Create Your Personal Job Hunting Guide​

I believe every job-seeking programmer should create a personal job hunting guide.

Why Create a Job Hunting Guide​

The reason is simple - systematize the preparation process, consolidating preparation strategies, job search records, interview questions, and processes into one knowledge base.

Beyond this interview, your job hunting guide can be used for the next one - current efforts are reinforcing your future self.

I chose Feishu Docs because it's quite powerful and mind maps are free to use.

Of course, use whatever note-taking app you're familiar with - Yuque, Notion, Obsidian, even Word or Excel work.

Software tools are just means - what matters is your thinking and documentation.

Job Hunting Guide Reference Content​

My Feishu document ✨ Frontend Job Hunting Guide is now public - feel free to reference it.

First is the "Complete Guide" section, arranged by job search timeline, covering various aspects of job hunting.

If that's too much, just check the "Lite Quick Guide".

Next is "Assignment 1: PDCJ" - for periodic review I use PDCJ, a thinking model:

• P is Plan
• D is Do
• C is Check
• J is Just (adjust)

Through periodic planning and implementation, then continuous checking and adjusting, ensure your interviews proceed correctly and efficiently without derailing.

"Assignment 2: Interview Questions" is quite important. Beyond technical knowledge, deeply explore your own projects.

Not just successful projects - explore failed ones too, showing interviewers your deep, multi-angle thinking about projects.

Then "Assignment 3: Personalized Self-Introduction" - this is showing yourself.

In interviews, self-introduction is one of the most important parts, giving interviewers an initial impression of you.

Though it depends on the interviewer - some may not like opening "self-introductions", preferring direct questions like "Tell me about your most fulfilling project".

For "Assignment 4: Company Tracking Sheet", maintain all your application statuses including company name, position, application time, interview status, etc.

There are many job search channels for programmers now. This sheet helps maintain your job search status for coordination and timely follow-up.

As this data grows, you can analyze your application efficiency - for example, referral resume pass rates are much higher than Boss Zhipin applications, allowing you to adjust your job search strategy.

5. Some Final Tips​

1. Don't Deny Yourself​

Exams fail, relationships end, interviews bomb - these are all normal.

Failure is the norm in life, success is rare.

Don't rush to deny yourself because of interview failures.

If you fail, review, reflect, summarize, and try again (PDCJ).

Here's a quote I really like:

2. Be Humble​

Schopenhauer said: Everyone takes the limits of their own vision as the limits of the world.

A frog at the bottom of a well thinks the world is limited to that well.

I've made this mistake before, thinking I was great, but the deeper I learn, the more I realize my insignificance and ignorance.

Now in interviews, I maintain a humble attitude.

When encountering my strong areas, explain eloquently, showing your abilities and thinking.

When encountering weak areas, honestly admit it and express willingness to learn and improve.

3. About Outsourcing Companies​

For outsourcing companies - avoid if possible.

Compensation-wise, salaries and bonuses are reduced after the outsourcing company takes its cut.

Work content is often maintenance, secondary development, testing, and other miscellaneous tasks.

Technically, outsourcing companies often have poor technical culture, with colleagues likely lying flat.

Self-esteem wise, outsourced employees are often second-class citizens - internal network permissions, badges, meal cards all remind you of the gap with regular employees.

So unless it's transitional (1-2 years), outsourcing companies aren't recommended.

Also, don't use outsourcing positions for interview practice.

Outsourcing interview questions, difficulty, and interviewer mindset differ from regular positions - little reference value.

Plus it requires significant time and energy - coordinating with HR, scheduling tests, interviews, commuting to on-site interviews, etc.

No need for this useless work - save energy for regular position interviews.

On Boss Zhipin, go to Settings > Privacy > Block Companies to block outsourcing companies and avoid interference.

4. Use Everything You Can​

I've heard that the entrepreneurial state is "courtesan mentality, widow treatment, women's federation pursuit".

This applies to job hunting too.

Your pursuit and goal is finding a satisfactory job, so lower your pride and use all available resources.

Contact your friend circles, classmate circles, former colleagues one by one - ask about referral opportunities.

Email experts to ask about suitable positions or interview advice.

Join tech groups, QQ groups, WeChat groups - communicate with experts and peers.

Expand your job search scope - don't limit yourself to Boss Zhipin, Lagou, Liepin, and other job sites.

Feishu​

Believe it or not, the first recommendation is Feishu. It's the most comfortable project management application I've used.

Just Feishu Docs alone, its features and experience far exceed Tencent Docs, Shimo Docs, Yuque, and others on the market.

Now Feishu also supports personal version, no more thumbs up needed.

Besides documents, Feishu also supports email, video calls, and other features. Feishu = Enterprise WeChat + Tencent Docs + QQ Mail + Tencent Meeting, truly All in One.

Feishu also has some thoughtful small features, like OCR (image to text), video recording, GIF recording, and a very practical "scrolling screenshot" - no more worries about long screenshots.

Arc​

My main browser has switched from Chrome to Arc. Arc's multiple spaces solve my long-standing pain point.

It also automatically collapses expired tabs, supports full screen, looks beautiful, and has comfortable interactions. Arc is worth having.

Youdao Translate​

For programmers reading official technical documentation, translation is a must.

I'm a long-time user of Youdao Translate, accompanying it from Youdao Dictionary to its current name Youdao Translate.

Although Youdao's translation quality isn't the best, it wins with its rich dictionary content and convenient hover translation.

Now with AI added, translation quality has improved significantly. Got myself a two-year membership.

Grammarly Desktop​

When submitting issues or writing in English, worried about grammar mistakes? Grammarly Desktop comes in handy.

Basic grammar checking is free, but polishing and AI features require payment.

iBar​

My Mac has a notch screen. When there are too many apps, they get hidden by the notch, which is annoying.

iBar can collapse the menu bar.

iShot​

To capture beautiful screenshots with rounded corners and shadows, use iShot.

The free version is sufficient. Advanced paid features like long screenshots, OCR, and screen recording can be done with Feishu's built-in tools.

Snipaste​

When I switched from Windows to Mac, I continued using Snipaste. Its pin image feature is very useful.

App Cleaner & Uninstaller​

App Cleaner & Uninstaller for thorough app uninstallation, clean and complete.

Runcat​

Watching a cat constantly running in the menu bar is also a form of entertainment.

Runcat can display current CPU usage in the menu bar. The more CPU is used, the faster the cat runs.

Activate Mac​

A boring little widget, similar to Windows' "Activate Windows", displays "Activate macOS" in the bottom right corner of the screen.

Productivity​

Personal Task Management Trio​

1. TickTick: Task planning and scheduled tasks

2. Flomo: Recording inspiration, reviewing task processes or results

3. FlowUs: Review output, reading notes

Why choose this toolkit?

1. All are domestic applications, no VPN needed, avoiding anxious moments during network fluctuations
2. Cross-platform support: mobile, PC, web, mini-programs - full coverage
3. Good to use, replacing Todoist, Notion, etc.

Revezone​

I often need to draw flowcharts and use Excalidraw for doodle-style drawings, but unfortunately it doesn't support Chinese fonts.

Revezone is like a localized version of Excalidraw, but goes further, integrating Tldraw, Notion-like note features, and providing a Mac client.

Currently open source and free, in alpha testing phase, worth trying.

Screen Recording​

1. OBS: Professional recording. Choose this for heavy-duty needs like course recording. For lightweight recording, use Feishu's GIF recording.

2. Screen Studio: Can create very smooth operation videos

3. KeyCastr: Shows pressed keys, open source and free

uTools​

Truly a new generation efficiency tool platform. Everything is a plugin - whatever small feature you need can be found here.

Sunflower Remote Desktop​

For remote computer access, I recommend Sunflower. The free version basically meets needs, though it pops up small ads.

Development​

Fork​

A free Git visualization tool, aptly named "Fork".

Warp​

A new terminal application supporting basic completion, memory features, plus AI assistance.

Zed​

I won't recommend JetBrains, VSCode, etc. - these are already well-known code editors.

I'll recommend Zed, a new generation editor based on Rust with very fast startup and input speed.

Zed is just starting out, worth watching.

Database Visualization​

The database visualization king Navicat is familiar to everyone. They finally released a free version called Navicat Premium Lite. As a lite version of Navicat Premium 17, it has all the basic features.

Officially stated: "It meets the basic database management needs of beginners and non-commercial users" (probably because there were too many pirated copies 🤣)

If you only need lightweight database visualization, I recommend SQL Pro Studio.

While not as powerful as Navicat, it's a Mac native app with good performance. Basic operations (filtering, sorting) are covered, advanced features require writing SQL.

For Postgres databases, use Postico 2, specifically for Postgres.

For Redis visualization, I recommend Another Redis Desktop Manager or Redis Insight. Each has pros and cons, can be used together.

Typora & uPic​

When writing Markdown notes, Typora has always been my first love.

Typora doesn't support images natively, so I set up an image hosting service on my server, currently using uPic for image uploads.

He3​

Developer toolbox, combining multiple development tools, plus some basic video editing, image cropping, audio conversion tools.

Here are Google Bug Hunter's reward rules:

👉 Image from https://bughunters.google.com/about/rules/google-friends/6625378258649088/google-and-alphabet-vulnerability-reward-program-vrp-rules

Here's how it started. Matan read an article exposing a Google SSRF vulnerability that mentioned this Google website:

📍 https://toolbox.googleapps.com

So he began exploring, first by checking the robots.txt file:

#apps-toolbox
User-Agent: *
Allow: /apps/main
Allow: /apps/browserinfo
Allow: /apps/checkmx
Allow: /apps/dig
Allow: /apps/har_analyzer
Allow: /apps/loganalyzer
Allow: /apps/loggershark
Allow: /apps/messageheader
Allow: /apps/recovery
Allow: /apps/useragent
Allow: /apps/other_tools
Allow: /apps/encode_decode
Allow: /apps/screen_recorder
Disallow: *

robots.txt is a file at the website's root directory that tells web crawlers which pages can be crawled and which cannot, to avoid the website being overloaded with crawler requests.

In the robots.txt file, each link corresponds to a tool webpage.

But there's one exception: /apps/recovery cannot be accessed directly.

After a simple search, he discovered it has subpages:

recovery/domain_in_use
recovery/form
recovery/ownership

These subpages can all accept multiple URL parameters, for example:

recovery/domain_in_use?visit_id=xxx&user=xxx&domain=xxx&email=xxx

If you enter this continue redirect link:

https://toolbox.googleapps.com/apps/recovery/ownership?domain=example.com&email=email@example.com&case=45500368&continue=/apps/recovery/...

This link contains the parameter domain=example.com, and note there's also a continue=/apps/recovery/... parameter.

Entering this continue redirect link gives a prompt:

Here's where the problem was discovered - the CONTINUE button's link actually comes from the continue parameter!

Matan tested it by injecting JavaScript code: .../continue=javascript:alert(document.domain)

Successfully executed ✅

This website has no CSP security policy and no protective measures, so it can fetch resources from any external source.

He continued trying to load an external malicious script that retrieves the user's IP address:

.../continue=javascript:fetch(%27https://api.ipify.org?format=json%27).then(response=%3Eresponse.text()).then(data=%3E{alert(data);%20})

Also successfully executed ✅

At this point, the XSS vulnerability was confirmed.

Let's review XSS knowledge:

XSS (Cross-Site Scripting), cross-site scripting attack, occurs when validation is not properly done, trusting user input and accepting malicious input from attackers (usually JavaScript code), causing that malicious input to execute on other users' pages. XSS is generally divided into three types:

1. Stored: Malicious input is permanently stored in the backend service. Whenever users open the website and retrieve that malicious input, the browser executes it.
2. Reflected: Malicious input is embedded in URLs or other inputs and immediately forwarded by the backend. As long as users visit the crafted URL, the browser executes it.
3. DOM-based: Attackers manipulate the user's DOM structure to execute malicious code.

Matan's example above is a typical reflected XSS.

But this XSS is so basic that even Matan himself found it hard to believe, especially since Google's technology is famously good in the industry.

However, Google habitually uses their own frameworks, and when these frameworks don't implement proper security policies, product failures are inevitable.

Zed, yet another new text/code editor.

👉 https://zed.dev

It officially went open source on January 24th this year. In less than three months, it has already reached 30k stars on GitHub.

As Zed's slogan says: "Code at the speed of thought".

From actual experience, Zed is indeed smoother than VS Code.

⬇️ Zed

⬇️ VS Code

The official website also provides typing performance comparison:

To input the letter z and display it on screen, Zed only needs 58 milliseconds, while VS Code needs 97 milliseconds.

Zed is 1.4 times faster than VS Code.

In terms of input performance, Zed wins.

The second core feature Zed promotes is multi-user collaborative programming.

To be honest, I can't think of good practical use cases for this feature yet.

So far, Zed is merely a decent text editor.

You could even say Zed hasn't made any substantial breakthroughs - it's a self-indulgent product.

Zed's advertised high performance doesn't represent a quantum leap, making it hard to impress users.

The gap between "58 milliseconds" and "97 milliseconds" isn't that significant.

Any actual developer knows that the bottleneck in programming isn't typing speed.

As for multi-user collaboration, this scenario currently seems unfriendly.

For document collaboration, domestic products like Feishu Docs and Tencent Docs are leaders that would crush Zed.

For code collaboration, Git is obviously the mainstream solution.

Zed is too young. It hasn't even implemented basic markdown preview yet.

VS Code set the standard with its open-source, plugin-based ecosystem that attracted a massive following.

While Zed also has a plugin mechanism, how many contributors can we expect?

The book "Rework" mentions that people who fail in their first startup have the same probability of failing in their second.

Zed's team previously made the Atom editor, and now Atom exists in name only.

The team failed with Atom, and their comeback with Zed still isn't enough.

Zed will likely capture a portion of users, but won't become a domain success.

How can Zed break through? The most important thing is to go with the flow.

Think about VS Code's timing: the prosperity of the internet drove open-source development, Eclipse was outdated, JetBrains was expensive, frontend specialization was emerging and urgently needed lightweight editors - these were all momentum for VS Code.

Currently, Zed's best momentum is obviously the AI direction.

But Zed clearly lacks sufficient support, only having Copilot code completion and Chat capabilities.

VS Code not only has these features but implements them more comprehensively.

The Zed team should think about what kind of editor they want to make that adapts to the current AI trend and creates new opportunities.

If they continue to be satisfied with insignificant performance improvements and vertical collaboration, continuing to compete in vertical tracks, then I wish them luck.

Hereinafter referred to as Copilot

Copilot caused a sensation in the programming community at that time.

The radical claim back then was: Copilot will replace programmers.

Three years later, calm down - Copilot hasn't replaced programmers as hoped.

Instead, it's a powerful assistant that improves efficiency. Mastering it can multiply your programming efficiency.

Copilot Pricing​

Domestic developers are relatively price-sensitive.

Copilot officially offers two subscription types: Individual and Team.

Let's skip the team version - if you have company support, you don't need to worry about this.

Individual pricing comes in two options:

1. Monthly subscription, $10 per month, ¥72.37 RMB
2. Annual subscription, $100 per year, ¥723.7 RMB

The individual version includes a 30-day free trial period, so you can try it first.

GitHub is quite friendly - it supports domestic credit card payment, including China Merchants Bank, GuangFa Bank, China Construction Bank, etc.

For unofficial channels like Taobao or uTools plugins, they might be unstable but are cheaper.

Copilot Family Suite​

Using Copilot is simple - install the corresponding plugin in VSCode/JetBrains, then log in with your GitHub account.

👉 VSCode: https://marketplace.visualstudio.com/items?itemName=GitHub.copilot 👉 JetBrains: https://plugins.jetbrains.com/plugin/17718-github-copilot

After installation, when typing code, Copilot will automatically suggest code. Press Tab to complete.

JetBrains' Copilot plugin integration provides sidebar Chat functionality:

For VSCode users, to enable sidebar Chat functionality, you need to install the additional Copilot Chat plugin:

After installation, the sidebar menu will have a new "Chat" option, with a chat interface like ChatGPT:

VSCode is indeed a bit more troublesome, but has an advantage.

New Copilot features will be launched on VSCode first, like Copilot Voice.

Install this plugin in VSCode 👇 to experience voice programming.

Although it currently only supports English, multilingual support will surely come soon.

Even with English-only support, I believe Chinese developers who've been learning English since childhood have excellent English skills.

Copilot Code Completion​

Besides Copilot's automatic triggering, we can also use Option + \ to manually trigger code completion.

Windows: Alt + \

Although the manual shortcut is rarely used, it's useful for testing Copilot during network fluctuations.

After triggering code completion, pressing Tab accepts all the code, but sometimes we only need partial completion.

You can use Command + → to accept completion code step by step:

Windows: Ctrl + →

If you're not satisfied with the current completion, you can press Option + ] or Option + [ to switch to the next or previous completion:

Windows: Alt + ] or Alt + [

For VSCode, press Command + I to invoke Copilot Editor in code:

Windows: Ctrl + I

Using Copilot Chat​

Copilot Chat is like having GPT-4 directly in your editor, allowing quick Q&A about project issues:

For JetBrains IDEs, you need to right-click on files to show references:

JetBrains IDEs are currently clumsy, requiring manual right-clicking to specify files and referencing entire files.

VSCode doesn't need explicit specification - it automatically determines whether to reference the entire file or just the selected portion:

Some Small Joys with Copilot​

Let me mention some of Copilot's nice-to-have features, like directly generating Commit Messages:

Generating Git Commits is really convenient - it detects all file changes and generates appropriate messages.

Another feature is variable renaming, though it's currently unstable, so I'll skip it for now.

Copilot CLI​

Copilot CLI is now fully available, allowing you to use Copilot in the command line.

For example, we can ask Copilot to explain what the sudo apt-get command means:

However, CLI is still quite dumb. It's better to use Warp's AI features, as mentioned in my previous article 👉

Beautiful, Functional + Free AI-Powered Terminal Tool: Recommending Warp!

We know it's powerful, but didn't expect it to be THIS powerful.

SQLite currently has over one trillion ($1e12$) active uses.

It's mainly used in:

👉 Table source: https://www.sqlite.org/mostdeployed.html

And SQLite's entire development team? Just three people:

👉 Image source: https://www.sqlite.org/crew.html

• D. Richard Hipp: Started the SQLite project on May 29, 2000 and continues as the project architect. Richard was born in, lives in, and works in Charlotte, North Carolina. He holds a Master's degree in Electrical Engineering from Georgia Tech (1984) and a Ph.D. from Duke University (1992), and is the founder of the consulting firm Hwaci.
• Dan Kennedy: An Australian currently living in Southeast Asia. He holds a degree in Computer Systems Engineering from the University of Queensland and has worked in various fields including industrial automation, computer graphics, and embedded software development. Dan has been a major contributor to SQLite since 2002.
• Joe Mistachkin (pronounced "miss-tash-kin"): A software engineer and one of the maintainers of Tcl/Tk. He is also the author of the TclBridge component and the Eagle scripting language. He has been in the software industry since 1994.

Another interesting fact is that SQLite doesn't accept any external code contributions.

In other words, SQLite is open source but not open to code contributions.

This is mentioned in SQLite's copyright statement:

👉 Image source: https://www.sqlite.org/copyright.html

Many times, we can't help but marvel at the marginal cost of software.

One piece of code can be distributed to ten people, or to one billion people.

Three developers supporting one trillion active uses.

The value created by SQLite is unparalleled. Technology changes the world.

REFERENCES​

• https://x.com/iavins/status/1774464622067679738

After several days of in-depth experience, the conclusion is that it can indeed replace my previous iTerm.

Warp has good aesthetics, looks comfortable, and satisfies the fancy requirements of frontend engineers.

There are multiple themes to choose from:

Warp directly provides command prompt functionality, without the hassle required with iTerm:

The best feature, of course, is the AI capability. You can open "Warp AI" in the upper right corner. If you forget a command, you can chat directly:

For Free users, you get 20 free queries per day, which is sufficient for personal use:

Warp also provides "Warp Drive", which allows you to save and share commands within your team:

Currently, Warp only supports Mac and Linux, but Windows support is coming soon:

If you think Warp looks good, give it a try: 👉 URL: https://app.warp.dev/referral/Q9ZVGQ

VMware Fusion can run Windows and Linux systems, with a free license for personal use.

Installation guide here 👉 https://zhuanlan.zhihu.com/p/452412091

From applying for a Fusion license to downloading images, to installation pitfalls.

This article explains everything in great detail.

Fusion has excellent support for Windows 11, but doesn't support other versions.

Here I recommend UTM. This is UTM running Windows 7:

UTM is also a free virtual system software.

Official website 👉 https://mac.getutm.app

Note: UTM can be downloaded directly from the official website

But downloading from the App Store requires payment. If you want to support UTM, you can choose to pay for the download.

UTM installation is quite simple.

First download the desired image. Images can be downloaded from MSDN 👉 https://msdn.itellyou.cn

Then download the corresponding configuration file from UTM https://mac.getutm.app/gallery/

After downloading, you'll get a file with .utm extension, then open that file.

After opening, you need to change the system image path.

In the upper right corner, change it to the corresponding downloaded system image:

After changing, restart and you're done!