Skip to main content

· One min read

AI 绘画，顾名思义就是利用人工智能进行绘画，是人工智能生成内容（AIGC）的一个应用场景。其主要原理简单来说就是收集大量已有作品数据，通过算法对它们进行解析，最后再生成新作品，而算法也便是 AI 绘画的核心，是它得以爆火的基础。

Midjourney​

两万字干货！可能是全网最详细的Midjourney基础教程

Midjourney 是一个由 Midjourney 研究实验室开发的人工智能程序，可根据文本生成图像

mobirise​

输入想法生成静态网页

· One min read
tip

Bunis a fast all-in-one JavaScript runtime. Bundle, transpile, install and run JavaScript & TypeScript projects — all in Bun. Bun is a new JavaScript runtime with a native bundler, transpiler, task runner and npm client built-in.

· 10 min read
tip

Docusaurus 使用 Infima 作为底层样式框架，Infima 提供了灵活的布局，以及常见的 UI 组件样式，适用于以内容为中心的网站（博客、文档、首页）。

1. 路由​

  • 在 /src/pages/ 目录下所创建的任何 JavaScript/TypeScript 文件都会自动生成相应的网站路径
/src/pages/index.js → [baseUrl]
/src/pages/foo.js → [baseUrl]/foo
/src/pages/foo/test.js → [baseUrl]/foo/test
/src/pages/foo/index.js → [baseUrl]/foo/
  • 默认情况下，以 开头的任何 Markdown 或 Javascript 文件都会被忽略，也不会为其生成任何路由（参见 exclude 选项，默认情况下，以 开头的文件、测试文件 (.test.js) 和 __tests__ 目录内的文件不会被转换成页面）。
  • 如果你不小心创建映射到同一路由的多个页面，你只能访问最后创建的页面，而其他的冲突页面会被覆盖。 要解决此问题，你需要编辑或移除重复的路由。

2. 文档​

2.1 文档的url​

  • 默认为它相对于 docs 文件夹的路径，如/docs/Docusaurus笔记
  • 可以使用slug自定义文档url，slug 会被添加到文档插件的 routeBasePath 后面。routeBasePath 默认是 /docs。

2.2 目录​

tip

目录默认只包括 h2 和 h3 标题。

如果你需要更改显示的标题范围，你可以自定义最小和最大的标题级别——既可以按页配置，也可以全局设置目录标题级别。

"tableOfContents.minHeadingLevel" must be greater than or equal to 2

2.3 页面片段​

在 docs 目录下所有带有下划线（_）前缀的文件都会被当作页面「片段」，并被默认忽略。

2.4 标签​

使用tags为文档创建标签

tags:
  - 演示
  - 开始上手

// 或者
tags: [演示, 开始上手]

2.5 侧边栏​

  • sidebar_position设置相对位置
  • sidebar_label设置label
  • sidebar_class_name设置className
  • sidebar_custom_props设置customProps
  • 可以用 pagination_next 和 pagination_prev 自定义分页导航

2.6 文档id​

  • 每个文档均有唯一的 id（标识符）。 默认情况下，文档 id 是文件相对文档根目录(docs)的路径（不包括后缀）。
  • 可以在前言中指定 id 的最后一部分。注意：前面还是相对路径，比如：docs/guide/hello.md 指定id: part1，则其最终的 id 则为 guide/part1。

3. blog​

  • 博客日期可以写在标题里，或者使用前言，如：
---
date: 2021-09-13T10:00
---

---
date: 2021-09-13T18:00
---

4. markdown​

tip

markdown生成表格

vscode插件：markdown表格优化（Markdown table prettifier）安装后command+shift+p使用命令面板中的命令

markdown表格设置列宽度：使用<div style="width:100px">XXX</div>

| <div style="width:100px">属性</div> | 说明 | 类型 | <div style="width:100px">默认值</div> |
| --- | --- | --- | --- |
| fill | 填充模式 | `boolean` | `false` |

