推荐目录
-
盘点 2023 年前端大事件
-
前端DevOps平台的探索及设计理念
-
前端框架自欺欺人，TypeScript全无必要？
-
浏览器如何运行一段JavaScript代码
-
AIGC浅尝，探索如何将它融入到营销创意设计中？
国内
2023 前端
刚刚过去的 2023 年，这一年前端生态圈快速发展，发生了许多令人瞩目的事件和变化。从新技术的涌现到老技术的更新，前端技术正在经历着一次全面的变革。本文将梳理 2023 年前端界的重要事件，带你回顾那些令人难忘的历史时刻！
Taro - 鸿蒙
使用 Taro 开发鸿蒙原生应用 ------ 当 Taro 遇到纯血鸿蒙
华为宣布了鸿蒙Next的发布，阿里、美团等互联网厂商也宣布开展了开发原生鸿蒙应用的消息。鸿蒙应用开发使用方舟框架，支持声明式开发范式和类Web开发范式。Taro框架已经提供了对类Web开发范式的支持，可以用于开发鸿蒙应用。
BiliBili - DevOps
本文介绍 bilibili 内部前端 DevOps 平台的演变。
腾讯云 - 前端框架
前端框架的复杂度最近一段时间频频遭到质疑，引发了一些吐槽，甚至有一篇文章提到：『前端所有主流的框架，都是在自欺欺人』。本文主要是向前端的初学者介绍前端框架的发展历程及设计思想，比如为何要引入这样那样的"复杂度"？这样『设计』有什么好处？是为了解决什么问题？了解其背后的原因，我们或许就不会那么多抱怨了。
阿里 - 前端AIGC
本文讨论了AIGC相关的项目和生成质量的提升，介绍了Cyber项目和其应用场景，以及AIGC领域的行业现状。作者还探讨了前端在AIGC领域的作用和一些相关组件。最后，文本提到了几个想法和一个读者交流空间。
盒马 - AIGC
为了高效提高设计内容生产的效率和专业化程度，盒马营销创意设计团队的设计师们开始逐步应用AIGC方法。通过这些案例，设计师们成功地应用AIGC方法，提高了设计工作的效率和效果。
转转 - 浏览器 JS 执行
本文介绍了浏览器如何运行JavaScript代码，包括代码解析为抽象语法树、生成字节码并解释执行、热点代码的编译优化等。JavaScript代码执行过程是慢启动的，随着执行的进行，速度逐渐加快。执行上下文是代码运行时的基本环境，非常重要。
字节 - 浏览器插件
本文是一篇关于Chrome插件开发指南和实践的文章。文章首先介绍了Chrome插件的整体架构，包括插件页面、目标页面、Popup和Devtools等概念的解释。接着介绍了manifest.json文件的作用和结构，类似于前端项目中的package.json文件，用于描述插件的架构和权限。然后详细介绍了manifest.json文件中的各个字段的含义和用法。
政采云 - Flutter 依赖可视化
Flutter 组件之间可以相互依赖，编译不会报错，但随着项目规模越来越大，组件越来越多，如果不注重组件解耦，组件之间的依赖关系就会越来越乱，这会给项目的重构和平时的开发带来极大的困扰。通过依赖关系可视化，项目中各个组件的依赖关系我们可以做到一目了然。
得物 - Monorepo
本文主要讨论了前端monorepo大仓权限设计的思考与实现，介绍了基于Git和Gitlab的权限控制方法，以及在研发流程中的权限控制问题。通过权限控制，可以避免本地代码构建和生产环境构建不一致的情况，确保提交代码的质量和稳定性。在扩展思路方面，提到了访问控制列表和文件访问日志的实现。然而，这些扩展思路都存在一些问题，比如配置的复杂性、性能开销等。最后，作者鼓励读者提出更好的思路来实现文件的读权限控制。
腾讯设计 - Bento box
Bento box设计风格或Bento UI是一种设计趋势，它融入了极简主义和东方传统美学，追求简单直接的解决方案，让用户能够轻松理解并操作。Bento UI的设计特征包括具有视觉吸引力的层次感、基于网格的响应式布局、内容和功能的清晰划分、简约优雅和现代感。Bento UI减少干扰，使用简单有效的设计元素，重视反馈，加入必要的微交互环节。
动效设计
动效设计是指视觉元素产生的动画效果，分为交互动效、交互特效/微动效、视觉动画和可交互原型四大类。不同类型的动效制作所使用的软件、逻辑、交付和实现方式也不同。常用的动效软件有Principle、Protopie、Flinto、Origami、Hype5和Adobe After Effects（AE）。掌握这些软件的使用对于理解动效制作的差异和提高制作效率很有必要。
SPA Loading
SPA（单页应用）在初次加载时可能会有较长的白屏时间，影响用户体验。预渲染可以解决这个问题，将页面在打包期间渲染成静态HTML文件。预渲染的优势包括优化SEO、更快的加载速度、更好的用户体验和减轻服务端压力。预渲染可以通过一些插件实现，如prerender-spa-plugin和static-generator。核心流程包括定义一个generate函数和一个Renderer类，其中generate函数用于处理参数和流程处理，Renderer类用于启动无头浏览器生成HTML。在生成HTML的过程中，使用了puppeteer库来控制Chrome或Chromium的行为，模拟人类的操作，获取页面的HTML。最后，通过代码简单展示了如何使用puppeteer启动无头浏览器获取页面的HTML。这段代码实现了一个生成HTML页面的功能，它使用了Puppeteer库来模拟浏览器行为，并对页面的CSS资源进行了缓存和处理。
国外
RN 0.73
React Native 0.73 - Debugging Improvements, Stable Symlink Support, and more
React Native 0.73发布了，该版本增加了对Hermes调试的改进、稳定的符号链接支持、Android 14支持和新的实验性功能。React Native团队正在开发一种新的JavaScript调试器体验，旨在取代Flipper，React Native 0.73版本中提供了技术预览版。Metro现在支持解析符号链接，这使得React Native可以与monorepo设置一起使用。React Native 0.73版本开始支持Yarn (Classic)工作区，Expo文档中有相关指南。React Native 0.73版本支持Android 14用户授予应用程序对其媒体库中特定项目的访问权限，而不是对所有媒体的访问权限。React Native正在推出新的架构，以使其对开源社区中的所有人都可用。本文介绍了一些与React Native应用程序调试相关的变化和更新。
Electron 2023
2023年 Electron 开发者生态系统中的改进和变化。
Astro 4.0
Astro 4.0是一个Web框架，允许用户构建内容驱动的网站。它提供了新的API、更快的构建、重新设计的文档和一个名为Astro Dev Toolbar的独特开发工具。Astro Dev Toolbar是一个强大的工具，可以在浏览器中检查页面、捕捉可访问性问题，并使用自定义应用程序和第三方工具扩展工具栏。Astro 4.0还引入了国际化路由和增量内容缓存等新功能。
VSCode M11
欢迎使用Visual Studio Code 2023年11月发布版。在这个版本中，我们带来了许多更新，一些主要亮点包括：
-
浮动编辑窗口 - 可以拖放编辑器到您的桌面上。
-
可访问视图工作流 - 更流畅地切换到和从可访问视图。
-
更精细的扩展更新控制 - 可选择自动更新哪些扩展。
-
源代码控制进出视图 - 方便地查看待处理的代码仓库更改。
-
JavaScript堆快照 - 可视化堆快照，包括内存对象图。
-
从内联提示跳转至TypeScript定义 - 从内联提示悬停处跳转至定义。
-
Python类型层次结构显示 - 快速查看和导航复杂的类型关系。
-
GitHub Copilot更新 - 行内聊天改进、Rust代码解释。
-
预览：扩展的Sticky Scroll支持 - 树视图和终端中的Sticky Scroll。
V8 Maglev
Maglev - V8's Fastest Optimizing JIT
本文主要介绍了Chrome浏览器中的几个JIT编译器的性能比较，包括TurboFan、Sparkplug和Maglev。Maglev是一个基于SSA的简单JIT编译器，它具有最小的传递集和一个简单的单一IR，用于编码特定的JavaScript语义。
JS Framework
Let's learn how modern JavaScript frameworks work by building one
LWC（Lightning Web Components）贡献者谈通过实现一个框架来学习。
Micro Frontend
Micro Frontend Synergy: Techniques for Effective Communication
本文介绍了微前端中集中通信方式。
SVG Loading
Making SVG Loading Spinners: An Interactive Guide
这篇文章介绍了如何使用SVG属性来创建加载旋转器，提升用户体验。文章还提供了一个互动指南和一个全新的视频课程，教授如何使用JavaScript创建和操作SVG。作者还提供了帮助改进落地页的服务。
HTML5 Boilerplate
HTML5 Boilerplate v9.0.0 Released
HTML5 Boilerplate v9.0.0版本已发布，该版本经历了一系列的变化，包括移除了Modernizr、Normalize.css、Babel、Internet Explorer支持、Google Analytics和服务器配置，以及将Parcel替换为Webpack等。
StyleX
StyleX是一个表达性、确定性、可靠性和可扩展性的样式系统，适用于雄心勃勃的应用程序。它采用了CSS-in-JS库的开发者体验，并使用编译时工具将其与静态CSS的性能和可扩展性相结合。StyleX支持CSS的表达性子集，避免了复杂的选择器，并保证在生成的CSS中没有特异性冲突。StyleX允许跨文件和组件边界合并样式，是一个完全类型化的样式系统。
ES7 to ES13
A Deep Dive into the Latest JavaScript Features (ES7 to ES13)
Biome Prettier
Biome formatter wins the Prettier challenge
Biome formatter是一种代码格式化工具，通过参与Prettier挑战获得了胜利。Biome v1.4.0版本带来了更好的格式化体验、更多的格式化选项、新的VSCode功能、新的赞助商等。用户可以通过运行特定命令来升级Biome。Biome formatter在JavaScript、TypeScript和JSX格式化方面的兼容性得分超过了96%。Prettier的创始人之一Christopher Chedeau发起了这个挑战，吸引了很多人的关注，并有一些人决定为Biome做出贡献来获得奖金的一部分。令人惊讶的是，贡献者们协调一致，迅速完成了任务。这可能得益于三个主要因素：金钱、沟通和GitHub基础设施。Biome依赖于由 Rome Tools和GitHub构建的稳定的测试基础设施，能够捕捉每一个重构错误，提供细粒度的差异，并在输出与Prettier不同的情况下警告用户。
