Jiawei Pan - freeCodeCamp.org

Python 基础教程：这个自动化程序让你的工作更高效

Jiawei Pan — Wed, 05 May 2021 09:00:00 +0000

很多日常工作可以通过自动化的方式来帮你节省一点宝贵的时间。这也使得掌握自动化技术成为关键。

只需要一小部分熟练的自动化工程师和领域专家就有可能将整个团队中的最繁琐的工作实现自动化。

在这篇文章中，我们将探讨基于 Python（一种强大的且简单易学的编程语言）来实现自动化工作流程的一些基础知识。我们将使用 Python 来编写一个简单有用的小型自动化脚本，这个脚本能够整理指定文件夹中的文件，并将其放到对应的文件夹中。

我们的目标不是在一开始就编写完美的代码以及构建一套理想的自动化体系。

当然我们也不会创建任何“非法”的脚本。相反的，我们将研究如何创建一个能够自动整理文件夹内容的脚本。

从经济型理论看，这叫囚徒困境和零和博弈。如果我不使用机器人，但是你用了，你就赢了。如果你没有用，但我用了，我就赢了。如果我们都不用，那么我们就能共赢。但是对于那些没有使用机器人的人是没有奖励的，大家就都在用，那么没有人会赢。

请警惕这点，不要忘记整个工具对社交媒体的影响。

来源：SignalSciences.com

我们希望规避道德问题，并继续开展一个自动化的项目。这就是我们为什么只是创建一个简单的目录整理脚本来帮祝你整理乱糟糟的文件。

创建整理目录脚本

现在让我们来看一个非常简单的脚本。它会自动整理指定的目录，将其中的文件根据文件后缀名移动到对于的文件夹。

下图就是我们将要做的事情：

设置参数解析器

由于我们会用到操作系统的功能，比如移动文件，所以我们需要导入 os 库。除此之外，我们还希望用户能够控制要整理的文件夹，因此我们还会用到 argparse 库。

import os
import argparse

导入了这两个库之后，我们首先要设置参数解析器。确保为每个参数有对应的描述和帮助文本，以便用户在输入 --help 时得到帮助。

我们的参数会被命名为 --path。参数名前面的双破折号告诉库这是一个可选参数。默认情况下，我们使用当前目录，因此将默认值设为 .。

parser = argparse.ArgumentParser(
    description="Clean up directory and put files into according folders."
)

parser.add_argument(
    "--path",
    type=str,
    default=".",
    help="Directory path of the to be cleaned directory",
)
# 解析用户提供的path参数的值
args = parser.parse_args()
path = args.path

print(f"Cleaning up directory {path}")

这就完成了参数解析的部分，非常简单易读，对吧？

让我们执行一下脚本，检查是否有报错。

python directory_clean.py --path ./test

=> Cleaning up directory ./test

一旦执行，我们可以在控制台中看到目录名称被打印出来，完美。

现在让我们来使用 os 库来获取给定路径下的文件。

从文件夹中获取文件列表

通过给 os.listdir(path) 方法提供一个有效的路径，我们就能获得该目录内所有文件和文件夹的列表。

在列出了文件夹内所有的元素后，我们需要对文件和文件夹进行区分，因为我们只需要整理文件而不是文件夹。

我们使用 Python 的列表来遍历所有元素，根据是否满足是文件还是文件夹的条件将他们放到新的列表中。

# 获取目录中的所有文件
dir_content = os.listdir(path)
# 根据文件和文件名创建相对路径
path_dir_content = [os.path.join(path, doc) for doc in dir_content]
# 过滤目录内容到文档或文件夹列表
docs = [doc for doc in path_dir_content if os.path.isfile(doc)]
folders = [folder for folder in path_dir_content if os.path.isdir(folder)]
# 记录文件移动的数量
# 列出已经创建的文件夹以免出现重复
moved = 0
created_folders = []

print(f"Cleaning up {len(docs)} of {len(dir_content)} elements.")

和之前一样，让我们确保用户能够得到反馈。所以需要打印一个告知用户多少文件被移动的信息。

python directory_clean.py --path ./test

=> Cleaning up directory ./test
=> Cleaning up 60 of 60 elements.

当我们再次执行 python 脚本之后，我们可以看到在 /test 文件夹下将会出现 60 个被移动的文件。

根据文件后缀名创建文件夹

接下来也是最重要的一步是根据每个文件的后缀名创建文件夹。我们希望通过遍历所有已经过滤好的文件，如果没有创建对应后缀名的文件夹，就创建一个。

os 库能给我们提供非常友好的功能，例如拆分给定文件的类型和路径，提取文件路径和文件名。

# 遍历所有的文件，并移动到对应的文件夹中
for doc in docs:
    # 提取文件后缀名
    full_doc_path, filetype = os.path.splitext(doc)
    doc_path = os.path.dirname(full_doc_path)
    doc_name = os.path.basename(full_doc_path)

    print(filetype)
    print(full_doc_path)
    print(doc_path)
    print(doc_name)

    break

如果我们的目录包含成堆的文件，那么上面代码末尾的 break 语句用于确保我们的终端不会列满所有的文件信息。

我们设置好这一步之后，让我们执行一下脚本，看到的内容可能类似这样的：

python directory_clean.py --path ./test

=> ...
=> .pdf
=> ./test/test17
=> ./test
=> test17

我们可以通过上面的实现，分离文件类型，然后从完整路径中提取部分内容。

现在我们有了文件类型，我们就能检查拥有这个文件类型的同名文件夹是否已经存在。

在开始这一步之前，我们需要跳过一些文件。如果我们使用当前目录 . 作为路径，我们需要避免 python 脚本也被移动。可以通过一个简单的 if 条件语句来解决这个问题。

另外，我们也不希望移动隐藏文件，所有 . 开头的文件也要跳过。 macOS 上的 .DS_Store 就是一个例子。

    # 当在目录中存在 名为 directory_clean 的文件或 . 开头的文件在时跳过
    if doc_name == "directory_clean" or doc_name.startswith('.'):
        continue
    # 获得子文件夹的名称，创建其中不存在的文件夹名
    subfolder_path = os.path.join(path, filetype[1:].lower())

    if subfolder_path not in folders:
        # 创建文件夹

处理完 python 脚本路径和隐藏文件后，我们可以继续在系统中创建文件夹了。

除了我们的判断之外，如果一开始读取目录时发现同名文件夹已经存在，我们需要一种能够检测已创建文件夹的方法。这就是我们要声明数组变量 create_folders = [] 的原因。它将用来存储已被检测过的文件名。

os 库中提供了一个 os.mkdir(folder_path) 的方法用于根据路径创建新文件夹。

这个方法可能会抛出异常，告诉我们文件夹已经存在。所以我们需要确保异常被捕获。

if subfolder_path not in folders and subfolder_path not in created_folders:
    try:
        os.mkdir(subfolder_path)
        created_folders.append(subfolder_path)
        print(f"Folder {subfolder_path} created.")
    except FileExistsError as err:
        print(f"Folder already exists at {subfolder_path}... {err}")

