SS似乎是一种非常简单的语言，很难在其中犯错误。你只需添加样式规则，就可以对网站进行样式设置了，对吗？对于只需要几个CSS文件的小型网站，情况可能就是这样。但是在大型应用程序中，样式可能会迅速失控。你如何使它们易于管理？

事实是，就像其他任何语言一样，CSS可能会影响或破坏你的设计。这是CSS的10条最佳实践技巧，可以帮助你从样式中获得最大的收益。

1.你真的需要一个框架吗？

首先，确定你是否真的需要使用CSS框架。现在，有许多轻量级的替代健壮框架。通常，你不会使用框架中的每个选择器，因此你的软件包将包含无效代码。

如果仅对按钮样式使用，则将样式外包给你的CSS文件，然后删除其余样式。另外，你可以使用DevTools中的代码覆盖率来识别未使用的CSS规则。

要打开它，请在“工具”面板中搜索Coverage。你也可以通过单击Ctrl+ Shift+ 打开“工具”面板P。打开后，单击重新加载图标开始录制。红色显示的所有内容均未使用。

你可以在上面的示例中看到，它说没有使用98％的CSS。请注意，实际上并非如此，某些CSS样式仅在用户与网站互动后才应用。移动设备的样式也标记为未使用的字节。因此，在删除所有内容之前，请确保确认确实没有在任何地方使用它。

2、首选使用CSS方法

考虑为你的项目使用CSS方法。CSS方法用于在CSS文件中创建一致性。它们有助于扩展和维护你的项目。这是我可以推荐的一些流行的CSS方法。

BEM

BEM（块，元素，修饰符）是最流行的CSS方法之一。它是命名约定的集合，可用于轻松制作可重复使用的组件。命名约定遵循以下模式：

.block { ... }.block__element { ... }.block--modifier { ... }

• .block：块代表一个组件。它们是独立的实体，并且对自己有意义。
• .block__element：这些是的一部分.block。它们没有独立的含义，必须绑定到一个块上。
• .block--modifier：这些用作块或元素上的标志。我们可以使用它们来更改元素的外观，行为或状态。例如，要使用隐藏标记，我们可以说.block--hidden。

ITCSS

倒三角CSS通过将不同的图层引入不同的特性来帮助你更好地组织文件。你走得越深，就越具体。

OOCSS

面向对象的CSS或OOCSS具有两个主要原理。

1.分离结构和皮肤

这意味着你要与结构代码分开定义视觉效果。实际上这是什么意思？

/* Instead of  */
.box {    
  width: 250px;   
  height: 250px;    
  padding: 10px;    
  border: 1px solid #CCC;    
  box-shadow: 1px 2px 5px #CCC;    
  border-radius: 5px;
}
/* Do */
.box {    
  width: 250px;    
  height: 250px;    
  padding: 10px;}
.elevated {    
  border: 1px solid #CCC;    
  box-shadow: 1px 2px 5px #CCC;    
  border-radius: 5px;
}

2、分隔容器和内容

这意味着你不希望任何元素取决于其位置。相同的元素无论在页面上的什么位置，都应看起来相同。

/* Instead */.main span.breadcumb { ... }/* Do */.breadcrumb { ... }

3、设置预处理器

设置预处理器可以使你受益匪浅。预处理器是一种工具，可让你使用CSS中不存在的高级功能。这些可能是循环变量甚至函数之类的东西。

有很多预处理器。最著名的三个大概就是Sass，Less和Stylus。我建议使用Sass，因为它是一个繁荣的社区，并且你可以在网上找到它的大量文档。

那么，预处理器如何为你提供帮助？更好地组织你的风格

预处理程序可帮助你更好地组织样式。他们具有将你的文件分解为较小的可重用文件的能力。这些可以相互导入，也可以以后分别导入你的应用程序。

// Import different modules into one SCSS file@import 'settings';@import 'tools';@import 'generic';@import 'elements';@import 'objects';@import 'components';@import 'trumps';

嵌套你的选择器

增强可读性的另一种好方法是嵌套选择器。这是CSS缺少的一个简单而强大的功能。

.wrapper {   
  .sidebar {        
    &.collapsed {           
      display: none;        
    }
        .list {            
          .list-item {                ...
                &.list-item--active {                    ...                }            
                                    }        
                     }    
        }
  }

