Pengsl's Blog(web前端)

Pengsl's Blog


  • 首页

  • 标签

  • 归档

security-headers

发表于 2021-09-12 | 更新于 2023-01-06

为处理敏感用户数据的网站推荐的安全标头:

  • 内容安全策略 (Content Security Policy)

推荐用于所有网站的安全标头:

  • X-Content-Type-Options
  • X-Frame-Options
  • Cross-Origin-Resource-Policy (CORP)
  • Cross-Origin-Opener-Policy (COOP)
  • HTTP Strict Transport Security (HSTS)

Topsites Analysis是一个HTTP安全头分析网站。
从alexa topsites获取全球访问量最高的50个网站,并对其进行分析。

阅读全文 »

next-generation-frontend-tooling-vite

发表于 2021-03-29 | 更新于 2023-01-06

下一代前端构建工具 Vite

Vite 是一种构建工具,旨在为现代Web项目提供更快,更精简的开发体验。它包括两个主要部分:

  • 一个开发服务器,它在ES模块上提供了丰富的功能增强,例如,极快的热模块更换(HMR)。

  • 一个构建命令,它将您的代码与Rollup捆绑在一起,Rollup已预先配置为输出高度优化的静态资产进行生产。

特性

Features Details
即时的服务器启动 通过原生ESM提供的按需文件,无需 bundleing!
闪电般的HMR 无论模块大小如何,热模块更换(HMR)都能保持快速。!
丰富的功能 丰富的功能现成的对TypeScript,JSX,CSS等的支持!
构建优化 与配置的rollup打包!支持多页应用和类库模式!
通用插件 Rollup超集插件接口在开发和构建之间共享!
全类型API 具有完整TypeScript输入功能的灵活编程API。
阅读全文 »

react-Popup-Component

发表于 2020-11-11 | 更新于 2023-01-06

Popup 使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import Popup from '@/components'

export default () => {
const [show, setShow] = useState(false);
const openPopup = () => {
setShow(true);
};
return (
<div className="App">
<div>
<Popup onClose={() => setShow(false)} show={show}>
<div>
<p>这里是 Popup 的内容</p>
<p>这里是 Popup 的内容</p>
<p>这里是 Popup 的内容</p>
<p>这里是 Popup 的内容</p>
</div>
</Popup>
</div>
</div>
);
}

Popup 实现

Popup dom 组成

  • 弹窗容器 container
  • 弹窗蒙层 mask
  • 弹窗内容 content
    阅读全文 »

how to write a react checkbox component

发表于 2020-10-25 | 更新于 2023-01-06

预期的 Checkbox 使用方法



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Checkbox from '@/components'
const { CheckboxItem } = Checkbox

export default () => {
const onChange = (values) => {
console.log(values)
}
return (
<Checkbox onChange={onChange}>
<CheckboxItem label="angular" />
<CheckboxItem label="react" />
<CheckboxItem label="vue" />
</Checkbox>
)
}


两种实现方式

通过 React.cloneElement

1
2
3
4
5
React.cloneElement(
element,
[props],
[...children]
)
阅读全文 »

promise

发表于 2020-05-08 | 更新于 2023-01-06

参考 Promises/A+, 实现一个Promise

定义状态

1
2
3
4
// define three states
const PENDING = 0
const RESOLVED = 1
const REJECTED = 2

version#0 (resolve/reject时变更状态)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class MyPromise {
constructor(executor) {
const resolve = () => {
this.state = RESOLVED
}
const reject = () => {
this.state = REJECTED
}

this.state = PENDING
try {
executor(resolve, reject)
} catch (error) {
reject(error)
}
}
}
阅读全文 »

emoji 存储及展示 前端完美解决方案

发表于 2020-04-27 | 更新于 2023-01-06

遇到的问题

最近在做一个论坛功能,发帖和评论输入都需要保存到数据库。
而测试测了emoji保存是有问题的,查了数据库是没存进去,google查了一下,emoji是4个字节的,需要将
MySql数据库字符集改由utf8改为utf8mb4,于是把找到的帖子给DBA,DBA看了说不能改,可能会影响现有的数据。

那就只好自己动手,丰衣足食了。
(如果下面的emoji没有正常展示请使用最新版的火狐浏览器)

emoji 存储及展示 前端解决思路

既然直接存储emoji有问题,就改为存储emoji的转换结果。
于是沿着这个思路,首先想到的是 charCodeAt/fromCharCode

阅读全文 »

create-k8s-cluster-with-minikube

发表于 2019-12-27 | 更新于 2023-01-06

安装 kubectl & minikube

  • 如何安装 kubectl
  • 如何安装 minikube

集群运行

查看 minikube 版本

1
$ minikube version

启动集群

1
$ minikube start
阅读全文 »

install-docker-winodws

发表于 2019-11-11 | 更新于 2023-01-06

winodws 下载 docker

如果电脑满足以下条件可以直接下载 docker desktop:

系统要求

  • Windows 10 64-bit: Pro, Enterprise, or Education (Build 15063 or later).
  • Hyper-V and Containers Windows features must be enabled.
  • 64 bit processor with Second Level Address Translation (SLAT)
  • 4GB system RAM
  • BIOS-level hardware virtualization support must be enabled in the BIOS settings

下载安装地址

docker-for-windows

docker Toolbox 安装

如果不满足上述条件则需要通过下载 Toolbox 来安装
Toobox 下载地址
下载最新版本的 .exe进行安装

阅读全文 »

go-vscode

发表于 2019-11-06 | 更新于 2023-01-06

Go下载

Go下载地址:https://golang.google.cn/dl/

vscode 配置 go 插件

在vscode EXRENSION 商店 搜索 go,第一个就是微软官方提供的go插件,装上它就可以愉快的撸 Go 啦!
或者新建一个 .go 文件,vscode 也会推荐安装相关的插件!
go-extension

阅读全文 »

mobile-web-border

发表于 2019-09-11 | 更新于 2023-01-06

解决移动端 1px 边框问题

主要思路是将 HTML元素border设置为0,再通过伪类::before 或 ::after 去放大、旋转实现。
我的习惯是将 scss 变量存放在 vars.scss; scss mixin 存放在 mixin.scss.

vars.scss

1
2
3
4
$border-colors: (
'main': #dddddd,
'active': #0088ff,
);
阅读全文 »
12…4

pengsl

一个前端的技术博客,主要分享web等编程技术; A front-end technology blog to share technology;

33 日志
32 标签
GitHub E-Mail Google
© 2018-2023 pengsl
粤ICP备16086950号
由 Hexo 强力驱动 v3.7.1
|
主题 — NexT.Muse v6.3.0