淘系前端架构周刊:DevTools 支持跨浏览器调用、Gatsby 发布 v4 next 版本

来源: 投稿
2021-09-20

中秋特辑——祝大家中秋佳节快乐!

🗞 News

DevTools 支持跨浏览器调用

DevTools 最新特性:

  • Scroll Snapping:快速查看容器和滚动元素之间的位置关系

  • Container Queries:快速查看容器查询命中的规则和命中原因

  • &etc...

最重大的更新在于其支持跨浏览器调用,不在局限于 Chrome / Chromium。

原文链接:https://www.smashingmagazine.com/2021/09/devtools-cross-browser-edition/

Gatsby 发布 v4 next 版本

新特性包括:

  • 延迟静态生成(DSG, Deferred Static Generation)

  • 服务端渲染(SSR, Server-Side Rendering)

  • 并行数据请求,更短的打包构建时间

  • 更好的内容预览体验

Feature Blog:https://www.gatsbyjs.com/gatsby-4/

📦 Open Source

Kraken(北海)

Kraken 是淘系前端架构团队推出的依据 W3C 标准提供渲染能力、基于 Flutter 自绘渲染技术的高性能跨平台 Web 渲染引擎。

就在昨天,尤雨溪(Vue.js 作者)推荐了 Kraken,并向 Kraken 的 Examples 中 PR 了一个使用 Vue 3 + Vite 的示例。

官方文档:http://openkraken.com/

GitHub Repo:https://github.com/openkraken/kraken

grex

你是否曾经为写正则表达式而苦恼?是否非常期望有一款工具能够自动生成你想要的正则表达式?或许你可以试试 grex,它能够通过你输入的测试用例推导出你想要的正则表达式!

GitHub Repo:https://github.com/pemistahl/grex

toolb.dev

一个清爽美观、简洁实用的前端在线工具集,包括 CSS / HTML / JavaScript 等工具,例如可视化编辑并生成渐变色、可视化编辑并生成 Button 样式、JavaScript Benchmark 等等。

Home Page:https://www.toolb.dev/css/gradient_generator/

Web to Desktop framework comparison

跨平台的桌面应用框架不知道怎么选?或许你可以参考一下这个 Repository,它将目前市面上主流的各种在桌面应用中使用 Web 技术栈的框架进行了对比,包括端的支持程度、构建后包大小、内存占用等方面,能够帮助你快速找到你需要的框架!

GitHub Repo:https://github.com/Elanis/web-to-desktop-framework-comparison

📑 Article

5 Things I Learned Building Snowpack to 20,000 Stars

文章介绍了 Fred K. Schott(Snowpack 作者)在实现 Snowpack 的过程中,对产品构思、编码实现、技术运营等多个的思考和总结,深度讲解了如何从 0 到 1 实现一个开源技术产品并进行运营推广的一些细节,非常值得学习!

遗憾的是,作者此文的后续(第二部分)中写到:在过去一年维护 Snowpack 的过程中感到乏力,同时社区里也出现了 Vite 这样优秀的产品,决定将其交给社区继续维护。

第一部分原文链接:https://dev.to/fredkschott/5-things-i-learned-while-building-snowpack-to-20-000-stars-b9d

第二部分原文链接:https://dev.to/fredkschott/5-more-things-i-learned-building-snowpack-to-20-000-stars-5dc9

一顿操作,我把 Table 组件性能提升了十倍

文章介绍了黄轶老师从一次技术重构出发,逐步发现、深入源码定位并最终解决了 Table 组件性能问题的过程。其中,通过对 Vue 3.2 引入的 v-memo 指令进行分析,受其启发设计并实现了 useMemo 以解决 Table 组件性能问题的思路非常值得学习!

原文链接:https://mp.weixin.qq.com/s/qFIVMpDTRQuY9hPuvcKMAQ

展开阅读全文
4 收藏
分享
加载中
更多评论
0 评论
4 收藏
分享
返回顶部
顶部