周刊首发于微信公众号“写代码的宝哥”,欢迎各位前端小伙伴前来关注!
快讯
![alt](https://i-blog.csdnimg.cn/blog_migrate/abecdc91146c78265fbfc36100f7fd1b.png)
-
距离 jQuery 1.0 发布已过去 17 年 [1] -
Node 20.6.0 [2] 将内置 .env
文件支持:node -env-file=.env index.js
文章
![alt](https://i-blog.csdnimg.cn/blog_migrate/40b86bc70d9b77d21b72bf4250cb938e.png)
-
Use web components for what they’re good at [3]。这篇文章是对 If Web Components are so great, why am I not using them? [4] 的回应,Web Components 并不是一无是处,它有自己擅长的某些方面,我们要扬长避短,充分利用好 Web Components 技术 -
Shadow DOM: Not by Default [5] - Enhance [6] 是一个 HTML FIRST 的全栈 Web 框架(类似 htmx),团队成员 Simon MacDonald 解释为什么没有把 Shadow DOM 作为默认配置使用 -
WebAssembly: byte-code of the future [7] - 本文介绍了 WebAssembly( .wasm
)的基本概念、基本使用(浏览器和 Node 端)及未来展望
![alt](https://i-blog.csdnimg.cn/blog_migrate/cf1143cfb165ade316bdb6c20a79b25e.png)
-
Deep Dive: Caching and Revalidating [8] - 深入学习 Next.js App Router 结构下缓存及校验原理,作为 官方文档 Caching in Next.js [9] 的补充 -
Using TypeScript in React [10] - React 官方文档增加了 TypeScript 章节。深入浅出地介绍了 TypeScript 与 React 结合使用的所有知识,非常有用 -
On React Suspense’s throttling [11] - 在这篇文章中,作者讲述了嵌套 Suspense
组件时会出现的一些奇怪行为(作者 Andrei Gătej 的个人博客 [12]近期都是谈论 React 方面比较深入的话题,值得一读) -
Building a Two-Way Data Binding Hook for Form Inputs in React [13] - 作者介绍了如何在 React 中通过 Hook 来实现与 Vue 中 v-model
相似的双向数据绑定效果 -
📽️ React Query With The App Router [14] - 11 分钟的视频介绍 React Query v5 是如何在 Next.js 的 App Router 架构中工作的
![alt](https://i-blog.csdnimg.cn/blog_migrate/42b42114f3ebad9bc78bb0c9e045060a.png)
-
Getting Started in a New Codebase [15] - 如何开始一个新的代码库?作者给出了几点建议 -
How to make an impact as a developer advocate [16] - 如何做一个有影响力的 Developer Advocate(DA) [17] -
Why You Should Make a Game Engine: 5 Years as a Developer [18] - 一位游戏引擎开发人员的 5 年感想。总结下来就是有能力、很幸运
![alt](https://i-blog.csdnimg.cn/blog_migrate/cb1796a0f502f84f2b331a1e712b65f3.png)
-
Getting started with SCSS [19] - SCSS 简单入门教程 -
I built a garbage collector for a language that doesn't need one [20] - 作者闲来无事,为 Rust 写了一个垃圾收集器库(使用 Rust 语言),虽然 Rust 并不需要 -
Val Town Runtime v3 – My mistakes were easy, the solutions simple [21] - Val Town [22] 是一个线上编写和运行代码的平台。本文作者谈了在建站时遇到的大坑。结论是:不要为 JavaScript 添加自定义功能,而是通过编辑器功能让标准 JavaScript 更简单 -
What helps people get comfortable on the command line? [23] - 本文列举了特别舒服于使用命令行程序时一些场景。仅存在于命令行程序中的一些“杀手级应用”算一个,像 oh-my-zsh、fish 这类 shell 程序也算一个
发布
![alt](https://i-blog.csdnimg.cn/blog_migrate/8d880c51314c482180a2787ae28077eb.png)
-
Expresso TS 1.7.0 [24] - Typescript + Node.js 轻量级框架,用于快速构建后端应用 -
Vitest v0.34.2 [25] - Vite 驱动的单元测试框架
![alt](https://i-blog.csdnimg.cn/blog_migrate/590bbe8826297e0bf9f810e9ceb14b69.png)
-
Bun v0.8 [26] - debugger 支持、SvelteKit 支持、一些新的 CLI tools -
FormKit 0.18.4 [27] - Vue 表单框架
工具
![alt](https://i-blog.csdnimg.cn/blog_migrate/bce153c4736892ad7e45525c51a011e3.png)
-
blog-cells [28]:让你可以在任何博客或网站上添加代码片段。它与 Jupyter 笔记本类似,但由 JavaScript 驱动,完全在浏览器中运行 -
Styled2Tailwind [29] - 一个 codemod,用于将 Styled-Components 代码转换成 TailwindCSS 代码。🌟 开发动机:Styled-Components 与服务器组件并不兼容,而 Tailwind 则可以直接插入,并且表现出色!
![alt](https://i-blog.csdnimg.cn/blog_migrate/1f54b6b0284874cd39982eda16fb16dd.png)
-
Multi [30] - MacOS 上一款免费的视频通话软件。好用的地方不仅在于可以远程视频聊天,还能成为多人协作软件。
![alt](https://i-blog.csdnimg.cn/blog_migrate/a6a46be61dd54e7352b10118c6ee2431.png)
-
Excalidraw editor [31] - 一个手绘风格的网页白板。 repo [32]。
资源
![alt](https://i-blog.csdnimg.cn/blog_migrate/95526190e07762be37716a7f9267d6d0.png)
-
You Don't Know JS Yet (book series) - 2nd Edition [33] - Kyle Simpson 的《你不知道的JS(第二版)》正在书写中,目前已经已经完成了 2 本。同样,所有内容都可以在Github 上免费阅读 -
Web Performance Tips ⚡ [34] - 这个站点列举了很多关于提升 Web 性能方面的 Tips。
库
![alt](https://i-blog.csdnimg.cn/blog_migrate/45a66965bbb629ad1f8dc4cbf9488887.png)
-
TypeChat [35] - 编写程序时,ChatGPT 这类大语言模型(LLM)的提问得到的回答往往不能直接用于项目。TypeChat 就是 LLM 到应用程序之间的桥梁——通过预定义类型,由 TypeChat 为我们定义 Prompts 并规范化 LLM 的返回的数据,并返回给我们高度定义好的 Response -
useHooks 2.1 [36] - 50+ 现代、服务器安全(server-safe) React Hooks 集合,来自 ui.dev 团队
![alt](https://i-blog.csdnimg.cn/blog_migrate/bf7991ca66c4ce5ffcfd17a22fcc5e49.png)
-
UnoCSS [37] - 按需、即时的原子 CSS 引擎 -
Tremor [38] - 用于快速构建仪表盘页面(Dashboard)的 React 库 -
Refine [39] - 一个通用的 React 框架,快速构建成熟的企业级 CRUD 项目
![alt](https://i-blog.csdnimg.cn/blog_migrate/31fcf951b018af4d6aa242fb2246a206.png)
-
React Hook Form [40] - 高性能、灵活的 的表单 React 表单校验库,适用于 React Web 及 React Native。 这里有篇教程 [41]可供学习 -
AutoAnimate [42] - 零配置、框架无关、即插即用的动画工具,为你的项目添加平滑的过渡效果
资料来源:Bytes #215、#216[43]、React Newsletter #381[44] & DEV Community Newsletter
References
距离 jQuery 1.0 发布已过去 17 年: https://blog.jquery.com/2006/08/26/jquery-10/
[2]Node 20.6.0: https://twitter.com/kom_256/status/1692225622091706389
[3]Use web components for what they’re good at: https://nolanlawson.com/2023/08/23/use-web-components-for-what-theyre-good-at/
[4]If Web Components are so great, why am I not using them?: https://daverupert.com/2023/07/why-not-webcomponents/
[5]Shadow DOM: Not by Default: https://begin.com/blog/posts/2023-08-18-shadow-dom-not-by-default
[6]Enhance: https://enhance.dev/
[7]WebAssembly: byte-code of the future: https://dev.to/joshnuss/webassembly-byte-code-of-the-future-402p
[8]Deep Dive: Caching and Revalidating: https://github.com/vercel/next.js/discussions/54075
[9]官方文档 Caching in Next.js: https://nextjs.org/docs/app/building-your-application/caching
[10]Using TypeScript in React: https://react.dev/learn/typescript
[11]On React Suspense’s throttling: https://andreigatej.dev/blog/on-react-suspense-throttling/
[12]Andrei Gătej 的个人博客: https://andreigatej.dev/blog/
[13]Building a Two-Way Data Binding Hook for Form Inputs in React: https://www.macarthur.me/posts/binding-input-state-in-react
[14]React Query With The App Router: https://www.youtube.com/watch?v=R4NHXrvwZWA
[15]Getting Started in a New Codebase: https://dev.to/abbeyperini/getting-started-in-a-new-codebase-e7b
[16]How to make an impact as a developer advocate: https://dev.to/blackgirlbytes/how-to-make-an-impact-as-a-developer-advocate-1jge#use-the-product-as-a-beginner
[17]Developer Advocate(DA): https://www.zhihu.com/question/52479600
[18]Why You Should Make a Game Engine: 5 Years as a Developer: https://dev.to/lkatkus/why-you-should-make-a-game-engine-5-years-as-a-developer-3ij1
[19]Getting started with SCSS: https://dev.to/classicthedemigod/getting-started-with-scss-the-css-preprocessor-with-superpowers-34ed
[20]I built a garbage collector for a language that doesn't need one: https://claytonwramsey.github.io/2023/08/14/dumpster.html
[21]Val Town Runtime v3 – My mistakes were easy, the solutions simple: https://blog.val.town/blog/val-town-runtime-v3-my-mistakes-were-easy-the-solutions-simple
[22]Val Town: https://www.val.town/
[23]What helps people get comfortable on the command line?: https://jvns.ca/blog/2023/08/08/what-helps-people-get-comfortable-on-the-command-line-/
[24]Expresso TS 1.7.0: https://github.com/expressots/expressots
[25]Vitest v0.34.2: https://github.com/vitest-dev/vitest/releases/tag/v0.34.2
[26]Bun v0.8: https://bun.sh/blog/bun-v0.8.0
[27]FormKit 0.18.4: https://github.com/formkit/formkit/releases/tag/0.18.4
[28]blog-cells: https://github.com/rameshvarun/blog-cells
[29]Styled2Tailwind: https://github.com/Blazity/styled2tailwind
[30]Multi: https://multi.app/
[31]Excalidraw editor: https://excalidraw.com/
[32]repo: https://github.com/excalidraw/excalidraw
[33]You Don't Know JS Yet (book series) - 2nd Edition: https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed
[34]Web Performance Tips ⚡: https://www.webperf.tips/
[35]TypeChat: https://microsoft.github.io/TypeChat/
[36]useHooks 2.1: https://usehooks.com/
[37]UnoCSS: https://unocss.dev/
[38]Tremor: https://github.com/tremorlabs/tremor
[39]Refine: https://refine.dev/
[40]React Hook Form: https://www.react-hook-form.com/
[41]这里有篇教程: https://claritydev.net/blog/form-validation-react-hook-form
[42]AutoAnimate: https://github.com/formkit/auto-animate
[43]Bytes #215、#216: https://bytes.dev/archives/215
[44]React Newsletter #381: https://reactnewsletter.com/issues/381
本文由 mdnice 多平台发布