2022-05

每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。

项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。

2022-05

2022-05-30[工具]

前端写 UI 的时候可能会想找几个图片进行测试，这就需要这个图片没有防盗链。再加上我们有时候还对图片的尺寸有要求，于是就有了各种 image placeholder 服务。比如我今天介绍的这个。

用法非常简单,直接 url 上跟着长宽就行。

https://picsum.photos/200/300

如上就是一个 200 x 300 的图片。如果省略高的话，就是正方形的图片。另外还支持灰度设置，设置具体的图片等等功能。

via: https://picsum.photos/

2022-05-30[网站]

如果你用过 PS，应该知道 PS 可以更改图片的背景。如果是纯色的就更好了。

这个工具就是一个网页版的证件照换底色。支持常见的红色底，蓝色底和白色底三种颜色的互转。

via: https://www.bgconverter.com/

2022-05-29[网站]

一个可以帮助你制作 logo 的工具，我记得我的力扣加加的 logo 就是用它做的？

via: https://www.designevo.com/cn/logo-maker/

2022-05-28[网站]

一个可以查询化妆品成分的网站。

via: https://cosdna.com/chs/product.php

2022-05-27[工具]

一个可以帮你查看其他扩展程序源码的工具。不过这个源码可能是编译后的代码，因为上传到 chrome 商店的就有可能是编译后的代码。

无论如何，它能帮你查看和下载作者提交到 chrome 商店的代码。

via: https://chrome.google.com/webstore/detail/chrome-extension-source-v/jifpbeccnghkjeaalbbjmodiffmgedin

2022-05-26[仓库]

一个基于 React 的后台管理系统的 UI。基于它，你可以快速开发同一个后台管理系统。

via: https://github.com/adrianhajdin/project_syncfusion_dashboard

2022-05-25[好文]

一个关于部署的专栏，其中有一章比较有意思，就是根据分支不同，部署到不同的地方，能通过不同的 URL 地址访问。

比如:

feature-preview 分支部署在 https://feature-preview.lucifer.ren
feature-prod 分支部署在 https://feature-prod.lucifer.ren

via: https://q.shanyue.tech/deploy/ci-preview.html

2022-05-24[仓库]

ya-webadb（yet another webadb）是一个在 web 上操作安卓设备的工具。注意是操作安卓设备，不是调试安卓设备上的网页。

比如你可以通过它截屏，安卓 apk 应用，开关机等等操作。

via: https://github.com/yume-chan/ya-webadb

2022-05-23[仓库]

得益于无头浏览器（headless browser），我们可以对 UI 进行自动化测试。

也因为无头浏览器，我们可以自动化检测应用可能的内存泄漏。原理也很容易，使用无头浏览器打开网页，然后使用浏览器的相关 api 检测堆内存，通过对比不同时间内存使用情况从而检查出潜在的内存泄漏。

这款工具就可以捕获浏览器的堆内存使用情况。

使用起来也非常简单：

const browser = await Puppeteer.launch();
const page = await browser.newPage();

await page.goTo("https://google.com");

const heapSnapshot = await captureHeapSnapshot(await page.target());

via: https://github.com/adriancooney/puppeteer-heap-snapshot

2022-05-22[好文]

原文标题：《Tree shaking 问题排查指南来啦》，这是字节团队出品的好文，应用价值比较高，如果你有类似的需求，那么有很大的参考价值。

via: https://mp.weixin.qq.com/s/SfZbBg0lWhvgzS023wTjYA

2022-05-21[仓库]

一个可以美化你 Github Profile 页面的资料集合。

我的 Github Profile 所有内容都被这个仓库收录了。

via: https://github.com/rzashakeri/beautify-github-profile

2022-05-20[工具]

国内音乐这块网易云很受欢迎。因此有很多针对网易云的工具。

比如这款将其他平台版权的歌曲收录到网易云的，表现上就是你可以在网易云听网易没版权（灰色）的歌曲。

via: https://github.com/nondanee/UnblockNeteaseMusic

另外还有网友做了网易云的 sdk 供大家使用，你可以用它搭建自己的音乐客户端。

via: https://github.com/Binaryify/NeteaseCloudMusicApi

2022-05-19[工具]

一个老照片修复的工具。

之前听过有人利用这个信息差，有偿给别人修复老照片赚翻了，不知道真假。不过信息差确实是个好东西。我们每个人都生活在信息差中。

via: https://jpghd.com/

2022-05-18[网站]

一个云逛街网站，可以去世界各地云旅游。国内有好几个地方可以去，比如长沙，重庆，成都。

如下是我云旅游东京的效果：

PS：似乎有点吃性能