分层结构使更容易可视化不同元素如何结合在一起。

浏览器自动为你的规则添加前缀

CSS中有一些非标准或实验性功能的前缀。不同的浏览器为其使用不同的前缀，例如：

• -webkit-：适用于基于WebKit的浏览器，例如Chrome，Safari或Opera的较新版本。
• -moz-：适用于Firefox。
• -o-：适用于旧版Opera。
• -ms-：用于IE和Edge。

为了支持所有主流浏览器，我们必须多次定义某些属性。

.gradient {    
  background: rgb(30,87,153);    
  background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);    
  background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);    
  background: linear-gradient(to bottom, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);    
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
}

预处理器通过mixins帮助我们解决此问题-可以代替硬编码值使用的函数。

@mixin gradient() {    
  background: rgb(30,87,153);    
  background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);    
  background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);    
  background: linear-gradient(to bottom, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);    
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
}
.gradient {    @include gradient();}

不必一遍又一遍地写出相同的内容，而只需mixin在需要时添加即可。

使用后处理器

更好的选择是后处理器。一旦CSS由预处理器生成，则后处理器可以运行其他优化步骤。最受欢迎的后处理器之一是PostCSS。

你可以使用PostCSS来自动为CSS规则添加前缀，因此你不必担心会遗漏主要的浏览器。他们使用“ 我可以使用”中的值，因此它始终是最新的。

另一个很棒的后处理器是autoprefixer。使用autoprefixer，当你要支持最后四个版本时，无需在CSS文件中写入任何浏览器前缀就可以完成所有工作！

const autoprefixer = require('autoprefixer')({    
  browsers: [  'last 4 versions',  'not ie < 9'    ]
});

使用配置进行一致的设计

除mixins外，你还可以选择使用变量。用短线连接一起，你可以执行设计规则。

// Font definitions$font-12: 12px;$font-21: 21px;
// Color definitions$color-white: #FAFAFA;$color-black: #212121;

4、使用标记代替CSS

我们接着继续讨论实际的CSS。这个也是经常被忽略。通常，你可以通过简单地使用正确的HTML元素来减小CSS文件的大小。假设你的标题包含以下规则：

span.heading {    
  display: block;    
  font-size: 1.2em;    
  margin-top: 1em;    
  margin-bottom: 1em; 
}

如果你正在使用span元素作为标题。它将覆盖默认的显示，间距或字体样式。可以通过使用h1，h2或h3来避免这种情况。默认情况下，它们具有你要与其他元素一起实现的样式。你可以立即摆脱四个不必要的规则。

5、使用速记属性

为了进一步减少规则数量，请始终尝试使用简写属性。对于上面的示例，我们可以说：

.heading {    margin: 1em 0;}

对于其他属性（例如，填充，边框或背景），也是如此。

6、减少冗余

这与上一点紧密相关。有时很难发现冗余，特别是当两个选择器中的重复规则未遵循相同顺序时。但是，如果你的类仅在一个或两个规则中有所不同，则最好外包这些规则并将它们用作额外的类。代替这个：

