DEV Community: KazooTTT

Talking About Things I Dislike About Atlas

KazooTTT — Sat, 25 Oct 2025 14:22:00 +0000

On October 21, 2025, OpenAI released a new product: Atlas, which flooded social media timelines.

Many people have already praised it or created tutorials on how to use it. There's no denying that it has some good aspects, but this article briefly lists the points that I find uncomfortable or dislike.

1. Can only import configurations from Safari and Google Chrome

Does not support other browsers, such as Edge, Arc, Firefox...

2. The menu interaction in the top-right corner is a bit abstract

The main menu trigger is click, but the submenu trigger is hover, and clicking on a submenu item closes the entire menu. This easily leads to users making ineffective clicks, wasting time.

3. No way to batch pin browser extensions, have to activate them one by one

4. Not allowed to modify the position of devtools

This is Atlas

This is other browsers

5. Rewrote the right-click context menu

This causes some browser extensions to be unusable (such as Wucai, Raindrop's highlighting feature)

6. Sometimes when activating browser extensions, cannot open popup

For example, my 1Password can never open, and cannot paste passwords, making it unusable

7. Cannot set browser configurations or use debugging features

For example, the WebGL engine, and cannot enable mobile debugging pages

Sometimes you need to access chrome://flags like in Google Chrome and set "Choose ANGLE graphics backend" to OpenGL.

Or access chrome://inspect#devices to debug devices

But in Atlas: atlas://settings, atlas://flags, atlas://inspect#devices are all inaccessible

Overall, while it has made innovations in AI integration and interaction, this product is too closed off, even removing some common features and configurations of browsers themselves.

If you rely heavily on browser extensions to enhance your browsing experience, or if you're a developer, I don't recommend using Atlas as your main browser.

If you're not in the above situations and want to use ChatGPT for page information processing and learning (such as reading documentation, explaining the meaning of selected content), or want to try the agent mode (doing some automated operations), then you can give Atlas a try.

Recommend some VS Code extensions for frontend development

KazooTTT — Tue, 21 Oct 2025 06:01:38 +0000

I won't recommend language-related extensions since most people already have them installed.

These extensions work with vscode, cursor, trae, windsurf and other editors.

1. Development

1.1. File Nesting Updater - Visual Studio Marketplace

Automatically syncs and updates file nesting configurations maintained by the author, making the file explorer cleaner.

1.2. Turbo Console Log - Visual Studio Marketplace

Quickly generates meaningful logs (showing file line numbers, function names, variable names) and allows one-click deletion of added logs.

1.3. Pretty TypeScript Errors - Visual Studio Marketplace

Makes TypeScript errors more readable and allows direct navigation to TypeScript documentation for better error understanding.

1.4. JSON to TS - Visual Studio Marketplace

Quickly converts JSON to TypeScript types.

1.5. Error Lens - Visual Studio Marketplace

Displays errors and warnings directly inline.

1.6. Better Comments - Visual Studio Marketplace

Displays different styles for different types of comments.

1.7. Inline Parameters for VSCode

Shows parameter names as inline hints at function call sites.

2. Themes

2.1. Symbols Icons

https://marketplace.visualstudio.com/items?itemName=miguelsolorio.symbols

2.2. Vibrancy Continued - Visual Studio Marketplace

May impact performance and report editor corruption warnings. Use with caution (only for experimentation).

3. Others

3.1. WakaTime - Dashboards for developers

Tracks coding time.

4. How to download when non-VSCode editors can't access the VSCode marketplace

VSCode has disabled offline download functionality and doesn't allow non-VSCode editors to use its source. These non-VSCode editors use mirrored sources to download extensions, so some extensions may not be available for download.

You can use this Coze agent by entering the Unique Identifier to download offline files.

or you can also use the VSIX_download_url to download offline files.

Share My Incorrect Usage Cases of Zustand

KazooTTT — Wed, 18 Dec 2024 10:39:23 +0000

What is Zustand?

Zustand is a simple and easy-to-use state management library.

While using react-scan, I noticed that when I updated a state in the store in component A, it caused a re-render of component B, leading to significant performance issues.

So, I revisited the documentation and realized that my previous usage of Zustand was incorrect.

Mistake 1: Not using a single selector or shallow comparison to get state

Here’s the previous implementation and the corresponding component. useGlobalStore has more than just uploadToServerProgress and uploadStatus states.

const ComponentA = () => {
  const { uploadToServerProgress, uploadStatus } = useGlobalStore();
  return (
    <UploadStateContainer
      uploadToServerProgress={uploadToServerProgress}
      uploadStatus={uploadStatus}
    />
  );
};

When uploadToServerProgress or uploadStatus is updated, UploadStateContainer re-renders (as expected). But when other states in useGlobalStore are updated, UploadStateContainer also re-renders (which is not expected).

This is because const { uploadToServerProgress, uploadStatus } = useGlobalStore(); is shorthand for destructuring, which is equivalent to:

const globalStore = useGlobalStore();
const { uploadToServerProgress, uploadStatus } = globalStore;

In React, any update to globalStore triggers a re-render of UploadStateContainer. Therefore, we need to modify it as follows:

Solution 1: Use a single selector

const uploadToServerProgress = useGlobalStore(state => state.uploadToServerProgress);
const uploadStatus = useGlobalStore(state => state.uploadStatus);

Solution 2: Use `useShallow`

const { uploadToServerProgress, uploadStatus } = useGlobalStore(useShallow(state => ({
  uploadToServerProgress: state.uploadToServerProgress,
  uploadStatus: state.uploadStatus,
})));

Mistake 2: Not having sufficient granularity when using selectors

cameraData is obtained by subscribing to other services and contains data such as camera image and camera ID. The camera image is frequently updated data.

import React from 'react';

export interface CameraData {
  cameraBase64: string; // base64 encoded image
  cameraId: number;
}

const CurrentCamera: React.FC = () => {
  const cameraData = useGlobalStore(state => state.cameraData);

  return <CurrentCameraId cameraId={cameraData.cameraId} />;
};

Though this is using a single selector, when cameraBase64 updates, cameraData will also update, causing CurrentCameraId to re-render.

To solve this, follow the principle of minimal granularity and only fetch the required data:

import React from "react";

export interface CameraData {
  cameraBase64: string; // base64 encoded image
  cameraId: number;
}

const CurrentCamera: React.FC = () => {
  const cameraId = useGlobalStore(state => state.cameraData.cameraId);

  return <CurrentCameraId cameraId={cameraId} />;
};

Mistake 3: Using multiple stores to manage different states, instead of using slices to group states

In the official documentation Flux-inspired practice - Zustand, it is mentioned that you should use a single store, not multiple stores for different states.

Recommended patterns

Single store

Your application's global state should be located in a single Zustand store.

If you have a large application, Zustand supports splitting the store into slices.

Mistake 4: Accessing UI-unrelated state via selectors

In a component, I had a handleSave method that called an API to save data.

Previously, I accessed the needed data through a selector within component A and then called the API to save it. But this was incorrect.

const ComponentA = () => {
  const { state1, state2 } = useGlobalStore(
    useShallow(state => ({
      state1: state.state1,
      state2: state.state2,
    }))
  );

  const handleSave = () => {
    save(state1, state2);
  };

  return <SaveButton onClick={handleSave} />;
};

In component B, I changed state1, but since I accessed state1 in component A, the change would cause component A to re-render.

The correct approach is to directly access the store inside the handleSave method instead of passing the state via selectors:

const ComponentA = () => {
  const handleSave = () => {
    const { state1, state2 } = useGlobalStore.getState();
    save(state1, state2);
  };

  return <SaveButton onClick={handleSave} />;
};

References

Zustand

master branch notes/zustand learning notes

How to efficiently manage React local state? This time I chose Zustand! | Bosh's Technical Exploration Notes