前端 / 前端周报 / 技术 · 2023年3月19日 0

前端黑板报 – 周报第 8 期

广告位招租 (vx: ghostcode, 备注:网站广告)

🔥 本周最热

🤖 Transformers.js:在浏览器中运行 ML 模型——Transformers 是一种机器学习模型,通常用于自然语言或视觉处理,虽然直接在浏览器中运行此类模型尚处于起步阶段,但 Transformers.js 打开了一些 ML 模型这里有一些令人印象深刻的演示。

https://xenova.github.io/transformers.js/

🎉 庆祝 Electron 诞生 10 周年——感觉 Electron 无处不在(Slack、Spotify、VS Code 等),所以它才出现了十年可能让人感到惊讶。 Slack 和 Electron 开发人员 Erick Zhao 感谢 Electron 的开发人员和社区,向我们介绍了一些 Electron 相关的历史,并向我们保证 Electron 仍然很强大。

https://www.electronjs.org/blog/10-years-of-electron

宣布 TypeScript 5.0 — 请注意,TypeScript 不遵循语义版本控制,因此这与 4.9 一样是一个“主要”版本……但无论如何 5.0 看起来很酷。此版本的类型化 JavaScript 超集包含装饰器、改进的 ESM 项目对 Node 和捆绑器的支持、 const 类型参数等功能。

https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/

Turbowatch:文件更改检测器和任务协调器——不仅如此,它还声称速度非常快,“如果你想要类似 Nodemon 但功能更强大的东西,那么你来对地方了。”这看起来很有前途,自述文件中充满了示例。

https://github.com/gajus/turbowatch

📝 文章&教程

Chrome 111 获得了 SPA 的“View Transition”功能——目前只有 Chrome 支持 View Transition API,但允许在单页应用程序中轻松进行动画页面转换(此处演示)。幸运的是,它适合渐进式增强,因此您可以立即开始使用它而不会感到太内疚;-) 多页应用程序支持即将推出。

https://developer.chrome.com/blog/spa-view-transitions-land/

使用 JavaScript 创建和下载文本文件 – 如果您希望您的代码能够即时生成文本(例如 JSON)文件并让用户的浏览器下载它,这相当容易。

https://www.amitmerchant.com/create-and-download-text-files-using-javascript/

我在开始我的第一个 React 项目时犯的五个错误 — Richard 分享了他早期的 React 错误,希望你能从他的不幸中吸取教训。他处理诸如使用 defaultProps 、 propTypes 和类组件之类的主题。

https://css-tricks.com/5-mistakes-starting-react/

⚒️ 代码&工具

模板:Web 应用程序的简单框架——作者为自己的项目构建了它,但指出:“在其中工作是一种乐趣,感觉很“框架化”,但它只是 web 标准,周围包裹着 <100 行方便的 JS。除了浏览器提供的功能之外,没有什么神奇之处——我喜欢这样。”我们也是。

https://github.com/retrohacker/template

React ProseMirror:将 ProseMirror 编辑器与 React 集成 — ProseMirror 是一个用于为 Web 构建富文本编辑器的工具包。

https://github.com/nytimes/react-prosemirror

MiniSearch:用于浏览器和节点的小型内存全文搜索引擎——优势在于索引数据存储在本地,允许它离线工作并提供良好的性能。

https://github.com/lucaong/minisearch

css-variable:用于在 JS 中定义 CSS 自定义属性的微型 Treeshakable 库——兼容流行的 CSS-in-JS 库,如 Emotion、styled-components、Linaria 等,它拥有更好的 CSS 压缩和更小的虚拟 DOM 更新等特征。

https://css-variable.js.org/

Flexboard:用于可调整大小的侧边栏的 React 组件库。该代码允许您为布局的可调整大小部分设置最小/最大尺寸。

https://github.com/dorbus/flexboard

🚀 版本发布

Fuite 2.0 富特2.0
↳ 用于查找 Web 应用程序内存泄漏的工具。

🎼 wavesurfer.js 6.6 🎼 wavesurfer.js 6.6
↳ 基于网络音频和画布构建的可导航波形。

Svelte-Inview 4.0 Svelte-Inview 4.0
↳ 监视元素何时进入/离开视口的 Svelte 动作。

Discord.js 14.8 Discord.js 14.8
↳ 使用 Discord 聊天 API 的库。

Plotly.js 2.20 Plotly.js 2.20
↳ 强大的图表库。

Recharts 2.5 图表 2.5
↳ React + D3 图表库。

deepmerge 4.3.1 深度合并 4.3.1
↳ 合并对象的可枚举属性。

Vue Testing Library 7.0
Vue 测试库 7.0

React Table Library 4.1
反应表库 4.1