跳到主要内容

Ant Design 与 Tailwind 的样式冲突问题

· 阅读需 1 分钟
1adybug
1adybug
子虚伊人

参考 Ant Design 官网：样式兼容

Ant Design 的 CSS-in-JS 默认通过 :where 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式的成本，不过 :where 语法的兼容性在低版本浏览器比较差。在某些场景下你如果需要支持旧版浏览器（或与 TailwindCSS 优先级冲突），你可以使用 @ant-design/cssinjs 取消默认的降权操作（请注意版本保持与 antd 一致）：

import { FC } from "react"

import { StyleProvider } from "@ant-design/cssinjs"

// `hashPriority` 默认为 `low`，配置为 `high` 后，
// 会移除 `:where` 选择器封装
const App: FC = () => (
    <StyleProvider hashPriority="high">
        <MyApp />
    </StyleProvider>
)

export default App

切换后，样式将从 :where 切换为类选择器：

:where(.css-bAMboO).ant-btn {
}

.css-bAMboO.ant-btn {
    color: #fff;
}

在 html 中实现网址跳转

· 阅读需 2 分钟
1adybug
1adybug
子虚伊人

在 HTML 中实现打开一个文件后直接跳转到另一个网址，你可以使用 <meta> 标签中的 http-equiv 属性来设置自动刷新，并在 content 属性中指定跳转到目标网址的时间间隔。通常，将时间间隔设置为 0 或很小的数值，可以实现几乎立即的跳转效果。

下面是一个示例代码，演示了如何创建一个 HTML 文件，当用户打开这个文件时，会立刻跳转到指定的网址（例如：https://www.example.com）：

<!doctype html>
<html>
    <head>
        <title>页面跳转</title>
        <meta http-equiv="refresh" content="0; url=https://www.example.com" />
    </head>
    <body>
        <p>如果您的浏览器没有自动跳转，请<a href="https://www.example.com">点击这里</a>。</p>
    </body>
</html>

在这个例子中，<meta> 标签的 content 属性包含两个部分：第一部分是跳转之前的等待时间（秒），在这里设置为 0；第二部分是目标网址，即用户将被重定向到的 URL。如果出于某种原因浏览器没有处理自动跳转（虽然这种情况很少见），<body> 部分的文本和链接为用户提供了一个手动跳转的选项。

这种方法适用于各种需要自动重定向用户的场景，如临时页面、已移动的内容提示或简单的 URL 转发

前端招聘要求

· 阅读需 1 分钟
1adybug
1adybug
子虚伊人
  1. 熟悉 JavaScript、HTML 和 CSS，了解近几年的新特性
  2. 熟练使用 Vue3/React，了解底层原理，React 优先
  3. 熟悉使用 TypeScript，了解泛型的使用
  4. 熟悉使用 Node.js，了解 Common Js 和 ES Module 的区别
  5. 熟悉使用 Ant Design/Tailwind 者优先
  6. 熟悉使用 Webpack/Vite 者优先
  7. 熟悉使用 Github 者优先

在 linux 中安装 nvm

· 阅读需 1 分钟
1adybug
1adybug
子虚伊人

由于国内的网络环境限制，直接安装 nvm 脚本会失败：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

此时可以使用国内的 gitee 镜像源：https://gitee.com/mirrors/nvm

git clone https://gitee.com/mirrors/nvm
cd nvm
bash install.sh

在 next.js 中使用 https

· 阅读需 1 分钟
1adybug
1adybug
子虚伊人
import { readFileSync } from "fs"
import { createServer } from "https"
import { join } from "path"

import next from "next"

const app = next({})
const handle = app.getRequestHandler()

// https 证书相关
const key = readFileSync(join("/etc/letsencrypt/live", "yourdomain.com", "privkey.pem"), "utf8")

const cert = readFileSync(join("/etc/letsencrypt/live", "yourdomain.com", "cert.pem"), "utf8")
const ca = readFileSync(join("/etc/letsencrypt/live", "yourdomain.com", "chain.pem"), "utf8")

app.prepare().then(() => {
    createServer({ key, cert, ca }, (req, res) => {
        handle(req, res)
    }).listen(3000)
})

打印长时间运行命令的输入

· 阅读需 3 分钟
1adybug
1adybug
子虚伊人

