Weekly-GitHub-Digest #48

Wesley
Weekly-GitHub-Digest
6 min readAug 2, 2018

2018/07/26–2018/08/01

Web — 網路本身高風險,請詳閱公開說明書

  • snaptortoise/konami-js dd the Konami Code easter egg to your project. Compatible with gestures on smartphones and tablets as well.

konami-js 顧名思義已經在名字把它的用途一語道盡了,在網站埋入一些特定的隱藏彩蛋,唯有對著網頁打入關鍵的指令,這些彩蛋才會被觸發,如果能帶點惡趣味的尤其受歡迎。Konami Code 一講出來馬上能喚醒不少人年少時代的青春回憶,簡單又好記的幾個控制按鈕,上上下下左右左右BA,在當年橫向捲軸遊戲大盛其行的年代,可想而知第一個發現這個彩蛋的人一定異常興奮,電影一級玩家真的要私心推薦一波。

snaptortoise/konami-js
  • quilljs/quill Quill is a modern WYSIWYG editor built for compatibility and extensibility.

過去這裡寫了不少 editor 類的入坑文,像是第 37 期介紹過的 medium-ediotr 就是個例子,但是像 quill 周遭配套和生態圈如此完整的 rich text editor 還是目前看到少數中的少數。編輯器自帶的主題選配和 API 設計上都有著高度的彈性和擴充性,簡單說 quill 就是幫你把該有的基本核心功能都做完,奠基於此再去做你要的客製化更改,官網文件寫得真的很舒服。

quilljs/quill

Terminal — 已經是 iTerm 的形狀了呢

kodie/npm-gif

node 系列在安裝相關 package 時常常需要先跑個 npm install,但是光是等待這件事就挺煩躁的啊,如果想要讓這個等候時間變得輕鬆一點該怎麼做呢?

全域安裝直接來:

$ npm install --global npm-gif

使用方法就跟你平常使用 npm 是一樣的,找個專案試試看吧:

$ npm-gif i

稍微測試的結果如下:

kodie/npm-gif

當然進階一點玩上癮的話甚至可以直接去你的 ~/.bashrc 或是 ~/.zshrc 直接改設定:

alias npm=npm-gif

哎呀,既然安裝的時間不能省,那就把這段等待中的時間變得開心點吧,看看那個華麗的脈衝光,看久了是不是還有點 callback hell 的既視感呢?

Useful OSS — 好用的開源軟體

  • plibither8/markdown-new-tab Google Chrome Extension — 🗒️ ⏰ ☑️ Take down notes, save reminders, paste links, create checklists or tables with markdown [M↓] directly in your ‘New Tab’ page

打開瀏覽器分頁,馬上就能開始做筆記,寫點 reminder,貼上看到覺得有趣有用的連結,而這一切都是使用平時擅長的 Markdown 語法,資料基本上都是儲存在自己本地端的 localStorage。老實說我自己還是比較常用 Boostnote 這類的桌面應用做筆記,但是習慣這件事是會慢慢改變的,也許哪天會對這樣的書寫方式感到更為自在也說不定呢。

plibither8/markdown-new-tab

Developers — 開發者們

同樣是在 FEDC 會中聽演講時而知道的講者,起初他有大致上展示他自己的業餘專案,xstate 的使用方式,其實就是一個處理 state 管理的狀態機,紅綠燈等候這件事就是個很好的舉例,而實作方法在官方文件上也能找到。除了開發者的身份,David Khourshid 的撰文功力同樣不可小覷,在 CSS TRICKS 上刊載的這篇 Animating Layouts with the FLIP Technique,就把 flipping 和 xstate 這兩個專案一併用上了,Codepen 上的 這個例子 亦然,可以觀察在使用 xstate 時發送請求的各種狀態變化,加上 flipping 的 transition 效果真的很讚啊。

davidkpiano (David Khourshid) · GitHub

Technical Posts — 你都去哪看技術文啊城武

MUKI space 大概是任何 CSS 愛好者都會立刻按下收藏的一個手繪風滿滿的網站,使用 Wordpress 架設總有股說不出的親切感。幾篇一定要拜讀的像是做響應式設計網頁必備的 CSS Media Queries,切版超好用的 CSS Flexbox 介紹與解析,還有 CSS Specificity 這篇專門用電影鬼店圖文解釋 CSS 元素權重的前導文。

MUKI space* — Simple, Personal and Life Style

You Need Some Music, And A Bottle of Dry Martini — 你一定要把氣氛搞得這麼銷魂嗎

從國中開始接觸日劇,知道戶田這位演員也差不多是在那時候,在 Liar Game 劇中的扮相是個單純的白傻美,老實說這種走傳統偶像派的保守路線和男主的演出相較之下真的少了些亮點,但這些刻板式的既定形象在 SPEC 這部日劇就開始全面反轉了。從劇情到人物設定,有村架純,神木隆之介都有一同參與演出,看似不合理的超能力在現實世界真實發生,多了想像力渲染的空間,戶田的戲路也明顯越走越寬,和理個小平頭又面癱的加瀨亮合作也有許多原先意想不到的火花。SPEC 推出雖然迄今也八年多了,但這部既幻想又無厘頭的日劇在我心目中仍然是不敗的經典之作。

THE RiCECOOKERS — 波のゆくさき

--

--