20181111_ARTS_week20
本週演算法題 Letter Combinations of a Phone Number，看了一篇介紹 :empty 和 :blank 為選擇器的文章，分享了 vue 工程編譯生產版本時新增圖片壓縮的方法，分享了一點關於買專欄的想法。
Algorithm
/**
*
* Letter Combinations of a Phone Number
* https://leetcode.com/problems/letter-combinations-of-a-phone-number
*
* @param {string} digits
* @return {string[]}
*/
var letterCombinations = function (digits) {
const mappings = {
'2': ['a', 'b', 'c'],
'3': ['d', 'e', 'f'],
'4': ['g', 'h', 'i'],
'5': ['j', 'k', 'l'],
'6': ['m', 'n', 'o'],
'7': ['p', 'q', 'r', 's'],
'8': ['t', 'u', 'v'],
'9': ['w', 'x', 'y', 'z']
};
if (!digits || digits.length === 0) return [];
if (digits.length === 1) {
return mappings[digits];
}
let result = [];
let set1 = letterCombinations(digits.substr(0, 1));
let set2 = letterCombinations(digits.substr(1));
for (let i = 0; i < set1.length; i++) {
for (let j = 0; j < set2.length; j++) {
result.push(set1[i] + set2[j]);
}
}
return result;
};
console.log(letterCombinations("23"))
還挺有意思的一個題目，因為輸入的位數不確定，用遞迴把每個數拆出來，搞定。
Review
When to use the :empty and :blank CSS pseudo selectors
ofollow,noindex" target="_blank">https://medium.freecodecamp.org/empty-and-blank-53b9e96151cd
作者介紹了 :empty 和 :blank 兩種 CSS 偽選擇器。 簡單來說， :blacnk 比 :empty 好用，因為 :blank 可以忽略元素間的換行或者空格之類的， :empty 就必須要兩個元素中沒有東西才能匹配上，比如 <ul></ul> ，所以 :empty 的適用性沒有 :blank 強，但是 :blank 的相容性沒有 :empty 好，基本只有 FireFox 能支援（慘）
Tip
vue-cli 打包編譯時 -webkit-box-orient: vertical 消失的解決辦法。
這周遇到個很奇怪的問題，vue 專案 dev 的時候沒問題，到編譯 prod 版本之後 -webkit-box-orient: vertical 屬性就被刪掉了，造成頁面顯示混亂。
dev 版本 ok，prod 版本有問題，那問題肯定出在 webpack.prod.conf.js 裡，差異點是 prod 版本會對 css 壓縮，使用的是 optimize-css-assets-webpack-plugin 這個外掛。
既然問題找到了，解決方案自然呼之欲出。
最好的方案是修改 package.json 檔案中的 browserlist 欄位，這個會涉及 autoprefixer 的行為。
// package.json 源配置 "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] // 修改為 "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8", "ios >= 8", "Android > 4.1" ]
告訴 autoprefixer 我們要相容 iOS 8 還有 Android 4.x，讓它別亂刪我們的東西。
然後重新編譯，就搞定了。
當然，你把 optimize-css-assets-webpack-plugin 的配置註釋調也可以，但是個人不建議這樣做，因為各個組建間難免有重複的樣式程式碼，或者共同引用同一段樣式的，如果沒有 optimize-css-assets-webpack-plugin 會有大量冗餘程式碼。
Share
這周雙11，極客時間也做了不少活動，專欄打折力度也挺大的。其實對於學習這件事情還是要有辨別能力，雖然我一般會先看看介紹，試讀，然後瞄一下目錄看看是否是自己感興趣的話題，但也買到幾個感覺內容比較水的專欄。
慢慢自己也摸索了一個『指導原則』。涉及具體語言基礎知識的要好好考慮，比如小程式之類的，自己看文件完全可以搞定的，就不要再去買專欄了。
學習是一件好事情，但不要用戰術上的勤奮去掩蓋戰略上的懶惰，多學通用思想，不要拘泥於一兩門語言，或者一兩個工具框架。
祝雙十一快樂。
碎碎念
記錄一些所思所想，寫寫科技與人文，寫寫生活狀態，寫寫讀書心得，主要是扯淡和感悟。 歡迎關注，交流。
公眾號ID : MonkeyCoder-Life
