前端早读课专访

这篇文章发布于 2016年01月13日,星期三,11:18,归类于 Web综合。 阅读 83231 次, 今日 1 次 86 条评论

 

先帮忙打几个广告:
1. 公众号@前端早读课,内容很不错,大家可以关注下。
2. 情封,公众号@前端早读课负责人,从名字就可以看出是个有故事的人,招实习、中高级前端开发工程师@4399

下面就是一些问题(加粗)和我的回答。

1)自我介绍、现在所服务的团队、负责的项目

我叫张鑫旭,网名也是张鑫旭,因自认为待人真诚,没有必要遮遮掩掩,于是一直使用真实姓名。我其实有个曾用名,名叫张旭,后来算命的掐指一算,我五行缺金,得,父母果断加了个金最多的字-鑫,看你还缺不缺,故得张鑫旭。

现在在腾讯科技ISUX-社交用户体验部上海设计中心主要从事UI开发相关的工作,“UI开发”这个职位名称起得好啊,听上去即高大上,又把工作内容包含进去了,搞设计的,但是是通过开发(技术)来实现。其实呢,拿出程序员的自嘲精神来讲,就是个写页面的。但是呢,能成为一个设计师认可和喜欢的UI开发,还是需要很多积累以及一些编程以外的东西。如果正在阅读的你觉得你就是这样的人,欢迎简历我(zhangxinxu@zhangxinxu.com),加入国内顶尖的设计团队。

真巧,正好说到团队,我们可以从闪亮亮的title说起——「上海设计中心」!为什么是上海,恩,因为办公的地方在上海;设计,表明团队的小伙伴都是设计师……才怪,实际上由国内非常顶尖优秀的视觉、交互、用研以及目前独苗UI开发,也就是我组成;中心,带有支援各方的意味在里面,因此,基本上,上海这边与社交相关的产品我们设计中心都会参与。

就我个人而言,负责的项目主要是QQ企业产品(欢迎大家说服自己老板购买)以及QQ公众号(应该不用多久就会全面开放,到时候欢迎大家体验,可以直接向我反馈任何问题或建议)。

2)本身是生物信息技术专业,到现在做前端开发,这期间你是如何思考并作的选择?

说穿了,就两个字:“兴趣”!

兴趣使然

一件事物能够成为兴趣,自然是要自己能够做得来,有成就感,释放能满足自身愉悦感的激素,然后才能上瘾并持之以恒走下去。

大家赶快搬好小板凳,我脑中的画面开始filter:blur(0px)filter:blur(20px)模糊,以前的画面开始浮现出来了,故事即将开始……

我这个人很随性的,很多很重要的决定都是凭感觉走的。比方说大学填志愿,我们是分数出来再填志愿。结果知道分数后,花功夫去研究学校、研究专业了?屁来,连一个动画帧的时候都没用过,干嘛去了呢?那还用说吗——钓鱼,恨不得睡在河边上。得,要填志愿了,屁颠屁颠跑到学校,完全没准备怎么办?啊,我机灵劲来了,点兵点将,点到谁谁就上,哦,不是不是,点到谁就上谁。老夫看你骨骼惊奇,就你了,华中科技大学;至于专业,翻开本子,从上往下看,有生物字样的(我本来想成为一名生物学者,野外生物探险专家那种),从上往下一个一个填。然后第一志愿第一专业进去了。当时有思考吗,没有,反正就是,先进大学再说,至于以后要干嘛,看天数。

然后,从小孤家寡人长大,没人指引,大学要干嘛,以后要干嘛,完全没概念完全没想法,用一个词形容就是“迷茫”,以至于做什么都没有激情,没有参加任何社团,篮球场上的眼神防守专家,同学提起我,别人会“哦~~我知道,就是最后一排一直睡觉的那个”,成绩也是高不成低不就,稳定的中间游击手,当然,毋庸置疑,是单身狗。

