Releases · FengShangWuQi/fengshangwuqi.github.io

01 Nov 01:56

FengShangWuQi

issue-19

8acea2f

周报#19 @ Modern.js、Gatsby v4、Meta Latest

Latest

前端动态

1、深度解读字节跳动 Web Infra 发起的 Modern.js 开源项⽬

10 ⽉ 27-28 ⽇举办的稀⼟开发者⼤会上，字节跳动 Web Infra 正式发起 Modern.js 开源项⽬。在专场分享《介绍 Modern.js——现代 Web ⼯程体系》中，⾸先介绍了业界和字节内部的前端开发、Web 开发在发⽣哪些影响深远的变⾰，从这些变⾰的⻆度，展示了基于 Modern.js 的现代 Web 开发。

2、React 运行时优化方案的演进

本文根据 React 主要优化策略几个阶段的演进，来把这些概念梳理清楚，看看 React 这几年到底在搞什么东西，以及顺便解读一下最新更新的这些特性。

3、beta.reactjs.org

React 的新文档，目前可以提前预览。

4、阿里巴巴前端知识图谱

阿里前端技术专家团，结合 AntV 团队出品的 Graphin 框架，利用图探索分析等可视化能力，输出一个在线的知识大图。

5、vscode.dev：将 VS Code 带入浏览器

如今你可以打开 https://vscode.dev，看到一个完全在浏览器中运行的轻量级 VS Code，在本地机器上打开一个文件夹并开始编码，无需任何的安装，如丝般顺滑。

6、JavaScript 侦测手机浏览器的五种方法

本文根据 StackOverflow，整理了 JavaScript 侦测手机浏览器的五种方法。

7、为什么 Safari 浏览器这么不受 Web 开发者待见

苹果的 Safari 浏览器在支持 Web 功能方面远远落后于其他竞争对手，这种落后到底达没达到当初 IE 的“高度”仍有争议，但不少人已经把 Safari 视为 IE “精神”留下的现实映射。

8、仅仅过去 4 年，微软最终放弃了 Electron

前不久，微软 Teams 高级副总裁宣布，Teams 将放弃 Electron，转而匹配微软自己的 Edge WebView2 渲染引擎以寻求性能提升。官方声称，调整之后 Teams 的内存消耗量将直接减半，并有望以 Teams 2.0 的形象随 2022 年末上市的 Windows 11 一同亮相。

明星项目

1、gmrchk/blobity：提升你的光标体验

提供的 API 可以让用户的光标做更多有创意的事情，注意，该项目只对开源项目免费。

2、Gatsby 发布 v4

支持并行查询运行；支持服务器端渲染 (SSR)；支持延迟静态生成 (DSG)；使用 lmdb-store 提供高效数据访问。

本周热点

1、扎克伯格要 Meta 不要“Face”

10 月 28 日，扎克伯格在 Facebook 的年度 AR/VR 大会上宣布了公司的新名字 —— Meta。

扎克伯格说，这个新名字来自希腊语，意思是“超越”，象征着总有更多的东西需要创造。他表示从现在开始，公司业务将以元宇宙优先，而非 Facebook。

Assets 2

0 Join discussion

05 Sep 13:03

FengShangWuQi

issue-18

ed5ef49

周报#18 @ 防止恶意调试、前端代码规范、.com 域名涨价

前端动态

1、TypeScript 4.4

2、setup vs 5 React Hooks,助你避开"沟"中陷阱

React 是 all in js 的编码方式，只要我们敢想、敢做，一切优秀的编程模型都可以吸纳进来，本文用原生 Hook 和 concent 的 setup 并通过实例和讲解，来彻底解决尤大提到的这个关于 Hook 的痛点。

3、学习 Webpack5 之路（优化篇）

本篇将从优化开发体验、加快编译速度、减小打包体积、加快加载速度 4 个角度出发，介绍如何对 webpack 项目进行优化。

4、如何防止他人恶意调试你的 web 程序

如何简单的防止你的程序被他人恶意调试；逆向思维学会如何更好的调试。

5、Buttons Generator

通过点击复制想要 Button 样式代码。

6、GitHub CLI 2.0

GitHub CLI 2.0 支持扩展，允许任何人创建基于 GitHub CLI 核心功能的自定义命令。

7、各支付场景下前后端交互流程

本文章主要理清常见场景下各个支付的流程和 api，后续一旦有新业务接入支付，能起到一个引导作用，少走弯路。

8、Aotu.io - 前端代码规范

前端代码规范 是由 凹凸实验室 整理的，基于 W3C、苹果开发者等官方文档，并结合团队日常业务需求以及团队在日常开发过程中总结提炼出的经验而制定。

明星项目

1、tnfe/FFCreator

一个基于 node.js 的轻量、灵活的短视频加工库，您只需要添加几张图片或视频片段再加一段背景音乐，就可以快速生成一个很酷的视频短片。

2、stevenpetryk/mafs

用于创建 math 可视化的 React 组件。

本周热点

1、.com 域名涨价

根据协议的内容，未来 10 年，com 域名 的价格最高可能会上涨至 13.50 美元。该协议允许威瑞信在未来十年的大部分时间里（除了 2024 年和 2025 年）每年将价格提高 7%。

2、GitHub Copilot 四成代码有漏洞，AI 生成代码你还敢用

为了对 Copilot 的实际价值做出量化，研究人员创建了 89 个测试场景以考查其代码建议质量，编写出了 1600 多个程序，经过全面审查，研究人员发现其中近四成存在安全漏洞。

