大概去年这个时候，我开始在闲暇时间学习代码基础，7 个月后发现自己已经成为了一名专业的开发者——我没有计算机科学学位，没有参加过编程训练营，一开始对编程完全没有概念。

所以，你在阅读这篇文章的时候或许会想：这怎么可能？

好吧，我和你一样惊讶。

在这篇文章中，我会分享这 7 个月我是如何学习，并且找到了自己的第一份开发工作的。我也会分享一些对我学习有益的资源，以及一些我希望自己在之前学习时早一点采纳的建议。

如果你也是编程初学者，想要转行做 Web 开发，那么我希望这篇文章能提供给你一些帮助。

（如果你还没开始学习编程，但是想入门编程，或许我的这篇文章《我是怎么迈出学习编程的第一步的》会对你更有帮助，因为通过这些文章，你会了解如何迈出编程第一步。）

🐣 尽早分享自己的兴趣

当我认真考虑学习编程的时候，我做的第一件事就是说出来 。

我询问家人与朋友，他们是否认识愿意讨论自己工作的工程师，结果我认识了很多既聪明又富有创造力的人，他们给予了我很多真诚、实用、丰富且非常重要的观点与看法。

这一阶段的关键是尽可能去努力认识不同类型的工程师们。如果可以的话，与处于不同职业阶段且具有丰富爱好与特长的人交谈，这样可以帮助你揭开编程的神秘面纱，你将不再认为编程是个令人恐惧的大难题。

除此之外，最好尽早：

🙋 咨询他人

我问过工程师们这些最基础的问题：

• GitHub 是什么
• 你真的需要计算机科学学位吗
• 为什么人人都在讨论 React
• 你认为 10 年后会有什么类型的技术性工作

👋 参加交流会

如果你所在的城市有很多技术交流会——去吧！

在学习早期，这是非常好的实践机会，不仅会有前辈带你解决编程问题，而且你还能认识组织者、导师、在职开发者等等。

通过参加交流会，你也可以建立自己在该行业中的社交圈，了解到适合自己水平的工作机会。

下面是一些我最喜欢且对新手友好的交流会：

• Codebar：该组织每周举办一次交流会，在全世界拥有20多个分会。在这里，你可以与导师一起工作，专心致志写代码（如果你不能到场，也可以参加他们的线上交流会）
• Ada’s List：该组织每月在伦敦举办一次交流会，且有线上社区，女性可以在这里认识其他在技术行业工作的女性（不只是开发者）
• 24 Pull Requests：该组织致力于为开源项目做贡献，每年在伦敦举办一次交流会，还会介绍 GitHub 知识——对新手来说非常方便
• Node Girls：该组织每年举办几次交流会，地点不固定，是新手学习 Javascript 和 Node.js 的好地方

（译者注：在世界很多城市都有 freeCodeCamp 技术社区，学员们会时常组织交流会，分享技术知识，互相帮助学习编程，可以添加小助手微信 fcczhongguo，她会邀请你加入所在城市的技术社区。）

🏃‍♀️ 下一步：多多尝试

多年以来，我都认为学编程的第一件事就是决定自己想使用的语言。但是，不知道使用什么语言其实没关系，我甚至觉得这还是一种巨大的优势。

编程界有太多的语言与主题了，它们对于新手来说就像洪水猛兽。你可以天真无邪地尝试所有语言，不必过分深究（举个例子，学习 CSS 的时候，你不必知道 CSS 的完整历史），现在就要讲到头 7 个月中我最喜欢的建议了......

😈 学习表现差

当我开始学习的时候，特别害怕自己表现很差。但那时我就发现了一个最大的真相：没人关心你有多差 。

当然你会很差！你会非常糟糕！但因为你是新手，所以你有理由表现差。在初学编程时风险比较低的阶段，享受糟糕吧——因为这很有趣，也很自由。

👩‍💻 紧跟教程

当你想从新手进阶时，教程很有帮助，因为教程的形式不需要你自己去搞懂想要学习的内容和学习的方式（你只是在尝试学习它）。

以下是一些我最喜欢的教程：

• Codebar 上的所有内容（非常适合从头学习不同的语言）
• Rachel Andrew 的视频教程 （非常适合学习网格布局）
• NodeGirls 上的教程（一步步带你学会 Javascript 和 Node.js）

当谈到教程的时候，试着去理解你如何能学得最好，而不要仅仅因为它是最流行的或者是别人建议的方法就不知所措。

在这个阶段，你可能不太了解编程，但是你知道如何才能学得最好，所以相信自己的判断吧。

以下是一些对我来说行之有效的方法：

• freeCodeCamp 课程：通过一道道练习题目学习不同语言，当你需要从繁重的教程中休息一下，想要尝试一些更轻量级的东西时，这是很好的练习平台
• CSS Diner & Flexbox Froggy：这是两个有趣的游戏，对掌握 CSS 选择器和练习 Flexbox 布局大有裨益
• Codepen：这是一个可以练习编程的平台，你可以看到人们的项目和源代码
• Grasshopper：这是一个对初学者友好的移动应用程序，为你介绍 JavaScript 基础知识。
• Eloquent Javascript：配合使用该电子书与 freeCodeCamp 效果更佳，能让你充分深入理解 JavaScript。

👀 学习别人的代码

很快，你就会觉得是时候做一些更有意义的事情了。一个相当有趣的方法是当你看到一些很酷的东西时，尝试把代码写出来（你可以在这浏览炫酷的网站）。

当你浏览时：

🤔 搞清楚为什么

如果你在创建自己的第一个网站，在写第一行代码之前，记得要问自己：为什么。

你做这件事是为了：

• 填充作品集？
• 学习一门特定的语言？
• 尝试听说过的不同方法？

作为新手，你做网站的主要原因可能是学习，所以你的网站或应用程序只是学习的一部分，是学习的副产品，不是最终目标——记住这一点。

特别是对于自学者来说，知道这点区别能够帮助你提高学习效率，因为你很快就会知道：每个人都有自己的做事方式。举个例子，如果你想通过自建网站来学习 Flexbox，不要听别人的话使用 Bootstrap。

如果有人告诉你，实现这个目标有更快的方式，他们可能是对的，但是他们却可能不知道你真正的目标究竟是什么。

🗣 大声说出自己的目标

首先告诉自己，然后告诉别人，最后决定如何实现目标。这可能听起来十分容易，但在收集信息的过程中，很容易会忘记最初的目标。

💆 平静下来

自学最好的一点是你决定自己学什么，怎么学，对吗？好吧，还有一种好处就是你决定自己的提交期限。即使你逾期完成，也没人关心，所以，放轻松吧！

⚡️ 时刻充满斗志

这个学习过程是双重的：一方面，你需要花时间弄清楚代码中的技术细节；另一方面，你需要时不时地四处看看，看看其他人在做什么。

将这两种方法结合在一起，可以为你的学习提供一个整体的视角，并帮助你减轻陷入所有细节的压力。以下是我在最初的 7 个月里发现的一些有用的建议：

🎤 参加会议

• You Got This：这是一个在英国举办的会议，专门针对那些编程新手。我在成为工程师之前参加了这个会议，感觉非常舒适，并且参加那个会议之后我开始准备学习编程。
• New Adventures：这个会议在诺丁汉举办，内容偏轻技术，介绍技术的本质，以及科技如何在当今世界发挥作用。演讲者众多，话题广泛，十分鼓舞人心。

📚 多阅读

• freeCodeCamp 技术专栏 （当然了）
• Codebar （该平台会访谈自学成才的工程师们）
• A List Apart （发布一系列主题，从设计到编程到职业发展）
• Smashing Magazine （专题文章、书籍、新闻、工作......应有尽有）

👣 紧跟大牛

• Mandy Michael – 在 CodePen 上发布很多炫酷的内容
• Rachel Andrew – 发表很多鼓舞人心的实用谈话，你可以在网上找到
• Jen Simmons – 在 YouTube 有一个频道，内容丰富，视频讲解对于设计与开发的见解
• Saron Yitbarek – CodeNewbie 的创始人和执行总裁

基本上就是这样。回顾过去的一年，我意识到正是这些核心课程支撑着我从一个从未读过一行代码的文案工作者变成了一个全职开发者。

所以，如果你正在考虑转行，但又担心要做出这么大的改变，试着把它分解成更小的目标和挑战。

如果这个方法对一位刚开始自学编程时一头雾水的女士有效，那么对你也一定有效。你可以借鉴这些经验教训，根据你自己的学习风格进行调整，然后努力学习。

你写 CSS 代码吗？那么除非利用像 Sass 这样的预处理器，否则无法使用变量。

Sass 这样的预处理器将变量使用作为其主要的销售卖点，这也是我们值得一试的理由。

但是网站开发发展得很快，而我可以很高兴地告诉你们：  CSS 现在也支持变量了。

尽管预处理器支持更多功能，但是 CSS 变量也不错，而且 CSS 变量会推动网站发展。

在本指南中，我将向你展示如何在 CSS 中使用原生变量，如何通过使用它让你的工作更加轻松。

你将学习到什么？

我会首先向你介绍 CSS 变量的基础知识。这是了解 CSS 变量的第一步。

学习基础知识很酷，但更酷的是用基础知识构建实际应用。

因此，我会教你构建 3 个项目，进而介绍 CSS 变量及其易用性。现在我们来快速浏览这 3 个项目。

项目 1：使用 CSS 变量创建可变组件

目前，你可能使用 React，Angular 或 Vue 创建可变组件，但是 CSS 变量会简化创建过程。

使用 CSS 变量修改元素样式

在Codepen上查看项目

项目 2 ：使用 CSS 变量设置主题风格

你可能在其他地方看到过类似功能。我会教你使用 CSS 变量轻松创建全站主题风格。

