凝果開源 | 一副「程序員撲克牌」的故事

2019 年 4 月 10 日，Github Star 第一的開源項目 freeCodeCamp 創始人 Qunicy 發表了一篇文章，《Introducing Programmer Playing Cards》，介紹了一副能夠邊玩邊瞭解程序員歷史的撲克牌。幾個月後，因着本身對 FCC China 的持續投入，收到了其中的兩份卡牌，也塑造了這篇文章、以及這個開源項目的靈感起源。

整副卡牌共 54 張撲克，包含大小王和四種花色的各 13 張牌。卡牌所有由 100% PVC 材質打造，適度彎曲、浸水以及打火機烘烤都不會影響卡片的耐久度；卡牌包含 54 位程序員先鋒的故事，每一張卡片內含一個程序員的生活照片、主要成就清單，以及摘自 TA 的名言——正是這些先鋒們開創了現代程序員所依賴的技術。

遊歷其中，能感覺到短短的年代中計算機技術飛躍發展的歷史，以及欣賞到每一個人對本身所熱愛的這份事業所做出的答卷。同時也能看出因爲 54 張卡片數量的侷限性，沒法對更多辛勤貢獻的程序員們提供展現的舞臺。所以，爲了讓這份有關「程序員撲克牌」的喜悅可以經過互聯網傳播、經過開源項目傳播，並逐步收錄更多的故事，塑造更多的可能性——那就從爲其寫一份 UI 開始吧！

值 2020.01.01 新的十年伊始之際，以全新品牌「凝果屋(@ningowood)
)」爲出發點，以全新開源項目「程序員撲克牌(poker-coder)」爲着手點，用更多實打實的開源項目驅動學習，開啓新十年的開源征程！

開源項目倉庫地址：https://github.com/ningowood/poker-coder
開源項目部署地址：https://ningowood.github.io/poker-coder/

1、54 張撲克牌，54 個技術故事

收錄的 54 個程序員裏，包含有業界耳熟能詳的 Ruby on Rails 之父 David、比特幣之父中本聰、Linux 之父 Linus、以及有「第一位程序員」以及「第一位女性程序員」之稱的 Ada Lovelace......下面咱們先大體介紹一下收錄中的這 54 位程序員吧。

目錄結構分爲「大小王 Jokers」、「黑桃 Spades」、「紅桃 Hearts」、「梅花 Clubs」、「方塊 Diamonds」以及「亞裔程序員」和「女性程序員」板塊。其中「亞裔程序員」和「女性程序員」摘自前面花色中，且有重複性，但不妨咱們從另外一個角度看待全球計算機發展史上亞洲程序員以及最重要卻最容易被忽視的——女性程序員的貢獻。

大小王 Jokers

藉助基於密碼證實的電子貨幣，無需信任第三方中間商，資金就能夠安全，交易也不費吹灰之力。——Satoshi Nakamoto(中本聰)

花色	程序員	成就概要
大王	David Heinemeier Hansson	創造了 Ruby on Rails
小王	Satoshi Nakamoto	發明了區塊鏈；設計了比特幣

黑桃 Spades

你能夠說我在計算上很懶惰，但所以我創造了計算機。——Konrad Zuse

花色	程序員	成就概要
♠ A	Ada Lovelace	發明了計算機算法；編寫了第一個計算機程序
♠ 2	Linus Torvalds	創造了 Linux 操做系統；創造了 Git 版本控制系統
♠ 3	Bjarne Stroustrup	創造了 C++ 程序語言
♠ 4	Patricia Sellinger	幫助創造 System R 項目(SQL 的第一次實現)
♠ 5	Tim Berners-Lee	創造了萬維網
♠ 6	Richard Stallman	發明了 GNU 操做系統；創建了自由軟件基金會；創造了 GNU Emacs 編輯器
♠ 7	Raymond Kurzweil	發明了 OCR(光學字符識別)；開發了首款商用文本語音合成器
♠ 8	Ken Thompson	發明了 B 語言；合做發明了 Unix 操做系統；合做發明了 Go 語言
♠ 9	Ray Tomlinson	發明了 Email
♠ 10	Mary Allen Wilkes	爲 LINC 設計了交互式操做系統 LAP6；第一個在家中建造和使用我的計算機
♠ J	Edsger Dijkstra	發明了 Dijkstra 最短路徑算法；提出了哲學家就餐問題
♠ Q	Douglas Engelbart	發明了鼠標；幫助發明了圖形用戶界面
♠ K	Konrad Zuse	建造了第一個二進制電腦；建造了第一個可編程數字計算機；設計了第一個高級程序設計語言

