新的一周,快来看看上周发生了哪些新鲜事吧!
我的微信:CUG-GZ
科技趣闻
1. Next.js 官方发布全新教程
近日,Next.js 发布了一个新的基础课程,涵盖了 React 的基本知识、它与 Next.js 的关系以及构建第一个 Next.js 应用程序。
Next.js 是一个用于服务器渲染的通用 JavaScript Web 应用程序的小型框架,该框架基于React、Webpack 和 Babel 构建,为该网站提供了强大的支持。
2. 以反战为名,百万周下载量 node-ipc 包作者进行供应链投毒
近日,不少开发者在使用到 vue-cli 中的 node-ipc 模块时,这个依赖项会在桌面以及其他位置创建一个叫做“WITH-LOVE-FROM-AMERICA.txt”的文件,不过打开这个文件是空的。据悉,该 package 每周下载量达到了百万。另外,使用 Yarn 的开发者也受到了影响。
开始有人以为只是个恶作剧,但事情并非如此简单。有开发者在对代码进行测试处理后发现,node-ipc 包的作者 RIAEvangelist 在投毒。他起初提交的是一段恶意攻击代码:如果主机的 IP 地址来自俄罗斯或白俄罗斯,该代码将对其文件进行攻击,将文件全部替换成 。该作者是个反战人士,还特意新建了一个 peacenotwar 仓库来宣传他的反战理念。
虽然作者删除了该段代码,但这仍然是一种恶劣的供应链投毒。这样的行为都严重破坏了开源生态中的信任。对此你怎么看?
更新速递
1. React 18.0.0-rc.2 正式发布
3月8日,React 18发布第一个候选版本,上周发布了第二个候选版本。距离正式版更近了一步。
2. Prettier 2.6 正式发布
3月16日,Prettier 2.6 正式发布,此版本主要更新如下:
- 添加了新的 singleAttributePerLine 选项。这是在 Vue SFC 模板、HTML 和 JSX 中每行仅打印一个属性的选项;
- 添加对 TypeScript 4.6 的支持;
- 对于HTML,每行强制执行单个属性;
- 对于JavaScript,将 waitForAsync 识别为 Angular 中的测试语句,在没有块的 if 语句之后保留行尾注释,JSX 中的内联await表达式,添加acorn解析器;
- 在正则表达式中添加对 Unicode Set Notation 的支持;
- 改进 Flow 和 TS 中类型别名中注释的打印;
- 添加对私有字段解构的支持;
- 支持装饰器自动访问器语法。
Prettier 是一个“有主见”的代码格式化工具,支持列表如下:
- JavaScript,包括 ES2017
- JSX
- Flow
- TypeScript
- CSS、LESS 和 SCSS
- JSON
- GraphQL
简而言之,这个工具能够使输出代码保持风格一致。
3. Deno 1.20 发布
3月17日,Deno 1.20 正式发布,该版本的主要更新如下:
- 更快地调用 Rust;
- HTTP 响应正文的自动压缩;
- 新的子命令:deno bench 和 deno task;
- 用于升级 HTTP 连接的低级 API;
- FFI API 支持只读全局静态;
- 使用时跟踪操作deno test;
- 支持AbortSignal.timeout();
- 支持Typescript 4.6。
Deno 是 V8 上的安全 TypeScript 运行时。
- 支持 TypeScript 开箱即用,使用 V8 引擎;
- 无 package.json、npm,不追求兼容 Node;
- 通过 URL 方式引入依赖而非通过本地模块,并在第一次运行的时候进行加载和缓存,并仅在代码使用--reload运行,依赖才会更新;
- 可以控制文件系统和网络访问权限以运行沙盒代码,默认访问只读文件系统可访问,无网络权限。V8 和 Golang 之间的访问只能通过 protobuf 中定义的序列化消息完成;
- 最终创建单一可执行文件;
- 发生未捕捉错误时自动终止运行;
- 支持 top-level 的 await;
- 旨在兼容浏览器;
- 可以作为库来引入,以轻松构建自己的 JavaScript runtime。
更新详情:deno.com/blog/v1.20
4. Faker 6.0 发布
早在今年一月份,开源库 faker.js 遭到破坏。它并不是被外人劫持的,而是其创建者为了拒绝白嫖而在软件库中故意引入了一个无限循环,导致它出现了故障。这个库的应用特别广泛,所以这个事件影响也特别深远。而随后,社区接管了该开源库。近日,该库发布了6.0版本。
Faker.js 用来为测试和开发生成大量模拟(但真实的)数据。
开源趋势
下面来看看本周GitHub上有哪些热门的前端项目吧!
1. Bhailang
Bhailang 是一个用 Typescript 编写的玩具编程语言。
Star⭐:2.9k
本周Star⭐️:2374
Github地址:github.com/DulLabs/bha…
2. Reactive-Resume
Reactive-Resume 是一个免费和开源的简历生成器,旨在使创建、更新和共享简历的日常任务像 1、2、3 一样简单。使用此应用程序,可以创建多份简历,与招聘人员或朋友分享通过一个独特的链接并将其打印为 PDF,全部免费,无广告,无跟踪,不会丢失数据的完整性和隐私性。
Star⭐:5.4k
本周Star⭐️:1696
Github地址:github.com/AmruthPilla…
3. mini-vue
mini-vue 实现了最简 vue3 模型,用于深入学习 vue3, 让你更轻松的理解 vue3 的核心逻辑。
4. plasticity
Plasticity 是一款面向概念艺术家的 3D 建模软件。由于独特的小工具、快捷方式和周到的工作流程,在 Plasticity 中的建模快速高效。不过目前 plasticity 仍处于早期 BETA 阶段。所以缺少许多功能,而且还不容易使用或安装。
Star⭐:1.5k
本周Star⭐️:750
Github地址:github.com/nkallen/pla…
5. awesome-selfhosted
awesome-selfhosted 是一个可以在自己的服务器上托管的免费软件网络服务和 Web 应用程序列表。
Star⭐:80.6k
本周Star⭐️:760
Github地址:github.com/awesome-sel…
工具推荐
下面来推荐5个用于React项目的延迟加载库。
1. react-lazyload
react-lazyload 可用于延迟加载 React 应用程序中的任何类型的组件。它是 React 社区中最流行的延迟加载库之一,支持装饰器和服务器端渲染。其特点如下:
- 具有一组属性,使用户能够自定义组件的功能。
- 提供诸如 forceCheck 之类的实用程序来显示隐藏的内容,这些内容在没有调整大小或滚动事件的情况下变得可见。
- 开箱即用支持水平延迟加载。
- 只为所有延迟加载的组件实现两个事件监听器,进一步优化性能。
GitHub:github.com/twobin/reac…
2. react-lazy-load
react-lazy-load 是一个 React 组件,可用于以可预测的方式延迟加载内容。它相对较快,具有最小的包大小(缩小为 6KB)。其特点如下:
- 自动检测滚动容器,例如带有滚动条的 ,因此甚至可以在滚动容器内使用。
- 允许用户设置阈值以从视口的任何一侧开始内容加载,使用诸如 offsetVertical、offsetHorizontal、offsetTop、offsetBottom 等属性。
- 在 IE8+ 中工作。
- 具有对防抖功能的内置支持。
但是,与 react-lazyload 库相比,该组件的 props 数量非常有限,因此提供的灵活性较低。主要缺点是它不允许用户为延迟加载的组件应用占位符。
GitHub:github.com/loktar00/re…
3. react-lazy-load-image-component
react-lazy-load-image-component 是一个易于使用的库,用于延迟加载任何类型的组件。它支持 IntersectionObserver,可以确定元素何时离开和进入视口。其特点如下:
- 这个库最重要的特性是它的 HOC,trackWindowScroll,它允许组件跟踪窗口滚动位置,而无需为每个元素使用滚动或调整大小事件侦听器。
- 默认情况下,延迟加载的组件的偏移量为 100 像素。
- 内置的可见效果(例如模糊、黑白和不透明过渡)有助于改善用户体验。
- 服务器端渲染兼容。
- 支持 TypeScript 声明。
- 占位符默认提供与图像或组件相同的大小,但可以自定义。
Github:github.com/Aljullu/rea…
4. react-lazy-images
react-lazy-images 是一个灵活的库,它提供组件和实用程序来延迟加载 React 中的图像。它使用 render props.为调用者提供了完全的表现控制。其特点如下:
- 使用 IntersectionObserver 和 polyfill 来提高性能。
- 为禁用 SEO 和 JavaScript 的环境提供后备策略。
- 支持服务器端渲染。
- 支持背景图像并与水平滚动一起使用。
GitHub:github.com/fpapado/rea…
5. react-lazy-blur-image
react-lazy-blur-image 是将图像延迟加载到低分辨率占位符中的理想库。默认情况下,该组件显示一个轻量级的灰色占位符,并在组件即将到达视口时替换为实际占位符。仅当实际图像完全延迟加载时,才会替换此占位符。其特点如下:
- 它为延迟加载图像提供了一种简约的方法,提供了完美的用户体验和性能平衡。
- 该组件只接受两个自定义属性:**src **和 style。
- 组件可以使用 **styled-components **从占位符转换图像。
GitHub:github.com/meienberger…