周刊收集包含前端(但不限于前端)的文章、新闻、开源我的项目、工具等等,每周一更新。
📰 News
Parcel 2
Parcel 2 由 Rust 重写,性能有了很大的晋升,本次更新:
- 🔌 全新的插件零碎
- 🌳 默认启用 tree shaking,并反对 ES modules、CommonJS、dynamic imports 和 CSS modules
- 🚀 微小的性能晋升
- ✂️ 主动 code splitting
- 🖼 图片尺寸变动、格局转化以及优化, 反对 AVIF 和 WebP,以及对 JPEG、PNG 无损压缩
- 等等
更多内容能够查看上面官网布告。
https://parceljs.org/blog/v2/
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" />
,毛病是不反对服务端渲染
https://github.com/remix-run/react-router/releases/tag/v6.0.0-beta.7
Nuxt 3 Beta
Nuxt 3 公布了 beta 版本,其中一个要害更新是引入了新的 Server 引擎,能够间接部署现有的多个云平台。
这个版本还反对 Vue3 和 Vite,想理解更多的内容能够方面上面链接。
https://nuxtjs.org/announcements/nuxt3-beta/
📖 文章
新生代农民工也要懂的策略设计模式
俗话说,凡事讲策略。讲策略的时候,咱们往往会思考每种状况的老本。策略同样可体现在咱们的代码之中,正当利用策略模式重构逻辑简单的代码,会使我的项目工程更易保护和扩大。
https://mp.weixin.qq.com/s/nVlZ9V744DQUNiWBP0m8_Q
如何排查 React 中渲染慢的组件?
https://alexsidorenko.com/blog/react-performance-slow-renders/
React 源码中的位运算技巧
https://mp.weixin.qq.com/s/zrfmXGHK4PG8B6pdGYO6Aw
AWS 是如何将 AWS SDK 的 JavaScript 包公布大小减半
https://aws.amazon.com/cn/blogs/developer/how-we-halved-the-publish-size-of-modular-aws-sdk-for-javascript-clients/
JavaScript 开发者都应该晓得的 33 个概念
https://github.com/leonardomso/33-js-concepts
教你用 CSS 实现打字机成果
https://www.sitepoint.com/css-typewriter-effect/
在微前端中加载 Vite 利用
https://mp.weixin.qq.com/s/Pd9jQI6DOKJ16hVbLNKtOA
My Logging Best Practices
log 的最佳实际。
https://tuhrig.de/my-logging-best-practices/
VSCode 语言插件开发入门
VSCode 为何能够反对如此之多的编程语言?如何为一门新语言编写语言插件?又有哪些语言个性能够被利用呢?本次分享为大家介绍了 VSCode 提供的编程语言相干的能力,具体解说了代码高亮原理、languages.* API、Language Server Protocol 等内容。
https://mp.weixin.qq.com/s/Eqb9hAvG-WeseP9rCl_XRg
从 fabric 源码来看如何做好一个 canvas 库
前言,本篇文章能够让你从 0 到 1 疾速理解 canvas,理解 fabricjs 源码库的整体组织和要害外围代码。
https://mp.weixin.qq.com/s/OtKqeE0FnLLxHZUk02dj-w
🛠 工具、软件
react-spring
react-spring 是基于 spring-physics(弹簧物理)的 react 动画库,动画成果更加晦涩、天然。
https://github.com/pmndrs/react-spring
Caroumesh: 轮播组件中展现 3D 内容
https://github.com/Adonis-Stavridis/caroumesh
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:https://ebay.github.io/nice-modal-react/
https://github.com/eBay/nice-modal-react
DOOM Rendered via Checkboxes
这是一个很有意思的我的项目,应用 Checkboxes 来渲染 DOOM(《覆灭兵士 4》),让你在网页通过这种形式来玩游戏。
https://healeycodes.com/doom-rendered-via-checkboxes
AnyWebP
一个在线工具,能够把 WebP 转为 JPG/PNG/ICO。
https://anywebp.com/
Animated Backgrounds
CSS 和 JS 实现的带动画背景的成果合集。
https://animatedbackgrounds.me/
Doodle Ipsum
「Doodle Ipsum」是一个以涂鸦作为测试图片产生器的在线工具。
提供各种不同款式的插图素材,用户能够在抉择款式(或随机)、指定大小比例和背景色彩后产生图片链接,就能将产生的图片使用在网页开发原型、登陆页面或是任何无代码工具(No-code tool),例如领有所见即所得成果的网页编辑器。
https://doodleipsum.com/
Sapling:展现 React 组件树形构造的 VS 代码扩大
随着 React 我的项目的大小和复杂性的减少,查看页面组件的构造是个费时费力的事件。Sapling 在 VS Code 侧栏中增加了一个依赖关系树,用于展现组件的依赖书,并提供跳转到文件的性能。
介绍文章:https://www.scien.cx/2021/10/09/introducing-sapling-a-vs-code-extension-for-traversing-your-react-component-hierarchy/
https://marketplace.visualstudio.com/items?itemName=team-sapling.sapling
周刊首发于 GitHub,欢送订阅:
我的周刊