背景 有一天 PM 跟我说，你看下这个 Popover 。为什么它的箭头没有阴影？ 我瞅了一眼 CSS： .tooltip { position: relative; box-shadow: 0px 4px 4px 0 rgba(0, 0, 0, 0.5); padding: 4px 6px; display: inline-block; margin: 4px; background: #fff; } .tooltip::after { content: ""; position: absolute; width: 0; height: 0; left: 50%; margin-left: -3px; bottom: -12px; border: 6px solid black; border-color: #fff transparent transparent transparent; } 没毛病，我又没给箭头加阴影。如果箭头要有阴影，需要为箭头加一些额外的样式： .tooltip::after { transform: rotate(-45deg); border-color: transparent transparent #fff #fff; transform-origin: 0 0; box-shadow: -4px 4px 4px 0 rgba(0, 0, 0, 0....

flex: 1 有什么作用？ 先来看一个简单的例子。 <div class="container"> <div class="menu"></div> <div class="main"></div> </div> .container { display: flex; width: 300px; height: 200px; border: 1px solid red; } .menu { flex: 0 0 100px; background-color: gray; } .main { flex: 1; background-color: darkseagreen; } 效果截图： 以上效果可以点击这里查看：传送门 从代码效果可以看出 .main 元素的宽占据了父元素除 .menu 元素外的剩余宽度。 flex: 1 的实际渲染属性 打开 Chrome 控制台可以看到： flex: 1 实际上代表三个属性： flex-grow: 1 flex-shrink: 1 flex-basis: 0% MDN 上关于 flex: 1 这种 One value 的情况。...

背景 由于最近一段时间因为脚伤不得不在家办公，只能通过 VPN 访问公司的内网服务。但使用公司的 VPN 软件免不了每次需要输入 password 以及后续的 one-time password，甚至有的时候 VPN 软件总是会莫名其妙的崩溃，导致我不得不多次执行繁琐的操作。 使用命令行工具 为了解决这个问题，我用 openfortivpn 替换了公司的 VPN 软件，这样我就可以在命令行里写死 password。至于 one-time password 可以用 oathtool。 Surge 但做到这一步还不够，因为我用 Surge 做无障碍网络访问，所以我的网络要求会更高一点。我期望： 内网服务走 VPN 外网服务走 Surge 的规则 经过摸索，我在 Surge 上新增了一个 🔐 CorpVPN 节点： [Proxy] 🔐 CorpVPN = direct, interface=ppp0, allow-other-interface=true 简单解释下这行配置： 🔐 CorpVPN 节点强制走 ppp0 网络接口，如果 ppp0 不可用走默认的网络接口。 然后在 Rule 配置内网服务。 因为 Surge 接管了 DNS 所以还需要加上内网服务的 DNS server。 总结 Surge 的社区做的比较好，有什么问题基本都能在上面得到答案。🔐 CorpVPN 这段配置更是写在了官方手册上，解决这个问题的难点是如何写命令行的参数使其于 Surge 共存。...

背景 在前端项目开发过程中，快速定位 DOM 元素对应的源码对于开发者来说非常重要。通常，开发者可能会根据 DOM 元素的 class 名称或文案来查找。然而，LocatorJS 作为一款优秀的工具，能够帮助您快速定位源码。 了解 click-to-component 在介绍 LocatorJS 之前，我们先来了解一下 click-to-component 这个 npm 包。它的功能是：通过点击浏览器中的 React 组件，就能在 VSCode 中打开对应的源代码。 本文重点在于 LocatorJS，因此仅介绍在 Create React App 中使用 click-to-component 的方法。其他使用方法可参考其官方文档。 首先，在项目中安装 click-to-component： # 可以选择使用 yarn 或 pnpm 安装 npm install click-to-react-component 然后在代码中引入 click-to-component： +import { ClickToComponent } from 'click-to-react-component'; import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; @@ -8,7 +7,6 @@ import reportWebVitals from './reportWebVitals'; const root = ReactDOM....

背景 在日常工作中，我们经常需要 clone 远程的 Git 仓库。 一般我会创建一个文件夹，比如 ~/code。然后在这个文件夹下 clone Git 仓库。 但这样做会导致一些问题： 遇到同名的 Git 仓库，会报 fatal: destination path 'xxx' already exists and is not an empty directory. 的错误。 公司内部的 Git 仓库和开源的 Git 仓库，用户名和邮箱不一样，需要对全局的 Git 配置做修改。 本文将介绍一款自己开源的的 cli 工具：mgre 帮助大家解决这些问题。 如何解决 通过调研发现，已经有一些类似的工具，比如 projj, tanyao 等工具实现了类似的功能。 但是这些工具都有一些问题： projj 已经很久没有更新了，issue 和 pr 都没有人处理。 tanyao 提供的功能比较少，只能 clone 仓库。 所以我决定自己开发一个工具，实现自己想要的功能。 如何使用 mgre 安装 # With pnpm $ pnpm install -g mgre # With yarn $ yarn global add mgre # With npm $ npm install -g mgre Clone 当我们需要 clone 一个仓库时，只需要执行 mgre clone 命令即可，比如...

随着前端实现的业务逻辑愈发复杂，前端单元测试的重要性也水涨船高。 而好的单元测试，不仅能够保证代码质量，还能够提高开发效率。 本文就来谈谈，如何写好前端单元测试。 背景 简单介绍下背景，笔者在工作中负责开发前端 SDK，测试框架使用 jest。 我们项目对代码测试覆盖率有一定的要求，需要满足： { "branches": 80, "functions": 80, "lines": 80, "statements": 80 } 比如我们需要测试这个函数： export const getConfig = (name) => { return { foo: () => {}, name: name || "Anonymous", }; }; 对应的测试用例一般是这样的： describe("getConfig", () => { test("should return name if have the paramter", () => { const name = "zxf4399"; const config = getConfig(name); expect(config.name).toBe(name); }); test("should return default name if doesn't have the paramter", () => { const config = getConfig(); expect(config....

背景 我们团队的小伙伴写了许多的油猴脚本，通过它们的帮助我们减少了许多重复性的工作，让我们可以聚焦更加有意义的事情。但我们团队在油猴脚本上也遇到了一些问题，比如： 使用原生 js 编写代码，不符合现在模块化编程的理念 油猴脚本未放在一个仓库，导致我们需要导入多个油猴脚本 综合以上原因，我们首先考虑的是把现有的脚本统一放在一个仓库内，但是如果要解决第二点的问题，这还不够。我们需要有一套打包方案，把想同功能的脚本代码放在一起，才能让用户不需要启用多个油猴脚本。 是的，通过基于 Webpack 的打包方案我们可以完美解决第一点以及第二点的问题。但有个前提，如果你对油猴脚本熟悉的话，你会了解到油猴脚本有一个 @match 字段。这个字段是用来告诉油猴脚本需要在哪个网页加载这些代码。 那么我们已经可以想到了，我们写的这些油猴脚本不一定都是在同一个网页上运行的。所以就算我们通过 Webpack 聚合了部分想同域名的脚本，其他域名的脚本用户还是会有多次导入的情况，那么我们怎么解决这个问题呢？ 本问将讲述我们团队如何解决油猴脚本迁移问题以及 Chrome 扩展开发时的热更新问题。 问题的思考 油猴脚本提供了许多的能力，@match 定义脚本加载的网页，@run-at 定义脚本的插入时机等。这些能力都来源于油猴扩展，油猴扩展可以管理多个油猴脚本。想到这里，我们之前的问题是不是已经迎刃而解了呢？ 做一个 Chrome 扩展 是的，最终的方案也就是做一个 Chrome 扩展。 我这里先简单介绍一下 Chrome 扩展： Chrome 扩展是一个包含了多个文件的压缩包，由 HTML、CSS、JavaScript、图片以及任何你需要的文件组成，目的是为 Chrome 浏览器添加特定的功能。扩展本质上是一个网页，因此可以使用浏览器为网页提供的 API，扩展还可以操作浏览器内置功能，如书签、下载管理等。 HTML、CSS、JavaScript 这三剑客我想你如果是前端工程师，并不会陌生因为我们工作中都会用到这些技术。但 Chrome 扩展由于定位的特殊性，它还需要一个 manifest.json 文件描述 Chrome 扩展的基础信息，比如名称、版本、图标、权限等等。 以下是一份示例文件： { "name": "My Extension", "description": "A nice little demo extension.", "version": "2.1", "manifest_version": 3, "icons": { "16": "icon_16.png", "48": "icon_48.png", "128": "icon_128.png" }, "background": { "service_worker": "background....

引言 echarts 可以轻松实现数据可视化图表，在工作中我通常使用其 React 封装版本 echarts-for-react 让我们看一下它的封装思路。 简介 echarts-for-react 提供了 option 属性传入图表配置项，API 如下： import ReactEcharts from "echarts-for-react"; import React from "react"; const Component = () => { const getOption = () => { return { title: { text: "ECharts 入门示例", }, tooltip: {}, legend: { data: ["销量"], }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], }, yAxis: {}, series: [ { name: "销量", type: "bar", data: [5, 20, 36, 10, 10, 20], }, ], }; }; return <ReactEcharts option={getOption()} />; }; 与官方 5 分钟上手 Echarts 不同的是，echarts-for-react 不需要设置宽高的实例容器，初始化 echarts 实例，并通过 setOption 方法生成图形。...