周刊收集包括前端(但不限于前端)的文章、新闻、开源项目、工具等等,每周一更新。
📰 News
Parcel 2
Parcel 2由Rust重写,性能有了很大的提升,本次更新:
- 🔌 全新的插件系统
- 🌳 默认启用tree shaking,并支持ES modules、CommonJS、dynamic imports和CSS modules
- 🚀 巨大的性能提升
- ✂️ 自动code splitting
- 🖼 图片尺寸变化、格式转化以及优化, 支持AVIF和WebP,以及对JPEG、PNG无损压缩
- 等等
更多内容可以查看下面官方公告。
React Router 6
可能是发布前最后一个beta版。
- 花了不少篇幅为 remix 实现中心配置式路由,
<Router>
+ useRoutes 的组合,Umi 4 已切到这个版本 - 提供
<Outlet />
渲染子路由,不能用 props.children 了 - 全面支持相对路径,子路由不用写父路由路径
- 用 useNavigate() 进行编程式跳转
- 不再提供
<Switch />
,用<Routes />
代替 <Route index />
表示 Index 路由<Route />
不能被封装,比如封装一个<PrivateRoute />
用于权限,取而代之的是<Route element />
的方式<Routes />
可以嵌套,嵌套在<Route />
下的<Routes />
会基于前者的 path,注意前者的 path 加 * 后缀,否则后者不匹配时会不显示- 不再提供
<Redirect />
,推荐服务端判断了直接跳,小成本升级也可用<Navigate replace to="/home" />
,缺点是不支持服务端渲染
Nuxt 3 Beta
Nuxt 3发布了beta版本,其中一个关键更新是引入了新的Server引擎,可以直接部署现有的多个云平台。
这个版本还支持Vue3和Vite,想了解更多的内容可以方面下面链接。
📖 文章
新生代农民工也要懂的策略设计模式
俗话说,凡事讲策略。讲策略的时候,我们往往会考虑每种情况的成本。策略同样可体现在我们的代码之中,合理利用策略模式重构逻辑复杂的代码,会使项目工程更易维护和扩展。
如何排查React中渲染慢的组件?
alexsidorenko.com/blog/react-…
React源码中的位运算技巧
AWS是如何将AWS SDK的JavaScript包发布大小减半
JavaScript开发者都应该知道的33个概念
教你用CSS实现打字机效果
www.sitepoint.com/css-typewri…
在微前端中加载 Vite 应用
My Logging Best Practices
log的最佳实践。
VSCode语言插件开发入门
VSCode 为何可以支持如此之多的编程语言?如何为一门新语言编写语言插件?又有哪些语言特性可以被应用呢?本次分享为大家介绍了 VSCode 提供的编程语言相关的能力,详细讲解了代码高亮原理、languages.* API、Language Server Protocol 等内容。
从 fabric 源码来看如何做好一个 canvas 库
前言,本篇文章可以让你从 0 到 1 快速了解 canvas,了解 fabricjs 源码库的整体组织和关键核心代码。
🛠 工具、软件
react-spring
react-spring是基于spring-physics(弹簧物理)的react动画库,动画效果更加流畅、自然。
Caroumesh: 轮播组件中展示3D内容
Nice Modal
Nice Modal是一个轻量级、零依赖的模态框管理工具。使用context来全局持久化模态框的state,这样的方案可以让你很简单的控制模态框的显示和关闭。
import NiceModal from '@ebay/nice-modal-react';
import MyModal from './MyModal';
//...
NiceModal.show(MyModal, { someProp: 'hello' }).then(() => {
// do something if the task in the modal finished.
});
//...
demo:ebay.github.io/nice-modal-…
DOOM Rendered via Checkboxes
这是一个很有意思的项目,使用Checkboxes来渲染DOOM(《毁灭战士4》),让你在网页通过这种方式来玩游戏。
AnyWebP
一个在线工具,可以把WebP转为JPG/PNG/ICO。
Animated Backgrounds
CSS和JS实现的带动画背景的效果合集。
Doodle Ipsum
「Doodle Ipsum」是一个以涂鸦作为测试图片产生器的在线工具。
提供各种不同样式的插图素材,用户可以在选择样式(或随机)、指定大小比例和背景颜色后产生图片链接,就能将产生的图片运用在网页开发原型、登陆页面或是任何无代码工具(No-code tool),例如拥有所见即所得效果的网页编辑器。
Sapling:展示React组件树形结构的VS代码扩展
随着React项目的大小和复杂性的增加,查看页面组件的结构是个费时费力的事情。Sapling在VS Code侧栏中添加了一个依赖关系树,用于展示组件的依赖书,并提供跳转到文件的功能。
介绍文章:www.scien.cx/2021/10/09/…
marketplace.visualstudio.com/items?itemN…
周刊首发于GitHub,欢迎订阅: