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。