docs: issue-15

FengShangWuQi · Aug 8, 2021 · d013e91 · d013e91
1 parent ecf0cb1
commit d013e91
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 11 deletions.
diff --git a/scripts/build/build-assets.ts b/scripts/build/build-assets.ts
@@ -9,6 +9,7 @@ import { prettySize } from "../../utils/prettySize";
 enum Encoder {
   ".png" = "oxipng",
   ".jpg" = "mozjpeg",
+  ".jpeg" = "mozjpeg",
   ".webp" = "webp",
 }
 
@@ -74,7 +75,7 @@ const compressImage = async (imgPath: string) => {
 (async () => {
   const imagePath = await globby(process.cwd(), {
     expandDirectories: {
-      extensions: ["png", "jpg", "webp"],
+      extensions: ["png", "jpg", "jpeg", "webp"],
     },
     gitignore: true,
   });

diff --git a/zhoubao/images/issue-15.jpeg b/zhoubao/images/issue-15.jpeg
diff --git a/zhoubao/issue-13.md b/zhoubao/issue-13.md
@@ -35,7 +35,7 @@ cover: images/issue-13.jpg
 
 ### 4、[尤大大新活 petite-vue 尝鲜](https://juejin.cn/post/6983328034443132935)
 
-petite-vue 是一个 mini 版的 Vue，大小只有 5.8kb，针对渐进式增强进行了优化，它提供了与标准 Vue 相同的模板语法和响应式模型。
+**petite-vue** 是一个 mini 版的 Vue，大小只有 5.8kb，针对渐进式增强进行了优化，它提供了与标准 Vue 相同的模板语法和响应式模型。
 
 ### 5、[迈入现代 Web 开发（GMTC 2021 演讲《字节跳动的现代 Web 开发实践》全文）](https://zhuanlan.zhihu.com/p/386607009)
 
@@ -47,7 +47,7 @@ petite-vue 是一个 mini 版的 Vue，大小只有 5.8kb，针对渐进式增
 
 ### 7、[SolidJS 硬气的说：我比 React 还 react](https://segmentfault.com/a/1190000040275257)
 
-本文会比较 SolidJS 与 React 的异同，阐述它的独特优势。
+本文会比较 **SolidJS** 与 React 的异同，阐述它的独特优势。
 
 ### 8、[尤雨溪：做技术哪有什么两全之策，都是取舍和平衡](https://mp.weixin.qq.com/s/_q_SnCbGyXrNnXA876tXbA)
 
@@ -67,4 +67,4 @@ petite-vue 是一个 mini 版的 Vue，大小只有 5.8kb，针对渐进式增
 
 ### 1、[程序员的酒后真言](https://www.ruanyifeng.com/blog/2021/06/drunk-post-of-a-programmer.html)
 
-一个程序员说自己喝醉了，软件工程师已经当了 10 年，心里有好多话想说，我可能会后悔今天说了这些话。
+一个程序员说自己喝醉了，软件工程师已经当了 **10** 年，心里有好多话想说，我可能会后悔今天说了这些话。
diff --git a/zhoubao/issue-14.md b/zhoubao/issue-14.md
@@ -10,11 +10,11 @@ cover: images/issue-14.jpg
 
 ### 1、[Sequence of Gatsby's bootstrap lifecycle with links to source code as of v2.0.0](https://gist.github.com/sw-yx/09306ec03df7b4cd8e7469bb74c078fb)
 
-Gatsby 生命周期。
+**Gatsby** 生命周期。
 
 ### 2、[vscode 是怎么跑起来的](https://juejin.cn/post/6987420993568374797)
 
-vscode 是基于 electron 做窗口的创建和进程通信的，应用启动的时候会跑主进程，从 src/main 开始执行，然后创建 CodeMain 对象。
+vscode 是基于 electron 做窗口的创建和进程通信的，应用启动的时候会跑主进程，从 src/main 开始执行，然后创建 **CodeMain** 对象。
 
 ### 3、[腾讯课堂小程序性能极致优化——网络请求优化篇](https://mp.weixin.qq.com/s/g2mLpWhGsrMEud-i8xD6YQ)
 
@@ -30,23 +30,23 @@ vscode 是基于 electron 做窗口的创建和进程通信的，应用启动的
 
 ### 6、[2021 年 Web 应用程序的最佳图像格式](https://mp.weixin.qq.com/s/KQgp_4l0h3F9X5qDUHkkrQ)
 
-本文将介绍 4 种最新的图像类型，以帮助您为下一个项目选择最佳的图像类型。
+本文将介绍 **4** 种最新的图像类型，以帮助您为下一个项目选择最佳的图像类型。
 
 ### 7、[47 张图带你走进浏览器的世界](https://king-hcj.github.io/2021/07/11/web-browser/)
 
-本文用 47 张图带你了解浏览器的发展史、浏览器的架构、浏览器的基本原理等。
+本文用 **47** 张图带你了解浏览器的发展史、浏览器的架构、浏览器的基本原理等。
 
 ### 8、[Pinia 与 Vuex 的对比：Pinia 是 Vuex 的良好替代品吗](https://segmentfault.com/a/1190000040368602)
 
-Pinia 是 Vue.js 的轻量级状态管理库，最近很受欢迎，它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库。
+**Pinia** 是 Vue.js 的轻量级状态管理库，最近很受欢迎，它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库。
 
 ### 9、[拖拽竟然还能这样玩](https://juejin.cn/post/6984587700951056414)
 
-本文介绍了谷歌 transmat 开源项目的应用场景、使用方式及相关源码。
+本文介绍了谷歌 **transmat** 开源项目的应用场景、使用方式及相关源码。
 
 ### 10、[NFC comes to the web](https://cxlabs.sap.com/2021/07/27/nfc-comes-to-the-web/)
 
-目前，Web NFC 已可以通过 Chrome 浏览器在 Android 手机上使用。
+目前，**Web NFC** 已可以通过 Chrome 浏览器在 Android 手机上使用。
 
 ## 明星项目
 

diff --git a/zhoubao/issue-15.md b/zhoubao/issue-15.md
@@ -0,0 +1,80 @@
+---
+title: 周报#15 @ Next.js 预渲染、content-visibility、Zero-runtime Stylesheets
+tags:
+  - Front-End
+date: 2021-08-08
+cover: images/issue-15.jpeg
+---
+
+## 前端动态
+
+### 1、[西瓜客户端埋点实践：基于责任链的埋点框架](https://www.infoq.cn/article/P5HjNLgNmvvIfHaI7sxG)
+
+这个框架更多是约定了一套责任链的协议，通过责任链的存在，方便埋点参数的收集上报。
+
+### 2、[精读《默认、命名导出的区别》](https://github.com/ascoders/weekly/blob/master/%E5%89%8D%E6%B2%BF%E6%8A%80%E6%9C%AF/204.%E7%B2%BE%E8%AF%BB%E3%80%8A%E9%BB%98%E8%AE%A4%E3%80%81%E5%91%BD%E5%90%8D%E5%AF%BC%E5%87%BA%E7%9A%84%E5%8C%BA%E5%88%AB%E3%80%8B.md)
+
+从代码可维护性角度出发，命名导出比默认导出更好，因为它减少了因引用产生重命名情况的发生，但命名导出与默认导出的区别不止如此，在逻辑上也有很大差异，为了减少开发时在这方面栽跟头，有必要提前了解它们的区别。
+
+### 3、[Glitter text](https://wh0.github.io/2021/04/25/glitter.html)
+
+生成和下载具有闪光效果的文本。
+
+### 4、[Next.js 是怎么做预渲染的](https://juejin.cn/post/6991397899317805064)
+
+本文介绍了 **Next.js** 提供的三种预渲染模式以及混合渲染模式。
+
+### 5、[Rust 连续第六年成为 Stack Overflow 用户最喜欢的语言](https://www.solidot.org/story?sid=68453)
+
+根据编程问答网站 **Stack Overflow** 的调查，**Rust** 连续第六年成为其用户最喜欢的语言，**AWS** 是最喜欢和最常用的云计算平台，**Svelte** 是最喜欢的 Web 框架，**Tensorflow** 是最想要的库，**JavaScript** 是最常用的编程语言，**React.js** 是最常用的 Web 框架。
+
+### 6、[只需一行 CSS 代码，让长列表网页的渲染性能提升几倍以上](https://juejin.cn/post/6908521872577527822)
+
+长列表网页，我们常采用虚拟滚动、分页、上拉加载等方式优化，现在，我们多了一种方式：**content-visibility**，只需要一行 CSS 代码，就可以实现可见网页只加载可见区域内容，使网页的渲染性能得到数倍的提升。
+
+### 7、[如何阅读源码 —— 以 Vetur 为例](https://zhuanlan.zhihu.com/p/395405684)
+
+本文结合 **Vetur** 源码，具体地讲解作者在阅读源码的各个阶段所思所想。
+
+### 8、[Zero-runtime Stylesheets in TypeScript](https://vanilla-extract.style/)
+
+```ts
+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,
+});
+```
+
+## 明星项目
+
+### 1、[testjavascript/nodejs-integration-tests-best-practices](https://github.com/testjavascript/nodejs-integration-tests-best-practices)
+
+**40+ Node.js** 集成测试最佳实践。
+
+### 2、[bndw/wifi-card](https://github.com/bndw/wifi-card)
+
+打印 **WiFi** 二维码。
+
+## 本周热点
+
+### 1、[科技巨头与员工争议远程办公](https://www.solidot.org/story?sid=68435)
+
+美国科技巨头如 **Apple**、**Google** 和 **Facebook** 的高管正与它们的员工争议线下办公的必要性。
+
+### 2、[腾讯所有游戏都将推行限时长限消费](https://www.solidot.org/story?sid=68444)
+
+腾讯官方微信号“鹅厂黑板报”发布公告，将从《王者荣耀》试点，逐步面向全线游戏推出**“双减、双打、三提倡”**的七条新举措。