紅桃 Hearts

Python是程序員須要多少自由度的實驗。自由度太大，沒有人能夠閱讀別人的代碼；太少了，表現力受到了威脅。——Guido Van Rossum

花色	程序員	成就概要
♥ A	Grace Hopper	獨創術語「bug」；發明了編譯器；合做開發了 COBOL
♥ 2	Andrew Ng	領導斯坦福人工智能機器人項目；領導斯坦福自治直升機項目；上線線上機器學習課程
♥ 3	Corrinne Yu	爲美國航天飛機計劃編寫代碼；爲本身建立了 3D 圖形引擎；領導 Halo 遊戲系列的開發
♥ 4	Brian Fox	創造了 GNU 的 Bash Shell；合做開發了 OVC 開源投票系統
♥ 5	Guido Van Rossum	創造了 Python 語言
♥ 6	Larry Wall	建立了 Git 的前身 Patch，建立了 Per 語言
♥ 7	Bob Frankston & Dan Bricklin	創造了第一個電子表格程序 VisiCalc
♥ 8	Adele Goldberg	提出用於圖形用戶界面的概念；合做開發了 Smalltalk-80 語言
♥ 9	Brian Kernighan	合做開發了 Unix 操做系統；編寫了第一個 「Hello World」 程序；合做發明了 Awk 語言
♥ 10	Donald Knuth	出版了《計算機編程藝術》；設計了 TeX 類型設置系統
♥ J	Judea Pearl	建立了人工智能的機率方法；發明了貝葉斯網絡
♥ Q	John McCarthy	提出了術語「人工智能」；建立了 Lisp 語言
♥ K	Maurice Wilkes	打造了第一臺具備內部存儲程序的計算機 EDSAC

梅花 Clubs

知識管理首先是要利用信息來提出正確的問題，這自己就是一個巨大且一般是沒法識別的挑戰。——Dana Ulery

花色	程序員	成就概要
♣ A	Ida Rhodes	從事於「數學表項目」；和 Betty Holberton 一塊兒爲 UNIVAC-I 設計了 C-10 語言
♣ 2	Bram Cohen	創造了 BitTorrent 對等協議
♣ 3	Brendan Eich	創造了 JavaScript 語言
♣ 4	Sophie Wilson	設計了橡子微型計算機；開發了 BBC Basic 語言
♣ 5	James Gosling	創造了 Java 語言
♣ 6	Bill Joy	創造了 VI 編輯器；創造了 Unix 下的 C Shell
♣ 7	Steve Wozniak	設計了第一臺大衆市場的微型計算機 Apple II；發明了通用遙控器
♣ 8	Ward Christensen	開發了一種簡單的文件傳輸協議 XMODEM，第一個公告板 CBBS 共同創始人
♣ 9	Dennis Ritchie	合做建立了 Unix 操做系統；設計了 C 語言
♣ 10	Dana Ulery	早期的科學計算應用先鋒；創建了電子數據交換標準
♣ J	Frances Allen	爲最先的超級計算機之一 IBM Stretch 設計了編譯器
♣ Q	Marvin Minsky	發明了神經網絡和第一臺自學機器；發明了第一臺頭戴式圖形顯示器
♣ K	Alan Turing	發明了圖靈機；開發出能夠破解納粹加密的計算機；發明了圖靈測試

方塊 Diamonds

始終如一地編寫安全代碼要比指出不安全代碼要困可貴多。——Parisa Tabriz