后来自己想了想,这样蹉跎下去不行啊,反正时间都是一样的过,那就做点自己想做的事情。于是,我去干嘛了呢?哈,没错,有人猜到了,去钓鱼,翻过学校可能会断子绝孙的铁栅栏,去后面的东湖钓鱼;还有串巷,随便搭一辆公交去陌生的地方走街串巷;以及一些没想到会对自己职业生涯有影响的事情,比方绘画,图书馆所有绘画相关的书都看过,素描,彩铅,水彩都自学过,多次通宵作画。大二可以有电脑了,然后,对着80年代电视机模样的1024分辨率显示器自学photoshop, 暑假同学都回家避暑了,我一个人练PS技术;下学期开始捣腾flash,搞些酷酷的效果自己得瑟下。

现在想了想,自己是个典型的内向的人,上面那些想做的事情都是一个人完成的,不需要交流损耗精力的,不需要逻辑思维损耗能量的,两年下来看似无所事事,实际上一点一点积攒了很多精神能量,厚积薄发一触即发。

故事即将进入高潮……

大二暑假,在河边上,钓了一个暑假的鱼,顺便思考了一个暑假的人生,突然就想通了,男人有实力才是王道。大三回到学校,整个人精神暴走,凭借自己纯粹兴趣使然学的点PS和Flash技术分别进入了校义工部做平面设计,校网络应用研发中心做网站(flash方向),没错,应该是别人大一干的事情,我起步比其他同学慢了2年。所以,基本上,每天早起晚归,拼命追赶,没有任何时间的浪费,每天时间都不够用,做设计做动画。然后还得了义工之星奖励,标识设计还拿奖,班级篮球队也得了冠军,似乎我的大学生活开始有了亮彩。

在网络应用研发中心,让我开始接触互联网,接触网页,当时找我进去值做flash特效的,当时这种酷站挺火的。然而,进入后,flash没什么活,到是有很多外包的写CSS的活,人手不够,我就主动请缨,帮忙写页面,花擦擦,全是通宵搞,不要太有激情。那个时候,我还不知道,这玩意是可以帮你找工作的。

转眼大四了,我擦,校招来了,对于从没踏出校门的我来说,第一次有个认识外面世界的机会。那个时候,我才第一次知道,原来世界上有一种职位叫做前端开发,需要懂PS懂CSS懂JS,虽然哥JS很挫,但AS写得不错,我当时就high了,这不是给我量身定做的职位吗,我大学瞎折腾的不就是这些鬼吗!当时那个激动啊,要是兴趣能当饭吃,我就可以上天了。

此时我看了一眼我的专业“生物信息技术”,爱过。然后,我就决定走前端这条路了。

告诉大家一个秘密,我其实还犹豫过要不要去做网页设计,职位要求要会PS, 最好懂CSS,好像挺符合的嘛。后来我为啥放弃了呢,某天兴致勃勃来到社团办公室,然后大家在围观团队里工设专业第一设计师妹子的网站改版作品,我也跑去凑热闹,当我看到作品的那一瞬间,我一下子懵逼了,突然意识到,原来人和人的差距可以这么大,一下子明白有些东西不是有兴趣有干劲就能超越的,遂放弃。

当然,毕竟比别人晚两年,且一直没出去看看,眼界什么的狭隘,加上自己的表达能力是罗永浩的补集,校招惨败。举个例子:兴致勃勃,西装笔挺跑去面试阿里,老激动了,年轻人嘛,为了想展现自己能力很强,说话嘛,有时候分寸拿捏不好。
“我一天就学会了CSS?”
“你确定你学会了CSS~”
我愣了1秒,吧嗒吧嗒我的大眼睛,补充道:“恩,我是1天就学会了!”
然后一男一女两个面试官就在面面相觑咯咯咯咯的笑。

当时我就嘀咕了:“笑毛线啊,靠,尼玛以后请我去你那儿上班我都不去,太不礼貌了”!所以,很多年后,当阿里和腾讯offer同时摆在我面前的时候,大家都懂的。

因为起步慢,校招不顺利,才有了后来大四我去实习,毕业时候,辞去实习工作,去闭关学习php和JavaScript,第二年也就是10年才开始正式参加工作的经历。也就是,虽然我09年毕业,但10年才正是从事前端这个岗位。

期间遇到的挫折和迷茫还是相当大的,后来,是凭借俞敏洪,乔布斯以及罗永浩的励志演讲,以及对前端的真爱才走下来的。不过那是后话了。

