我是如何通过个人项目成为高级 JavaScript 开发人员的

一切都可以用一句话来概括

我个人项目面临的第一个重大挑战

深入前端开发。

用我的热情去探索新事物

项目触发器

是否值得重新发明轮子？

结论

一切都可以用一句话来概括

在我的开发生涯中，最好的决定之一就是不仅仅使用工具。

我决定创建自己的工具，不是为了商业目的，而是为了了解这些技术实际上是如何工作的，并提高我的技术技能。

这是一个关于这个决定如何改变我生活的简短故事。

我个人项目面临的第一个重大挑战

我一直都是这样的CSS人。2015年，我对它的热情CSS让我在我的国家（巴西）迅速成为“标杆”。

这时，在朋友Raphael Amorim的启发下，我接受了“每天写代码”的挑战，基本上每天都在开源项目中工作，持续了一年。

好的，但是在我开始编码的最初几天，我的javaScript技能非常有限。

自从我收到Front in Valle（我家乡的一个大型前端会议）的邀请，可以畅谈任何话题后，一切都改变了。于是，我萌生了一个既天真又绝妙的想法。我决定学习如何javascript创建自己的前端CSS preprocessor。

Banana CSS

🍌巴西 CSS 超集。

2016 年，我创建了名为CSS preprocessor的项目banana CSS，该项目的目标是学习javascript，但我最终了解了Node.js、如何creating CLIs、lint、unit tests、JSDocs、、如何创建插件等等。continuous integrationdata structuresASTgulp

动图

链接到 Banana CSS 项目。

深入前端开发。

好的，此时我觉得有必要javascript在浏览器中进行更多了解，因此我考虑了我日常使用的主要工具并得出结论，它是React.js。

所以...

millenium.js

2017年我创建了一个名为的项目millenium.js，这个项目的描述是：

一个javascript用于创建函数式无状态组件并使用 进行渲染的库Virtual DOM。非常适合使用 来创建超轻量级和快速的应用程序Redux。

或者我最喜欢的描述：

🚀在不到 12 秒差距的时间内完成渲染。front-end

在这个项目中，我学习了性能、创建front-end库的最佳实践等等。当然，我保留了之前项目中所有最佳实践algorithms。JSX

动图

查看使用 Redux 的在线 DEMO。

链接到 millennium.js 项目。

用我的热情去探索新事物

2018 年，看完《头号玩家》电影后，我走出电影院，决心用它制作一款游戏javascript。

创建游戏javascript相对简单，您可以在众多工具中进行选择，阅读文档，进行实验，然后就完成了。

但是，（对我来说）自然的决定是：创建一个用于创建游戏的新工具。

对于这个项目，我决定定义一些有趣的规则：

• 不要使用Canvas/ WebGL。
• 仅用于CSS渲染动画。
• 编写功能代码。
• 尝试写出尽可能多的isomorphic/universal代码。

burnout.js

最后，我创建了burnout.js：

🎮用于管理碰撞的 2D 游戏引擎。

在这个项目中，我学到了更多关于functional programming性能DOM（algorithms用于计算元素碰撞）等等的知识。

动图

链接到 burnout.js 项目。

当然，我再次保持了所有良好的做法，例如，，，unit tests嗯......unit testsunit tests

项目触发器

这时，我突然有了一个顿悟：

天哪，我为什么从来没有想过创建自己的自动化测试工具？

所以...

诺姆人

🔮针对女巫的通用/同构 javascript 单元测试。

在工作期间，burnout.js我构建了N.O.M.s（我的测试工具）并使用该库编写了100％ 的内容burnout.js unit testsN.O.M.s。

创建我的测试库的目标是什么？

• 它应该在浏览器和Node.js（isomorphic/ universal）中运行。
• 以纯粹的方式创建所有断言Javascript（不使用浏览器APIs或Node.js模块）。
• 使用Emojis。
• 不要使用自定义方式CLI来运行测试。

动图

好奇心：我用 Mocha 写了N.O.M.s单元测试。讽刺又好笑😅！

链接到 NOMs 项目。

是否值得重新发明轮子？

在完成这些个人项目（以及许多其他项目）之后，2019/2020 年我将时间花在企业产品上，创建复杂的前端应用程序，并领导full-stack开发团队。

令我惊讶的是，在过去几年的开源开发中，我的技术水平得到了很大的提高，并且我可以毫无问题地使用、、、、、、（React.JS/ ）、以及许多用于 Web 应用程序的工具/良好实践来实现复杂的架构！immutable.jsweb componentsfluxtestsPRPL patternback-end APIsnode.JSpythonMongoDB

结论

我以第一段作为这篇博文的补充：

我开发生涯中做出的最佳决定之一就是不仅仅使用工具，还决定创建工具。

非常感谢您阅读我的第一篇英文博客文章。

如果您喜欢此内容，请在Github和/或Twitter上关注我💜。

干杯。