在编写完创建文件夹的代码后，让我们重新运行一遍脚本。

python directory_clean.py --path ./test 

=> ...
=> Folder ./test/pdf created.

在第一次执行时，我们从日志列表看到，我们已经创建了以文件后缀名命名的文件夹。

最后一步就是移动文件到它们对应的父文件夹中。

当使用 os 库时需要明白的最重要的一点是，有些操作无法撤销。例如，删除文件的情况。因此，在执行脚本前我们需要先注释掉部分内容

这也是为什么我们的 os.rename(...) 方法会在这里被注释掉。

# 获取新文件路径，移动文件
    new_doc_path = os.path.join(subfolder_path, doc_name) + filetype
    # os.rename(doc, new_doc_path)
    moved += 1

    print(f"Moved file {doc} to {new_doc_path}")

运行完我们的脚本并看到正确的日志之后，我们可以撤销 os.rename() 方法的注释，并最终写成这样的。

# 获取新文件路径，移动文件
    new_doc_path = os.path.join(subfolder_path, doc_name) + filetype
    os.rename(doc, new_doc_path)
    moved += 1

    print(f"Moved file {doc} to {new_doc_path}")

print(f"Renamed {moved} of {len(docs)} files.")

python directory_clean.py --path ./test

=> ...
=> Moved file ./test/test17.pdf to ./test/pdf/test17.pdf
=> ...
=> Renamed 60 of 60 files.

最后的这个运行结果会将所有文件移动到对应的文件夹中，我们的目录不需要手动操作也能很好的被整理。

下一步，我们可以利用我们上面创建好的脚本去做更多是事情，例如，安排脚本在每个星期一定时清理 Downloads 文件夹，以便让其看起来更整洁有序。

这也是我们在 Udemy 中创建的名为创建自动化程序的后续课程

一份完整的日常自动化程序指南

Felix 和我在学习 InstaPy 库和他的 Travian-Bot 库的基础上创建了一个教你如何创建自己的机器人的在线视频。实际上，他也因为这个库太火爆导致想关闭这个项目。

原文：How to Build a Bot and Automate your Everyday Work，作者：Tim Grossmann

一个月之内参加 60 多场软件开发面试，我收获了什么？

Jiawei Pan — Tue, 13 Apr 2021 09:00:00 +0000

在这篇文章中，我将分享我是怎么动力满满地在一个月内参加 60 多场面试的。更重要的是，我将分享从成功和失败中吸取的经验教训。

我将文章分成三个部分，对应典型招聘流程的不同阶段。

本文的大多数经验值得软件工程师和专业技术从业者借鉴，同时，这些经验背后的原理适用于所有的职业。我希望你能从中找到一些对你职业生涯有帮助的东西。

我是怎么开始的

跟别的软件工程师一样，我经历了许多不同类型的技术面试 —— 从可怕的白板面试到在类似 HackerRank 等平台上的 45 分钟虚拟编码挑战。其中一些面试我的感觉很好，有一些我却感觉非常糟糕。

但是我想要变得非常善于面试。我想要克服面试恐惧症，在面试中表现自信。就像一个冲浪老手一样，我想要学习如何在波涛汹涌的面试高压浪潮中乘风破浪，同时我也想换一份工作。

所以，从 2020 年的 1 月份到 3 月初，我申请了在美国和欧洲的公司（并且获得面试机会），包括：早期初创公司（如 Coda），创业后期的公司（如 Crunchbase），中型公司（如 Affirm），超大型公司（如 Amazon），甚至是允许员工远程办公的公司（如 Webflow）。

在投递超过 109 份面试申请后，我获得了 60 多场面试机会，其中包括 60 多场电话面试，50 多场视频技术面试，18 个可以线下在家写的代码项目，11 个在线编码挑战，以及 8 场现场面试（其中包括 3 场虚拟现场面试）。

我学到了什么

为了便于大家阅读，我将文章分成三个部分，对应典型招聘流程的不同阶段。

面试前

这部分涵盖了从和一家公司首次建立联系到得到第一次面试邀请的所有内容。

我从面试申请中学到了什么

当我开始向公司发送面试申请时，我以为发送的申请越多，获得面试机会的可能性就越高。看上去很合理，对吧？所以我设定了每天发送 5 份简历的计划，希望每 5 份申请可以带给我 1 个面试机会。

但是计划没有如我所愿。面试邀请的数量经常达不到我的目标。这个比例大概是 1:12 —— 每发送 12 份申请，获得 1 个面试机会。

我面临的问题是：我应该增加每天投递简历的数量吗，比如每天 10 家公司？或者有什么其他方面是我需要改变的？

随着申请失败的次数增加，我发现有些东西需要改变。

我抽出一天暂停投递简历，并且重新思考我简历投递的方式，然后意识到需要改变。我开始将每份简历看成是向招聘经理（或者任何将要阅读我简历的人）的推销，而现在出售的商品是我自己。

如果一家公司需要填补人才缺口，而我说我有这个能力，那么我需要找到一个方法让 TA 们相信我所说的。

我给自己一个新的任务，那就是找到一个能有效地推销我的独特能力、经验和性格的方法，让招聘经理相信我是这份工作的合适人选。

这里是我推销自己的一个例子：

在我的简历的加持下，这份求职信帮助我获得面试机会的成功率达到 95%。其中有一次不成功，但是招聘经理仍然回复我说那个岗位已经停止招聘了，但是他也很愿意和我继续保持联系。

这里的经验是，你需要非常注意简历的内容 —— 质量比数量更重要。当然能兼顾两者就更好了。了解你自己的特有的经验和能力，以一种符合公司要求的方式表现出来，且不失个性。

了解你投递公司的背景和特殊需要同样也很重要。一家初创公司或者中小型公司可能与大公司的需求不同，因此需要一份不同的技能清单。

推销你自己，并确保有实质的内容能在面试中支撑你的推销。

我通过邮件对招聘人员了解更多

在此期间，我收到了一堆来自招聘人员的邮件（大部分是不相关的），其中大部分职位是我不感兴趣的。

阅读这些邮件花了我不少时间，但是我学着具有同理心，去理解这些招聘人员只是在完成 TA 们的本职工作。

我不再将这些邮件视为噪音，并开始努力回复这些招聘者，甚至回复那些我不感兴趣的岗位的相关邮件。这样一来，我成功地与这些招聘者建立了联系。如果将来我需要转行，这将为我提供丰富的资源。

你可能不会回复每一封你收到的邮件。但是，你可能会觉得有意思的是，我上面说的其中一些面试机会是通过回复一些不相关的邮件而获得的。回复邮件并没什么坏处。

面试阶段

这部分包含面试过程中的所有内容，我把它们分为几种不同的面试类型。

电话面试

是的，我知道，你很忙，你需要处理许多事情。但是，你同样是一个专业人士，因此当你接到电话前，你至少需要知道两件事：