使用 CSS 变量设置全站主题风格

在Codepen上查看项目

项目 3 ：创建 CSS 变量盒

这是最后一个项目。不要在意项目名字，我实在想不出更好的名字了。

盒子颜色会动态改变。

观察一下盒子颜色是如何动态改变的。调节输入值时，盒子容器会 3 维 旋转。

该项目展示了如何便捷地使用 JavaScript 更新 CSS 变量，并展示出一个很好的交互效果。

学习过程非常有趣！

花点时间在  Codepen  上享受乐趣吧。

注意：本文假设你已熟练掌握了 CSS，如果你不太解CSS，或者想学习做出炫酷的用户界面，我建议你学习我的高级CSS课程  (包括85课的付费课程)，这篇文章即摘自此课程。< /厚着脸皮做广告咯> ？

为什么变量如此重要？

如果你尚不了解预处理器中的变量或原生 CSS 变量，那么请看以下理由。

理由一：增强代码可读性

项目过程中，你可以很快了解变量是如何增强代码库的可读性与可维护性的。

**理由二：易于跨大文档修改

如果所有常量都保存在单个文件中，就不需要在几千行代码里一一修改变量了。使用变量之后，你只需改动一个地方即可实现。

理由三：快速定位拼写错误

在一行行的代码中寻找错误非常痛苦。如果只是一个简单的拼写错误，那就更烦人了。因为我们很难发现小错误。但合理使用变量便可以解决这个问题。

为此，可读性与可维护性才是制胜法宝。

而 CSS 原生变量就可以提高代码可读性与可维护性。

定义 CSS 变量

先谈你熟悉的内容吧：Javascript 中的变量。

声明简单 Javascript 变量：

var amAwesome;

为变量赋值：

amAwesome = "awesome string"

在 CSS 中，用双破折号引出 CSS 变量。