via: https://citywalks.live/

2022-05-17[好文]

一个没啥用的正则，功能是识别一个数字是否是质数。除了炫酷之外，应该没什么其他用了。

/^1?$|^(11+?)\1+$/;

大概原理是使用正则的回溯机制，具体大家可以看看这篇文章。

via: https://www.noulakaz.net/2007/03/18/a-regular-expression-to-check-for-prime-numbers/

2022-05-16[技巧]

两行命令可以审查 macos 系统 UI。

defaults write NSGlobalDomain WebKitDeveloperExtras -bool true
defaults write -g WebKitDeveloperExtras -bool YES

via: https://blog.jim-nielsen.com/2022/inspecting-web-views-in-macos/

2022-05-15[仓库]

微软出品的前端基础学习资料。话说微软在技术入门资料这块发力不少啊？刚看完 Python，前端又出来了。

via: https://github.com/microsoft/Web-Dev-For-Beginners

2022-05-14[好文]

Web 可以读取 USB 数据？可以通过蓝牙进行数据传输？还能用 NFC?

这份资料讲解了 web （这里是 chrome 为例）如何与硬件进行交互。

via: https://web.dev/devices/

2022-05-13[网站]

Google 开发的前端学习网站，用于谷歌技术布道(给自己打广告)以及一些学习资料。强烈建议前端开发者关注。

via: https://web.dev/

2022-05-12[仓库]

在 JS 中调用 Python。不仅支持 python 的语法，还支持 python 的三方库。

比如你想用 numpy 提供的功能，你就可以这样写：

# data.py
import numpy as np

def make_x_and_y(n):
    x = np.random.randn(n)
    y = np.random.randn(n)
    return x, y

然后在 JS 中进行调用。

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <py-env> - numpy - matplotlib - paths: - /data.py </py-env>
  </head>

  <body>
    <h1>Let's plot random numbers</h1>
    <div id="plot"></div>
    <py-script output="plot">
      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
    </py-script>
  </body>
</html>

via: https://github.com/pyscript/pyscript

2022-05-11[好文]

如果公司有一个公共的代码需要在多个项目间使用，你的做法是什么？复制粘贴？npm？cdn + external？你可以试试 webpack5 中的 Module Federation！

via: https://mp.weixin.qq.com/s?__biz=Mzg2MDY5MTMxOA==&mid=2247485894&idx=1&sn=debfda7356d2d3098c78bd0f436c1510

2022-05-10[好文]

如何落地一个客户机器人？这个文章告诉你。

这个文章是那种实战型的，没有理论基础讲解。因此如果你有类似需求的话倒是可以读一下。或者收藏一下等到用的时候借鉴一下。如果你纯粹想知道技术原理的话，这篇文章不是很适合。

via: https://zoo.team/article/intelligent-robot

2022-05-09[工具]

客户遇到问题了，如何远程调试？devtools-remote 这个工具帮助你。

客户只需要安装这个插件，然后你在自己的应用中进行集成即可。

其原理很简单，代码也只有短短的 200 行左右。核心原理是利用 CDP（chrome devtool protocol）和远程通信，将本地的支持 CDP 应用的信息同步到远程。其实就是一个调试代理。

值得注意的是这个工具仅支持 支持 CDP 的客户端，比如 chrome。如果客户端不支持 CDP 是不行的。

via: https://github.com/auchenberg/devtools-remote

2022-05-06[好文]

文章标题：Using GitHub Actions to get notified when an API response (or web page) changes

如果你想监控一个网页的状态你会怎么做？比如抢购一个商品？

最简单的思路就是写一个脚本不断轮训。如果没有现成接口，也可以使用爬虫来做。

这篇文章就是类似的思路，只不过其借助了 Github Action 这个自动化工具来完成。

这个是作者使用的完整 github action 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 "<URL YOU WANT TO CHECK HERE>" -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: https://ben.balter.com/2021/12/15/github-actions-website-api-change-notification/

2022-05-05[好文]

我们常常听说某某网站被注入恶意 JS 脚本，造成 xxx 的严重后果。但是你听过 CSS 也可以用来攻击么？

CSS 不仅可以窃取你的访问记录，知道你访问了哪些网站，还能窃取你的密码，从而造成更严重后果。

文章讲的 CSS 攻击技巧很有趣，同时也给我们提了一个醒，大家上网的时候多多留意，做好防范。

via:

2022-05-04[技巧]

测试用例可以通过 only 和 skip 实现仅测试部分测试用例。主流测试框架都支持它们。

describe.skip("skip test", () => {});
// or
it.skip("skip test", () => {});

describe.only("only test", () => {});
// or
it.only("only test", () => {});