前端即網站前臺部分，執行在 PC 端、移動端等瀏覽器上展現給使用者瀏覽的網頁。前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站的視覺設計；前端開發則是網站的前臺程式碼實現，是建立 WEB 頁面或 APP 等前端介面呈現給使用者的過程，通過 HTML，CSS 及 JavaScript 以及衍生出來的各種技術、框架、解決方案，來實現網際網路產品的使用者介面互動 。
前端開發跟隨移動網際網路發展帶來了大量高效能的移動終端裝置應用。HTML5，Node.js 的廣泛應用，各類 UI 框架，JS 類庫層出不窮，開發難度也在逐步提升。
熱門文章
實現這個效果需要藉助 resize 特性，可以天然的實現元素拉伸特性。最常見的就是 textarea，預設就是可以拉伸的
<textarea></textarea>
不過，我們這裡需要的不是textarea，而是普通的元素。普通的元素要實現這樣的效果也很容易，只需要在overflow不是visible的情況下，新增resize屬性就行了
.resizable {
resize: both;
overflow: scroll;
}背景：實現主題切換有幾種不同的方案，比如使用CSS變數，使用JavaScript動態載入對應的主題樣式檔案等。本文主要講的是如何使用Sass實現主題切換。
本質：Sass作為CSS前處理器，需要編譯成CSS後，才能被瀏覽器識別和解析。因此無法在瀏覽器中直接使用Sass實現類似CSS變數那種動態切換。本質上來說，專案中有幾個主題就要提前定義好幾份主題樣式並全部引入。
絕大部分情況，網路請求都是先請求先響應。但是某些情況下，由於未知的一些問題，可能會導致先請求的 api 後返回。最簡單的解決方案就是新增 loading 狀態，在所有請求都完成後才能進行下一次請求。
但不是所有的業務都可以採用這種方式。這時候開發者就需要對其進行處理以避免渲染錯誤資料。
在動手實現之前，首先腦子裡要有一個整體脈絡，明白搭建前端監控具體的流程步驟有哪些。因為前端監控系統實際上是一個完整的全棧專案，而並不僅僅是前端，甚至主要的實現都是圍繞在資料方面的。
當然了，還有一點說明，本篇的實現主要是面對普通業務，面向中小廠自研的方向。我看過大廠做的監控系統，非常複雜能力也非常強，動不動就是億萬級別的資料，最後整還到了大資料的方向。我只介紹如何實現主要功能，如何解決問題。
異常資料，是指前端在操作頁面的過程中，觸發的執行異常或載入異常，此時瀏覽器會丟擲來報錯資訊。
比如說你的前端程式碼用了個未宣告的變數，此時控制檯會列印出紅色錯誤，告訴你報錯原因。或者是介面請求出錯了，在網路皮膚內也能查到異常情況，是請求傳送的異常，還是介面響應的異常。
在我們實際的開發場景中，前端捕獲的異常主要是分兩個大類，介面異常 和 前端異常，我們分別看下這兩大類異常怎麼捕獲。
同源策略（英文全稱 Same origin policy）是瀏覽器提供的一個安全功能。
MDN 官方給定的概念：同源策略限制了從同一個源載入的文件或指令碼如何與來自另一個源的資源進行互動。這是一個用於隔離潛在惡意檔案的重要安全機制。
通俗的理解：瀏覽器規定，A 網站的 JavaScript，不允許和非同源的網站 C 之間，進行資源的互動，例如：
無法讀取非同源網頁的 Cookie、LocalStorage 和 IndexedDB
無法接觸非同源網頁的 DOM
無法向非同源地址傳送 AJAX 請求
痛點：
日常開發中, 往往我們在專案中引用的很多依賴包，但是隨之依賴包的升級，我們的專案之間的依賴就越來越難以維護，包與包之間版本的引用也讓我們頭疼。
Lerna 包管理：
正如官網所說的，Lerna 是一個管理工具，用於管理包含多個軟體包（package）的 JavaScript 專案，對於使用 git 和 npm 管理多軟體包程式碼倉庫的工作流程進行了優化。
開發之前，需要準備頁面所需的素材，本文用到的海島素材是在 sketchfab.com 找的免費模型。下載好素材之後，在 Blender 中開啟，按自己的想法調整模型的顏色、材質、大小比例、角度、位置等資訊，刪減不需要的模組、縮減面數以壓縮模型體積，最後刪除相機、光照、UV、動畫等多餘資訊，只匯出模型網格備用。
unified是一個通過使用語法樹來進行解析、檢查、轉換和序列化文字內容的介面，可以處理Markdown、HTML和自然語言。它是一個庫，作為一個獨立的執行介面，負責執行器的角色，呼叫其生態上相關的外掛完成具體任務。同時unified也代表一個生態，要完成前面說的文字處理任務需要配合其生態下的各種外掛，截止到目前，它生態中的外掛已經有三百多個！鑑於數量實在太多，很容易迷失在它龐大的生態裡，可謂是勸退生態。
unified主要有四個生態：remark、rehype、retext、redot，這四個生態下又有各自的生態，此外還包括處理語法樹的一些工具、其他構建相關的工具。
通過檢視樣式我們發現都是 UI 的樣式，並沒有我們手動覆蓋的樣式。
但是這裡有一個異常點有四個生效的樣式，正常情況是隻會有一個。但是這裡我忽略了這個問題，我以為只是有多餘的引入，或者沒有 externals 、peerDependencies 導致有多個。
看上去樣式是生效了只不過效果不對，我就懷疑 theme-p 有問題，但是在文件站顯示是正常的。
那我們只能想辦法去排查這個錯誤樣式是誰引入進來的。
brightness 屬性是用來修改亮度的。值可以是百分比，也可以是數值（0.5 = 50%），預設值是 1，但不能是負數。當值越接近 0，畫面越黑，當等於 0 時，整個畫面幾乎就成純黑的了；值理論上可以趨於無限大，當大到一定值時，畫面就幾乎成純白了
能用來幹啥呢？有一個非常常見的效果想必大家都看過
最近準備一個技術分享，看到以前做的一個語音轉文字的功能，放在slides上落灰了，索性整理到這裡和大家分享下。
從技術選型，到方案設計，到實際落地，可以說把全鏈路都覆蓋到了。
語音轉寫流程圖
PC端瀏覽器如何錄音
錄音完畢後語音如何傳送
語音傳送和實時轉寫
通用錄音元件
總結
熱門問答
- 怎麼使用vue2+el-table實現甘特圖？
- vue能否實現向後端一樣再部署時動態配置。
- js資料處理
- 編寫一個js演算法，用一次迴圈將陣列中出現2次或者以上的值刪掉
- 在生產環境中axios向後端傳送請求為什麼不用localhost呢?
- 我在next.js中使用plaiceholder這個外掛去模糊化圖片的時候，當圖片數量比較多的時候為什麼會卡住？
- 遞迴和動態規劃的區別，應該如何理解？
- animation實現無縫滾動動畫會空白
- 如果一次網頁操作本身就只會觸發一次迴流/重繪, 那麼虛擬dom還有優勢嗎?
- 如何使用webapck 處理特殊檔案，比如xx.lock檔案
課程推薦
課程收穫：
- 掌握一項隨處可見、日益增加的技術需求
- 提升自身技術，拓寬前端視野
- 加強硬實力，把握晉升機會
- 基於計算機底層，向前端架構邁進
PS：大家想看哪些方面的技術內容，可以在評論區留言喔 ~
如有問題可以新增小姐姐微信~
