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

简介: 🔥强烈推荐1. 2023年🧑‍💻工程师的 Mac 工具箱Arc - 浏览器, Warp - 终端, Raycast - 启动器,Orbstack - 容器,Setapp - 软件订阅,CleanShotX - 截屏,OBS - 录屏推流,Gifox - Gif图制作, 1Password - 密码管理器,Bartender - 菜单栏管理,Downie - 视频下载,IINA / Infuse - 视频播放器,iRightMouse - 鼠标右键增强,PopClip / Bob - 鼠标工具Arc 和 Warp 目前笔者一直在用,其它的看着也还不错,按使用场景可以试试作者:粥里

🔥强烈推荐

1. 2023年🧑‍💻工程师的 Mac 工具箱

Arc - 浏览器, Warp - 终端, Raycast - 启动器,Orbstack - 容器,Setapp - 软件订阅,CleanShotX - 截屏,OBS - 录屏推流,Gifox - Gif图制作, 1Password - 密码管理器,Bartender - 菜单栏管理,Downie - 视频下载,IINA / Infuse - 视频播放器,iRightMouse - 鼠标右键增强,PopClip / Bob - 鼠标工具

Arc 和 Warp 目前笔者一直在用,其它的看着也还不错,按使用场景可以试试

🔧开源工具&技术资讯

2. react-exercise-playground - React playground 组件

一个开源的 React playground 组件,可以单独在项目中接入使用

image.png

特点

  • 可以在线编辑代码,提供实时交互式演示
  • 支持引入第三方库(ESM包)
  • 自动从jsdelivr加载第三库ts类型文件
  • 支持自定义文件并动态引入,支持ts/tsx/js/jsx/css/json
  • 代码自动保存到 URL 上, 分享网址即可分享代码
  • 纯前端部署, 不依赖服务器,可公司内部署使用内部包

3. Caravaggio - 一个快速的图片处理服务

可以根据 URL 参数将原图转换成不同大小、格式等。

image.png

部署非常简单,提供了 docker 和 npm 开箱即用的方式。

npm install -g caravaggio
caravaggio

使用也非常简单,在服务后拼参数即可

http://localhost:8565/rotate,v:90/o:png/?image=https://sugarat.top/logo.png

image.png

4. eslint-stylistic

由于维护成本高昂,ESLint 和 typescript-eslint 团队决定放弃核心中与格式化/风格相关的规则,因此启动了该项目。此 repo 移植了这些规则,并将它们作为独立的软件包发布,并将由社区进行维护。

image.png

目前看核心贡献者还是 antfu 大神

5. 新版 React 文档中的九项最佳建议

  1. 在循环中给元素设置 key 时,使用稳定唯一标识符,不要使用索引
  2. 定义组件时放在文件顶层,不要嵌套
  3. state 中只存储计算所需的最小数据
  4. 除非性能问题明显,否则推迟使用缓存
  5. 提取的共享函数只有调用 hook 才加 use 前缀
  6. 根据 prop 改变 state 时直接在组件函数中设置,不要在 effect 中
  7. 数据获取首选第三方库,不要只用 useEffect
  8. 响应事件时用事件处理函数,不要用 useEffect
  9. effect 依赖引起不必要重渲染时,去掉函数里的依赖,不仅是数组里的

🤖AI工具&资讯

6. AIGC相关教程资源收集

项目收集了关于 AIGC 的各种精选教程和资源。

image.png 

相关文章
|
4月前
|
文字识别 安全 前端开发
视野修炼-技术周刊第57期
🔥强烈推荐 1. Rspress - 基于 Rspack 的高性能静态站点生成器 由 ByteDance Web Infra 团队孵化的一款静态站点生成器,使用 Rspack 进行构建,基于 React 框架进行渲染,支持 MDX 内容开发,主打高性能、简单易用和定制性强。
|
4月前
|
Rust 自然语言处理 前端开发
视野修炼-技术周刊第66期
🔥强烈推荐 1. Oxlint 正式发布 Oxlint 是一个 JavaScript linter,旨在捕获错误或无用的代码,默认情况下不需要任何配置 基于 Rust 实现,速度极快(比 ESLint 快 50-100 倍) 下面是使用示例,项目里直接执行如下的指令即可。
|
4月前
|
移动开发 监控 前端开发
视野修炼-技术周刊第25期
🔥强烈推荐 1. 字节前端监控实践 文章较为详细的讲解了,做一个前端监控系统需要解决的关键问题和解决方案 js 异常监控 捕获异常 堆栈反解与聚合 错误自动分配 性能监控 请求&静态资源监控 低沉本的接入
|
4月前
|
前端开发 程序员 数据库
视野修炼-技术周刊第26期
🔥强烈推荐 1. 一个程序员决定写代码到60岁 “人物采访总结”,讲了一位阿里大牛的成长历程(做数据库的),再过几年就60了,仍在一线编码 推荐大家阅读一下,大佬的路虽不可以复制,但部分经验可以借鉴 🙊
|
4月前
|
JSON 前端开发 JavaScript
视野修炼-技术周刊第22期
🔥强烈推荐 1. 英:纯CSS实现树状视图 利用ul,li,details,summary4个标签实现 其中summary,可以通过open属性控制显隐状态 下面是个最简示例
|
4月前
|
人工智能 缓存 资源调度
视野修炼-技术周刊第41期
🔥强烈推荐 1. 使用纯CSS实现噪点效果 张鑫旭大佬的文章,在简单介绍了canvas和svg的实现之后,详细介绍了CSS版本的实现 如下所示代码也比较简单
视野修炼-技术周刊第41期
|
4月前
|
人工智能 自然语言处理 文字识别
视野修炼-技术周刊第63期
🔥强烈推荐 1. 前端量子纠缠效果 本周最火的“前端项目”
|
4月前
|
人工智能 Rust JavaScript
视野修炼-技术周刊第62期
🔥强烈推荐 1. Vite5.0 发布! 11 月 16 日,Vite 5.0 正式发布 该版本主要关注API优化,去除过时功能,并解决一些长期存在的问题。 使用了Rollup 4,这在构建性能方面有了很大的提升。 对Node.js的支持进行了调整,现在需要使用Node.js 18+版本。 2. Bubble - README 小组件 该仓库收集各种可以放在 GitHub Profile 和 Readme 上面的小组件。
|
4月前
|
人工智能 IDE 开发工具
视野修炼-技术周刊第45期
🔥强烈推荐 1. Sass 支持直接在浏览器中编译 Sass Playground与Web IDE等场景不再依赖服务器来编译Sass。 使用方式也非常的简单,使用 script module,仅需2行代码即可使用。
|
4月前
|
人工智能 JavaScript 安全
视野修炼-技术周刊第50期
🔥强烈推荐 1. glitchtext - 毛刺字符生成 为字符加上毛刺效果的网页工具,这个可以在部分取名场景使用,比如游戏ID取名经常重复的情况(前提是目标设备支持)