2019 年 4 月 25 日，Github Star 第一的开源项目 freeCodeCamp 创始人 Qunicy 发表了一篇文章，《Introducing Programmer Playing Cards》，介绍了一副可以边玩边了解程序员历史的扑克牌。几个月后，因着自己对 FCC 中文社区的持续投入，收到了其中的两份卡牌，也塑造了这篇文章、以及这个开源项目的灵感起源。

整副卡牌共 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/

设计灵感来源于 @freeCodeCamp

一、54 张扑克牌，54 个技术故事

收录的 54 个程序员里，包含有业界耳熟能详的 Ruby on Rails 之父 David、比特币之父中本聪、Linux 之父 Linus、以及有“第一位程序员”以及“第一位女性程序员”之称的 Ada Lovelace......下面我们先大致介绍一下收录中的这 54 位程序员吧。

目录结构分为“大小王 Jokers”、“黑桃 Spades”、“红桃 Hearts”、“梅花 Clubs”、“方块 Diamonds”以及“亚裔程序员”和“女性程序员”板块。其中“亚裔程序员”和“女性程序员”摘自前面花色中，且有重复性，但不妨我们从另一个角度看待全球计算机发展史上亚洲程序员以及最重要却最容易被忽视的——女性程序员的贡献。

大小王 Jokers

借助基于密码证明的电子货币，无需信任第三方中间商，资金就可以安全，交易也不费吹灰之力。——Satoshi Nakamoto(中本聪)

Satoshi Nakamoto

花色	程序员	成就概要
大王	David Heinemeier Hansson	创造了 Ruby on Rails
小王	Satoshi Nakamoto	发明了区块链；设计了比特币

黑桃 Spades

你可以说我在计算上很懒惰，但因此我创造了计算机。——Konrad Zuse

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

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

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

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

Andrew Ng

花色	程序员	成就概要
小王	Satoshi Nakamoto	发明了区块链；设计了比特币
♥ 2	Andrew Ng	领导斯坦福人工智能机器人项目；领导斯坦福自治直升机项目；上线线上机器学习课程
♦ 3	Yukihiro Matsumoto	设计了 Ruby 语言
♦ 8	Andrew Yao	用极小定理提出姚的极小极大原理；引入通信复杂性理论；提出了姚的百万富翁问题

女性程序员

有时我会拥抱我的代码。我会抓取一些代码打印输出，将自己围在几本书中，握住法律垫子，curl 缩在带毯子的沙发上，然后开始阅读并乱涂乱画。[机翻]——Corrinne Yu

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 布局，因此在本地可以自定义自己的卡牌。

隐藏的扑克牌

二、纯前端开源项目开发历程小记

本项目目前专注于纯前端技术的建设，主要的前端技术栈如下：

• 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 倍，然后宽度随着栅格系统改变即可。

开发 UI 过程中的某次截图

容器的 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 里。

三、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/