实现next官网滚动线条
实现next.js官网的滚动线条效果
原理是设置background-image 为 linear-gradient，然后设置background-repeat重复展示，最后是通过设置background-size 去控制展示的大小 看起来像一个个小点组成的虚线，最后是使用动画控制
<div style={
position: 'absolute',
right: 0,
top: 0,
width: '1px',
height: '0%',
background: 'linear-gradient(180deg,rgba(0,0,0,calc(0.15 * 3)),rgba(0,0,0,calc(0.15 * 3)) 50%,transparent 0...
网页默哀置灰
html {
/*兼容FF*/
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
/*兼容IE内核*/
filter:progid...
axios multipart/form-data在ios下的异常情况解决记录
场景： 用iPhone（v.ios15 打开支付宝扫码打开webapp，在H5上使用文件上传报错， 前端示例代码如下：
const data = new FormData()
data.append('file', img)
axios.post({url: 'xxx', data, headers: {'Content-type': 'multipart/form-data;'}})
解决办法：
axios.post({
transformRequest: (data) => {
data.tostring = () => "[object FormData]"
return data
},
})
HTTPS加密
https 加密
http众所周知是明文传输的无状态的，相对而言https更加安全一些，得益于https的加密策略。 https的加密涉及了 对称加密 非对称加密以及数字签名的设计…
对称加密
由服务器端生成一份 密钥X 明文传输给浏览器端。浏览器端用密钥加密后传输给服务器端，服务器再解密。双方各持同一份密钥。
但是在这个过程万一被人拦截下密钥X 就很不安全
非对称加密
服务器持一对 公钥A 公钥B
服务器明文把公钥A发送给浏览器，浏览器传输数据时候用公钥A 去加密，服务器用私钥B 解密，暂时来看是安全的
但是如果当一种情况 公钥A 被拦截了， 服务器用私钥加密后发送数据给浏览器的时候被中间人用拦截的公钥去解密了。。 这就很不安全了
改良后的非对称加密
服务器浏览器双方各持...
浏览器缓存策略
浏览器缓存策略
正常浏览器发起一次全新的http请求时候会响应200状态码，并且返回一些列的缓存结果，这个200在很多时候都是强缓存，
当再次发起相同的请求时候会根据上次的缓存结果服务端再次返回缓存结果，浏览器会根据缓存的结果去命中不同的缓存策略（即强缓存、协商缓存）。当强缓存时候 查看Network面板可以看到部分信息，size 中
大致的强缓存都会显示 from memory cache, from disk cache，这两种区别 前者是从浏览器的内存中的缓存中读取 存在时效性快速性， 后者是直接通过I/O去读取本地的硬盘，速度较于缓存中直接读取较慢。
强缓存(Expires, Cache-Control
Exprires HTTP1.0 产物
设置缓存到期时间 不安全，机器...
实现useUndo
useUndo
今天无意间看到一个有意思的库 useUndo，想着自己实现下。具体代码链接在文章末尾可见。
help function and state
// e.g
const [
countState,
{
set: setCount,
reset: resetCount,
undo: undoCount,
redo: redoCount,
canUndo,
canRedo
}
] = useUndo<number>(0);
const { present: presentCount } = countState;
useUndo 提供了几个功能set, undo, redo, reset跟stat...
共计 15 篇文章，2 页。