Realtime value check in Form

Requirement

when user input the front, on background, we need to check this word whether in database. If exists, show warning message under the front.

Overview of the Solution

We’ll modify the CardForm component to perform an asynchronous check whenever the user types in the “front” input. To avoid sending a request to your database on every single keystroke, we will “debounce” the input. This means we’ll wait for the user to stop typing for a brief moment before sending the validation request.

The validation logic itself will be passed to the form as a new prop, onCheckFront. This keeps the CardForm component reusable and separates the form’s UI from the specific database logic.

If the check finds that the word already exists, we will use react-hook-form’s built-in setError function to display a warning message right under the input field.

More...

How to Do Great Work (audio discussion)

Decide What to Work On

Ever wish you just had like a shortcut, a way to really get how great work happens in any field?
Yeah, that feeling of wanting the uh the secret sauce, the core principles behind amazing achievements. That’s exactly what we’re diving into today.
We are doing a deep dive into Paul Graham’s essay, How to Do Great Work.
Think of it as trying to find the common threads. You know, the DNA shared by breakthroughs in totally different areas,
right? And our mission here isn’t just to summarize. We want to pull out the really practical stuff, the actionable bits you can use um no matter what you actually do.
Exactly. We want you to walk away with some real aha moments. So, let’s start at the beginning, choosing what to work on. Graham says this is well absolutely vital.
It’s foundational. He argues it has to connect with your natural talent, what you’re genuinely interested in, and importantly offer real scope for doing something, you know, great.
And what’s interesting is he points out that ambitious people often sell themselves short here. They underestimate the potential in things they actually love, right? It’s like you might think, “Oh, this thing I’m passionate about isn’t serious enough.” But Graham challenges that, especially for younger people.
Yeah. Because maybe you haven’t seen enough different kinds of work to know what you’re truly good at or what really clicks.
Exactly. So, how do you figure it out then when you don’t have all that experience?
Well, Graham’s advice is pretty straightforward. The way to figure out what to work on is by working. Simple as that.
So, less thinking more doing
pretty much. Get your hands dirty, start projects, even if they’re just guesses, learn from messing up. That’s part of figuring it out.
And he really emphasizes building a habit around personal projects driven by what he calls excited curiosity.
Excited curiosity. I like that. It’s not just mild interest.
No, it’s that deeper pole, that thing you can’t not explore. That’s your compass, basically.
He’s got this great question, too. What are you excessively curious about? Curious to a degree that would bore most other people.
Mhm. That’s the gold you’re looking for, that niche obsession.
And he talks about how these projects evolve, right, from maybe Lego when you’re a kid
to tackling genuinely unanswered questions in a complex field when you’re older. It’s the same drive just scaled up.
And the hope is over time, what excites you starts to line up with what’s actually important. It grows organically.
You don’t chase importance, you let it emerge from your passion.

More...

Good Writing and Right Ideas (audio discussion)

Two Sense of Good

we’re tackling a really um unexpected idea from Paul Graham.
The notion that writing which actually sounds good is somehow more likely to be right.
Right. That definitely raises an eyebrow, doesn’t it? It sounds, you know, a bit strange at first.
It does. Like how can the flow of a sentence, the rhythm affect whether the idea itself is, you know, solid?
Like they’re two completely separate things.
Exactly. Like saying, I don’t know, a shiny car must have a good engine. Yeah, but that’s what we’re going to dig into today. We’re looking at Grahams as a good writing to see if there’s uh something more to this
and figure out what practical insights you, the listener, can maybe take away for your own work, your own writing.

More...

NextJS三种页面数据传输方式 - 3

背景

在编写 NextJS 应用时,经常会出现需要在不同页面跳转,但希望能传输一定的数据,保持页面连续。在 Next.js App Router 中,有几种主要的方式可以在网页之间传输多个数据。选择哪种方式取决于你要传输的数据类型、大小以及是否需要在服务器端或客户端获取数据。

