maomao
maomao
# 浏览器的自动播放策略 > 最近有个项目被坑到了，正好记录一下 自动播放即网页加载完成后能否立即播放音视频 > 以 Chrome 为例（以下为自动播放策略） - 始终允许静音自动播放 - 在以下情况下，允许带声音的自动播放 - 用户已经在当前域进行了交互操作（点击触摸滑动等） - 用户将当前网站添加到移动设备上的主屏幕或在桌面上安装了 PWA - 在桌面设备上：用户的[媒体互动指数](https://developer.chrome.com/blog/autoplay?hl=zh-cn#media_engagement_index)超过一定阈值（意味着用户之前播放过有声视频） - `iframe` 会继承父级页面的自动播放策略（需要父窗口满足自动播放条件） ## 媒体互动指数 媒体互动指数 (MEI Media Engagement Index)...
# 使用 shell 脚本复制项目信息到剪切板 > 这是去年朋友跟我交流的一个问题，最近在整理吃灰笔记时挖出来的（当时写了笔记，但没写完） | 聊天 | 记录 | | :-----------------------------------------------------------------------------: | :-----------------------------------------------------------------------------: | |  |  | ## 实现步骤 1. 打开冰箱 2. 把大象放进冰箱 3. 关闭冰箱 ###...
# 获取当前 `git` 分支 ## 命令 > git 2.22 版本之后 ```sh git branch --show-current ``` > git 2.22 版本之前 ```sh # 使用 rev-parse git rev-parse --abbrev-ref HEAD # 使用 symbolic-ref...
# 使用 rollup 打包用户脚本（user script） ## 用户脚本 OR 油猴脚本 用户脚本（user script）是指在浏览器中运行的脚本，用于自定义网页的行为和外观。这些脚本可以修改网页内容、添加新的功能、自动执行任务、屏蔽广告、修改样式等等。在[油猴（Tampermonkey）插件](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo)中，用户脚本也被称为油猴脚本，因为这个插件专门用于编写、运行、管理用户脚本 ## 为什么要使用 rollup 打包 最近在更新我的 [油猴脚本 —— 115 小助手](https://github.com/maomao1996/tampermonkey-scripts/blob/93187567c678889ff75fe5a36eda7cb7edf7d866/packages/115-helper/115-helper.user.ts) 时有点越来越头大（维护不动了），其头大的原因有： - 单文件开发（代码量越来越大） - 公共函数需要手动复制粘贴 - CSS 需要放在 JavaScript，没有智能提示 -...
# 修改 DNS 解决 Github 图片资源加载失败 ## 获取 IP 地址 1. 打开 [ipaddress](https://www.ipaddress.com) 2. 搜索 `raw.githubusercontent.com` (控制台资源报错的域名) [快捷搜索 raw.githubusercontent.com IP 地址](https://githubusercontent.com.ipaddress.com/raw.githubusercontent.com) ## 修改本地 Hosts 文件 各系统 `hosts` 文件路径如下 - Windows...
# 修复谷歌翻译失效 > 之前找的[知乎帖](https://zhuanlan.zhihu.com/p/570811957)不知道为啥被删除，这里做下记录 谷歌关闭了中国大陆的谷歌翻译服务，导致 chrome 内置翻译和扩展均不可用，但可以通过修改 `hosts` 继续使用 ## 获取 IP 地址 ### 方案一：通过 IP 查询工具 1. 打开 2. 选择物理距离最近（即通过 IP 归属地来选择响应最快的） ### 方案二：使用命令行获取 IP ```sh # 打开终端输入 ping...
# 使用 `VitePress` 打造个人前端导航网站 最近，我的一个朋友向我展示了他的[前端导航网站](https://no.buging.cn)。恰巧我正在将自己的博客从 [VuePress](https://vuepress.github.io/zh) 升级到 [VitePress](https://vitepress.vuejs.org)。受到他的启发，我想基于 `VitePress` 打造一个自己的前端导航网站。 ## 说明 - 鉴于网上一大堆教你 `VitePress` 搭建自己的博客，本文就不在重复教你了，只说明下打造前端导航的重点部分 - 如果你需要学习 `VitePress` 的基础知识，可以参考我的另一篇文章： [从 VuePress 迁移至 VitePress](https://github.com/maomao1996/daily-notes/issues/37) > 环境和依赖 - `node` 18.x -...
# 修改 `node_modules` 中的依赖（打补丁） > 为什么要修改 `node_modules` 中的依赖？ 1. 依赖包有 `bug`，但作者没有及时修复 2. 依赖包的版本过旧，但不能升级到新版本 3. 对依赖包的功能有定制化需求时 ## 常见做法 - 自己维护这个 `npm` 包 - 维护成本较高，周期长 - 直接修改 `node_modules` 中的依赖 - 适合应急，周期短 -...
# 获取软件内置浏览器的 User-Agent 有的时候我们需要获取软件内置浏览器的 User-Agent，以便于我们做一些特殊的处理 ## User-Agent User-Agent（用户代理）是一个用于识别客户端（通常是网络浏览器）类型和版本的字符串。它是由客户端在向服务器发送请求时自动包含的头部信息之一 User-Agent 字符串提供了关于客户端应用程序、操作系统、设备和版本的信息，以便服务器可以根据这些信息提供适合客户端的响应内容。服务器可以根据 User-Agent 字符串来确定如何呈现网页、提供适当的样式和功能，或者根据客户端的能力做出其他定制化的处理 [User-Agent - HTTP | MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent) ### 获取 User-Agent ```js const userAgent = navigator.userAgent ``` ### 解析 User-Agent >...