2019 年 4 月 25 日恍箭，Github Star 第一的開(kāi)源項(xiàng)目 freeCodeCamp 創(chuàng)始人 Qunicy 發(fā)表了一篇文章，《Introducing Programmer Playing Cards》蝉仇，介紹了一副可以邊玩邊了解程序員歷史的撲克牌撕予。幾個(gè)月后，因著自己對(duì) FCC 中文社區(qū)的持續(xù)投入淮逻，收到了其中的兩份卡牌鞍泉，也塑造了這篇文章皱埠、以及這個(gè)開(kāi)源項(xiàng)目的靈感起源。

整副卡牌共 54 張撲克咖驮，包含大小王和四種花色的各 13 張牌边器⊙凳啵卡牌全部由 100% PVC 材質(zhì)打造，適度彎曲忘巧、浸水以及打火機(jī)烘烤都不會(huì)影響卡片的耐久度恒界；卡牌包含 54 位程序員先鋒的故事，每一張卡片內(nèi)含一個(gè)程序員的生活照片砚嘴、主要成就清單十酣，以及摘自 TA 的名言——正是這些先鋒們開(kāi)創(chuàng)了現(xiàn)代程序員所依賴(lài)的技術(shù)。

游歷其中际长，能感受到短短的年代中計(jì)算機(jī)技術(shù)飛躍發(fā)展的歷史耸采，以及欣賞到每個(gè)人對(duì)自己所熱愛(ài)的這份事業(yè)所作出的答卷。同時(shí)也能看出由于 54 張卡片數(shù)量的局限性工育，無(wú)法對(duì)更多辛勤貢獻(xiàn)的程序員們提供展示的舞臺(tái)虾宇。因此，為了讓這份有關(guān)“程序員撲克牌”的喜悅能夠通過(guò)互聯(lián)網(wǎng)傳播如绸、通過(guò)開(kāi)源項(xiàng)目傳播文留，并逐步收錄更多的故事，塑造更多的可能性——那就從為其寫(xiě)一份 UI 開(kāi)始吧竭沫！

值 2020.01.01 新的十年伊始之際，以全新品牌“凝果屋(@ningowood)”為出發(fā)點(diǎn)骑篙，以全新開(kāi)源項(xiàng)目“程序員撲克牌(poker-coder)”為著手點(diǎn)蜕提，用更多實(shí)打?qū)嵉拈_(kāi)源項(xiàng)目驅(qū)動(dòng)學(xué)習(xí)，開(kāi)啟新十年的開(kāi)源征程靶端！

開(kāi)源項(xiàng)目倉(cāng)庫(kù)地址：https://github.com/ningowood/poker-coder
開(kāi)源項(xiàng)目部署地址：https://ningowood.github.io/poker-coder/

設(shè)計(jì)靈感來(lái)源于 @freeCodeCamp

一谎势、54 張撲克牌，54 個(gè)技術(shù)故事

收錄的 54 個(gè)程序員里杨名，包含有業(yè)界耳熟能詳?shù)?Ruby on Rails 之父 David脏榆、比特幣之父中本聰、Linux 之父 Linus台谍、以及有“第一位程序員”以及“第一位女性程序員”之稱(chēng)的 Ada Lovelace......下面我們先大致介紹一下收錄中的這 54 位程序員吧须喂。

目錄結(jié)構(gòu)分為“大小王 Jokers”、“黑桃 Spades”趁蕊、“紅桃 Hearts”坞生、“梅花 Clubs”、“方塊 Diamonds”以及“亞裔程序員”和“女性程序員”板塊掷伙。其中“亞裔程序員”和“女性程序員”摘自前面花色中是己，且有重復(fù)性，但不妨我們從另一個(gè)角度看待全球計(jì)算機(jī)發(fā)展史上亞洲程序員以及最重要卻最容易被忽視的——女性程序員的貢獻(xiàn)任柜。

大小王 Jokers

