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/

webp

设计灵感来源于 @freeCodeCamp

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

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

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

大小王 Jokers

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

webp

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

黑桃 Spades

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

webp

Konrad Zuse花色程序员成就概要♠ AAda Lovelace发明了计算机算法;编写了第一个计算机程序♠ 2Linus Torvalds创造了 Linux 操作系统;创造了 Git 版本控制系统♠ 3Bjarne Stroustrup创造了 C++ 程序语言♠ 4Patricia Sellinger帮助创造 System R 项目(SQL 的第一次实现)♠ 5Tim Berners-Lee创造了万维网♠ 6Richard Stallman发明了 GNU 操作系统;建立了自由软件基金会;创造了 GNU Emacs 编辑器♠ 7Raymond Kurzweil发明了 OCR(光学字符识别);开发了首款商用文本语音合成器♠ 8Ken Thompson发明了 B 语言;合作发明了 Unix 操作系统;合作发明了 Go 语言♠ 9Ray Tomlinson发明了 Email♠ 10Mary Allen Wilkes为 LINC 设计了交互式操作系统 LAP6;第一个在家中建造和使用个人计算机♠ JEdsger Dijkstra发明了 Dijkstra 最短路径算法;提出了哲学家就餐问题♠ QDouglas Engelbart发明了鼠标;帮助发明了图形用户界面♠ KKonrad Zuse建造了第一个二进制电脑;建造了第一个可编程数字计算机;设计了第一个高级程序设计语言

红桃 Hearts

Python是程序员需要多少自由度的实验。自由度太大,没有人可以阅读别人的代码;太少了,表现力受到了威胁。——Guido Van Rossum

webp

Guido Van Rossum花色程序员成就概要♥ AGrace Hopper首创术语“bug”;发明了编译器;合作开发了 COBOL♥ 2Andrew Ng领导斯坦福人工智能机器人项目;领导斯坦福自治直升机项目;上线线上机器学习课程♥ 3Corrinne Yu为美国航天飞机计划编写代码;为自己创建了 3D 图形引擎;领导 Halo 游戏系列的开发♥ 4Brian Fox创造了 GNU 的 Bash Shell;合作开发了 OVC 开源投票系统♥ 5Guido Van Rossum创造了 Python 语言♥ 6Larry Wall创建了 Git 的前身 Patch,创建了 Per 语言♥ 7Bob Frankston & Dan Bricklin创造了第一个电子表格程序 VisiCalc♥ 8Adele Goldberg提出用于图形用户界面的概念;合作开发了 Smalltalk-80 语言♥ 9Brian Kernighan合作开发了 Unix 操作系统;编写了第一个 “Hello World” 程序;合作发明了 Awk 语言♥ 10Donald Knuth出版了《计算机编程艺术》;设计了 TeX 类型设置系统♥ JJudea Pearl创建了人工智能的概率方法;发明了贝叶斯网络♥ QJohn McCarthy提出了术语“人工智能”;创建了 Lisp 语言♥ KMaurice Wilkes打造了第一台具有内部存储程序的计算机 EDSAC

梅花 Clubs

知识管理首先是要利用信息来提出正确的问题,这本身就是一个巨大且通常是无法识别的挑战。——Dana Ulery

webp

Dana Ulery花色程序员成就概要♣ AIda Rhodes从事于“数学表项目”;和 Betty Holberton 一起为 UNIVAC-I 设计了 C-10 语言♣ 2Bram Cohen创造了 BitTorrent 对等协议♣ 3Brendan Eich创造了 JavaScript 语言♣ 4Sophie Wilson设计了橡子微型计算机;开发了 BBC Basic 语言♣ 5James Gosling创造了 Java 语言♣ 6Bill Joy创造了 VI 编辑器;创造了 Unix 下的 C Shell♣ 7Steve Wozniak设计了第一台大众市场的微型计算机 Apple II;发明了通用遥控器♣ 8Ward Christensen开发了一种简单的文件传输协议 XMODEM,第一个公告板 CBBS 共同创始人♣ 9Dennis Ritchie合作创建了 Unix 操作系统;设计了 C 语言♣ 10Dana Ulery早期的科学计算应用先锋;建立了电子数据交换标准♣ JFrances Allen为最早的超级计算机之一 IBM Stretch 设计了编译器♣ QMarvin Minsky发明了神经网络和第一台自学机器;发明了第一台头戴式图形显示器♣ KAlan Turing发明了图灵机;开发出可以破解纳粹加密的计算机;发明了图灵测试

