javaLuo/plan

文档

https://www.css88.com/book/css/ CSS文档
http://616pic.com/ 图片网可下载
https://developers.google.com/search/docs/guides/search-gallery?hl=zh-cn 谷歌搜索增强
https://www.paperplane.app/blog/print-css-basics/ css控制打印时的一些特定样式
https://neumorphism.io/ 漂亮的拟物按钮CSS

总是记不住的东西

a标签防钓鱼

rel="noopener noreferrer nofollow  me"
noopener: 在新打开的网站中window.opener将得到null, 阻止新打开的网站获取原始网站的信息
noreferrer: 除了使window.opener为null外，还隐藏引荐信息，谷歌搜索引擎将无法识别该网站是从其他网站跳转，而视为直接流量
nofollow：是否阻止反向链接，这在搜索引擎SEO排名中有用，如果你链接添加了nofollow，表示主网站不认可该跳转链接的价值，搜索引擎排名算法不会为把这个跳转链接的价值计算到主网站上。一般用于高价值网站跳转到低价值网站时可以加上，防止低价值网站拉低了主网站的价值评分
me：一般用于社交网站，比如博客网站放了一个twitter链接，加了me，表示该twitter链接就是该博客主人的其他社交媒体。这有利于搜索引擎发现博主的相关站点

浏览器原生平滑滚动

scroll-behavior: smooth;

原生千分位格式化,只支持3位小数

(123456789.123).toLocaleString('en-US'); // 第1种方法 "123,456,789.123"
new Intl.NumberFormat().format(123456789.123); // 第2种方法 "123,456,789.123"

是否响应鼠标事件

pointer-events: none/auto;

放不下显示省略号/强制不换行

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

// 多行
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 2;  /*要显示的行数*/
-webkit-box-orient: vertical;

强制换行

word-break: break-all;
word-wrap: break-word;
white-space: pre-wrap;

禁止选取

user-select: none;

最后一行两端对齐

text-align-last:justify;

修改placeholder的样式

::placeholder

鼠标位置相关

e.clientX // 鼠标距离当前窗口左上角的坐标
e.pageX   // 鼠标距离当前窗口包括滚动条已滚动距离的坐标
e.offsetX // 鼠标距离当前所在元素左上角的坐标

关闭chrome跨域限制

/** mac 终端执行： */
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security  --user-data-dir=/Users/admin/Documents/MyChromeDevUserData

/** windows 设置chrome快捷方式链接地址 */
--disable-web-security --user-data-dir=C:\MyChromeDevUserData

隐藏input[number]的上下选择箭头

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type='number'] {
  -moz-appearance: textfield;
}

正则解析URL参数部分

q={};
location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);
console.log(q); // { key: value }

数字强制等宽显示

font-variant-numeric: tabular-nums;

15.css文字渐变

background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
-webkit-background-clip:text; 
-webkit-text-fill-color:transparent; 
// https://segmentfault.com/a/1190000017015544

16.手动触发弹出安装PWA

// 定义一个变量，为了保存event对象
let thisEvent;

/**
  监听beforeinstallprompt这个事件
  如果网站支持PWA且用户没有安装过，则会触发此事件（Chrome地址栏右侧会出现“安装”字样）
  若用户已安装过或已不是首次打开网页，此事件不会触发（即Chrome地址栏右侧没有出现“安装”字样）
**/
window.addEventListener("beforeinstallprompt", e => {
  // 阻止 Chrome 67 之前的版本自动显示提示
  e.preventDefault();
  // 保存这个特殊的e，之后要用
  thisEvent = e;
});
    
// 用户点击按钮时触发此方法
function installApp() {
  thisEvent.prompt(); // 弹出安装提示框
  thisEvent.userChoice.then(res => {
    console.log(res); // 用户点击安装或取消，会返回对应的信息
  });
}

// 页面中写个按钮触发
<button onclick="installApp">安装PWA桌面应用</button>

手机自带暗模式媒体查询

@media (prefers-color-scheme: dark) {
  body {
    background-color: #444;
    color: #e4e4e4;
  }
  img {
    filter: grayscale(30%);
  }
}

github改了密码，重置sourcetree密码

WIN:
删除 C:\Users\用户\用户名\AppData\Local\Atlassian\password
sourcetree重新提交会弹出登录框

生成UUid

function getUUid(){
  const temp_url = URL.createObjectURL(new Blob());
  const uuid = temp_url.toString();
  URL.revokeObjectURL(temp_url);
  return uuid.substr(uuid.lastIndexOf("/") + 1);
}

原生CSS实现毛玻璃

backdrop-filter: blur(4px);

解析URL参数