4.1 Markdown可以嵌入HTML标签​

### Details element example

<details>
  <summary>Toggle me!</summary>
  <div>
    <div>This is the detailed content</div>
    <br/>
    <details>
      <summary>
        Nested toggle! 内含惊喜……
      </summary>
      <div>
        😲😲😲😲😲
      </div>
    </details>
  </div>
</details>

在 Markdown 中，如果你想在表格的单元格中展示多行内容，你需要使用 <br> 标签来实现换行。Markdown 本身不直接支持在表格单元格内使用回车换行，但 HTML 标签可以帮助你实现这个效果。

| 列1       | 列2            | 列3       |
|-----------|----------------|-----------|
| 单元格1   | 单元格2<br>换行| 单元格3   |
| 单元格4   | 单元格5<br>换行| 单元格6   |

4.2 MDX​

  • Docusaurus 原生支持 MDX v1，可以直接在 Markdown 文档中编写 JSX，并渲染为 React 组件。

  • 可以用MDX 实时编辑器 检验你写的mdx是否正确。（MDX is not 100% compatible with CommonMark. ）

  • 要在 MDX 文件中自定义组件，你必须导出它：只有以 export 开头的段落才会被解析为组件，而不是文本。

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '2px',
      color: '#fff',
      padding: '0.2rem',
    }}>
    {children}
  </span>
);

<Highlight color="#25c2a0">Docusaurus 绿</Highlight> 和 <Highlight color="#1877F2">Facebook 蓝</Highlight> 是我最喜欢的颜色。
我可以把我的 _JSX_ 和 **Markdown** 写在一起！

  • 可以使用import导入组件

    caution

    import语句 与下面的内容 之间要空出一行

  • 除了导入组件和导出组件，第三种在 MDX 中使用组件的方式是把它注册到全局作用域，这样它将自动在每个 MDX 文件中可用，无需任何导入声明。如：在src/theme/MDXComponents中声明好underline后可以在每个文件里自由使用 <underline> 了，不需要写导入语句。

5. 内置组件​

5.1 Layout​

  • title 用于设置document.title 页面标题
  • description 用于在设置meta <meta name="description" content="description这个prop的值" data-rh="true">

5.2 Tabs​

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
  <TabItem value="apple" label="苹果" default>
    这是个苹果 🍎
  </TabItem>
  <TabItem value="orange" label="橙子">
    这是个橙子 🍊
  </TabItem>
  <TabItem value="banana" label="香蕉">
    这是个香蕉 🍌
  </TabItem>
</Tabs>

5.3 CodeBlock​

info

在非 Markdown 的文件里，你可以用 @theme/CodeBlock 组件，显示代码块

5.4 TOCInline​

每个 Markdown 文档会在右上角显示一个目录栏。 但也可以通过 TOCInline，直接在 Markdown 文档中显示一个内联目录。

import TOCInline from '@theme/TOCInline';


<TOCInline
  // 只显示 h2 和 h4 标题
  toc={toc.filter((node) => node.level === 2 || node.level === 4)}
  minHeadingLevel={2}
  // 除了默认的 h2 和 h3 标题，也把 h4 标题包含进来
  maxHeadingLevel={4}
/>

6. 代码块​

  • 支持的语言有：

    • markup: true,
    • bash: true,
    • clike: true,
    • c: true,
    • cpp: true,
    • css: true,
    • "css-extras": true,
    • javascript: true,
    • jsx: true,
    • "js-extras": true,
    • "js-templates": true,
    • coffeescript: true,
    • diff: true,
    • git: true,
    • go: true,
    • graphql: true,
    • "markup-templating": true,
    • handlebars: true,
    • json: true,
    • less: true,
    • makefile: true,
    • markdown: true,
    • objectivec: true,
    • ocaml: true,
    • python: true,
    • reason: true,
    • sass: true,
    • scss: true,
    • sql: true,
    • stylus: true,
    • tsx: true,
    • typescript: true,
    • wasm: true,
    • yaml: true,

  • 你可以用 highlight-next-line、highlight-start、highlight-end 等注释来选择要高亮的行。

  • 可以使用title设置代码块的title

  • 可以使用showLineNumbers开启行数显示

  • 交互式代码编辑器

    由React Live驱动

    • npm install --save @docusaurus/theme-live-codeblock
    • 配置docusaurus.config.js
