前端技术 – zcw的博客

Investigation and solving of CI build error (at `git merge-base`)

2020年9月10日由 zciii 发表

Digging I got this error when doing github PR check (in npm run build process):

> nx affected:build --parallel
.../node_modules/annwl/workspace/node_modules/yargs/yargs.js:1109

Error: Command failed: git merge-base master HEAD

> nx affected:build --parallel

.../node_modules/annwl/workspace/node_modules/yargs/yargs.js:1109

Error: Command failed: git merge-base master HEAD

And asked in group, Herb said he met 继续>

揭开clearfix和overflow的神秘面纱 🔑 clearfix Reloaded + overflow:hidden Demystified

2020年7月7日由 zciii 发表

About the author: Thierry Koblentz is a front-end engineer at Yahoo! He owns TJK Design and ez-css.org. You can follow Thierry on Twitter at @thierryk 继续>

使用typescript类型定义来验证数据是否符合定义

2020年7月6日由 zciii 发表

很多时候都有这样的需求：我想看看这个数据是不是符合这个type或者interface 但是很遗憾，typescript本身不提供这样的功能，所以需要迂回地来实现首先，有一种描述数据格式的工具是json-schema，社区中有比较成熟的校验数据是否符合格式的工具而我也找到了一种可以从typescr 继续>

覆盖一个npm包的默认typescript类型定义 🔑 How to override or extend a libary type definition in Typescript

2020年5月27日由 zciii 发表

比如给axios的 AxiosRequestConfig 加一个属性：创建一个 src/axios.d.ts 文件，内容为：

import * as axios from 'axios';
declare module 'axios' {
  interface AxiosRequestConfig {
    hideErrorMessage?: boolean;
  }
}

import * as axios from 'axios';

declare module 'axios' {

interface AxiosRequestConfig {

hideErrorMessage?: boolean;

}

&nbsp 继续>

正则表达式中?=和?:和?!的理解

2020年5月22日由 zciii 发表

要理解?=和?!，首先需要理解前瞻，后顾，负前瞻，负后顾四个概念：

// 前瞻：
exp1(?=exp2) 查找exp2前面的exp1
// 后顾：
(?<=exp2)exp1 查找exp2后面的exp1
// 负前瞻：
exp1(?!exp2) 查找后面不是exp2的exp1
// 负后顾：
(?<!exp2)exp1 查找前面不是exp2的exp1

// 前瞻：

exp1(?=exp2) 查找exp2前面的exp1

// 后顾：

(?<=exp2)exp1 查找exp2后面的exp1

// 负前瞻：

exp1(?!exp2) 查找后面不是exp2的exp1

// 负后顾：

(?<!exp2)exp1 查找前面不是exp2的exp1

举例：

"中国人".replace(/(?<=中国)人/, "rr") // 匹配中国人中的人，将其替换为rr，结果为 中国rr
"法国人".replace(/(?<=中国)人/, "rr") // 结果为 法国人，因为人前面不是中国，所以无法匹配到

1 2	"中国人".replace(/(?<=中国)人/, "rr") // 匹配中国人中的人，将其替换为rr，结果为中国rr "法国人".replace(/(?<=中国)人/, "rr") // 结果为法国人，因为人前面不是中国，所以无法匹配到

要理解?:则需要理解捕获分组和非捕获分组的概念： [crayon-6766a8 继续>

两步正则，批量替换QA段落为jsx（xml like）

2020年4月25日由 zciii 发表

问题把一段文字整理为页面代码是很常见的事情这里需要把一整篇QA整理为页面代码格式为：

kula很棒吗？
他很棒
他有很多小弟

kula多好呢？
他对下属很好
他对群友很好
他对路人很好

kula很棒吗？

他很棒

他有很多小弟

kula多好呢？

他对下属很好

他对群友很好

他对路人很好

因为答案可能有多行，所以要匹配比较麻烦初次尝试一开始想到的是：前面加两个空行，然后使用模式匹配： [cray 继续>

国内使用npm的一些技巧

2020年4月5日由 zciii 发表

国内的服务器，因为一些原因，npm install会很慢，或者直接连不上，所以有以下解决方法使用淘宝npm 1.临时使用

npm --registry https://registry.npm.taobao.org install express

1	npm --registry https://registry.npm.taobao.org install express

2.持久使用

npm config set registry https://registry.npm.taobao.org

1	npm config set registry https://registry.npm.taobao.org

配置后可通过下面方式来验证是否继续>

多行文本末尾添加fadeout和一个附加文本块（css）

2020年3月26日由 zciii 发表

codepen：https://codepen.io/zhangciwu/pen/poJQRXJ 两行的情况：https://codepen.io/zhangciwu/pen/NWqEpKQ 一行需要换行的情况：https://codepen.io/zhangciwu/p 继续>

Phaser 3: 从起点渐进绘制一条贝塞尔曲线

2020年3月26日由 zciii 发表

参考：https://phaser.io/examples/v3/view/paths/path-line-and-bezier 首先绘制一条path

        this.path = new Phaser.Curves.Path(0, 0);
        let pointEnd = getPointFromData(data);
        let controls = getBezierControlPointFrom([0, 0], pointEnd, data.length >= 4);
        this.path.cubicBezierTo(pointEnd[0], pointEnd[1], controls[0], controls[1], controls[2], controls[3]);

this.path = new Phaser.Curves.Path(0, 0);

let pointEnd = getPointFromData(data);

let controls = getBezierControlPointFrom([0, 0], pointEnd, data.length >= 4);

this.path.cubicBezierTo(pointEnd[0], pointEnd[1], controls[0], controls[1], controls[2], controls[3]);

创建一个follower [crayon-6766a8d7d019a 继续>

Flex整页布局避免底部被撑掉 🔑 Flexbox Full Page Web App Layout

2020年2月25日由 zciii 发表

From: http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout I was working on a web app layout, and since we require a modern b 继续>

React Newline to break (nl2br)

2019年2月26日由 zciii 发表

Because you know that everything in React is functions, you can’t really do this

this.state.text.replace(/(?:\r\n|\r|\n)/g, '<br />')

1	this.state.text.replace(/(?:\r\n\|\r\|\n)/g, '<br />')

Since that would return a stri 继续>

eggjs nunjucks 防止出现XSS

2019年1月8日由 zciii 发表

XSS的产生很多人需要在nunjuck里面输出json数据的时候会这么写：

{{ jsonData | dump | safe }}

1	{{ jsonData \| dump \| safe }}

但是这么写一点都不安全（虽然有一个safe） dump只是将json对象序列化（stringify），safe只是告诉nunjucks不要进行escape（继续>

分类：前端技术