花色	程序員	成就概要
♦ A	Dorothy Vaughan	計算出了美國太空計劃的飛行軌跡；教員工行 FORTRAN 編程
♦ 2	Parisa Tabriz	監督 Google Chrome 的安全性；成立了安全倡導者會議
♦ 3	Yukihiro Matsumoto	設計了 Ruby 語言
♦ 4	Stephen Wolfram	開發了計算機代數系統 Mathematica；開發了應答引擎 Wolfram Alpha
♦ 5	Alexey Pajitnov	設計並開發了俄羅斯方塊
♦ 6	Phil Zimmermann	建立了公共密鑰加密程序 Pretty Good Privacy
♦ 7	Radia Perlman	設計了以太網的生成樹協議
♦ 8	Andrew Yao	用極小定理提出姚的極小極大原理；引入通訊複雜性理論；提出了姚的百萬富翁問題
♦ 9	Vint Cerf & Bob Kahn	發明了傳輸控制協議；發明了互聯網協議
♦ 10	Alan Kay	率先使用了面向對象程序設計
♦ J	Margaret Hamilton	負責阿波羅登月任務的軟件開發
♦ Q	Jean E. Sammet	合做開發了 COBOL 語言；開發了 FORMAC 語言
♦ K	Vera Molnar	開始迭代組合圖像；開始基於幾何形狀和主題建立算法繪畫

亞裔程序員

節選名言：今天，我實際上很難考慮一個在將來幾年內不會被人工智能改變的行業。——Andrew Ng

花色	程序員	成就概要
小王	Satoshi Nakamoto	發明了區塊鏈；設計了比特幣
♥ 2	Andrew Ng	領導斯坦福人工智能機器人項目；領導斯坦福自治直升機項目；上線線上機器學習課程
♦ 3	Yukihiro Matsumoto	設計了 Ruby 語言
♦ 8	Andrew Yao	用極小定理提出姚的極小極大原理；引入通訊複雜性理論；提出了姚的百萬富翁問題

女性程序員

有時我會擁抱個人代碼。我會抓取一些代碼打印輸出，將本身圍在幾本書中，握住法律墊子，curl 縮在帶毯子的沙發上，而後開始閱讀並亂塗亂畫。[機翻]——Corrinne Yu

花色	程序員	成就概要
♠ A	Ada Lovelace	發明了計算機算法；編寫了第一個計算機程序
♠ 4	Patricia Sellinger	幫助創造 System R 項目(SQL 的第一次實現)
♠ 10	Mary Allen Wilkes	爲 LINC 設計了交互式操做系統 LAP6；第一個在家中建造和使用我的計算機
♥ 3	Corrinne Yu	爲美國航天飛機計劃編寫代碼；爲本身建立了 3D 圖形引擎；領導 Halo 遊戲系列的開發
♥ 8	Adele Goldberg	提出用於圖形用戶界面的概念；合做開發了 Smalltalk-80 語言
♣ A	Ida Rhodes	從事於「數學表項目」；和 Betty Holberton 一塊兒爲 UNIVAC-I 設計了 C-10 語言
♣ 4	Sophie Wilson	設計了橡子微型計算機；開發了 BBC Basic 語言
♣ 10	Dana Ulery	早期的科學計算應用先鋒；創建了電子數據交換標準
♣ J	Frances Allen	爲最先的超級計算機之一 IBM Stretch 設計了編譯器
♦ A	Dorothy Vaughan	計算出了美國太空計劃的飛行軌跡；教員工行 FORTRAN 編程
♦ 2	Parisa Tabriz	監督 Google Chrome 的安全性；成立了安全倡導者會議
♦ 7	Radia Perlman	設計了以太網的生成樹協議
♦ J	Margaret Hamilton	負責阿波羅登月任務的軟件開發
♦ Q	Jean E. Sammet	合做開發了 COBOL 語言；開發了 FORMAC 語言

隱藏的第 55+ 張撲克：你

整副撲克牌 UI 已經變成 CSS 佈局，所以在本地能夠自定義本身的卡牌。

2、純前端開源項目開發歷程小記

本項目目前專一於純前端技術的建設，主要的前端技術棧以下：

• React：前端視圖層核心庫
• TypeScript：提供靜態類型檢查
• Material UI：Material Design 風格的 UI 設計庫
• ...

React + Material UI

這裏不作過多的技術探討，NingoWood 的主要前端技術選型也將圍繞 React + Material Design 搭建前端風格。將來會在學習過程當中逐步分享相關技術知識點。

從零到 Create React App，再到正式開發業務代碼的小記(構建項目，安裝依賴)以下：

