Weekly

2022.03.20 - 2021.04.01

rome
1. Rome 是一个格式化/lint/打包的工具，可支持 JavaScript/TypeScript/JSON/HTML/Markdown/CSS
  is a formatter, linter, bundler, and more for JavaScript, TypeScript, JSON, HTML, Markdown, and CSS.
2. Rome 旨在取代Babel/ESLint/webpack/Prettier/Jest…
3. 统一多种工具，建立在一个共享的基础上，为代码处理/错误展示/并行研发/缓存和配置提供一种内聚的体验。
4. 有很强的约定，旨在具有最小的配置。
5. 使用 Rust 书写
Javascript 测试的组件时间
Redwood
- 可以研究下源码
ShadowRealms ECMA的新提案，更好的 eval
TS 是如何编译的

2022.03.20 - 2021.04.01

2022.03.14 - 2021.03.20

2022.03.7 - 2021.03.13

React18 Release Candidate
Creating Native Web Components
💎 Ultra：Deno + React 🌟 Modern Streaming React Framework in Deno

2022.02.21 - 2021.02.27

2022.02.13 - 2021.02.20

2022.02.07 - 2022.02.13

2022.01.31 - 2022.02.06

关于 pipe 操作符
2022 年会是全栈 JavaScript 的黄金时代吗?
React 2022 的趋势
- Remix
- Server-Side Rendering
- Concurrent Rendering
- Behaviour Testing

2022.01.24 - 2022.01.30

structured-clone 面试官要是让我手写 clone，我就一个 structuredClone 扔过去 😁
React Server Component
run-nodejs-from-google-sheets/

2022.01.17 - 2022.01.23

编辑器之争：Ace、CodeMirror、Monaco
parcel-css
ReactRouterV6 is released
React 的冒泡和捕获
Sneak peek into React 18 useDeferredValue hook
使 React 组件高度复用的六条建议
1. renderChilden
2. 使用特定组件复用通用组件 😅，大概就是包装一层的意思
3. 业务不要注入 UI 判断，将判断数据的逻辑前置
4. Flatten your props
5. Props fallback 机制
6. 避免解构

2022.01.10 - 2022.01.16

2022.12.03 - 2022.01.09

2021.12.27 - 2022.01.02

Webpack 5 导致的性能下降问题
一个小技巧：node –inspect-brk ./node_modules/.bin/webpack 排查
原因大概是因为：💡如果 Symbol.IsConcatSpreadable 在应用程序的任何位置、任何对象上设置了任何值，那么任何后续的使用都 concat 将在 Node 和 Chrome 上变慢。(这是否意味着，在构建过程成，我们可以移除关于 Symbol.IsConcatSpreadable 的操作)或者开启 backCompat模式
esbuild-vue

2021.12.20 - 2021.12.26

2021.11.29 - 2021.12.05

2021.11.08 - 2021.11.14

2021.10.25 - 2021.10.31

2021.10.08 - 2021.10.15

// React 内部
class Component {}
Component.isReactClass = {};

// 我们可以像这样检查它
class Greeting extends Component {}
console.log(Greeting.isReactClass); // ✅ 是的

2021.10.08 - 2021.10.15

2021.09.29 - 2021.10.07

2021.09.21 - 2021.09.28

2021.09.06 - 2021.09.12

Common NPM Mistakes Every Developer Should Avoid
- 手动给 package.json 添加依赖
- Locking your peer dependencies to a specific patch version
- Publishing multiple modules as a single package
- Publishing sensitive data by accident
- Providing a regular authentication token
- Upgrading for the sake of upgrading
- Deleting package-lock.json
Web Scraping with Javascript and Node.js
- using-javascripts-async 感觉比较有意思
无打包的愿景

2021.09.30 - 2021.09.05

2021.08.16 - 2021.08.23

2021.08.09 - 2021.08.15

2021.07.28 - 2021.08.08

2021.07.20 - 2021.07.27

2021.07.12 - 2021.07.19

The State Of Web Workers In 2021
export default thing is different to export { thing as default }
JS Is Weird 我挺讨厌这个网站的
Encoding data for POST requests
- URLSearchParams
  - URLSearchParams 做为请求体的 body，Content-Type 头部会自动设置为「application/x-www-form-urlencoded」
- FormData
  - 最主要的是文件的传递
  - formData 做为请求体：Content-Type 头部会自动设置为「multipart/form-data」
  - FormData 可以转换为 URLSearchParams，但含有文件时会抛错：application/x-www-form-urlencoded 不能代表文件数据
- Other Fetch bodies
  - Blobs
  - Strings：Content-Type：「text/plain;charset=UTF-8」
  - Buffers：需要自己设置 Content-Type 的值
  - Streams：不要试图处理 multipart/form-data或application/x-www-form-urlencoded，使用 FormData 和 URLSearchParams
- Bonus round: Converting Form Data to JSON
React — 5 Things That Might Surprise You
- previous state is unpredictable
- use useRef to store a static variable
- 使用 key 强制重新挂载一个组件
- Context API 会导致所有的的组件重新渲染，可以使用第三方库：use-context-selector
- 关于 Children 的 api：toArray、map、forEach、count、only

2021.07.05 - 2021.07.11

How to useContext in React
You have to start using this CSS property in your websites
- 我们的项目一直都有「safe-area」但我一直以为是通过 postCSS 定义的。其实在 iOS 上是原生的，安卓上可能有的手机有（我除了菜一无所有）
Writing memory efficient software applications in Node.js
- RAM（Random Access Memory）对于大文件的操作一不小心就 OOM，可以从 Node.js 提供的「流」和「缓冲」进行优化

2021.06.28 - 2021.07.04

2021.06.21 - 2021.06.27

关于 React 18 你所需要知道的
ES2021 Features!
Node v16.4.0 (Current) Released
- AsyncLocalStorage 作用，使用场景？
28 (And Counting) Node CLI App Best Practices
How to Dynamically Import ECMAScript Modules
PDF generation with Serverless + AWS Lambda and Puppeteer.

2021.06.14 - 2021.06.20

JS 内存使用的基准测试

根据v8 团队的研究：网络上 35% 的内存分配与 JavaScript 相关；10% 用于表示内存中的 DOM 元素；剩下的 55% 是图像。measureUserAgentSpecificMemory API 目前仅限于 JS 和 DOM 相关信息，但确实也占据页面实际内存使用量的很大一部分（约 45%）。

总结

内存仍然是 Web 性能的一个尚未开发的主要领域，但这可能需要改变。随着发布的 JavaScript 数量不断增加，内存使用量也在增加。
我们仍然需要更多信息来完善全貌。在任何时间点，浏览器实际可用的内存有多少？内存与关键业务和用户参与度指标有何关联？什么是内存的使用不与JavaScript和DOM的复杂性？
虽然今天使用真实用户监控为您的站点获取这些数据可能存在挑战，但我在此处进行测试所采用的相同方法（一些 Chrome 标志与自定义指标配对）使您可以开始将内存相关数据提取到您的测试结果今天，我也喜欢看到人们这样做只是所以我们可以更多地了解我们是如何做的今天，其意义是什么，以及如何开始好转。

memory-inspector for chrome

2021.06.07 - 2021.06.11

Making JavaScript run fast on WebAssembly
https://jsonmatic.com/
https://domevents.dev/