面试官姓什么，怎么称呼
至少一件关于公司的事情 —— 公司是做什么的，地址在哪，关于公司的新闻，或者其他和公司相关的事

我注意到，当我向面试中询问这些事情时，给人的感觉是我真的对那家公司感兴趣。招聘人员通常会在面试中关注这一点。

视频技术面试

是否能够清晰表达自己的想法，基本上就决定了你在视频技术面试中表现得怎样。

你之前可能听过这个说法：

“面试官关心的是你的思考过程。是的，TA 们能看到你的代码，但是更重要的是 TA 们想要知道你为什么这样写代码。”

面试官不在你旁边，所以 TA 们看不到你的非语言提示，例如手势或者其他细微动作。面试官能了解到的只有你用来表达思维的声音。

现在你知道了如何进行这次对话，接下来的问题是怎么熟练应对？实际上，虽然表达自己的想法对某些人来说是很自然的事情，但对其他人来说却不然，比如我。

所以 —— 练习！练习！练习！

多练习模拟面试。我跟朋友进行模拟面试练习，使自己在表达观点的时候更加自信。更有趣的是，这也帮助我建立了一个新的面试思维。

我开始将面试看成是一场与朋友或者团队成员间的对话，将面试官看成是我的朋友（我有时候在心里会给面试官取个名字）。因此，原本是一场超高压力的面试，我现在会把它看做是一次关于技术的友善的“聊天”。

基于这个新的理念，在很多场模拟面试之后，我树立了极大的信心，开始享受面试，不好意思，我是说技术聊天。

如何开始处理一个问题

绝对不要在没有了解清楚问题说明的情况下，就开始解决它。如果你先向面试官询问清楚问题是什么意思，那么你的答案也基本不会错。你通过提问来明确问题而不是自己在那儿猜测，也能让面试官对你留有好印象。

如何解决问题

好的候选人知道如何解决问题（例如一个排序问题），但是优秀的候选人知道一个问题的多种解决方案，并且能权衡每种方案的利弊。

我表现最好的一场面试（思如泉涌）是我不但解决了逻辑问题 —— 我还提供了替代方案，并且讨论了它们的利弊。

你的目标是提供多种解决方案，愿意讨论它们之间的区别，并且能够至少实现其中一种方案。

对于技术面试，你需要编写简洁的代码。很多面试官都关心你的代码质量和解决方案的正确性。你的目标是——编写模块化代码，拆分可复用的逻辑单元为一个个方法，正确的变量和方法名——就像老板管理公司一样管理你的代码！

当你被问题困住时怎么办

有时候你会卡在一个问题上，原因有很多：你没有相应的知识，做了错误的假设，缺少细节，等等。

我曾经认为，在这种情况下，考验我能力的标准是我处理问题有多快，所以我会安静地思考，不和面试官交流，只是自己思考。

这就是我们很多人误解的地方。我知道，你需要一段单独思考的时间，但是，很抱歉地告诉你——在面试时最好不要单独思考。

是的，你的面试官希望看到你想出解决方案，但是有一件事你不能忘记—— TA 们也希望看到你能够与团队同事协作讨论出解决方案。虽然公司希望有大牛，但 TA 们也想要团队合作。

你的面试官就是你的朋友、伙伴、你的团队成员。所以，在处理问题时，你可以大胆和 TA 们交流。

在遇到困难时，自信地分享你的思考过程，而不是那种嚷着要人帮忙。通过这样的方式，你可能找到解决方案。我在面试 Coda 时就是这样做的。

如何应对编码挑战

这部分内容适用于在像 Hackerrank，Codility 等平台上进行编码挑战形式的面试。通常这些是定时挑战，比如 45 分钟或者更长的时间。

我之前分享的一些内容在这里很有用，但是其他的诸如“明确问题的意思”等在这里并不适用，因为这个时候没有你能问的人。所以我建议你采用这些步骤：

通读并明确问题
先编写能运行的代码，即便是暴力匹配算法，它可能不会跑通所有的测试用例，但是首先要有能够运行的代码，理想的情况是在 15-20 分钟内编写出来
通过输入不同的用例测试你的代码，因为这有助于你处理边界情况
优化执行效率
重复步骤 4 和 5，直到最后一分钟

这里的关键是掌握良好的计算机基础知识。我在文末添加了一些相关的资料。

如何应对线下编写代码的面试题

带回家写的项目是一个能展示你的亮点的机会，因为你有更多的时间。这同样意味着这种面试可能会比较花时间。

我面试的其中一家公司是按时薪（大概每小时 68 美元）支付给员工，然后员工在家里写代码—— TA 们很认真地对待这个项目，所以你也应该认真对待。在你开始花时间写项目前，请想清楚你是否真的想成为这家公司的一员。

不要在带回家的项目中牺牲代码质量。对你的整体框架设计，命名约定，代码结构等要非常用心，并且准备坚持自己的选择。

你应该使用哪些技术

在面试 Coures Hero 时，我使用了正则表达式解决问题，我本可以使用相对简单的字符串解析法。事实证明这是一个错误的决定，结果我没有通过面试。

教训：只用你用起来非常熟悉的且有很多相关经验的技术。

现场面试

前一晚睡个好觉，面试的那天早点到，多微笑（这有助于提升自信，但是更重要的是能够帮助你保持轻松的状态并控制自己）。

直面你的恐惧，明白即使不能解决问题，也不会是世界末日——毕竟你只是进行了一场技术交流——然后沉浸到纯粹的交谈中。

如何进行虚拟现场面试

这可能会和直接的线下面试有很大的不同，因为所有人的眼睛都看着你，并且会令人不安。

我经历过 3 次虚拟现场面试，而且没有通过任意一场。抱歉，我不是你要寻找的那个对虚拟现场面试很在行的人，但是我在文末分享了一些可能对你有帮助的资源。

面试后

如何面对失败

有很多原因导致你没有通过面试。有些我知道的最好的工程师在某些时候也没有通过面试，而且现在依然如此。

所以，忘掉那些失败的面试，从每次失败的面试中吸取经验，并利用这些让自己进步。就像有些人说的——我们继续前进！

那么如何面对成功呢

庆祝你的成功，无论是你认为它是多么小的成功。我有一些庆祝的点子。

做了这些之后，我会变得更好吗

我不是要告诉你，我顺利通过了每次面试。但是可以肯定的是，我在每场面试之后都变得更擅长面试，而且我的自信心也真的提升了。是的，我也同时获得了很多入职邀请。

接下来做什么

和朋友反复练习模拟面试。练习能够帮助你快速地辨识出面试问题的模式，熟练掌握，最终帮助你树立自信。
对于技术面试，熟练掌握数据结构和算法能够打败一切。我在文末分享了一些可能对你有帮助的资源。
开始面试，并持续面试，即使你有一份工作，也要不停的面试——可能每个月一次或者每个季度一次面试。面试是一种技巧，所以要不断磨练。

