前端周刊第68期

最新推荐文章于 2024-08-25 09:57:22 发布

写代码的宝哥

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量151

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_71641959/article/details/132532535

版权

周刊首发于微信公众号“写代码的宝哥”，欢迎各位前端小伙伴前来关注！

快讯

距离 jQuery 1.0 发布已过去 17 年 ^[1]
Node 20.6.0 ^[2] 将内置 .env 文件支持： node -env-file=.env index.js

文章

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 端）及未来展望

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 架构中工作的

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 年感想。总结下来就是有能力、很幸运

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 程序也算一个

发布

Expresso TS 1.7.0 ^[24] - Typescript + Node.js 轻量级框架，用于快速构建后端应用
Vitest v0.34.2 ^[25] - Vite 驱动的单元测试框架

Bun v0.8 ^[26] - debugger 支持、SvelteKit 支持、一些新的 CLI tools
FormKit 0.18.4 ^[27] - Vue 表单框架

工具

blog-cells ^[28]：让你可以在任何博客或网站上添加代码片段。它与 Jupyter 笔记本类似，但由 JavaScript 驱动，完全在浏览器中运行
Styled2Tailwind ^[29] - 一个 codemod，用于将 Styled-Components 代码转换成 TailwindCSS 代码。🌟 开发动机：Styled-Components 与服务器组件并不兼容，而 Tailwind 则可以直接插入，并且表现出色！

Multi ^[30] - MacOS 上一款免费的视频通话软件。好用的地方不仅在于可以远程视频聊天，还能成为多人协作软件。

Excalidraw editor ^[31] - 一个手绘风格的网页白板。 repo ^[32]。

资源

You Don't Know JS Yet (book series) - 2nd Edition ^[33] - Kyle Simpson 的《你不知道的JS（第二版）》正在书写中，目前已经已经完成了 2 本。同样，所有内容都可以在Github 上免费阅读
Web Performance Tips ⚡ ^[34] - 这个站点列举了很多关于提升 Web 性能方面的 Tips。

库

TypeChat ^[35] - 编写程序时，ChatGPT 这类大语言模型（LLM）的提问得到的回答往往不能直接用于项目。TypeChat 就是 LLM 到应用程序之间的桥梁——通过预定义类型，由 TypeChat 为我们定义 Prompts 并规范化 LLM 的返回的数据，并返回给我们高度定义好的 Response
useHooks 2.1 ^[36] - 50+ 现代、服务器安全（server-safe） React Hooks 集合，来自 ui.dev 团队

UnoCSS ^[37] - 按需、即时的原子 CSS 引擎
Tremor ^[38] - 用于快速构建仪表盘页面（Dashboard）的 React 库
Refine ^[39] - 一个通用的 React 框架，快速构建成熟的企业级 CRUD 项目

React Hook Form ^[40] - 高性能、灵活的的表单 React 表单校验库，适用于 React Web 及 React Native。这里有篇教程 ^[41]可供学习
AutoAnimate ^[42] - 零配置、框架无关、即插即用的动画工具，为你的项目添加平滑的过渡效果

资料来源：Bytes #215、#216^[43]、React Newsletter #381^[44] & DEV Community Newsletter

References

[1]

距离 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 多平台发布

写代码的宝哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端周刊第68期

TypeChat 就是 LLM 到应用程序之间的桥梁——通过预定义类型，由 TypeChat 为我们定义 Prompts 并规范化 LLM 的返回的数据，并返回给我们高度定义好的 Response。的回应，Web Components 并不是一无是处，它有自己擅长的某些方面，我们要扬长避短，充分利用好 Web Components 技术。- 高性能、灵活的的表单 React 表单校验库，适用于 React Web 及 React Native。好用的地方不仅在于可以远程视频聊天，还能成为多人协作软件。
复制链接

扫一扫