以下是几种常用的方法,我会详细解释并提供代码示例:

  1. URL 查询参数 (URL Query Parameters)
  2. 动态路由参数 (Dynamic Route Parameters)
  3. 客户端本地存储 (LocalStorage / SessionStorage)

3.客户端本地存储 (LocalStorage / SessionStorage)

LocalStorage 和 SessionStorage 是浏览器提供的 Web Storage API,允许你在用户的浏览器中存储键值对数据。LocalStorage 会一直保留数据直到被清除,而 SessionStorage 只在当前会话期间有效(浏览器关闭即丢失)。这种方法适用于需要在页面刷新或导航后仍然保留的数据,但仅限于客户端。

优点:

  • 可以存储更多数据,不像 URL 参数有长度限制。
  • 数据不会暴露在 URL 中。
  • 数据在页面刷新后仍然存在 (LocalStorage)。

缺点:

  • 只能在客户端使用,无法在 Server Component 中直接访问存储的数据来渲染初始页面。
  • 不适合存储敏感信息。
  • 用户可以清空存储。
  • 存储容量有限制(通常 5-10MB)。

适用场景:

  • 记住用户在上次访问时的选择或状态 (例如,购物车内容 - 更复杂的应用通常用后端或更高级的状态管理)。
  • 在多个步骤的表单中暂存数据。
  • 存储用户的 UI 偏好设置。
More...

NextJS三种页面数据传输方式 - 2

背景

在编写 NextJS 应用时,经常会出现需要在不同页面跳转,但希望能传输一定的数据,保持页面连续。在 Next.js App Router 中,有几种主要的方式可以在网页之间传输多个数据。选择哪种方式取决于你要传输的数据类型、大小以及是否需要在服务器端或客户端获取数据。

以下是几种常用的方法,我会详细解释并提供代码示例:

  1. URL 查询参数 (URL Query Parameters)
  2. 动态路由参数 (Dynamic Route Parameters)
  3. 客户端本地存储 (LocalStorage / SessionStorage)

2.动态路由参数 (Dynamic Route Parameters)

动态路由允许你在 URL 路径中嵌入可变的数据段,用于表示特定资源。例如,/users/[id] 路由可以捕获 /users/1 或 /users/abc 中的 id 部分作为参数。你可以创建多层级的动态路由来传递多个参数 (/products/[category]/[item])。

优点:

  • URL 结构更清晰,语义化更好,通常用于表示资源的层级关系。
  • 参数直接成为路由的一部分。
  • 可以在服务器端和客户端获取参数。

缺点:

  • 参数数量和结构需要在文件系统中预先定义好。
  • 不适合传递可选的、数量不固定的数据。

适用场景:

  • 显示特定用户信息 (/users/123)
  • 显示特定产品详情 (/products/electronics/iphone-13)
  • 博客文章详情 (/blog/my-first-post)
More...

NextJS三种页面数据传输方式 - 1

背景

在编写 NextJS 应用时,经常会出现需要在不同页面跳转,但希望能传输一定的数据,保持页面连续。在 Next.js App Router 中,有几种主要的方式可以在网页之间传输多个数据。选择哪种方式取决于你要传输的数据类型、大小以及是否需要在服务器端或客户端获取数据。

以下是几种常用的方法,我会详细解释并提供代码示例:

  1. URL 查询参数 (URL Query Parameters)
  2. 动态路由参数 (Dynamic Route Parameters)
  3. 客户端本地存储 (LocalStorage / SessionStorage)

1.URL 查询参数 (URL Query Parameters)

这是在页面之间传递少量、非敏感数据的最常见和灵活的方式。数据以键值对的形式附加在 URL 的问号后面 (?key1=value1&key2=value2)。

优点:

  • 实现简单,易于理解。
  • 可以在服务器端和客户端获取数据。
  • 用户可以直接修改 URL 参数,方便分享或书签。
  • 可以传递多个不同的数据字段。