乔布斯

总结下就是:当年我是个很普通的屌丝,一事无成,同学都很优秀,各种奖学金拿到天上去。后来阴差阳错遇到前端,发现这玩意门槛低,好入门,进入大学这么多年,终于发现一件可以做得来的事情,于是有了兴趣,然后在”follow your heart”这句话的激励下,披荆斩棘在前端这天路上走了出来。至于专业,不念到博士难有大成,想都没想过。

3)跨专业做前端开发这几年中,你觉得你最大的收获是什么?以及跨专业对你有什么影响?

最大的收获嘛,往高大上方向讲,就是通过不断地分享,让很多前端同行的得到了学习和成长,也对整个前端行业的发展做出了一点自己力所能及的贡献;如果往世俗方向讲,有了自己的车子,虽然是小车,有个自己的房子,虽然在乡下,有个娇妻,没有虽然,然后还有儿子一枚,哈哈哈,没错,我就是传说中的人生赢家。低调低调。

跨专业嘛,只能说跨半个专业,做前端,计算机专业对我还是帮助很大的。虽然说,当年在大一学C语言,根本就不知道,在黑底框框上敲一些白字都有些什么用啊,没兴趣,但是,毕竟是专业课,计算机的理论什么的,程序基础都还是知道的。于是,当我学习flash发现as可以实时呈现一些动态效果的时候,我的天窗被打开了,原来程序是这么个东西,兴趣也起来了。所以,我一直认为,大学应该先学JavaScript这种所见即所得的程序语言,先培养兴趣,然后在C/C++走起。

至于跨专业的生物,我本来想说没怎么用心学,不影响,后来一琢磨,不对,影响非常大!正是因为我选择了生物信息,我才能遇到了我的室友宏达,于是才有了下面的对话,“鑫旭,你最近都在干嘛?”“在弄网站。”“是吗?那很好啊,互联网很有前途的!”就是这么不经意的一句话,如果没有这么一句话,前端界说不定就看不到我的身影,从一点上讲,跨专业影响巨大,哈哈!

不过,我突然一想,大学里有“前端开发”这个专业吗?貌似没有吧,大家应该都是跨专业的吧~~
思考

4)博客这么高产并且研究的问题还很细致,在这点上,你是有什么特别的学习方式吗?

这个问题,之前有人邮件或其他方式问过我类似的:“哥,我写技术文章比女人生孩子还难受,半天都憋不出一句话,你有什么诀窍吗?”

我的回答都是“这个嘛,多写写就好了!” 其实内心真实的想法是:“这个是需要点天赋的”。

狗

为什么当年我看到工业设计专业第一妹子作品的一瞬间就放弃了呢?有些东西是很难逾越的,一个是很多年的积累,二是内在的天赋。有些事情要想做得好,勤奋就可以;但是要想顶尖,天赋是必不可少的。

我想说的是什么意思呢?博客为什么这么高产,戳穿了,因为写作本身也有天赋同时有很多的积累,写篇文章就跟吃顿饭一样稀松平常。小学时候就开始在国内期刊发表作品,拿奖,一直笔耕不辍。以我现在的眼光来看,与自己之前内向敏感细腻的性格有关,艺术气息浓郁的人,往往内向孤独。所以,小孩子性格内向,并不是一件坏事情。

同样的,存在这样的人,说话很有天赋,任何场合都能即兴演讲,像说相声一样,语言表达很有天赋。你问他有什么特别的学习方式吗?估计他的回答也就是“多练练”,实际上,我是很清楚的,人家语言区逻辑思维很强,汪涵可不是人人都能做的。

第二个小点,“研究问题细致”,还是与人特质有关,我能一个整天坐在河边,像个傻子一样,看着鱼漂一动不动,估计很多人是做不来的?能够长时间静下心来专注在某件事情上,这是做研究非常重要的特质。所以,性格活泼外向,非常能说会道的,可能管理有道,但是一般技术尔尔。

