https://www.ruoduan.cn/blog 若端的个人技术实验室，记录前端、工程化、Node.js、Python 和探索实践。 zh-cn z.ruoduan@gmail.com (Chad) z.ruoduan@gmail.com (Chad) Tue, 13 Jul 2021 00:00:00 GMT 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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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) 记 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/代码的整洁之道-感 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/你不知道的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/如何写好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/字符串篇 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/数组篇-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/数组篇-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/数组篇-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/数组篇-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/栈-队列篇 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/浅谈前端架构自动化-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/记-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/读书笔记-你不知道的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/链表篇-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/链表篇-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/面试-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) 记