2018 年员工最爱

Avatar of Geoff Graham
Geoff Graham 于

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费额度！

去年，CSS-Tricks 团队 编制了一份清单，列出了我们最喜欢的帖子、趋势、主题和来自前端开发世界各地的资源。 我们玩得很开心，发现它很好地概括了我们全年看到的行业状况。 好吧，今年我们又做了！

因此，以下是 Sarah、Robin、Chris 和我在过去一年中看到和喜欢的全部内容。

Sarah

良好的代码审查

有一些主题跨语言存在，其中之一就是良好的代码审查。 即使 Nina Zakharenko 做关于 Python 的演讲并提供资源，但她关于 代码审查技能 的演讲尤其值得注意，因为它适用于许多学科。 她的演讲有一个很好的弧线，我认为她的演示文稿是一个极好的资源，但您可以更进一步，批判性地思考您自己的团队，哪些方法对团队有效，以及哪些实践可能需要重新考虑。

我也很喜欢这条提出了一个好观点的讽刺推文

我自己也曾犯过在非常干净的拉取请求中发表评论只是为了说些什么的错误，作为社区，我们有必要重新审视我们为什么要做这样的事情。

Sophie Alpert，React 核心团队的经理，也在年底写了一篇类似的文章，名为 为什么要审查代码。 当您想解释代码审查在开发过程中的必要性时，这是一个很好的资源。

(创意)代码之年

今年出现了许多很棒的创意编码资源。 创意编码项目可能看起来很琐碎，但实际上您可以从制作和玩弄它们中学到很多东西。 Matt DesLauriers 最近为 Frontend Masters 开设了一门名为 使用 Canvas 和 WebGL 进行创意编码 的课程，这算是一个很好的例子。

CodePen 一直是我最喜欢的查看创意作品的地方之一，因为它提供了一种反向工程他人作品并从其源代码中学习的方法。 CodePen 还启动了 编码挑战，为激发创意实验和集体学习机会增加了另一种方式。 Marie Mosley 为此做了很多工作，她在 CodePen 的优秀时事通讯 上的工作同样出色。

您还应该考虑查看 Monica Dinculescu 的作品，因为她一直在分享一些令人惊叹的作品。 不仅有 一个，还有 两个，甚至还有 三个 (!) 仅使用机器学习的作品。 去看看她所有的 Glitch 项目。 并且，值得一提的是，Glitch 是一个探索创意代码并自行混音的好地方。

GitHub Actions

我认为今年最具变革意义的发展之一就是 GitHub Actions。 能够将所有测试、部署和项目问题作为容器在一个统一的工作流中进行链式管理，这真是太棒了。

由于容器的灵活性，它们非常适合操作——您不受单一类型的计算的限制，因此您可以实现很多功能！ 我写了一篇关于 GitHub Actions 的文章，全面介绍了此功能。 而且，如果您正在深入研究容器，可能会发现 dive 存储库 有帮助，因为它提供了一种探索 Docker 镜像和分层内容的方法。

Actions 仍处于测试阶段，但您可以 申请访问权限——它们现在正在缓慢推出。

UI 属性生成器

我真的很喜欢我们现在正在自动化一些我们需要创建漂亮前端体验的代码。 在颜色方面，有 Adobe 的颜色、coolors 和 uiGradients。 甚至还有其他事物的生成器，例如 渐变、剪辑路径、字体配对 和 盒阴影。 我非常喜欢这一切。 这些工具可以加快开发速度，并让我们使用高级效果，无论技能水平如何。

Robin

Ire Aderinokun 的博客

在过去的一年中，Ire 在她的博客 Bits of Code 上撰写了几乎源源不断的关于前端开发的精彩文章，并且一直非常高兴地关注她的工作。 似乎她几乎每天都在发布一些我认为有用的东西，从像 悬停、焦点和活动状态何时应用 这样的基本内容到像 aria-live 属性这样的辅助功能提示。

“全能的前端开发人员”

Chris 今年做了一个关于前端开发角色正在发生变化……而且是朝着更好的方向发展的演讲。 这可能是今年我见过的最鼓舞人心的演讲。 有关前端内容的演讲有时会非常枯燥，但 Chris 在这里做了其他事情。 他介绍了我们今天可以使用的大量新工具来完成以前需要大量后端技能才能完成的事情。 Chris 甚至专门为这些通常被归类为“无服务器”的新工具创建了一个 网站。

即使这些工具中没有一个让您兴奋，我也建议您查看一下这次演讲——Chris 的热情洋溢，让我想要撸起袖子开始做一些有趣、奇怪和令人兴奋的事情。

未来字体

今年，Future Fonts 市场证明了自己是寻找新颖实验性字体的绝佳去处。Obviously 就是一个很好的例子。但 Future Fonts 与其他字体市场不同之处在于，你可以在此购买处于 Beta 阶段且仍在开发中的字体。如果你抓住早期机会，以 10 美元的价格购买一款字体，那么这将向开发者表明人们对这款字体感兴趣，从而可能促使他们为其添加更多功能，例如新的粗细、宽度，甚至 OpenType 功能。