如果你想要实时打印长时间运行命令的输出，比如监控某个过程的日志输出，你应该使用 child_process 中的 spawn 来代替 exec，因为 spawn 提供了一个流式接口，可以让你实时接收数据。下面是一个使用 spawn 实时打印输出的示例：

import { spawn } from "child_process"

const child = spawn("node -v", { shell: true })

child.stdout.on("data", data => {
    console.log(`stdout: ${data}`)
})

child.stderr.on("data", data => {
    console.error(`stderr: ${data}`)
})

child.on("close", code => {
    console.log(`child process exited with code ${code}`)
})

这段代码会实时打印出命令的标准输出和标准错误输出。使用 spawn 时，你可以通过监听 data 事件来实时获取命令的输出。这对于需要实时监控输出的场景非常有用。

记得替换 your_long_running_command_here 为你想要执行的实际命令。

在命令行中执行的许多命令会使用特殊的 ANSI 转义序列来改变输出的字体颜色或样式，从而使输出更易于阅读。默认情况下，当这些命令通过 Node.js 的 spawn 函数执行时，它们可能检测到自己不是在一个交互式终端环境中运行，因此可能不会输出这些颜色或样式。

要使 spawn 打印的输出效果与直接在命令行中执行的效果一样（包括字体颜色），你可以尝试以下几种方法：

  1. 强制命令以颜色输出

    一些命令提供了参数或环境变量来强制启用颜色输出，即使输出被重定向。例如，很多命令支持 --color 选项：

    import { spawn } from "child_process"

    const child = spawn("some-command", ["--color", "always"])

    对于那些不支持此类选项的命令，可能需要查看该命令的文档，看是否有其他方法可以强制启用颜色输出。

  2. 使用 shell 选项

    通过在 spawn 中设置 shell: true 选项，可以在一个 shell 环境中执行命令。这样做可能会鼓励一些命令输出颜色，因为它们“认为”自己是在一个终端中运行：

    import { spawn } from "child_process"

    const child = spawn("some-command", ["arg1", "arg2"], { shell: true })

  3. 保持输出到进程的标准输出

    如果你只是想要在 Node.js 脚本中直接查看输出（包括颜色），而不是处理输出数据，你可以将子进程的 stdout 和 stderr 直接连接到主进程的 stdout 和 stderr：

    import { spawn } from "child_process"

    const child = spawn("some-command", ["arg1", "arg2"], { stdio: "inherit" })

    使用 stdio: "inherit" 选项，子进程的输出会直接显示在终端中，包括所有的颜色和格式化。

    示例 假设你想要使用 spawn 执行 git status 命令，并希望输出包含颜色：

    import { spawn } from "child_process"

    // 注意：这里使用shell: true来确保命令在shell中执行，可能有助于保留颜色输出
    const child = spawn("git", ["status", "--color=always"], {
        shell: true,
        stdio: "inherit",
    })

    child.on("exit", function (code, signal) {
        console.log(`子进程退出，退出码 ${code}`)
    })

    这个例子中，--color=always 告诉 git status 命令总是使用颜色输出，shell: true 确保在一个 shell 环境中执行命令，stdio: "inherit" 使得命令的输出直接显示在终端中，包括颜色。

注意

使用 shell: true 可能会增加安全风险，特别是当命令的参数来自不可信的源时。因此，只有在确实需要时才使用这个选项，并确保对输入进行适当的清理和验证。

命名规范

· 阅读需 1 分钟
1adybug
1adybug
子虚伊人
  1. 不要使用歧义或者项目外读者不熟悉的缩写
  2. 尽可能给出具有描述性的词汇
  3. 文件名建议小写短横线命名法
  4. 对于包名使用驼峰命名法，并和默认导出的名称保持一致
  5. 类和接口类型使用大驼峰命名法，其中类名通常是名词或者名词短语
  6. 组件名和类的规范一致
  7. 接口名可以是形容词或者形容词短语
  8. 方法是用小驼峰命名法，通常是动词或者动词短语
  9. 布尔值可以使用 is 或者 has
  10. 对于私有属性和方法在变量名前加 #
  11. 对于常量名，使用全大写字母，并且单词之间用下划线分割
  12. 非常量名使用小驼峰命名法
  13. 参数名同非常量名
  14. 即使是缩写的单词也当做一般单词，首字母大写
  15. 如果单词已经有常规的驼峰写法则保留
  16. 钩子函数命名统一，如全部使用完成时或者 after