缺点:

  • URL 长度有限制,不适合传递大量数据。
  • 数据暴露在 URL 中,不适合传递敏感信息。
  • 只能传递字符串类型的数据(数字、布尔值等需要转换)。

适用场景:

  • 搜索结果过滤 (/products?category=electronics&sort=price)
  • 分页 (/articles?page=2&limit=10)
  • 传递简单的用户偏好或状态 (/settings?theme=dark)
  • 在不同页面间传递 ID 或标识符
More...

Tailwind CSS 主题定制应用

介绍

tweakcn 是一个专门为 Shancn/ui 组件和 Tailwind CSS 设计的主题编辑器,可以帮助开发者快速定制 UI 组件,解决了使用 Shancn 组件,网站样式千篇一律的问题。

它提供了300种主题预设,并支持高级自定义,满足个性化需求。

功能

如下图,可以定制颜色、字体、间距、阴影等很多属性。

More...

产品需求文档 (PRD) - 英语单词记忆应用

1. 引言 (Introduction)

1.1 文档目的

本文档旨在详细定义“英语单词记忆应用”的功能需求、非功能需求及相关规则,作为产品设计、开发、测试和后续迭代的主要依据,确保各方对产品有统一的理解和预期。

1.2 项目概述

本项目旨在开发一款移动应用程序,帮助用户高效、便捷地学习和复习英语单词。应用将提供多种学习模式(如闪卡、拼写),支持标准化词库(如考研词汇)和用户自定义词库(含生词本功能),并通过用户账户系统实现学习进度和数据的跨设备同步。此外,应用还将提供学习统计功能,帮助用户跟踪进展、保持动力。

1.3 目标用户

需要系统性背诵特定词库的学生(如备考四六级、考研、雅思、托福等)。
希望通过积累生词、自定义词汇列表来提升英语能力的普通学习者。
需要在碎片化时间进行单词学习和复习的用户。
希望通过量化数据跟踪自己学习进展的用户。

1.4 产品目标

核心目标: 提供高效、灵活的英语单词学习与复习工具。
用户价值: 帮助用户有效记忆单词,提升词汇量,达成学习目标。
产品体验: 提供简洁、流畅、易用的用户界面和交互体验。
数据驱动: 实现用户学习数据的安全存储、跨设备同步及可视化统计分析。

More...

用 MinIO 自建对象存储服务

对象存储服务

对象存储服务适合于存储大容量非结构化的数据,例如图片、视频、日志文件、备份数据和容器/虚拟机镜像等,比较著名的服务有 AWS 的 S3 服务。
MinIO 是一款基于Go语言的高性能对象存储服务,在Github上已有19K+Star。它采用了Apache License v2.0开源协议,本文将通过 Docker 搭建 MinIO 来自建一个对象存储服务。

安装

  • 下载MinIO的Docker镜像:

    1
    docker pull minio/minio
  • 创建数据卷

    1
    2
    docker volume create --driver local --opt device=C:\10.VM\minio\data --opt type=none --opt o=bind miniodata
    docker volume create --driver local --opt device=C:\10.VM\minio\config --opt type=none --opt o=bind minioconfig
  • 启动 docker

    1
    docker run -p 9090:9000 -p 9100:9001 --name minio -v miniodata:/data -v minioconfig:/root/.minio -d minio/minio server /data --console-address ":9001"
More...

可供练习的公开数据集

背景

最近想研究一下数据可视化在 AI 领域的应用,需要有一些数据进行练习,如果自己造的话,没有实际场景。搜索了一下,网上其实有现成的公开数据集,还挺方便,推荐一下,大家如果有需要,也可以去下载使用。

Maven

Maven 这个网址会列出公开的数据集,大家可以按自己的需求,下载相关数据。我下载的是 CRM Sales Opportunities :

More...

请我喝杯咖啡吧~

支付宝
微信