前端废材的自我劝退之路 | 2019 年度总结

痛定思痛。 2023-06-25 12:30 5阅读 0赞

## 1. 差不多前端的差不多自白    ##

因为写博客加了许多同行粉丝，有些人会试探性地询问我哪高就，以及是否科班。

多数情况下我基本不回应。并非我高傲冷漠，而是真没可谈的：

1.  和多数转行从事前端的盆友相似，我基底很浅：非本，无大厂经验。
2.  入行初衷，只是面向工资择业，以及少许的兴趣（更多是因为找不到工作，被迫自学）。
3.  履历上也没有拿得出手的项目经验，面试基本靠运气。![format_png][]

以下是稍微正式点的自我介绍：

**我叫“笑妄”，16 年地理信息系统专业专科毕业，自学的前端。目前三年半的经验，前后工作过几家中小公司，做过 Python 爬虫，也曾在运维开发部混过。前两年的工作，都在为生计挣扎，做码农仅因自身一无所长，看这行工资高，就挤进来了。**

![format_png 1][]

微博时代起，我的网名“笑妄”就一直没变过，而今年则多了一个身份：“前端劝退师”。

从前端废材，到掘金/公众号 总阅读破百万的**前端劝退师**，我耗时 10 个月达成。

而我也从中获益良多，在不停变法子劝退自己的同时，写了一些对掘友还算有点帮助的文章。

## 2. 劝退自己，掌控知识 ##

19 年初，当我在某速运公司的运维开发部待了近大半年后，开始有了跳槽的念头：

*  外因：公司各项福利和奇葩手段，使我觉得心理不适。
 *  内因：写了三年的后台系统，需要突破自己的技术瓶颈期。

于是我开始审视更新后的简历，简直惨不忍睹，堪称“三无”前端：无学历，无能力，无亮点。

心想完蛋，拿什么与人争。当时也没什么好的想法，就把面试相关基础补了一遍。而某一天在水群时，看了浪浪@浪里行舟 的一篇《写技术博客那点事》\[1\]：

> “从某种意义上说，博客是我最好的学习笔记和个人名片。在 IT 行业内，技术博客是了解一个开发者最好的方式之一，特别是当你没有一张足够分量的文凭或者一段出彩的工作经历时，你就应该沉下心来好好打磨自己技术，打造自己的博客。往者不可谏，来者犹可追。”

喔吼，那就写吧。就在我着手博客事宜时，我迎来了自己的第一只猫：多多。![format_png 2][]于是，我便开启了左手撸猫，右手敲文的快哉生活。

## 3. 平衡工作和学习（合理安排摸鱼时间） ##

自 3 月起，我开始利用攒下来的加班调休时间，陆续的请假去面试。而且当时部门处于空闲期，作为一个不起眼的小虾米，上班逛技术社区也没人理会。

于是我多进程操作：

1.  每周约 1 ～ 2 次面试，详细记录每次面试的踩坑点。
2.  将每次面试当成打怪升级，总结成博客大纲。
3.  上`medium`,`掘金`等技术社区，寻求答案。

总结起来就是，**前两天面试，中间一天整理，剩下三四天总结成文。**

说来容易，过程却是很煎熬：既不想写堆叠资源 list 文，也不愿复刻一遍他人的知识。

那咋办？**先仿写，再总结。** 加上该有的引用，一篇热辣辣的文章就出炉了。

## 4. 劝退总结 ##

三月面试时，面试吹嘘过自己的博客，当时说自己掘金阅读`3W+`，而到了今日，已经突破`50W`关卡，并晋级为掘金共建者。

30 篇博客，每篇都是力求有趣，不乏味。涉猎的范围，也不至于前端：

### 1. `Vue`相关 ###

![format_png 3][]

*  《「Vue 实践」项目升级 vue-cli3 的正确姿势》\[2\]
 *  《「从源码中学习」Vue 源码中的 JS 骚操作》\[3\]
 *  《「从源码中学习」彻底理解 Vue 选项 Props》\[4\]
 *  《「从源码中学习」面试官都不知道的 Vue 题目答案》\[5\]
 *  《「Vue 实践」武装你的前端项目》\[6\]
 *  《「Vue 进阶」5 分钟撸一个 Vue CLI 插件》\[7\]
 *  《 Vue3.0 前的 TypeScript 最佳入门实践》\[8\]

### 2. `JavaScript`相关 ###

![format_png 4][]

