Open Source Daily Issue 1092: Next-Generation Browser: "Brave"
内容提要
《开源日报》推荐Brave浏览器及英文文章《We Forgot Frontend Basics》。作者指出开发者过度依赖现代工具而忽视前端基础，例如用MutationObserver解决本可用CSS :empty处理的问题、因script位置错误导致footer测量失败、滥用useMemo优化。他呼吁回归HTML、CSS和JavaScript基础，遵循SOLID、YAGNI、KISS原则，保持批判性思维。
延伸解读
过度依赖现代工具的代价
文章通过多个实例指出，开发者过度依赖现代工具和框架，导致忽视前端基础知识。例如，用MutationObserver解决本可用CSS :empty处理的问题，因script位置错误导致footer测量失败，以及滥用useMemo优化。这些案例表明，工具虽能提高效率，但若缺乏对基础的理解，反而会引入不必要的复杂性。
回归基础与原则
作者呼吁回归HTML、CSS和JavaScript基础，并遵循SOLID、YAGNI和KISS等基本原则。这些原则有助于开发者写出更简洁、可维护的代码。文章强调，基础决定上层建筑，只有扎实的基础才能更好地应对新技术和挑战。
培养批判性思维
文章指出，开发者容易盲目跟随趋势，失去批判性思维。例如，无理由地使用useMemo和useCallback进行优化，反而可能损害应用性能。作者建议在采用新技术或优化前，先进行独立研究和思考，避免盲目从众。
Q&A
Brave浏览器支持哪些操作系统？
Brave浏览器支持Android、Linux、MacOS和Windows。
作者认为前端开发者过度依赖现代工具导致了什么问题？
导致开发者忽视前端基础知识，例如用MutationObserver解决本可用CSS :empty处理的问题、因script位置错误导致footer测量失败、滥用useMemo优化，并失去批判性思维。
在Card组件中，当header是动态内容时，为什么{header && <div />}条件渲染会失败？
因为当header是动态组件（如<CardHeader />）时，即使它返回null，header变量本身是truthy，条件渲染仍会渲染一个空的div。
如何用CSS解决Card组件中空header div的渲染问题？
使用CSS的:empty伪类：.card__header:empty { display: none; }，这样当header div为空时自动隐藏。
为什么在页面中script标签放在footer之前会导致footer高度测量失败？
因为script标签同步执行，当它执行时footer元素尚未被解析和渲染，所以document.querySelector('footer')返回null，无法测量高度。
作者对React中useMemo和useCallback的滥用有什么看法？
作者认为许多开发者没有明确理由就优化整个应用，例如用useMemo包装简单的布尔计算，这完全无用甚至损害首次加载性能。
作者建议前端开发者应遵循哪些基本原则？
遵循SOLID、YAGNI和KISS等基本原则，并回归HTML、CSS和JavaScript基础，保持批判性思维。
