【CSS】主流 UI 库都在用的逻辑伪类选择器 not、where、is、has
目前 Css 关于逻辑选择器：:not、:is、:where、:has，除了 :has 比较新以外，其他选择器在一些 UI 库中都有广泛的使用，浏览器基本都已经支持了，一起卷起来，使用更先进的选择器~ :notMDN: :not() CSS 伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。 <ul class="css-selectors selector-not"> <li>1</li> <li>2</li> <li>3</li> </ul> .selector-not { li:not(:first-child) { border: 1px solid red; } } .css-selectors { margin: 20px auto; width: 50%; border: 1px solid #000; } ...
hexo-seo-submit，Hexo 博客 SEO 优化插件 - 每日定时自动或手动提交链接至百度、Bing、Google，支持 Github Actions 和 Coding Jenkins 等CI（Hexo 插件编写）
前言hexo-seo-submit 插件，支持在 Github 和 Coding 平台中每天自动提交你的最新文章链接（或本地手动）至搜索引擎，让搜索引擎更快的收录你的文章。同样也支持命令行调用，支持多种场景~ 插件由 typescript 编写，支持自动部署。有编码能力且有需求的话可以提 PR 哦~ 现在很多插件都支持了 actions 中的自动化，由于早期入手 Hexo 时，追求访问速度（双线部署）选择 coding部署静态资源，也由于距离 github 过于遥远的原因~ 时常连接不上他。哈哈，coding 虽然有优点不多，总归离得近~ 点点 Star，感谢感谢~~ hexo-seo-submit 需要开发 Hexo 插件吗？需要快速开发 Hexo 插件的同学，可以使用 corgii 快速生成插件模板，支持 typescript 哦 pnpm dlx corgii@latest <folder-name> # or pnpm dlx corgii@latest .hexo-seo-submit-tags > p { ...
【CSS】CSS-Nesting：CSS 嵌套写法 —— 有望替代 less sass 的原生嵌套
现在 CSS 也有了嵌套写法，“不再需要” less sass 等预处理器，原生 CSS 就可以实现嵌套写法，可以减少代码量，提高代码可读性，让 CSS 更加优雅~哦，没人写 css 了是吧 QAQ CSS-Nesting 从 Chrmoe 112 开始，原生 CSS 就可以支持嵌套语法了（你不会还是旧版本吧？？？？） 语法 MDN 示例 /* Without nesting selector */ parent { /* parent styles */ child { /* child of parent styles */ } } /* With nesting selector */ parent { /* parent styles */ & child { /* child of parent styles */ } } /* the browser will parse both of these as...
【windows 11】使用 wePe 纯净 制作pe启动盘 安装\重装\升级 windows 11（windows 10）详细教程，附 windows 11 跳过联网、分区等教程
本篇将带你了解如何制作 pe 盘，以及如何使用 pe 盘安装 windows 系统（版本通用），相关安装问题直接：windows安装问题 PEPE 可理解为一个轻量的操作系统，可直接运行在 U 盘、硬盘等设备上，一般可以在 Pe 内分区、清除密码等功能。我们从市面上搜索到制作 pe 启动盘的网站和windows镜像都充斥着广告和臃肿的软件，一不小心系统就成”下崽器”了~ 使用 wepe 工具箱 制作 pe 启动盘准备工作 一个 8G 或以上的 U 盘 下载 wepe 工具箱（V2.0 64位） 新版 MSDN 下载 纯净 windows 11 镜像，直接选第一个打开迅雷下载即可（win 10 同理） 制作 pe 启动盘 插入 U 盘，打开下载好的 wepe 工具箱，在 其他安装方式 内选择 安装 PE 到 U盘 选项就默认即可满足，待写入U盘 选择需要写入的 U 盘即可。（U 盘卷标 为启动项名称，可不改记住就行~）, 点击 立即安装进U盘将开始制作。 制作好之后你的 u...
【webpack】Externals（外部扩展）浅析 - webpack 5
本篇主要介绍 webpack 中的 externals 如何使用，顺带浅析一下 webpack 内部实现。 Externals对于 Externals 就不过多描述了，蹭下热度，把这个问题交给 AI 小助手。 使用 Externals项目目录在 codesandbox 中预览项目，run build or build-externals |--pages/ | |--A.js |--App.js |--index.js |--webpack.config.js // Pages/A.js import React from "react"; import { get } from "lodash"; import { Button } from "antd"; const A = () => { const obj = { a: 1 }; return ( <div> <Button onClick={() =>...
【Windows】一句话（一键、一分钟、一段代码）清除 Windows 11（10） 快捷方式角标（小箭头）
这标题你还不进来？关键词 拿捏 🤌 bat 脚本复制下面这段代码，新建记事本，粘贴，重命名扩展为 bat，管理员打开运行即可 reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Shell Icons" /v 29 /d "%systemroot%\system32\imageres.dll,197" /t reg_sz /ftaskkill /f /im explorer.exeattrib -s -r -h "%userprofile%\AppData\Local\iconcache.db"del "%userprofile%\AppData\Local\iconcache.db" /f /qstart explorerpause 注册表修改 Win + R 打开运行窗口，输入...
【Git】cherry-pick 使用场景介绍，如何在 WebStorm 中使用 cherry-pick；（从分支中提取 commit 功能）
在正常迭代中或多或少遇到过需要将当前迭代的某一功能提前发布的需求（点名批评产品~），要是按功能建的分支的话直接 merge 或 rebase 就可以了，若分支管理不规范或者真的只需要当前分支的部分代码时 cherry-pick 就派上用场了 cherry-pick usagegit cherry-pick 将指定的 commit 应用于当前分支，并在当前分支产生新的 commit 且生成新的 commit hash Eg:代码仓库模型：master 和 feature a - b - c - d Master \ e - f - g Feature 现在将 Feature 分支的 commit f 提取到 master 分支 git cherry-pick f Result: a - b - c - d - f Master \ e - f - g Feature 如何在 Master 分支拿到 Feature 分支的 commitHash 呢？小 Tips： # target 一般为...
【message-channel】了解频繁出现在框架的 Message Channel，及在事件循环（Event Loop）中的表现
最近在 GitHub 上”学习”的时候发现了别人在用 MessageChannel，这个 Api 很少见（没见过）基本不了解如何使用，搜了下 发现 React 和 Vue 都使用过~ 这不学习学习跟同事小装一手？ 介绍 Message ChannelMessage Channel 允许两个不同的脚本运行在同一个文档的不同浏览器上下文（例如两个 Iframe，文档主体和 Iframe，worker 之间或 window.open 的窗口）来直接通讯，在每一端使用一个端口（port）通过双向频道（Channel）来传递信息。 Message Channel 是以 Dom Event 的形式发送信息，属于异步的宏任务。 使用 使用 MessageChannel() 构造函数来创建通讯信息，获取两个端口的 Message Port 对象：Port1、Port2 端口之间可以互相通信 端口接受到无法被序列化的消息时，使用 onmessageerror 处理 使用 close 关闭端口 示例const { port1, port2 } = new...
【web-worker】浅析 useWorker 库如何只需函数方法即可在 worker 内运行；如何区分 Web Socket、Web Worker和Service Worker？
最近在看 useWorker 库的时候发现该 hook 只需传入函数即可运行，虽然说 worker 不经常使用，但是就酱紫直接用不需要一个 js 文件承接？ 来看看 MDN 中如何创建一个 Worker var myWorker = new Worker('worker.js'); 再看看 useWorker 如何使用 useWorker Usageimport React from 'react'; import { useWorker } from '@koale/useworker'; const numbers = [...Array(5000000)].map((e) => ~~(Math.random() * 1000000)); const sortNumbers = (nums) => nums.sort(); const Example = () => { const [sortWorker] = useWorker(sortNumbers); const runSort = async () =>...
【React】理解学习 React 17中的批处理 与 18 批处理
最近在看 React 18 时，发现 18 已经默认将你的状态更新进行批处理了，不需要再像 16、17 内使用 unstable_batchedUpdates 这种 Hack Api 了～ 什么是批处理？批处理是将多个状态更新分组到单个 re-render 内，以获得更好的性能操作。 比如在同一个点击事件内更新两个 state，React 将会把它们分到一个 render 内重新渲染，看下方 demo 内的 console 可体现。 17 Batch Demo：批处理 在多个状态更新的时候，批处理可以避免不必要的重新渲染。然而在旧版本内何时批处理也并不完全一致，比如在 click 内去请求数据后再更新 state，此时 react 则不会批量更新，而是进行两次独立的更新 17 Batch Demo: 不批处理外部事件处理程序（注意 render 次数） 在 React 18 之前，React 只在事件处理程序期间批量更新。默认情况下，React 不会对 Promise、setTimeout、原生事件处理程序（native event...
最新文章
