Web 每周报 #122 (#博客文章)
内容提要
本文是一篇关于Web开发的周报，介绍了个人网站设计、React中的memoization、更新网站的favicon、GitHub中记录代码更改、VS Code的新功能、自定义CSS属性的继承、苹果的界面设计变化、浏览器滚动条的样式、高可用性承诺的代价、正则表达式中的dotAll模式、Git的自动纠正功能、Web开发的新特性等。推荐了有用的项目和在线工具。
延伸解读
React 记忆化：正确使用 useMemo 与 useCallback
文章指出 React 中的记忆化是常被讨论且容易用错的话题。Nadia Makarevich 解释了如何正确使用 useMemo 和 useCallback 来减少不必要的渲染。开发者应关注其适用场景，避免过度使用导致性能下降。
Git 提交信息：详细记录优于简短描述
文章建议在 GitHub 中记录代码更改时，使用详细的提交信息而非单行描述。David 的文章认为，尽管 PR 界面便于审查，但编写详尽的提交信息是更好的文档化方式，有助于团队理解代码变更历史。
CSS 自定义属性继承：理解其独特行为
文章提到 CSS 自定义属性的继承特性值得关注。Jonathan Dallas 解释了自定义属性如何继承，以及“最近”的定义值会胜出。作者表示每天都在使用这一特性，但从未深入思考其与其他属性继承的差异。
高可用性承诺：评估可承受的代价
文章讨论了高可用性承诺的代价，指出 99.9% 或 99.99% 的可用性数字常被讨论，但更重要的是能否兑现。Itzy Sabo 建议翻转问题，思考你能承受多少“9”，从而做出更现实的承诺。
Q&A
Interop 2024 会带来哪些新的 Web 特性？
Interop 2024 将带来一系列新的 Web 特性，包括基于标准的滚动条样式（scrollbar-color 和 scrollbar-width）、CSS 自定义属性的继承、正则表达式的 dotAll 模式等。这些特性旨在提升 Web 开发的标准化和用户体验。
如何正确使用 React 中的 useMemo 和 useCallback？
useMemo 用于缓存计算结果，避免在每次渲染时重新计算；useCallback 用于缓存函数，避免在每次渲染时创建新函数。正确使用它们可以优化性能，减少不必要的渲染。
如何为网站更新 favicon 以适配所有平台？
需要为不同平台提供多种尺寸和格式的 favicon，包括传统的 .ico 文件、PNG 以及 SVG 等。可以使用工具生成完整的 favicon 套件，并确保在 HTML 中正确引用。
在 GitHub 中记录代码更改时，为什么建议使用详细的提交信息？
详细的提交信息可以更好地记录代码更改的上下文和原因，便于代码审查和后续维护。相比仅依赖 PR 描述，提交信息更持久且与代码历史直接关联。
VS Code 新增的 sticky 元素功能有什么作用？
VS Code 新增了 sticky 元素功能，可以在代码编辑器和文件树中固定显示当前作用域或路径，方便在滚动时保持上下文可见。可以通过设置 editor.stickyScroll.enabled 和 workbench.tree.enableStickyScroll 开启。
CSS 自定义属性的继承特性是怎样的？
CSS 自定义属性（变量）具有继承性，子元素会继承父元素的自定义属性值，除非被覆盖。最接近的定义会生效，这一特性使得主题和样式管理更加灵活。
如何基于标准来样式化浏览器滚动条？
现在可以使用标准的 CSS 属性 scrollbar-color 和 scrollbar-width 来样式化滚动条，无需再依赖浏览器特定的伪元素和前缀。Chrome 已支持这些标准属性。
正则表达式中的 dotAll 模式有什么用途？
在正则表达式中，默认情况下点号（.）不匹配换行符。使用 dotAll 模式（通过 s 标志）可以让点号匹配包括换行符在内的所有字符。
Git 的自动纠正功能如何帮助避免输入错误？
Git 的自动纠正功能可以在用户输入错误的命令时自动纠正为正确的命令，例如将 'git st' 纠正为 'git status'。可以通过配置 git config --global help.autocorrect 来启用。
有哪些推荐的可变字体资源？
v-fonts.com 列出了数百种可变字体，可以根据许可证进行筛选，方便为项目选择合适的字体。
