前端周刊 | Dan Abramov模拟面试; 微软推出自动发现 Bug 的AI 工具; Apache Log4j 出现严重漏洞
科技趣闻
1. React 团队成员 Dan Abramov模拟面试
React核心成员Dan近日接受了Ben Awad的模拟面试。在这次新颖的面试中，React 专家Dan Abramov分享了一下趣事，并可以从中学习到一些技巧。
做了一个简单的中文字幕供大家参考（面试这种碎碎念翻译的效果可能不太好🤣）
2. Next.js发布改进的 Discord 社区
Next.js Discord 社区的目标是通过降低进入门槛，来进一步推动团队的使命，即使开发人员能够构建和发布精彩的东西。在社区中所做的一切都将围绕这一使命，围绕 Next.js 的开放平台构建社区。改进的 Next.js Discord 社区使得开发人员能够讨论 Next.js、提出问题、展示项目并找到 Next.js 相关工作。
更多详见：https://nextjs.org/blog/discordDiscord社区：http://nextjs.org/discord
3. 微软推出 AI 工具，能自动发现代码中的 Bug
微软公司的研究人员开发了一种新的人工智能（AI）工具，利用深度学习算法可以发现代码中的Bug，帮助开发者更准确、更高效地对程序进行调试。这种工具能够识别一些常见的错误，比如不正确的符号“<=”和“<”，不正确的布尔运算符“and”和“or”，变量滥用等。微软使用了 Python 代码测试了该系统。
微软表示，这一系统经过数据训练，可以用来检测并修复代码中的错误。与其它方法相比，经过训练后的模型发现 Bug 的概率最多可以提高 30%。利用该工具，发现了存在 GitHub 开源项目中的 19 个真实存在的代码错误。
4. GitHub 将大幅改进代码搜索功能，已推出技术预览版
12 月 9 日，微软 GitHub 在博客宣布，将大幅改进代码搜索功能，已推出技术预览版。
GitHub 为代码搜索创建了一个单独的界面，索引涵盖了超过 500 万个最受欢迎的公共存储库，用户还可以搜索自己的私人存储库。
借助智能排名和针对代码优化的索引，轻松在最佳结果中找到要查找的内容； 搜索精确字符串，支持子字符串匹配和特殊字符，或使用正则表达式（包含在 / 分隔符中）； 使用 org: 或 repo: 限定符确定搜索范围，并在搜索框中提供自动完成建议； 使用诸如“language:”“path:”“extension:”和布尔运算符（OR、NOT）等过滤器来优化结果，使用“symbol:”搜索符号的定义； 使用附加功能快速了解位置，例如目录树视图、活动范围的符号信息、跳转到定义、选择搜索等。
5. Apache Log4j 存在远程代码执行漏洞，Java 日志框架影响范围极大
近日一个 Apache Log4j 远程代码执行漏洞细节被公开，攻击者利用漏洞可以远程执行代码。
Apache Log4j2 是一款优秀的 Java 日志框架。该工具重写了 Log4j 框架，并且引入了大量丰富的特性。该日志框架被大量用于业务系统开发，用来记录日志信息。大多数情况下，开发者可能会将用户输入导致的错误信息写入日志中。由于 Apache Log4j2 某些功能存在递归解析功能，攻击者可直接构造恶意请求，触发远程代码执行漏洞。
漏洞利用无需特殊配置，经安全团队验证，Apache Struts2、Apache Solr、Apache Druid、Apache Flink 等均受影响。因该组件使用极为广泛，提醒 Apache Log4j2 用户尽快采取安全措施阻止漏洞攻击。
6. Chrome 推出新的UI 基金
Chrome 推出了一项基金来支持 UI 生态系统。这个基金是为了向从事设计工具、CSS 和 HTML 的人们提供资助。
开发人员在许多关键地方都很难实现 UI 目标，其中包括：
滚动； 表单元素； 切换； 移动布局和 UI 元素。
新的UI基金会在这些领域对有想法的人提供资金和联系。
更多详见：https://web.dev/ui-fund/
更新速递
1. Tailwind CSS V3.0 发布
Tailwind CSS 是一个越来越流行的 CSS 库，它为我们提供了构建定制设计而无需使用自定义样式所需的所有构建块。它被认为是构建21世纪Web界面的理想选择。
使用Tailwind CSS可以创建适合你所需或正在处理的组件，可以利用Tailwind CSS 的实用程序至上的能力来创建这些组件。如果你不喜欢使用Bootstrap及其类似功能，则在使用Tailwind CSS提供的实用程序类实现所需的设计时，会发现Tailwind CSS非常适合在美观的界面上工作。
Tailwind CSS 官网：https://tailwindcss.com/
2. Flutter V2.8 发布
Flutter 2.8 于 12 月 8 日发布，与Flame 模块化 2D 游戏引擎1.0 版本同时发布，后者是基于 Flutter 构建的游戏引擎，提供了一系列用于快速构建游戏的工具。2.8版本发布了多项新特性和改进以不断改善移动和 Web 端的开发体验，同时也正在将桌面端的支持推向稳定版。
Flutter 为应用开发带来了革新：只要一套代码库，即可构建、测试和发布适用于移动、Web、桌面和嵌入式平台的精美应用——开发者只需专注于他们希望构建的产品和服务，而无需首要考虑发布到哪些平台；作为一个高性能、高生产力的开发框架，Flutter 也可以帮助开发者们缩短产品开发周期；一套代码库，针对多个平台。
3. Taro.js 3.5 canary 发布，支持适配 鸿蒙&&OpenHarmony
Taro.js 3.5 canary 发布，支持适配鸿蒙和OpenHarmony，V3.5 正式版预计会在 2022 年 Q1 发布。
更多详见：https://juejin.cn/post/7039642862543192095
开源前线
这部分来看看本周GItHub上有哪些热门的项目吧。
1. Tabby
Tabby（原名 Terminus）是一个高度可配置的终端模拟器、SSH 和串行客户端，适用于 Windows、macOS 和 Linux。
特性：
集成的 SSH 客户端和连接管理器 集成的串行终端 主题设计和色彩方案 完全可配置的快捷键 分割窗格 记忆你的标签 支持 PowerShell（和 PS Core）、WSL、Git-Bash、Cygwin、Cmder 和 CMD 通过 Zmodem 在 SSH 会话中直接传输文件 完全支持 Unicode，包括双角的字符 在 Windows 上有适当的 shell 体验，包括标签完成（通过 Clink）。 为 SSH secrets 和配置提供集成的加密容器
功能：
一个 V220 终端+各种扩展 多个嵌套分割窗格 在窗口的任何一侧都有标签 可选的可停靠窗口，有一个全局生成热键 进程检测 进程完成时的通知 自定义 shell 配置文件 可选的 RMB 粘贴和复制选择（PuTTY风格）
Star⭐：23.2k
本周Star⭐️：2432
GItHub地址：https://github.com/Eugeny/tabby
2. MockingBird
AI拟声: 5秒内克隆您的声音并生成任意语音内容。
腾讯安全应急响应中心的一篇相关使用体验文章：https://security.tencent.com/index.php/blog/msg/204
Star⭐：14.7k
本周Star⭐️：1797
GItHub地址：https://github.com/babysor/MockingBird
3. javascript-algorithms
javascript-algorithms 包含了多种基于 JavaScript 的算法与数据结构。每种算法和数据结构都有自己的 README 并提供相关说明以及进一步阅读和 YouTube 视频。
Star⭐：129k
本周Star⭐️：1693
GItHub地址：https://github.com/trekhleb/javascript-algorithms
4. Appsmith
Appsmith 是一个开源前端框架，无需CSS/HTML，用于构建管理面板、CRUD 应用程序和工作流几乎不需要代码。可以连接到 API 或数据库，例如 MongoDB、PostgreSQL 或 MYSQL，还可以访问图表、小部件和其他用于构建 UI 的自定义工具。
Appsmith 通过拖放组件来构建完全自定义的管理面板、CRUD 应用程序和工作流。使用 30 多个 React 组件来构建没有 HTML/CSS 的页面。构建速度提高 10 倍。
Star⭐：10.2k
本周Star⭐️：1018
GItHub地址：https://github.com/appsmithorg/appsmith
5. WantWords
WantWords （万词王）一个反向词典系统，通过描述想要表达的意思来进行词语查找，由清华大学自然语言处理与社会人文计算实验室创建。
所谓的反向字典就是与提供查询词定义的常规（正向）词典相反，反向词典返回语义匹配查询描述的词。
体验地址：https://wantwords.thunlp.org/home/
Star⭐：2.8k
本周Star⭐️：932
GItHub地址：https://github.com/appsmithorg/appsmith
工具推荐
1. ReactDataGrid
ReactDataGrid是适用于React项目的数据网格组件。它是免费的，并且包含相当多的功能，包括：排序、分页、过滤、内联编辑、键盘导航、行选择、多种主图、实时跟踪、自定义滚动等等。
官网地址：https://reactdatagrid.io/
2. Iconsax React
Iconsax React是一个用于React 和 React Native的图标库，它包含 1000 个图标，有 6 种不同样式（线性、轮廓、粗体、双色调等）。
官网地址：https://iconsax-react.pages.dev/
3. Chance.js
Chance是一个极简的随机字符串、数字等生成器，有助于减少一些单调性，同时编写自动化测试或其他任何需要随机内容的地方。
官网地址：https://chancejs.com/
4. SonarLint
SonarLint是一个VS Code扩展，它可让您在编码问题出现之前修复它们！就像拼写检查器一样，SonarLint 在您编写代码时会突出显示错误和安全漏洞，并提供明确的补救指导，以便可以在代码提交之前修复它们。VS Code 中的 SonarLint 支持分析 JavaScript、TypeScript、Python、Java、HTML 和 PHP 代码。
可以直接在VS Code的扩展商店搜索“SonarLint”安装，或者在以下地址安装：https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode
5. Better Comments
Better Comments是一个注释高亮插件。它自带了五种颜色的注释，如果觉得不好看可以在settings.json 配置文件中修改。五种颜色效果如下：
可以直接在VS Code的扩展商店搜索“Better Comments”安装，或者在以下地址安装：https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
文章推荐
1. 12张图带你看看 V8 是如何执行和回收JavaScript代码的
本文通过图解的方式，来看看V8.0引擎是如何执行JavaScript以及如何进行垃圾回收的。
文章地址：12张图带你看看 V8 是如何执行和回收JavaScript代码的
2. 20+个超级实用的 JavaScript 开发技巧
本文主要介绍了一些JavaScript的开发技巧，通过这些方法可以让一些逻辑实现起来更简单，写出来的代码更优雅。
文章地址：20+个超级实用的 JavaScript 开发技巧
3. 2021年 CSS 使用趋势
本文主要介绍了2021年，CSS在不同方面的使用趋势，看看有哪些你经常使用的内容吧~
文章地址：2021年 CSS 使用趋势
4. React 中五种常见的样式策略
本文主要介绍了在React中常用的五种定义样式的策略，包括内联样式、样式表、CSS模块、styled-components、JSS，并且分析了每种策略的优缺点。你的项目中使用了哪些样式策略？
文章地址：React 中五种常见的样式策略
5. 【中文字幕】React Conf 2021 全程回顾
React Conf 2021 于2021年12月9日举行，全程5.5个小时，简单做了一个中文的字幕供大家学习，这次的演讲的内容包括对React 18的一些介绍、新文档的介绍等等。
文章地址：React Conf 2021 全程回顾
本期前端周刊到这里就结束了，本刊每周日晚更新。如果觉得有用就点个赞和关注吧~