Weekly-GitHub-Digest #33
2018/04/12–2018/04/18
Web — 網路本身高風險，請詳閱公開說明書
- IonicaBizau/gridly The minimal (~100–170 bytes) grid system for modern browsers
前端框架後浪推前浪，CSS 框架也是不斷推陳出新，從早期的 Bootstrap 到現金較為流行的 Bulma，都曾帶給網頁開發者不小的壓力解脫，而他們的共通點除了一些常見的組件套路以外，格線系統也是必不可少的功能之一。gridly 是一個試圖做到最小化的 grid system，經壓縮過後的大小僅約 100～170 bytes 左右，它主打的內容其實是像在某些情境下，你可能只需要 CSS 框架的格線以做為排版使用，但其餘的東西如果一併引入實在顯得多餘，還有它提供的 className 也是相當直觀，最重要的是去看 code 其實核心也沒幾行，未來如果有想發展自己一套 CSS 框架也可以考慮一下它的格線實作方式。
- chpmrc/zero-width-chrome-extension Replace scary zero-width characters with funny emojis
Copy & Paste 這項快捷鍵的配置可以稱得上是世界上最偉大的發明之一，不過這種過度簡化的行為操作是否也有著隱憂呢？從這篇文章探討的例子做為啟發，使用者自身真的不見得知道自己到底複製了什麼，就跟鬼魂一樣，有些東西你看不見它但並不意味著它不存在。前陣子在 GitHub Trending 上看到了這個 Chrome Extension，就是幫你把所謂的零寬度字元替換成 emoji 顯示。不過替換成 emoji 是某種裝置藝術嗎？還是有其用途？有心人士的做法可能會在一些常被瀏覽的網站使用零寬度字元，而這也已經被相關資安單位證實是能夠取得使用者機敏資訊，該行為本身其實細思極恐。所以當你下次試圖在某個網站複製某些文字時，請特別留意那些被替換成 emoji 的東東，趁機資安宣導一下吧ＸＤ：永遠不要相信使用者的輸入，也永遠不要無腦亂複製貼上。
Terminal — 已經是 iTerm 的形狀了呢
- sindresorhus/npm-name-cli Check whether a package name is available on npm
其實不管什麼職業，只要職業時數累積到了一定長度就會開始想著如何把日常業務一些常用常見的東西包一包以便下次使用更加省力，就以常寫 JavaScript 做為主力開發的軟體工程師來說，打包幾個 npm package 也是挺正常的啊，而今天要介紹的這個 npm-name-cli 便是能在打包過程中幫上點小忙的工具：
全域安裝：
$ npm install --global npm-name-cli看看文件使用方式 npm-name --help：
1234567891011121314151617Check whether a package name is available on npmUsage
$ npm-name <name> …Examples
$ npm-name chalk
✖ chalk is unavailable
$ npm-name abc123
⚠ abc123 is squatted
$ npm-name unicorn-cake
✔ unicorn-cake is available
$ npm-name @sindresorhus/is unicorn-cake
✖ @sindresorhus/is is unavailable
✔ unicorn-cake is availableExits with code 0 when all names are available or 2 when any names are taken
喔喔，隨便找個常見的 lodash 試試：
很明顯嗎，lodash 早早有人註冊過這個名字了，在首次上傳 npm package 時最常遇到的就是撞名，使用 npm-name-cli 在這一步便能省下點開發時間。
Useful OSS — 好用的開源軟體
- yue/wey Fast open source Slack desktop app
以前實習的公司談論公事時特別喜歡用臉書社團和 messenger 聯絡，一開始大概是覺得氛圍挺不錯所以對這點挺無感的，但後來發現訊息一跳出來以為是朋友約吃飯結果是老闆敲你，幹這下工作和生活根本黏在一起，長期下來精神會有一定程度的負擔，也因此市面上越來越多專門針對這項需求而生的通訊辦公軟體，JANDI，Slack 等等。而就一年半工作下來和ＨＫ遠端協作的經驗來看，Slack 在各項常見的服務整合上還是推一個。這回介紹的其實是開源社群的開發者所推出的 Slack 桌面軟體，簡單登入之後也能快速切換帳號，跟官方推出的 Electron 版本相較之下真的輕量不少。說實話 wey 支援的功能和介面尚未完善所以目前看來不能說是好用，像是傳檔案或是 code snippet 都沒有，但仍想介紹的原因在於其作者是在 第 24 期 介紹過的 Electron 和 Atom 的主要貢獻者 zcbenz，開發原因也許可以看看原作者的 Design principles，推薦大家持續追蹤這項專案。
Developers — 開發者們
GitHub 是可以寫中文暱稱這點沒錯，但我還是第一次看到有開發者寫自己偏右的。afc163 是 ant-design/ant-design-pro 和 ant-design/ant-design 這兩個著名 repos 的主要貢獻者，回想起首次看到 ant-design 真的是大大吃驚，開源圈雖然每天都有新東西噴出來，但是關於 UI Library 能夠把設計理念和用心之處用文件的方式詳細述說的如此清晰還是第一次看到，每個設計元素其概念其實作都不是空穴來風，每一個組件的引用背後道理其來有自，更別說官方一併提供了主流三個前端框架的不同實作了，就連 mobile 和 desktop 的 Sketch 模板都好好的放在那裏了。有時候會陷入一種類似無底洞的迴圈思考，會覺得為什麼中國或是美國的大型網路公司都能這麼大產量的開源如此多專案出來，然後往往是中小型公司一窩蜂跟著潮流去使用，用的工具明明都是基於 MIT License 結果做出來的產品卻要收錢，不乖乖付費的話就開始濫賣使用者個資。不行這真的太無解了。
Technical Posts — 你都去哪看技術文啊城武
- Syntax Podcast A Tasty Treats Podcast for Web Developers
如果曾玩過著名的 JavaScript 30，也就是一個在 30 天內挑戰不使用任何框架，compiler 和 plugin，只使用原生 JS 去打造 30 個的不同專案，那應該會對 Wes Bos 的臉孔非常熟悉。Syntax Podcast 是兩個禮拜前才偶然發現的所以目前還沒聽過多少集，但就聽過幾個有著高度同質性 podcasts 的經驗來看，Wes Bos 有幾點做得很好，播放介面，語速，音量大小都看得出有一定程度的設計元素存在，用色大膽且豐富，來這邊聽 podcast 會覺得心情越來越好是真的，而且不是每個 podcast 站都會提供內容提到的相關素材，而 Syntax Podcast 倒是相當熱心的直接替你整理出一份清單，聽一次 podcast 可能就是 50 分鐘到一小時，分段節錄重點連結真的非常實用。
You Need Some Music, And A Bottle of Dry Martini — 你一定要把氣氛搞得這麼銷魂嗎
RADWIMPS 這團出過的名曲還真不少，窮舉實在是太累了，“會心一擊”，“有心論”，“おしゃかしゃま”，“Saidai Kouyakusuu”，簡單列出個幾首留待更多人去挖掘吧。很多台灣樂迷是因為電影 “君の名は (你的名字。)” 才間接得知主題曲的演唱樂團，無論你/妳/祢是透過什麼媒介，一個樂團能夠在如此強烈的競爭中脫穎而出並且為眾人所知都是相當了不起的。其實常看他們的 live 演出或是 MV，就會發現主唱野田洋次郎和羽生結弦的確是越看越像，有股濃厚的既視感。在這麼多曲子中硬要聽一首代表的話，我會想選 “セプテンバーさん”，最後野田走向吉他手把音量漸弱的動作好有愛啊ＸＤ。原作的歌詞實在是寫得太暖心了，尤其是這句 “手と手をとれば揺れる心が 抱えた不思议 それはテレパシー” 真的可以說是正中紅心。野田在情感面上的用詞描述向來是很細膩的，這點從替別的歌手寫詞也可窺知，幾個有名的例子像是為靈魂歌姬 Aimer 寫的 蝶々結び，簡單的蝴蝶結延伸出的意境，沒有刻骨銘心的經歷是很難在這些看似不起眼的日常瑣事中汲取素材撰寫的。事實上 Aimer 也曾經演唱過 セプテンバーさん 的不同版本，由於有進行重新編曲過，所以聽起來其實就像是兩首完全不同的歌曲，曲風更為輕快許多。比較意外的是主唱野田竟然也曾主演過日劇 “100万円の女たち”，一集 25 分鐘是個非常適合推坑的節奏呢。