我真心希望这篇文章对你有所帮助，希望这里分享的一些经验教训将有助于你在面试时更加自信，面试表现更好——最终将帮助你找到心仪的工作。

如果你需要一个人来和你进行模拟面试，可以随时通过 Twitter@meekg33k 联系我。

后会有期！

有用的资源

原文：What I Learned from Doing 60+ Technical Interviews in 30 Days，作者：Uduak Obong-Eren

编程与人生

Jiawei Pan — Mon, 12 Oct 2020 09:20:00 +0000

我相信人类内心最深的意愿是：在有生之年，尝试接触到宇宙最基础的真相的一点微光，聆听它们的耳语，明白它们的意义。

并且，如果你对这些经历有过足够努力的体会，你就会找到答案。无论是它们是你思想的体现还是手中握着的实物，一但你看到它们，它们就会伴随你一生。

编程很多地方与生活有相似之处。我们的任务是创作一些东西 —— 一种整体的体验会比部分重要的多的东西。就像人生，这是对有限创造力的考验。这里有一些我们必须遵守的规则，一些我们应该遵守的规则和其他一些我们可以忽略的规则。无论多么短暂，世间真理通过编程略见一斑。

编程与人生之间的四个平衡

迭代就是进步

你知道吗，如果你在一个月的开始拥有一分钱，并且每天它都会翻倍，你会在这个月的第 15 天获得 163 美元。当然，你想，在 15 天内获得 163 美元肯定还有别的更好的渠道。但是，如果你再等待 15 天，你会拥有超过 5 百万美元。

去吧，我会等你做完计算。

在编程中，我们使用迭代这个术语去表示重复某件事。用更正式的定义，它重复地将一个过程叠加到该先前这个过程的结果上。例如，1 加 1 等于 2，然后 2 再加 1 等于 3，以此类推。

当我们进行迭代时，我们希望得到反馈。我们等待某些条件的满足，这样我们就可以知道是否应该停止迭代，或则调整迭代的方式。如果我们监听反馈失败了，我们会陷入无限循环中。

人生没有什么不同。我们总是期望从目标 A 跳到目标 B，却从不去想目标 A 和目标 B 究竟是什么。而且，就算我们定义了这些目标，我们总是期望能够马上达成目标。相反的，真相往往是，我们必须从头到尾逐步的完成我们的目标。我们必须听取反馈，告诉我们我们在哪里，以便进行相应调整。

当我们有目标，开始的几天，几个星期，几个月我们通常感受不到进步。我们经常被诱惑重头开始或者从别的新目标开始。但在这样做时，我们未能意识到，虽然我们可能尚未到达目的地，但我们已经远远超出了开始的地方。完全重新开始不是必要的，我们只需要进行一些小的调整。

停止重新开始。让迭代来增加进步。

许多复杂的问题包是由很多已经解决的小问题构成

即使是体验最棒的 APP 也是由一系列解决普通问题的普通方案堆起来的。实际上，程序中大多数的解决方案都不是唯一的。是通过将这些普通的解决方案联系起来才诞生了一款与众不同的产品。

在编程中，使用这些普通的解决方案有很多种形式。其中一种用专业术语讲叫抽象。就是从众多相似的事物中提炼出共性。

在计算机编程中，当我们抽象化某个事物，我的通常在低级技术上构建高级技术。这会让使用底层技术变得简单。

例如，很多编程语言都是由神秘的二进制语言抽象而成（0 和 1）。它们使我们和计算机之间有了一座基础的但是构建复杂的桥梁。这些高级语言允许我们专注于更高层次的问题。

另外一种能帮助我们有效解决问题的方法是使用别人用过的解决方案。你也许听过库这个计算机术语。我不是在谈论一个布满灰尘，光线幽暗的存放图书的地方，库并不遥远。

在计算机术语中库，是一个由其他人编写的为了解决某个问题的代码。它通常不是直接解决你面临的问题的方案，而是对这些问题的抽象。

例如，如果你在编写需要某人登录的应用，你可以自己来编写加密和解密的代码，或者你也可以使用别人已经编写好的代码。通过一些设置，我们可以有更多的时间去解决我们应用中更加重要的问题。

我们所有人都在某种环境中使用抽象概念和库。例如，杂货店是对我们提供食物的抽象。汽车是徒步旅行的抽象。烤箱是生火的抽象。这些摆在我们面前的一层可以帮助我们分配更多的时间给更高层级的问题。

重新造轮子只是为了学习怎么去制造一个轮子，而不是开着它去商店。

你如何看待问题将会决定你如何解决它

回想一下一辆卡车在桥下行驶并被卡住的故事。工程师需要花费数小时想办法将卡车弄出桥。一个小孩出现了，站在卡车轮胎前，说到：“如果你们把轮胎的气放掉会怎么样？”

从这个孩子的角度出发，问题不是桥太矮了，而是卡车太高了。

大多数人都可以解他们面临决任何问题。实际上，大多数问题就是在表明解决方案。例如，如果因为桥导致问题的产生，那么答案肯定是对桥做些什么。当然，如果问题是卡车太高了，那么解决方案显而易见是让卡车变矮。

整体比部分更重要

谷歌地图源代码，《独立宣言》，马丁路德金《我有一个梦想》的演讲，2005 年史蒂夫乔布斯斯坦福的毕业演讲，以及我的第一个应用 Hello World 这些有什么共同点？

它们都是由 26 个英文字母拼接而成。

没有什么比文字更让我着迷了。文字是人类诞生到现在最强大的技术之一。

是的，我使用技术这个词，因为 —— 即使是刻在洞穴上的壁画 —— 它们从根本上改变了我们保存信息的方式。数据不在受我们大脑记忆的约束。

虽然文字最初目的是用来记录，但它马上变成了一种传递思想的方式。其中一些想法会令人愤怒，而另一些会让人受到启发。

每种语言（包括计算机语言）在通过文字或演讲传送信息时都会有些不同的分地方。每个单词及其组成部分也会略微不同。但是，语言仍然是一组符号，可以将其组合成近乎无限的思想。

例如，在英语中，我可以用大约 29 种符号来表达几乎整个宇宙。除了我前面已经提到的 26 个字母，句号，逗号，问号这些也同样有帮助。

无论对于你，我还是史蒂夫乔布斯这 29 个符号都很有价值。然而，我们每个人会因为我们选择相信的文字和语言，而产生不同的人生轨迹。

有趣的是，虽然我们经常在字典中添加词组，但是我们通常不会添加单个字母。这就意味着，在最基本的层面上，所有可能存在的想法都已经存在，正在静静等待我们去发现它们的存在。

Les Brown （美国励志演说家）通过下面这个思想实验很好的总结了这一点：

想象一下，假如你临死时躺在病床上。站在你床周围的是生活赋予你的思想，梦想，能力和才华的灵魂。

