头图

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

周刊收集包括前端(但不限于前端)的文章、新闻、开源项目、工具等等,每周一更新。

📰 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,欢迎订阅:

我的周刊


湖中剑
Code is Art
373 声望
11 粉丝
0 条评论
推荐阅读
NVM 快速安装教程
nvm作为一款node的版本管理工具,在前端开发中是必不可少的,但是因为GitHub的特殊性,导致很多人是无法用官方教程安装成功,本文旨在整理出如德芙般丝滑的安装教程。

ineo6阅读 803

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木149阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青54阅读 7.8k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.4k评论 6

373 声望
11 粉丝
宣传栏