2015年终回忆录

今年的回忆录来得迟了些,拖延症重度发作外加这几天一直比较焦虑,迟迟难下笔。 随手记欢迎页提醒,已经坚持记账1700多天了,先回头看看今年都做了些什么。 工作上值得记录的有,组织了几个活动,4月对外的前端培训,8月公司内的黑客马拉松,9月对内的前端训练营,11月公司外的渝FE2015,都属具有历史意义的第一次,虽然结果均有遗憾,但都是超出预期的。对我自己而言,这些经验,让我在组织新的活动时能更从容,但同时也需要去重视的有活动的持续性以及下一次如何更完美。今年还参与了2次行业交流会,放空心态后总会收获一些有用的经验和资源。 生活方面的改变有,从报名驾校到拿本提车上路,一气呵成,当有明确的目标时,执行力和意志力还是能蹦出来的。今年还见了几个不在这座城市的老友,每一个都会合影留念,虽然现在交通更加便捷,但见面需要的契机是可遇而不可求的。 过完流水,最近一直在想的几个点,经过自己总结以及和他人交流,也需要记录。 关于焦虑,这一年状态最好的时候中间段,最难熬的就是年初和现在,或许是中间段有明确的目标和计划,稳步进行,忙碌充实有收获,两头的时候要么丢失了目标,要么是停止了努力的脚步,外加行业发展太快,新人辈出,如何“找自己”?所谓饱暖思淫欲,得闲空焦虑。人无远虑,必有近忧,…

再谈Web前端性能优化

如题,Web前端性能优化这个话题被谈得有点厌了,十年前就有《Yahoo网站性能优化34条军规》、《Google性能优化准则》等参考教条了。根据这些准则和日常开发的经验,我制作了如下Web前端性能优化流程图。 既然再谈,就要旧瓶装点新酒,那么这个“新”从何而来?恐怕只有Web的最终载体——浏览器能告诉答案,能够支持些什么新技术,宿主环境发生了些什么变化。 Web新技术层出不穷,跟性能优化相关的,可能要首推HTTP/2了,它的多路复用和服务端推送重要特性,轻松解决了我们之前不遗余力去做的一些如压缩合并、顺序并发、缓存更新等静态资源管理问题,这也是当下主流前端工程化方案的重要一环。 另外我们团队正在调研并逐步接入的WebP也非常值得一提,它具有更高压缩比,同时支持无损和有损,支持Alpha和动画,完全就是其他图片格式的超集。通过工具分析,前端静态资源的重头还是在图片,其他优化手段的效果许多时候还不如压缩一张大图高效。 HTTP/2和WebP在主流浏览器得到了较好支持或者有对应的解决方案,但在火热的移动端就不太友好了。现在,前端性能优化在移动端开发的时候被提到更多,军规同样适用而且更严格。感觉在重走PC Web开发之前的老路,主要还是受浏览器和客户端的能力限制。 每次谈性能优化最后都想强调,优化不是空穴来风也不应该是虚声恫吓。有的公司的性能基准线是3s,有的是7s,而像12306那种强需求的半分钟也不为过。 我们对高级前端工程师的要求,除了掌握常见的优化技巧外,…

重庆首届前端培训体验班资料

《你真的会切图吗》 切图概念 前端职责 与产品经理和交互、视觉设计师协作,根据需求文档、线框图、设计稿完成页面制作(切图部分); 与后台工程师协作,完成数据交互、动态信息展现和用户的互动 切图定义 设计思路的理解和还原 页面模块化制作的预演 切图理论储备 常见图片格式 设备像素比 devicePixelRatio = 物理像素 / dips(device-independent像素,设备无关的像素),常见@1x,@2x,@3x 切图实践要领 心中有数 需求定位、结果模块、资源细分、 疑难杂症 大刀阔斧 工欲善其事,必先利其器:硬件舍得、软件恰当、工具够用 图层的合理运用:选择、分组、复制 精雕细磨 压缩图片体积、图片大小范围、仿色杂边处理、雪碧图合并 simple than…

我为什么要做前端培训

3月,因为自己的强烈意愿和公司的安排,我从《八戒到家》团队调配到基础技术团队,负责公司前端开发的技术体系建设。时值《八戒到家》一期上线,得到市场的热烈反馈,无论是项目前景、团队稳定性,抑或前端技术方面的发挥空间都是非常可观。 而我毅然决然的做出选择,主要是发现业务高速扩张的时候,往往忽视了团队输出质量以及对于技术人员的关怀,也暴露了一些问题。为了让大家在这个岗位尽可能开心点,我和公司的前端技术牛人们一起从前端基础工程和前端团队建设两方面,拟定了一系列计划。 目标是提供一套好用的前端开发解决方案,让大家在开发过程中,专注于业务的实现,不受环境的困扰,能提高效率和质量。同时大家在这个团队有序成长,新人进来有丰富的指导和帮助,高手能不断挑战和沉淀总结,所谓穷则独善其身,达则兼济天下。 培训是团队建设计划里面最重的一环,需要成体系的开展,持续的投入。经过一段时间的艰苦奋斗,我们的大纲和培训课程初具规模。 有一天,丁总找到我,说要满足我的愿望,把我们的内部培训搬到公司外,这的确是我非常渴望做的事之一。此前,在原leader的带领下,我们做过一个“w3ctech重庆站”的交流活动组织,通过定期举办交流活动的形式,把重庆的前端er聚集起来,讨论技术难题,交流行业发展以及重庆前端环境。 在这个过程中,…

2014年终回忆录

