大道理都是能用三两句话说清的 。

在我开发人员的职业生涯中,最好的决定之一就是不再满足于只做工具的使用者。

我决定创建我自己的工具,并不是为了卖钱,而是要了解这些技术的实际工作方式,并提升我的技术技能。

本文是关于这个决定如何改变我生活的小故事。

我的个人项目遇到的第一个重大挑战

我一直都是玩 CSS 的。在 2015 年,对 CSS 的热情让我很快成为了我们国家(巴西)的专家级人物。

那时,在我的朋友 Raphael Amorim 的鼓励下,我接受了“每天编写代码”挑战。挑战的内容基本上就是每天都在开源项目中写代码,坚持 1 年时间。

但在我刚开始编写代码的时候,我的 JavaScript 技能水平是非常低的。

当我收到在 Front in Valle(我的国家举办的一场大型前端会议)的邀请,希望我随意谈一些话题的时候,事情就不一样了。我冒出了一个天真的念头, 决定创建自己的 CSS 预处理器,从而学习有关用 JavaScript 的知识 。

标题Banana CSS


在 2016 年,我创建了一个称为 banana CSS 的 CSS 预处理器,这个项目的目的是学习 JavaScript,但到最后我学会了 Node.js、如何创建 CLI、lint、单元测试、JSDoc、持续集成、数据结构、AST、如何创建 gulp 插件等等一大堆知识。