<style>    
  .warning {        
   width: 100%;        
    height: 50px;        
    background: yellow;        
    border-radius: 5px;    
  }
    .elevated-warning {       
      width: 100%;        
      height: 50px;        f
      ont-size: 150%;        background: yellow;        box-shadow: 1px 2px 5px #CCC;        border-radius: 5px;    }</style>
<div class="warning">⚠️</div><div class="elevated-warning"></div>

尝试使用类似的方法：

<style>    
  .warning {        
    width: 100%;        
    height: 50px;        
    background: yellow;        
    border-radius: 5px;   
  }
    .warning--elevated {       
      font-size: 150%;        
      box-shadow: 1px 2px 5px #CCC;    
    }
</style>
<div class="warning">⚠️</div><div class="warning warning--elevated"></div>

7、避免使用复杂的选择器

使用复杂的选择器有两个主要问题。首先，提高的特异性不仅会使以后更难重写现有规则，而且会增加浏览器匹配选择器的时间。

匹配选择器

当你的浏览器试图解释选择器并确定它与哪个元素匹配时，它们从右到左。就性能而言，这比其他方法要快。让我们以下面的选择器为例。

.deeply .nested .selector span {    ...}

你的浏览器将首先从开始span。它将匹配所有span标签，然后转到下一个标签。它将滤除类中的spans，.selector依此类推。

不建议将标记用于CSS选择器，因为它会与每个标记匹配。虽然差异只能在几分之一毫秒内测量，但总的来说很少。更重要的是，减少其他原因的复杂性是一个好习惯。

了解选择器

机器解析不仅困难，而且人类也难以解析。以下面代码为例：

[type="checkbox"]:checked + [class$="-confirmation"]::after {    ...}

你认为上述规则何时适用？通过创建自定义类并使用JavaScript进行切换，可以简化此过程。

.confirmation-icon::after {    ...}

现在看起来更加愉快。如果你仍然需要一个过于复杂的选择器，并且认为别无选择，请在下面留下评论以解释你的解决方案。

/** * Creates a confirmation icon after a checkbox is selected. * Select all labels ending with a class name of "-confirmation" * that are preceeded by a checked checkbox. * PS.: There's no other way to get around this, don't try to fix it. **/.checkbox:checked + label[class$="-confirmation"]::after {    ...}

8、不要删除轮廓

这是开发人员在编写CSS时最常犯的错误之一。尽管你可能认为删除轮廓创建的突出显示没有任何问题，但实际上，你使网站无法访问。通常将此规则添加为CSS的重置值。

:focus {    outline: none;}

但是，通过这种方式，仅使用键盘导航的用户就不会知道他们正在关注你的网站。

如果默认样式对你的品牌不利，请创建自定义轮廓。只要确保在聚焦元素方面有某种指示即可。

9、首先使用移动设备

当你必须处理媒体查询时，请始终使用移动优先。以移动设备为先的方法意味着你首先要开始为小屏幕设备编写CSS并从那里开始构建。这也称为渐进增强。

这将确保你主要添加额外的规则来迎合大屏幕设备，而不是重写现有的CSS规则。这样可以减少最终使用的规则数量。

你如何判断是否使用移动优先？如果你的媒体查询使用min-width，那么你将走上正确的道路。

/* Mobile-first media query, everything above 600px will get the below styles */
@media (min-width: 600px) {    /* your CSS rules */}
/* Non mobile-first media query, everything below 600px will get the below styles */
@media (max-width: 600px) {    /* your CSS rules */}

10、压缩

最后，压缩捆绑文件以减小其大小。压缩删除注释和空白，你的捆绑软件就可以快速的获取数据。

如果还没有，请在服务器端也启用压缩。

进一步减少CSS 和标记大小的另一种好方法是混淆类名。

为此，你可以根据项目设置选择几个选项：

• Webpack：对于Webpack，可以使用该css-loader模块。
• Gulp：对于Gulp，你可以使用gulp-minify-cssnames插件。
• 创建自己的：如果你没有用于项目设置的专用软件包，那么我会提供一个教程，向您展示如何创建自己的实现。

总结遵循以上10个简单步骤将有助于你编写的CSS文件，更轻轻，易维护，更好扩展。不仅如此，而且使用诸如预定义的调色板或版式规则之类的实用程序，将帮助你创建更一致的设计。你的样式也将更可重用，因此可以节省下一个项目的时间。

i网页设计之前端基础教程html介绍优秀网页设计必备web前端讲解

译局是36氪旗下编译团队，关注科技、商业、职场、生活等领域，重点介绍国外的新技术、新观点、新风向。

编者按：JavaScript在前端的地位不可撼动，相关职位的薪资待遇也在稳步提升。在这种繁荣的局面下，各种框架和工具层出不穷，一时间令初学的开发者眼花缭乱，不知该做何选择。为此，从事软件开发教学创业的Eric Elliott通过分析Google搜索趋势、State of JS Survey、Stack Overflow等调查数据，以及NPM下载量、汇总的职位发布情况等，给出了有助于获得一份JS编程工作的相关推荐，并且对未来十年的前沿技术进行了展望。原文发表在medium上，标题是：Top JavaScript Frameworks and Topics to Learn in 2020 and the New Decade

如果您想获得一份出色的JavaScript工作，或者想跟上2020及今后10年的重要技术，那这篇文章你找对了。本文的目的不是要告诉你哪些技术栈和框架是“最好的”或者最受欢迎的技术，而是要介绍一下哪些技术栈和框架能为你在2020年及今后拿到一份好工作提供最佳机会。

我们会研究各种来源的数据：

• 按照主题跟踪Google Search趋势

• State of JS Survey的数据

• Stack Overflow Survey调查

• Npm下载量

• 汇总的职位发布情况

这些指标都不完美，但就我们的目的而言，npm下载量和职位发布情况最为重要，当我们把这些指标汇总起来看的时候，就能清晰一致地描绘出JavaScript技术的版图和趋势。根据这些指标来选择要学习什么框架是个好主意吗？那要取决于你的目标是什么。

既然我们有一个明确的目标——为求职者寻找学习的投资回报率——那这项任务就比告诉每个人什么是最好的要容易多了。尽管没有对所有目的而言都是最佳的东西，但客观地定义什么能为你实现特定的具体目标提供最大的机会还是比较容易的。我们不妨看一些数据。

首先是JavaScript的学习

在你开始太过操心技术栈之前，还是请先学习好JavaScript以及怎么用它来编写软件吧。如果你还没有办法解释什么是函数组合，什么是对象组合，什么模块，请从此处开始（https://medium.com/javascript-scene/composing-software-the-book-f31c77fc3ddc）。一切软件开发都是组合：我们把一个庞大而复杂的问题分解成可以用软件的建构块（函数、对象、模块等）解决的小问题。然后再把这些解决方案组装成我们的应用。我们的2020就先从充分了解JavaScript和软件组合开始吧。

React统治了2019，很有可能还会统治2020

我喜欢npm下载量这个指标，因为它能够很好地说明框架使用的活跃度*。业界常用的框架中下载量方面的得分会高得离谱，因为用户是在本地机器上跑npm install的。

注：此处并不包括jQuery ，因为很多jQuery 项目都是不用npm的老项目，所以不管怎样它都会被严重低估。把Svelte放进来是为了让大家看看它在市场当中的相对地位如何，并解释为什么它会缺席图表的其他地方——因为还没有足够的数据可供Svelte做出有意义的展示。比方说，Google搜索趋势里面还没有这个主题。

招聘广告汇总

此图统计了目前提到了某个特定框架的职位空缺。*

按UI框架统计的岗位需求

跟去年相比，React的领先优势扩大了，而Angular和jQuery都输给了Vue 。这个饼图显示了每个框架的相对就业市场份额：

顶级框架在工作市场的份额

2019年，JavaScript开发人员的平均工资再次上涨，从11.1万美元年收入增加到11.4万美元。

*统计方法：在Indeed.com上搜索求职情况。为了消除假阳性，我把搜索跟关键字“软件”进行配对以增强相关性，然后乘以〜1.5（这大概是编程岗位列表中使用了“软件”与与不使用“软件”的之间的差异。 ）所有搜索结果页均按日期排序，并抽查过相关性。这里得出的数字不是100％准确的，但是对于本文来说，这种精度已经足够好了。

Google搜索趋势

就像你可能会想到的那样，搜索兴趣*多少反映出就业市场的份额情况，但有一些有趣的差异。我们可以清楚地看到，从2017年到今天，大家对jQuery的兴趣正在减弱，而对Vue.js的搜索兴趣出现了强劲增长。以下是搜索的份额情况：

跟招聘广告一样，React有很大的领先优势，吸引了前端框架36％的搜索量，其次是Angular（约27％）和jQuery （25％）。对Vue.js的搜索兴趣比其在招聘市场的份额要大得多，但该数据通常与排名中的招聘市场数据一致。看来我们已经成功地证实了这一点。

*研究方法：所有术语、数据均按主题而不是搜索字收集，以便从无关的关键字匹配中排除掉假阳性。

未来值得关注的框架

跟其他受欢迎但使用不那么广泛的框架（比方说Svelte或Vue，这两个的满意度排名都很高，但行业采用率相对较小）相比，更多的岗位要找的是具备React技能的人。

学习Svelte或Vue 可能显得很酷——但是，如果你的目标是找到一份工作的话，如果你先去学习React就会有更好的机会。

尽管如此，Svelte和Vue 在《State of JavaScript 2019》调查当中都获得了很高的用户满意度分数。在过去，React的用户满意度得分高预示着会抢占当时占主导地位但满意度得分相对不高的Angular的份额。

2019年，React的用户满意度排名最高，用户满意度达到了89％。紧随其后的是Svelte（88％）和Vue.js（87％，低于去年的91％）。Svelte或Vue 不太可能抢夺太多的React用户，但是还有有很多的Angular和jQuery 用户可能会变节转投Svelte或Vue ，从而在2020年推动这两个框架取得进一步的强劲增长。

可以肯定的是，掌握React会增加你在2020年找到并保住好工作的几率。

TypeScript 与JavaScript

毫无疑问，过去几年的时间里TypeScript的增长非常迅速，根据State of JavaScript调查，89％的TypeScript 用户会再次选择使用这门语言，有66％的受访者要么用过TypeScript ，要么对使用TypeScript感兴趣（略低于去年的71％）。

但是，尽管大家对TypeScript很感兴趣，且使用率似乎也在迅速增长，但是招聘市场对具备TypeScript经验的要求还不高。只有约7％的JavaScript招聘广告的岗位描述中提到了TypeScript。当然这可能会低估了对TypeScript 职位的需求情况，因为招聘经理一般预期JavaScript开发人员掌握起TypeScript来不会有太大麻烦 所以有可能不会在岗位描述中提及TypeScript 。

但我个人坚持认为学TypeScript这门语言的投资回报率可能会比较低，甚至是负的。这有可能会降低而不是提高生产率，并且，如果您已经有TDD，代码审查和设计审查等很好的漏洞预防措施的话，则用TypeScript编程不太可能会带来显著的减少漏洞的好处。

话虽如此，并不缺少对TypeScript的热爱，所以你当然不应该怕它，或者因为人家用的是TypeScript 而不是JavaScript而拒绝别人求职。由于TypeScript 是JavaScript的超集，所以从JavaScript转到学TypeScript并不像学习完全不同的语言那样具有挑战性。

想在2020年的就业市场竞争中脱颖而出你也许不需要学习TypeScript，但是TypeScript 引擎相当有用，哪怕对于标准JavaScript也是如此。

我每天用Visual Studio Code的时候都用他来给标准JavaScript 提供智能感知。甚至还可以利用JSDoc （TypeScript引擎可理解并解释这种类型注释）或外部d.ts 文件来增强这种智能感知，VS Code会自动获取你所使用的模块的TypeScript 定义。

注：用TernJS 和Atom这么多年我也一直享受着类似的好处，但是这种结合缺乏TypeScript 引擎+ VS Code 的维护性和社区支持。

如果你还没用过Visual Studio Code，你可以先试用一下VS Code。顺便说一句，VS Code在JSState调查受访者心目当中是JavaScript IDE市场的领导者，占有57％的市场份额（其次是WebStorm ，占有14％的市场份额）。

数据管理

Redux 在状态管理器的竞赛中仍然具有领先优势，但是GraphQL 和Apollo在满意度和兴趣方面是增加的。预计2020年GraphQL会继续保持增长。

话虽如此，哪怕你用的是GraphQL ，我仍然认为使用Redux 状态管理有充分的理由，而且我认为即使不用框架，每个人都将从学习Redux中受益。

GraphQL 是近年来流行的查询语言。它的语法简单，但是由于它是跨整个技术栈使用的，而且学这个东西意味着必须学习怎么把它连接到数据存储层，因此集成可能会令人生畏——但这是值得付出的努力。

GraphQL 不会在短期内完全取代JSON REST API，但是它在2019年的增长甚至变得更快了，我预计这种强劲的增长会持续到2020年。

后端

Express 是主导性的Node框架，用户满意度很高，2020年Express不会遇到重大的挑战者，但是随着无服务器（serverless）的兴起，我预计在新的十年到来之际，Express的统治地位会逐渐下滑。

Next.js是一个一开始建构在Express基础之上的全栈React框架，但此后已从Express转换到到无服务器和静态优化，然后就像疯了一样发展起来。

当我们把EricElliottJS.com从Express换到无服务器的Next.js时，我们的托管费用降低了90％，而且页面加载速度也加快了。所以我再怎么强烈推荐这个都不够。我们现所有的应用都是用Next.js和Zeit 托管的。

测试

Jest和Cypress分别单元测试和功能测试最受欢迎的工具，但是我个人非常喜欢RITEWay 和TestCafe 。RITEWay 是单元测试之禅 ：一个始终回答了每个单元测试必须要回答的5个问题的测试框架。

跟Cypress一样，TestCafe也是一种功能测试工具，这个工具不需要你跟Selenium纠缠不清，但是拥有更好的跨浏览器支持和一个很酷的测试记录器/ IDE。我强烈建议QA小组试试TestCafe 。

函数工具

Lodash 、Ramda 、Immer、Redux以及RxJS都是我经常使用的函数工具。

Ramda在 2019年进步神速，它提供了一些Lodash 所没有的工具，比如lenses（透镜）和transducer（变形器）。RxJS通过pipeable运算符提供transducer风格的函数性。

Immer使得在不改变JavaScript对象的情况下对其进行操作变得很容易。而Redux 是一种状态管理工具。

2020年的技术格局

在接下来的十年时间里，有几种新兴技术即将对人类生活产生巨大影响。以下是这些技术最新发展情况的概要：

AI

人工智能也许是有史以来最具变革性的技术。不同的学者和自以为是的亿万富翁都把AI说成是奇迹般的乌托邦，或者人类的终结。

这肯定是我们所知的人类的终结，但也可能是人类与机器之间美好合作的开始。我们才刚刚开始瞥见AI可能会变成什么样子。其中有些令人恐惧（比方说深度伪造），而另一些则非常有用（比方说Adobe Premiere对视频编辑的新的auto-reframe功能）。事实上，到目前为止，人工智能既极其可怕又极其有用。人工智能会继续制造一些令人恐惧的事情，但是通过人工智能改善人类生活的潜力是巨大的。潘多拉的盒子已经打开，再也无法关闭，所以我希望你善加利用好AI，用来解决重要问题和改善生活。

2019年在AI领域取得了许多重要突破。近年来，研究团队一直在各种视频游戏领域争相实现超人的表现，但有些游戏类型对AI来说仍然充满挑战，比方说像《星际争霸》II这样的策略游戏。DeepMind的AlphaStar程序利用跟人类玩家能用到的相同资源，在Battle.net官方服务器实现了大师级的水平。《星际争霸》是一款复杂的游戏，需要进行长期的策略思考，这种能力曾经被认为是AI所不能及的。战略思维代表了通向通用AI道路上的一个重大的里程碑。

如果说把资源用到游戏上看起来似乎很愚蠢的话，不妨想想DeepMind 这样的项目在文本转语音方面也取得了令人难以置信的进步， AI代理和私人助理被赋予了表现更自然的声音，但同样重要的是，通过这样可以把声音还给那些失声的人。

人工智能还被用来诊断癌症，预测蛋白质折叠（可用于了解疾病和发现新药），恢复残疾人的肢体控制，生成逼真的图像等。

无人车

无人车在变革性AI技术当中应该有自己的一席之地。这个生态体系的大玩家主要包括Cruise、Uber、Waymo、Nuro\Aurora以及福特等。这项技术仍处在初级阶段，过分乐观已给这个行业带来了真正的问题，但毫无疑问，2020年代我们将见证超越人类水平的自动驾驶能力。2015年我曾对自动驾驶技术做出过预测：

“到2045年的时候，一俩人开的车看起来会像马拉的双轮单座车一样。”

现在距离这一预测已过去5年，我想我可能低估了自动驾驶汽车进入市场的速度。Waymo的车在2018年的行驶里程超过了100万英里，美国已经有24座城市的道路上有无人车上路。现在我的预测是到2025年，多个制造商将会推出多种L5级（全自动）的车型。请密切关注Tesla、通用、福特及宝马的表现。

在过去十年的时间里，AI研究论文的出版量增长了10倍，现在，AI正在把实用、有用的工具交到主流用户手中，预计这种趋势在未来十年仍将持续。

我们已经开始看到AI能做到一些几年前大多数人都不敢相信的事情。预期AI在2020年代会取得更大的奇迹。

区块链和加密货币

2019年对于区块链和加密货币来说是具有里程碑意义的一年。区块链技术开始进入主流。我预计2020年会有更大的发展并为主流所采用。

对用户友好，实现无需许可，无需银行的借贷的DeFi （去中心化金融）出现了爆发式增长。目前，有6.5亿美元（包括4.5亿美元的无银行贷款）被锁定进DeFi 合同里面，而2019年是该技术出现的元年。随着越来越多的人投资于加密货币，我预计将来会出现更多有加密支持的DeFi 贷款。

大家可以在不牺牲自己的加密货币投资机会成本的情况下获得流动性，或利用DeFi贷款对加密货币进行杠杆投资（投资的风险/回报均增加了）。

加密货币和区块链技术正在突破主流。比特币和以太坊的日活地址在2018年1月达到了顶峰，随后一年，由于市场下跌，大家的兴趣变弱了（每上涨10倍之后，加密货币的价格就会大幅回落，然后又会在下一个周期攀爬到比上一个高峰高出10倍的新高）。

比特币和以太坊区块链上的日活地址数

• Square的Cash App的Android下载量已超过1000万次，在有着出色UX的简单app里面，用户可以购买，出售，接收比特币。

• Coinbase 的Android下载也超过一千万。

• Brave推出了内置的以太坊钱包，月活用户数一下子从2019年10月的870万增加到11月底的1040万。

• 因为有了Sliver.tv和DLive，2000万视频游戏迷正在利用Theta网络进行去中心化的流媒体直播。

2019年我最喜欢的进展是Fortmatic 的推出。不管你是不是在开发加密应用，你都可以用Fortmatic来替换用户身份验证并提高安全性，并且摆脱被供应商锁定，还可以增加诸如端到端加密，签名交易等功能。

如果你打算在2020年开发新应用，不妨考虑一下Fortmatic，而不是再得输入自己的用户名/密码进行身份验证（2020年没人应该再这样做了），或者把身份验证这件事交给Google、Facebook等。

我曾经写过一篇文章讨论如何利用加密技术来改善应用的身份验证和安全性。我很期待在2020年能看到主流应用开始采用Fortmatic等技术。

2019年以太坊轻松赢下了智能合约平台大战的胜利。我预计2020年以太坊仍将继续占据主导地位。

扩展现实（XR）

自2015年以来，我每年都对AR未来充满希望我，从小就梦想着它的实现。将来，XR将会取代手机。这只是个时间问题。需要多长时间仍然有待讨论，但似乎这种转变可能会在未来十年内出现。甚至可能在未来5年内开始。

随着VR与AR之间的界限逐渐模糊，该行业现在正在把整个领域泛指为XR（扩展现实）。自问世以来，ARKit 和ARCore （分别是苹果和Google的增强现实SDK）自引入以来已取得了长足的发展。月活用户数已从2017年的4700万增长到2019年5月的1.5亿。

WebAR 在2019年已站稳了脚跟，2020年很可能会继续发展。如果你对此感到好奇的话，不妨看看AR.js、React 360或Viro React。

硬件也取得了很多进展。2016年推出的Hololens 1大概是5000美元。自此之后又发生了什么呢？

Hololens 2的价格仍然高达3500美元，他们还没有为消费者准备。剪切、SLAM（实时定位与地图构建）及视野等方面仍然存在问题。你不会想一整天都戴着这样的东西。但是，因为现在它的定价是每月99美元上手个开发者工具包还是有可能的，虽说你得在等待名单上等一段时间。

无人机

在美国已经售出了大约200万架无人机，它们已经改变了建筑，地理调查，制图，电影，航空摄影，农业，环境科学和娱乐等领域。2020年商用无人机物流配送最终可能在美国成为现实。

FPV无人机比赛是我最喜欢的观赏运动，还有Drone Racing League直播赛事。如果你想了解它是什么样的，他们还提供了精心设计的模拟器。

所有这些新的无人机活动均需要大量软件支持，包括图像处理，无人机地图软件，物流飞行规划，遥测记录和处理，分析，行业应用集成等。

这跟AI也有很多重合之处——自主飞行的无人机需要图像处理，碰撞避免等。

结论

2010年代为我们提供了大量变革性技术，其中许多我们已经视为理所当然，但其实是产生了巨大影响的：

• Instagram

• Spotify

• 虚拟助手

• 无线耳机

• 主流VR

• 增强现实（热门游戏“精灵宝可梦”就用这个）

• 经济实惠的Tesla

• 共享经济（汽车，电动滑板车，自行车）

• 主流平板电脑

• 主流生物识别技术（触摸ID，面部ID）

• 众筹

我已经迫不及待想看看你在新的十年会创造出什么样的东西。

开始表演你的魔术吧。

译者：boxi。