Object.fromEntries(new URLSearchParams('a=123&b=456&c='));
// {a:"123",b:"456",c:""}

父级transform会让子集的position:fixed失效
禁止ios浏览器橡皮筋效果

document.body.addEventListener('touchmove', (e)=>{
  e.preventDefault();
}, {passive: false});
// 一定要加passive: false, 告诉浏览器我会阻止默认行为，IOS此值默认为true

file转base64, 用于前端图片回显

async function returnImg(file: File){
  const reader = new FileReader();
  reader.readAsDataURL(file);
  return new Promise((res, rej)=>{
    reader.onload = ()=>{
      res(reader.result);
    };
    reader.onerror = ()=>{
      res(null);
    };
  });
}

sourcetree切换账号工具 - 选项 - 排在第一个的ssh密钥中的账号就是sourcetree使用的git账号要切换的时候直接切换ssh密钥即可

全局配置中的账号和邮箱只是作为提交时显示用

缓存

强缓存：
Expires: Date; // 强缓存 http/1.0 服务器时间与本地时间
Cache-Control: max-age=12312312; // 强缓存 最大过期时间与本地时间对比

协商缓存：
Last-Modified： 最后修改时间
ETag: 文件唯一标识
如果强缓存过期，浏览器会在Request请求头中加入两个字段：If-Moified-Since（值对应Last-Modified）和If-None-Match（值对应ETag）字段

服务器自行判断，如果有新的修改，返回200和新内容
如果没有修改，则返回304，告诉浏览器虽然过期但可以继续使用，并且重新已本次的响应头设置缓存

启发缓存
如果响应头中没有能够确定缓存的字段，浏览器会根据Date和Last-Modified的差值的10%作为缓存时间

过渡的坑

像vue-transition-group这样的列表过渡组件
在窗口非激活状态（最小化，电脑休眠等）时，浏览器为了节约性能，会停止setTimeout/setInterval/requestAnimationFrame以及页面dom的渲染
如果此时数据仍然在更新（比如socket不会停止），则列表中的dom会越来越多，不需要的dom不会被浏览器清除

安卓手机字体无法居中（往上偏）的坑

原因是font-size < 12px，很多项目喜欢使用rem来做移动端网页，一些插件还能把px转换为rem
在某些安卓手机里字体大小小于12像素时，会往上偏。解决办法一般是设置一个较大字体，然后transform:scale缩小

vscode 配置

{
  "editor.tabSize": 2, // tab相当于2个空格
  /**
   * vetur插件设置 用于vue template格式化
   * https://github.com/vuejs/vetur
   */
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" //属性强制折行对齐
    }
  },
  /** Eslint设置 **/
  "eslint.validate": [
    // 检查以下类型的文件
    "javascript",
    "javascriptreact",
    "vue",
    "html",
    {
      "language": "html",
      "autoFix": false
    },
    {
      "language": "vue",
      "autoFix": false
    }
  ],
  "eslint.autoFixOnSave": false, //保存时自动格式化
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  /**
   * prettier设置
   * https://prettier.io/docs/en/options.html
   */
  "prettier.singleQuote": false, //使用单引号而不是双引号
  "prettier.jsxBracketSameLine": true, // 标签闭合处是否不换行
  "prettier.printWidth": 400, // 多少个字符换行
  "prettier.tabWidth": 2, // tab的宽度
  "prettier.semi": true, // 是否自动在语句末尾加分号
  "prettier.trailingComma": "all", // 是否自动加尾逗号（none不，es5自动加兼容es5, all尽可能都加）
  "prettier.bracketSpacing": true, // 大括号之间是否有空格
  "prettier.arrowParens": "avoid",
  "explorer.confirmDragAndDrop": false,
  "workbench.startupEditor": "welcomePage",
  "breadcrumbs.enabled": true,
  "editor.formatOnSave": true,
  "diffEditor.ignoreTrimWhitespace": true,
  "diffEditor.renderSideBySide": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "vsicons.dontShowNewVersionMessage": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": false
  } // 箭头函数只有一个参数时是否加括号（always加，avoid不加）
}

useEffect优化

去掉不必要的依赖。
将 Hook 拆分为更小的单元，每个 Hook 依赖于各自的依赖数组。
通过合并相关的 state，将多个依赖值聚合为一个。
通过 setState 回调函数获取最新的 state，以减少外部依赖。
通过 ref 来读取可变变量的值，不过需要注意控制修改它的途径

javaLuo / plan

文档

总是记不住的东西

缓存

过渡的坑

安卓手机字体无法居中（往上偏）的坑

vscode 配置

useEffect优化

About

Languages