小朱的专栏

TypeScript的类型断言看起来概念比较简单，但是对于刚接触TypeScript的使用者，可能对使用场景缺少认识，希望本文可以帮助你更了解类型断言。当你使用一个值，但是TypeScript不知道具体类型或者TypeScript记录的类型没有办法满足使用要求时，可以使用类型断言来明确指定为自己想要使用的类型。......

jsDelivr 失效，国内无法访问，还是自制图床靠谱

Docz是零配置的，基于Gatsby + MDX，如果你们部门没有使用文档工具，那么你可以轻松接入(KPI向)，如果已经使用了文档工具不妨了解一下Docz，做个对比。为什么要为项目组件/组件库添加文档组件库文档可以帮我们解决以下问题：不知道项目中有哪些公共组件(比如组员写的组件，但是你并不知道)，导致重复开发。复用组件时需要再去翻代码，看看怎么使用，传什么参数。以前写的代码，需要修改或者重构时，无从下手有了组件库文档，基本就可以解决上面的问题，同时也提升了代码复用率和开发效率。...

继承与组合都是面向对象中代码复用的方式，了解各自有什么特点，可以让我们写出更简洁的代码，设计出更好的代码架构。

首先找到录屏存储地址：设置>录制>保存地址一般会存储到zhumuintl(瞩目国际版)或Zoom文件夹中。如果录制过程是被中断的，可能看到的文件就是meetingrec文件，如果想转换成可以播放的文件，需要修改后缀为zoom。双击zoom文件即可打开转换窗口，可能还需要点击一下确认转换：...

本篇主要分享什么内容：常用的文档/静态站点生成工具有哪些每个工具有什么特点工具适应场景

本篇是SOLID原则的最后一篇，建议先阅读前四部分：JavaScript 中的 SOLID 原则（一）：“S”代表什么JavaScript 中的 SOLID 原则（二）：“O”代表什么JavaScript 中的 SOLID 原则（三）：“L”代表什么JavaScript 中的 SOLID 原则（四）：“I”代表什么这是SOLID的第五篇文章(原文一共五篇)，作者是serhiirubets，感谢持续关注。依赖倒置原则D - 依赖倒置原则 这个原则是指：高级模块不应该依赖低级模块；两者都应该依赖于抽象，抽象应该