这是一种在支持字体设计师的同时，还能获得大量精美实验性字体的绝佳方式。

React Conf 2018

观看React Conf 2018 的演讲，可以让你快速了解最新的 React 新闻。看看React Hooks 如何让你“无需编写类就能使用状态和其他 React 功能” 很有意思。

还值得一提的是，很多朋友都对我们网站上关于 React 的指南 进行了改进，现在其中包含了大量关于如何入门以及如何在基础和高级实践方面提升自己的建议。

维多利亚时代的互联网

这算是一个奇怪的推荐，因为《维多利亚时代的互联网》 是一本书，而且并非今年出版。但是！它绝对是我今年读过的最好的书，即使它与网络内容只有间接关系。它让我意识到，我们今天正在构建的互联网比我最初预期的要古老得多。这本书重点介绍了跨大西洋海底电缆的铺设、代码的设计和破译者、利用电报寻找目标的欺诈者，以及利用电报寻找结婚对象的人。我真的无法过分推荐这本书。

Figma

基于浏览器的设计工具Figma 继续发布一系列新功能，使构建设计系统和 UI 套件比以往任何时候都更容易。我一直在进行大量的实验，以了解它如何帮助设计师进行沟通，以及如何构建更具弹性的组件。看到这些工具在过去一年中得到了如此巨大的改进，真是令人印象深刻，我期待着看到它在新的一年中取得更大的进步。

Geoff

关于第三方脚本的讨论

今年似乎有很多关于第三方脚本影响的讨论。无论是 JavaScript 的普及还是其他原因，这个话题涵盖了广泛且有趣的领域，包括性能、安全，甚至硬成本，仅举几例。

我个人最喜欢的关于这方面的文章是 Paulo Mioni 深入探讨的恶意脚本的解剖。当然，技术细节是一个很好的学习机会，但真正让这篇文章出彩的是，它读起来像是一部真实的犯罪小说。

Gutenberg、Gutenberg 以及更多 Gutenberg

在包含新 WordPress 编辑器的 WordPress 5.0 发布之前，有很多关于它的讨论，以至于发布时感觉有些平淡无奇。尽管存在很多担忧，但在发布过程中没有人受伤或受到伤害，但确实还有改进的空间。

Lara Schneck 和 Andy Bell 合作推出了一个包含七部分的系列文章，旨在帮助我们这样的开发者为这些变化做好准备，这真是太棒了。文章面面俱到，非常适合初学者和专家。

用 UX 解决现实问题

我喜欢认为我在工作中非常关心用户，并且尽我所能设身处地为他们着想，以便能够预见到他们在与网站或应用程序交互时的需求或感受。话虽如此，Lucas Chae 进行的一项关于寻找自杀方式的人在搜索引擎中的体验的研究让我大开眼界。我的意思是，抑郁和自杀是我心中非常关注的话题，但我从未想过要在在线体验中找到解决此类问题的实用方法。

所以，感谢 Lucas。这激励我结合我的一些想法，在他建议的基础上进行补充。希望这场讨论能够超越 2018 年，并在这一领域引发有意义的变革。

不断发展的零工经济

我一直很喜欢与任何愿意交流的人详细讨论自由职业，这主要是因为我在从事自由职业的五年里学到了很多东西。

但如果你把我的经验翻四倍，那么你就会得到像 Adam Coti 在他20 年自由职业生涯中积累的经验教训总结中分享的宝贵智慧。

自由职业并不适合所有人。远程工作也不适合所有人。Adam 的建议是我五年前刚开始做自由职业时希望得到的。

浏览器生态

我非常喜欢 Rachel Nabors 将网络浏览器比作生物生态系统的方式。这是一个绝佳的类比，并引出了浏览器演变的漫长而曲折的历史。

说到历史，Jason Hoffman 关于浏览器和网络标准的历史讲述同样有趣，并且提供了一些值得铭记的背景信息。

这些文章发布得很及时，因为今年浏览器领域发生了很多变化。微软正在放弃 EdgeHTML 而转向 Blink，谷歌加大了对 AMP 产品的投入。2018 年感觉像是行业巨头发生重大变化的一年，令人眼花缭乱！

Chris

所有最流行的关键词：JAMstack、Serverless 和 Headless

“别告诉我如何构建前端！” 我们前端开发人员大声疾呼。我们现在非常强大。我们喜欢自带前端技术栈，然后使用你的后端数据和 API。随着这种情况的发生，我们看到了健康的变化，例如内容管理系统发展为无头框架，并专注于它们最擅长的领域：内容管理。我们看到了通过静态和 CDN 支持的主机带来的性能和安全改进。我们看到了托管和服务器使用成本的降低。

但我们也看到了一些需要解决的不健康现象，例如前端开发人员被分散了太多精力。我们有专注于 JavaScript 的工程师无法编写干净、可扩展、高性能、可访问的标记和样式，另一方面，我们有专注于 UX 的工程师感到被遗忘、被抛在后面，或者被要求突然做一些远离他们当前专业知识的开发工作。