但是由于出于某些原因，你从未对这些思想采取过行动，从未追寻过那个梦想。你从未使用过这些才能。我们从未见过你的领导力。你从来没有为自己发声。你从未开始写那本书。

现在它们就站在你的床边，并用愤怒的目光瞪着你说： “我们为你而来。只有你能给我们生命。现在我们必须要和你一起离去”

问题是 —— 如果你今天就死了，哪些思想，梦想，能力，天赋，礼物是会和你一起离去？

谢谢你的阅读！

Vue.js 项目实践——创建记忆卡片游戏

Jiawei Pan — Tue, 30 Jun 2020 08:23:21 +0000

如果你刚开始学习 Vue，想巩固基础知识，那么你可以试试通过这个有趣的练习来创建一个好玩的游戏。

在这篇文章中，我将逐步教你用 Vue.js 创建一个记忆卡片游戏。

这篇文章会介绍以下知识点：

使用 v-for 命令循环遍历一个数组对象
使用 v-bind 指令动态控制类名和样式
添加 Methods 和 Computed 属性
通过 Vue.set 方法向一个对象动态添加属性
使用 setTimeout 方法延迟 JavaScript 插件加载
JavaScript 对象的浅拷贝和深拷贝
使用 Lodash 工具库

我们开始学习吧。

准备——包括项目所需的库

第一步很简单，从 CDN 导入库到我们的 HTML5 基础代码中，这样就可以开始我们的小型项目了。




    
    
    Memory Card Game

允许用户看到卡片网格

接下来，我们定义一些必要的 HTML 页面结构、CSS 样式和一个基础的 Vue 实例，这样用户就看得到这些卡片网格了。

Vue 实例

创建一个 Vue 的实例，在 data 属性内部定义一个 cards 属性用于存放卡片列表。

let app = new Vue({
    el: '#app',
    data:{
            cards: [
                {
                    name: 'Apple',
                    img: 'apple.gif',

                },
                {
                    name: 'Banana',
                    img: 'banana.gif',
 
                },
                {
                    name: 'Orange',
                    img: 'orange.jpg',

                },
                {
                    name: 'Pineapple',
                    img: 'pineapple.png',

                },
                {
                    name: 'Strawberry',
                    img: 'strawberry.png',

                },
                {
                    name: 'watermelon',
                    img: 'watermelon.jpg',

                },
            ],
    },
});

数组内的每个对象包含两个属性：图片的名字（用于匹配）和卡片上的图片。

HTML 标记

我们已经在 Vue 实例中准备好了数据，可以在 VueJS 中通过 v-for 指令循环遍历它们。

我们使用了一些基础的 Bootstrap 框架内容搭配 VueJS 的 v-for 指令来循环遍历这些卡片，让它们以网格的形式展示出来。

每张记忆卡片由两部分组成：

正面：这里是一张所有卡片都会用到的公共图片（默认卡片显示的样子）
背面：这里包含每张卡片实际的图片（默认设置为隐藏）

添加一些基础的 CSS 样式，这样我们就只展示卡片的正面（默认卡片显示的样子）：

    .flip-container {
        -webkit-perspective: 1000;
        -moz-perspective: 1000;
        -o-perspective: 1000;
        perspective: 1000;
        min-height: 120px;
        cursor: pointer;
    }
    .front,
    .back {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: 0.6s;
        -webkit-transform-style: preserve-3d;
        -moz-transition: 0.6s;
        -moz-transform-style: preserve-3d;
        -o-transition: 0.6s;
        -o-transform-style: preserve-3d;
        -ms-transition: 0.6s;
        -ms-transform-style: preserve-3d;
        transition: 0.6s;
        transform-style: preserve-3d;
        top: 0;
        left: 0;
        width: 100%;
    }
    .back {
        -webkit-transform: rotateY(-180deg);
        -moz-transform: rotateY(-180deg);
        -o-transform: rotateY(-180deg);
        -ms-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
        position: absolute;
    }

刷新页面，然后你应该看到 6 张正面的卡片以网格的形式展示，而每张卡片上的图片隐藏在背面。

卡片的正面（通过 v-for 循环指令展示）

翻转卡片

接下来，给卡片绑定一个事件，这样每当我们点击时，它应该翻转并显示背面的图片。

在原始的卡片数组的基础上添加另一个属性。这将确定当前卡片是否被翻转。

