import matplotlib.pyplot as plt from data import make_x_and_y x, y =
make_x_and_y(n=1000) fig, ax = plt.subplots() ax.scatter(x, y) fig
```
via:
### 2022-05-11\[好文]
如果公司有一个公共的代码需要在多个项目间使用，你的做法是什么？ 复制粘贴？npm？cdn + external？ 你可以试试 webpack5 中的 Module Federation！
via:
### 2022-05-10\[好文]
如何落地一个客户机器人？这个文章告诉你。
这个文章是那种实战型的，没有理论基础讲解。因此如果你有类似需求的话倒是可以读一下。或者收藏一下等到用的时候借鉴一下。如果你纯粹想知道技术原理的话，这篇文章不是很适合。
via:
### 2022-05-09\[工具]
客户遇到问题了，如何远程调试？devtools-remote 这个工具帮助你。
客户只需要安装这个插件，然后你在自己的应用中进行集成即可。
其原理很简单，代码也只有短短的 200 行左右。核心原理是利用 CDP（chrome devtool protocol） 和远程通信，将本地的支持 CDP 应用的信息同步到远程。 其实就是一个调试代理。
值得注意的是这个工具仅支持 **支持 CDP 的客户端**，比如 chrome。如果客户端不支持 CDP 是不行的。
via:
### 2022-05-06\[好文]
文章标题：Using GitHub Actions to get notified when an API response (or web page) changes
如果你想监控一个网页的状态你会怎么做？比如抢购一个商品？
最简单的思路就是写一个脚本不断轮训。如果没有现成接口，也可以使用爬虫来做。
这篇文章就是类似的思路，只不过其借助了 Github Action 这个自动化工具来完成。
这个是作者使用的完整 github action yml 文件：
```yml
on:
schedule:
# Run every hour, on the hour. This can be customized to checking as frequently as every 5 minutes.
- cron: "0 * * * *"
name: Check for changes
jobs:
check:
runs-on: ubuntu-latest
steps:
# Use cURL to fetch the given URL, saving the response to `data.json`
- name: Fetch data
run: curl "" -o data.json
# Optionally, use `jq` to pull one or more fields from the JSON to include in the SMS message
- name: Parse data
id: parse_data
run: echo '::set-output name=someField::'$(jq -r '.someField' data.json)
# Compare the response to the previous run, using a hash of the response as the cache key
- name: Fetch Cache
id: cache
uses: actions/cache@v2
with:
path: data.json
key: ${{ hashFiles('data.json') }}
# If there was not a cache hit (meaning the response changed), notify me via text message
# See https://github.com/twilio-labs/actions-sms for setup instructions
# You could use a different notification action here, so long as you include the `if` condition below
- name: Notify if data has changed
uses: twilio-labs/actions-sms@v1
if: steps.cache.outputs.cache-hit != 'true'
env:
TWILIO_ACCOUNT_SID: ${{ secrets.TWILIO_ACCOUNT_SID }}
TWILIO_API_KEY: ${{ secrets.TWILIO_API_KEY }}
TWILIO_API_SECRET: ${{ secrets.TWILIO_API_SECRET }}
with:
fromPhoneNumber: ${{ secrets.from_phone }}
toPhoneNumber: ${{ secrets.to_phone }}
message: "There's been a change! someField is now ${{ steps.parse_data.outputs.someField }}."
```
via:
### 2022-05-05\[好文]
我们常常听说某某网站被注入恶意 JS 脚本，造成 xxx 的严重后果。但是你听过 CSS 也可以用来攻击么？
CSS 不仅可以窃取你的访问记录，知道你访问了哪些网站，还能窃取你的密码，从而造成更严重后果。
文章讲的 CSS 攻击技巧很有趣，同时也给我们提了一个醒，大家上网的时候多多留意，做好防范。
via:
* [Can you get pwned with CSS?](https://scotthelme.co.uk/can-you-get-pwned-with-css/)
* [Retrieving your browsing history through a CAPTCHA](https://varun.ch/history)
### 2022-05-04\[技巧]
测试用例可以通过 only 和 skip 实现仅测试部分测试用例。主流测试框架都支持它们。
```js
describe.skip("skip test", () => {});
// or
it.skip("skip test", () => {});
describe.only("only test", () => {});
// or
it.only("only test", () => {});
```
具体来说，skip 可以跳过测试用例。only 可以只测试部分测试用例。
### 2022-05-03\[网站]
actual 是最近上 Github trending 的一个仓库。
它的核心理念是**本地优先，并尽可能和网络进行同步**，这和常规的网络系统是相反的。
如下图是我本地部署 actual 后的效果。
如果你满足以下两点，那么可以考虑使用这个支持私有化部署的**个人记账理财工具**。
1. 对信息比较敏感，不想把信息存到别人的服务器或者希望自己的数据放在自己机器
2. 想增加一些特别定制化的功能
相反，如果这两点你都不是特别在意，使用目前现有的记账理财软件也是 ok 的。
via:
### 2022-05-02\[仓库]
一个后台管理系统的前端 UI。我之前的公司内部的系统就和这个长的几乎一样。如果当时直接拿过来用，岂不是省了很多时间么？
via:
### 2022-05-01\[工具]
一个可以下载咪咕音乐曲库的 cli 工具。
via:
## 关注我
我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