docusaurus.config.js
module.exports = {
  // ...
  themes: ['@docusaurus/theme-live-codeblock'],
  // ...
};
  • 要使用此插件，只需要创建一个代码块，同时在语言元标签中加上 live
Live Editor
Result
Loading...

7. Admonitions 告示​

  • :::note :::
  • :::tip :::
  • :::info :::
  • :::caution :::
  • :::danger :::

8. 插件​

tip

Docusaurus 可以从本地目录加载插件，可以通过本地写个插件的方式来使用TailwindCSS

Using TailwindCSS v3 in Docusaurus in 5 steps

  • npm install -D tailwindcss postcss autoprefixer
  • npx tailwindcss init
  • 创建一个自定义插件
plugins: [
  async function myPlugin(context, options) {
    return {
      name: "docusaurus-tailwindcss",
      configurePostCss(postcssOptions) {
        // Appends TailwindCSS and AutoPrefixer.
        postcssOptions.plugins.push(require("tailwindcss"));
        postcssOptions.plugins.push(require("autoprefixer"));
        return postcssOptions;
      },
    };
  },
],
  • 修改src/css/custom.css
  • 然后使用tailwind css，发现会影响docusaurus原有样式

如何在 Docusaurus 中引入 TailwindCSS

  • npm install --save-dev postcss-nested
  • 修改src/css/custom.css，把tailwindcss的基础样式放在.tailwind中，使用 postcss-nested，这样可以把 tailwind 的样式限制在带有 tailwind class 的容器中，不会干扰 docusaurus 已有的样式
  • 在所有需要用 tailwind 写样式的部分，就在最外层容器加一个 className="tailwind" 即可生效
  • 可以不影响docusaurus原有样式使用tailwindcss了，但是控制台有warning： No serializer registered for Warning，这个warning咋解决？虽然不影响，但是有点强迫症😂

· 2 min read

  • import.meta 是一个给 JavaScript 模块暴露特定上下文的元数据属性的对象。它包含了这个模块的信息，比如说这个模块的 URL。

  • import.meta 对象是由 ECMAScript 实现的，它带有一个 null 的原型对象。这个对象可以扩展，并且它的属性都是可写、可配置和可枚举的。

  • 在客户端(如浏览器)，import.meta.url是当前文件的url。

    src/utils/px-to-rem.ts
    console.log(import.meta.url) // 'https://test.com/customPages/src/utils/px-to-rem.ts?t=1702377976704'
    export const pxToRem = (pxValue: number, baseFontSize = 75) => {
      // Convert the pixel value to rem using the base font size
      const remValue = pxValue / baseFontSize;
      return +remValue.toFixed(5);
    }

  • 在Node服务端是本地文件的路径，即是file:URL协议的字符串。

    index.js
    import express from 'express';
    import { createServer } from 'node:http';
    import { fileURLToPath } from 'node:url';
    import { dirname, join } from 'node:path';

    const app = express();
    const server = createServer(app);

    console.log(import.meta.url) // file:///Users/fqs/Documents/demos/socket-chat-example/index.js
    const __dirname = dirname(fileURLToPath(import.meta.url));

    app.get('/', (req, res) => {
      res.sendFile(join(__dirname, 'index.html'));
    });

    server.listen(3001, () => {
      console.log('server running at http://localhost:3001');
    });

· 3 min read