添加下面的 CSS 样式。当类名 flipped 添加到卡片的类名上时，将展示卡片的背面。同时，该样式可以设置一个好看的翻转动效。

    .flip-container.flipped .back {
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    .flip-container.flipped .front {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

使用 Vue 的 created 生命周期函数添加新的属性，然后添加一个 flipCard 方法来翻转卡片。

    created(){
        this.cards.forEach((card) => {
            card.isFlipped = false;
        });
    },

    methods:{
        flipCard(card){
            card.isFlipped = true;
        }
    }

给卡片绑定点击事件，调用 flipCard 方法，然后使用 v-bind 指令给卡片绑定 flipped 类。

...

 ...

听上去不错 —— 我们看看点击一下卡片是否会翻转。

点击卡片未翻转

这个方法行不通，为什么呢？

回到刚才在生命周期函数中，我们在那里遍历卡片列表，并添加了一个新的属性，isFlipped——看上去没问题，但是 Vue 不喜欢这样。

想要让一个对象上新的属性生效，你需要使用 Vue.set 方法将它们添加到对象中。

    created(){
        this.cards.forEach((card) => {
            Vue.set(card,'isFlipped',false)
        });
    },

现在卡片应该在点击时会翻转了：

挺好的！我们继续写代码。

匹配和洗牌

对，没错！使用这些卡片制作一个记忆游戏，我们需要每张卡片都正好有跟它匹配的卡片。同时我们也需要在游戏开始时清洗卡片的排列顺序。

在 Vue 实例中添加一个 memoryCards 属性，存放翻转过的卡片（也就是说，每张翻转后的卡片，都有另一张卡片和它背面的图片）。

...
memoryCards: [],
...

匹配

将卡片数组拼接起来，赋值给 memoryCards 属性，以实现每两张卡片背面的图片相同。

改变在 HTML 中的 v-for 指令遍历对象，让它从原来的 cards 数组改变到 memoryCards 数组。

然后，修改 created 方法，将数组拼接到 memoryCards 中：

    created(){
        this.cards.forEach((card) => {
            Vue.set(card,'isFlipped',false)
        });

        var cards1 = this.cards;
        var cards2 = this.cards;
        this.memoryCards = this.memoryCards.concat(cards1, cards2);
    },

是不是挺简单？

但这么做有两个问题：

直接让 cards1 等于 this.cards，并不能产生一个新的用于匹配的 cards 对象，cards1 指向的仍然是原始对象。
cards1 和 cards2 指的是同一个对象。

改变 memoryCards 对象中的任何属性会引起两个匹配的数组同时变化。

我们可以试试用深拷贝来解决这个问题。

什么是深拷贝？

对于对象或数组中包含其他对象和数组的情况，要想拷贝这些元素需要通过深拷贝。否则，当改变嵌套引用上的数据时，原始对象和数组中的数据也会发生改变。

进行深拷贝的方法有很多，我们将使用最简单也是最常用的方法，使用 Lodash 库。

那么，什么是 Lodash 库?

Lodash 处理了对数组、数字、对象、字符串等类型的一些复杂操作，让 JavaScript 变得更方便使用。

在这个例子中，Lodash 有一个方法能让深拷贝的操作变得极其简单。

首先，通过下载源码或者使用 CDN 引用将 Lodash 包含在页面中。

接下来，使用 Lodash 的 cloneDeep 方法对卡片数组进行深拷贝。

 var cards1 = _.cloneDeep(this.cards);
 var cards2 = _.cloneDeep(this.cards);
 this.memoryCards = this.memoryCards.concat(cards1, cards2);

洗牌

现在我们将打乱组合起来的数组。Lodash 有一个可以方法同样可以打乱数组。我们使用这个方法，然后，为了简化代码，我们可以将拼合数组和打乱数组写在一行中。

created(){
        this.cards.forEach((card) => {
            Vue.set(card,'isFlipped',false)
        });

        this.memoryCards = _.shuffle(this.memoryCards.concat(_.cloneDeep(this.cards), _.cloneDeep(this.cards)));
    },

现在就能实现洗牌和正常的翻转啦。

匹配

下一步是匹配翻转的卡片。用户一次最多可以翻转两张卡片。如果背面的图片相同，那么匹配成功。如果不同，再翻转到正面。

我们给每张卡片增加一个新的属性，记录卡片是否已经匹配：

this.cards.forEach((card) => {
    Vue.set(card,'isFlipped',false);
    Vue.set(card,'isMatched',false);
});

创建一个新的属性用于存放翻转的卡片：

flippedCards: [],

接下来，我们定义一个 flipCard 方法去执行匹配的操作：

flipCard(card){
    card.isFlipped = true;

    if(this.flippedCards.length < 2)
        this.flippedCards.push(card);
    if(this.flippedCards.length === 2)    
        this._match(card);
},

_match(card){

    if(this.flippedCards[0].name === this.flippedCards[1].name)
        this.flippedCards.forEach(card => card.isMatched = true);
    else
        this.flippedCards.forEach(card => card.isFlipped = false);
    
    this.flippedCards = [];
},

这段逻辑很简单：我们持续往 flippedCards 数组中添加卡片，直到出现两张一样的为止。

当出现两张背面图片相同的卡片时，我们执行匹配的逻辑：

如果两张卡片的名字一样，我们通过设置 isMatched 属性为 true 来标记卡片匹配
否则，设置 isFlipped 属性为 false

之后我们清空 flippedCards 数组。

在匹配的卡片上添加新的 CSS 属性让其淡出：

.matched{
   opacity: 0.3;
}

在组件容器 class 上绑定属性，当卡片匹配时设置值为 true：

:class="{ 'flipped': card.isFlipped, 'matched' : card.isMatched }"

这里运行时正常，但是逻辑判断等都发生得太快了，以致于用户根本不知道发生了什么。如果卡片不匹配，它们甚至会在用户看到显示的卡片背面之前就向后翻转。

我们使用 JavaScript 的 setTimeout 方法来添加一些延迟效果。

_match(card){
    if(this.flippedCards[0].name === this.flippedCards[1].name){
        setTimeout(() => {
            this.flippedCards.forEach(card => card.isMatched = true);
            this.flippedCards = [];
        }, 400);
    }
    else{
        setTimeout(() => {
            this.flippedCards.forEach((card) => {card.isFlipped = false});
            this.flippedCards = [];
        }, 800);
    }
},

我们在卡片被标记匹配之前添加了 0.4 秒的延迟，以及卡片在翻回时添加了 0.8 秒的延迟。

同时修改 flipCard 方法，当出现以下情况时不翻转：

卡片已经匹配
卡片已经翻转
用户已经翻转两张卡片

flipCard(card){

    if(card.isMatched || card.isFlipped || this.flippedCards.length === 2)
            return;

    card.isFlipped = true;

    if(this.flippedCards.length < 2)
        this.flippedCards.push(card);
    if(this.flippedCards.length === 2)    
        this._match(card);
},

还差几步，项目马上就要完成了。

完成游戏

当所有卡片都得到匹配时，游戏就结束了。

让我们快速编写结束的条件代码，在 Vue 实例中声明一个新的属性：

...
finish: false

然后，我们修改一下 match 方法，检查是否所有的卡片都得到匹配：

setTimeout(() => {
    this.flippedCards.forEach(card => card.isMatched = true);
    this.flippedCards = [];

    //All cards matched ?
    if(this.memoryCards.every(card => card.isMatched === true)){
        this.finish = true;
    }

}, 400);

我们使用 JavaScript 数组操作中的 every 方法，用于判断给定条件是否为真，如果不是则返回 false。

记录翻转的次数和总耗时

我们创建好了游戏，现在添加一些画龙点睛的方法让游戏变得更有趣。我们将添加用户用了多少次，以及花费了多少事件来完成这个游戏。

首先，声明几个新的属性：

start: false
turns: 0,
totalTime: {
    minutes: 0,
    seconds: 0,
},

一旦有两张牌翻转，我们就增加次数。因此，我们需要修改 _match 方法来累计翻转。

...
_match(card){

    this.turns++;
    
    ...

然后修改 flipCard 方法来启动计时器：

flipCard(card){

    if(card.isMatched || card.isFlipped || this.flippedCards.length === 2)
            return;

    
    if(!this.start){
        this._startGame();
    }
    
    ...
    ...

增加两个方法，在游戏开始时启动计时：

_startGame(){
    this._tick();
    this.interval = setInterval(this._tick,1000);
    this.start = true;
},

_tick(){
    if(this.totalTime.seconds !== 59){
         this.totalTime.seconds++;
         return
     }

     this.totalTime.minutes++;
     this.totalTime.seconds = 0;
},

当分钟和秒前面数字只有一位的时候，我们使用 computed 属性来在它们前面补充 0。

computed:{
    sec(){
        if(this.totalTime.seconds < 10){
            return '0'+this.totalTime.seconds;
        }
        return this.totalTime.seconds;
    },
    min(){
        if(this.totalTime.minutes < 10){
            return '0'+this.totalTime.minutes;
        }
        return this.totalTime.minutes;
    }
}

在你用来显示总共次数和时间的 HTML 下面，添加以下的 HTML 代码：


    Turns : {{turns}} 
    Total Time : {{min}} : {{sec}}

修改游戏结束的判断条件，当游戏结束立刻停止计时：

if(this.memoryCards.every(card => card.isMatched === true)){
    clearInterval(this.interval);
    this.finish = true;
}

重置

我们到了最后一步了——如果能到达这里，那就说明你很厉害了。

给游戏添加一个重置按钮：

在 click 事件上绑定一个 reset 方法：

reset(){
    clearInterval(this.interval);

    this.cards.forEach((card) => {
        Vue.set(card, 'isFlipped',false);
        Vue.set(card, 'isMatched',false);
    });

    setTimeout(() => {  
        this.memoryCards = [];
        this.memoryCards = _.shuffle(this.memoryCards.concat(_.cloneDeep(this.cards), _.cloneDeep(this.cards)));
        this.totalTime.minutes = 0;
        this.totalTime.seconds = 0;
        this.start = false;
        this.finish = false;
        this.turns = 0;
        this.flippedCards = [];
           
        }, 600);
    
},

恭喜你用 VueJS 完成一个记忆游戏啦！

原文：How to Build a Memory Card Game with Vue.js，作者：Tushar Gugnani

React.js 项目实践——创建个人作品集网页

Jiawei Pan — Thu, 25 Jun 2020 10:36:51 +0000

我的朋友取消了我们的周末聚会计划之后，我就打算做点别的事情打发时间，然后从“to-do-list”中选择了“创建个人作品集网站”这一项。

我花了几个小时搜索技术和模板，然后确定用 React.js 创建这个网页，并把它部署到GitHub pages上。你可以在这里找到网页的代码。

本文将介绍什么

React.js 基础知识
使用 create-react-app
使用 GitHub pages 部署你的个人作品集网页

预备知识

提示 1：如果你对 React.js 和 React 组件的基础概念有一定了解可以跳过这部分。

提示 2：这些知识点能让你对 React 的世界有个基础的了解。我非常建议你通过 React官方文档 和 freeCodeCamp 学习更多内容。

什么是 React.js

基本的，你只需要知道 React.js 是一个用来构建 UI 组件的 JavaScript 库，它是由 Facebook 的工程师创建的项目，它正影响着 JavaScript 的世界。

什么是 React 组件

你可以通过类或者函数的方式来定义一个 React 组件，可以向组件传入 props 参数。

页面的 UI 可以通过组件的形式拆分成独立的部分，比如可以分成页头 header、主体 body、页尾 footer。每个组件都是独立运行的，因此每个组件都分别渲染到 ReactDOM 而不会影响整个页面。

通过 React 组件提供的生命周期方法，可以将想要执行的代码放到组件的 mounting（挂载）、rendering（渲染）、updating（更新）和 un-mounting（卸载）等各个阶段。

使用 React 组件时需要权衡利弊。比如，我们可以通过将组件导出到别的组件中来达到复用的效果，但有时候多个组件间的通信和触发渲染的问题会让人比较头疼。

这是 React 组件的样子。

import React, { Component } from 'react'

什么是 GitHub Pages

通过 GitHub Pages，你可以轻松地使用 GitHub 免费部署你的网页，无需担心配置问题。他们提供了各种模块，帮你处理很多事情。如果你坚持到最后，你会发现这就像魔法一样神奇。

预备工作

确定要在网站上放哪些内容

看一下你最新的简历（如果没有就立马创建一份），这会帮助你你理清哪些信息需要被放到作品集网站上。

寻找设计灵感

你可以在网上搜索到大量免费的作品集网站模版，看一下哪些内容适合自己的网站—— 拿出纸和笔，把你对网站的想法通过草图展现出来。我会用这个模板来画草图。

搜集一些你的美照

你肯定不想把自己邋遢的形象展示在作品集网站上，那就找一张你最满意的个人照吧。

打开你的最喜欢的歌单

俗话说得好：好的音乐可以帮助我们创建好的作品。不妨给你的网站增加点音乐！

我的个人作品集网站

开始创建项目

接下来我会一步步展示如何创建个人作品集网站。你不需要跟着我写同样的代码，只需要专注于学习概念，然后发挥你的创造力！我会分三部分进行说明。

设置 React-app
将 HTML 页面分解成 React 组件
在 GitHub pages 上部署应用

创建 React-app

我们会使用 create-react-app —— Facebook 提供的一个组件 —— 它可以帮助我们轻松创建 React 应用而不需要担心构建工具。

切换到控制台，执行 npm install create-react-app，安装这个模块（确保在此之前安装了 npm —— 点击此处查看更多信息)
接着运行 npm create-react-app ${project-name} 构建代码，创建出来的文件目录结构如下：

my-portfolio-app
├── README.md (GitHub 的项目描述文件)
├── node_modules (存储项目所需的模块)
├── package.json (存储项目源信息，如依赖包，版本号等等)
├── .gitignore (这里声明的文件和目录在提交到 GitHub 时会被忽略，如 node_modules)
├── public (存储图片，js，css文件)
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json 
└── src (应用的主要代码)
    ├── {在这里创建 Components 组件文件}
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

在 src 目录下创建一个 components 目录，稍后我们会在这里存放组件。

从HTML template 中拷贝所有的图片、字体、HTML 和 CSS 到 public 目录

现在你的目录结构看起来应该像这样。

运行 npm install ，安装所有的模块到 node_module目录中
如果你已经到了这一步了，那么运行 npm start，React 应用会被加载到 localhost 的 3000 端口，访问 https://localhost:3000，现在你应该能够看到 React-app 的开始页面了

拆分 HTML 页面到 React 组件中

请回忆我们前面在 src 目录下创建的 component 文件夹，现在我们将要把 HTML 模板页面拆分成一个个组件，然后把这些组件拼接起来组成 React 应用。

首先，你需要确定可以把单个 HTML 文件拆分成哪些组件 —— 就像 header、footer 和 contact me。你需要在这里发挥点创造力！！

找到没有在嵌套别的 section/div 标签中的 section/div 标签及其他类似标签，其中应包含有关页面特定部分的信息，并且独立于其他部分。我的 GitHub Repo 有详细介绍这一点。

提示：使用 “inspect element” 工具来演示代码，并注意浏览器中对应的变化。

这些 HTML 会被应用到组件的 render() 方法中。无论组件是否渲染到 ReactDOM，render() 方法都会返回这些 HTML。


    
        
        
            
            
                
                    
                        
                            
                                Hi! 
I'm Jackson
                                100% html5 bootstrap templates Made by colorlib.com
                                    Download CV 
                                
                        
                    
                
            
        
        
            
            
                
                    
                        
                            
                                I am 
a Designer
                                    100% html5 bootstrap templates Made by colorlib.com
                                    View Portfolio

HTML 文件中的 home 部分

import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    return (
      
        
            
                
                
                    
                    
                    
                        
                        
                            
                            Hi! 
I'm Jackson
                            100% html5 bootstrap templates Made by colorlib.com
                            Download CV 

                            

                        

                        

                    

                    

                

                
                    
                    
                    
                        
                        
                            
                            I am 
a Designer
                            100% html5 bootstrap templates Made by colorlib.com
                            View Portfolio 

                            

                        

                        

                    

                    

                

                

            

        

      

    )
  }
}

将 HTML 的 home 部分创建为 React 组件

提示：如果你暂时不知道怎么把它们变成 React 组件，试着重点关注“如何从 HTML 中辨别需要成为组件的部分”。当你渐渐地适应了 React 的使用，实现功能将会是小菜一碟。

你发现了 HTML 有些变化吗？ class 变成了 className。这些变化是因为 React 不支持 HTML 吗？实际上这是 JavaScript 的语法扩展，叫作 JSX，能让我们在 JS 中写 HTML。所以，我们需要在 HTML 基础上做些改变，把它们变成 JSX。

在这个项目中，我使用了 HTML to JSX 转换器，一个可以将 HTML 转换为 JSX 代码的工具。我非常建议你使用这些工具而不是手动转换代码。

稍后你应该有了几个不同的组件，马上就要到精彩环节了！在 App.js 组件中将这些不同类型的组件结合在一起（没错，你可以从一个组件中渲染另一个组件！），你的个人作品集应用马上就要好了。

import React, { Component } from 'react';
import './App.css';
import Sidebar from './components/sidebar'
import Introduction from './components/introduction'
import About from './components/about'
import Projects from './components/projects'
import Blog from './components/blog'
import Timeline from './components/timeline'
class App extends Component {
  render() {
    return (
      
        
        
        
            
            
            
            
            
              
          
      
    );
  }
}

在 app.js 中联合所有组件

注意前面的代码，为了能够在 render() 中使用代码，首先我们需要 import 组件。我们可以将或将标签添加到方法里。

在终端运行 npm start，然后你应该能在网页上看到变化。当你对代码做出修改时，你不需要再次运行这条命令，只要保存更新，React 会自动响应。多亏了[hot reload(热加载) ，我们进行快速轻量级的部署。

根据你简历的内容，使用 HTML 和 CSS 去美化页面，使你的作品集看起来更加炫酷。可以尝试使用使用不同的字体、颜色和图片。

将 React-app 部署到 GitHub pages 上

好了，恭喜你坚持到了这里。奖励一下努力工作的自己，休息一下，然后开始部署吧。

首先，你需要安装 GitHub pages 的 npm 包，在终端运行 _npm install gh-pages。

现在，你需要修改一下_manifest.json_文件：

添加 _homepage_ 属性，它的值会以这样的格式呈现——https://{github_id}.github.io/{github_repo}
在 _scripts_ 添加 _predeploy_ 和 _deploy_ 属性

现在你的 manifest.json 应该是这样：

{
    "name": "portfolio-app",
    "version": "0.1.0",
    "private": true,
    "homepage": "https://Dhruv34788.github.io/me",
    "dependencies": {
        "gh-pages": "^2.0.1",
        "react": "^16.8.3",
        "react-dom": "^16.8.3",
        "react-scripts": "2.1.5",
        "yarn": "^1.13.0"},
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "predeploy": "yarn run build",
        "deploy": "gh-pages -d build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"},
    "eslintConfig": {
        "extends": "react-app"},
    "browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
    ]
}