/*你能找到 CSS 变量吗？ */.block { color: #8cacea;--color: blue}

CSS 变量又名 “自定义属性”

CSS 变量的作用范围

注意：

在 Javascript 中，变量有作用范围。可能是全局变量或局部变量。

CSS 变量同样如此。

举例如下：

:root {  --main-color: red}

使用:root  选择器可定位 DOM 或文档树中最高级别的元素。

这种变量即为全局变量。

局部变量与全局变量

例一

假设你想创建一个 CSS 变量，该变量可定义主题网站的初始颜色。

如何操作呢？

1.使用:root选择器。

:root { }

2. 定义变量

:root { --primary-color: red}

CSS 变量前要加双破折号，如  --color。

使用 CSS 变量

一旦定义了变量并为其赋值，就可以继续在其他属性中使用它。

不过要注意一点。

如果你习惯使用预处理器，那么你肯定习惯通过引用变量名使用变量。例如:

$font-size: 20px.test {  font-size: $font-size}

但如果使用 CSS 原生变量，情况会稍有不同。需要使用var()函数指代变量。

还是利用上面的例子，以下是使用 CSS 原生变量的赋值方法：

:root {  --font-size: 20px}.test {  font-size: var(--font-size)}

两者大不相同。

记住：使用 var()函数。

一旦解决了这个问题，你就会越来越爱 CSS 变量！

另外要注意，不同于 Sass (或其他预处理器) 中的变量————你可以在很多地方使用这些变量，并做数学计算————但使用时要小心。大部分时候，CSS 变量用作属性值。

/*此写法错误*/.margin {--side: margin-top;var(--side): 20px;}

属性名无效，此写法语法错误。

你也无法直接使用数学运算功能。你需要 CSS  calc()函数做数学运算。我将在接下来的案例中讨论该函数。

/*此写法错误 */.margin {--space: 20px * 2;font-size:  var(--space);  //not 40px}

如果你一定要做数学计算，那么可以这样使用 calc() 函数：

.margin {--space: calc(20px * 2);font-size:  var(--space);  /*equals 40px*/}

值得一提的属性

以下问题值得一提。

1. 由于自定义属性是普通属性，所以我们可以在任意元素中声明自定义属性。

在段落标签、文档区域标签、侧边栏标签、根标签甚至伪元素中声明变量即可，它们与普通属性作用相同。

自定义属性与普通属性作用相同

2. CSS 属性具有继承性与级联性

参考下面的例子：

div {  --color: red;}div.test {  color: var(--color)}div.ew {  color: var(--color)}

与普通变量相同，--color  变量的值会继承父盒子的属性值。

3. CSS 变量可添加条件规则，如媒体类型

与其他属性相同，使用  @media  或其他条件规则可改变 CSS 变量的值。

举个例子，在大屏幕上，以下代码会改变 gutter 的值：

:root { --gutter: 10px }@media screen and (min-width: 768px) {    --gutter: 30px}

这对响应式设计大有裨益

4. CSS 变量用于 HTML 的样式属性。

设置行内样式：

<!--HTML--><html style="--color: red"><!--CSS-->;body {  color: var(--color)}

在行内设置变量值

注意：CSS 变量区分大小写。为了方便，我都是用的小写，你可以自行选择大小写。

/*变量大写与小写*/:root { --color: blue;--COLOR: red;}

解决重复声明

与其他变量相同，标准级联规则可解决重复声明。

举个例子：

/*定义变量*/:root { --color: blue; }div { --color: green; }#alert { --color: red; }/*u使用变量 */* { color: var(--color); }

多次声明以上变量后，元素的颜色如何变化呢？

<;p>What's my color?</p><div>and me?</div><div id='alert'>  What's my color too?  <p>color?</p></div>

你能猜出来吗？

第一段为  蓝色  。因为未给  p  元素设置变量，所以它会继承  :root  中定义的颜色。

:root { --color: blue; }

第一个  div  元素为  绿色  。这很显然。因为我们使用变量指定了div元素颜色为绿色。

div { --color: green; }

ID 为  alert  的  div  元素不为绿色，而为  红色。

#alert { --color: red; }

ID 中的变量有直接作用域，其颜色属性会覆盖掉原来的属性。  #alert  选择器作用范围更加明确。

最后，ID 为  alert  的  p  元素为  红色。

因为没有为段落元素声明变量，所以你可能会认为该段落会变为  蓝色，因为我们在  :root中定义了蓝色。

:root { --color: blue; }

与其他属性相同，CSS 变量具有继承性，子元素会继承父元素  #alert  的属性值。

#alert { --color: red; }

答案如图所示

解决循环依赖

循环依赖会发生在以下情境中：

1. 变量需要依赖其自身值。即，定义时就使用了var()  引用其值。

:root {  --m: var(--m)}body {  margin: var(--m)}

2. 两个或两个以上的变量互相引用时。

:root {  --one: calc(var(--two) + 10px);  --two: calc(var(--one) - 10px);}

不要在代码中创建这样的循环引用。

使用无效变量会怎样？

语法错误会被忽略，但是无效的  var()  会导致错误的初始值或继承到有问题的值。

举例如下：

:root { --color: 20px; }p { background-color: red; }p { background-color: var(--color); }

变量--color  带入了  var()  ， 但是属性值background-color: 20px在变量带入后是无效的，因为background-color不是继承属性，所以它的值会默认变成  初始  值，即transparent。

注意，如果你直接写  background-color: 20px  ，那么这个属性声明即是无效的。该元素会使用前面元素对颜色的声明，即红色。

当你这样写声明时，情况就不一样了。

小心创建单一标记

当设置类似下面的属性值时，20px  会被编译为单一标记。

font-size: 20px

简单点说，  20px  是一个整体。

当用 CSS 变量创建单一标记时，需要小心点。

举个例子，请看如下代码：

:root { --size: 20}div {  font-size: var(--size)px /*提醒*/}

你可能认为  font-size为20px, 但是你错了。

浏览器会把它解析为  20 px。

注意20与px之间的空格。

因此，如果你不得不创建独立标记，那么一定要用变量表示这个整体。举个例子，使用--size: 20px, 或者calc  函数，如calc(var(--size) * 1px)，这里的--size等于  20。

如果你没看懂，不要担心。我会在下个例子中仔细解释这一概念。

实战环节！

终于到了期待已久的部分了。

我会带你写几个有用的项目，来看看 CSS 变量的实际用法。

开始吧。

项目1: 使用CSS变量创建可变组件。

假设你需要创建两个不同的按钮。两个按钮基础样式相同，但只有一点小小的区别。

在这个例子中，两个按钮不同的属性为background-color和border-color。

怎么做呢？

一般来说，我们都会这么做。

创建一个基类，比如  .btn，然后加上不同的类，举例如下：

<button class="btn">Hello</button&gt;<button class="btn red">Hello</button>

.btn包含按钮的基本样式。举例如下：

.btn {  padding: 2rem 4rem;  border: 2px solid black;  background: transparent;  font-size: 0.6em;  border-radius: 2px;}

/*悬浮状态*/.btn:hover {  cursor: pointer;  background: black;  color: white;}

按钮样式如何变化呢？

/* 变化 */.btn.red {  border-color: red}.btn.red:hover {  background: red}

看到了吗，我们一直在复制代码。这样也好，但是使用 CSS 变量会更简洁。

第一步怎么做呢？

使用 CSS 变量替换变化的颜色值，不要忘记为变量设置默认值！

.btn {   padding: 2rem 4rem;   border: 2px solid var(--color, black);   background: transparent;   font-size: 0.6em;   border-radius: 2px; }

 /*悬浮状态*/  .btn:hover {  cursor: pointer;   background: var(--color, black);   color: white; }

设置  background: **var(--color, black)**  是为了让背景颜色变成  --color变量的值。但当变量不存在时，该元素就会自动使用替换值  **black**。

这就是设置默认属性值的方法，跟在 JavaScript 或其他的编程语言中如出一辙。

好戏才刚刚开始。

有了变量，就可以像下面这样设置新的变量值了：

.btn.red {   --color: red }

如果元素 class 使用了.red，浏览器会注意到不同的  --color  值，进而改变按钮的外观。

使用变量创建可变组件可以节约很多时间。

对比两段代码：

使用 CSS 变量 VS 不使用 CSS 变量

如果有更多的变量，还能剩下很多敲代码的时间。

看到区别了吗？

项目二: 使用 CSS 变量定制网站主题

我敢说，你之前肯定浏览过类似网站。主题网站会让用户觉得自己可以定制主题，就好像自己在主管该网站一样。

以下便是我们要使用的例子。

使用 CSS 变量会让创建过程变得多么简单呢？

这个例子非常重要。在这个例子中，我会介绍如何使用 Javascript 来更新 CSS 变量。

我们实际要做的

CSS 变量的魅力在于其互动性。一旦你修改了某个 CSS 变量，其对应的属性都会发生变化。

下图从概念上解释了整个例子的操作过程。

流程图

我们需要使用 JavaScript 监听点击事件。

在这个简单的例子中，整个页面的背景和文本颜色全部基于 CSS 变量。

当点击左上方的任意一个按钮时， CSS 变量的值即会改变。因此，页面的背景颜色也会变化。

该项目的原理就是这样。

除此之外，我们怎么改变 CSS 变量的值呢？

行内设置变量

即便把 CSS 变量设为行内样式，它的值也会改变。和 Javascript 一起，我们可以控制整个文档，并使用 CSS 变量设置行内样式。

明白了吗？

废话不多说，开始操作吧。

初始代码

初始代码如下：

<div class="theme">  <button value="dark">dark</button>  <button value="calm">calm</button>  <button value="light">light</button></div><article>...</article>

代码中有三个按钮元素，它们都继承自类名为  .theme  的父元素。为了简化我没有写article元素，article元素包含页面的主要内容。

页面样式

为了成功实现该项目，首先要改变页面风格。方法很简单。

没必要为每种风格都设置background-color和color属性, 只需要使用变量来设置。

如下所示：

body {  background-color: var(--bg, white);  color: var(--bg-text, black)}

原因很明显。按下按钮时，两个 CSS 变量的值都会改变。

如此一来，整个页面的风格都会发生变化。

现在轮到 JavaScript 了。

使用 JavaScript

以下是项目需要用到的 JavaScript 代码：

const root = document.documentElement const themeBtns = document.querySelectorAll('.theme > button')themeBtns.forEach((btn) => {  btn.addEventListener('click', handleThemeUpdate)})function handleThemeUpdate(e) {  switch(e.target.value) {    case 'dark':       root.style.setProperty('--bg', 'black')      root.style.setProperty('--bg-text', 'white')      break    case 'calm':        root.style.setProperty('--bg', '#B3E5FC')       root.style.setProperty('--bg-text', '#37474F')      break    case 'light':      root.style.setProperty('--bg', 'white')      root.style.setProperty('--bg-text', 'black')      break  }}

别害怕，代码比你想的简单的多。

首先，获取根元素，const root = document.documentElement

这里的根元素是HTML。一会你就会理解这为什么重要了，如果你很好奇，那么就先认为这是为了设置 CSS 变量使用的。

除此之外，还要获取按钮元素，const themeBtns = document.querySelectorAll('.theme > button)

querySelectorAll方法会获取伪数组。之后遍历该伪数组，然后添加对应的点击事件。

代码如下：

themeBtns.forEach((btn) => {  btn.addEventListener('click', handleThemeUpdate)})

handleThemeUpdate函数在哪里呢？请继续往下看。

点击按钮会触发对应的handleThemeUpdate函数。需要为每一个按钮的点击事件配置对应的操作。

基于此，这里用了一个 switch 的operator，不同按钮的点击事件不同。

再看一眼前面 JavaScript 的代码块吧，现在你应该理解的更好了。

项目三: 创建 CSS 变量盒?

如果你之前没有看到过效果图，那么我再贴一次图片：

盒子的颜色会动态改变，盒子容器会根据输入值 3 维旋转。

在Codepen上尝试。

这是使用 CSS 变量和 JavaScript 一同创造出的一个既有交互性有很美妙的例子。

来看看创建过程。

代码片段

需要以下元素：

1. 用来输入范围值的输入框
2. 包含指令的容器
3. 包含其他盒子的盒子容器，每一个子盒子中都包含一个输入框

代码结构非常简单。

如下所示：

<main class="booth">  <aside class="slider">    <label>Move this ? </label>    <input class="booth-slider" type="range" min="-50" max="50" value="-50" step="5"/>  </aside>    <section class="color-boxes">    <div class="color-box" id="1"><input value="red"/></div>    <div class="color-box" id="2"><input/></div>    <div class="color-box" id="3"><input/></div>    <div class="color-box" id="4"><input/&gt;</div&gt;    <div class="color-box" id="5"><input/></div>    <div class="color-box" id="6">;<input/>&lt;/div>  </section>  <footer class="instructions">    ?? Move the slider<br/>    ?? Write any color in the red boxes   </footer></main>  

注意以下几点：

1. 输入框中输入值的取值范围为-50到50  ，步长为5。除此之外，默认输入值为  -50。
2. 如果你不确定输入框的原理，那么请先到  w3schools了解相关概念。
3. 注意观察类名为  .color-boxes  的盒子容器是如何包含其他类名为  .color-box的容器的，子盒子又是如何包含输入框的。
4. 值得一提的是，第一个输入框的颜色默认为红色。

理解了代码结构后，继续添加如下样式：

1. 将类名为.slider和.instructions的元素移出文档流，进行绝对定位。
2. 为body元素添加日出的背景颜色，再用一朵花的背景图做装饰，放在页面左下角。
3. 居中对齐color-boxes元素 。
4. 为color-boxes元素设置样式。

具体代码如下：

/* Slider */.slider,.instructions {  position: absolute;  background: rgba(0,0,0,0.4);  padding: 1rem 2rem;  border-radius: 5px}.slider {  right: 10px;  top: 10px;}.slider > * {  display: block;}/* Instructions */.instructions {  text-align: center;  bottom: 0;  background: initial;  color: black;}

这段代码非常简单。我希望你能读完并理解。如果你还是不理解，请在下面留言或者在推特上@我。

为body元素设置样式略微复杂。幸运的是，你熟知 CSS 的用法。

既然想要为页面设置背景颜色并添加背景图案，也许最好使用简化的background属性设置多种样式。

代码如下：

body {  margin: 0;  color: rgba(255,255,255,0.9);  background: url('http://bit.ly/2FiPrRA') 0 100%/340px no-repeat, var(--primary-color);  font-family: 'Shadows Into Light Two', cursive;}

url会链接到太阳花图片。

0 100%设置了背景图片的位置。

下面的文章介绍了在 CSS 中，如何对背景定位：

来源:  CSS 高级编程

来源:  CSS 高级编程

分隔号后面的340px代表background-size。如果你把数值设置的更小，那么图片尺寸也会变小。

你可能会想no-repeat是什么意思。该属性可以防止背景图片平铺。

最后，逗号后面的属性值都是备选值。这里把background-color设置为var(primary-color)。

可以看出，我们使用了变量。

这意味着在声明之前，必须先定义变量：

:root {  --primary-color: rgba(241,196,15 ,1)}

这里的颜色值就是日出时的黄颜色。这没什么大不了的，接下来会设置更多的变量。

接下来，把类名为color-boxes的容器居中设置。

main.booth {  min-height: 100vh;    display: flex;  justify-content: center;  align-items: center;}

主要容器使用了弹性布局，将下一级的子元素置于页面中央。因此，类名为color-box的容器都会居中显示。

接下来，为子元素和其下一级的子元素设置样式。

首先是子元素：

.color-box {  padding: 1rem 3.5rem;  margin-bottom: 0.5rem;  border: 1px solid rgba(255,255,255,0.2);  border-radius: 0.3rem;  box-shadow: 10px 10px 30px rgba(0,0,0,0.4); }

设置完后，子元素会拥有一个美丽的阴影，这会让最后的效果更加酷炫。

这还不够，我们要设置类名为  container-boxes  的盒子属性。

/* Color Boxes */.color-boxes {  background: var(--secondary-color);  box-shadow: 10px 10px 30px rgba(0,0,0,0.4);  border-radius: 0.3rem;    transform: perspective(500px) rotateY( calc(var(--slider) * 1deg));  transition: transform 0.3s}

好多了！现在来细化一下。

下面的代码非常简单：

.color-boxes {   background: var(--secondary-color);   box-shadow: 10px 10px 30px rgba(0,0,0,0.4);   border-radius: 0.3rem;}

以上代码用了一个新变量。因此需要在 root 选择器中加上定义。

:root {  --primary-color: rgba(241,196,15 ,1);  --secondary-color: red;}

secondary-color 变量值为红色。因此容器背景为红色。

但你可能对如下代码感到困惑：

/* Color Boxes */.color-boxes {  transform: perspective(500px) rotateY( calc(var(--slider) * 1deg));  transition: transform 0.3s}

可以暂时简化上面的 transform 属性。

举例如下

transform: perspective(500px) rotateY( 30deg);

transform 合并了两个不同的函数。一是透视，二是以 Y 轴为标准的旋转角度。

如何处理  perspective和  rotateY函数？

透视函数可以使元素在 3D 空间内变形。它会激活三维空间，使元素增加一个 z 轴。

在  codrops  上阅读更多关于透视函数的内容。

rotateY函数用途为何呢？

激活三维空间后，元素就有了 x ，y ，z 三个轴。rotateY函数会把元素以 Y 轴为中心旋转。

codrops  上这幅图可以帮助我们直观理解这一点。

Codrops

回到前面的话题。

移动滑块的时候，你知道是哪个函数影响了.container-box的旋转效果吗？

是旋转函数。因此盒子绕 Y 轴旋转。

由于该值可以通过 JavaScript 传给函数, 所以便用变量来表示这个值。

为什么用这个变量乘以 1deg 呢？

按通常经验来说，也为了自由定义变量，当创建单个标记时，建议创建变量是不带单位。

这样便可以在任何需要使用单位的时候通过  calc  函数达成目标。

这样就可以在需要的时候任意使用这些值，既可以转化为deg，也可以转化为相对于用户窗口视图  vw  的比例。

在这个例子中，我们把一个数字乘以一个 1deg的值，得到了一个有单位的数值。

由于 CSS 不理解数学运算，所以需要把数学运算转移到calc函数中，这样才能得到 CSS 属性需要的对应数值。

现在来到下一步。在 JavaScript 中可以任意改变变量值。

还剩下一点 CSS 代码：

/* Handle colors for each color box */.color-box:nth-child(1) {  background: var(--bg-1)}.color-box:nth-child(2) {  background: var(--bg-2)}.color-box:nth-child(3) {  background: var(--bg-3)}.color-box:nth-child(4) {  background: var(--bg-4)}.color-box:nth-child(5) {  background: var(--bg-5)}.color-box:nth-child(6) {  background: var(--bg-6)}

nth-child 选择器用来选择子元素。

我们将更新每个框的背景色，背景色必须由变量表示，这样便可以通过 JavaScript 更新。 There’s a bit of foresight needed here. We know we will be updating the background color of each box. We also know that this background color has to be represented by a variable so it is accessible via JavaScript. Right?

我们这样设置：

.color-box:nth-child(1) {  background: var(--bg-1)}

但如果变量不存在，怎么办呢？

需要默认值。

如下所示：

.color-box:nth-child(1) {  background: var(--bg-1, red)}

在这个例子中，我选择不提供任何默认值。

如果这个变量的属性值不合法，那么这个属性值就会用其初始值。

因此，如果--bg-1元素无效或不合法，那么背景将会自动变为初始值，即透明色。

没有明确指定时，初始值就是这个属性的默认值。例如，如果你不设置元素的background-color, 那么元素会默认为  transparent。

初始值也是一种默认值。

开始写 Javascript

Javascript 部分内容不多。

首次处理滑块。

五行代码即可。

const root = document.documentElementconst range = document.querySelector('.booth-slider')//as slider range's value changes, do something range.addEventListener('input', handleSlider)function handleSlider (e) {  let value = e.target.value   root.style.setProperty('--slider', value)}

首先，获取滑块元素，  const range = document.querySelector('.booth-slider')

增加事件以处理滑块值变化，  range.addEventListener('input', handleSlider)

回调事件  handleSlider

function handleSlider (e) {  let value = e.target.value   root.style.setProperty('--slider', value)}

root.style.setProperty('--slider', value)  指把root元素的 style 属性设置为对应值。

处理颜色变化

这跟处理滑块变化一样简单。

代码如下：

const inputs = document.querySelectorAll('.color-box > input')

//as the value in the input changes, do something.inputs.forEach(input => {  input.addEventListener('input', handleInputChange)})function handleInputChange (e) {  let value = e.target.value  let inputId = e.target.parentNode.id   let inputBg = `--bg-${inputId}`   root.style.setProperty(inputBg, value)}

获取每一个输入值，const inputs = document.querySelectorAll('.color-box > input')

为每一个输入框增加事件：

inputs.forEach(input => {   input.addEventListener('input', handleInputChange)})

写handleInputChange函数：

function handleInputChange (e) {  let value = e.target.value  let inputId = e.target.parentNode.id   let inputBg = `--bg-${inputId}`   root.style.setProperty(inputBg, value)}

完成！

我怎么能忘记这些呢？

当我发现自己在任何地方都没有提到浏览器的兼容性时，我已经完成并编辑了本文的初稿。所以，现在我来修补这个烂摊子吧。

浏览器对 CSS 变量（又称自定义属性）支持良好。几乎所有现代浏览器都能支持（在撰写本文时，这一比例已超过了 87％）。

caniuse

那么，你现在会在项目中使用 CSS 变量吗？ 我会说是的！不过，请务必检查一下适用的比例。

往好的方面来看，你可以使用类似  Myth  的预处理器。它可以把你现在使用的 CSS 变成未来可期的 CSS，非常酷！

如果你曾经使用过  postCSS, 那也是一个现在使用未来 CSS 的不错的方法。这里有一些例子：postCSS module for CSS variables。

我还有问题要问呢！

电子书  可离线阅读，还能获得私人邀请，这样你可以问我任何问题。

很公平不是吗？

下次再见！

原文：Everything you need to know about CSS Variables，作者：Emmanuel Ohans

我刚开始学习深度学习时，花了两周时间去研究这一领域。我选择了工具，比较了云服务，并研究了在线课程。回想起来，我希望自己从第一天起就能构建起神经网络。而这也正是我写作本文的目的。看懂本文不需要太多的基础知识，只需要了解  Python、命令行  和  Jupyter notebook  就可以了。

深度学习是机器学习的一个分支。实践证明，这是一种对  原始数据（如图像或声音等数据）构建模型的有效方法。

假设你要对猫和狗的图像进行分类。如果不使用特定编程语言，则需要首先检测图像边缘，构建模型，识别鼻子、尾巴、爪子，然后神经网络才能实现最终分类。

另一方面，有更好的机器学习算法可以处理结构化数据。例如，如果你有一张 excel 工作表，上面有序记录了消费者订单，而你想预测他们的下一订单，那么就可以使用  传统方法  和  简单的机器学习算法。

核心逻辑

想象有这么一台机器，它的齿轮 = ✱ 随意啮合重叠在一起且相互影响。这时，机器突然停止了工作，因为它的齿轮是随机调整的，所以需要检查每一个齿轮从而使机器恢复正常工作。

这时工程师会来检查所有的齿轮，并找出其中的错误。他会从最后一层齿轮开始检查，找到错误后便会逐层回溯。这样，他就可以计算出每一层齿轮造成的误差。此过程即为  单向传播。

工程师会根据错误逐层修正齿轮，然后运行机器进行检测。他不停地重复这一过程，直到机器正常运转。

神经网络也以相同的方式处理数据。它知道输入和输出，并逐层调整齿轮以找到两者之间的关系。给定输入后，它便会调整齿轮以预测输出，然后比较预测值与实际值。

为了使误差（预测值与实际值之间的差异）最小，神经网络会调整齿轮，使得两者之前的差值尽可能的最小。

找到最佳的方式，使误差最小化的方法叫做  梯度下降  。计算误差的函数叫做  误差函数函数/代价函数  。

浅层神经网络

许多人认为人工神经网络模仿了大脑皮层的结构，但其实不然，因为我们尚不了解自己的大脑，所以不能妄下定论。不过大脑皮层确实是神经网络发明者弗兰克·罗森布拉特的灵感来源。

去  the neural network simulator  玩上一两个小时吧，这样你便会有更加直观的感受。

我们将从实现一个简单的神经网络开始，以了解 TFlearn 中的语法。首先我们要使用  逻辑或 运算符  解决最经典的 101 问题。尽管本案例并不是最适宜使用神经网络的例子，但是通过这个案例，我们能够了解神经网络的实现方式。

所有深度学习程序都遵循相同的核心逻辑：

• 首先调包，然后导入并清洗数据。所有输入（图像、音频、感知数据等）都会被  翻译成二进制数据。这些长长的数字列表即为神经网络的输入。
• 自己设计神经网络，如选择神经网络中要包含的层的类型和数量。
• 神经网络开始学习。它已知输入和输出值，会搜索它们之间的相关性。
• 通过训练，得到预测值。

以下是代码部分：

# 1. Import library of functions
import tflearn

2. Logical OR operator / the data
OR = [[0., 0.], [0., 1.], [1., 0.], [1., 1.]]
Y_truth = [[0.], [1.], [1.], [1.]]
3. Building our neural network/layers of functions
neural_net = tflearn.input_data(shape=[None, 2])
neural_net = tflearn.fully_connected(neural_net, 1, activation='sigmoid')
neural_net = tflearn.regression(neural_net, optimizer='sgd', learning_rate=2, loss='mean_square')
4. Train the neural network / Epochs
model = tflearn.DNN(neural_net)
model.fit(OR, Y_truth, n_epoch=2000, snapshot_epoch=False)
5. Testing final prediction

输出

Training Step: 2000  | total loss: 0.00072 | time: 0.002s
| SGD | epoch: 2000 | loss: 0.00072 -- iter: 4/4
Testing OR operator
0 or 0: [[ 0.04013482]]
0 or 1: [[ 0.97487926]]
1 or 0: [[ 0.97542077]]
1 or 1: [[ 0.99997282]]

第 1 行:  以＃开头的行是注释，用于解释代码。

第 2 行:  导入 TFlearn 包。这样我们就可以使用谷歌 Tensorflow 中的函数了。

第 5 - 6 行:  这段代码表示以列表存储的数据，数字末尾的点号将该数字映射为浮点数。它存储十进制的数字，从而使计算更加精确。

第 9 行：  这段代码用于初始化神经网络，并指定输入数据的维度/形状。因为 “或” 运算需要两个数据，所以数据形状为 2。[文档]

第 10 行：  这段代码表示输出层。激活函数将输出映射到某个区间。在这个例子中，我们使用 Sigmoid 函数来把值映射到 0-1。 [文档]

第 11 行：  该函数应用回归模型。优化器  会选择最佳算法以最小化损失函数。学习率决定了神经网络的修正速度，损失变量决定了如何计算误差。[文档  ]

第 14 行：选择要使用的神经网络，指定训练记录的存储位置。[文档  ]

第 15 行：训练神经网络/模型。选择输入值（“或”运算）和真标签（Y \ _真）。Epochs 决定了神经网络运行所有数据的次数。如果设置 snapshot = True，那么它将在每次训练后都验证模型。 [文档  ]

第 18-20 行：  用训练出的模型做预测。在此例中，它返回返回值为真/1 的概率。 [文档  ]

输出标签：  第一个结果表示， [0.] & [0.] 的组合为真的概率为 4％，以此类推。训练步长表明你的训练次数。由于数据与批量大小吻合，因此数据训练一次即可完成。如果数据对于内存而言太大，则需先分割数据再进行训练。损失函数会衡量每次训练的错误总和。SGD 表示随机梯度下降和最小化损失函数的方法。Iter 会显示当前数据索引与输入项总数。

你几乎可以在任意 TFlearn 神经网络中都能发现以上逻辑和语法。学习代码最好的方法就是修改它并不断试错。

Tensorboard 可以对实验进行可视化操作，并直观观察到每个参数将如何改变训练结果。 你可以查看之前的视频，以了解如何使用 Tensorboard。损失曲线会展示每个训练步骤的错误量。

建议你先玩几个小时以适应运行环境和 TFlearn 参数。而下面我会给出一些学习建议。

实验环节

• 增加训练次数
• 尝试添加/更改函数的参数
• 原代码：E.g. g = tflearn.fully_connected(g, 1, activation='sigmoid')
• 修改后代码： tflearn.fully_connected(g, 1, activation='sigmoid',  bias=False)
• 输入整数
• 更改输入层形状
• 更改输出层的激活函数
• 更改梯度下降算法
• 更改神经网络计算损失的方式
• 尝试 “与” “非” 操作
• 尝试 “异或” 操作，比如把输出改为 [0.]，这样的话需要多加一层
• 提高学习率
• 找方法将每次的学习时长提高到 0.1 秒以上

开始

深度学习中最常见的堆栈是将 Python 与 Tensorflow 结合在一起。TFlearn 是一个运行在 Tensorflow 之上的高级框架。另一个常见的框架是 Keras。它的功能更加强大，但是我发现 TFlearn 的语法更加简洁，也更易于理解，不过它们都是运行在 Tensorflow上的高级框架。

你可以在计算机的 CPU 上运行简单的神经网络。 但是大多数实验都需要几个小时甚至几周才能完成。大多数人都会选择云服务使用现代的 GPU 来搭建神经网络。

针对 GPU 云服务器的最简单的解决方案是[FloydHub]  17。 如果你会使用命令行，那么不用5分钟即可部署好 FloydHub。参考FloydHub文档

安装  floyd-cli  命令行工具。如果你在操作中遇到困难，可前往 FloydHub 官网咨询。

现在使用 TFlearn，Jupyter Notebook 和 Tensorboard 在 FloydHub 上训练第一个神经网络。安装并登录 FloydHub 后，在终端输入以下命令，下载所需文件。

git clone https://github.com/emilwallner/Deep-Learning-101.git

打开文件夹，初始化 FloydHub。

cd Deep-Learning-101
floyd init 101

FloydHub 网页面板会在浏览器中自动打开，并提示创建一个名为  101  的新项目。完成后，返回终端并输入相同的  init  命令。

floyd init 101

部署好云主机后，在命令行中：

输入  --data emilwallner/datasets/cifar-10/1:data  在 FloydHub 上上传一个公共数据集 (我已经上传完成了) 到  data  文件夹下，你可以在  FloydHub  上查看该数据集（及许多其他的公共数据集）

输入  --gpu  使用 GPU 云服务器

输入  --tensorboard  启用 Tensorboard

输入  --mode jupyter  在Jupyter Notebook 中运行程序

代码段如下：

floyd run --data emilwallner/datasets/cifar-10/1:data --gpu --tensorboard --mode jupyter

在浏览器中启动 Jupyter，点击 start-here.ipnyb 文件。 Start-here.ipnyb 文件是一个简单的神经网络，通过它你可以学习 TFlearn 的语法。它会学习 “或” 运算的逻辑，我会在稍后详细说明。

在菜单中，点击  Kernel > Restart & Run All。 如果你看到有消息弹出，说明配置成功，即可继续工作。然后转到 FloydHub 项目，找到 Tensorboard 的链接。

深层神经网络

深度学习指具有多个隐藏层的神经网络。目前已经有很多关于卷积神经网络的详细教程：教程一、教程二、教程三。然而，我们将重点介绍适用于大多数神经网络的相关概念。

如果你想训练神经网络对未训练的数据做出预测，那么就需要把握好学习与遗忘的平衡。你希望神经网络分清信号与噪声，但是也要忘记那些在训练数据中学习到的信号。

如果神经网络学习不足，则会欠拟合。如果过度训练，则会过度拟合。

正则化  指通过忘记某些信号来减少过拟合。（待定）

To get an intuition for these concepts, we’ll be working with the  CIFAR-10 dataset. It’s a dataset with 60k images in ten different categories, such as cars, trucks, and birds. The goal is to predict which of the ten categories a new image belongs to.

为了对这些概念有一个直观的了解，我们使用CIFAR-10数据集。该数据集包含包含 10 个类别的 6 万张图像，如汽车，卡车和鸟类。我们的目的是预测图像的类别。

通常，我们首先抓取数据、清洗数据、过滤图像数据。但是为了缩小范围，我们仅关注神经网络。你可以在 Jupyter notebook 运行所有示例刚刚下载过了。

输入层获取已映射为数字的图像，输出层将图像归为 10 类。隐藏层混合了卷积层、池化层、全连接层。

我们来比较一下单层神经网络与三层神经网络。 每个神经网络都包括卷积层、池化层、全连接层。

此案例涵盖了所有的实验。两个实验分别名为  experiment-0-few-layers.ipynb  和  experiment-0-三层sets.ipynb。

# Convolutional network building
network = input_data(shape=[None, 32, 32, 3],
                     data_preprocessing=img_prep,
                     data_augmentation=img_aug)
One set of layers

如果你运行这些代码（点击菜单栏  Kernel > Restart & Run All  ），然后看一下 Tensorboard 中的训练记录，你会发现三层神经网络的准确率比单层神经网络的准确率高 15%。因为单层神经网络学习不够会导致欠拟合。

你可以在之前下载的文件夹中运行代码。

看一下训练准确度和验证准确度。在深度学习中，把数据集一分为二是最佳的做法。一部分用于训练神经网络，另一个用于验证神经网络。通过这种方式，你可以判断神经网络对新数据的预测能力或泛化能力。

从 Tensorboard 中可以看出，训练数据的准确性高于验证数据集的准确性。该神经网络包含了背景噪声和一些阻碍项。

为解决过拟合问题，可以添加惩罚项并引入噪音。正则化是应对过拟合的常用手段，一般采用丢弃法和添加惩罚项。

丢弃正则化方法可以与类比于我们的民主制。他们没有强大的神经元来决定最终输出，而是分散了权重。神经网络被迫学习不同的模型，并结合不同的模型做出最终预测。

以下代码表示加入了丢弃层后的神经网络例子：

network = input_data(shape=[None, 32, 32, 3],
                        data_preprocessing=img_prep,
                        data_augmentation=img_aug)
network = conv_2d(network, 32, 3, activation='relu')
network = max_pool_2d(network, 2)
network = conv_2d(network, 64, 3, activation='relu')
network = conv_2d(network, 64, 3, activation='relu')
network = max_pool_2d(network, 2)
network = fully_connected(network, 512, activation='relu')
#The dropout layer
network = dropout(network, 0.5)
network = fully_connected(network, 10, activation='softmax')
network = regression(network, optimizer='adam',
                        loss='categorical_crossentropy',
                        learning_rate=0.001)

可以发现，两者之间唯一的不同就是一个有丢弃层，一个没有丢弃层。

在神经网络的每一层中，神经元彼此依赖。有的神经元权重大，有的神经元权重小。丢弃层随机丢弃一部分神经元。这样，每个神经元对最终结果做出的贡献各不相同。

第二种防止过度拟合的方法是在每一层上应用 L1 或 L2 正则化函数。

假设你要描述一匹马。如果描述得太详细，那么会排除调很多匹马。相反，如果描述的过于泛化，那么可能会囊括了其他动物的特征。L1 和 L2 正则化有助于神经网络区分不同特征。

network = input_data(shape=[None, 32, 32, 3],
                        data_preprocessing=img_prep,
                        data_augmentation=img_aug)
network = conv_2d(network, 32, 3, activation='relu', regularizer='L2')
network = max_pool_2d(network, 2)
network = conv_2d(network, 64, 3, activation='relu', regularizer='L2')
network = conv_2d(network, 64, 3, activation='relu', regularizer='L2')
network = max_pool_2d(network, 2)
network = fully_connected(network, 512, activation='relu', regularizer='L2')
network = fully_connected(network, 10, activation='softmax')
network = regression(network, optimizer='adam',
                        loss='categorical_crossentropy',
                        learning_rate=0.001)

如果我们比较之前的实验的话，会发现结果类似。

添加正则化函数的神经网络优于没有正则化函数的神经网络。

L2 正则化惩罚过于复杂的函数。它测试每个函数对最终输出有多大贡献，并惩罚那些系数较大的函数。

另一个核心参数是批大小，即每个训练步骤的数据量。下面是批大小的比较。

#Large batch size
model.fit(X, Y, n_epoch=50, shuffle=True, validation_set=(X_test, Y_test), show_metric=True, batch_size=2000, run_id='cifar_large_batch_size')

正如我们在结果中看到的那样，批大小越大，迭代次数越少，下降方向越准。相反，批大小越小，随机性越大，迭代次数越多。尽管批大小越大迭代次数越少，但是却需要更多的内存和时间来进行计算。

最终实验分别比较了低学习率、中等学习率、高学习率。

#Large learning rate
network = regression(network, optimizer='adam',
                        loss='categorical_crossentropy',
                        learning_rate=0.01)

由于对神经网络的影响较大，学习率通常被认为是最重要的参数之一。它规定了如何在每一步上调整预测的变化。如果学习率太高或太低，则可能会无法收敛。

没有固定的设计神经网络的方法。我们必须通过实验来验证自己的模型。学习其他人的项目，添加层并调整超参数。如果你可以实现大批量计算能力，那么就可以创建程序来设计和调整超参数。

工作完成后，你还需要点击 FloydHub 面板中的 “取消”。

下一步

在 TFlearn 的官方演示仓库中，你可以了解到一些效果最好的卷积神经网络模型。你可以尝试复制代码，并改善对 CIFAR-10 数据集的验证。迄今为止，最好的验证结果是 96.53％（格雷厄姆，2014年）。

你还要学习 Python 语法和命令行。这会减少不必要的认知负担，这样你就可以专注学习深度学习的相关概念。先学习 Codecademy 的Python课程，然后学习命令行。如果你全天学习的话，三天以内就能学完。

致谢

感谢 Ignacio Tonoli、 Per Harald Borgen、 Jean-Luc Wingert、 Sai Soundararaj 和 Charlie Harrington 阅读本文初稿。感谢  TFlearn community  提供文档和代码样本。

原文：My First Weekend of Deep Learning

我的第一份工作是打陌生电话的销售员，几乎赚不到什么钱，工作起来感觉也非常痛苦。

几次推销失败之后，我辞职找到了一份在餐馆准备蔬菜的工作——我可从来没想到自己会以这种方式跟植物打交道。

我需要新的方向，也准备好了要接受新事物。

而帮助我开启崭新的职业发展之旅的，是良好的职业操守、强烈的学习意愿和一些关键资源。也正是三点带领我参加了一场编程比赛，走出自己的舒适区。

在餐厅工作时，我就听说过那些自学编程并成功转型程序员的故事。因为我愿意尝试新事物，所以下班后，我就开始在 freeCodeCamp 上学习在线课程。

后来我慢慢开始全天候学习，辞职后跟着 freeCodeCamp 上的课程，把学习全栈 JavaScript 当作我的新工作。

我花了一年半的时间学习编程，当然这也给我带来了回报——纽约的一家年销售额 20 多亿美元的时装公司给了我一个初级开发者的 offer，我在那里工作了挺长时间。

对我来说，学习是重中之重。即使已经入职，下班后我也会继续学习，我会重点研究与我的工作职责相关的最佳实践，比如说使用 Node.js + Selenium 编写自动化测试。

我每周会花 10 到 15 个小时学习 Selenium，这能帮助我更快地完成自己的工作，也让我有更多时间向同事们学习。我尽一切可能利用工作时间——在电梯里、办公室里——与同事交流经验，了解他们在做什么，工作职责是什么。

他们的工作内容可能跟我的不同，没关系，我想通过与工程主管和同业务部门的同事交流，更好地了解公司结构，了解其他人在自己的职位上取得了怎样的进步，看看是否可以有一些我能解决的难题。

工作第三周左右，在与我的高级工程总监交谈时，我注意到他办公桌上有很多奖牌。他告诉我，这是他过去在公司年度黑客马拉松比赛中获得的奖励。

我说：“哇，你赢了很多奖啊。”

他回答说：“谢谢。你应该去参加几个月后的黑客马拉松。”

我当时对编程还比较陌生，从来没有参加过黑客马拉松，所以考虑了一天之后，我又去找了总监。

我说：“嘿，我见过一些其他在黑客马拉松获奖的人，但是没有人能比得上你。而且，你得了很多次冠军，你是如何做到的呢？”

他告诉我：“我专注于实用项目，例如，在一次比赛中我设计了一个功能，让我们的客户在网站上订货然后到店自提。评委们觉得这个功能非常实用，而且可以极大提高我们公司的收益。”

我问他如何想到设计出这样一个功能，他说自己在任职期间，经常会去主动了解支持公司电子商务的多种子系统。

他说：“了解整个系统能帮助你找到突破点。事实上，正是由于我对公司平台有了多方位的了解，我才能与众不同，而且升到了这个职位。”

构思项目

我意识到黑客马拉松将是对我的能力的最终考验：我能不能通过勤奋工作、借鉴学习、高强度学习编程来通往职业发展的下一阶段呢？

多年以来，我一直觉得自己在浪费自己的潜力，现在我终于找到了一种方法来证明自己的价值。我并不只是想要证明自己的实力，而是真的想做出对公司有实际作用的项目。

我的时间不充裕，而且与其他高水平工程师相比，我的技术能力也比较薄弱。

即使我觉得自己落后于他人，但我却有自己的一套思考秘诀，这是我从尼尔·拉克拉姆的销售策略书《SPIN Selling》中学到的：通过四个步骤找到大企业内部的问题。

步骤 1：了解运作机制

因为要学习电子商务的内部运作机制，所以我开始与策划部门的员工交谈。我们两个部门之间只隔了一个餐厅，他们负责确定进货量和出售价格。

于是我会偶尔离开办公桌去问他们问题，例如如何决定购买的库存量，如何设置价格，零售业和电子商务是否有不同的定价规则等。通过这些问题，我了解了策划部门如何引入新的服装线，也了解了他们如何计算出售价格。

步骤 2：通过提问来发现问题

在了解了策划的工作原理之后，我开始寻找购买过程中可能出现的问题。当他们设定了库存数量，公司购买时会出错吗？设置价格时会出错吗？

我试图找到这其中自己能够解决的错误。

步骤 3：继续提问，探索究竟

问了几天问题之后，我了解了定价方面的问题，有时候网站上的价格确实会设置错误。这个问题是如何产生的，又意味着什么呢？

我询问了错误发生的频率以及它们可能导致的问题。

步骤 4：探索解决方案的价值

如果自动脚本能够发现所有定价不正确的商品，那将有多大帮助呢？

我问了策划人员一些问题，这些问题能帮助我弄清楚我可以为他们提供什么样的价值。如果我在公司的黑客马拉松中找到解决方案，那么我想确保这个解决方案能产生好的影响。

交谈之后，我发现该项目值得一试。3/4 的策划助理每周都会花费 30 分钟人工修改错误定价。自动化系统将为他们节省很多时间——估计每年 100 个小时。

现在我已经知道了这个黑客马拉松，虽然官方还没有发布通知，但是我心里已经有了一个想法。尽管我不确定自己是否能够成功解决这个问题，但我非常有自信。发布比赛通知之前，我都专注于自己的工作。等通知发布，我就可以准备开始了。

与策划人员确认项目

两星期后，我收到了比赛通知。黑客马拉松将在一个月后进行，比赛将持续两天，第二天（也就是星期五）进行项目展示。

项目评价标准包括构想原创性，业务影响力，原型完整度以及充分的项目演示。

由于未知数太多，我无法预测自己来不来得及准备。

我去了策划部，并确认当时的问题仍然存在——他们仍然在手工修改错误定价。

我很高兴得知公司有专门的电子商务销售员，她负责报告所有错误定价并进行处理。她能够给我提供更多信息，也能够确认该问题是否值得解决。

然而，她当时在度假，我等了一个星期才和她说上话。时间越来越紧张了，我当时还毫无进展。

离比赛还有三周的时候，她终于回到了公司，于是我了解了更多细节。她确认了我听说的那些问题，并说如果有系统可以自动扫描网站并找到错误定价，那帮助太大了！

在与策划人员的进一步交谈中，我了解到了上传商品价格到网站上的步骤：策划人将价格清单从 Excel 电子表格复制粘贴到 SAP，该软件可以完成许多工作，例如为零售商管理库存。然后，SAP 将价格推到我们的电子商务网站。

我想到可以将 Excel 表与网站价格进行比较以发现问题。我会搭建一个简单的网站，策划人员可以上传 Excel 价格清单。

我会写一个脚本，该脚本会读取 Excel 价格清单，然后实时与网站价格进行比较。然后，所有的价格差异都会汇总到一个列表中，并发送给策划人进行审查。

我很高兴想到了解决办法，于是我开始向部门其他开发人员解释该项目的想法，询问是否有人愿意加入我的团队。但是，我提出了一个严格的要求，即任何人都必须首先亲自与我们的策划人员交谈，并从他们的角度了解问题。

作为 SPIN 系统的一部分，在项目开始前，我需要愿意了解工作流程和目标问题的队友。然而，没有人愿意加入我的团队，但是其他工程师传授给了我如何编写项目代码以及学习哪些技术的宝贵建议。

所以我只能孤军奋战，但是我很兴奋，对自己的解决方案充满信心。

转变思路

黑客马拉松大赛召开两周前，我再次拜访了一位助理策划员，并向她解释了我的想法，即使用自动化脚本来比较 Excel 价格清单和网站价格并汇报价格差异。她很快告诉我，我的想法毫无用处，因为 Excel 的价格和网站的价格是始终相同的。

助理策划员继续解释说，原始的 Excel 价格清单是由一个工具生成的，该工具会把产品成本、交付成本和其他相关因素考虑在内，然后生成 Excel 价格清单，我们的策划人员随后将其上传到 SAP 软件，从而上传到网站。

如果策划者不小心输错了制造成本或交付成本，那么 Excel 表上也是错误的价格。

“因此，你是说没有一个包含全部正确价格的总清单吗？”我问。

“是的，”助理策划员说。

我听到这话难过极了，数周的计划、思考、讨论、等待都功亏一篑了。

距离黑客马拉松仅两周了，在其他领域我又经验不足，而我也没有足够的时间能再调研一番了。

我不得不重新考虑这个项目。

由于时间紧迫，我没法像刚开始那样耗费精力调研了。相反，我让策划员为我提出项目需求。

我回到策划部门，提出了一个不同的问题：“想象一下，如果你有一个脚本可以自动从任何地方（例如 Excel 电子表格，数据库或网站）抓取数据，并自动做数据运算，那么使用这样的脚本，你可以解决什么问题呢？”

助理策划员想了几分钟，说这个脚本可以用来检查售价。她解释说，每周三，网站都会批量销售，销售额将列在我们的主页上，并使用诸如 “所有男式外套均减 25％” 或 “所有女式连衣裙均减 15％” 之类的标题。

每周三早上，我们的 3-4 名助理策划员都会花费 30 分钟手动检查网站，确认折扣份额。如果策划员发现售价错误，就会发送消息给电子商务销售商。

只有 IT 人才能够更改实时销售价格。为了简化 IT 部门的工作，电子商务销售商可能会批量向 IT 人员发送错误列表。

这意味着，即使发现了定价错误的商品（除非紧急情况），错误也不会得到及时的更正。

这个问题与我最初的计划相差不多：使用自动化脚本检测错误定价，节省策划人员、销售商和 IT 人员的时间，也会迅速修正错误定价从而改善客户体验。

我只需要一个可以与网站价格进行比较的价格主清单，但是策划人员告诉我，不存在 “100％ 准确” 的主清单，至少没有纸质清单。

他们说：“但是我们脑子里有这么一个清单，因为我们非常了解我们的产品。正因如此，我们才能检查网站，发现错误的价格。”

考虑了片刻之后，我问：“如果你不必遍历网站呢？如果你只需单击一下，就可以把所有的实时网站价格都整理到一个清单中，那会怎么样呢？”

“那会大大加快我们的检查速度。”

我们讨论出了一个计划：我搭建一个简单的网站，策划人员向网站上传数十个商品名称，立即就能获得一个清单，清单上记录了这些商品的实时网站价格和销售折扣。

这个想法是切实可行的，它有实用性——节省人力，加快质检，改善客户体验——我对自己的能力充满信心（即便我还不知道到底该怎么做）。

我回到办公桌，打开文档写了计划书，然后交给了策划部和销售商，我没有时间可以耽搁了。

他们确认了我的计划。确定想法后还剩一个星期了，是时候弄清楚我该如何把计划付诸实践了。

我去找了公司里更高级的工程师（很多人都比我经验丰富），我问他们：“怎么写一个自动返回网站商品价格的脚本呢？”

与几位工程师交谈后，我了解到网站产品页面是通过查询内部电子商务数据库来获取价格的，而内部电子商务数据库又是从 SAP 获得价格信息的。这是一个 Redis 数据库，它的文档齐全，可以找到如何获取价格信息的详细解释。

我找到了数据库工程师，并了解到我可以只用一个数据库调用命令就可以检索整个项目清单的网站价格和销售价格。

制定好计划之后，我还有很多工作要做。我曾试图招募其他工程师，但大家对这个项目都没有什么兴趣，特别是我还要求他们要与策划人员直接沟通。

在没有工程团队的情况下，我下班后就独自研究资料，尝试调用数据库，研究如何编 JavaScript 代码以读取 Excel 电子表格。

转战主营品牌

黑客马拉松前一天，出于好奇，我问策划人员他们如何知道要出售哪些库存的。他们回答说，公司采购部门负责做这些决定，所以我又去跟采购员交谈。

在我们的交谈中，他们提到了要把这个项目介绍给我们主营品牌中的一些同行。

“我们的主营品牌？” 我问。“ 你们不是做主营品牌相关工作吗？”

“不，”他们说，“这层的销售和策划专门针对小品牌，占我们总收入的 15％，楼上才是我们的旗舰服装品牌。”

这可咋办？我知道我们公司有几个品牌，但是在黑客马拉松前一天，我发现我的项目只能用于公司最小的品牌。

我的编程能力较弱，团队中没有其他工程师，而且我需要做一些大事来打动评委，所以现在看起来，我的项目完全没有希望了。

我走上楼，开始询问我在哪里可以找到我们主营品牌的策划部。如果要做成有意义的项目，那么我一定要与他们谈谈。

主营品牌策划部至少有 20-40 位策划人员，我该问谁呢？

我需要找到一个既理解我的想法，又了解我未触及的领域的人。

如果主营品牌使用其他系统怎么办？我需要找一个可靠的人，我没有时间了。

离黑客马拉松还有一天，我走了一条捷径。

策划部的办公空间是开放式的，所以，当我与主营品牌的一位策划人员谈论我的黑客马拉松想法时，我故意提高嗓门，在过道上走来走去，环顾其他策划人员。这样我能一次吸引多达 8 位策划人员的注意力。

其中一位兴趣极大，他问了我很多问题，他对 Redis 数据库以及是否能找到除定价之外的其他信息特别感兴趣。

我向他展示了数据库文档，我们很快就看完了。

他提到，除了定价外，还有其他一些有用的信息，例如这些物品是否列出在了网站上、商品类别。然后，他向我介绍了主营品牌的销售商，他也认为我的项目不仅仅在定价方面有所用途。

我没有足够的时间来扩展项目需求了，但是我们同意我可以以一种足够灵活的方式来构建项目，以供小品牌或主营品牌的策划人使用。

同事的支持和对项目价值的认可正是我前进的动力！

我有信心，有资源，有研究而且有能力。即使我没有，也无计可施了——黑客马拉松将于第二天早上开始，不能再等了。

寻找队友

黑客马拉松将于周四周五举办。

当我查看日历时，我发现自己周五下午必须要参加自己的家庭聚会，而展示和评审都将在周五进行，这意味着我绝对、必须找到一个能够做项目展示的队友，否则我还没写代码呢，项目就提前夭折了。

我去找了公司小品牌的策划员，我与他们已经接触了几周。我问他们是否能够在周五做项目展示，但是看起来没有人感兴趣。有些人告诉我他们周五要开会，而有些人则说他们公开演讲时会紧张。

于是我直接去找了我们主营品牌的策划员奥利弗，他对我的项目非常感兴趣。他面容友善，受人欢迎（尽管他才 20 多岁，但头发已经变灰了）。他在大学毕业后短短四年内就成为了高级策划师，而大多数人要花费五到八年才能做到这个职位。他的办公桌上摆了很多奖杯，也有很多小零食。

奥利弗立刻同意帮我做项目展示。

我们下楼去了黑客马拉松专用的会议室，并作为一个团队签上了我们的名字。我们的项目名为 PriceSeeker。

另外还有 9 个团队参加比赛，其中大多数由高级工程师组成。一些项目经理和 UX 设计师也是他们团队的一部分。除了我的队友外，其他竞争者都来自于电子商务部门。

简化设计

我脑海里已经有了一个计划：搭建一个简单的网站，让用户上传 Excel 项目清单。

我的网站将解析 Excel 电子表格，检索项目列表，并从 Redis 数据库获取价格。然后，网站会返还策划者一个包含项目及其价格的新的 Excel 电子表格。

这样一来，他们无需手动浏览网站来查看商品价格，只需点击一下按钮，便可以立即查看所有相关的网站价格——这使价格检查既容易又方便。

我们有两天的时间来搭建项目，然后将其提交给评审，他们是电子商务部门的高级领导。我的直系领导是评委之一——就是他把黑客马拉松介绍给我的。在比赛期间，我可以向他咨询代码问题。

我满怀激动地开始了。

但是很快，我便遇到了难题：我代码水平薄弱，不知道如何搭建一个基本的 HTML 网站来读取上传的 Excel 工作表。

我向高级工程总监寻求建议，他建议我简化设计，只制作一个带有文本域的表格，用户可以复制 Excel 的内容到表格然后提交。

提交后，系统会从数据库请求价格，然后返回简单的含价格清单的 HTML 表单中，用户可以根据需要将其复制到 Excel 中。

不通过编程来读取 Excel 文档，这简化了很多步骤。

搭建项目 PriceSeeker

即使有别人相助，日程依旧紧张。

我花了一些时间与策划员核对并确定了设计原型。我从奥利弗的桌子上抢走了很多零食。每当需要帮助或卡在编程上时，我也会与其他工程师交谈。

我并不孤单，很感谢他们的帮助，但我有责任努力克服困难，并付出体力和精力来编写代码。

我非常清楚自己在比赛中的劣势，但是第一天结束时，我就已经成功地制作了一个不错的原型。如果表格只有 4 列，它会返回一些信息，但是如果表格列数太多，它就毫无反应。

一天结束了，我没有时间去调查或排除故障，所以我将 PriceSeeker 上传到了GitHub Pages，我通过电子邮件将网站地址发送给了一些策划员，然后回家了。我希望能好好地睡一觉，也期待能收到好消息。

第二天我到公司时，发现奥利弗给我发了一封邮件—— PriceSeeker 无法正常工作，而且他发送给了我几张操作截图。

看到截图后，我意识到自己没有正确解释如何将项目复制和粘贴到表单中。我给奥利弗发了一张截图，向他展示操作方法。两分钟后他回了邮件，说系统正常工作了。

花了一些时间整理自己的思路后，我去了奥利弗的办公桌。在他的办公桌旁还有其他几位策划员，当时他们正在讨论电脑屏幕上的 PriceSeeker。

奥利弗已将该网站地址发给了他团队中其他策划员。他们正在讨论策划部与工程部合作真是锦上添花。我受到了鼓舞，也很开心这个项目可能促进新的协作。

奥利弗对此特别兴奋，因为他看好不同部门之间的协作。也许我们可以通过鼓励部门之间的沟通来创造更多的机会来发现问题，并提出有效的解决方案。

由于我知道自己不会参加项目展示，所以我看奥利弗预演了展示，他展示了 5 分钟。首先，他展示了 PriceSeeker 网站，并进行了实操。他将项目复制并粘贴到表单中，然后提交，并解释了这个网站的意义。

他继续解释了项目的不足，并举例说明了其他有用的数据。他解释了自动化网站能如何减少人工并改善客户体验。

他得出结论，尽管 PriceSeeker 当前仅能返回定价，但它还有无限可能。听到他谈论该网站的可能性可真是太神奇了。他完全专注于诸如 “减少人工工作量” 和 “增加年销售额” 之类的业务术语。他本人就是一名策划员，所以他能够比我更清楚地展示我们的项目。

展示后，我问了一些项目价值相关的问题，这能让他深入解释项目潜在影响力：

“该项目可以减少多少人工成本？”

“自动检查我们的网站数据将如何提高订购适量库存的能力？”

“除了策划部外，自动检查网站数据还能使其他团队或部门受益吗？为什么？”

我能问出这些问题，是因为我从《Spin Selling》一书中学到了提问技术。书中说道，卖方有时无法直接向买方展示商品，因此他们需要依靠中介来传递消息，因此，要通过向中介提出问题来指导他们，让他们以自己的语言解释商品优点。

这正是我所做的，我问了很多问题，让奥利弗进一步解释了我们项目的增值点。

评审开始前大约一个小时，我不得不离开公司。我很抱歉自己无法出席比赛，但我很高兴，因为我们的项目进展十分顺利。

我祝队友好运，并请一位同事发短信告诉我我们的项目是否排在前三名。

结果揭晓

离开后，我乘了两个小时火车。在路上，我做好了静待比赛结果的准备。

我觉得我们是唯一一支在黑客马拉松正式开始之前就启动筹备的队伍，也是是唯一一支在项目展示中聚焦于商业影响力的队伍。

因此我有一定的信心，但我还是感到紧张，因为有太多无法控制的事情了，可能我们无法夺得前三甲或拔得头筹。

我一直在幻想所有可能的突发事件，而我却无能为力。也许评审会认为我们的项目步骤出错了，于是我们会被取消参赛资格。也许奥利弗没能做项目展示。也许另一支团队会一鸣惊人，震惊全场。

坐在火车上时，我意识到，计划赢得黑客马拉松并没有什么用，因为这不是我能控制的。我决定——不管结果如何，我都会继续搭建我的项目，并努力让它实现 20,000-80,000 美元的利润。

这个数字我也只是随口一说，但我感觉是可以实现的。为了实现这个目标，我知道比赛结束后自己还有很多工作要做。

我下了火车，然后去参加家庭聚会。我心系比赛，但是知道现在自己也无能为力了。我没有看手机，这就是为什么我隔了一段时间才看到短信的原因。

结果出来了，我们赢了！

看到消息后，我既震惊又开心又感到欣慰。做了大量工作，经历了这么多等待和苦苦挣扎，我终于有所收获。

胜利的喜悦并没有持续太久，因为我又开始考虑所有负面的可能性。为了赢得这场胜利，我在公司做了很多事情，但我却从未得到过明确的允许。

我给了策划员一份指向数据库文档的链接，但很显然，这些策划员不是我们电子商务部门的成员。我把黑客马拉松项目托管在了自己的个人 GitHub 中，而不是托管在公司的代码存储库中。午休时、下班后，我偷偷溜走跟策划人员谈话，这意味着我的同事们可能会争辩说我忽略了自己的日常工作。

不仅如此，我还担心项目的社会影响。我资质尚浅，如果我击败了高级工程师，那他们以后会怎么对待我呢？

比赛结束后

周末过后我回去上班，但我担心的情况并没有发生。

当我到公司时，一群人击掌并祝贺我。但是我的日常工作量与黑客马拉松之前的工作量差不多。上级工程管理人员告诉我，不管是我还是其他工程师，现在都没有时间和官方许可来完成 PriceSeeker。

我们的计划负责人表示，他们正在重组某个大型项目，至少几个月都无法把时间花在我的项目上。我沮丧地发现，虽然我收到了同事的积极反馈，但我所有的努力只是构成了一个让自己引以为傲的的副业，但实际上却毫无用处。

黑客马拉松结束后，我有很多工作要做，所以我继续回到了工作上来，下班后每天花费 5-15 个小时研究 Selenium 最佳实践。我花了一两个月的时间来提升技能，这样我便能在规定时间内完成自己的本职工作，白天也能有几个小时研究自己的项目。

PriceSeeker 差不多完成了，只剩一点小问题了。我觉得可能还需要一两天才能完成，但是如果没有官方许可，我便不得不自己秘密完成项目。

同事们都不知道我花时间在 PriceSeeker 上，他们也不在乎，因为我每次都按时完成并提交本职工作。

经过大量的努力和修补，我设法解决了 PriceSeeker 的所有错误。

我兴奋地跑到品牌策划部向他们展示了项目模型，但他们告诉我他们不再需要它了。我简直不敢相信。我非常震惊，以至于我连问题都问不出来。

后来我发现，错误定价的问题是暂时的，这是由于最近显示定价方式的变化而引起的。黑客马拉松后，定价显示系统已经更新了，可以让策划员更快地找到任何错误定价。

事后看来，我本应该在黑客马拉松的准备阶段就意识到这一点，但是当时我对自己的计划非常有信心，所以没能对可能的问题进行适当的调查。不管我再怎么不情愿，PriceSeeker 在相当长的一段时间里都将毫无用处。

奥利弗告诉我，对于我们的主营品牌来说，PriceSeeker 毫无用处。但是，他告诉我网站上的有些商品有时会平白无故消失，这意味着库存中的某些商品和颜色会意外地从我们的电子商务商店中被删除。

这种情况很少发生，但是直到查看每周的电子商务销售报告，策划员才能注意到某些商品的销售额为零，然后他们会检查这些商品是否展示在了网站上，到那时他们才会标记要退回网站的商品。

这种工作方式又增加了人工成本，奥利弗建议我们可以修改 PriceSeeker，从而让它检测网站上是否有某商品。

浏览完数据库文档后，我了解到查询数据库以查看某项是否在我们的网站上非常容易实现，于是我迅速为 PriceSeeker 更新了这一功能。

奥利弗告诉我，我们的电子商务销售商负责检查网站库存质量，他们将从 PriceSeeker 的这项新功能中受益颇多。我与每个品牌的电子商务销售商接洽，发现他们对我向他们展示的产品感到非常满意。

他们立即将数百个项目复制并粘贴到其中，发现 PriceSeeker 能够准确找到所有未在电子商务商店中列出的所有项目，然后他们开始每周使用几次 PriceSeeker。

在接下来的几周中，我继续与策划员和销售商接洽，试图找到 PriceSeeker 其他可能有用的功能。

我了解到，策划部最近成立了一个数据分析团队，该团队负责构建自动化脚本和面板，以帮助策划员更好做出决策。报告未展出的电子商务库存实际上已经在他们的待办事项列表中。

我很喜欢与数据分析团队聊天交流，但是由于没有正式批准 PriceSeeker 或其他产品的搭建工作，我们谈论的大部分都是理论内容。不过，我很高兴知道我的项目已经取得了一些成就，并且终于看到了曙光。

不久之后，我收到了咨询公司人力资源部门的电子邮件，他们想安排一个会议。

我进去跟他们聊了聊，他们告诉我公司即将裁员。他们要辞掉几位顾问，我是其中之一。在劳动合同终止前，我收到了三份通知。

我知道时尚品牌一直面临着销量下降的问题，解雇顾问比解雇全职雇员要容易得多。尽管如此，我仍然很惊讶我竟然会被裁员。

最后几周里，我整理了日常工作，并特别把精力放在了 PriceSeeker 上。我想看看自己是否可以量化它所产生的财务影响，但是检测网站未列出的库存的价值并不容易量化。

当我去拜访我们的电子商务销售商时，他们告诉我其影响是无法衡量的，因为其中涉及许多复杂因素，例如 PriceSeeker 能检测多少未列出的商品，它们来自哪个品牌，这些商品的受欢迎程度以及剩余的库存量。

奥利弗总结说：“尽管我们不能量化 PriceSeeker 带来的价值，但我们确信它一定产生了积极影响。”

劳动合同结束后，我回顾了自己在这家公司的经历：我入职 7 个月，有了很多激动人心的体验，其中之一就是黑客马拉松。

黑客马拉松结束后，许多同事告诉我我胜利的原因是我 “专注于业务影响”。尽管他们夸奖了我，但是我觉得这个原因听起来太过空泛。

就个人而言，我将自己的胜利归功于充足的准备：我在黑客马拉松正式开始之前就做好了积极的准备。这样，我能不断获得改进方案所需的反馈，以便更好地改进。

如果没有别人的帮助，我不会取得比赛的胜利。在项目过程中，我是主要负责人，我要不断推进、探索、自学，而且还要努力工作。

事实上，我并不孤单。那些向我展示出热情的人——我的工程总监和队友奥利弗——他们就是促使我参加比赛的人，而两年前我根本不会参加这种比赛。

我还在学习，还在尝试新事物，我希望能参与更多的协作，为公司创造有价值的产品，这也会让我的生活更有意义。

回想起来，我仍然很难相信，像我这样奋力挣扎才能转行的人，竟然能够进入企业，并且能带动同事做些事情。

对我而言，黑客马拉松是第二次机会，而我充分利用了它。

原文：How I Won my First Ever Hackathon – 2 Wild Days of Research, Design, and Coding，作者：Moshe Siegel