除了Johnny-Five之外，还有一些其他流行的JavaScript物联网平台。以下是其中一些：

  1. Cylon.js：这是另一个JavaScript框架，支持超过43种平台，用于机器人技术、物理计算和物联网。适用于构建机器人、无人机和其他物联网设备。

  2. Node-Red：这是一个可视化编程工具，用于将硬件设备、API和在线服务连接在一起。它提供基于浏览器的编辑器，非常适合在树莓派等低成本硬件上运行。

  3. JerryScript：这是一个轻量级的JavaScript引擎，专为物联网而设计，可在内存和闪存有限的设备和微控制器上运行。

  4. NodeMcu：这是一个简单的物联网平台，用于硬件原型设计，包括固件和开发板。它允许您使用类似Node.js的语法编写网络应用程序。

  5. IoTjs：三星的JavaScript物联网框架，旨在为资源受限设备提供基于Web技术的可互操作服务平台。

  6. IoT-Nodejs：使用Node.js连接到IBM Watson IoT的客户端库和示例。IBM的IoT Watson平台提供了一个基于Web的UI仪表板，用于管理设备和物联网服务。

  7. Node SerialPort：这是一个Node.js包，用于访问Linux、OSX和Windows上的串行端口，提供了一个流接口，用于控制物联网设备。

  8. Bit with Node.js / Plain JS：这个工具有助于在不同的物联网项目和设备之间重用和管理共享代码，可以创建可重用的组件集合。

  9. Zetta：这是一个基于Node.js的开源平台，用于创建跨地理分布的计算机和云上运行的物联网服务器。该平台结合了REST API、WebSockets和响应式编程，非常适合将许多设备组装成数据密集型的实时应用程序。

这些库和平台提供了广泛的功能，可用于使用JavaScript开发物联网应用程序。根据您的具体需求和正在使用的设备，您可以选择最适合您项目的平台。

· One min read

Ionic 是一个开源的UI工具包，用于使用Web技术（如HTML、CSS和JavaScript）构建高性能、高质量的移动应用程序。它支持流行的框架，如Angular、React和Vue。Ionic的目标是让开发者能够从单个代码库构建适用于所有主要应用商店和移动Web的应用程序。它还专注于性能，设计简洁、美观，并且支持原生和Web优化。

· 3 min read

JSON Schema 是一种用于验证和描述 JSON 数据结构的规范。它允许你定义 JSON 数据的结构、类型、格式和约束，从而确保数据的完整性和一致性。JSON Schema 可以用于数据验证、文档生成、代码生成等多种用途。

JSON Schema 基本结构​

一个 JSON Schema 通常包含以下几个部分：

  1. $schema：指定使用的 JSON Schema 版本。
  2. type：定义数据的类型，例如 object、array、string、number 等。
  3. properties：定义对象的属性及其类型和约束。
  4. required：指定哪些属性是必需的。
  5. items：定义数组的元素类型和约束。
  6. additionalProperties：控制对象是否允许额外的属性。

示例​

下面是一个简单的 JSON Schema 示例，用于描述一个用户对象：

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "id": {
      "type": "integer"
    },
    "name": {
      "type": "string"
    },
    "email": {
      "type": "string",
      "format": "email"
    },
    "age": {
      "type": "integer",
      "minimum": 0
    },
    "isActive": {
      "type": "boolean"
    }
  },
  "required": ["id", "name", "email"]
}

解释​

  • $schema：指定使用的 JSON Schema 版本，这里使用的是 Draft 07。
  • type：定义数据类型为 object。
  • properties：定义对象的属性：
    • id：类型为 integer。
    • name：类型为 string。
    • email：类型为 string，并且格式为 email。
    • age：类型为 integer，并且最小值为 0。
    • isActive：类型为 boolean。
  • required：指定 id、name 和 email 是必需的属性。

使用 JSON Schema 进行验证​

你可以使用各种库来根据 JSON Schema 验证 JSON 数据。例如，在 JavaScript 中，你可以使用 ajv 库：

npm install ajv

然后在代码中使用：

const Ajv = require('ajv');
const ajv = new Ajv();