借助基于密碼證明的電子貨幣卒废，無(wú)需信任第三方中間商沛厨，資金就可以安全，交易也不費(fèi)吹灰之力摔认∧嫫ぃ——Satoshi Nakamoto(中本聰)

Satoshi Nakamoto

黑桃 Spades

你可以說(shuō)我在計(jì)算上很懶惰级野，但因此我創(chuàng)造了計(jì)算機(jī)页屠。——Konrad Zuse

Konrad Zuse

紅桃 Hearts

Python是程序員需要多少自由度的實(shí)驗(yàn)列牺。自由度太大整陌，沒(méi)有人可以閱讀別人的代碼；太少了瞎领，表現(xiàn)力受到了威脅泌辫。——Guido Van Rossum

Guido Van Rossum

梅花 Clubs

知識(shí)管理首先是要利用信息來(lái)提出正確的問(wèn)題咬荷，這本身就是一個(gè)巨大且通常是無(wú)法識(shí)別的挑戰(zhàn)∏嵫冢——Dana Ulery

Dana Ulery

方塊 Diamonds

始終如一地編寫(xiě)安全代碼要比指出不安全代碼要困難得多⊙旅郏——Parisa Tabriz

Parisa Tabriz

亞裔程序員

節(jié)選名言：今天鼠锈，我實(shí)際上很難考慮一個(gè)在未來(lái)幾年內(nèi)不會(huì)被人工智能改變的行業(yè)⌒侵——Andrew Ng

Andrew Ng

女性程序員

有時(shí)我會(huì)擁抱我的代碼横缔。我會(huì)抓取一些代碼打印輸出铺遂，將自己圍在幾本書(shū)中，握住法律墊子茎刚，curl 縮在帶毯子的沙發(fā)上襟锐，然后開(kāi)始閱讀并亂涂亂畫(huà)。[機(jī)翻]——Corrinne Yu

Corrinne Yu

隱藏的第 55+ 張撲克：你

整副撲克牌 UI 已經(jīng)變成 CSS 布局糊秆，因此在本地可以自定義自己的卡牌。

隱藏的撲克牌

二解寝、純前端開(kāi)源項(xiàng)目開(kāi)發(fā)歷程小記

本項(xiàng)目目前專(zhuān)注于純前端技術(shù)的建設(shè)扩然，主要的前端技術(shù)棧如下：

• React：前端視圖層核心庫(kù)
• TypeScript：提供靜態(tài)類(lèi)型檢查
• Material UI：Material Design 風(fēng)格的 UI 設(shè)計(jì)庫(kù)
• ...

React + Material UI

這里不做過(guò)多的技術(shù)探討，NingoWood 的主要前端技術(shù)選型也將圍繞 React + Material Design 搭建前端風(fēng)格聋伦。未來(lái)會(huì)在學(xué)習(xí)過(guò)程中逐步分享相關(guān)技術(shù)知識(shí)點(diǎn)夫偶。

從零到 Create React App，再到正式開(kāi)發(fā)業(yè)務(wù)代碼的小記(構(gòu)建項(xiàng)目觉增，安裝依賴(lài))如下：

$ 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 到落實(shí)的過(guò)程中兵拢，需要進(jìn)行 CSS 思維的轉(zhuǎn)換。每一張卡片分為左側(cè)和右側(cè)的花色姓名欄以及中間的內(nèi)容部分逾礁；內(nèi)容部分又包括程序員圖片说铃、里程碑事件以及名言引用塊。

關(guān)鍵的 CSS 突破點(diǎn)在于柵格系統(tǒng) + 響應(yīng)式高度來(lái)實(shí)現(xiàn)撲克牌的寬高比例恒定問(wèn)題嘹履。其實(shí)只要會(huì)搜索腻扇，就會(huì)發(fā)現(xiàn)可以用 padding-bottom: 140% 來(lái)保證高度是寬度的 1.4 倍，然后寬度隨著柵格系統(tǒng)改變即可砾嫉。

