闻心阁

一蓑烟雨看苍生,半壶浊酒笑红尘

开发一个基于uni-app的imgcook DSL

2021-03-07 约 2 分钟读完 搬砖秘籍

最近看到了阿里的前端智能化的实践:imgcook 由设计稿一键智能生成代码的大厨,由设计稿直接生成前端代码,试用了一下,比zeplin和蓝湖做的更进一步,可以直接集成到项目开发的过程中。但发现一个问题,imgcook官方支持的DSL并不多,我们团队是使用Uni-app做跨端开发的,希望能将设计稿直接生成符合uni-app的代码,但官方没有,找了一个其他开发者贡献的,也没有找到合适的,于是自己动手写(组装)了一个。

继续阅读

Shell中的正则脚本

2021-03-07 约 1 分钟读完 搬砖秘籍
在之前的文章《使用Husky管理项目的Git Hooks(以配置Uni-app的ESLint和Commit Lint为例)》中介绍了使用Husky添加Commit Lint的方法,其实里面有点小插曲。 我想要格式 feature/(big|small|middle): xxxxxx 比如: 清明出行礼包/big: 初始化项目 通常的正则 ^\w+\/(big|small|middle):\s*\S+ 但我这个在Shell中写了之后发现,shell中根本不支持\w这样的元字符(我也没找到原因) Shell的写法 在参考了《Linux命令行与Shell脚本编程大全》中的内容后,修改如下: ^[[:graph:]]+\/(big|small|middle):[[:space:]]*[[:graph:]]+ 原因 在Linux中有2种流行的正则表达式引擎: POSIX基础正则表达式 – BRE POSIX扩展正则表达式 – ERE 大多数Linux工具至少符合BRE规范,那在POSIX引擎中匹配单词之类的就不能用\w这种,要用POSIX专用的。常见的有: 小结 就是一个引擎问题,纠结了2天,结果周末在一本买了很久但没看的书里找到了,果然书中自有颜如玉,啊呸,黄金屋。

使用Husky管理项目的Git Hooks(以配置Uni-app的ESLint和Commit Lint为例)

2021-03-07 约 1 分钟读完 搬砖秘籍
Git目前是毫无争议的项目版本管理的王者,而前端的项目大了之后我们通常需要利用一些Git Hooks来保证项目的质量。包括但不限于: eslint tslint 单元测试 E2E测试 style lint commit lint others checks 有的同学可能要说,没有这些项目质量也会很好,是的,一般这么说的,要么项目小,要么团队人少。如果你的项目人数>30,又是多分支开发的话,就会大概率需要这玩意。 初识Husky 原生的Git Hooks写法比较麻烦,Husky 做了比较好的封装。截止本文发布之日(2021-03-07),Husky已经发布了5.x版本,建议使用最新的版本,因为它有几个优势: 0依赖,没有依赖第三方的任何JS包 轻量,20K左右,Husky4要1MB 快,0.01s的量级,Husky要0.5s 跨平台,Linux、macOS、Windows都支持 安装 npm install husky --save-dev && npx husky init 是,就这一句就够了,自动会初始项目。观察你的项目,你会发现多了一个.husky目录,package.json中添加了prepare的命令: 添加ESLint 这里有一个策略,如果每次提交都进行全局的ESLint Check的话,效率会很慢。所以我们需要添加一个策略,就是每次提交的时候,只对你所修改的文件的做ESLint,这样效率会提高不少。要实现这个功能,需要借助一个非常好用的包:lint-staged。 先安装: npm install lint-staged --save-dev 配置命令: lint-staged有多种配置方法。 package.json .lintstagedrc .lintstagedrc.json .lintstagedrc.yaml .lintstagedrc.yml lint-staged.config.js, .lintstagedrc.js, or .lintstagedrc.cjs file in JS format 我个人还是习惯用package.json里写,也可以选择其他的。uni-app的Lint配置比较特殊,配置如下: "lint-staged": { "src/**/*.{js,ts,tsx,vue}": [ "vue-cli-service lint --fix src" ] }, 老的写法里还会加上git add这种,新版本已经不用了,都会自动加上。 配置Commit Lint 说起Commit Lint,有一个非常牛逼的库推荐给大家:conventional-changelog/commitlint: 📓 Lint commit messages 继续阅读

使用宝塔面板和7牛实现网站自动备份的功能

