1年转行资深前端工程师,开源项目过 1k stars,完整学习过程
先介绍下大致情况时间线。
18 年 8 月正式转方向为前端,之前做了一段时间的 iOS,后来因为对前端更感兴趣所以就打算转方向了。19 年 10 月入职当前公司,定级资深前端,分配到业务架构小组,自此在一年零两月的时间内完成从 iOS 转方向到资深前端的过程。
很多读者会问我是如何学习的,今天这篇文章就来完整的梳理一遍整个过程。过程可能不能复制,但是其中很多的方法论我相信一定对你有帮助。
学习经历
转前端之前
17 年底开始正式学习前端,这时还在做 iOS 开发,所以拿来学习的时间并不会很多。偏向实战论,喜欢边学边补,至今完整读过的前端书籍寥寥几本
- 你不知道的 JS 基本读完
- 忍者秘籍第二版读完
- 其他零零碎碎的读过一些书,但是基本都是随便翻翻就过了
很多人推崇的红宝书笔者就读了四五章节,这本书主要是基础内容,对于基础内容我更喜欢读文档。MDN 翻一翻,网上查一查,基本就能把 JS 基础了解个大概,CSS 及 HTML 的内容基本没花时间学,都是现学现用。
在转前端之前大致的学习路线如下:
- JS 基础了解个大概,CSS 和 HTML 花的时间很少,当然在后续的学习过程中逐步在填补基础的漏洞,只是没有一开始就花大量的时间去学习。
- 读文档,开始写 Vue。将自己的需求写成一个小项目,主要技术栈为 Vue 及 Node,都只属于会用。
- 从同事那里了解到 Webpack 是个难啃的东西,自己买了 相关的课,照样画葫芦最后产出一个教程。
- 开始学习 React,同样也买了相关的课,最后产出一个开源项目,至今过 1k stars。
时间节点到这里大概是 18 年 1 月份,总结几个帮助我学习的点:
- 动手很重要,把自己学到的知识写成一个小项目或者文章,对于自己的帮助是很大的。在这个节点之前,我在掘金产出了六篇前端相关的文章,获得了四千多的点赞。
- 文档最重要,牛逼的项目的文档几乎没有错误,只有二手资料才会错误百出。
- 活用搜索引擎,那时候我还是个小透明,没加过任何的前端群,有问题就是谷歌搜答案。遇到报错就把报错丢上去;遇到写的和预期不对就把想要的搜一下;遇到自己没学过的,就搜一下相关知识,就这样逐步累积上来。当然在这一步最为核心的点是得用英文 + 谷歌搜索,缺一效率就低。觉得自己英语不好的不要担心,把自己想问的谷歌翻译一下不就好了。
接下来就是一个面试季了,这时候掘金的面经文章层出不穷,我也尝试去解答了那些面试题。这时发现自己不会的相当多,因此觉得这些面试题会是一个帮助自己填补知识漏洞的好办法。
于是接下来很长一段时间我都是处于这样一个循环中:
- 找面试题
- 回答面试题,挖掘它背后的知识点,写成内容
在这个循环中我逐步发现如果我能把这个东西做大做好,那么一定会是个爆款,毕竟那时候没有竞品,转方向的念头也是这个期间萌发的。后面的事情应该很多读者都晓得了,我把它做成了开源,最后获得了一万六千多的 stars。
在这个做开源的期间,我觉得最重要的可能是费曼学习法了,也就是以教促学。从我不会到我觉得自己会了到最后把自己会的东西写成内容教给别人,那时候的学习途径如下:
- 发现自己不会的点,不管你是从哪里发现的
- 搜索资料,尝试搞懂它
- 写一下代码,验证一下
- 把自己理解的写成文字
- 把自己代入读者,看着自己写的内容是否能学会这个知识
- 多搜索这个知识相关的文章,看看有没有遗漏的
- 在前几个环节你可能还会发现更多自己不会的点,继续循环
整个开源项目我都是这样操作下来的,其中包括了之前我不懂的、懂的、懂的但并不完善的知识,通过以上的学习方法完成了自己的知识梳理及填补漏洞的过程,至今我还一直践行着以上方法论,真的很有效。
项目开源以后,我也顺利了找到了工作,至此完成方向转型。
希望对正在学习,或者转行,大学生的伙伴有所帮助,在学习的路上少走弯路, 从事全栈6年
专门建立的学习q裙851231348 分享学习方法和需要注意的小细节,互相交流学习,不停更新最新的教程和学习技巧(从零基础开始到WEB前端项目实战教程,学习工具,全栈开发学习路线以及规划)
工作中
在工作中学习的这块内容其实之前已经写过,在这里我就直接把精华总结一下:
- 用到的所有技术栈务必用精,没到这个阶段之前别想东想西的这个那个都想学点皮毛,没啥用。
- 了解下市场的热门技术,过时的就别浪费时间学了,顺便也给自己储备点知识,最好学点公司未来可能要用的技术栈。
- 想想看未来怎么在自己的简历上写工作上的亮点,然后尝试着去做。
- 别写完代码就完事了,看看还有没有能调优的地方,这都是你未来能写在简历上的东西,多从未来给简历加分上看齐。
- 学会偷懒,能用脚本做的就让脚本去实现,在这个过程中你就能成长。
- 给自己列点计划在业余中学习。
1年转行资深前端工程师,开源项目过 1k stars,完整学习过程的更多相关文章
- 我发起并创立了一个 Javascript 前端库 开源项目 jWebForm
在线演示地址: ( 在线演示 云平台 由 Kooboo 提供 https://www.kooboo.com/ ) 按钮: http://iwebform.kgeking.kooboo.si ...
- webfunny前端监控开源项目
前言介绍 如果你是一位前端工程师,那你一定不止一次去解决一些顽固的线上问题,你也曾想方设法复现用户的bug,结果可能都不太理想. 怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一 ...
- 资深前端工程师带你认识网页后缀html、htm、shtml、shtm有什么区别?
每一个网页或者说是web页都有其固定的后缀名,不同的后缀名对应着不同的文件格式和不同的规则.协议.用法,最常见的web页的后缀名是.html和.htm,但这只是web页最基本的两种文件格式,今天我们来 ...
- 淘宝前端工程师:国内WEB前端开发十日谈
一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...
- (转)国内外优秀的Web前端工程师
1. 国内外优秀的Web前端工程师 寻找Github.微博.知乎等技术社区上比较活跃.影响力大的圈内大神,供大家膜拜! 视野所限,未必全面,欢迎大家推荐.自荐. 排名不分先后,序号只为标记方便. 提供 ...
- 转发 ----> 2018年阿里巴巴重要开源项目汇总(持续更新中)
转发自segmentfault https://segmentfault.com/a/1190000017346799 前端 1.数据驱动的高交互可视化图形语法 AntV - G2 G2 是一套基于 ...
- android开源项目学习
FBReaderJ FBReaderJ用于Android平台的电子书阅读器,它支持多种电子书籍格式包括:oeb.ePub和fb2.此外还支持直接读取zip.tar和gzip等压缩文档. 项目地址:ht ...
- 我发起并创立了一个 EPWA 的 开源项目
EPWA , 是 Easy PWA 的 意思, PWA 取自于 Google 的 PWA, EPWA 是一个用 C# Cef Html js css 开发 桌面程序 的 架构 ...
- 国内最火的 HTML、CSS、JavaScript 开源项目 Top 榜,你知多少?
对于开发者而言,想要着手前端开发,HTML.CSS 和 JavaScript 是三项必备的基础技能.而如何事半功倍地掌握好这些知识?通过了解当下火热的开源项目不乏为最佳学习姿势.本文盘点国内评分最高且 ...
随机推荐
- Java实现 LeetCode 590 N叉树的后序遍历(遍历树,迭代法)
590. N叉树的后序遍历 给定一个 N 叉树,返回其节点值的后序遍历. 例如,给定一个 3叉树 : 返回其后序遍历: [5,6,3,2,4,1]. 说明: 递归法很简单,你可以使用迭代法完成此题吗? ...
- Java实现 LeetCode 113 路径总和 II
113. 路径总和 II 给定一个二叉树和一个目标和,找到所有从根节点到叶子节点路径总和等于给定目标和的路径. 说明: 叶子节点是指没有子节点的节点. 示例: 给定如下二叉树,以及目标和 sum = ...
- Java中StringBuffer和StringBuilder的区别
区别1线程安全: StringBuffer是线程安全的,StringBuilder是线程是不安全的.因为StringBuffer的所有公开方法都用synchronized 来修饰,StringBuil ...
- Java实现 蓝桥杯 历届试题 最大子阵
问题描述 给定一个n*m的矩阵A,求A中的一个非空子矩阵,使这个子矩阵中的元素和最大. 其中,A的子矩阵指在A中行和列均连续的一块. 输入格式 输入的第一行包含两个整数n, m,分别表示矩阵A的行数和 ...
- 疫情期间我是如何拿到20k的offer,2020年php面试题汇总
推荐视频:面试10家公司,收获9个offer,2020年PHP 面试问题 第一阶段1-2年 我认为1-2年对于PHP程序员来说是第一个门槛,这一阶段菜鸟正式从理论迈向企业级开发.我们知道如何使用工具. ...
- apollo与springboot集成实现动态刷新配置
分布式apollo简介 Apollo(阿波罗)是携程框架部门研发的开源配置管理中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性. 本 ...
- (三)linux三剑客之sed
一.sed是什么? 二.sed的工作原理? 三.sed的基本用法? 四.sed的进阶使用? 一.sed是什么? sed 就是一个非交互式流编译器: 交互式:文件缓存.人工编译.全局并行可逆 非交互式: ...
- Node第三方模块
node第三方模块集合 1.nrm 切换npm下载的镜像地址 nrm ls 查看可用镜像 nrm use +镜像名 2.nodemon 在控制台nodenom替代node命令执行nodejs文件, ...
- @loj - 3157@「NOI2019」机器人
目录 @description@ @solution@ @accepted code@ @details@ @description@ 小 R 喜欢研究机器人. 最近,小 R 新研制出了两种机器人,分 ...
- @hdu - 5822@ color
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个每个点出度都为 1 的有向连通图以及 m 种颜色.求本质 ...