$ npx create-react-app poker-coder --typescript
$ git remote add origin git@github.ningowood/poker-coder.git
$ git flow init
$ git flow feature start poker-coder
$ mkdir src/views src/store src/routes src/config src/components src/commons
$ sudo commitizen init cz-conventional-changelog --yarn --dev --exact --force
$ sudo yarn add react-router-dom @types/react-router-dom
$ sudo yarn add redux react-redux @types/react-redux
$ sudo yarn add redux-devtools-extension redux-logger redux-thunk @types/redux-logger
$ sudo yarn add @material-ui/core @material-ui/icons axios moment notistack
$ sudo yarn add react-i18next i18next
$ sudo yarn add --dev less less-loader node-sass react-hot-loader

佈局 + 填充

從看到撲克牌 UI 到落實的過程當中，須要進行 CSS 思惟的轉換。每一張卡片分爲左側和右側的花色姓名欄以及中間的內容部分；內容部分又包括程序員圖片、里程碑事件以及名言引用塊。

關鍵的 CSS 突破點在於柵格系統 + 響應式高度來實現撲克牌的寬高比例恆定問題。其實只要會搜索，就會發現能夠用 padding-bottom: 140% 來保證高度是寬度的 1.4 倍，而後寬度隨着柵格系統改變便可。

容器的 CSS 代碼以下，具體能夠參考開源項目根目錄下 src/components 下的寫法。

root: {
  height: 0,
  width: '100%',
  paddingBottom: '140%',
  position: 'relative',
},
cardWrap: {
  height: '100%',
  width: '100%',
  backgroundColor: '#fff',
  position: 'absolute',
  textAlign: 'center',
},

開源 + 部署

爲了貫穿良好的開發習慣，整個開發過程從 Git Flow 的選用以及 Git Commit Message 等角度都作了較好的規範，並最終經過npm run build和npm run deploy部署到 Github Pages 頁面上。

截止 v0.1.0 發佈，經過 git log --pretty=format:'%ar,%s' > log.csv 命令生成並經過 Emoji 適度修改的 Commit Log 記錄以下，統一記錄在了 Release 裏。

3、v0.1.0 正式發佈，以及將來版本藍圖

回顧整個開發過程，經過簡單的 CSS 佈局 + 卡片內容填充以及 Github Pages 部署上線，v0.1.0 正式發佈。在這個過程當中初期靈感獲得實現，也隨之而來了各類各樣的新靈感。記錄在這裏，也逐步開放在 Github 倉庫中的 issue 裏，歡迎你們的加入。

[1] 不只僅是程序員撲克牌

從以前介紹的隱藏的第 55+ 張撲克牌能夠看出：咱們不只僅能夠記錄程序員的故事，也能記錄各行各業先驅的故事；咱們不只僅能夠記錄人的故事，也能夠記錄不一樣事務的故事——如不一樣的編程語言甚至不一樣超級英雄的故事——一切都是開放性的。

[2] 不只僅只有一個卡組

也所以得出這個待作事項——支持更多的卡組，記錄更多的人與事。

[3] 自定義卡片與卡組

目前的重點是純前端實現「程序員撲克牌」項目，這就能夠發展處讓用戶不用克隆項目至本地修改源碼來自定義卡片，直接在線編輯卡片並導出，甚至保存在雲端。

[3] i18n: 國際化語言

因爲這幅撲克牌的介紹都是純英文的，也所以從純英文支持出發。接下來逐步開放多語言支持，並對社區提供翻譯入口的開放，對中文更加友好。

以及更多...

尾、寒冬寄語，歡迎加入凝果開源社

縱觀 2019，寒冬愈來愈「寒」，同時，中文語境下的「程序員」三個字也逐漸變得和「被動」、「猝死」、「淘汰」、「失業」有關。但願咱們可以經過這篇文章對「程序員撲克牌」的介紹，經過這個項目對這些「Programmer」的真實記錄，從新找回屬於自身職業的榮耀，讓本身對事業能多添一份激情所在。

那麼，歡迎加入凝果開源社，2020 伊始，對將來開源世界的持續支持與關注，就從訂閱咱們的微信公衆號(@ningowood)開始吧！

個人 Github 地址：https://github.com/hylerrix
凝果屋的 Github 地址：https://github.com/ningowood
程序員撲克牌的 Github Pages：https://ningowood.github.io/poker-coder/