2020年DevUI團隊最受歡迎的10篇技術文章

今天是2020年最後一天，DevUI團隊預祝你們元旦快樂、新年快樂、健康平安、福氣滿滿。

2020是很是特別的一年，咱們經歷了COVID-19新冠肺炎，經歷了資本市場的起伏，很幸運咱們都過來了，讓咱們忘卻那些不愉快的記憶，滿懷但願，迎接新的2021吧！

回顧2020，DevUI這顆小小的種子破土而出，不斷地從社區吸取營養，茁壯成長。

指標項	指標值
Star🌟	566
等級	Lv3
掘力值	2793
關注者	1038
閱讀數	97530

咱們DevUI的LOGO實際上是一個手勢，表明自信、活力和但願。

DevUI LOGO

真人手勢圖

咱們整理了2020年DevUI團隊出品的點贊👍數最高的10篇原創技術文章，涉及很是普遍的技術領域，如當前很是流行的深色模式、搭建灰度發佈環境、定位性能問題、組件開發、先後端鑑權等等，但願你們閱讀完有所收穫！

同時也祝你們在新的一年裏

節節攀升，青雲直上！

1 Web界面深色模式和主題化開發

Web界面深色模式和主題化開發

本文介紹瞭如何使用css自定義屬性來完成深色模式和主題化的開發。

CSS自定義屬性可以給css定義一些顏色變量，輕鬆地實現深色主題的開發甚至支持更多的主題化。

經過色彩變量定義，使用變量，處理圖片和處理三方組件支持實現整站的深色模式的規約和完善。

進一步介紹了降級支持的方法，並對深色模式的適用範圍和一些其餘方式實現進行了討論。

2 手把手教你搭建一個灰度發佈環境

手把手教你搭建一個灰度發佈環境

本文從服務器準備、代碼準備、灰度策略制定和實現灰度發佈四個方面介紹了從零搭建一個灰度發佈環境的必備流程。灰度發佈的核心其實就是經過對Nginx 文件的修改實現流量的定向分發。內容頗爲簡單，可是從零到一的整個流程操做下來仍是比較繁瑣，但願各位看官可以有所收穫。

另外，這只是一個最簡易的Demo，在真正的DevOps 開發過程當中，還須要集成編譯構建、代碼檢查、安全掃描和自動化測試用例等其餘操做，期待後續團隊的其餘成員進行更多的專項擴展！

3 在瀑布下用火焰烤餅：三步法助你快速定位網站性能問題

在瀑布下用火焰烤餅：三步法助你快速定位網站性能問題

本文先給你們簡單介紹瞭如何生成網站的性能分析報告，以及這份報告的大體組成；

接着跟你們分享我本身在定位業務性能問題時，常用的三步法：在瀑布下用火焰烤餅；

從餅圖中咱們能夠對網站的性能有一個大體的認識，從瀑布圖快速地發現慢接口和大資源，而從火焰圖中，咱們能夠細緻地洞察到具體哪一個模塊/哪一個組件/哪一個方法可能成爲性能瓶頸。

4 手把手教你使用Vue/React/Angular三大框架開發Pagination分頁組件

手把手教你使用Vue/React/Angular三大框架開發Pagination分頁組件

這篇文章經過使用流行的三大框架，從0開始開發一個Pagination分頁組件，介紹了與框架無關的組件開發方法論。

並對比了不一樣框架實現通用功能時的異同，框架只是工具🔧，哪一個順手用哪一個，掌握通用的組件開發思惟纔是最關鍵的。

5 先後端鑑權二三事

先後端鑑權二三事

本文首先探討了認證與受權的區別，並列舉了幾種常見的認證與受權方式。

而後重點介紹了一下使用CAS 協議實現單點登陸的流程與問題。

最後，補充一點。華爲雲DevCldoud 的CAS Client 正是參考標準的CAS 協議實現，感興趣的同窗能夠在這裏註冊一個帳號，而後打開F12 使用帳號登陸觀察全部的網絡請求並分析一下CAS 業務實現的完整流程。

6 好用到飛起！VSCode插件DevUIHelper設計開發全攻略

好用到飛起！VSCode插件DevUIHelper設計開發全攻略

本文以DevUIHelper的設計開發爲例子，詳細地介紹了VSCode插件開發的思路，可做爲VSCode插件開發的指南，經過實踐本文提到的方法，本身動手實現一個VSCode插件。

7 現代富文本編輯器Quill的模塊化機制

現代富文本編輯器Quill的模塊化機制

本文先經過2個例子簡單介紹了Quill模塊的配置方法，讓你們對Quill模塊有個直觀初步的印象。

而後經過字符統計模塊這個簡單的例子介紹如何開發自定義Quill模塊，對富文本編輯器的功能進行擴展。

最後經過剖析Quill的初始化過程，逐步切入Quill模塊的加載機制，並詳細闡述了工具欄模塊的加載過程。

8 大廠是如何用DevCloud流水線實現自動化部署Web應用的

大廠是如何用DevCloud流水線實現自動化部署Web應用的

本文詳細地介紹如何將一個網站的Github倉庫源碼自動化部署到服務器。

先介紹申請服務器和搭建服務器環境，重點介紹在Linux服務器搭建Nginx服務的步驟；

而後簡單介紹了手動部署流程；

最後詳細介紹瞭如何利用DevCloud流水線工具，實現自動化部署。

9 微前端在企業級應用中的實踐

微前端在企業級應用中的實踐

本文上半部分主要介紹了微前端的起源以及web應用的多種集成方式，經過講述DevUI的web集成模式案例，加深了對這部份內容的理解，同時使用single-spa實現了一個微前端模型並對single-spa進行了原理分析；

下半部分則圍繞DevUI微前端改造過程去深刻探討，講述如何自研一個企業級微前端解決方案。

10 使用Git，10件你可能須要「反悔」的事

使用Git，10件你可能須要「反悔」的事

使用Git的過程，不免因爲手快或者別的什麼緣由，須要對作過的事情進行「反悔」或者屢次「反悔」，Git強大到幾乎任何操做都是能夠「反悔」的

本文總結了10種常見的反悔場景，並詳細地介紹瞭如何反悔。

再次祝你們2021新年快樂、平安健康！