Banana CSS 项目( https://github.com/bananacss)

标题深入前端开发领域

这时候,我觉得自己有必要了解更多关于浏览器中的 JavaScript 的知识,因此 我考虑了日常使用的主要工具 ,并选择了 React.js。

millenium.js

在 2017 年,我创建了一个名为 millenium.js 的项目,该项目的描述为:

一个用于创建函数式无状态组件并使用虚拟 DOM 渲染的 JavaScript 库。使用 Redux 创建超轻和快速应用程序的理想选择。

或者我最喜欢的描述是:

在不到 12 秒内渲染你的前端。

在这个项目中,我了解了性能相关的知识,以及创建前端库、算法、JSX 等的良好实践。当然,我保留了旧项目中的所有优秀实践。

Redux 的在线演示

millennium.js 项目

标题凭借热情探索新事物

在 2018 年,当我看完《头号玩家》电影之后,决定用 JavaScript 创建一个游戏。

使用 JavaScript 创建游戏是相对简单的任务,你有许多工具可以挑选,然后阅读文档,做些实验,就可以完成了。

但对我来说,我的风格当然是:创建一个用于创建游戏的新工具 。

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

  • List item
  • 不要使用 Canvas/WebGL。
  • 仅使用 CSS 渲染动画。
  • 编写函数式代码。
  • 尝试编写尽可能多的同构 / 通用代码。

burnout.js

最后,我创建了 burnout.js:

这是一个用于管理碰撞的 2D 游戏引擎。

在这个项目中,我学习了有关函数式编程、DOM 性能、算法(用于计算元素碰撞)和其他很多内容的知识。

burnout.js 项目( https://github.com/burnoutjs)

当然,我还是保留了所有优秀实践,例如单元测试、单元测试、单元测试,重要的事情说三遍。

标题做一个项目就冒出一个灵感

这时我又有了新的联想:

拜托,我怎么从未想到要创建自动化测试工具?

于是有了下面的项目。

标题N.O.M.s

通用 / 同构 JavaScript 单元测试。

在开发 burnout.js 时,我构建了 N.O.M.s(我的测试工具),并使用 N.O.M.s 库编写了 burnout.js 的全部单元测

创建测试库的目的是什么?

  • 它应该可以用在浏览器和 Node.js(同构 / 通用)中。
  • 在纯 JavaScript 中创建所有断言(不使用浏览器 API 或 Node.js 模块)。
  • 使用 Emojis。
  • 不要将自定义 CLI 用于运行测试。

    有趣的是,我用 Mocha 编写了 N.O.M.s 单元测试。很讽刺,但很有趣!

N.O.M.s 项目

值得重新发明轮子吗?

在完成这些个人项目(以及其他许多项目)之后,在 2019/2020 年,我主要开发公司产品,创建复杂的前端应用程序并领导一个全栈开发团队。

令我惊讶的是,在开源开发的最后几年中,我的技术水平提升了,并且可以轻松使用 React.JS、immutable.js、Web Components、flux、测试、PRPL 模式、后端 API(node.JS/python)、MongoDB,以及用于 Web 应用程序的许多工具 / 良好实践来实现复杂的架构!

结论

作为前后呼应:

在我的开发人员职业生涯中,最好的决定之一就是不满足于只做工具的使用者,而是 成为工具的创造者 。

延伸阅读

 
 

我是怎样通过个人项目成长为高级 JavaScript 开发者的的更多相关文章

  1. 怎么快速从产品助理/初级 PM 成长为高级 PM?

    一般想成为一枚产品经理的同学,如果没有经过系统的学习,都是从产品专员/助理开始做起的~ 那要想快速从产品助理/初级 PM 成长为高级 PM,以下这几点必不可少 直接上干货~ 全文篇幅较长,可以点赞收藏 ...

  2. ionic ios项目真机运行-不用开发者账号

    ionic ios项目真机运行-不用开发者账号 1. 添加ios平台 ionic platform add ios 2.使用XCODE打开项目 3.使用APPID登录XCODE 打开XCODE账号登录 ...

  3. 如何在Ionic2项目中使用第三方JavaScript库

    onic的官网放出一记大招Ionic and Typings,来介绍如何在Ionic2项目中使用第三方JavaScript库. 因为在前阵子正好想用一个非常有名的第三方JS库ChartJs来实现一些东 ...

  4. 我是如何在公司项目中使用ESLint来提升代码质量的

    ESLint:你认识我吗 ESLint是一个语法规则和代码风格的检查工具. 和学习所有编程语言一样,想要入门ESLint,首先要去它的官网看看:https://eslint.org/. ESLint的 ...

  5. 我是如何在实际项目中解决MySQL性能问题

    可能是本性不愿随众的原因,我对于程序员面试中动辄就是考察并发上千万级别的QPS向来嗤之以鼻,好像国内的应用都是那么多用户量一样,其实并发达到千万,百万以上的应用能有几个? 绝大多数的程序员面临的只是解 ...

  6. django之创建第7-1个项目-url配置高级

    修改urls.PY文件 # -*- coding: UTF-8 -*- from django.conf.urls import patterns, include, url # Uncomment ...

  7. 位运算在 PHP 实际项目当中的高级运用

    我们首先来看一个系统中常见的需求: 有一个广告表,我们要对广告做显示控制: 手动上下线. 只允许 VIP 查看. 可能的表结构如下: CREATE TABLE `finger_ad` ( `ad_id ...

  8. electron项目踩坑--A JavaScript error occurred in the main process:document is not defined

    前言 记录electron-vue项目开发中遇到的一个错误,运行时报错如图: 控制台报错如下: ReferenceError: document is not defined at Object.&l ...

  9. 项目总结15:JavaScript模拟表单提交(实现window.location.href-POST提交数据效果)

    JavaScript模拟表单提交(实现window.location.href-POST提交数据效果) 前沿 1-在具体项目开发中,用window.location.href方法下载文件,因windo ...

随机推荐

  1. C#LeetCode刷题之#141-环形链表(Linked List Cycle)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3901 访问. 给定一个链表,判断链表中是否有环. 进阶: 你能否 ...

  2. 详解POW工作量证明原理

    原文地址  来自 微信公众号 区块链大师 POW工作量证明(英文全称为Proof of Work)早在比特币出现之前就已经有人探索,常见的是利用HASH运算的复杂度进行CPU运算实现工作量确定,当然你 ...

  3. 三分钟秒懂BIO/NIO/AIO区别?

    首先来举个例子说明吧,假设你想吃一份盖饭: 同步阻塞:你到饭馆点餐,然后在那等着,还要一边喊:好了没啊! 同步非阻塞:在饭馆点完餐,就去遛狗了.不过溜一会儿,就回饭馆喊一声:好了没啊! 异步阻塞:遛狗 ...

  4. 面试题——20+Vue面试题整理

    0.那你能讲一讲MVVM吗? MVVM是Model-View-ViewModel缩写,也就是把MVC中的Controller演变成ViewModel. Model层代表数据模型,View代表UI组件, ...

  5. Wireshark中的Checksum: 0x90c5 [validation disabled]问题

    Wireshark中的Checksum: 0x90c5 [validation disabled]问题 废话不多说先上问题图: 这是我在做关于DNS协议PPT的时候出现的协议树第五项展开结果,可以发现 ...

  6. JUC---02

    目录 1.1 集合安全问题 1.1.1 ListNotSafe 1.1.2 MapNotSafe 1.1.3 SetNotSafe 1.1 集合安全问题 1.1.1 ListNotSafe 首先看一个 ...

  7. Linux权限之/etc/passwd文件

    在Linux /etc/passwd文件中每个用户都有一个对应的记录行,它记录了这个用户的一些基本属性.系统管理员经常会接触到这个文件的修改以完成对用户的管理工作.这个文件对所有用户都是可读的.但是L ...

  8. 操作系统-存储管理(3)高速缓存Cache

    存储器的组织形式: 数据总是在相邻两层之间复制传送,最小传送单位是定长块,互为副本(不删除) ️指令和数据有时间局部性和空间局部性.   高速缓冲存储器Cache 介于CPU和主存储器间的高速小容量存 ...

  9. SPSSAU数据分析思维培养系列2:方法选择篇

    大家好!在上篇文章中,我们一起学习了如何[掌握正确的数据处理思维].在完成数据准备和清理工作后,就要进入到正式分析阶段,而选择什么样的数据分析方法进行分析是关键. 想要进行科学和系统化的数据分析,分析 ...

  10. .NetCore使用Redis,StackExchange.Redis队列,发布与订阅,分布式锁的简单使用

    环境:之前一直是使用serverStack.Redis的客服端,今天来使用一下StackExchange.Redis(个人感觉更加的人性化一些,也是免费的,性能也不会差太多),版本为StackExch ...