方块 Diamonds

始终如一地编写安全代码要比指出不安全代码要困难得多。——Parisa Tabriz

webp

Parisa Tabriz花色程序员成就概要♦ ADorothy Vaughan计算出了美国太空计划的飞行轨迹;教员工行 FORTRAN 编程♦ 2Parisa Tabriz监督 Google Chrome 的安全性;成立了安全倡导者会议♦ 3Yukihiro Matsumoto设计了 Ruby 语言♦ 4Stephen Wolfram开发了计算机代数系统 Mathematica;开发了应答引擎 Wolfram Alpha♦ 5Alexey Pajitnov设计并开发了俄罗斯方块♦ 6Phil Zimmermann创建了公共密钥加密程序 Pretty Good Privacy♦ 7Radia Perlman设计了以太网的生成树协议♦ 8Andrew Yao用极小定理提出姚的极小极大原理;引入通信复杂性理论;提出了姚的百万富翁问题♦ 9Vint Cerf & Bob Kahn发明了传输控制协议;发明了互联网协议♦ 10Alan Kay率先使用了面向对象程序设计♦ JMargaret Hamilton负责阿波罗登月任务的软件开发♦ QJean E. Sammet合作开发了 COBOL 语言;开发了 FORMAC 语言♦ KVera Molnar开始迭代组合图像;开始基于几何形状和主题创建算法绘画

亚裔程序员

节选名言:今天,我实际上很难考虑一个在未来几年内不会被人工智能改变的行业。——Andrew Ng

webp

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

女性程序员

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

webp

Corrinne Yu花色程序员成就概要♠ AAda Lovelace发明了计算机算法;编写了第一个计算机程序♠ 4Patricia Sellinger帮助创造 System R 项目(SQL 的第一次实现)♠ 10Mary Allen Wilkes为 LINC 设计了交互式操作系统 LAP6;第一个在家中建造和使用个人计算机♥ 3Corrinne Yu为美国航天飞机计划编写代码;为自己创建了 3D 图形引擎;领导 Halo 游戏系列的开发♥ 8Adele Goldberg提出用于图形用户界面的概念;合作开发了 Smalltalk-80 语言♣ AIda Rhodes从事于“数学表项目”;和 Betty Holberton 一起为 UNIVAC-I 设计了 C-10 语言♣ 4Sophie Wilson设计了橡子微型计算机;开发了 BBC Basic 语言♣ 10Dana Ulery早期的科学计算应用先锋;建立了电子数据交换标准♣ JFrances Allen为最早的超级计算机之一 IBM Stretch 设计了编译器♦ ADorothy Vaughan计算出了美国太空计划的飞行轨迹;教员工行 FORTRAN 编程♦ 2Parisa Tabriz监督 Google Chrome 的安全性;成立了安全倡导者会议♦ 7Radia Perlman设计了以太网的生成树协议♦ JMargaret Hamilton负责阿波罗登月任务的软件开发♦ QJean E. Sammet合作开发了 COBOL 语言;开发了 FORMAC 语言

隐藏的第 55+ 张扑克:你

整副扑克牌 UI 已经变成 CSS 布局,因此在本地可以自定义自己的卡牌。

webp

隐藏的扑克牌

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

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

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

webp

开发 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 buildnpm run deploy部署到 Github Pages 页面上。

截止 v0.1.0 发布,通过 git log --pretty=format:'%ar,%s' > log.csv 命令生成并通过 Emoji 适度修改的 Commit Log 记录如下,统一记录在了 Release 里。

webp

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