获得徽章 27
#每天一个知识点# Console Importer
使用一个命令从控制台导入JavaScript和CSS资源
开发人员从Chrome控制台轻松导入JS和CSS资源的工具
源代码：
github.com
在 console 中调试 npm 包，快速测试 api 效果
使用一个命令从控制台导入JavaScript和CSS资源
开发人员从Chrome控制台轻松导入JS和CSS资源的工具
源代码：
github.com在 console 中调试 npm 包，快速测试 api 效果
展开
3
2
`.yarnrc` 文件和 `yarn config set` 命令都用于配置 Yarn 的选项，但它们之间存在一些区别和优先级。
1. 区别：
- `.yarnrc` 文件是一个全局配置文件，用于设置 Yarn 的全局选项。它可以在用户主目录下或项目根目录中创建，对整个系统或项目生效。
- `yarn config set` 命令是用于在命令行中临时设置 Yarn 的选项。通过该命令，你可以在命令执行期间临时更改某个选项的值，而不会影响全局或项目的配置文件。
2. 优先级：
- `.yarnrc` 文件具有更高的优先级。当执行 Yarn 命令时，它会首先检查项目目录中的 `.yarnrc` 文件，如果存在，则使用该文件中的配置选项。
- 如果项目目录中不存在 `.yarnrc` 文件，Yarn 将检查用户主目录中的 `.yarnrc` 文件，并使用其中的配置选项。
- 如果两者都不存在，Yarn 将使用默认的全局配置。
对于使用 `yarn config set` 命令设置的选项，它们的优先级较低。它们只在命令执行期间有效，并不会修改全局或项目的配置文件。当命令执行完毕后，之前的配置选项将恢复为默认值。
总结：
- `.yarnrc` 文件是全局配置文件，对整个系统或项目生效，具有更高的优先级。
- `yarn config set` 命令是在命令行中临时设置的配置选项，仅在命令执行期间有效，优先级较低。
根据需要，你可以选择使用 `.yarnrc` 文件或 `yarn config set` 命令来配置 Yarn 的选项，具体取决于你的需求和使用场景。
1. 区别：
- `.yarnrc` 文件是一个全局配置文件，用于设置 Yarn 的全局选项。它可以在用户主目录下或项目根目录中创建，对整个系统或项目生效。
- `yarn config set` 命令是用于在命令行中临时设置 Yarn 的选项。通过该命令，你可以在命令执行期间临时更改某个选项的值，而不会影响全局或项目的配置文件。
2. 优先级：
- `.yarnrc` 文件具有更高的优先级。当执行 Yarn 命令时，它会首先检查项目目录中的 `.yarnrc` 文件，如果存在，则使用该文件中的配置选项。
- 如果项目目录中不存在 `.yarnrc` 文件，Yarn 将检查用户主目录中的 `.yarnrc` 文件，并使用其中的配置选项。
- 如果两者都不存在，Yarn 将使用默认的全局配置。
对于使用 `yarn config set` 命令设置的选项，它们的优先级较低。它们只在命令执行期间有效，并不会修改全局或项目的配置文件。当命令执行完毕后，之前的配置选项将恢复为默认值。
总结：
- `.yarnrc` 文件是全局配置文件，对整个系统或项目生效，具有更高的优先级。
- `yarn config set` 命令是在命令行中临时设置的配置选项，仅在命令执行期间有效，优先级较低。
根据需要，你可以选择使用 `.yarnrc` 文件或 `yarn config set` 命令来配置 Yarn 的选项，具体取决于你的需求和使用场景。
展开
评论
3
#每天一个知识点# translate.js
两行js实现html全自动翻译。
无需改动页面、无语言配置文件、无API Key、对SEO友好！
1. 随便打开一个网页
2. 右键 - 审查元素
3. 粘贴入以下代码：
var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script'); script.type= 'text/javascript'; script.src= 'res.zvo.cn'; head.appendChild(script);
4. Enter 回车键 ， 执行
5. 在当前网页的左上角，就出现了一个大大的切换语言，切换试试看。
在线体验
res.zvo.cn
两行js实现html全自动翻译。
无需改动页面、无语言配置文件、无API Key、对SEO友好！
1. 随便打开一个网页
2. 右键 - 审查元素
3. 粘贴入以下代码：
var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script'); script.type= 'text/javascript'; script.src= '
res.zvo.cn'; head.appendChild(script); 4. Enter 回车键 ， 执行
5. 在当前网页的左上角，就出现了一个大大的切换语言，切换试试看。
在线体验
res.zvo.cn
展开
4
10
#每日快讯# GrowingIO 结合服务过的 20+ 行业、上千家客户的经验，推出《指标体系与数据采集》电子书。
1 套系统的数据指标体系搭建框架、69 页可实操可落地的详细指南。
融合经典方法论与成功实践，分为四大章节：
（1）科学规划指标体系；
（2）高效进行数据采集；
（3）正确管理数据指标；
（4）指标体系实战案例。
www.growingio.com
1 套系统的数据指标体系搭建框架、69 页可实操可落地的详细指南。
融合经典方法论与成功实践，分为四大章节：
（1）科学规划指标体系；
（2）高效进行数据采集；
（3）正确管理数据指标；
（4）指标体系实战案例。
www.growingio.com
展开
评论
1
两行CSS让长列表提升性能渲染
1. content-visibility
对于列表元素更多的页面，content-visibility带来的渲染性能提升会更加明显。
2. contain-intrinsic-size
指定的元素自然大小，确保我们未渲染子元素的 div 仍然占据空间，同时也保留延迟渲染的好处
来源：《两行CSS让长列表性能渲染提升7倍！》mp.weixin.qq.com
1. content-visibility
对于列表元素更多的页面，content-visibility带来的渲染性能提升会更加明显。
2. contain-intrinsic-size
指定的元素自然大小，确保我们未渲染子元素的 div 仍然占据空间，同时也保留延迟渲染的好处
来源：《两行CSS让长列表性能渲染提升7倍！》
mp.weixin.qq.com
展开
评论
1
#码上掘金# Chrome Extension template
1. Chrome Extension (MV3) Boilerplate with React 18 and Webpack 5
github.com
2. WebExtension Vite Starter
A Vite powered WebExtension (Chrome, FireFox, etc.) starter template.
github.com
1. Chrome Extension (MV3) Boilerplate with React 18 and Webpack 5
github.com2. WebExtension Vite Starter
A Vite powered WebExtension (Chrome, FireFox, etc.) starter template.
github.com
展开
评论
3
![[左]](http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/jj_emoji_116.16df22c.png)
~ #每天一个知识点# AJ-Captcha行为验证码
包含滑动拼图、文字点选两种方式，UI支持弹出和嵌入两种方式。后端提供Java实现，前端提供了php、angular、html、vue、uni-app、flutter、android、ios等代码示例。
gitee.com
交互流程
① 用户访问应用页面，请求显示行为验证码
② 用户按照提示要求完成验证码拼图/点击
③ 用户提交表单，前端将第二步的输出一同提交到后台
④ 验证数据随表单提交到后台后，后台需要调用captchaService.verification做二次校验。
⑤ 第4步返回校验通过/失败到产品应用后端，再返回到前端
包含滑动拼图、文字点选两种方式，UI支持弹出和嵌入两种方式。后端提供Java实现，前端提供了php、angular、html、vue、uni-app、flutter、android、ios等代码示例。
gitee.com交互流程
① 用户访问应用页面，请求显示行为验证码
② 用户按照提示要求完成验证码拼图/点击
③ 用户提交表单，前端将第二步的输出一同提交到后台
④ 验证数据随表单提交到后台后，后台需要调用captchaService.verification做二次校验。
⑤ 第4步返回校验通过/失败到产品应用后端，再返回到前端
展开
评论
2