開(kāi)發(fā) UI 過(guò)程中的某次截圖

容器的 CSS 代碼如下幼苛，具體可以參考開(kāi)源項(xiàng)目根目錄下 src/components 下的寫(xiě)法。

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

開(kāi)源 + 部署

為了貫穿良好的開(kāi)發(fā)習(xí)慣焕刮，整個(gè)開(kāi)發(fā)過(guò)程從 Git Flow 的選用以及 Git Commit Message 等角度都做了較好的規(guī)范舶沿，并最終通過(guò)npm run build和npm run deploy部署到 Github Pages 頁(yè)面上。

截止 v0.1.0 發(fā)布配并，通過(guò) git log --pretty=format:'%ar,%s' > log.csv 命令生成并通過(guò) Emoji 適度修改的 Commit Log 記錄如下括荡，統(tǒng)一記錄在了 Release 里。

三溉旋、v0.1.0 正式發(fā)布畸冲，以及未來(lái)版本藍(lán)圖

回顧整個(gè)開(kāi)發(fā)過(guò)程，通過(guò)簡(jiǎn)單的 CSS 布局 + 卡片內(nèi)容填充以及 Github Pages 部署上線(xiàn)，v0.1.0 正式發(fā)布召夹。在這個(gè)過(guò)程中初期靈感得到實(shí)現(xiàn)岩喷，也隨之而來(lái)了各種各樣的新靈感。記錄在這里监憎，也逐步開(kāi)放在 Github 倉(cāng)庫(kù)中的 issue 里纱意，歡迎大家的加入。

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

從之前介紹的隱藏的第 55+ 張撲克牌可以看出：我們不僅僅可以記錄程序員的故事鲸阔，也能記錄各行各業(yè)先驅(qū)的故事偷霉；我們不僅僅可以記錄人的故事，也可以記錄不同事務(wù)的故事——如不同的編程語(yǔ)言甚至不同超級(jí)英雄的故事——一切都是開(kāi)放性的褐筛。

[2] 不僅僅只有一個(gè)卡組

也因此得出這個(gè)待做事項(xiàng)——支持更多的卡組类少，記錄更多的人與事。

[3] 自定義卡片與卡組

目前的重點(diǎn)是純前端實(shí)現(xiàn)“程序員撲克牌”項(xiàng)目渔扎，這就可以發(fā)展處讓用戶(hù)不用克隆項(xiàng)目至本地修改源碼來(lái)自定義卡片硫狞，直接在線(xiàn)編輯卡片并導(dǎo)出，甚至保存在云端晃痴。

[3] i18n: 國(guó)際化語(yǔ)言

由于這幅撲克牌的介紹都是純英文的残吩，也因此從純英文支持出發(fā)。接下來(lái)逐步開(kāi)放多語(yǔ)言支持倘核，并對(duì)社區(qū)提供翻譯入口的開(kāi)放泣侮，對(duì)中文更加友好。

以及更多...

尾紧唱、寒冬寄語(yǔ)活尊，歡迎加入凝果開(kāi)源社

縱觀(guān) 2019，寒冬越來(lái)越“寒”漏益，同時(shí)蛹锰，中文語(yǔ)境下的“程序員”三個(gè)字也逐漸變得和“被動(dòng)”、“猝死”绰疤、“淘汰”铜犬、“失業(yè)”有關(guān)。希望我們能夠通過(guò)這篇文章對(duì)“程序員撲克牌”的介紹峦睡，通過(guò)這個(gè)項(xiàng)目對(duì)這些“Programmer”的真實(shí)記錄翎苫，重新找回屬于自身職業(yè)的榮耀权埠，讓自己對(duì)事業(yè)能多添一份激情所在榨了。

那么，歡迎加入凝果開(kāi)源社攘蔽，2020 伊始龙屉，對(duì)未來(lái)開(kāi)源世界的持續(xù)支持與關(guān)注，就從訂閱我們的微信公眾號(hào)(@ningowood)開(kāi)始吧！

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