本篇是SOLID原则的第四部分，建议先阅读前三部分：JavaScript 中的 SOLID 原则（一）：“S”代表什么JavaScript 中的 SOLID 原则（二）：“O”代表什么JavaScript 中的 SOLID 原则（三）：“L”代表什么这是SOLID的第四篇文章(原文一共五篇)，作者是serhiirubets，欢迎持续关注。接口隔离原则（Interface Segregation Principle）I - 接口隔离原则。这个原则是指：客户端不应该依赖他们不使用的接口(接口应该是精简的，拥有尽

本篇是SOLID原则的第三部分，建议先阅读前两部分：JavaScript 中的 SOLID 原则：“S”代表什么JavaScript 中的 SOLID 原则：“O”代表什么这是SOLID的第三篇文章(原文一共五篇)，作者是serhiirubets，欢迎持续关注。里氏替换原则（Liskov Substitution Principle）L - 里氏替换原则。这个原则是指：如果S是T的子类型，那么程序中的T对象可以被S对象替换，不需要改变程序中任何所需属性。从定义上可能没有办法清晰的理解其含义，我

本文主要渐进的讲解了SOLID原则：不使用SOLID是怎么编写代码的，存在什么问题？应该使用SOLID中的哪个原则？使用SOLID我们应该如何对代码进行修改？相信对比和沉浸式的示例会让你更容易理解SOLID原则，以及如何应用到代码实践中

你可能已经了解过一些设计原则或者设计模式，本文主要渐进的讲解了SOLID原则：不使用SOLID是怎么编写代码的，存在什么问题？应该使用SOLID中的哪个原则？使用SOLID我们应该如何对代码进行修改？相信对比和沉浸式的示例会让你更容易理解SOLID原则，以及如何应用到代码实践中。这是SOLID的第一篇翻译文章(原文一共五篇)，来自hackernoon，作者是serhiirubets，欢迎持续关注。在本文中，我们将讨论什么是 SOLID 原则，为什么我们应该使用他们和如何在JavaScript中使用他们。什么

Web Serve for Chrome通过浏览器直接起一个静态服务，文件夹就可以在浏览器中通过http://127.0.0.1:8887进行访问，默认是首页是index.html。高级用法：可以调整对应的端口号，设置CORS头，支持HTTPS等。运行结果：OneTabOneTab可以把当前打开的所有标签以链接的方式收纳到一个标签中，可以在下班关电脑之前把已打开的标签做收纳，下次打开电脑再进行恢复，也可以管理自己没来得及看的文章。FE Helper强烈推荐 一款强大的插件系统，基本可以满足

本地node.js服务启用HTTPS访问，本地服务怎么启用HTTPS，本地怎么快速启用HTTPS

为什么介绍这些效率工具：这些我经常使用的工具，对我的日常工作和生活有很大的帮助。效率工具的看法：工具本身出现就是为了解决某些问题，方便我们开发和工作，提高生产力。但是每个人的使用习惯和审美不同，对效率工具的选择和使用也是一样的。工具不是“银弹”，一个好的书写软件并不会让你写出优秀文章，一个优秀的作图软件也不会让你画出令人眼前一亮的图形，正确合理的使用工具。最近打算录个视频来对介绍一下这些工具，主要是可以看到具体操作界面，了解这些软件的隐藏比较深的功能，欢迎持续关注。笔记工具Typora编写MarkDown最

相关链接：我从Typoro中学到的Clipboard妙用我从Typoro中学到的Clipboard妙用(二) 混沌前端 分享技术、工作和生活。 9篇原创内容

起因工作中的业务线比较复杂，每个业务线对应一个项目，经常会遇到多个需求并行开发或者在多个项目中排查问题的情况，需要频繁在不同项目之间切换。日常接触到各种新工具自己也会上手试一下，有时候研究到一半可能会被其他事情中断导致忘记。所以编写了一个简单的小工具满足自己的需求：可以记录工作区目录，增加和删除可以直接通过VS Code打开工作区进行编辑小工具介绍这个小工具使用了一年多，在大部分场景下满足我自己的需求，也提高了开发效率。小工具使用nodejs编写，使用了inquire.js来做交互提示，通

上篇介绍了一下我从Typora中学到的Clipboard妙用：我们从网页复制文字时，剪切板中会塞入两种格式的数据：纯文本和富文本。当我们粘贴到其他编辑器时，文本编辑器会使用纯文本数据，富文本编辑器会使用富文本数据(Typora中会把对应的文本提取成MarkDown格式)。具体内容和简单的代码实现可以查看：我从Typora中学到的Clipboard妙用.mdTypora中图片处理方式经常使用Typora的人应该都知道Typora对于处理图片也有着优秀的使用体验，当插入图片时，你可以指定图片存储方式：Typor

!important 欢迎点赞收藏，会不定期更新1. Puppeteer点击包含指定文字内容的元素async function clickWithText(selector,text){ await page.$$eval(selector, (options=[],text) => { options.forEach(item=>{ item.textContent.includes(text) && item.click() }) },text)}.

在使用Jest为封装的业务组件库添加单元测试时，遇到Super expression must either be null or a function错误，但是组件的引入和渲染又没有问题，网上查了一下主要是由下面几个问题引起的：拼写错误 比如写React类组件时，Component大小写或拼写错误import/export使用问题 示例当使用export default A导出模块时，使用 import * as AModule 就会遇到这种问题，A会出现在AModule.default当出现循

在使用koa-static作为静态服务器中间件时，看官网文档支持gzip压缩，所以想试试效果。但是gzip是类Unix系统的内置命令，尝试使用了Windows上常用的压缩软件，都只提供了把文件压缩成.tar.gz格式的功能，最后发现了GunWin提供的gzip压缩工具关于GunWin: Gun Win项目为Win32提供了GNU Linux平台的一些工具包，可以在Window平台使用Linux的部分工具, 具体介绍和工具列表具体使用方法1.下载打开下载地址，这里我们可以选择使用第一个(安装

npm大家肯定都使用过，可能会有一些不经常使用的命令，npm ci和npm install都可以用来安装依赖，他们之间有什么区别呢？官方文档npm ci 和 npm install类似，不同之处在于npm ci旨在用于自动化环境，例如测试平台、持续集成和部署，或者您希望确保对依赖项进行全新安装。npm ci 在以下情况下会明显更快：有一个 package-lock.json 或 npm-shrinkwrap.json 文件node_modules 不存在或为空目录npm install 和 n

image-20210906111439548使用过Antd的小伙伴应该很熟悉，Antd组件文档有在CodeSandBox和CodePen中打开直接预览和编辑的功能，这么炫酷且实用的功能具体是怎么实现的？codesandbox.io[1] 是一个前端代码的在线编辑器，支持各种不同的框架，可以随时预览代码的运行结果。创建沙盒“在CodeSandBox中打开”是CodeSandbox提供的功能，让我们可以通过直接调用API来创建CodeSandbox沙盒。CodeSandbox提供了几种导入到沙盒中预览的方式：

先看一下file-uploader-cli可以实现的效果命令行直接上传文件：在Typora中使用: 图片拖拽到Typora，或者复制图片到Typora中粘贴，自动替换图片为网络地址安装npm install -g file-uploader-cli 我们以GitHub为例，看看怎么使用吧。需要使用Public权限的仓库或者GitHub Pages仓库，否则公网会因为没有权限而无法进行访问1.创建需要导入的json配置{ "token": "", "user": "",

业务组件库必要性项目经过长期维护之后往往会沉淀出很多公共组件，当一个组件编写完成之后，其他维护者想要使用这个组件，了解这个组件是做什么的，应该怎么用，必须再去翻看源码，或者没有压根儿注意到这个组件导致重发开发。这个时候一个完善的组件库就很有必要了，可以保障开发者之间进行良好的协作。组件库可以帮我们解决以下问题：业务组件跨项目复用，提升开发效率统一代码实现，统一代码质量保障组件库文档提供清晰的使用方式和直观的展示效果组件库的组成业务组件构成业务组件库是基于基础组件库进行编写的，基础组件库是使用antd。我们会

截图来自vue的PR:1.commit-message规范必要性统一格式的提交记录，更清晰和易读可以通过提交记录来了解本次提交的目的，更好的CR和重构更容易了解变更，定位和发现问题每个提交描述都是经过思考的，改善提交质量直接生成ChangeLog2.规范选型常见的commit message规范有：atom，eslint和Angular等,其中Angular规范更为通用。3.Angular的Commit Message规范简介每条提交记录包含三个部分：header,body和footer<header

给大家推荐几个很方便的绘制流程图，架构图的神器。画图画的好，加薪少不了！绘图是一项软技能，好的图形可以表达比文字更丰富的内容，更清楚的展示逻辑。1. ProcessOn 在线绘制首先放一个注册链接：点击注册 ，推荐使用这个地址注册，可以获得会员。可以在7天之内创建多个文件备用，7天之后也会保留。特点类型丰富：流程图，思维导图，思维笔记，原型图，UML类图等,。模板市场：每个账号有9个免费文件额度。有模板市场，非常丰富精美的模板，免费的模板也很多2. 金山文档 在线绘制特点类

整理了一下《代码整洁之道--程序员的职业素养》中一些受益匪浅的观点。第一章 专业主义清楚你想要什么承担责任了解你的领域失误率永远不能等于0，但你有责任让它无限接近于零。每个专业软件开发人员必须了解的技能：设计模式。必须能够描述GOF书中的全部24种模式。设计原则 必须了解SOLID原则，深刻理解组件设计原则结构图  流程图  决策表  状态迁移图表第二章 说“不”大多数时间我们都希望能够说“是”。健康的团队都会努力寻找给他人肯定的答复。运作良好的团队经理和开发人员，会相互协商，

✊ Give Me the Font, Back to You the Animation一、简介笔顺后台的目标是只要对于给定的字体文件（WOFF, OTF, TTF ）以及需要的字形（汉字，字母 or 其他各国的语言），就能产出与之对应的笔顺动画数据。是对开源项目Make me han zi[1]的实践。二、效果演示展示效果大力硬件端展示效果后台数据资源后台产出笔顺动画的 json 文件，并通过 CDN 资源分发。确定字体的情况下，一个字形对应唯一一个数据资源（字形通过encodeURI，并去除"%"进行

Typora图片自动上传工具file-uploader-cli, 支持:github 上传到GitHub Pages或者公共仓库搭配jsDelivr使用(不推荐)ali-oss 阿里云对象存储qiniu 七牛云对象存储cos 腾讯云对象存储jdcloud 京东云对象存储ftp FTP服务器安装npm install -g file-uploader-cli配置fuc -t github config.jsonconfig.json中配置项(以github为例)有：通用参数(非

/Users/bj/gitlab/Application/articleFetch/wabt/bin/wasm-decompile test.wasm -o test.o

命令行动图，命令行GIF图代码片段生成带高亮效果的图片我们可以使用carbon 但是如果想制作动图一般是录屏来转换成GIF图，其实还有另一种方式，我们可以使用asciinema + svg-term生成SVG图片优点矢量可以手动修改速度和文案文字可以复制具体效果：https://cdn.jsdelivr.net/gh/Iamxiaozhu/file-uploader-cli/test.svg...

https://www.howtoforge.com/tutorial/how-to-setup-an-sftp-server-on-centos/本教程主要是关于如何在CentOS上设置和使用SFTP服务器。使用普通的FTP从服务器到客户端或从客户端到服务器传输，很容易被匿名入侵者入侵（如果不使用TLS），因为它的端口对任何人都是开放的。可以使用SFTP作为更安全的替代方案。SFTP使用SSH文件传输协议或安全文件传输协议来提供安全的连接。教程将展示如何为客户端提供对SFTP服务器的访问权限，但.

对于静态服务的文件一般可以通过a标签+download属性来下载, 但是如果文件是图片，pdf,html等浏览器支持解析的，而且是当前文件是跨域的，那么浏览器就会在新标签中打开。<a download="" href='***'>下载</a>文件不跨域 => 下载文件跨域 + 浏览器不支持解析 => 下载文件跨域 + 浏览器可以解析 => 新标签中打开如果是后端返回的二进制流，可以通过ObjectURL进行下载(同时可以解决跨域img,pdf

if (navigator.clipboard) { navigator.clipboard.writeText('test text'); showTips('复制成功!', 30, 2);} else { const eventCopyer = event => { event.preventDefault(); event.clipboardData.setData("text/plain", 'test text'); }

docker镜像并不是一个模拟一个完整的Linux系统，无法使用vi进行编辑文件。最近遇到一个问题，在自己的云服务器上使用nextcloud的docker镜像搭了个网盘服务，需要修改的nextcloud配置文件，但是又没有挂载配置文件所在目录。进入docker中发现并没有安装vi, 也没有yum和apt-get安装工具，没有办法直接编辑。本来想通过增加挂载目录来解决：使用当前容器构建新的镜像，重新启动容器并挂载配置目录。但是想了想应该可以通过其他方式实现编辑文件的操作。进入docker容器dock

acme.sh可以通过acme协议生成Let’s Encrypt颁发的SSL证书。Let’s Encrypt 提供了单域名证书，泛域名证书和多域名证书0.GitHub地址1.在线安装curl https://get.acme.sh | shORwget -O - https://get.acme.sh | sh创建acme.sh别名alias acme.sh=~/.acme.sh/acme.sh安装过程中会添加cronjob，每天自动检测所有证书是否需要更新。查看定时任务：c

1.https://www.mongodb.com/try/download/community 下载mongodb数据库压缩包2.解压并重命名为mongodb. 将mongodb文件夹移动到/usr/local/目录下3.在/etc/paths文件中添加/usr/local/mongodb/bin

fs.watch('/Users/bj/gitlab/learn/zuigeng', (event, fileName)=>{ if(event === "rename") { if (fs.existsSync(`/Users/bj/gitlab/learn/zuigeng/${fileName}`)) { fs.rename(`/Users/bj/gitlab/learn/zuigeng/${fileName}`,'/Users/bj/gitlab/learn/zuige

0.VS Code 中安装插件，直接在插件应用商店中搜索remote，使用Remote- SSH即可，安装完成之后左侧会多出一个“远程资源管理器”的电脑小图标。点击电脑小图标1.生成本地ssh key ：使用ssh-keygen生成秘钥对，在git bash或Terminal中打开~/.ssh目录 默认会有私钥id_rsa 和公钥id_rsa.pub文件2.远程登录Linux服务器,你本地的id_rsa.pub内容复制到服务器~/.ssh目录authorized_keys文件中,并修改读写权限chmo

经常有人问怎么控制车辆车头方向随着行进方向改变在高德地图中展示轨迹有三种方法，一种方法是AMapUI的PathSimplifier创建巡航器来展示轨迹：高德地图轨迹展示示例第二种方法是使用moveAlong,moveAlong可以让marker按照给定的经纬度数组以指定的速度移动高德地图轨迹回放示例第三中方法是使用moveTo，moveTo可以让marker以给定的速度从一个经纬度移动到另一个经纬度并自动调整车头方向(车头方向与起点到终点的直线平行)。下面的例子是对官方demo进行了简单修改，通