添加 gh-pages 链接后的 manifest.json

现在转到终端界面，运行 npm run deploy 命令，然后等待神奇事情发生。你的应用会在脚本成功执行后部署。访问你在 homepage 中提供的地址，检查应用是否正确部署。

提醒：将任何东西部署到网上前请务必认真仔细。进行安全检查，移除内部链接、密码或者任何你不想被别人看到的东西。

留给你的作业

好棒，你成功创建并部署了个人作品集应用！如果你有兴趣，可以将这些功能添加到你的网站中：

博客功能：通过 Node.js 和像 MongoDB 这样的非关系型数据库创建你的个人博客并整合到你的网站中。
图册展示：在页面中添加一个区域，展示你在社交媒体网站最近发布的照片
来自 Twitter 的反馈：在页面中添加一个展示你最近的推文的区域
随机的名人名言：在页面中添加一个随机展示名人名言的区域

如果你实现了任何一个功能，请和我分享你的成果。我非常乐意帮助别人，如果我帮得上的话^_^

结语

我想花一点时间来感谢那些给我灵感和知识，帮助我完成本文的人：

Quincy Larson, Sahat Yalkabov & community: 创建 freeCodeCamp ——一个学习和获取与 Web 技术相关的几乎所有知识的平台；使用自己动手代码的教学方式，并且全部无需付费。
Colorlib: 提供最好设计的模板，这对我的个人网站有巨大的启发。
Daniel Lo Nigro & community: 提供 HTML to JSX 的编译，事实证明，将 HTML 块转换为 JSX 代码时非常方便。
我的挚友: 帮助我纠正错误。
你: 坚持下去，希望你继续保持探索精神，创造更多神奇的作品。

