在 VSCode 中配置 Go 除錯環境 前期準備 作為一個 Go 開發者，首先需要把系統中的 Go 的環境配好（包括環境變數和包管理器），具體怎麼配這兒就不說了。不過 Go 的專案似乎都需要跑在 $GOPATH/src 下面，感覺有點反人類。Go 最推薦的偵錯程式就是 Delve，安裝和使用方法這兒也不說了，正確安裝後應該可以在命令列中直接執行 dlv 命令。 想看結果的同學，可以直接跳到文章末尾，那兒有可以執行的配置。 ... 2018-08-13 環境
雪碧圖的應用場景 & 一種生成演算法 CSS 雪碧圖 相信上古時期搞過前端的同學都知道，可以透過合併一些小圖片、使用 CSS 控制 background-position 的方式來減少 HTTP 請求次數，從而最佳化網頁載入時間，這就是 CSS 雪碧圖（Spritesmith）。不過自從 HTTP/2 出來之後，這個用途就已經沒什麼意義了。當然，它也可以避免當正常狀態與 hover 狀態使用不同的圖片時，首次 Hover 要... 2018-07-26 開發
Service Worker 踩坑指南（快取與 WebP） 背景 前天晚上在清理 Chrome 外掛的時候，發現了好久之前因好奇而安裝的 Lighthouse 外掛，它是 Chrome 團隊出的一個自動化頁面審計工具，可以幫助開發者最佳化頁面。繼續懷著好奇的心理，我打開了我的網站主頁，然後點了一下 Generate report 按鈕，得分慘不忍睹…… 嗯由於特別慘不忍睹，所以我就不放結果了，放一張 Lighthouse 的介面代替好了……當... 2018-07-08 環境
對 CSS 變數的一點實踐 什麼是 CSS 變數 之前我剛接觸 CSS 預處理器的時候，被裡面的變數功能給吸引了，你可以跟正常的程式語言一樣定義變數，裡面的值可以是各種各樣的東西，例如 2rem 或者 #123456 ，甚至還可以對變數做一些運算，例如兩個數值相加，或者把這個顏色變深 10% 。 後來無意間聽說了 CSS 變數這個概念，於是上網查了一下，這兒的變數其實更相當於預定義的常量，因為 CSS 還不支援... 2018-06-18 開發
使用 Puppeteer 編寫 CTF XSS Checker 之前寫過一篇文章： 《使用 PhantomJS 來實現 CTF 中的 XSS 題目》 ，後來被群裡的某大佬翻了出來並被吐槽了一番： 好吧，現在是 8102 年了，該升級一下技術了。於是今天下班後沒去打太鼓，轉而去折騰 puppeteer。 所需技術 XSS 基礎：相信點進來的同學都瞭解。 Promise：相信搞過前端開發的同學都知道。 async / await：相信大家都會把... 2018-06-07 安全
程式碼高亮的可行方案 Update 20180704：負向零寬斷言我手邊只有 Chrome 支援，所以目前還是不可用的，還好 PrismJS 提供了一種 Hack 的方法可以支援這個特性的很有限的部分：當傳入 lookbehind 屬性時，會刪掉 match 陣列的第零項，這樣第一個括號的內容就成了匹配到的東西……我已經給 PrismJS 提了 Pull Request（地址在 這裡 ），但尚未被... 2018-06-02 開發
編寫狀態驅動的業務程式碼 什麼是狀態驅動的業務程式碼 別看概念似乎很高大上，其實是我胡扯出來的……簡單來說，就是把業務按照一個個狀態進行拆分，然後透過狀態來計算當前要執行的操作（後端）或當前要展示的介面（前端）。 雖然這個做法很早就有了，而且絕對有很多人實踐過了，但似乎一直沒有一個專門的名詞（也可能是我不知道），於是我就將其描述為“狀態驅動的業務程式碼”了。 幾個業務場景 多個步驟的頁面 我們的一個業務場景是（部分... 2018-05-20 開發
關於一個同學的事情 文章裡會有一些負能量，如果心情不好的話請先關掉吧。 晚上的時候從我爸那兒得知，有個跟我一個院子裡長大的同學，因為抑鬱症，尋短見了。 雖然跟他大學四年幾乎沒有任何交集，但我記得，從小我就經常跟他一起玩。小時候我們一起扔過飛盤，去後院比賽騎車，在他家裡第一次看到撥號上網，一起玩過《上古神器》，爭論過誰的小學畢業考試成績好；初中之後，他是我做的第二個和第三個遊戲的主人公之一，我們為《高階手冊》中... 2018-05-08 日常
由 npm link 引發的一個坑 什麼是 npm link 可能很多同學沒有接觸過這個命令，就先提一下吧。NPM 文件在 這裡 。 假設我們開發了一個 NPM 的包 a ，然後我們的專案使用了這個包，那麼正常情況下，每次 a 有變動，我們都要更新到專案中。 npm 的 link 命令可以解決這個問題，步驟如下： 進入 a 的根目錄，執行 npm link ，這會建立一個軟連結 $PREFIX/lib... 2018-04-26 開發
為了使用者體驗而做的事情 嗯你沒看錯，這篇文章的主角還是那個編輯器，還是熟悉的 react-dnd 和 immutable-js 。現在這個編輯器已經可以替代目前線上的舊版編輯器了，而且功能更全。接下來我就說一說，為了讓這個編輯器的使用者體驗更好，我都做了哪些事情——有技術方面的，也有設計方面的。 技術方面 拖拽時顯示元素的詳細內容 由於用的是 react-dnd ，之前的效果是預設效果——對元素 DO... 2018-04-22 開發
對 react-dnd、immutable-js 與樹形結構的最佳化 背景 最近一直在做一個低配版網頁編輯器（面單編輯器），這是我剛入職的時候從同事那兒接手的一個 React 專案，專案中使用了 react-dnd 作為拖拽庫，Store 中的資訊都是 Immutable 物件。按理說應該效率挺高的，於是我就一直專注於業務需求，這周就差不多寫完了。 如果一切順利的話就不會有這篇文章了，起因是前天我手賤，搞了 256 個元素進去，別說拖拽了，選中一個元素都得卡上... 2018-04-12 開發
一次很蠢的最佳化經歷：判斷陣列 A 是否是陣列 B 的一部分 原問題 昨天一個同學問了我一個問題，他想擴充套件 JavaScript 中的 Array.prototype ，以判斷當前陣列是否被包含於另一個數組（不考慮 a = [a] 這樣的迴圈引用），例如： [1] 被包含於 [2, [1], 3] 和 [[2], [3, [1], 4]] 兩個陣列中。其實這道題如果只需要考慮引用相等，例如這樣設計測試用例： const a = [1]... 2018-03-31 開發