2021-03-07 约 1 分钟读完 搬砖秘籍
最近网站服务到期了,于是又买了一台服务器,当然这还有点斗智斗勇,参见这里《小心被阿里云割了韭菜》,上次安装PHP环境还是3年前,今天发现宝塔面板已经更新至7.5.1了,PHP8.0都已经有了,增加不少新功能。于是探索一下,挺有意思,做个记录。 1.环境选择 我是个选择困难,每次搬家都是这样,尽管我是一个软件开发者,我知道最新版不稳定,但新版本带来的功能和性能的诱惑又让我难以抗拒。但纠结了几天下来,PHP、MySQL的版本还是和原来保持一致,毕竟PHP的升级有点伤筋动骨。宝塔的老版本已经不维护了,用最新版本吧,还好新版本已经迭代过后的,看起来稳定性还可以。 2.配置网站自动备份 这是本文的重点,但其实没啥好记录的。以前都是让服务器自动跑脚本自己备份,但万一服务器蹦了,可能数据也找不回来。于是这次再加了一层7牛的云备份。直接在后台安装这个宝塔插件就可以了。 填写上相关的7牛信息就可以了,7牛有免费的10G存储空间是够用的。有2个地方要注意。 空间要私有,否则你的网站就自动爆库了。 设置空间的生命周期 第一点的设置如图: 第二点是7牛的带的比较强大的功能,虽然送了10G,但也招架不住每天备份是不是?超了你还是得花钱,有人说你定时来删除一下不就可以了?也行,但我懒,不想自己动手,7牛可以自动做这个事。 使用方法:空间管理->空间设置->生命周期设置 这样就不担心超10G了~ 后话 跌跌撞撞,网站已经搞了10多年了,好快,我的青春也记录在网站的文字里,愿时光不老。

下载Zoom会议视频至本地

2021-03-07 约 1 分钟读完 搬砖秘籍
最近公司更新了会议系统,你下面接入Zoom,自从去年Zoom的安全事件爆光之后,Zoom加强了不少的安全措施,比如最近我发现会议的录屏只能在线上观看了,我比较习惯把一些重要的会议存档,用来备份一些重要信息(甩锅),于是想找个方法下载。 简单探索了一下,经历了下面几个过程。 审查元素 这是最简单的,直接使用Chrome的工具来看视频地址。 这个video标签的地址就是视频地址,直接下载,不行。 PS:当然不行,人家也不是吃素的。 Chrome插件 这个试了几个,都嗅探不到。放弃,再说我也不喜欢用插件。 抓包 既然讲文明不可以,那就直接耍流氓了,直接查看视频的网络请求,抓到视频地址。 然后复制curl连接。 打开命令行,在最后加一个 -o xxx.mp4 然后,你懂的。

[更新]hugo defaultContentLanguage不生效解决方案

2021-03-02 约 1 分钟读完 搬砖秘籍
在之前的文章《Hugo设置defaultContentLanguage不生效的解决方案》中介绍了defaultContentLanguage不生效的解决方案。今天在将Hugo的网站添加评论的时候,发现disqusShortname添加了也不生效,也需要放在配置文件的第一行。 Why 这TM不对劲啊,不可能每个配置都要放第一行吧,后来仔细Debug发现是我自己的问题。我对toml文件的格式理解有误。 [xxxxx] a = 'b' c = 'd' e = 'f' 在这种情况下,e这个配置项目,还是属于xxxxx,所以要放在最前面。 小结 如果一个问题你搜索了整个互联网也没找到,一般是2种情况:一是很前沿;二是你SB了。通常情况下是后者。

Hugo启用disqus评论

2021-03-02 约 1 分钟读完 搬砖秘籍
网站上线了,本来不想添加评论,后来发现还不太行,Telegram 的 Group 可能大家还不情况情况习惯,为了过渡,就把评论再加上去。 为什么选择disqus 因为是国外站。 国内站用什么?不用。 启用方式 一般的主题都配置了comment模板,只要把disqusShortname设置好就可以了。 PS:这个值是个字符串,没有http、https这种。 不生效怎么办 使用 hugo config 命令查看设置是否生效,然后再检查comment相关的模板。当然国内的话,就是加上了,也看不到,原因你懂的。 注意: {{ template "_internal/disqus.html" . }} 这个代码是内置的,看不到源码,如果想自定义,可以参考disqus的实现方式,自己写个partial。