最新 - 每日一荐

Search…
最新
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
在线阅读：https://leetcode-solution-leetcode-pp.gitbook.io/mz-ri-yi-jm/
电子书文件太大， 大家可到我的公众号《脑洞前端》回复“每日一荐”获取。
​📰
   RSS
大家可以用 Github 提供的 RSS 来订阅我的仓库更新。
新鲜出炉 (2022-05)
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 检测堆内存，通过对比不同时间内存使用情况从而检查出潜在的内存泄漏。
这款工具就可以捕获浏览器的堆内存使用情况。
使用起来也非常简单：
1
const browser = await Puppeteer.launch();
2
const page = await browser.newPage();
3
​
4
await page.goTo("https://google.com");
5
​
6
const heapSnapshot = await captureHeapSnapshot(await page.target());
Copied!
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
/^1?$|^(11+?)\1+$/;
Copied!
大概原理是使用正则的回溯机制，具体大家可以看看这篇文章。
via: https://www.noulakaz.net/2007/03/18/a-regular-expression-to-check-for-prime-numbers/
2022-05-16[技巧]
两行命令可以审查 macos 系统 UI。
1
defaults write NSGlobalDomain WebKitDeveloperExtras -bool true
2
defaults write -g WebKitDeveloperExtras -bool YES
Copied!
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 提供的功能，你就可以这样写：
1
# data.py
2
import numpy as np
3
​
4
def make_x_and_y(n):
5
    x = np.random.randn(n)
6
    y = np.random.randn(n)
7
    return x, y
Copied!
然后在 JS 中进行调用。
1
<html>
2
  <head>
3
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
4
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
5
    <py-env> - numpy - matplotlib - paths: - /data.py </py-env>
6
  </head>
7
​
8
  <body>
9
    <h1>Let's plot random numbers</h1>
10
    <div id="plot"></div>
11
    <py-script output="plot">
12
      import matplotlib.pyplot as plt from data import make_x_and_y x, y =
13
      make_x_and_y(n=1000) fig, ax = plt.subplots() ax.scatter(x, y) fig
14
    </py-script>
15
  </body>
16
</html>
Copied!
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 文件：
1
on:
2
  schedule:
3
    # Run every hour, on the hour. This can be customized to checking as frequently as every 5 minutes.
4
    - cron: "0 * * * *"
5
​
6
name: Check for changes
7
​
8
jobs:
9
  check:
10
    runs-on: ubuntu-latest
11
    steps:
12
      # Use cURL to fetch the given URL, saving the response to `data.json`
13
      - name: Fetch data
14
        run: curl "<URL YOU WANT TO CHECK HERE>" -o data.json
15
​
16
      # Optionally, use `jq` to pull one or more fields from the JSON to include in the SMS message
17
      - name: Parse data
18
        id: parse_data
19
        run: echo '::set-output name=someField::'$(jq -r '.someField' data.json)
20
​
21
      # Compare the response to the previous run, using a hash of the response as the cache key
22
      - name: Fetch Cache
23
        id: cache
24
        uses: actions/[email protected]
25
        with:
26
          path: data.json
27
          key: ${{ hashFiles('data.json') }}
28
​
29
      # If there was not a cache hit (meaning the response changed), notify me via text message
30
      # See https://github.com/twilio-labs/actions-sms for setup instructions
31
      # You could use a different notification action here, so long as you include the `if` condition below
32
      - name: Notify if data has changed
33
        uses: twilio-labs/[email protected]
34
        if: steps.cache.outputs.cache-hit != 'true'
35
        env:
36
          TWILIO_ACCOUNT_SID: ${{ secrets.TWILIO_ACCOUNT_SID }}
37
          TWILIO_API_KEY: ${{ secrets.TWILIO_API_KEY }}
38
          TWILIO_API_SECRET: ${{ secrets.TWILIO_API_SECRET }}
39
        with:
40
          fromPhoneNumber: ${{ secrets.from_phone }}
41
          toPhoneNumber: ${{ secrets.to_phone }}
42
          message: "There's been a change! someField is now ${{ steps.parse_data.outputs.someField }}."
Copied!
via: https://ben.balter.com/2021/12/15/github-actions-website-api-change-notification/
2022-05-05[好文]
我们常常听说某某网站被注入恶意 JS 脚本，造成 xxx 的严重后果。但是你听过 CSS 也可以用来攻击么？
CSS 不仅可以窃取你的访问记录，知道你访问了哪些网站，还能窃取你的密码，从而造成更严重后果。
文章讲的 CSS 攻击技巧很有趣，同时也给我们提了一个醒，大家上网的时候多多留意，做好防范。
via:
​Can you get pwned with CSS?​
​Retrieving your browsing history through a CAPTCHA​
2022-05-04[技巧]
测试用例可以通过 only 和 skip 实现仅测试部分测试用例。主流测试框架都支持它们。
1
describe.skip("skip test", () => {});
2
// or
3
it.skip("skip test", () => {});
4
​
5
describe.only("only test", () => {});
6
// or
7
it.only("only test", () => {});
Copied!
具体来说，skip 可以跳过测试用例。only 可以只测试部分测试用例。
2022-05-03[网站]
actual 是最近上 Github trending 的一个仓库。
它的核心理念是本地优先，并尽可能和网络进行同步，这和常规的网络系统是相反的。
如下图是我本地部署 actual 后的效果。
如果你满足以下两点，那么可以考虑使用这个支持私有化部署的个人记账理财工具。
1.对信息比较敏感，不想把信息存到别人的服务器或者希望自己的数据放在自己机器
2.想增加一些特别定制化的功能
相反，如果这两点你都不是特别在意，使用目前现有的记账理财软件也是 ok 的。
via: https://github.com/actualbudget/actual
2022-05-02[仓库]
一个后台管理系统的前端 UI。我之前的公司内部的系统就和这个长的几乎一样。如果当时直接拿过来用，岂不是省了很多时间么？
via: https://github.com/HalseySpicy/Geeker-Admin
2022-05-01[工具]
一个可以下载咪咕音乐曲库的 cli 工具。
via: https://github.com/zonemeen/musicn
历史汇总
​SUMMARY​
关注我
我重新整理了下自己的公众号，并且我还给它换了一个名字脑洞前端，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 脑洞前端 ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
​
​
大家也可以加我微信好友进行交流！
贡献
如果有想法和创意，请提 issue 或者进群提
如果想贡献代码，请提 PR​
如果需要修改项目中图片，这里 存放了项目中绘制图的源代码， 大家可以用 draw.io 打开进行编辑。
License
​Apache-2.0​