对于网络社区来说，今年是硕果累累的一年。我们 CSS-Tricks 的所有成员都参加了各种会议、阅读文章，并构建项目，过程中有一些突出的贡献让我们印象深刻。我们每个人都选出了 5 种资源，这些资源要么是最有帮助的，要么是最独特的，或者是我们认为值得一看的、您可能错过的资源。
Sarah 的选择
生成器的奇迹
我非常喜欢有人深入研究某个特定主题并做得很好。我有幸在苏黎世前端大会上观看了 Bodil Stokke 的这场演讲，它既有魅力，又有趣，而且也很有教育意义。
使用 Grid 进行设计
Jen Simmons 讲解了 CSS Grid 的现状，以及如何从设计到开发使用它。Jen 是 Grid 大师，并且她网站的 实验室部分展示了这种媒介的能力。
自这次演讲发布以来，有一个更新：Grid 也已在 Microsoft Edge 中发布。
Vue Apollo
这更像是两件我感兴趣的事情包装成一件事情。Guillaume Chau 已经出色地 为 Vue 创建了 Apollo/GraphQL 集成，包括一些很棒的演示，可以用来探索。
编程列车
这个资源已经存在一段时间了，但 Dan 现在有了 很棒的收藏，所以现在正是提起它的时候。
编程列车是简短的、半小时的教程片段，涵盖从创建星云到学习神经网络工作原理的一切。Dan 是一位令人难以置信地引人入胜且令人喜爱的讲师，他让您在探索新概念时感到宾至如归。
设计系统中的动效
Val Head 直击要害，谈论如何在设计系统或组件库中整合动效。
传达动画效果可能会非常困难，因为您需要在设计和工程之间进行协作。Val 为您提供了一些工具，可以使此过程顺利进行。
Robin 的选择
设计系统
设计系统 作者 Alla Kholmatova 是我 2017 年读过的最棒的设计书籍之一。
这是一本关于如何与团队合作的书籍，它揭示了代码质量只是在网络上设计出色系统的一个方面。这本书不像设计，更像是学习如何在大型人群中进行沟通，以及如何更好地与组织中的每个人进行沟通。
网络排版
今年我读过的另一本很棒的书是 网络排版 作者 Richard Rutter，这次重点更多地放在了 CSS 和排版之间的关系。
不过，我最喜欢的部分是 Richard 描述网络排版与其他形式的排版根本不同，需要一系列新的技能。它让阅读变得很精彩。
Purple.pm
今年的大部分时间，我一直在专注于提高我的 UX 和产品设计技能，我必须说 Purple 是组织大量数据和研究的最有用工具。我将其用作一个存档，用于存储我制作的所有文档、创建的所有 Balsamiq 线框和高保真 Figma 模型，所有内容都集中在一个地方。这使得与其他团队进行沟通以及解释我对项目的思考变得容易得多。
Figma
今年，我切换到使用基于网络的设计工具 Figma 全职工作。它非常有用，因为我的日常工作需要与数十名工程师、产品经理和其他设计师合作，因此能够快速与他们共享模型并获得反馈极大地提高了我的设计能力。此外，它让我想起了 Fireworks，这可能是史上最棒的应用程序之一。
Inkwell
今年，Hoefler & Co. 发布了 Inkwell，这是一个模仿各种手写风格的全新字体系列，我一直对它们念念不忘。它们的一个很好的使用案例是 Chris 的博客，那里所有这些奇怪的风格本不应该起作用，但不知何故，它们就起作用了。
Chris 的选择
为所有美国人设计的系统，作者 Mina Markham
如果你问我，这是一堂关于公众演讲的 мастер-класс。有趣、个性化，并且正中我们很多人正在做的那种工作的靶心。
Notion
Notion 可能是今年我切换的最重要的新软件。它本质上是一个笔记应用程序，并且在这一点上功能丰富。我最喜欢的功能之一是每个笔记也都是一个文件夹，因此您可以根据自己的组织进行无限嵌套。如果你尝试一下，我敢肯定你会发现它能很快替代许多其他应用程序。
对于这样的列表来说，最重要的是它是在网页上构建的，但也在各种平台上具有原生应用程序。我认为 2017 年意义重大，因为我们开始真正感受到了网页和平台原生之间的模糊界限。我怀疑这将越来越难以区分，然后考虑到网页固有的所有优势，在其他地方构建将越来越没有意义。
CSS
CSS 经历了辉煌的一年。当然，CSS Grid，但我们还看到了font-display 开始发布，这对性能来说非常棒。我们得到了像:focus-within 这样的里程碑选择器，证明父选择器并非不可能。矢量图形通过一系列属性（包括动画和运动）进入了 CSS。你可以说 CSS 变得更加强大且容易。我喜欢写关于滑块的帖子比如这篇，它展示了如今在 CSS 中能做到什么程度。
RIP Firebug
我认为 Firebug 主页 对 Firebug 的致敬、告别和简短历史很不错。Firebug 为优秀 DevTools 奠定了基础。我很高兴浏览器将它们纳入内部，并将它们变成了我们现在使用的强大工具，但这都要归功于 Firebug。
如果让我选出让网页成为今天开发平台的三件最重要的事情：1) DevTooling，由 Firebug 发起 2) 所有浏览器达成协议，网页标准有利于所有人，并且实际上在应用这种想法时保持纪律 3) Evergreen 浏览器。
PWAs
我觉得渐进式网页应用本质上是对一系列对任何网站都有益的良好想法的良好营销。这正是 Jason Grigsby 所做的论述。
这使得它成为 2017 年的轻松选择。HTTPS！服务工作者提供离线友好功能！以性能为中心！做这些事情，你将获得更多原生应用程序所享有的功能，比如在移动设备上位于主屏幕上的位置。模糊这些界限，你们！即使你没有做清单上的所有事情，每一步都有很大的优势。
Geoff 的选择
CSS Grid
这并不奇怪，但它肯定值得多次提及。Grid 真正地让我的 CSS 爱情复燃了。它不仅消除了以前需要使用浮动、显示和定位的创造性方法才能实现的布局的复杂性，而且还让我能够完全将 CSS 框架从我的工作流程中剔除。我的意思是，框架并不糟糕，也不应该被使用，但我个人非常依赖它们的网格系统。现在情况已经改变，结果是我的技术栈中少了一个依赖项，而且我可以自由地编写更多原始的 CSS。
原型工具
Robin 已经提到了 Figma，这完全符合我的意思。原型工具似乎迎来了创新爆炸。Sketch、Figma、InVision 以及 Adobe 都在今年提高了他们的水平，网页设计师因此受益。这些工具的出现让设计师更容易与其他设计师合作、评审作品、获得客户反馈，最终更快地进入浏览器。我在图形设计软件中花费的时间越来越少，这真是太棒了。
以下是我所指的示例。
对比度在可访问性中的作用
当我们谈论可访问性时，通常会关注语义、文档结构、屏幕阅读器和 ARIA 角色。这可能变得非常复杂。这就是为什么我非常喜欢 Lara 最近的一篇帖子倡导可访问的 UI 设计。除了写得非常好之外，她还介绍了改进可访问性的常识方法，这些方法超出了代码的范畴。
她提出的建议之一是检查设计中的颜色对比度，以确保良好的可读性。这个建议对我来说很有共鸣，因为我最近参与了一个视觉品牌项目，其中包含大量的绿色和黄色。使用 Lara 推荐的工具运行我们的设计表明，我们的作品未能通过许多可访问性检查。这也教会我可访问性确实不利于绿色和黄色。
网页排版：设计表格以供阅读，而不是观看
如果你没有看到 A List Apart 上Richard Rutter 的帖子，我现在就请你阅读一下。别担心，我会在这里等你。
你回来了？太好了！
这篇文章让我如醍醐灌顶。Richard 不仅让我认真评估自己是否过度设计了表格，而且还颠覆了我对表格是什么以及好的表格应该是什么样子的所有先入为主的观念。好的设计是解决问题，这篇文章提醒我应该先设计解决方案，再考虑美学。
place-items
Chris 在演示中偷偷加入了这个属性，我之前不知道它存在。当我看到它的浏览器支持率很低时，我不得不原谅自己，但它确实是一个非常不错的快捷方式，它组合了 align-items 和 justify-items 属性。你可能已经猜到我喜欢它的原因了：它在 Grid 和 Flexbox 中非常有用。虽然它的支持范围有限，仅限于 Chrome 59+ 和 Firefox 45+，但我非常高兴看到更多浏览器加入进来。
你对 2017 年有什么选择？
很棒的内容，伙计们！