*  《为何你始终理解不了 JavaScript 作用域链？》\[9\]
 *  《「中高级前端面试」JavaScript 手写代码无敌秘籍》\[10\]
 *  《JavaScript 工具函数大全（新）》\[11\]
 *  《现代浏览器观察者 Observer API 指南（新）》\[12\]
 *  《Typescript 严格模式有多严格？》\[13\]
 *  《2019 年前端大事件回顾：流年笑掷，未来可期》\[14\]

### 3. 性能优化与前端调试 ###

![format_png 5][]

*  《「简明性能优化」双端开启 Gzip 指南》\[15\]
 *  《Chrome Devtools 高级调试指南（新）》\[16\]

### 4. 全栈及网络原理 ###

![format_png 6][]

*  《「真香警告」重学 TCP/IP 协议 与三次握手》\[17\]
 *  《「真 ® 全栈之路」Web 前端开发的后端指南》\[18\]
 *  《「真 ® 全栈之路 - DNS 篇」故事从输入 URL 开始.....》\[19\]
 *  《「DevOps」闲聊我心中的运维开发》\[20\]
 *  《一文搞懂 Web 中暗藏的密码学》\[21\]
 *  《都快 2020 年了，还不会 Linux 基础命令？》\[22\]
 *  《我为什么建议前端将 Python 作为第二语言？》\[23\]

### 5. 数据结构与设计模式 ###

![format_png 7][]

