在线工具 - 一键获取下载抖音无水印视频、抖音去水印解析工具、下载抖音无水印高清图集【2024 最新】
一键获取下载抖音无水印视频、抖音去水印解析工具、下载抖音无水印高清图集。支持移动端、PC 端分享、PC 端直接复制等链接解析。
bilibili-哔哩哔哩 B站 封面提取在线工具
哔哩哔哩 B站 封面提取在线工具
在线一键获取百度云盘万能钥匙，百度云盘、蓝奏网盘、天翼云盘密码 提取码查询【2024/09 更新】
支持百度网盘、新浪微盘、蓝奏云盘、城通网盘，彩云网盘，天翼云盘的提取码查询
npm、yarn、pnpm 设置最新国内镜像源（附官方镜像源和最新阿里源），以及 nrm 的使用教程
阿里最近（指的是 2022 年~~ 哈哈）更换了淘宝镜像的域名，原域名的 SSL 证书已经过期了（2024/01/22），最近使用旧 淘宝镜像 的应该都遇到 Error: certificate has expired 了吧，遇到了可以看下这个解决方案~ npm查询源npm get registry 设置源# 国内 淘宝 镜像源 npm config set registry https://registry.npmmirror.com/ # 官方镜像源 npm config set registry https://registry.npmjs.org/ pnpm pnpm 的镜像源默认 查询源pnpm get registry 设置源# 国内 淘宝 镜像源 pnpm config set registry https://registry.npmmirror.com/ # 官方镜像源 pnpm config set registry https://registry.npmjs.org/ yarn查询源yarn config get...
Web 安全中的 Secure Contexts（安全上下文）- 解决在本地中使用 clipboard 或 Crypto 等 API 限制或关闭上下文限制
Secure Context - 安全上下文在 window 或 worker 中使用一些涉及 用户隐私、一些数据访问或计算机的低级访问权限等相关 API 时，为了防止 中间人攻击者 访问这些接口，从而限制需要在 安全上下文 中使用 上下文在什么情况下是安全的？ 本地资源：http://127.0.0.1、http://localhost、http://*.localhost 或 file:// 协议的资源是安全的 非本地资源：通过 TLS 传输的，例如 https:// 或 wss:// 协议的资源是安全的 使用 window 和 worker 属性来判断当前是否在安全上下文中可以通过 Window.isSecureContext 或 WorkerGlobalScope.isSecureContext true 或 false 来判断是否处于安全上下文中。 if (window.isSecureContext) { // 页面在安全上下文中，所以 service worker 可用 ...
使用 serve 配合 openssl 或 mkcert 创建本地自签名可信任的证书 - 创建本地 TLS\SSL https 协议服务
serveserve 可以快速启动一个静态网站或 SPA 应用，或只是静态文件服务，可在本地或局域网内使用 使用安装 pnpm install -g serve 启动服务，默认端口 3000 # 当前目录启动静态文件服务 serve # 指定目录启动 serve ./public # 指定端口 serve -p 8080 启动 SPA 应用服务，例如 React 或 Vue 中的 history 模式 # 在当前目录 build 文件启动服务 serve -s build serve -s dist 启动 SSL\TLS 服务 --ssl-cert：证书路径 --ssl-key：证书密钥路径 serve --ssl-cert cert.pem --ssl-key key.pem # or serve --ssl-cert ~/ssl/cert.pem --ssl-key ~/ssl/key.pem 创建本地 SSL 证书opensslwindows 系统需要自行安装 # -nodes: No DES 加密 # -days...
【CSS】解决在 flex 容器中使用 align-content 或 justify-content 属性 center 居中时的溢出滚动和截断问题 - 理解 safe 关键字
场景在布局时，我们经常使用 flex 来实现居中效果。例如下图场景，可能是平时比较常见的，列表中的子元素居中效果。 <style> .flex-wrap { display: flex; align-items: center; justify-content: center; width: 300px; height: 150px; & > div { width: 100px; height: 80px; } } </style> <div class="flex-wrap"> <div>1</div> <div>2</div> </div> 当 flex 容器限制了宽度，且内容不够 flex 元素分配时，此时 flex 元素将会溢出容器。 使用 overflow出现上述情况时，可能第一反应是给 flex 容器添加 overflow-y: auto...
【React Router】v6 data router 在非组件（或工具方法）中如何优雅的跳转路由
上集回顾如果你还在 v5 ？那么恭喜你：【React Router v5】在非组件（或工具方法）中如何优雅的跳转路由 在 data router 中如何优雅的跳转路由？因为 router 对象返回了 navigate 方法，所以可以直接调用 // history.js export const routes: ReturnType<typeof createBrowserRouter> = createBrowserRouter([ { path: '/', element: <Home />, }, { path: '/login', element: <div>login</div>, }, ]); // Home.js import { routes } from '../history.tsx'; const Home = () => { return ( <div> ...
【React】为什么路由跳转时页面滚动高度不会被重置（保留上个页面高度）？理解 history scrollRestoration 的场景与使用，以及如何使用 React Router 重置和跳转前保留滚动高度
平时开发过程中，使用 react router 等单页应用跳转路由时，会发现当前页面在拥有滚动高度时，跳转的下个页面同样会保留上个页面的滚动高度（保留最小滚动高度），或者刷新、前进后退时仍会保留上次的滚动高度。 在某些场景下，我们需要重置滚动高度，比如列表页进入详情页，相反的情况下又需要保留高度。需要确定浏览器对于滚动的处理，可以先看下，其在原生中的滚动场景表现。 哪些场景浏览器会恢复滚动高度？哪些场景会重置高度？下面内容皆为 Chrome 浏览器对于滚动高度的处理测试，请注意时效性和不同设备及浏览器之间的差距。 前置场景与条件html 中能触发滚动的长列表页和详情页（文档滚动），使用 window.location.href 和 history.back() 或 history.go() 等来测试跳转场景下的滚动条情况。 列表页进入详情页和当前页面刷新时左为使用 a 标签，右为使用 location.href 的资源跳转效果。 ...
【React】在本地 Html 中快速 debug（调试）React 源码
本地构建 React 环境复制需要 debug 的 React development.js 源码至本地，替换引用即可。 reactstart-a-new-react-project <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://unpkg.com/react@18/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <!-- Don't use this in production: --> <script...
最新文章