前端
State Of JS 2024
一直都说 JS 变得很快,但是这几年框架还是那几个,很多东西维持着不变了。
2024 Nodejs 性能情况
最新的 LTS 版本 v20 性能显著的好。
基于功能的 React 架构
在基于功能的架构中,每个功能都尽可能与其他功能分离。这样,我们就可以让组件及其数据获取功能专注于其领域。
渲染之外的 React
React 不再仅仅是 state => UI
这个系列文章带你了解:
- SSR、SSG
- RSG
- Suspense 和 异步渲染
- React server actions
- useActionState、useFormStatus
React 中如何改进 INP
深入探讨在使用 React 时可以使用哪些模式来改进 Interaction-to-Next-Paint (INP)。所有模式都可以与 Next.js 和 Remix 等框架一起使用。
这是一个系列,三篇文章:
- 介绍和Yield 模式
- INP 与 React
- INP 与 View Transitions
浏览器存储方案对比 LocalStorage vs. IndexedDB vs. Cookies vs. OPFS vs. WASM-SQLite
OPFS 私有文件系统,是一个相对较新的API,允许 Web 应用程序直接在浏览器中存储大型文件。
WASM-SQLite 是使用 WebAssembly 实现的。
更高级别的磨砂玻璃backdrop-filter
backdrop-filter: blur() 是个效果非常棒的磨砂玻璃效果的属性,filter: blur(); 可以给元素自己添加磨砂效果,而backgrop-filter: blur() 可以给元素下层的元素形成磨砂效果。
另外,还有很多,优化技巧。
现代的 CSS Reset
我们可能以前一直都在使用Eric Meyer 的 CSS Reset 方案,但是已经十多年没有更新了,现代的 CSS reset 可以更加的简洁。
AI
Cursor 使用汇总
Cursor 仍旧是非常强大的编程辅助工具:
通过 cursorrules 强化驾驶舱(copilot)能力,一路 tab tab。
通过提示词、文档强化 cursor 在 chat、composer 的能力。
- Cursor101 是一个提供免费的 Cursor 入门教程和实用技巧的网站
- Cursor 提示词 属于大而全的,各种语言、框架都有
- Cursor 常用提示词手册 偏向工程开发过程中的提示词
- 很棒的 .cursorrules 精选列表
李继刚的提示词
- 如何写好Prompt: 结构化
- 如何写好Prompt: 迭代
- 如何写好Prompt: Few-shots
- 如何写好Prompt: Chain-of-Thought
- write-prompt 这个非常牛,prompt 是一套伪代码,LLM 会根据这套伪代码运行逻辑运算输出结果。(但是需要强大的 LLM,比如 Claude 3.5 Sonnet)