*  《「中高级前端」窥探数据结构的世界- ES6 版》\[24\]
 *  \[《那些你不经意间使用的设计模式(一) - 创建型模式》\](https://juejin.im/post/5d35d8c4518825360f16198e "《那些你不经意间使用的设计模式(一 "《那些你不经意间使用的设计模式(一) - 创建型模式》") - 创建型模式》")
 *  《切图仔最后的倔强：包教不包会设计模式 - 结构型》\[25\]

### 6. 数据可视化与交互 ###

![format_png 8][]

*  《「数据可视化库王者」D3.js 极速上手到 Vue 应用》\[26\]
 *  《160 行代码实现动态炫酷的可视化图表 - 排行榜》\[27\]
 *  《120 行代码实现一个交互完整的拖拽上传组件》\[28\]
 *  《90 行代码，15 个元素实现无限滚动》\[29\]
 *  《颜值即正义！这几个库颠覆你对数据交互的想象》\[30\]

这些多数篇章都在`3000`字以上，早期的更是`8000`字开外。碍于知识有限，文章多有勘误。在此也感谢各位掘友的指正与支持。

在写完这些文章后，我多多也长成下面模样：

![format_png 9][]

## 5. 收获与进步 ##

2019 年应该是我从业以来技术进步最快的一年：

1.  `React/Vue` 涉猎源码和性能优化。
2.  浏览器/计算机网络 原理。
3.  数据结构与设计模式。
4.  `JavaScript`及各类库

而我已收获了不少：

1.  积攒了一定的人气，微信好友从百人到千人。
2.  工作之余还有副业收入。
3.  被我带入前端行业的盆友愈多。
4.  拥有了自己的猫。

## 6. 这一行烟尘滚滚 ##

> “有天若有人问，这一行烟尘滚滚。成败不论，我给自己打几分。我会说我很努力， 也祈祷好运气......一路上，要不是你们这些人，我不可能。” --- 李宗盛《你们》

![format_png 10][]劝退师的公众号头像是李宗盛，熟悉我的盆友也知道，我将李宗盛当作偶像。

除了他写的歌深入人心，还因为他的人生经历：**瓦斯行老板的儿子，中专挂科读多了两年，后靠自己的天赋加努力成为一代音乐教父。**

他前二十几岁的经历，像极了我们这些普普通通的转行前端 er：

**年少成绩不佳，待到出来社会，家中也无 IT 行业的带路人，只得独自摸索，磕磕碰碰的从事了编程这行。**

![format_png 11][]而我走过不少弯路，但好在有这些人和事赏识/支撑我下去：

*  感激我偶像李宗盛，谢谢你鼓励了我的灵魂。
 *  感恩我的第一位老大`Carson`（前 IBM 技术大拿），若非您从茫茫简历中捞起我来，我可能已经自卑转行了。
 *  感谢 掘金/奇舞周刊/前端大全 等平台的认可，撑起了“前端劝退师”的影响力。
 *  鸣谢各位前端同行的支持，是你们给我了写下去的动力与灵感。

![format_png 12][]最后，**“期望风不伤你心雨不挡你路，甜梦布满冰冷漫漫长夜。还愿星光因你闪指引你路，期望你每天色彩里走过。” ---《舍不得你》**

![format_png 13][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9pY25yTkJpY0Voa1ZVaWFtSVZITTFZTWljRDZDUkRrZGljYmswc0FPNTNNTHpwakVCZU1hWnc3QldBMmFmSndNODJ5V3hvaWNPUEkzS3QxOWd3NjczdUFGOFFrdy82NDA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9pY25yTkJpY0Voa1ZVaWFtSVZITTFZTWljRDZDUkRrZGljYmswM29YbU5JdzM0Sm8yS1EyUFJEYVNUZkI0bXROWWZQOWMzVHQ0aWFCV2JsYU9qY2FDckNMd3pHdy82NDA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9pY25yTkJpY0Voa1ZVaWFtSVZITTFZTWljRDZDUkRrZGljYmswSmliV0ozZW4zZHQxaWF4amlidnZUdUNYNlBpYUY3Nm9MaWJObXlhMWt1UTY5OVR4WEI2OUt6T0xDeWcvNjQw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9pY25yTkJpY0Voa1ZVaWFtSVZITTFZTWljRDZDUkRrZGljYmswM012RGh6SWljZTJBNk0zVDRpYWZOOWlhYmJpY1pvQ1dJekhjSUUyMGljRTVwdmRpYnZpY1JCR3Y0bENlZy82NDA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9pY25yTkJpY0Voa1ZVaWFtSVZITTFZTWljRDZDUkRrZGljYmswV01KZ05oaWI1YUU4ZXVJT1FsUEc5Y2lha2w2aFJrQXVqenVpYTVJYWhFU3llM3VOUno2Y2ljR2Q2US82NDA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9pY25yTkJpY0Voa1ZVaWFtSVZITTFZTWljRDZDUkRrZGljYmswcmpqekdjUGRqY2Q1NFZaVmtLV1FrN3RTdDJXaWNjNmpyOVQ1NWliWUJoa1Y5ZG1kV0xQc1dXZ3cvNjQw?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9pY25yTkJpY0Voa1ZVaWFtSVZITTFZTWljRDZDUkRrZGljYmswaWNqbDl1bE9xNkVvTkZxMUQxV3NvclFRcHdpYkFuVHdQdng4eHBFeWtrcmxZSjVGTE9mTzF2YXcvNjQw?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9pY25yTkJpY0Voa1ZVaWFtSVZITTFZTWljRDZDUkRrZGljYmswaWFrcHRaZVRkbE5GeTNNaHE3TXlWaWNiUXJvOHNpYmxjMGVyaWNjNHN2WVhxMUR2UHJZRkpQN3ZOQS82NDA?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9pY25yTkJpY0Voa1ZVaWFtSVZITTFZTWljRDZDUkRrZGljYmswa2U1ZFNpY2Jkd2NyRkNaTTFGRlZJbVB1aWNtNGQxRXBmZTBiQXN0Z2lhdUVoS3hUZ0RERW5qYmljZy82NDA?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9pY25yTkJpY0Voa1ZVaWFtSVZITTFZTWljRDZDUkRrZGljYmswWVVaaWE5MksxY3lPVkduOWVDQlNBb2xBYU5VVnFyOVk4U2c1MEprb2NxalJCTHJOSTRtMndCQS82NDA?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9pY25yTkJpY0Voa1ZVaWFtSVZITTFZTWljRDZDUkRrZGljYmswRUNrRDBWWWh5akhkejZIdVFoMFF1dHRLRUl3NzUxaWJLWUdycXlHRkszbTNqcEpqZHFMMXpTUS82NDA?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9pY25yTkJpY0Voa1ZVaWFtSVZITTFZTWljRDZDUkRrZGljYmswN1VqNjJPMWNEbHM3UkNRTWJqMmFUOTBacVRhbmJVcHFNOEZrNkNrelg2SXp2TWhpYzJVUHBjUS82NDA?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9pY25yTkJpY0Voa1ZVaWFtSVZITTFZTWljRDZDUkRrZGljYmsweVdnRGhNaGdxSm03amh2OWlhMURNM3NoWTZSaWE5cUt4NUFTeGVIclJHNHYybFZYT2xNMUhqUEEvNjQw?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9pY25yTkJpY0Voa1ZVaWFtSVZITTFZTWljRDZDUkRrZGljYmswSDIxejFpY0ZDM1Q0QW10MEJTUFhicUdhYkRDZnltbFdPYWljYmVza09NaWF1bDhHYktPcE5zUmRnLzY0MA?x-oss-process=image/format,png