const schema = {
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "id": {
      "type": "integer"
    },
    "name": {
      "type": "string"
    },
    "email": {
      "type": "string",
      "format": "email"
    },
    "age": {
      "type": "integer",
      "minimum": 0
    },
    "isActive": {
      "type": "boolean"
    }
  },
  "required": ["id", "name", "email"]
};

const data = {
  id: 1,
  name: "John Doe",
  email: "john.doe@example.com",
  age: 30,
  isActive: true
};

const validate = ajv.compile(schema);
const valid = validate(data);

if (valid) {
  console.log('Data is valid');
} else {
  console.log('Data is invalid:', validate.errors);
}

通过这种方式，你可以使用 JSON Schema 来确保 JSON 数据的结构和内容符合预期。

· 5 min read

Railway 是一个现代化的云平台，旨在简化应用程序的部署和管理。它提供了一个直观的用户界面和强大的功能，使开发者能够轻松地将应用程序从本地环境部署到云端。Railway 提供了多语言支持、内置数据库、环境变量管理、日志和监控等功能，使得开发和运维变得更加高效和便捷。以下是关于 Railway 的一些关键点和示例。

免费试用​

新用户使用github账号登录https://railway.app/，Railway会对你的github账号进行评估，评估通过则可以免费试用，试用版提供基本功能（比如可以部署代码以及部署数据库），并包含 5 美元的一次性补助。 free trial

主要特性​

  1. 简化部署：通过简单的配置和命令，快速将应用程序部署到云端。
  2. 自动化：支持自动化构建、部署和扩展，减少手动操作。
  3. 多语言支持：支持多种编程语言和框架，如 Node.js、Python、Ruby、Go 等。
  4. 集成数据库：提供内置的数据库支持，如 PostgreSQL、MySQL、Redis 等。
  5. 环境变量管理：方便地管理和配置环境变量。
  6. 日志和监控：提供实时日志和监控功能，帮助开发者快速排查问题。

安装和配置​

1. 注册和登录​

首先，访问 Railway 网站，注册一个账户并登录。

2. 安装 Railway CLI​

Railway 提供了一个命令行工具（CLI），用于管理项目和部署应用程序。可以通过 npm 安装 Railway CLI：

npm install -g railway

3. 初始化项目​

在本地项目目录中，使用以下命令初始化 Railway 项目：

railway init

部署应用程序​

以下是一个简单的示例，展示如何使用 Railway 部署一个 Node.js 应用程序。

1. 创建 Node.js 应用程序​

首先，创建一个简单的 Node.js 应用程序：

// app.js
const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Hello, Railway!');
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

2. 创建 package.json​

创建一个 package.json 文件，定义项目依赖：

{
  "name": "railway-demo",
  "version": "1.0.0",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

3. 部署到 Railway​

使用以下命令将应用程序部署到 Railway：

railway up

Railway CLI 将自动检测项目配置，构建应用程序，并将其部署到云端。

管理数据库​

Railway 提供了内置的数据库支持，可以轻松地为项目添加数据库。

1. 添加数据库​

在 Railway 控制面板中，选择项目并添加一个数据库（如 PostgreSQL）。

2. 配置环境变量​

Railway 将自动生成数据库连接字符串，并将其添加到项目的环境变量中。可以在项目的 .env 文件中使用这些环境变量：

DATABASE_URL=your_database_connection_string

3. 使用数据库​

在应用程序中，可以使用环境变量连接到数据库。例如，使用 pg 库连接到 PostgreSQL 数据库：

const { Client } = require('pg');
const client = new Client({
    connectionString: process.env.DATABASE_URL,
    ssl: {
        rejectUnauthorized: false
    }
});

client.connect();

client.query('SELECT NOW()', (err, res) => {
    if (err) throw err;
    console.log(res.rows);
    client.end();
});

日志和监控​

Railway 提供了实时日志和监控功能，可以在控制面板中查看应用程序的日志和性能指标，帮助开发者快速排查问题。