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

简介: 🔥强烈推荐1. 字节前端监控实践文章较为详细的讲解了,做一个前端监控系统需要解决的关键问题和解决方案js 异常监控捕获异常堆栈反解与聚合错误自动分配性能监控请求&静态资源监控低沉本的接入

🔥强烈推荐

1. 字节前端监控实践

文章较为详细的讲解了,做一个前端监控系统需要解决的关键问题和解决方案

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

其中笔者觉得比较赞的设计是,“报错信息和 commit 关联,自动分配到人”

利用了 git blame 指令(又Get 一个小技巧)可以获取某个文件的历史修改记录,能精确到行

下面是一个git blame package.json使用示例(vitepress仓库)

image.png

可以清楚的看到xx行最近修改时间,谁修改的等等信息

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

2. React纪录片

不方便看视频的,可以直接看文章里课代表的总结,有很多精选又有趣的 Gif 图

前端圈又一视屏大作,可以详细了解到React的发家史,了解到一些已经“入土的前端工具”

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

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

“一个很棒的解决方案很少是由大型组织所缔造的,通常都是由一个充满激情和远见的人慢慢开始感染其它人。”

3. corejs的未来

image.png

core-js 在前端项目里几乎无处不在

image.png

作者是全职做开源,但之前发生车祸赔了一笔钱还坐了牢,现在缺钱,开源捐赠寥寥无几(由于是俄罗斯大兄弟paypal账户也用不了)

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

期望社区捐赠一下,不然项目不做了

内容比较多,感兴趣的可以看这个课代表总结 开源项目累积下载量90亿次的开发者穷困潦倒 目前已获得3个比特币捐赠,大概 7w+$ 的赞助费(笔者支付宝赞助了6.66¥)

🔧开源&工具

4. clack - 年轻&漂亮的用于构建CLI的工具

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

image.png

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

5. BetterDisplay - Mac上调整屏幕参数的小工具

基础功能:可用于调节屏幕亮度和分辨率(外接显示器再也不用按物理按钮调了)

image.png

Mac的朋友可以装上,非常nice的小工具

6. wrn-echarts - 在RN中使用ECharts

58技术开源的库(😄)

image.png

笔者还没深入体验,不过看介绍还是很不错(做RN的朋友可以先收藏吃灰),之前做RN开发图表(C端)都得纯手撸用SVG

📚文章&资讯

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

image.png

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次限制?

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

image.png

不知道结果是否可靠

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

image.png

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)


相关文章
|
7月前
|
人工智能 JavaScript 安全
视野修炼-技术周刊第52期
🔥强烈推荐 1. 极速图片压缩器 软件特色 具有超快的压缩速度 支持压缩 GB 级别的超大体积的图片 支持 7 种图片格式 支持原始图片预览 支持【鼠标拖拽】【点击选择】【ctrl + v 粘贴】 等多种方式添加图片 支持添加文件夹,可自动解析文件夹内所有符合要求的图片 实时显示压缩进度 完全在本地执行压缩,有无网络均可,不上传图片,充分保证隐私安全
|
7月前
|
人工智能 前端开发 小程序
视野修炼-技术周刊第58期
🔥强烈推荐 1. LocalSend - 开源的跨平台文件传送软件 不需要互联网连接,依靠共享 Wifi 分享文件。
|
7月前
|
人工智能 Rust JavaScript
视野修炼-技术周刊第51期
🔥强烈推荐 1. 🍉 CEC-IDE 本周技术圈的大瓜,对外宣传自研 IDE,实际上是 VS Code 的换皮
|
7月前
|
Web App开发 人工智能 JSON
视野修炼-技术周刊第54期
🔥强烈推荐 1. Node.js 16 EOL EOL(end of life) 2023 年 9 月 11 日,Node.js 16 将停止维护,推荐大家切换到 Node.js 18 使用(EOL 2025-04-30) 官推下面很多都在推荐 Bun 了 😄
|
7月前
|
资源调度 Rust 前端开发
视野修炼-技术周刊第59期
🔥强烈推荐 1. Yarn 4.0 正式发布,性能大幅提升! 10.23 日,Yarn 4.x 发布。 新的官网如下 看上去档次高了
|
7月前
|
存储 人工智能 前端开发
视野修炼-技术周刊第61期
🔥强烈推荐 1. 2023年🧑‍💻工程师的 Mac 工具箱 Arc - 浏览器, Warp - 终端, Raycast - 启动器,Orbstack - 容器,Setapp - 软件订阅,CleanShotX - 截屏,OBS - 录屏推流,Gifox - Gif图制作, 1Password - 密码管理器,Bartender - 菜单栏管理,Downie - 视频下载,IINA / Infuse - 视频播放器,iRightMouse - 鼠标右键增强,PopClip / Bob - 鼠标工具 Arc 和 Warp 目前笔者一直在用,其它的看着也还不错,按使用场景可以试试 作者:粥里
|
7月前
|
Rust 自然语言处理 前端开发
视野修炼-技术周刊第66期
🔥强烈推荐 1. Oxlint 正式发布 Oxlint 是一个 JavaScript linter,旨在捕获错误或无用的代码,默认情况下不需要任何配置 基于 Rust 实现,速度极快(比 ESLint 快 50-100 倍) 下面是使用示例,项目里直接执行如下的指令即可。
|
7月前
|
JSON 前端开发 JavaScript
视野修炼-技术周刊第22期
🔥强烈推荐 1. 英:纯CSS实现树状视图 利用ul,li,details,summary4个标签实现 其中summary,可以通过open属性控制显隐状态 下面是个最简示例
|
7月前
|
人工智能 JavaScript 开发工具
视野修炼-技术周刊第39期
🔥强烈推荐 1. Transformers.js - 浏览器直接运行AI模型 "抱抱脸"🤗 近期推出了 JS 版SDK,至此可以使用 Node.js 和 浏览器运行提供的AI模型了,大大降低了使用门槛 下面看一下官方示例,在浏览器里的运行效果 只需要在 index.html 加入以下代码 html复制代码
|
7月前
|
Web App开发 人工智能 前端开发
视野修炼-技术周刊第64期
🔥强烈推荐 1. VueDraggablePlus - 祖师爷推荐拖拽库 支持 Vue2 和 Vue3 的拖拽组件库。祖师爷力荐🔥