2019 年 4 月 10 日,Github Star 第一的开源项目 freeCodeCamp 创始人 Qunicy 发表了一篇文章,《Introducing Programmer Playing Cards》,介绍了一副能够边玩边了解程序员历史的扑克牌。几个月后,因着本身对 FCC China 的持续投入,收到了其中的两份卡牌,也塑造了这篇文章、以及这个开源项目的灵感起源。前端
整副卡牌共 54 张扑克,包含大小王和四种花色的各 13 张牌。卡牌所有由 100% PVC 材质打造,适度弯曲、浸水以及打火机烘烤都不会影响卡片的耐久度;卡牌包含 54 位程序员先锋的故事,每一张卡片内含一个程序员的生活照片、主要成就清单,以及摘自 TA 的名言——正是这些先锋们开创了现代程序员所依赖的技术。node
游历其中,能感觉到短短的年代中计算机技术飞跃发展的历史,以及欣赏到每一个人对本身所热爱的这份事业所做出的答卷。同时也能看出因为 54 张卡片数量的局限性,没法对更多辛勤贡献的程序员们提供展现的舞台。所以,为了让这份有关“程序员扑克牌”的喜悦可以经过互联网传播、经过开源项目传播,并逐步收录更多的故事,塑造更多的可能性——那就从为其写一份 UI 开始吧!react
值 2020.01.01 新的十年伊始之际,以全新品牌“凝果屋(@ningowood)
)”为出发点,以全新开源项目“程序员扑克牌(poker-coder)”为着手点,用更多实打实的开源项目驱动学习,开启新十年的开源征程!ios
开源项目仓库地址:https://github.com/ningowood/poker-coder
开源项目部署地址:https://ningowood.github.io/poker-coder/git
收录的 54 个程序员里,包含有业界耳熟能详的 Ruby on Rails 之父 David、比特币之父中本聪、Linux 之父 Linus、以及有“第一位程序员”以及“第一位女性程序员”之称的 Ada Lovelace......下面咱们先大体介绍一下收录中的这 54 位程序员吧。程序员
目录结构分为“大小王 Jokers”、“黑桃 Spades”、“红桃 Hearts”、“梅花 Clubs”、“方块 Diamonds”以及“亚裔程序员”和“女性程序员”板块。其中“亚裔程序员”和“女性程序员”摘自前面花色中,且有重复性,但不妨咱们从另外一个角度看待全球计算机发展史上亚洲程序员以及最重要却最容易被忽视的——女性程序员的贡献。github
借助基于密码证实的电子货币,无需信任第三方中间商,资金就能够安全,交易也不费吹灰之力。——Satoshi Nakamoto(中本聪)
花色 | 程序员 | 成就概要 |
---|---|---|
大王 | David Heinemeier Hansson | 创造了 Ruby on Rails |
小王 | Satoshi Nakamoto | 发明了区块链;设计了比特币 |
你能够说我在计算上很懒惰,但所以我创造了计算机。——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 | 建造了第一个二进制电脑;建造了第一个可编程数字计算机;设计了第一个高级程序设计语言 |
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 |
知识管理首先是要利用信息来提出正确的问题,这自己就是一个巨大且一般是没法识别的挑战。——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 | 发明了图灵机;开发出能够破解纳粹加密的计算机;发明了图灵测试 |
始终如一地编写安全代码要比指出不安全代码要困可贵多。——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 语言 |
整副扑克牌 UI 已经变成 CSS 布局,所以在本地能够自定义本身的卡牌。算法
本项目目前专一于纯前端技术的建设,主要的前端技术栈以下:typescript
React + Material UInpm
这里不作过多的技术探讨,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 里。
回顾整个开发过程,经过简单的 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/