然后,还想补充一点,兴趣很重要,写文章做研究是件很辛苦,并且没有明显收益的事情,如果只想把前端开发当作吃饭的工具,而不是真正发自内心热爱它的话,是很难坚持下来的,这个时候,才能体现”follow your heart”这句话的价值。

最后,分享下我做研究的些心得吧。其实呢,我们做前端技术研究,跟大学里做科学研究是一样的。首先,明确研究对象,比方说我想研究CSS中的层叠上下文,OK,1. 先去找资料,官方文档或者MDN等外文站点(科研是找文献);2. 验证资料中的观点,例如,inline元素覆盖float元素,此时可以设计实验,在网页中就是写demo,看看是不是这种覆盖关系,一定要亲自验证,其他地方的文章会有错误或者观点过失;3. 提出资料中没有的自己的疑惑,例如,层叠上下文的层叠顺序是哪个级别?我觉得貌似是z-index:auto级别,好,为了验证这个观点,我们再次设计实验,让几个z-index:auto的元素与之重叠,且先后顺序不一样,看最后的表现,得到我们的结论。

其实现在想想,我其实是个做科研的好手,只是学校的教育没能及时吸引我的兴趣,如果走自己的专业“生物信息技术”,一直研究下去,应该对人类的贡献更大。不好意思,扯远了~

5)在前端技术的深广度上,你觉得在这条路怎么走?

我就说说我自己在前端技术的道路上如何积累深度广度的吧。

关于广度的学习
广度学习,在我职业生涯早期,一般都是关注很多知名前端团队的官方博客。后来,发现,这些博客一是大部分都坚持不了多久,二是内容已经不能满足我的胃口的,三是加上工作事务越来越多,后来,这些团队博客基本就放弃了,转而集中关注国外知名的前端学习站点。

包括:http://www.sitepoint.com/, http://maxdesign.com.au/, http://www.smashingmagazine.com/ 以及 https://css-tricks.com/

基本上,每月都会花几天时间,认真浏览每一篇文章,觉得有价值的,就是记住,或整理成文章,或者编辑成小tips微博备忘或传播。

由于自己有刷微博的习惯,因此,还有很多新的知识,是微博上一些积极传道的同行小伙伴传播的,自己或转发或评论,等需要的时候,就可以找到。

关于深度的学习
就我个人而言深度学习在于多想和多写。

而这里的深度,又包括两方面,一是上面广度内容的深度学习;二是基本知识的深度学习。

① 广度内容的深度学习
我们都会见到或听到一些新的属性、名词或者特性或者技术实现。一般的同学都是看一下,知道有个这么回事。

而我自己,一定会自己亲自实践,至少整个demo什么的,如果在实践的过程中发生一些有意思的事情,一定会整理篇文章,和大家分享下。一来思路提炼,二是知识备忘,三是日后用到的时候可以快速上手,四是帮助其他同行的学习。

② 基本知识的深度学习
这里基本知识就是我们平常经常使用的一些东西,看上去简单、朴实,实则深有学问。学习的关键就是多想,就是多提几个为什么?这需要一定的前端敏感度。比方说,一个普通的标签里面有个图片,结果图片下方会有几像素间距,这个间距是怎么来的?

一般的同学遇到问题都是去度娘或谷哥搜索,找到解决方法,然后就没有然后的。并没有去深究背后为什么会这样。

为什么呢?因为,越是简单的东西深究起来越麻烦。就好比问为什么1+1=2这样的问题。但是呢,前端这东西门槛低,如果你没有这些深入的理解,如何跟其他茫茫多普通的前端做区分,从而迎娶白富美,走上人生巅峰呢?

项目这么紧,哪有闲工夫去研究这些看不到价值的事情,类似这样的心理导致学习总是遭遇瓶颈,若要在技术领域有所成,这样的心理一定要有所转变。

而我会牺牲几十个小时的钓鱼时间,去思考:会是什么原因呢?然后不断写demo,变换属性等方法验证自己的想法,看看能不能解释得通;网上会找资料,尤其外文,有没有相关解释;会去CSS官方文档寻找蛛丝马迹。直到全部梳理清楚。

然后,很重要一步,就是要把所想所得记录下来,一定要记录。因为我们都不是天才,过了一段时间,都会有所遗忘,唯有笔耕不辍方能弥补。