GraphQL

说到强大的前端开发人员，为我们前端开发人员提供一个运转良好的 GraphQL 设置非常有帮助。我们不再需要因为等待 API 完成或数据被整理成某种需要的格式而受到阻碍。所有你想要的数据触手可及，所以去获取并按你自己的意愿使用它。这使得前端的构建和迭代更快、更容易和更有趣，这将导致我们构建更好的产品。Apollo GraphQL 是这里需要关注的东西。

虽然前端与 JavaScript 正在热烈地恋爱，但仍然有很多前端开发人员愉快地专注于其他领域

这就是我在第一部分想要表达的。正在发生分裂。它一直都在那里，但由于 JavaScript 现在绝对庞大并且没有放缓的迹象，人们开始陷入分裂之中。如果我不深入学习 JavaScript，我还能成为一名前端开发人员吗？ 当然可以。我不会告诉你你不应该学习 JavaScript，因为它非常酷、强大，你可能也会喜欢它，但如果你专注于 UX、UI、动画、可访问性、语义、布局、架构、设计模式、插图、文案写作，以及这些的任何组合以及其他任何东西，你仍然很棒、有用，并且永远都会如此。拥抱。🤗

只需看看这本书 重构 UI 或课程 学习 UI 设计 作为证明，关于 UI 设计有 *很多* 东西需要学习，并且擅长它需要大量的训练、练习和技能，就像前端开发的任何其他方面一样。

无所顾忌地到处使用网格和自定义属性

我记得当我第一次学习 flexbox 时，我总是用它来制作布局。我仍然喜欢 flexbox，但现在我们有了 grid 并且浏览器支持几乎一样好，我发现自己更倾向于使用 grid。这并不是说它们之间存在竞争；它们是在不同情况下有用的不同工具。但不可否认的是，一年前我会使用 flexbox 做的事情，我现在使用 grid 来做，并且 grid 感觉更直观，更像是正确的工具。

我仍然对 Lynn Fisher 为我们的网格和 flexbox 指南绘制的惊人插图感到惊叹。

围绕 CSS-in-JS 和类似 Tailwind 的方法的广泛讨论

这些讨论可能会变得非常激烈，但不可否认的是，CSS-in-JS 的领域非常庞大，拥有众多粉丝，并且似乎在为很多人解决问题。但它远未稳定下来。像 Vue 和 Angular 这样的库有自己的框架规定的处理方式，而 React 则有数十种选择，以及快速变化的领域，库层出不穷，流行的库也因其他库而逐渐消失。它确实看起来功能集开始稍微稳定下来，所以明年将是值得关注的一年。

然后是原子 CSS 的概念，在 光谱的另一端，有趣的是，它似乎也没有放缓。Tailwind CSS 可能是目前最热门的框架，获得了足够的关注，Adam 正在 全职投入其中。

如果 Web 平台本身决定解决导致这些解决方案出现的一些问题，那么这可能会真正改变现状。影子 DOM 已经存在于 Web Components 领域，所以也许那里有答案？也许是 的回归？

<style scoped="">？也许会发展出新的最佳实践，采用每个组件一个样式表？谁知道呢。

设计系统成为核心交付成果

现在有 整个会议围绕它们展开！

我听说过多个机构，它们为客户制作的实际上就是设计系统。不是网站，而是设计系统。我明白。如果你给团队一个真正强大且灵活的工具箱来构建他们自己的网站，他们就会这样做。给他们一些完成的页面，无论它们多么精致，都会让他们需要自己分析这些页面，并弄清楚如何在需要时扩展和构建它们。我认为对于机构或专门团队来说，专注于可扩展的组件驱动库以用于构建网站是有意义的。

机器学习

像这样的东西让我惊叹不已

拥有 开源库来帮助机器学习，并且普通开发者实际上可以访问和使用它们，这是一件大事。

像这样的东西将对现实世界产生积极的影响

还有这个！

好吧，好吧。再来一个

你必须看看 Unicode 模式 工作（更多），这是 Yuan Chuan 做的。他甚至 在 CSS-Tricks 上分享了一些他的作品以及他是如何做到的。然后点击那个 CodePen 链接查看更多内容。他们创建的这个 <css-doodle> 东西太棒了。

查看 CodePen 上 yuanchuan (@yuanchuan) 的笔 播种。

嘘！ 创建一个 DigitalOcean 账户，并获得 $200 免费信用额度 用于基于云的托管和服务。

评论

  1. Chris
    评论永久链接#

    我自己也投入了大量时间学习 CSS 网格。非常喜欢。也喜欢新的 CSS Tricks 重设计以及大量使用 CSS 网格 :D

  2. Dave

    评论永久链接#

    喜欢新的网站设计，尤其是在移动设备尺寸下的可滚动面板。不过向上滚动回到顶部时，页面会跳动一下，可能是粘性头部高度和顶部边距导致的。

  3. 是的
    评论永久链接#

    我目前使用Figma，但最近我一直在尝试Framer X，我真的很喜欢它。

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。

© 2024 . All rights reserved.