我如何通过让简单的项目看起来更大而获得第一份开发人员的工作

本文最初发表于 Hashnode 的“ 4 周 4 篇文章 - Hashnode 写作马拉松”活动。它被Hashnode和daily.dev推荐。原文链接如下👇。

我是如何通过让简单的项目看起来更大而获得第一份开发人员工作的

获得你的第一份开发工作，不仅要注重技术技能，还要注重商业技能和软技能。学习行业知识、工具和技术。

yuridevat.hashnode.dev

我坚信，完美地通过技术面试和能够编写高质量的代码并不是获得开发人员第一份工作的唯一途径。

我没有只关注我知道自己无法在一年内获得（并且很可能还没有发展🙊）的技术技能，而是专注于业务和软技能，以展示我能为公司带来的价值。

而这一努力已获得回报。

目录

1. 从单个项目中可以获得什么
2. 如何在简历中描述这个项目
3. 谈论项目
4. 我对所有有抱负的开发人员的建议

大家好，我叫 Julia，是一名三十多岁的自学成才的前端开发人员，在赌场兼职期间学习了日语和音乐学，之后转行从事科技行业。

在本文中，我想分享我获得第一份开发人员工作的经历。我将用一个我认为我们都开发过的项目来演示我刚才提到的技能：计算器。

1. 从单个项目中能获得什么

我经常看到有人说，计算器不应该出现在你的作品集中，因为它太简单，而且不够独特。也许他们是对的。但一个项目本身的意义远不止代码。

您可以在面试期间展示和演示应用技能，并让面试官相信您所知道的远不止如何编写代码 - 众所周知，代码可以随时通过 Google 搜索到，而商业和社交技能则不能。

为了说明除了编程之外的其他技能的重要性，我使用 JavaScript 创建了一个简单的计算器。

提示：如果您想将计算器添加到您的投资组合中，您绝对应该添加更多功能，例如

• 十进制数
• 当用户点击运算符时，当前号码的显示会停留在屏幕上
• 单击最后一个结果后的数字即可重新启动，而无需使用删除键
• 或以小格式显示当前值上方所有已点击的数字和运算符，以了解迄今为止的计算结果

选择底行中间的 0.5x 可完整显示计算器。

这是GitHub 存储库的链接。

您将获得行业知识以及以下工具和技术技能：

行业知识

• 项目管理
• 时间管理
• 敏捷方法（例如 Scrum）

工具和技术

• HTML/CSS/JavaScript
• Git 版本控制
• GitHub
• 无障碍设施
• 测试
• 托管（例如 GitHub 页面）

相当多，不是吗？既然你知道自己取得了什么成果，就需要用专业的方式把它推销出去。

但首先，我想向您展示如何在您的简历中展示您的项目。

然后，我将向您展示如何在面试中使用上述术语，以使项目、我的工作方式以及我自己看起来专业且对工作有价值。

2. 如何在简历中描述这个项目

项目：函数计算器 （在 GitHub 上查看）

• 构建了一个功能计算器，它不仅可以进行基本计算，而且......（如果添加额外的功能，它还可以做任何超出此范围的事情）。
• 使用 HTML、SCSS、JavaScript，托管在 GitHub 页面上来运行应用程序。
• 使用 Git 进行版本控制，使用 Jest 编写测试并测试键盘和屏幕阅读器是否完全可访问。
• 使用敏捷方法通过 GitHub 项目跟踪项目进度：创建项目、创建和标记问题、进行冲刺工作、举行冲刺评审和回顾、编写文档（自述文件）

技能： HTML · SCSS · JavaScript · Git · GitHub · Jest · a11y · Scrum

通过以这种方式展示我的简单项目并以专业的方式谈论它们，我不仅能够说服人们首先获得我的简历进行面试，而且在我开始找工作后很快就找到了工作。

有关如何创建有前途的简历的更多建议，请查看我的文章👇

如何写一份有前途的简历

朱莉娅 👩🏻‍💻 GDE ・ 2021 年 10 月 27 日

#codenewbie #简历 #职业 #帮助

3. 谈论项目

假设面试官在面试过程中询问你关于这个特定项目的问题，例如：

面试官：您能告诉我您是如何创建这个项目的，从哪里开始，并向我介绍一下开发过程和您的代码，分享您的想法吗？

我会回答这样的问题，分享我的屏幕并展示项目和我目前在 GitHub 上讨论的部分（实际上我在面试期间就是这样做的）：

我尽量简洁，只提及最重要的要点，并以对话风格撰写。我还标出了所有能让你看起来更专业的词语。

在项目初期，我考虑了整个Web 开发流程、架构和设置，以及如何跟踪进度以确保项目在规定时间内完成。当然，对于这个小项目来说，这似乎有点过度，但我想在Scrum 团队中熟悉公司内部真实的开发流程，了解它的实际运作方式（或者至少我想象中的是这样的），即使我现在是一个单人团队。

