https://www.ruoduan.cn/blog 若端的个人技术实验室，记录前端、工程化、Node.js、Python 和探索实践。 zh-cn z.ruoduan@gmail.com (Chad) z.ruoduan@gmail.com (Chad) Fri, 26 Jun 2026 00:00:00 GMT https://www.ruoduan.cn/blog/UpgradeBlog https://www.ruoduan.cn/blog/UpgradeBlog 从 Gatsby 到 Next.js 15，记录这次博客翻新和折腾过程。顺便聊聊用 Claude 和 Codex 写代码的真实体验，以及对 AI 编程的一些碎碎念。 Fri, 26 Jun 2026 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记AI https://www.ruoduan.cn/blog/volta https://www.ruoduan.cn/blog/volta 缘起 介绍一个工具 Volta 👉 ，用来做项目环境管理的，他和诸如此类的nvm、n、...有啥不一样呢？他是针对项目的不用在多项目之间切换的时候来回切换环境，且可以多个环境一起 Start 直接安装 Windows 参考官网 下载程序 进入项目文件目录下面 cd /projectxxx 诸如此类然后就会在 pack Fri, 14 Jun 2024 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/miniProgramWebviewRefresh https://www.ruoduan.cn/blog/miniProgramWebviewRefresh 缘起 在微信小程序IOS 某些版本中(我遇到的是 17^ )的 WebView中，回退并不会触发重新渲染； 无论是使用 pageshow 监听还是，effect 都没用； 捣鼓了各种方式 发现嵌套 在 iframe 中可以，但是这样的方式过于复杂和相当于 嵌套了三层： 微信 WebView = iframe = Pro Tue, 21 May 2024 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/React-use-WebWorker https://www.ruoduan.cn/blog/React-use-WebWorker 缘起 Web Worker 老生常谈了 —— 它允许你在主线程之外创建额外的线程来执行任务，例如处理文件，埋点轮询，如何在 React 中使用呢 ？ webpack5^ JSX wk.ts import.meta 是一个内置在 ES 模块内部的对象，import.meta.url 表示一个模块在浏览器和 Node.js Wed, 06 Mar 2024 00:00:00 GMT z.ruoduan@gmail.com (Chad) React https://www.ruoduan.cn/blog/nest-validator https://www.ruoduan.cn/blog/nest-validator 缘起 在Nest Controller 对客户端参数校验并处理同意的异常结果 Message，例如 校验参数 1 classvalidator 和 classtransformer 是一个作者，前者提供数据的校验，后者提供对复杂数据结构的类型转换 使用之前我们先定义一个 Dto 例如 dto.ts 👇🏻 使用这个 Fri, 15 Sep 2023 00:00:00 GMT z.ruoduan@gmail.com (Chad) Nodejs https://www.ruoduan.cn/blog/docker-env https://www.ruoduan.cn/blog/docker-env 记Docker 服务器时间之ENV环境变量 缘起 发现使用 当前时间 format('YYYYMMDD HH:mm:ss') 的时候本地运行时正确的，服务器Docker 镜像中调用晚八个小时，进去 exec bash date 打印时间 发现镜像中默认时区是 UST 解决方案：👇🏻 1. docker run e Wed, 02 Aug 2023 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/nest-sse https://www.ruoduan.cn/blog/nest-sse 缘起 一些涉及到 “实时更新”的场景,使用 "websocket" | “SSE”，老生常谈的问题了，这篇文章会用一个通俗、简单的例子，来解释在 Nodejs 框架 "Nest" 中使用 SSE 技术完成状态同步。、 Why SSE ？ 基于HTTP协议，不需要额外的协议 单向通信，实时性：SSE 提供了实时的数据推送 Sun, 23 Jul 2023 00:00:00 GMT z.ruoduan@gmail.com (Chad) Nodejs https://www.ruoduan.cn/blog/shell_sed_字符串替换 https://www.ruoduan.cn/blog/shell_sed_字符串替换 缘起 在构建 Build 的时候需要根据平台和环境写入配置文件, 需要写一个脚本来提供不同的模板,记于此 例如 👇🏻 模板文件: 代码 可以使用 shell 的 sed 命令就行替换 在当前文件替换修改加 i 👉🏻 sed i "s/{{base}}//g" $filename 但是在 MacOS中 不行 需使 Thu, 16 Feb 2023 00:00:00 GMT z.ruoduan@gmail.com (Chad) Shell https://www.ruoduan.cn/blog/2022-summary https://www.ruoduan.cn/blog/2022-summary 今年没有总结。 忙碌的生活中从未停下来过；思考生活该怎么过, 或许遗憾或许庆幸；但那又怎么样呢 ？ 未来可期 正当时 Mon, 23 Jan 2023 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/Flutter-web-bridge https://www.ruoduan.cn/blog/Flutter-web-bridge 缘起 公司医疗业务人手比较少【小而美】的团队 较少采用的前端技术架构是： toC：小程序 toB2C: Flutter + H5(SPA React)【build 👉🏻 Android + IOS】 Flutter web + H5 【企业微信服务商应用】 toB: 后台端、 数据大屏 Vue 边缘业务：社区 平台 Sun, 22 Jan 2023 00:00:00 GMT z.ruoduan@gmail.com (Chad) Flutter https://www.ruoduan.cn/blog/IIS-401未授权 https://www.ruoduan.cn/blog/IIS-401未授权 缘起 帮忙公司一个客户部署一个在阿里云服务器的数据大屏，操作系统是 WindowsServer2019，build 后扔到 IIS 的web 目录下出现 2个问题 1. “/”应用程序中的服务器错误 之解决方案 1. 401未授权 由于凭据无效，访问被拒绝 解决方案 1. 打开 IIS 对应的web 服务目录下 = 启 Tue, 06 Dec 2022 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/chmod-git https://www.ruoduan.cn/blog/chmod-git 缘起 chmod 修改项目文件夹的权限以后，git status 发生了大量变化的文件。原因是 Git 不仅能够管理文件的版本，而且能够管理对文件的访问权限。 Git对文件的访问权限的管理与配置选项core.filemode有关。core.filemode选项默认true，即区分文件的执行权限，校验Git的Index中 Thu, 24 Nov 2022 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/flutter_bounce https://www.ruoduan.cn/blog/flutter_bounce 缘起 flutter 没有 类似 ios 👇🏻 可以通过 evaluateJavascript 给 body 加 style hidden 来处理 这个方式尽管不太完美，等待官方给出解决方案吧 Fri, 04 Nov 2022 00:00:00 GMT z.ruoduan@gmail.com (Chad) Flutter https://www.ruoduan.cn/blog/patch-package https://www.ruoduan.cn/blog/patch-package NPM包魔改利器 patchpackage 给包打补丁 缘起 在使用 npm 包的过程中有有一些特性不支持，可以通过修改源码来完成，尽管已经可以通过 Issues | pr ; 但是毕竟开源社区审核较慢，这时候就可以通过 patchpackage 来完成 当然其他方法也有很多种，patchpackage 对比 其他方法 Thu, 20 Oct 2022 00:00:00 GMT z.ruoduan@gmail.com (Chad) Front-end https://www.ruoduan.cn/blog/游泳与禅 https://www.ruoduan.cn/blog/游泳与禅 游泳与“禅” 2022年已过去大半，作为一个西南边出来的 “旱鸭子”终于下定决心去学习游泳了，心得体会记录于此。 缘起 学习游泳 🏊🏻 这个事情在好几年前就被提上日程立下 flag 了，前几年和朋友去了几次游泳馆，基本上能做到不怕水；对于游泳技巧是一无所知。 今年的关键词：疫情、互联网裁员、加班、俄乌冲突、台海危机 Sun, 07 Aug 2022 00:00:00 GMT z.ruoduan@gmail.com (Chad) Life https://www.ruoduan.cn/blog/docker部署flask https://www.ruoduan.cn/blog/docker部署flask Docker 部署 Flask 最近在用 Monorepo = (Flask + React) + (Python + TypeScript) 写一些自己东西，记于此，温故而知新 WSGI Server Python 项目不同于其他服务例如 javax.servlet.Servlet \ Go \ PHP 等 ，Pyt Fri, 05 Aug 2022 00:00:00 GMT z.ruoduan@gmail.com (Chad) Python https://www.ruoduan.cn/blog/use-rollup-build-sdk https://www.ruoduan.cn/blog/use-rollup-build-sdk 缘起 需要提供一个JavaScript的 SDK， 当然我们使用 webpack可也以构建； ps(对于现代浏览器来说 webpack 打包体积 其实都不算事) 主要是 Rollup 配置文件全面 ESM，配置简介，对于爱干净的我来说比较喜爱 Rollup Rollup 是一个 JavaScript 模块打包器，可以将 Thu, 23 Jun 2022 00:00:00 GMT z.ruoduan@gmail.com (Chad) Nodejs https://www.ruoduan.cn/blog/verdaccioTopm2 https://www.ruoduan.cn/blog/verdaccioTopm2 缘起 没有什么特别的原因 环境准备 CentOS (Linux 系列) yum | apt | wge ... Nodejs npm Verdaccio 1. 安装Nodejs & npm 2. 安装 Verdaccio 3. 启动 Verdaccio 启动之后会看到如下👇🏻 启动成功了 ！ 配置文件：config Tue, 21 Jun 2022 00:00:00 GMT z.ruoduan@gmail.com (Chad) Nodejs https://www.ruoduan.cn/blog/jupyter-notebook-format https://www.ruoduan.cn/blog/jupyter-notebook-format 缘起 使用 jupyter notebook 想一键格式化代码和内容 安装 jupytercontribnbextensions 👇🏻 1. pip3 install jupytercontribnbextensions 2. jupyter contrib nbextensions install 3. pip3 Fri, 10 Jun 2022 00:00:00 GMT z.ruoduan@gmail.com (Chad) Python https://www.ruoduan.cn/blog/ParallelsDesktop https://www.ruoduan.cn/blog/ParallelsDesktop 缘起 今天需要在 MAC 上安装一个 Windows 系统来使用一个软件，那 mac 上肯定首选Parallels Desktop 囊中羞涩，迫于无奈 只能选择 学习版来学习了. 找了一圈最新版各大学习网站都没有了 。 找了个老版本 12版本的来使用 ps: 幸好不是M1芯片，最近对M1 芯片非常反感，在ipad，ma Wed, 18 May 2022 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/Monorepo-MicroService https://www.ruoduan.cn/blog/Monorepo-MicroService 缘起 最近经常看到 Monorepo 和 MicroService 被提及这里做一下总结 What is it Monorepo: 是指单一代码库 在版本控制系统的单个代码库里包含了多个项目之间的代码，项目之间可能是相关的，但通常在逻辑上是独立的，可以有单个或者多个不同的团队维护。 那既然有 单一代码库与之对应的就是多 Fri, 13 May 2022 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/certbot-泛域名 https://www.ruoduan.cn/blog/certbot-泛域名 缘起 今天在找文档的时候翻看之前写的 blog，发现我的 blog chrome 显示不安全； “ 我记得我的 SSL 证书 续期是不是泛域名的顺势重新申请了个泛域名的 ” 步骤如下：👇🏻 1. 申请 sudo certbot certonly d ".ruoduan.cn" d ruoduan.cn manual Sun, 13 Feb 2022 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/flutter-route实践 https://www.ruoduan.cn/blog/flutter-route实践 Flutter中的路由和React很相似通常指一个页面跳转到另一个页面；在这里面我们称之为路由栈 flutter 路由通常有三种方式：👇🏻 Navigator.push 这段代码用到了2个 API 分别是： Navigator MaterialPageRoute Navigator 第一种方法 ✅ Navigato Sat, 11 Sep 2021 00:00:00 GMT z.ruoduan@gmail.com (Chad) Flutter https://www.ruoduan.cn/blog/栈-队列篇 https://www.ruoduan.cn/blog/栈-队列篇 这是我参与8月更文挑战的第8天，活动详情查看： 本文题目全部来自 使用 Typescript 本篇文章全部收藏于专栏 本文所有代码和解题步骤将放置 DAY9 1. 有效的括号 给定一个只包括 '('，')'，'{'，'}'，'['，']' 的字符串 s ，判断字符串是否有效。 有效字符串需满足： 左括号必须用相同类型的 Sun, 08 Aug 2021 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/字符串篇 https://www.ruoduan.cn/blog/字符串篇 这是我参与8月更文挑战的第5天，活动详情查看： 本文题目全部来自 使用 Typescript 本篇文章全部收藏于专栏 本文所有代码和解题步骤将放置 DAY6 1. 字符串中的第一个唯一字符 给定一个字符串，找到它的第一个不重复的字符，并返回它的索引。如果不存在，则返回 1。 示例： s = "leetcode" 返回 Sat, 07 Aug 2021 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/链表篇-2 https://www.ruoduan.cn/blog/链表篇-2 这是我参与8月更文挑战的第7天，活动详情查看： 本文题目全部来自 使用 Typescript 本篇文章全部收藏于专栏 本文所有代码和解题步骤将放置 DAY8 1. 反转链表 给你单链表的头节点 head ，请你反转链表，并返回反转后的链表。 输入：head = [1,2,3,4,5] 输出：[5,4,3,2,1] 通用 Fri, 06 Aug 2021 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/链表篇-1 https://www.ruoduan.cn/blog/链表篇-1 这是我参与8月更文挑战的第6天，活动详情查看： 本文题目全部来自 使用 Typescript 本篇文章全部收藏于专栏 本文所有代码和解题步骤将放置 DAY7 1. 环形链表 给定一个链表，判断链表中是否有环。 如果链表中有某个节点，可以通过连续跟踪 next 指针再次到达，则链表中存在环。 为了表示给定链表中的环，我们 Thu, 05 Aug 2021 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/数组篇-4 https://www.ruoduan.cn/blog/数组篇-4 这是我参与8月更文挑战的第4天，活动详情查看： 本文题目全部来自 使用 Typescript 本篇文章全部收藏于专栏 本文所有代码和解题步骤将放置 DAY5 1. 有效的数独 请你判断一个 9x9 的数独是否有效。只需要 根据以下规则 ，验证已经填入的数字是否有效即可。 数字 19 在每一行只能出现一次。 数字 19 Wed, 04 Aug 2021 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/数组篇-3 https://www.ruoduan.cn/blog/数组篇-3 这是我参与8月更文挑战的第3天，活动详情查看： 本文题目全部来自 使用 Typescript 本篇文章全部收藏于专栏 本文所有代码和解题步骤将放置 DAY4 1. 重塑矩阵 方法1：双循环 1. 拍平数组 2. 按照行数r，列数c 重新排列 方法2：二维数组一维表示 2. 杨辉三角 方法1：2层遍历求解 杨辉三角非常有 Tue, 03 Aug 2021 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/数组篇-2 https://www.ruoduan.cn/blog/数组篇-2 本文题目全部来自 使用 Typescript 本篇文章全部收藏于专栏 本文所有代码和解题步骤将放置 DAY3 1. 两个数组的交集 II 给定两个数组，编写一个函数来计算它们的交集。 示例 1： 输入：nums1 = [1,2,2,1], nums2 = [2,2] 输出：[2,2] 示例 2: 输入：nums1 = Mon, 02 Aug 2021 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/数组篇-1 https://www.ruoduan.cn/blog/数组篇-1 本文题目全部来自 使用 Typescript 本篇文章全部收藏于专栏 本文所有代码和解题步骤将放置 Day1 1. 存在重复元素 给定一个整数数组，判断是否存在重复元素。 如果存在一值在数组中出现至少两次，函数返回 true 。如果数组中每个元素都不相同，则返回 false 。 示例 👇🏻 方法1：Set结构 利用 Sun, 01 Aug 2021 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/2020-summary https://www.ruoduan.cn/blog/2020-summary 启示 前方的路，未来世界的幸存者 本该是 2021年年初，就该写的一篇文章；硬是到年中才写下这篇文章； 目录 关于技术 关于社会 关于理财 关于生活 关于技术 近年来客户端开发技术涌喷，各种框架、语言、概念层出不穷；但是基本上可以分为一下几个方面👇🏻 前端微服务（微前端）： 微服务不是一个新的概念可以说是一个老生常 Tue, 13 Jul 2021 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/vite-react-demo https://www.ruoduan.cn/blog/vite-react-demo This Vite Vite 以 原生 ESM 方式服务源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入的代码，即只在当前屏幕上实际使用时才会被处理。 老规矩脚手架 根据提示操作 我这边选择的是 reactts 模板 完成这一步后会生成一个项目 Tue, 23 Mar 2021 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/http2 https://www.ruoduan.cn/blog/http2 记、Nginx 开启 HTTP/2 HTTP 2.0即超文本传输协议 2.0，是下一代HTTP协议。是由互联网工程任务组（IETF）的Hypertext Transfer Protocol Bis (httpbis)工作小组进行开发。是自1999年http1.1发布后的首个更新。 HTTP/2 协议是从 SPDY 演变 Sun, 28 Feb 2021 00:00:00 GMT z.ruoduan@gmail.com (Chad) web-other https://www.ruoduan.cn/blog/sitemap https://www.ruoduan.cn/blog/sitemap sitemap Sitemap 可方便网站管理员通知他们网站上有哪些可供抓取的网页。最简单的 Sitemap 形式，就是 文件，在其中列出网站中的网址以及关于每个网址的其他元（上次更新的时间、更改的频率以及相对于网站上其他网址的重要程度为何等），以便搜索引擎可以更加智能地抓取网站。 百度提交 Google提交 site Sun, 21 Feb 2021 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/读书笔记-你不知道的js（下） https://www.ruoduan.cn/blog/读书笔记-你不知道的js（下） 深入编程 回忆闭包 This this 并不指向这个函数本身，意识到这一点非常重要，因为这是最常见的误解 关于如何设置 this 有 4 条规则，上述代码中的最后 4 行展示了这 4 条规则 1. 在非严格模式下，foo() 最后会将 this 设置为全局对象。在严格模式下，这是未定义的 行为，在访问 bar 属性时会 Mon, 08 Feb 2021 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/读书笔记-你不知道的js（中） https://www.ruoduan.cn/blog/读书笔记-你不知道的js（中） 类型 JavaScript 有七种内置类型: 空值(null) 未定义(undefined) 布尔值( boolean) 数字(number) 字符串(string) 对象(object) 符号(symbol，ES6 中新增) ypeof null === "object"; // true 值 数组 类数组 有时需要 Mon, 08 Feb 2021 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/记-use-fish https://www.ruoduan.cn/blog/记-use-fish Works Out Of The Box fishshel 是一个简洁的 shell，内置功能强大 省去很多配置 安装fishshell 查看当前shell列表 将fishshell添加到列表中 替换shell 重启终端 = fishconfig 配置主题,在 浏览器里面配置保存 Mon, 18 Jan 2021 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/macOS-Keychron-K2-连接失败的解决方案 https://www.ruoduan.cn/blog/macOS-Keychron-K2-连接失败的解决方案 macOS下蓝牙键盘(Keychron K2)连接失败的解决办法 缘起 被种草入手了一个Keychron K2，使用起来感觉不错。后面又买了一个；给我的小老哥也安排了一个 但是使用的食用遇到了一点问题 1. 长时间不使用键盘进入省电模式后，输入会断断续续 不稳定 2. 点击蓝牙配对后，mac经过漫长时间的连接，最终显示 Thu, 10 Dec 2020 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/你不知道的js-上 https://www.ruoduan.cn/blog/你不知道的js-上 js 编译原理 分词/词法分析(Tokenizing/Lexing) 解析/语法分析(Parsing) 代码生成（ATS） LHS & RHS LHS 赋值 RHS 查询变量等 作用域 欺骗词法 1. eval 2. with p s: 目前这 2 个方法已被 MDN 不推荐使用，with更是在一些开发环境下是不被识别 Sat, 14 Nov 2020 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/ECMA2020(ES11) https://www.ruoduan.cn/blog/ECMA2020(ES11) ES2020(ES11)新特性： matchAll [String的方法] import() [动态导入语句] import.meta export as ns from 'module' Promise.allSettled BigInt [一种新的数据类型] GlobalThis Nullish coalescin Fri, 16 Oct 2020 00:00:00 GMT z.ruoduan@gmail.com (Chad) ECMA-JavaScript https://www.ruoduan.cn/blog/了不起的certbot申请免费SSL证书 https://www.ruoduan.cn/blog/了不起的certbot申请免费SSL证书 缘起 最近 阿里云的SSL 到期了。需要重新申请一个，调研后目前免费的就是certbot比较好用，特此记录 流程和坑 certbot是基于letsencrypt.org的一个自动化工具🔧 话不多说直接开始 start 1. 去官网选择你的操作系统和静态资源服务器 2. 安装依赖包 这个地方你可能会安装失败，我们可以把 Mon, 12 Oct 2020 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/记-react-connect中使用forwardRef问题 https://www.ruoduan.cn/blog/记-react-connect中使用forwardRef问题 记reactconnect中使用forwardRef问题。 最近在dvajs中使用onRef的过程中，需要给 绑定connect 的组件 透传 forwardRef 类似这样的形式： 给传进来的onRef绑定上自己的方法h2 直接这样写的话 是不行🙅的因为ref被Hoc 高阶组件{connect} "隔离了" Err Fri, 25 Sep 2020 00:00:00 GMT z.ruoduan@gmail.com (Chad) React https://www.ruoduan.cn/blog/web开发设计模式 https://www.ruoduan.cn/blog/web开发设计模式 What's this? 设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论，而不是现成的代码，当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题，毕竟这是前人无数经验总结成的最佳实践，而代码实现则是对加深理解的辅助。使用设 Sat, 22 Aug 2020 00:00:00 GMT z.ruoduan@gmail.com (Chad) ECMA-JavaScript https://www.ruoduan.cn/blog/Gatsby-layout https://www.ruoduan.cn/blog/Gatsby-layout 缘起 在Gatsby 中我们想加入路由过渡动画，不能像React那样，直接给路由封装高阶组件 我们可以 使用 Layout 布局组件来实现 他的原理就是在所有静态页面中套一个 你的 Layout 组件 🚀 👇 npm install save gatsbypluginlayout 创建src/Layouts/ind Mon, 15 Jun 2020 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/代码的整洁之道-感 https://www.ruoduan.cn/blog/代码的整洁之道-感 缘起 最近想这阅读一本书，一本不是code工具书，又对编程有所提升的书籍，决定读一读 收藏已久的《代码 的整洁之道》 —— Robert C.Martin 看书笔记和观后感记于此 📖 军规 我们接到一个需求 ｜一个功能，首先 reveiew 代码可行性而不是在以前的代码上堆积 然而目前大多数公司遵循他们自以为是的 “ Fri, 05 Jun 2020 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/浅谈前端架构自动化-cdn刷新预热自动化脚本 https://www.ruoduan.cn/blog/浅谈前端架构自动化-cdn刷新预热自动化脚本 缘起 在每次 master bulid 后都要去阿里云 后台手动刷新｜预热，此文章旨在优化发包繁琐步骤 流程 实现 1. pip install aliyunpythonsdkcdn ps：这个SDK 和 下面的 代码 是基于 python2 推荐2.7.16 Mac 的话 默认版本就是 python2 1. Refr Fri, 15 May 2020 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/如何写好Changelog https://www.ruoduan.cn/blog/如何写好Changelog 如何写好 Changelog 在工作中需要写很多项目文档，随着不断的迭代，内容也会不断的变化，时间一长，就很可能忘记之前在什么时候做过什么改动了，所以这个时候就需要文档的写作者保持更新 Changelog 来确保每一个协作者都在同一个步伐。 很多人认为更新日志好像是只有「写代码」才需要的一个文档，但是只要涉及到文档协同 Thu, 14 May 2020 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/vue.config https://www.ruoduan.cn/blog/vue.config 缘起 vuecli3 以来 是不会 暴露 webpack.config.js 的 需要我们手动来配置 因为近期 接手的一个项目 我需要从 package.josn 拿参数 然后 在其他 js文件拿到配置 大致步骤如下： 1. 项目根目录 创建文件 vue.config.js 2. 添加配置 =》 配置全局变量 3. 其 Mon, 27 Apr 2020 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/git-Global-config https://www.ruoduan.cn/blog/git-Global-config 缘起 每次换 IDE 编辑器 或者电脑系统 都会生成一些需要Git忽略的文件 每次去改项目的.gitignore 太麻烦 去设置一些 公共的配置放在全局 流程 git config global core.excludesfile '/.gitignore' 生成全局/.gitignore vim .gitignore Mon, 20 Apr 2020 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/React-mode https://www.ruoduan.cn/blog/React-mode 缘起 在这个 find a job 地狱难度的时间，整理一份 React 核心指南，共勉之 p s：本文章属进阶知识点 如还不了解 目录结构 [toc] 壹、Context Context 提供了一个无需为每层组件手动添加props，就能在组件树间进行数据传递的方法。 for example 典型解决方案就是Conte Tue, 07 Apr 2020 00:00:00 GMT z.ruoduan@gmail.com (Chad) React https://www.ruoduan.cn/blog/Win10无线需要执行操作无网络问题 https://www.ruoduan.cn/blog/Win10无线需要执行操作无网络问题 缘起 朋友 Windows 电脑，老是出现 Wifi 网络 断开 需要执行操作的问题，来找我，刚开始以为是 dns 和 DHCP 的问题 释放重新获取来 一下发现没有，后台发现没那么简单 原因 这是微软更新协议导致连接外网需要与服务商重新签订 ISP，不影响上网，只是可能对微软的产品或服务会弹出提醒、警示，待微软协议更 Sun, 29 Mar 2020 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/antdv4升级指北 https://www.ruoduan.cn/blog/antdv4升级指北 最近 antd 更新到 v4 到大版本了, 顺手更新了一波 记于此 此次 antdv4 更新 细则就不谈， 几个注意点： 1. IE 最低支持版本为 IE 11 2. React 最低支持版本为 React 16.9，部分组件开始使用 hooks 进行重构 3. 升级项目 React 16.12.0 以上 Start Fri, 06 Mar 2020 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/create-react-app没有src文件夹 https://www.ruoduan.cn/blog/create-react-app没有src文件夹 缘起 在使用 npx createreactapp xxapp 的时候创建项目后没有scr 文件夹,看了一下package.json也不对 然后顺势检查来一下 nodejs npm yarn 什么的都是正常的, 非常疑惑，然后去github 翻了翻 问题原因 是因为官方已经弃用了独立安装包 createreactapp Thu, 13 Feb 2020 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/shell基本指南 https://www.ruoduan.cn/blog/shell基本指南 缘起 病毒肆掠 在家来无事，想着吧shell的知识整理一下 github 求点个 star ⭐️ shell 环境 shell是一门脚本语言，Shell 是一个用 C 语言编写的程序，它是用户使用 Linux 的桥梁。Shell 既是一种命令语言，又是一种程序设计语言。 我们常见的操作系统如 mac 的 OSX 系统， Tue, 04 Feb 2020 00:00:00 GMT z.ruoduan@gmail.com (Chad) Shell https://www.ruoduan.cn/blog/webhooks自动化部署 https://www.ruoduan.cn/blog/webhooks自动化部署 缘起 最近用 Gatsby 写了一个个人 blog，link = http://new.ruoduan.cn/ 🙏🙏🙏 Star 发现 build 后体积太大，FTP 发文件 都要 10 几分钟，挑选来下自动化部署工具 🔧，本打算用jenkins 感觉有点重，而且学习成本较高。 看了一下觉得 使用 github Fri, 10 Jan 2020 00:00:00 GMT z.ruoduan@gmail.com (Chad) web-other https://www.ruoduan.cn/blog/hello https://www.ruoduan.cn/blog/hello V1 是 hexo 搭建 ，从 hexo == Gatsby 🚀🚀🚀 https://ruoduan.cn README Gatsby（Raact + GraphQL）的静态博客 GraphQL 是 Facebook 研发的 新型 中间件 数据结构，非常优秀 ～ React 不用多说了吧 ～ 具有现代框架特性和工 Thu, 09 Jan 2020 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/reactHook-Typescript从入门到实践 https://www.ruoduan.cn/blog/reactHook-Typescript从入门到实践 @本文章 Ruoduan.cn 转载请注明出处 缘起 公司中台系统要新增公司项目 —— IM即时聊天 的后台管理，由本人全程负责，前端技术选型 想采用目前比较新比较hot的技术 —— reactHook + reactRouter5 + Typescript + （mobx | useContext + useStat Tue, 03 Dec 2019 00:00:00 GMT z.ruoduan@gmail.com (Chad) React https://www.ruoduan.cn/blog/小程序云开发服务端-云函数-函数式编程-数据库取出数据突破限制 https://www.ruoduan.cn/blog/小程序云开发服务端-云函数-函数式编程-数据库取出数据突破限制 获取集合中的所有待办事项清单：因为有默认 limit 100 条的限制，因此很可能一个请求无法取出所有数据，需要分批次取： 步骤 1. 定义最大条数也就是 下面 👇 示 🌰 中的 MAXLIMIT 2. 获取数据总条数 countResult.total 3. 总条数 / MAXLIMIT 想上取整计算出 要取几次 Thu, 14 Nov 2019 00:00:00 GMT z.ruoduan@gmail.com (Chad) web-other https://www.ruoduan.cn/blog/小程序数据监听-observers-避免赋值死循环 https://www.ruoduan.cn/blog/小程序数据监听-observers-避免赋值死循环 在小程序开发过程中，我们通过 observers 监听处理 properties 组件数学列表的过程中，免不了对 当前数据进行处理 在我们对监听的数据进行赋值时候，会造成死循环，其实这个问题在大多数框架中都有这个问题。 小栗子 🌰[错误示范] 小栗子 🌰[正确示范] [ ] 原因就是 playlist.playCo Thu, 14 Nov 2019 00:00:00 GMT z.ruoduan@gmail.com (Chad) web-other https://www.ruoduan.cn/blog/Mac-osx-Capitan关闭Rootlees https://www.ruoduan.cn/blog/Mac-osx-Capitan关闭Rootlees 全新的 OS X El Capitan 10.11 系统上已经使用了 Rootlees , 可以理解为一个更高等级的系统的内核保护措施，系统默认将会锁定 /system /sbin /usr 这三个目录. 但是这个保护也是可以关闭的。关闭来 OSX 10.11 关闭 rootless 内核保护如下 1.重启电脑开后按住 Thu, 31 Oct 2019 00:00:00 GMT z.ruoduan@gmail.com (Chad) Code-Tools https://www.ruoduan.cn/blog/Python-Class-类-Life-cycle-and-magic-method https://www.ruoduan.cn/blog/Python-Class-类-Life-cycle-and-magic-method 内置属性和方法 | 方法名 | 类型 | 作用 | | | | | | init | 方法 | 类实例化时自动调用这个函数 | | del | 方法 | 对象被内存中销毁前，会被自动调用 | | str | 方法 | 类的实例打印时调用这个函数(返回)用户看到的 | | repr | 方法 | 和上面的 str 函数一 Sat, 31 Aug 2019 00:00:00 GMT z.ruoduan@gmail.com (Chad) Python https://www.ruoduan.cn/blog/ES2018-ES9 https://www.ruoduan.cn/blog/ES2018-ES9 ES2018 异步迭代 在 async/await 的某些时刻，你可能尝试在同步循环中调用异步函数。例如： 这段代码是不会正常执行的，循环本身依旧保持同步，并在在内部异步函数之前全部调用完成。 ES2018 引入异步迭代器（asynchronous iterators），这就像常规迭代器，除了next()方法返回一个P Thu, 29 Aug 2019 00:00:00 GMT z.ruoduan@gmail.com (Chad) ECMA-JavaScript https://www.ruoduan.cn/blog/localForage离线缓存技术-兼容低版本浏览器 https://www.ruoduan.cn/blog/localForage离线缓存技术-兼容低版本浏览器 localforag 离线缓存技术 ocalForage 是一个 JavaScript 库，通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据，而不仅仅是字符串。 localForage 有一个优雅降级策略，若浏览器不支持 IndexedDB 或 W Fri, 05 Jul 2019 00:00:00 GMT z.ruoduan@gmail.com (Chad) Code-Tools https://www.ruoduan.cn/blog/mobx-basic https://www.ruoduan.cn/blog/mobx-basic Mobxbasic(快速上手)莞式教程 之前写过一篇 redux 的教程 可以参考 本篇讲通过通俗易懂的方式让你快速上手 mobx 的基本使用，虽然已经可以满足大部分开发中的需求但是详细 请参考 本篇配 https://github.com/Chad97/mobxbasic 如果对想要快速入门的你有所帮助请给点个小小的 Mon, 01 Jul 2019 00:00:00 GMT z.ruoduan@gmail.com (Chad) React https://www.ruoduan.cn/blog/JavaScript-二叉树算法，二叉树创建实现，中序排序，前序排序，后序排序 https://www.ruoduan.cn/blog/JavaScript-二叉树算法，二叉树创建实现，中序排序，前序排序，后序排序 二叉树 在计算机科学中，二叉树是每个结点最多有两个子树的树结构。通常子树被称作“左子树”（left subtree）和“右子树”（right subtree）。二叉树常被用于实现二叉查找树和二叉堆。 一棵深度为 k，且有 2^k1 个节点的二叉树，称为满二叉树。这种树的特点是每一层上的节点数都是最大节点数。而在一棵二叉 Mon, 17 Jun 2019 00:00:00 GMT z.ruoduan@gmail.com (Chad) ECMA-JavaScript https://www.ruoduan.cn/blog/React-Native-打包Android-APK https://www.ruoduan.cn/blog/React-Native-打包Android-APK ReactNative 打包 Android.APK 1. 生成签名秘钥 输入一些必要信息 name password ... 1.1 直接使用 Android studio 进行签名 傻瓜式 next 不做赘述 2、设置 gradle 变量： 修改 android/gradle.properties 文件，增加如下 Mon, 17 Jun 2019 00:00:00 GMT z.ruoduan@gmail.com (Chad) React https://www.ruoduan.cn/blog/React中使用Mockjs进行接口数据模拟 https://www.ruoduan.cn/blog/React中使用Mockjs进行接口数据模拟 React 中使用 Mockjs 进行接口数据模拟 引子 每个改进都是为了解决问题。 现在我在开发中碰到了问题，我先描述下问题： 我们现在做前后端完全分离的应用，前端写前端的，后端写后端的，他们通过 API 接口连接。 前端同学心理路程："后端同学接口写的好慢，我都没法调试了。" 是不是有这个问题呢？一般我们怎么解决？ Mon, 17 Jun 2019 00:00:00 GMT z.ruoduan@gmail.com (Chad) Code-Tools https://www.ruoduan.cn/blog/你必须知道的-async-await-实现异步流程控制 https://www.ruoduan.cn/blog/你必须知道的-async-await-实现异步流程控制 async/await async 其实是 ES7 的才有的关键字，放在这里说，其实是和我们前面所说的 Promise，Generator 有很大关联的。async 的意思是"异步"，顾名思义是有关异步操作有关的关键字。 而且 async/await 是 Generator yield 的语法糖 具体参考 阮老师的 e Mon, 17 Jun 2019 00:00:00 GMT z.ruoduan@gmail.com (Chad) ECMA-JavaScript https://www.ruoduan.cn/blog/React-Redux https://www.ruoduan.cn/blog/React-Redux Redux and Reactredux 莞式教程（新手必看） 为了方便使用者使用，这里就 redux 和 reactredux 一并讲究使用了，会了 reactredux，redux 也就没问题了，只不过稍微封装了一下 教程方式 1. 我们先讲理论，先明白 render、action、 store 、connect Thu, 25 Apr 2019 00:00:00 GMT z.ruoduan@gmail.com (Chad) React https://www.ruoduan.cn/blog/React-router嵌套路由传值-render和children https://www.ruoduan.cn/blog/React-router嵌套路由传值-render和children 小栗子： 例如： 我们的路由格式如下: 我们想在 渲染 通过组件传值的方式父组件吧子组件的路由传过去从而实现渲染，传统的父子组件传值是用不了的 错误示范： 正确示范： 传值： 接收： 阐述： 编程式导航，可以在一个组件中用 this.props.history.push("/path",{name:"hellow"}) Tue, 16 Apr 2019 00:00:00 GMT z.ruoduan@gmail.com (Chad) React https://www.ruoduan.cn/blog/vue-animation https://www.ruoduan.cn/blog/vue-animation 为什么要有动画 ？ 就是要有不解释 比较简单记录一下，方便找 1. 过渡类名动画 1. html 结构 2. VM 实例： 3. 定义两组类样式： 2. 第三方类实现动画 1. 引包 2. 定义 transition 及属性 3. 钩子函数动画 1. 定义 transition 组件以及三个钩子函数： 2. 定义三个 Sat, 02 Feb 2019 00:00:00 GMT z.ruoduan@gmail.com (Chad) VUE https://www.ruoduan.cn/blog/中间件-express-session https://www.ruoduan.cn/blog/中间件-express-session expresssession session 介绍： session 是另一种记录客户状态的机制，不同的是 Cookie 保存在客户端浏览器中，而 session 保存在服务器上。 Session 的用途： session 运行在服务器端，当客户端第一次访问服务器时，可以将客户的登录信息保存。 当客户访问其他页面时，可 Tue, 29 Jan 2019 00:00:00 GMT z.ruoduan@gmail.com (Chad) Nodejs https://www.ruoduan.cn/blog/path模块的-dirname和-filename https://www.ruoduan.cn/blog/path模块的-dirname和-filename nodejs ——path 模块的dirname 和 filename 我们在使用 nodejs，可能需要对 nodemodules 开放一些目录，fs 取的是绝对路径，而我们在不同的环境下，nodemodules 可能存在于 不同的 根目录中，这个时候我们就要用到 join（）方法 来吧绝对路径进行一个转换， 来获取 Sat, 26 Jan 2019 00:00:00 GMT z.ruoduan@gmail.com (Chad) Nodejs https://www.ruoduan.cn/blog/canvas穿透pointer-events属性 https://www.ruoduan.cn/blog/canvas穿透pointer-events属性 遇到这个问题这里记录一下，解决方案也非常简单 在我们把 canvas 作为 网站的 body 背景的 时候，如果 zindex 的层级没注意设计，默认情况下，canvas 会遮挡网站上的 a 链接 和一些按钮的 遇到这个 问题 我们只需要在 canvas 背景中添加一个 css 属性：pointerevents: no Fri, 18 Jan 2019 00:00:00 GMT z.ruoduan@gmail.com (Chad) Front-end https://www.ruoduan.cn/blog/promise解决回调地狱-callback-hell https://www.ruoduan.cn/blog/promise解决回调地狱-callback-hell 具体参考 在我们需要对一个异步操作进行频繁的调用的时候，且要保证一步操作的顺序，可能会出现 回调地狱（callback）的情况 例如： 嵌套方式 promise 方式 解决这个问题让我们的代码看起来更加直观，我们可以用 promise 解决这个问题 但是这样子的代码复用太多，我们可以给他稍微封装一下 输出：a b c Sat, 12 Jan 2019 00:00:00 GMT z.ruoduan@gmail.com (Chad) ECMA-JavaScript https://www.ruoduan.cn/blog/nosql数据库-mongodb使用gongoos的CRUD https://www.ruoduan.cn/blog/nosql数据库-mongodb使用gongoos的CRUD 简介 NoSQL，指的是非关系型的数据库。NoSQL 有时也称作 Not Only SQL 的缩写，是对不同于传统的关系型数据库的数据库管理系统的统称。 NoSQL 用于超大规模数据的存储。（例如谷歌或 Facebook 每天为他们的用户收集万亿比特的数据）。这些类型的数据存储不需要固定的模式，无需多余操作就可以横向扩 Thu, 10 Jan 2019 00:00:00 GMT z.ruoduan@gmail.com (Chad) 数据库 https://www.ruoduan.cn/blog/npm-常用命令及切换源 https://www.ruoduan.cn/blog/npm-常用命令及切换源 npm node package manager——网站 npmjs.com 只要安装了 node 就安装了 npm nm 也有版本概念 一些常用命令 npm init //生成 package.json 文件 npm init y //快速生成 跳过向导 npm install 包名 //下载 npm install Wed, 26 Dec 2018 00:00:00 GMT z.ruoduan@gmail.com (Chad) Nodejs https://www.ruoduan.cn/blog/JavaScript原型，原型链，继承 https://www.ruoduan.cn/blog/JavaScript原型，原型链，继承 原型 原型的作用： 1、通过原型来添加方法，解决数据共享，节省内存空间 2、作用于继承，模拟面向对象，来做到继承，多态 构造函数 通过原型添加方法： 实例化对象： 接下来就是我们所要探讨的了，per1 和 per2 的 eat 的这个方法是不是同一个方法呢？ 我们来验证一下： js 结果是true js functio Mon, 26 Nov 2018 00:00:00 GMT z.ruoduan@gmail.com (Chad) ECMA-JavaScript https://www.ruoduan.cn/blog/面试-http https://www.ruoduan.cn/blog/面试-http 面试http 先进行了一个简单的自我介绍，主要介绍了一下自己的工作经历和一些技术栈 1. 解释一下浏览器解析 HTTP 的过程 上来就放大招，这个题可深可浅，我整理了一下答案 一次完整的 HTTP 请求过程 当我们在 web 浏览器的地址栏中输入： www.baidu.com，然后回车，到底发生了什么 过程概览 1.对 Sat, 17 Nov 2018 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记 https://www.ruoduan.cn/blog/VUE-components-data https://www.ruoduan.cn/blog/VUE-components-data 话不多说上代码测试： 定义一个全局组件，绑定 msg 我们首先看如果把 data 的值外传不在组件里面创建的效果 现在把 dataObj 注释， return {count:0} ​ 总结： 官网解释比较抽象： ​ 不难看出，这里的关键点就在于 return {} 这个地方 如果是作用域外传入对象的话，上面三个组件的 Thu, 15 Nov 2018 00:00:00 GMT z.ruoduan@gmail.com (Chad) VUE https://www.ruoduan.cn/blog/websocket https://www.ruoduan.cn/blog/websocket 岗位 web 前端 我的 csdn： 个人博客：Ruoduan.top 敲黑板 知识点: websocket： websocket 是 HTML5 的一个新协议，它允许服务端向客户端传递信息，实现浏览器和客户端双工通信。websocket 弥补了 HTTP 不支持长连接的特点，那么在学习 websocket 之前我们先 Fri, 02 Mar 2018 00:00:00 GMT z.ruoduan@gmail.com (Chad) 记