diff --git a/src/i18n/locales.yml b/src/i18n/locales.yml
index c53d55c..6f2724d 100644
--- a/src/i18n/locales.yml
+++ b/src/i18n/locales.yml
@@ -64,7 +64,7 @@
- id: 'zh-Hans'
label: 简体中文
- translators: ['TIOvOIT', 'scarsu', 'shadowings-zy']
+ translators: ['TIOvOIT', 'scarsu', 'shadowings-zy', 'S1ngS1ng']
- id: 'zh-Hant'
label: 正體中文
diff --git a/src/i18n/zh-Hans/common.yml b/src/i18n/zh-Hans/common.yml
index e4eb08b..6d53b28 100644
--- a/src/i18n/zh-Hans/common.yml
+++ b/src/i18n/zh-Hans/common.yml
@@ -35,6 +35,12 @@ translations:
t: 没有可供填写的问卷。
- key: general.closed_surveys
t: 已关闭
+ - key: general.no_closed_surveys
+ t: 没有已关闭的问卷。
+ - key: general.preview_surveys
+ t: 预览问卷
+ - key: general.no_preview_surveys
+ t: 没有可预览的问卷。
- key: general.start_survey
t: 开始问卷 »
- key: general.continue_survey
@@ -116,6 +122,12 @@ translations:
- key: partners.become_partner
t: 成为我的伙伴
+ # 404
+ - key: notfound.title
+ t: 404 未找到页面
+ - key: notfound.description
+ t: 抱歉，你想要访问的页面不存在。
+
# other
- key: general.join_discord
t: 在 Discord 中加入我们.
@@ -494,6 +506,59 @@ translations:
t: 屏幕阅读器
- key: options.form_factors.print
t: 打印机
+
+ # Industry Sector
+ - key: options.industry_sector.ecommerce
+ t: 电商与零售
+ - key: options.industry_sector.news_media
+ t: 新闻、媒体、自媒体
+ - key: options.industry_sector.healthcare
+ t: 医疗健康
+ - key: options.industry_sector.finance
+ t: 金融
+ - key: options.industry_sector.programming_tools
+ t: 编程与技术工具
+ - key: options.industry_sector.socialmedia
+ t: 社交媒体
+ - key: options.industry_sector.marketing_tools
+ t: 市场/销售/分析工具
+ - key: options.industry_sector.education
+ t: 教育
+ - key: options.industry_sector.real_estate
+ t: 房地产
+ - key: options.industry_sector.government
+ t: 政府单位
+ - key: options.industry_sector.entertainment
+ t: 娱乐业
+ - key: options.industry_sector.consulting
+ t: 咨询与服务
+ - key: options.industry_sector.travel
+ t: 旅游
+ - key: options.industry_sector.insurance
+ t: 保险
+ - key: options.industry_sector.logistics
+ t: 物流
+ - key: options.industry_sector.energy
+ t: 能源
+ - key: options.industry_sector.telecommunications
+ t: 通信
+ - key: options.industry_sector.student
+ t: 学生
+ - key: options.industry_sector.hospitality
+ t: 餐旅业
+ - key: options.industry_sector.cyber_security
+ t: 计算机安全
+ - key: options.industry_sector.construction
+ t: 建筑
+ - key: options.industry_sector.automotive
+ t: 汽车产业
+ - key: options.industry_sector.agriculture
+ t: 农业
+ - key: options.industry_sector.transport
+ t: 运输业
+ - key: options.industry_sector.manufacturing
+ t: 制造业
+
###########################################################################
# Tools
###########################################################################
diff --git a/src/i18n/zh-Hans/results.yml b/src/i18n/zh-Hans/results.yml
index 393dce5..eef8cd1 100644
--- a/src/i18n/zh-Hans/results.yml
+++ b/src/i18n/zh-Hans/results.yml
@@ -180,7 +180,7 @@ translations:
# knowledge score
- key: features.knowledge_score
- t: Knowledge Score
+ t: 知识评分
- key: features.knowledge_score.description
t: 在调查中提到的所有特性中，受访者知道多少？
@@ -255,26 +255,26 @@ translations:
# tools quadrant
- key: blocks.tools_quadrant.title
- t: 满意度 对比 使用率
- - key: blocks.tools_quadrant.satisfaction.description
+ t: 满意度 对比 用户数量
+ - key: blocks.tools_quadrant.description
t: |
- 这张图表显示了每种技术对其总 **用户数量** 的 **满意率**。它可以分为四个象限：
+ 这张图表展示了每种技术的 **用户数量** 及 **满意度**。以下为四个象限的含义：
- - **评估**: 使用率较低，满意度较高。值得关注的技术。
+ - **评估**: 低使用率，高满意度。值得关注的技术。
- - **采用**: 使用率高，满意度高。可采用安全技术。
+ - **采用**: 高使用率，高满意度。可放心选用的技术。
- - **规避**: 使用率低，满意度低。目前最好避免使用的技术。
+ - **规避**: 低使用率，低满意度。应避免使用的技术。
- - **待定**: 使用率高，满意度低。如果您正在使用这些技术，请重新评估它们。
- - key: blocks.tools_quadrant.satisfaction.note
- t: 注意，TypeScript 在图表中出现了两次，因为它同时包含在JavaScript 偏好和构建工具部分。
+ - **待定**: 高使用率，低满意度。如果您正在使用这些技术，请重新评估它们。
+ - key: blocks.tools_quadrant.note
+ t: 注意，TypeScript 在图表中出现了两次，因为它同时包含在 JavaScript 偏好和构建工具部分。
- key: blocks.tools_quadrant.interest.description
t: |
- 这张图表显示了每种技术对其总 **用户数量** 的 **关注率** (关注定义为了解某一技术但尚未使用该技术的受访者)。
+ 这张图表展示了每种技术的 **用户数量** 及 **关注率** (关注的定义是受访者听说过某一项技术但尚未使用该技术)。
- (请注意，低用户数量可能是由于非著名的技术，也可能是该技术很多受访者已经在使用。)
+ (请注意，低用户数量可能是因为有很多受访者未听说过此项技术，同时也可能是因为该技术已有很多受访者在使用。)
# category other tools
- key: blocks.category_other_tools.title
diff --git a/src/i18n/zh-Hans/state_of_css.yml b/src/i18n/zh-Hans/state_of_css.yml
index b7297f7..bb5f9dc 100644
--- a/src/i18n/zh-Hans/state_of_css.yml
+++ b/src/i18n/zh-Hans/state_of_css.yml
@@ -1,4 +1,4 @@
-locale: en-US
+locale: zh-Hans
namespace: css
translations:
###########################################################################
@@ -184,15 +184,15 @@ translations:
- key: features.blend_modes
t: 混合模式 (Blend Modes)
- key: features.blend_modes.description
- t: The mix-blend-mode property
+ t: mix-blend-mode 属性
- key: features.filter_effects #
- t: CSS 滤镜效果
+ t: CSS 滤镜效果（Filter）
- key: features.backdrop_filter
t: backdrop-filter
# interactions
- key: features.scroll_snap
- t: CSS 滚动捕捉
+ t: CSS 滚动快照（Scroll Snap）
- key: features.overscroll_behavior
t: overscroll-behavior
- key: features.overflow_anchor
@@ -206,9 +206,9 @@ translations:
- key: features.web_fonts
t: Web 字体 (@font-face)
- key: features.variables_fonts
- t: 可变（Variable fonts）
+ t: 可变字体（Variable fonts）
- key: features.line_breaking
- t: 换行属性 （Line breaking properties）
+ t: 换行属性（Line breaking properties）
- key: features.line_breaking.description
t: overflow-wrap、 word-break、 line-break以及 hyphens
- key: features.font_variant
@@ -240,7 +240,7 @@ translations:
# media queries
- key: features.feature_support_queries
- t: 特征查询(Feature Support Queries)「@supports」
+ t: 特征查询（@supports）
- key: features.prefers_reduced_motion
t: prefers-reduced-motion
- key: features.prefers_color_scheme
@@ -252,7 +252,7 @@ translations:
- key: features.variables
t: CSS 变量（自定属性）
- key: features.containment
- t: CSS 约束 （Containment）
+ t: CSS Containment
- key: features.will_change
t: will-change
- key: features.calc
@@ -260,9 +260,9 @@ translations:
- key: features.houdini
t: Houdini
- key: features.comparison_functions
- t: CSS 比较函数 （Comparison Functions）
+ t: CSS 比较函数（Comparison Functions）
- key: features.comparison_functions.description
- t: min()、max() 以及 clamp()
+ t: min()、max()、clamp()
###########################################################################
# Units & Selectors
@@ -285,9 +285,9 @@ translations:
- key: options.units.rem
t: rem
- key: options.units.vh_vw
- t: vh, vw
+ t: vh、vw
- key: options.units.vmin_vmax
- t: vmin, vmax
+ t: vmin、vmax
- key: options.units.ch
t: ch
- key: options.units.ex
@@ -322,18 +322,18 @@ translations:
t: '::backdrop'
- key: features_others.combinators
- t: 关系选择器 （Combinators）
+ t: 关系选择器（Combinators）
- key: features_others.combinators.description
t: 你曾使用哪些关系选择器？
- key: options.combinators.descendant
- t: div span (后代选择器)
+ t: div span（后代选择器）
- key: options.combinators.child
- t: div > span (子代选择器)
+ t: div > span（直接子代选择器）
- key: options.combinators.next_sibling
- t: div + div (领接兄弟选择器)
+ t: div + div（相邻兄弟选择器）
- key: options.combinators.subsequent_sibling
- t: div ~ div (通用兄弟选择器)
+ t: div ~ div（通用兄弟选择器）
- key: features_others.tree_document_structure
t: 伪类选择器
@@ -381,17 +381,17 @@ translations:
t: 你曾使用哪些属性选择器？
- key: options.attributes.presence
- t: div[foo] (存)
+ t: div[foo]（存在 foo 属性）
- key: options.attributes.equality
- t: div[foo="bar"] (等)
+ t: div[foo="bar"]（foo 的属性值为 "bar"）
- key: options.attributes.starts_with
- t: div[foo^="bar"] (始)
+ t: div[foo^="bar"]（foo 的属性值以 "bar" 开头）
- key: options.attributes.ends_with
- t: div[foo$="bar"] (末)
+ t: div[foo$="bar"]（foo 的属性值以 "bar" 结尾）
- key: options.attributes.contains_word
- t: div[foo~="bar"] (词匹配)
+ t: div[foo~="bar"]（foo 的属性值中有一个值为 "bar"）
- key: options.attributes.contains_substring
- t: div[foo*="bar"] (词包含)
+ t: div[foo*="bar"]（foo 的属性值中包含 "bar"）
- key: features_others.links_urls
t: 链接/网址
@@ -401,7 +401,7 @@ translations:
- key: options.links_urls.any_link
t: :any-link
- key: options.links_urls.link_visited
- t: :link and :visited
+ t: :link 和 :visited
- key: options.links_urls.local_link
t: :local-link
- key: options.links_urls.target
@@ -429,9 +429,9 @@ translations:
t: 你曾使用哪些关于表单控制的选择器？
- key: options.form_controls.enabled_disabled
- t: :enabled and :disabled
+ t: :enabled 和 :disabled
- key: options.form_controls.read_only_write
- t: :read-only and :read-write
+ t: :read-only 和 :read-write
- key: options.form_controls.placeholder_shown
t: :placeholder-shown
- key: options.form_controls.default
@@ -464,15 +464,20 @@ translations:
t: 在什么设备上进行测试？
- key: environments.css_for_print
- t: CSS for Print
+ t: CSS for Print（打印样式）
- key: environments.css_for_print.description
- t: 使用过打印样式（print styles）吗？
+ t: 是否为打印网页的使用场景写过特定的样式？
- key: environments.css_for_email
t: CSS for Email 客户端
- key: environments.css_for_email.description
t: 有些写过邮件客户端样式吗？
+ - key: charts.axis_legends.css_for_print
+ t: 频率
+ - key: charts.axis_legends.css_for_email
+ t: 频率
+
###########################################################################
# Opinions
###########################################################################
@@ -511,7 +516,11 @@ translations:
- key: opinions_others.currently_missing_from_css.others
t: 目前觉得 CSS 缺少什么？
- key: opinions_others.currently_missing_from_css.others.description
- t: 展望 CSS 的未来。
+ t: 你希望今后 CSS 加入的功能。
+ - key: opinions_others.currently_missing_from_css.others.note
+ t: >
+ 这些结果是根据用户自由填写的表单项归纳得出。
+ 如果你想看到原始数据，请访问 [whatsmissingfromcss.com](http://whatsmissingfromcss.com/)。
- key: opinions.sum_up_one_word_css
t: 一个词来形容 CSS
diff --git a/src/i18n/zh-Hans/state_of_css_2020.yml b/src/i18n/zh-Hans/state_of_css_2020.yml
new file mode 100644
index 0000000..35454d4
--- /dev/null
+++ b/src/i18n/zh-Hans/state_of_css_2020.yml
@@ -0,0 +1,260 @@
+locale: zh-Hans
+translations:
+ ###########################################################################
+ # Introduction
+ ###########################################################################
+
+ - key: sections.introduction.description
+ t: |
+
+ 你或许应该忘记以前所学到的 CSS，或者至少应该重新看待 CSS。如果你也像我一样写了十多年 CSS，那要注意了，2020 年的 CSS 已经和咱们以前所了解的 CSS 大不相同了。
+
+ 比如，以前我们习惯用断点来实现动态、响应式的布局；而现在，我们可以用 CSS Grid 来实现能够适应任何设备尺寸的布局，同时还可以大大减少代码量。再比如，现在我们可以不再依赖全局样式表了，而是可以使用 CSS-in-JS 解决方案让样式与组件绑定，这样我们也可以更方便地打造多主题的设计系统。
+
+ 不仅如此，今年还出现了像是 Tailwind CSS 这样"工具优先"（utility-first）的 CSS 框架，它的出现迫使我们重新审视传统语义化类名的必要性。
+
+ 不论这些改变会让你怀着激动的心情写一篇博文分享，抑或是在开发者社区抱怨，我们只想通过数据为你展示 CSS 的现状和展望 CSS 的未来。希望可以为你呈现出今年 CSS 的所有亮点。
+
+ ### 团队
+
+ State of CSS 调查由以下成员发起并维护:
+
+ - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding
+ - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations
+
+ ### 下载数据
+
+ 你可以[在这里下载调查结果的 JSON 源数据](https://www.kaggle.com/sachag/state-of-css)。如果你用这些数据做出了其它数据可视化页面或项目，请告知我们。
+
+ ### 其它链接
+
+ - [State of CSS 主页](https://stateofcss.com)
+ - [State of JS](https://stateofjs.com)
+
+ ### 鸣谢
+
+ 感谢所有参与设计此问卷调查的人：[Chen Hui-Jing](http://chenhuijing.com/)、[Philip Jägenstedt](https://blog.foolip.org/)、[Adam Argyle](https://nerdy.dev/)、[Ahmad Shadeed](https://www.ishadeed.com/)、[Robert Flack](https://github.com/flackr)、[Dominic Nguyen](https://www.chromatic.com/)、[Fantasai](http://fantasai.inkedblade.net/)、[Kilian Valkhof](https://kilianvalkhof.com/)。
+
+ 特别感谢 [Alexey Pyltsyn](https://github.com/lex111) 协助翻译。
+
+ ### 素材
+
+ 本网站使用 IBM Plex Mono 字体。如果您有任何疑问与反馈，请[联系我们](mailto:hello@stateofjs.com)
+
+ 接下来，我们就一起看看 CSS 今年的发展究竟如何。
+
+ – Sacha 和 Raphaël
+
+ ###########################################################################
+ # Tshirt
+ ###########################################################################
+
+ - key: sections.tshirt.title
+ t: T-shirt
+
+ - key: sections.tshirt.description
+ t: |
+ ## 赞助 State of CSS 调查
+
+ 在公布调查结果前，请允许我们发布一条简短的公告：隆重介绍 🎈🎉👕 State of CSS T-shirt 👕🎉🎈！
+
+ 这件 T-shirt 很特别，因为它是目前市面上唯一一件可以教你实用 CSS 技巧的 T-shirt。
+
+ 不论你是要去参加技术峰会、工作面试、还是日常上班，这件 T-shirt 都可以展示出你对 CSS 的热爱与了解。
+
+ - key: tshirt.about
+ t: 关于这件 T-shirt
+
+ - key: tshirt.description
+ t: |
+ 这件衣服印有 State of CSS 的标识，同时附上了每个形状的真实代码片段。说不定你能从这些代码中学到一些知识点。
+
+ 这是一件高品质、超柔软的衣服，面料材质为三种成分混纺，剪裁方式为修身剪裁。
+ 这件衣服穿起来会偏紧，所以如果你习惯穿着宽松的衣服，我们建议你选择比平时穿着大一号的码数（照片中，我穿的是 M 号）。
+
+ - key: tshirt.getit
+ t: 购买
+
+ - key: tshirt.price
+ t: $24 美元 + 运费
+
+ ###########################################################################
+ # Sections Introductions
+ ###########################################################################
+
+ - key: sections.user_info.description
+ t: |
+ 今年有来自 **102** 个国家的 **11,492** 受访者参与此次调查。同时，今年的 State of CSS 调查结果得以首次通过多种语言展示给全世界的用户，这离不开我们志愿者团队的鼎力协助，感谢大家。
+
+ - key: sections.features.description
+ t: |
+ 近年来，CSS 中的新功能如雨后春笋般出现。通常来说，新功能需要一定时间的评估与测试，因此这些新功能可能不会这么快就被广泛采用。
+
+ - key: sections.units_selectors.description
+ t: |
+ 我们相信，你一定会在这里发现自己以前不知道的东西。
+
+ - key: sections.technologies.description
+ t: |
+ CSS 生态系统正在经历洗牌。像是 Tailwind CSS 这样的后起之秀开始逐渐蚕食诸如 Bootstrap 等老牌框架的市场。另外，尽管 CSS-in-JS 还未被大众接收，但不得不说，CSS-in-JS 的整体思路是非常超前且新颖的。
+
+ - key: sections.other_tools.description
+ t: |
+ 尽管没有太大的惊喜，但像是 Polypane 和 Sizzy 这类为开发者量身打造的浏览器还是值得一提的。它们都在传统开发工具的基础上更进了一步。
+
+ - key: sections.environments.description
+ t: |
+ CSS 的核心竞争力之一在于适应不同的环境。不过，依然存在像是印刷和 Email 这样，CSS 开发者未有涉猎的场景。这些场景或许会在将来成为 CSS 的发展方向。
+
+ - key: sections.resources.description
+ t: |
+ 在这个板块中，"其它回答"足以彰显 CSS 社区的丰富与多元，其中提到了很多优秀的博客与播客。我们会考虑在下一年的调查中加入它们。
+
+ - key: sections.opinions.description
+ t: |
+ 这些观点标志着语言逐渐成熟，同时也更加复杂。在我们试图跟上语言发展脚步之时，这个过程本身似乎也让人不那么享受。
+
+
+ ###########################################################################
+ # Notes
+ ###########################################################################
+
+ - key: blocks.gender.note
+ t: |
+ 如果你有兴趣深入了解，我们还[写了这篇文章](https://dev.to/sachagreif/is-our-survey-biased-against-women-49oj)，其中谈到了我们对这次调查受访者性别比率不均的看法。
+
+ - key: blocks.currently_missing_from_css.note
+ t: |
+ 你可以在[这里](https://whatsmissingfromcss.com/)看到这个问题所有回答的数据。
+
+ - key: blocks.source.note
+ t: >
+
+ 这张图表整合的来源数据包括推荐链接、网址参数和自由填写的回答。
+
+ - State of JS: [State of JS](https://stateofjs.com) 的邮件订阅。
+
+ - State of CSS: State of CSS 的邮件订阅，以及在自由填写的回答中提到 `email` 和 `by email` 等。
+
+ - Work: 包括在自由填写的回答中提到 `work`、`colleagues`、`coworkers` 等。
+
+ ###########################################################################
+ # Awards
+ ###########################################################################
+
+ - key: award.feature_adoption_delta_award.comment
+ t: CSS Grid 在 2020 年的使用率增长高达 **{value}**。可见，它正在从新技术逐渐走向成熟。
+
+ - key: award.tool_usage_delta_award.comment
+ t: 2020年，Tailwind CSS 以 **{value}** 的增长傲视群雄。
+
+ - key: award.tool_satisfaction_award.comment
+ t: PostCSS 的满意度高达 **{value}**，它正是专注做一件事并把它做到极致的代表。
+
+ - key: award.tool_interest_award.comment
+ t: 今年有 **{value}** 的受访者表示对 CSS Modules 感兴趣，它也当之无愧成为今年最受关注的技术。
+
+ - key: award.most_write_ins_award.comment
+ t: 在今年的调查中，很多问题允许受访者自行填写回答。其中，PhpStorm 被提到了 **{value}** 次。它也一举成为今年调查中提及最多的项目。
+
+
+ ###########################################################################
+ # Conclusion
+ ###########################################################################
+
+ - key: sections.conclusion.description
+ t: |
+ 如果一个 JavaScript 开发者写了一行 CSS 代码，那么他现在也是 CSS 开发者了吗？
+
+ 这个问题恰好反映了目前网页开发的现状：越来越多的 CSS 开发者开始学习 JavaScript，同时越来越多的 JavaScript 开发者也开始意识到，只了解 `font-weight: bold;` 是远远不够的。
+
+ 因此，"CSS 现状"其实是一个非常玄学的问题：不同开发者可能会给出完全相反的回答。那我们究竟该信谁的？
+
+ 其实，正确的回答反而应当是"没有正确答案"。这里提到的工具、方法论、框架和库，都在前端开发这个生态圈享有一席之地。
+
+ 如果你在开发复杂的 React 应用，那么 Styled Components 会是一个不错的选择；如果你在设计静态的网站首页，那么使用 Sass 一定不会错。另外，尽管 Bootstrap 不像以前那样总能给我们带来惊喜，但我们依然无法忽视它拥有大量主题和插件的事实。
+
+ 所以，在我们关注 GitHub 上新玩具层出不穷的同时，也不要忘记那些奠定 CSS 初期发展的工具、技术和人。CSS 在 2021 年以及将来的发展离不开这里面每一个人的贡献。
+
+ ###########################################################################
+ # Picks
+ ###########################################################################
+
+ - key: picks.my_2020_pick
+ t: '我的 2020 年精选：'
+ - key: picks.intro
+ t: 我们让 CSS 社区的成员与大家分享他们心目中的"年度精选"
+
+ - key: picks.shadeed9.bio
+ t: debuggingcss.com 的作者
+ - key: picks.shadeed9.description
+ t: |
+ 我们期待 CSS 中的 Container queries 很久了，很高兴看到 Chrome 团队正在开发这一功能。
+
+
+ - key: picks.argyleink.bio
+ t: 在 Google 从事 CSS 相关的工作
+ - key: picks.argyleink.description
+ t: |
+ CSS 的变化很快。在我看来，CSS 在 2020 年引入了很多逻辑层面的变化。我希望在将来看到与国际化相关的、基于上下文的内容流、空格和缩写。
+
+
+ - key: picks.sachagreif.bio
+ t: State of CSS 的发起人
+ - key: picks.sachagreif.description
+ t: |
+ Amelia Wattenberger 的这篇博文质量极高。她精心设计的动画和小测验能帮你深入理解 CSS 层级。
+
+ - key: picks.christianoliff.bio
+ t: Trimble MAPS 的前端开发者
+ - key: picks.christianoliff.description
+ t: |
+ 我今年开始使用 Purge CSS，目前很满意。这是一个可以帮助移除多余的 CSS 代码的工具，进而减少打包好的项目中 CSS 文件的大小。更关键的是，这个工具速度快且十分易用。
+
+ - key: picks.kilianvalkhof.bio
+ t: 网页开发者，Polypane 的作者
+ - key: picks.kilianvalkhof.description
+ t: |
+ `content-visibility` 在很大程度上提升了我开发的 web app 的性能。不过我认为，这件事应该交给浏览器完成，而不是开发者。
+
+ - key: picks.walterstephanie.bio
+ t: 以用户为本的设计师，CSS 爱好者
+ - key: picks.walterstephanie.description
+ t: |
+ 一些 YouTube 上的，讲解 CSS 那些又新又酷炫的功能的视频，这些功能可以帮助大家更好地完成设计任务。
+
+ - key: picks.piccalilli_.bio
+ t: 独立设计师，piccalil.li 的开发者
+ - key: picks.piccalilli_.description
+ t: |
+ 这个宝藏博客讲解了许多 CSS 知识点。Michelle 不愧是 CSS 大牛，每一篇博文和教程都是干货满满。
+
+ - key: picks.sarasoueidan.bio
+ t: 独立 UI 设计师/工程师
+ - key: picks.sarasoueidan.description
+ t: |
+ 我会推荐一个叫 Rachel Andrew 的人，她的 CSS Grid 教程影响了一批开发者。
+
+ - key: picks.5t3ph.bio
+ t: Microsoft 软件工程师
+ - key: picks.5t3ph.description
+ t: |
+ Manuel Matuzovic 的演讲中有很多精心设计的实例，这些例子引人入胜，而且很容易上手实践。
+
+ - key: picks.hugogiraudel.bio
+ t: 三次元无障碍和多元化支持者
+ - key: picks.hugogiraudel.description
+ t: |
+ 我想推荐一个叫 Fela 的工具。它功能强大而且容易上手的，性能也很出众。
+
+ - key: picks.foolip.bio
+ t: Google 软件工程师
+ - key: picks.foolip.description
+ t: |
+ Sergio 最近修复了 WebKit 中 Flexbox 的大量问题，也修复了一些在 Chromium 中出现的问题。在不久的将来，所有主流浏览器都可以很好地支持 Flexbox 了。
+
+ - key: picks.jina.bio
+ t: 设计系统的支持者与从业者
+ - key: picks.jina.description
+ t: |
+ 使用媒体查询（media query）来减少过渡动画，以此来降低导致用户出现眩晕或不舒服的可能性。
diff --git a/src/i18n/zh-Hans/state_of_js.yml b/src/i18n/zh-Hans/state_of_js.yml
index 1ca1e5d..a163b8d 100644
--- a/src/i18n/zh-Hans/state_of_js.yml
+++ b/src/i18n/zh-Hans/state_of_js.yml
@@ -155,10 +155,10 @@ translations:
- key: features.promises
t: Promises
- key: features.decorators
- t: Decorators 装饰器
+ t: 装饰器（decorators）
- key: features.decorators.description
t: >
- 简单来说，Decorators装饰器是一种将一段代码包装成另一段代码的方法。
+ 简单来说，装饰器（decorators）是一种将一段代码包装成另一段代码的方法。
- key: features.dynamic_import
t: 动态引入
- key: features.dynamic_import.description