我认为最好的方法是假装这个计算器应该成为一个可以投入生产的应用程序，并且必须经历整个 Web 开发过程。

我选择使用HTML、CSS（目前）和JavaScript来构建项目。为了更深入地学习SCSS，我后来更新了代码并创建了一些 mixin 来熟悉它。当然，对于这个特定的项目来说，SCSS 有点儿过度了，但我这样做只是为了练习，因为我经常看到一些职位描述要求具备 SCSS 知识。

我还考虑过使用TypeScript，因为这种语言在职位描述中经常出现，而且我可能会把它加进去学习，因为我以前从未用过。虽然我还不熟悉 TypeScript，但我知道它比原生 JavaScript 更安全，因为它有各种类型等等（致读者：你应该现在就把你对 TypeScript 的了解都讲出来）。而且，这也是一个很好的练习，可以让我更轻松地阅读文档。

通常我会用 CodePen 来做这种小项目。我觉得像 CodePen 或 CodeSandbox 这样的在线代码编辑器是快速创建小项目并立即查看输出的好工具。但正如我在开头所说，我想在真实的环境中创建这个计算器。所以我选择了GitHub来实现它。

我知道还有另一个很棒的工具叫做Gitlab，公司经常使用它，但我个人更喜欢 GitHub，主要是因为它的社区，也是因为最近它发生了很大的变化。

因此，我使用 GitHub 来管理git 版本控制，我知道它用于追踪代码的所有进展。据我了解，其他开发者通常会有一个主分支，开发者会从该分支创建自己的分支来解决问题。当所有工作完成后，他们会创建一个拉取请求，将自己的分支合并到主分支中。

因为我想练习一些常用的git 命令，所以我在这个项目上也做了同样的事情。对于每个问题，我都创建一个单独的分支，编写代码，当我对代码满意后，我会创建一个拉取请求，然后将其合并到主分支。

我使用的git 命令例如：git checkout -b my-branch、、、、。我知道还有很多其他命令，但由于项目规模和团队规模的原因git commit -m "what did I do"，我估计从来没用过它们。由于每次只有一个分支合并到主分支，所以很可能没有冲突。不过我确信我会正确使用更高级的 git 命令。git pushgit pullgit merge

对于项目的文件夹结构，我决定创建两个文件夹（编写测试时则为三个），一个用于存放资源（例如图片），另一个用于存放源代码。我认为项目越大，文件夹越多，结构也会越复杂。我非常期待在实际项目中学习如何思考架构和设计系统。我发现这种思维方式非常有趣。

据我所知，公司里有一些小团队，他们会一起完成一个项目。正如我之前所说，他们会创建一些主题，每个开发人员都会选择一个主题进行工作。这些团队采用敏捷的方式工作，比如Scrum，我发现整个Scrum框架非常有趣。所以我设想每天开一个大约15分钟的会议，每个人简要地讨论一下昨天取得的成果以及今天要做的事情。

我也想为自己创造这样的环境。我认为最好的方法是创建一个GitHub 提供的项目和问题。我知道公司经常使用一个名为Jira的工具，它可以让你创建整个项目和问题，并让开发人员注册问题。

我认为GitHub项目是一个非常好的项目管理工具，如果我了解这里的流程和功能，我肯定可以很快理解Jira。

因此，我创建了几个任务，例如项目设置、为计算器编写 HTML、使用名为 Figma 的设计工具创建设计（我想在更大的团队中会有设计师来做这件事，我需要将设计转换为代码，但由于我是一个单人团队，所以我独自完成了它），将设计转换为 CSS 代码，向计算器添加功能，诸如此类的任务。

我在自学中经常看到关于网页可访问性及其重要性的讨论。因此，我希望通过仅使用对比度较高的颜色来提高应用程序的可访问性。我还确保计算器也能仅通过键盘操作，并且焦点能够正确显示。

我保留了轮廓的默认值，但我经常看到一些公司在焦点对准时使用其主色来显示轮廓。这对我来说很合理，我想这取决于应用程序的颜色。

你可以在项目上运行一个名为 Lighthouse 的扩展程序，它可以显示网站的可访问性，或者性能和 SEO 的优劣。我尝试在每个方面都达到 100%。但我听说，即使可访问性达到 100%，也不一定意味着网站真正实现了完全可访问。目前我对此了解不多，但我希望将来能够深入研究，因为我认为这是一个重要的课题。

我思考了完成每个任务以及整个项目需要多长时间，添加了里程碑，并给这些项目贴上了改进或新功能之类的标签，然后分配给我。GitHub项目真的很棒，它提供了所有问题的概览。我想，在一个更大的项目中，应该会有更多的标签，比如 bug、缺陷等等。