3、90 后开源老司机徐亮：从大学开始全职做开源是一种怎样的体验

很多时候在开始做一件事之前，并不需要多么坚定的信念或崇高的动机，只要怀抱一点好奇心开始去做，事情自然会在做的过程中变得越来越重要。

Assets 2

0 Join discussion

22 Aug 11:32

FengShangWuQi

issue-17

b4fe6e1

周报#17 @ Hooks 数据流、JS 写 PPT、新生代农民工

前端动态

1、精读《一种 Hooks 数据流管理方案》

对全局数据的使用，最方便的就是收拢到一个 useXXX API，并且还能区分静态、动态值，并在访问静态值时完全不会导致重渲染。

2、基于 GitHub Discussions 的 Blog 框架

这是一篇铺垫文，Blog 脚手架正在编写中，支持 RSS 订阅，自动生成微信公众号文章等。

3、Puppeteer 前端检测最佳实践

基于 puppeteer 的前端检测不仅能够发现页面死链，也可以针对指定的链接规则做检测，最大限度的保障页面链接的有效性。

4、yarn.lock 你锁明白了吗

yarn.lock 是如何生成的？以及如何避免出现问题。

5、PPT 居然可以用 JS 写

看 reveal.js 如何给你的 slides 带来新的好玩的东西，将汇报与分享变成乐趣。

6、使用 Houdini 扩展 CSS 的跨浏览器绘制能力

CSS Houdini 是一个总称，它描述了一系列底层的浏览器 API，这些 API 为开发者提供了对编写的样式更强大的能力。

7、你所需要知道的最新的 babel 兼容性实现方案

本文为了给大家带来最新的 babel 兼容性方案剖析，让大家对 babel 的兼容性处理机制有更透彻的了解。

8、'return await promise' vs 'return promise' in JavaScript

在异步函数中，使用 return await promise 和 return promise 有什么区别么？

明星项目

1、Tunnel travel using CSS perspective

2、tnfe/wp2vite

一个让 webpack 项目支持 vite 的前端项目的转换工具。

本周热点

1、阿里巴巴和腾讯将不再享受减税政策

此举反映了北京对从阿里巴巴到腾讯和美团等大型科技公司的监管紧缩，这些企业运用其庞大的数据，以牺牲用户为代价来造福投资者，饱受外界抨击。

2、2020 年北京市外来新生代农民工监测报告发布

就业集中于劳动密集型行业，从事信息传输、软件和信息技术服务业的 新生代农民工 占比大幅提高。

Assets 2

0 Join discussion

15 Aug 14:29

FengShangWuQi

issue-16

528aa03

周报#16 @ 隐身模式、ts-unused-exports、baseweb

前端动态

1、从前端视角看浏览器隐身模式

隐私模式将保护你的隐私免受使用你计算机的其他人的侵害，并减少你在访问网站时透露的一些有关你自己的信息，但是隐私浏览不会让你匿名，也不会保护你免受监视和大型技术窥探。

2、如何在大型代码仓库中删掉 6w 行废弃的文件和 exports？

很多项目历史悠久，其中很多文件或是 export 出去的变量已经不再使用，非常影响维护迭代，本文先讲如何删除废弃的 exports，后讲如何删除废弃文件。

3、Axios 中的参数为啥没被完全编码

一个接口参数中有未编码中括号（'['、']'），是 url 特殊字符，但在发这个 Get 请求时参数未完全被编码。

4、亲手带你写个简易版的 Vue

在一次培训的过程中，尤雨溪带领大家写了一个非常微型的 Vue3。

5、从过去到现在，聊聊 Tree-shaking 是什么？

既然有了 DCE 这一术语，为什么又要造一个 Tree-shaking 术语？

6、Vue 3.2 Released

SFC；Web Components；性能优化；服务端渲染；Effect Scope API。

7、Dark Mode in One Line of Code

一行代码实现 Dark Mode。

8、记一次破解前端加密详细过程

前端加密还是能够破解出来的，关键在于锁定 JS 加密源码位置，并且提取出有用的加密代码。

明星项目

1、uber/baseweb

Uber React 实现的设计系统，包含现代化，响应式组件。

2、octokit/octokit.js

GitHub SDK，适用于 Browsers, Node.js 和 Deno。

本周热点

1、GitHub 废除基于密码的 Git 身份验证

GitHub 正式废除了基于密码的 Git 身份验证，而使用令牌代替。

Assets 2

0 Join discussion

08 Aug 09:21

FengShangWuQi

issue-15

cd74ac3

周报#15 @ Next.js 预渲染、content-visibility、Zero-runtime Stylesheets

前端动态

1、西瓜客户端埋点实践：基于责任链的埋点框架

这个框架更多是约定了一套责任链的协议，通过责任链的存在，方便埋点参数的收集上报。

2、精读《默认、命名导出的区别》

从代码可维护性角度出发，命名导出比默认导出更好，因为它减少了因引用产生重命名情况的发生，但命名导出与默认导出的区别不止如此，在逻辑上也有很大差异，为了减少开发时在这方面栽跟头，有必要提前了解它们的区别。

3、Glitter text

生成和下载具有闪光效果的文本。

import { createTheme, style } from "@vanilla-extract/css";

export const [themeClass, vars] = createTheme({
  color: {
    brand: "blue",
    white: "#fff",
  },
  space: {
    small: "4px",
    medium: "8px",
  },
});

export const hero = style({
  backgroundColor: vars.color.brandd,
  color: vars.color.white,
  padding: vars.space.large,
});