如朋友圈段子,又到了每年总结过去、新的开始、自欺欺人的时刻了。 用一个词语来总结这一年的话,可能是“接地气儿”。筹备、买房、搬新家,参加了N(>3)个同学、同事的婚礼,需要以自己独立的身份去维持人情往来的关系。俨然我真的回到了家乡,融入到了家乡的生活。最大的,也许是此生的遗憾,世上给予我最多关爱的人,离开了我,在我还没来得及报答的时候。 关于成长,这一年里,有幸经历了一些锻炼和变革,能从更多层面,甚至超脱自身的角度进行思考和行动。也领悟到了诸事之不易,从他人的失误中吸取一些教训。不足在于,一直都在向他人取经,但自己的产出不够以及没有足够的分享。 关于明天,身处互联网这一行,能非常明显的感受到科技点滴渗透到我们的生活。从过年微信红包的火热,到我自己入手了智能路由器、智能电视,再到今年帮朋友亲戚代买了至少3个智能手机,o2o的火热,p2p的蠢动。这些变化,让整个国度都变得更浮躁,但我对其蕴含的力量和机会,报以更多的希望。也相信,推动互联网浪潮的人群中,一定能看到我的身影。 2015,…

Node.js抓取Feed打造自己的RSS阅读器

​自从做了内务总管之后,上班时间开编辑器的频率越来越低。为保障自己的专业提升,以及为部门将要做的一个内部系统做技术准备,最近下班时间自学Node.js,用Express+Jade+Mongoose练手,做了一个定时抓取RSS Feed的小工具。 做这个小工具也是基于自己的嗜好,也是我自学前端的重要方法之一,喜欢收藏行业博客,看了看收藏夹,目测200多个,这么多博客的更新我几乎做到了每篇必看,而且更喜欢到文章页去浏览,因为每篇文章的排版可能都包含了作者的意图,通过文章的评论能发现或许比文章更有价值的收获,最简单的就是发现更多精彩的博客。 当然这么多博客靠收藏夹肯定是不够的,主要利用Google Reader订阅更新,但自从GR自宫后,以及博客的没落,微博和微信的崛起,更新博客的人也越来越少,我这恶趣味被压抑了很长一段时间。可是在最近,我翻阅收藏夹的时候,发现还是有不少博客在更新,于是有了打造自己的RSS阅读器的念头。 虽然是个小系统,还是习惯性的把涉及到的功能点和字段涉及用思维导图(推荐用百度脑图,naotu.baidu.com)梳理了下实现流程。订阅列表都是我收藏的持续在更新的博客,因为微信中毒越来越深,本来想做主动推送到微信的功能,后来发现接口限制,罢了。 剩下的过程也就是堆码的节奏,最后源代码放到了github上面,部署在自己的vps上,但因为是个128M内存的vps,Mongodb总崩溃,…

纪念我的母亲

母亲入土为安已经有几天,是该写点什么来纪念她老人家了。用一句话来形容她这辈子,恐怕唯有“春蚕到死丝方尽,蜡炬成灰泪始干”最贴切了。 母亲50年代出生在贫苦家庭,姊妹众多,排行老二。没有大姐大的威风,也不能享受弟弟妹妹的爱护,反而从小就要担当照顾弟弟妹妹的责任,所以也深受姨妈们的喜欢。没怎么接受文化教育,只读过小学,读书的时候还要做农活补贴家用,经历过文化大革命前的自然灾害,饿过饭,所以母亲对粮食特别珍惜和看重,哪怕现在家里屯的粮食,全家人吃3-5年都够,每年都要多多的种。后来和我爸认识,又经历了农村家庭的分家,靠他两人完全自力更生,几乎从无到有的建立起现在的老家,打小父母就经常给我数落他们这段艰辛的历史,除了满满的委屈也能感觉他们的骄傲和努力。 母亲命途多舛,在我刚入小学的时候,横遭车祸,货车从她身上拦腰碾过,多处骨折,医院躺2天不省人事,很多人都很难过和绝望的时候,母亲奇迹般的醒过来,我认为是她的坚强和对家庭的责任感造就了这个神话。从此母亲落下了残疾,不能使重力。可是厄运就是这么可恶,没过几年,母亲被查出患有风湿心脏病,一种多发在女性,中国农村普遍可见的慢性病,可能跟农村恶劣的生活环境和劳累的工作有关。时值我和我哥读中学,正需要用钱,母亲为了我哥俩选择拖延,耽误了最佳的时机。…

加快网页速度漫谈

今天在w3ctech重庆站第三期会场做了一个关于加速网页渲染的分享。 部分童鞋肯定了解过,网页打开速度会影响我们的用户体验,运营成本,以及和业务紧密联系的转化率。 4秒概念,超过4秒,25%的人会放弃…… 沃尔玛从1秒到4秒,转化率下降最明显…… 在互联网越来越普及,网速越来越快,电脑配置随摩尔指数增加的时代,对于网页性能的探讨,还有哪些存在的意义? 促成这次分享的原因,是因为我发现web开发人员存在2种极端,一种是过分关注网页性能,脱离生产环境。还有更大部分的开发人员毫不关心网页性能,没有优化的概念或者有概念但不执行。 这里涉及一个重要的平衡点,性能基准线。国外同仁研究的结果是普遍7秒。7秒以内,加快网页打开速度,对转化率有非常可观的投资回报率。但每个网站面向的用户不一样,这个平衡点也不一样,应该去分析网站的数据,找到自己的平衡点。 今天PPT介绍的关于加快网页速度的一些细则,主要围绕以下几方面。 缓存的优化 减少往返延时 优化请求数据 优化服务器返回数据 优化浏览器渲染 移动端的优化 这里单独说下缓存的作用机制,如图。 其他更详细的优化原则,直接看我共享的PPT吧(需翻越长城)。 https://www.slideshare.net/ssuser37db5f/…