最后呢,很重要的一点就是:学习这东西一定是要肯花精力的,而且无法一蹴而就,需要日积月累,贵在坚持!

有些同学成长初期可能会疑问,人精力总是有限的,我是先专注于广度的成长呢还是深度的成长呢?从长远来看,都是深度和广度都是需要积累的,没什么差别,那么初期应该侧重哪一点呢,我个人觉得应该根据自己公司、自己从事的项目或者业务需要走。中小企业可能需要你是多面手,页面写的起来,开发也做得来,此时,广度应该先重视起来;职位划分非常细致的大企业,需要你某一方面是顶尖的,显然,深度的学习是优先关注的。

6)现在前端技术层出不穷,你对前端新人有没什么建议?

建议谈不上,说说自己的看法吧。

从生物学的角度讲,一个物种要想在地球上存活的久,多样化很重要,无论是外形,性格以及食物。如果体型很大,需要能量就多,食物匮乏就惨了,优先饿死,此时矮人(侏儒)存活机率大; 再说性格,如果物种性格都是一样的,很容易被利用和灭绝,比方说渡渡鸟,都不怕人,70年时间就被灭光了,如果只要有中华田园犬这种程度的机敏,保证可以活到今天; 食物更好理解了,考拉只吃桉树叶子,一旦桉树遭遇大规模死亡,考拉日子也不好过了。

扯这么多是想说明什么呢?从宏观角度看,对待新技术的各种态度并没有谁对谁错,这些观点态度其实对于整个前端生态而言都是很重要的。我觉得应该用包容开放的心态看待不符合自己作风的态度,放下自尊,主动吸收对方之长,这对于自己的成长很重要。

就像投资一样,有人喜欢价值投资,稳固保守;有人喜欢追逐热点,快速收益,其实都是为繁荣经济做贡献。

我们做前端的在职场中打拼,虽然说是做技术的,但最后世俗定义的成功,技术的能力只是一部分元素,一个加分项而已。基本上,公司里管事的都不是技术最厉害的,而是当年技术做过贡献,其他领域如沟通,领导力也比较出色的人。可能几年前,我会建议新人:“你想成为技术大牛,在技术领域有所造诣,时髦的新技术可以先不急着深究,夯实自己的基础最重要,一定要系统学习,而不是靠有限的经验积累。”但是,现在的我并不会这么说了,因为每个人追求的不一样。比方说我,我更看重个人技术成长,对团队的帮助以及对行业的贡献。但是,很大一部分同行,追求的是升职加薪,如果某个新出现的技术对其职业发展很有帮助,例如React.js帮助公司做移动开发。我们还会要求这个小伙伴,不要跟风新技术,好好扎实基础吗?错过了时机,会影响人家的职业发展,表现和升职的机会就会错失。

所以说,对于前端新人而言,重要的是自我认知清晰,知道自己想要的是什么,知道自己的特长在哪里,这个很重要,一定要认识清楚,如果只是盲目跟风,或许既不能收获技术,也不能收获职业发展度,那就比较不幸了。

7)如果让你推荐你工作中所用到的工具,你会推荐什么?

这个问题还真烧了我不少脑细胞,我并不是一个热衷于工具的人。非要推荐一个,那就Faststone Capture吧,截图、标注以及量尺寸,是我使用频率相当高的一个工具。其他嘛,如果要录制屏幕为gif动图,可以试试使用ScreenToGif,我一般会再再Photoshop中再重新保存一篇,优化下大小。

“没了?”
“是啊,没了!”
“有点短,要不再说一点?”
“这个……那我推荐下自己的博客吧,如果有想了解的前端知识,试试去我博客哪里搜索下,说不定会有不一样的发现!”

  • 没有相关文章
分享到:


发表评论(目前86 条评论)

  1. 浅味书香说道:

    有没有分享前端学习流程的文章

  2. Sonam说道:

    鑫哥简直我辈楷模!一直保持向鑫哥学习~

  3. lizen说道:

    过来学习学习

  4. 张人韦说道:

    前辈能想象我看你这篇文章时正听着天空之城的情景吗?用css描述一下也行/wx

  5. 言枫说道:

    鑫哥,看了你的博客收获甚多,特别是这一篇跟关于前端方向的,因为我也是毕业了2年后才开始接触前端,现在也确实处于迷茫状态,看了你的博客之后,心里好像明白了自己的方向了,谢谢~

  6. 一个字~干说道:

    大神能说说下面这段代码能垂直居中的原理吗?
    .box { position:fixed; top:0; bottom:0; left:0; right:0; width:100px; height:100px; margin:auto; }

    还有更想知道的是,对一些你自己也不太明白的效果,你是怎么早到它背后的原理的,是怎么样一个过程??

    • Joe说道:

      在加上一个background-color好看效果,因为你设置了width和height值, 所以你在设置margin:auto的时候box上下左右的margin会均分,所以就居中了

  7. 哎哟说道:

    过来学习

  8. jin说道:

    极好极好

  9. 呦呦烈鸟说道:

    做前端也有4、5年了,从开始的页面仔,自学一些js的东西,后来用到项目里,目前待在一个广告公司里,最近几年一直在研究createjs ,egret,three.js的东西,自认为。。基础还是太差,基础太重要啦!继续研究基础

  10. 康永王说道:

    分享精神值得学习

  11. 陈子云说道:

    filter:blur(0px)→filter:blur(20px)..得加-webkit前缀才能在我的chrome浏览器里生效。。

  12. 极乐君说道:

    会玩会学,关键是能坚持下来!赞一个,校友~

  13. 说道:

    看到你的专业 生物信息专业,我也是这个专业,我这个暑假也在闭关修炼前端。很心心相惜的感觉

  14. wqli说道:

    鑫哥,发现你博客底部有单词写错了,Powerd应该是Powered

  15. 周Ali说道:

    很欣赏不忘初心的人,共勉~~

  16. 小布说道:

    这里基本知识就是我们平常经常使用的一些东西,看上去简单、朴实,实则深有学问。学习的关键就是多想,就是多提几个为什么?这需要一定的前端敏感度。比方说,一个普通的标签里面有个图片,结果图片下方会有几像素间距,这个间距是怎么来的?

    我不会dome。
    这个问题前段时间发现的,当时没解决。
    我的知识有限,网上我页没有找到答案。
    如果不是今天看到你提的这个问题的话,我都忘记了。

    求解??

    • 风不会停息说道:

      是因为基线对齐的原因 这个讲解起来很麻烦,可以上网查一下基线对齐这方面, 最简单实用的方法是给图片设置display:block 就能解决了

    • HenryYong说道:

      或者用vertical-align:middle;

    • 风的臭脸说道:

      图片缝隙现象,是因为图片默认与包着的标签基线对齐的问题(尽管标签上没有文字),同学你可以在标签上写几个文字试试看。
      解决问题: vertical-align:middle;

  17. 黑玛鱼说道:

    值得学习的前辈!

  18. 我要成为前端大大大牛说道:

    大学毕业工作了辞去了工作,正在闭关学习前端,那么我决定把你当作榜样了!

  19. 尹柳鹏说道:

    同样大学毕业工作了一周辞去了工作,正在闭关学习前端,那么我决定把你当作榜样了!

  20. lds说道:

    filter:blur(0px)→filter:blur(20px)
    这模糊滤镜很有画面感啊。。。。

  21. wangchloe说道:

    惊现灵魂画手一枚啊,跟我有一拼,哈哈哈。

    有一点点好奇大大的老婆是撒职业的,托腮.gif。

  22. vvhl说道:

    真赞,我也来粉一个

  23. 左左说道:

    小小支持,以滋鼓励~

  24. laraxia说道:

    一直在看你的文章,喜欢你的文采,更难得的是,不仅有文采,还有实力,这才是重点。看了好多人的博客,要么就是坚持不久的已经放弃了的,要么就是内容不够丰富。直到发现了你的博客,决定长期追下去了。争取一点点积累,把你之前的文章都看了,学无止境。也希望你能一直坚持~~~~。PS,微信支付了,嘿嘿,虽然钱不多,但是是一份感恩的心,谢谢你的分享。