原文：How to create your portfolio website using React.js，作者：Dhruv Barochiya

Jiawei Pan - freeCodeCamp.org

Python 基础教程：这个自动化程序让你的工作更高效

目录

自动化的领域

简单的自动化

公共 API 的自动化

API 的逆向工程

道德考量

创建整理目录脚本

设置参数解析器

从文件夹中获取文件列表

根据文件后缀名创建文件夹

一份完整的日常自动化程序指南

一个月之内参加 60 多场软件开发面试，我收获了什么？

我是怎么开始的

我学到了什么

面试前

我从面试申请中学到了什么

我通过邮件对招聘人员了解更多

面试阶段

电话面试

视频技术面试

如何开始处理一个问题

如何解决问题

当你被问题困住时怎么办

如何应对编码挑战

如何应对线下编写代码的面试题

你应该使用哪些技术

现场面试

面试后

如何面对失败

那么如何面对成功呢

做了这些之后，我会变得更好吗

接下来做什么

有用的资源

编程与人生

编程与人生之间的四个平衡

迭代就是进步

许多复杂的问题包是由很多已经解决的小问题构成

你如何看待问题将会决定你如何解决它

整体比部分更重要

Vue.js 项目实践——创建记忆卡片游戏

准备——包括项目所需的库

允许用户看到卡片网格

Vue 实例

HTML 标记

翻转卡片

匹配和洗牌

匹配

什么是深拷贝？

洗牌

匹配

完成游戏

记录翻转的次数和总耗时

重置

React.js 项目实践——创建个人作品集网页

本文将介绍什么

预备知识

什么是 React.js

什么是 React 组件

什么是 GitHub Pages

预备工作

确定要在网站上放哪些内容

寻找设计灵感

搜集一些你的美照

打开你的最喜欢的歌单

开始创建项目

创建 React-app

拆分 HTML 页面到 React 组件中

Hi! I'm Jackson

100% html5 bootstrap templates Made by colorlib.com

I am a Designer

100% html5 bootstrap templates Made by colorlib.com

Hi! I'm Jackson

100% html5 bootstrap templates Made by colorlib.com

I am a Designer

100% html5 bootstrap templates Made by colorlib.com

将 React-app 部署到 GitHub pages 上

留给你的作业

结语

Hi!
I'm Jackson

I am
a Designer

Hi!
I'm Jackson

I am
a Designer