周刊搜集包含前端（但不限于前端）的文章、新闻、开源项目、东西等等，每周一更新。

News

Parcel 2

Parcel 2由Rust重写，功用有了很大的提升，本次更新：

  • 全新的插件体系
  • 默许启用tree shaking，并支撑ES modules、CommonJS、dynamic imports和CSS modules
  • 巨大的功用提升
  • ✂️ 主动code splitting
  • 图片尺寸改变、格式转化以及优化, 支撑AVIF和WebP，以及对JPEG、PNG无损压缩
  • 等等

更多内容能够查看下面官方公告。

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" />，缺点是不支撑服务端烘托

github.com/remix-run/r…

Nuxt 3 Beta

Nuxt 3发布了beta版别，其中一个要害更新是引入了新的Server引擎，能够直接部署现有的多个云平台。

湖中剑 前端周刊 #11 | VSCode插件开发、策略模式、React Router 6、位运算技巧、Nuxt 3、打字机效果

这个版别还支撑Vue3和Vite，想了解更多的内容能够方面下面链接。

nuxtjs.org/announcemen…

文章

新生代农民工也要懂的战略规划模式

俗话说，凡事讲战略。讲战略的时分，咱们往往会考虑每种状况的成本。战略同样可体现在咱们的代码之中，合理运用战略模式重构逻辑杂乱的代码，会使项目工程更易维护和扩展。

mp.weixin.qq.com/s/nVlZ9V744…

怎么排查React中烘托慢的组件?

alexsidorenko.com/blog/react-…

React源码中的位运算技巧

mp.weixin.qq.com/s/zrfmXGHK4…

AWS是怎么将AWS SDK的JavaScript包发布巨细折半

湖中剑 前端周刊 #11 | VSCode插件开发、策略模式、React Router 6、位运算技巧、Nuxt 3、打字机效果

aws.amazon.com/cn/blogs/de…

JavaScript开发者都应该知道的33个概念

github.com/leonardomso…

教你用CSS完成打字机作用

湖中剑 前端周刊 #11 | VSCode插件开发、策略模式、React Router 6、位运算技巧、Nuxt 3、打字机效果

www.sitepoint.com/css-typewri…

在微前端中加载 Vite 运用

mp.weixin.qq.com/s/Pd9jQI6DO…

My Logging Best Practices

log的最佳实践。

tuhrig.de/my-logging-…

VSCode言语插件开发入门

VSCode 为何能够支撑如此之多的编程言语？怎么为一门新言语编写言语插件？又有哪些言语特性能够被运用呢？本次共享为大家介绍了 VSCode 供给的编程言语相关的才能，具体讲解了代码高亮原理、languages.* API、Language Server Protocol 等内容。

mp.weixin.qq.com/s/Eqb9hAvG-…

从 fabric 源码来看怎么做好一个 canvas 库

前语，本篇文章能够让你从 0 到 1 快速了解 canvas，了解 fabricjs 源码库的整体组织和要害核心代码。

mp.weixin.qq.com/s/OtKqeE0Fn…

东西、软件

react-spring

react-spring是根据spring-physics（绷簧物理）的react动画库，动画作用更加流通、天然。

湖中剑 前端周刊 #11 | VSCode插件开发、策略模式、React Router 6、位运算技巧、Nuxt 3、打字机效果

github.com/pmndrs/reac…

Caroumesh: 轮播组件中展现3D内容

github.com/Adonis-Stav…

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-…

github.com/eBay/nice-m…

DOOM Rendered via Checkboxes

这是一个很有意思的项目，运用Checkboxes来烘托DOOM（《消灭战士4》），让你在网页通过这种方法来玩游戏。

湖中剑 前端周刊 #11 | VSCode插件开发、策略模式、React Router 6、位运算技巧、Nuxt 3、打字机效果

healeycodes.com/doom-render…

AnyWebP

一个在线东西，能够把WebP转为JPG/PNG/ICO。

anywebp.com/

Animated Backgrounds

CSS和JS完成的带动画背景的作用合集。

animatedbackgrounds.me/

Doodle Ipsum

「Doodle Ipsum」是一个以涂鸦作为测试图片产生器的在线东西。

供给各种不同款式的插图资料，用户能够在挑选款式（或随机）、指定巨细比例和背景颜色后产生图片链接，就能将产生的图片运用在网页开发原型、登陆页面或是任何无代码东西（No-code tool），例如拥有所见即所得作用的网页编辑器。

doodleipsum.com/

Sapling：展现React组件树形结构的VS代码扩展

跟着React项目的巨细和杂乱性的添加，查看页面组件的结构是个费时吃力的事情。Sapling在VS Code侧栏中添加了一个依靠关系树，用于展现组件的依靠书，并供给跳转到文件的功用。

介绍文章：www.scien.cx/2021/10/09/…

marketplace.visualstudio.com/items?itemN…

周刊首发于GitHub，欢迎订阅：

我的周刊