我听说一个项目通常有一个大约两周的冲刺周期，团队必须完成一定数量的问题。此外，还会有类似冲刺评审或回顾会议的会议，Scrum 团队会在会上讨论过去两周的进展情况，或者向利益相关者展示已完成的问题。

即使没有利益相关者，也没有如此漫长的开发流程，我也会思考哪些方面做得不错，或者在下一个项目中可以改进哪些方面。我发现自己经常低估时间。我以为这个问题大概需要20分钟，但实际上却花了1到1.5个小时。这让我很惊讶。不过，注意到这一点后，以后我会更好地估算问题的时间。

您还可以设置项目样式，例如看板。就像典型的待办事项列表一样：哪些待办事项是打开的，我现在正在做什么，哪些待办事项已经完成。这帮助我很好地了解项目进度。

我还为这个项目编写了一些测试（致读者：目前为止，这个项目还没有编写任何测试。但这并不意味着现在不能谈论测试）。我知道有很多测试，例如单元测试、集成测试、以及大型项目中使用的端到端测试。我也听说过很多自动化工具，比如阻止某人提交代码，因为提交信息开头不符合公司建议，或者在没有高层审核 PR 的情况下阻止合并。

我非常期待能参与一个大型项目，在那里我可以在现实生活中看到这样的自动化测试。我认为这对代码质量非常有益。

我还将该项目托管在 GitHub 上，以便其他人可以查看并试用。我还添加了一个自述文件，其中详细描述了该项目，添加了屏幕截图，并展示了其他人如何使用我的代码。我在代码库的“关于”部分添加了信息，并添加了标签，以便其他人可以找到该项目。此外，我还在此处和自述文件中提供了实时预览的链接。

我认为充分利用工具的极限非常重要。在 GitHub 上，你可以做很多事情，让你的项目以专业的方式脱颖而出。

现在我们来看看代码。在 HTML 文件中，出于 SEO 的原因，我尝试使用不同的元标记，这样我的网站更容易被找到，并且我设置了视口，以确保在移动设备上也能良好使用。

我已将代码分成计算器中每行的几个部分，这使得以后更容易使用CSS 网格。

对于SCSS，我将颜色、字体、渐变和边框值保存在变量中，以便于使用。这样做的目的是，例如，如果你想更改基色，只需更改一次，而不必对每个使用该颜色的类都进行更改。在 CSS 中，你也可以将颜色存储在变量中。

我还使用了mixin，它允许你创建基本样式，然后根据特定用途进行调整。我按字母顺序排列这些值，以提高可读性。这可以避免代码重复。当然，正如我在开头所说，对于这种规模的项目来说，CSS 已经足够了。不过，我学到了很多关于 SCSS 的知识，这真的很有帮助。

现在让我们看一下 JavaScript 代码。首先，我创建了一个函数来区分用户点击的是运算符还是数字，以决定调用哪个函数。当用户点击的是运算符（或符号）时，switch 语句将接管该函数。

我选择了 switch 语句而不是 if else 语句，因为我认为组合后的最后一个 switch（其功能由一个单独的函数处理，该函数flushOperation从第 64 行开始）可读性更高。最后，我把这个eventListener功能添加到了按钮上。

就是这样。如果您对代码或 Web 开发流程还有其他疑问，请告诉我。

你不觉得，这个简单的计算器有很多内容可以讨论吗？还有很多内容可以添加，比如更多地讨论测试、GitHub 自动化、元数据、SEO、可访问性，或者你比我更熟悉的主题。

有关开发流程的更多信息，请查看我的文章👇

在 Web 开发过程中集成可访问性

朱莉娅 👩🏻‍💻 GDE ・ 2022 年 8 月 10 日

#a11 #inclusion #webdev #management

我希望你现在对开发流程中涉及的内容有所了解。这不仅仅是代码，还有很多其他内容可以讨论，也许你像我一样，觉得这些话题比代码更适合你。

另外，不要等到别人问你某些问题时才炫耀你的技能和知识。因为这些问题可能永远不会被问到，或者以你希望被问到的方式被问到。

4. 我对所有有抱负的开发者的建议

不要只关注代码，因为在工作中，你大部分时间都会在谷歌上搜索问题的解决方案，或者与其他开发者讨论概念和可能性。要专注于解决问题的方法，开发产品的思维方式（从规划开始，到开发本身，再到完成整个过程），以及商业和社交技能。

另外，找到一个你擅长的领域，并尽可能地专注于此（就像我作为前端开发人员在无障碍访问和用户体验设计方面所做的那样）。编程语言种类繁多，需要学习的东西也很多。无论如何，在科技领域找工作意味着踏上终身学习的旅程。

了解自己的技能，开诚布公地谈论自己的优势和劣势、已知和未知的知识，以及如果遇到不熟悉的领域，你会如何处理。这将有助于面试官了解你是谁，以及你如何融入团队。开发团队中有很多职位，所以肯定有适合你的位置。

感谢您的阅读和付出。我非常感激！