视野修炼-技术周刊第25期

欢迎来到第 25 期的【视界修炼 – 技能周刊】，下面是本期的精选内容简介。

强烈推荐

1. 字节前端监控实践
2. React纪录片
3. corejs的未来

开源&东西

4. clack – 年青&漂亮的用于构建CLI的东西
5. BetterDisplay – Mac上调整屏幕参数的小东西
6. wrn-echarts – 在RN中运用ECharts

文章&资讯

7. preact作者教你怎样用js让浏览器变成加载中状态
8. Chrome 重定向30次约束？

​也推荐大家重视一下最后的推荐内容（周刊的主要内容来历渠道）

下面开端本期内容的介绍，预计阅览时刻 9 分钟。

强烈推荐

1. 字节前端监控实践

文章较为具体的讲解了，做一个前端监控体系需要处理的关键问题和处理方案

• js 反常监控
  • 捕获反常
  • 堆栈反解与聚合
  • 过错主动分配
• 性能监控
• 请求&静态资源监控
• 消沉本的接入

其中笔者觉得比较赞的规划是，“报错信息和 commit 关联，主动分配到人”

利用了 git blame 指令（又Get 一个小技巧）能够获取某个文件的前史修正记录，能准确到行

下面是一个git blame package.json运用示例（vitepress仓库）

能够清楚的看到xx行最近修正时刻，谁修正的等等信息

于是结合报错代码文件的行号就能快速的定位到人

2. React纪录片

不方便看视频的，能够直接看文章里课代表的总结，有许多精选又有趣的 Gif 图

前端圈又一视屏高文，能够具体了解到React的发家史，了解到一些现已“入土的前端东西”

• React 是 Facebook 在 2011 年产出（那时候《江南Style》刚刚被上传到油管上，那个时候连前端是啥都不知道，但知道后者）
• 最开端叫 FBolt 其中 F（Functional）表明函数式，Bolt是当时内部开发的另一轮子
• 。。。

emmm还有许多有意思的，这里不展开了，贴一个总结

“一个很棒的处理方案很少是由大型安排所缔造的，通常都是由一个充满热情和远见的人慢慢开端感染其它人。”

3. corejs的未来

core-js 在前端项目里简直无处不在

作者是全职做开源，但之前产生车祸赔了一笔钱还坐了牢，现在缺钱，开源捐赠屈指可数（由于是俄罗斯大兄弟paypal账户也用不了）

作者把各个大公司都挂了一下（证明用了core-js），写了一篇小作文痛诉白嫖

希望社区捐赠一下，不然项目不做了

内容比较多，感兴趣的能够看这个课代表总结 开源项目累积下载量90亿次的开发者穷困潦倒 现在已获得3个比特币捐赠，大概 7w+$ 的资助费（笔者支付宝资助了6.66￥）

开源&东西

4. clack – 年青&漂亮的用于构建CLI的东西

一个辅助开发交互CLI的库，相比 inquirer 更加的年青和漂亮

笔者后续的 Node CLI 有交互的当地都预备用用这个

5. BetterDisplay – Mac上调整屏幕参数的小东西

根底功能：可用于调节屏幕亮度和分辨率（外接显示器再也不用按物理按钮调了）

Mac的朋友能够装上，十分nice的小东西

6. wrn-echarts – 在RN中运用ECharts

58技能开源的库（）

笔者还没深入体验，不过看介绍还是很不错（做RN的朋友能够先保藏吃灰），之前做RN开发图表（C端）都得纯手撸用SVG

文章&资讯

7. preact作者教你怎样用js让浏览器变成加载中状态

function showLoading(p) {
  navigation.addEventListener(
    'navigate',
    e => {
      e.intercept({
        scroll: 'manual',
        handler: () => p,
      })
    },
    { once: true }
  )
  return navigation.navigate(location.href).finished
}
showLoading(new Promise(r=>setTimeout(r,2000)))

尽管可能没什么用，可是很赞

8. Chrome 重定向30次约束？

从阮一峰本周的博客里看到的一个有意思的东西

不知道成果是否牢靠

谷歌了一下，大部分说是20次，写个脚本测验一下

emm 确真实20次的时候有停顿，然后浏览器进行了重试

const http = require('http')
const host = 'http://localhost:3000'
let sum = 1
const server = http.createServer(async (req, res) => {
  const url = new URL(req.url, host)
  const query = Object.fromEntries(url.searchParams.entries())
  if (query.count) {
    console.log(sum++)
    res.setHeader('location', `${host}?count=${+query.count + 1}`)
    res.statusCode = 302
  }
  await new Promise((resolve) => setTimeout(resolve, 100))
  res.end()
})
server.listen(3000)

chatGPT趣图

近段时刻时刻 chatGPT 火出了圈，相关的图收集了一些，共享一下

---

篇幅有限，假如你还没看够，可移步后边的推荐渠道，持续游览，前史周刊（<20）移步博客

⭐️强力推荐重视

• 阮一峰: 科技爱好者周刊 – 记录每周值得共享的科技内容，周五发布
• 云谦：MDH 前端周刊 – 前端资讯和共享
• 童欧巴：前端食堂 – 你的前端食堂，吃好每一顿饭
• rottenpen：FE News – 共享前端，生活
• 常识星球：咲奈的平行时空 – 前端前沿技能、资讯、方法论共享