卓越前端工程师是如何炼成的

卓越前端工程师是如何炼成的

译自 Philip Walton 的博客 看过之后非常有感触,很多观点都是自己长期非常坚持和认同的,所以翻译出来分享给更多的前端同学! 最近我收到一封读者来信让我陷入了思考,信是这么写的: Hi Philip,您是否介意我问您是如何成为一名卓越 (great) 的前端工程师的?对此您有什么建议吗? 我不得不承认,我很惊讶被问这样的问题,因为我从来不觉得自己是个很卓越的前端工程师。甚至我入行头几年时并不认为自己可以做好这一行。我只确定自己比自己想象中还才疏学浅,而且大家面试我的时候都不知道从何问起 话虽这么说,我到现在做得还算不错,而且成为了团队中有价值的一员。但我最终离开 (去寻求新的挑战——即我还不能够胜任的工作) 的时候,我经常会被要求招聘我的继任者。现在回看这些面试,我不禁感叹当我刚开始的时候自己在这方面的知识是多么的匮乏。我现在或许不会按照我自己的模型进行招聘,即便我个人的这种经历也有可能成功。 我在 web 领域工作越长时间,我就越意识到区分人才和顶尖人才的并不是他们的知识——而是他们思考问题的方式。很显然,知识在很多情况下是非常重要而且关键的——但是在一个快速发展的领域,你前进和获取知识的方式 (至少在相当长的一段时间里) 会比你已经掌握的知识显得更加重要。更重要的是:你是如何运用这些知识解决每天的问题的。 这里有许许多多的文章谈论你工作中需要的语言、框架、工具等等。我希望给一些不一样的建议。在这篇文章里,我想谈一谈一个前端工程师的心态,希望可以帮助大家找到通往卓越的道路。 别光解决问题,想想究竟发生了什么 很多人埋头写 CSS 和 JavaScript 直到程序工作起来了,然后就去做别的事情了。我通过 code review 发现这种事经常发生。 我总会问大家:“为什么你会在这里添加 float: left?”或者“这里的 overflow: hidden 是必要的吗?”,他们往往答道:“我也不知道,可是我一删掉它们,页面就乱套了。” JavaScript 也是一样,我总会在一个条件竞争的地方看到一个 setTimeout,或者有些人无意中阻止了事件传播,却不知道它会影响到页面中其它的事件处理。 我发现很多情况下,当你遇到问题的时候,你只是解决当下的问题罢了。但是如果你永远不花时间理解问题的本源,你将一次又一次的面对相同的问题。 花一些时间找出为什么,这看上去费时费力,但是我保证它会节省你未来的时间。在完全理解整个系统之后,你就不需要总去猜测和论证了。 学会预见未来的浏览器发展趋势 前后端开发的一个主要区别在于后端代码通常都运行在完全由你掌控的环境下。前端相对来说不那么在你的掌控之中。不同用户的平台或设备是前端永恒的话题,你的代码需要优雅掌控这一切。 我记得自己 2011 年之前曾经阅读某主流 JavaScript 框架的时候看到过下面这样的代码 (简化过的): var isIE6 = !isIE7 && !isIE8 && !isIE9; 在这个例子中变量 IE6 为了判断 IE 浏览器版本是否是 6 或更低的版本。那么在 IE10 发布时,我们的程序判断还是会出问题。 我理解在真实世界特性检测并不 100% 工作,而且有的时候你不得不依赖有 bug 的特性或根据浏览器特性检测的错误设计白名单。但你为此做的每一件事都非常关键,因为你预见到了不再有 bug 的未来。 对于我们当中的很多人来说,我们今天写的代码都会比我们的工作周期要长。有些我写的代码已经过去 8 年多了还在产品线上运行。这让人很满足又很不安。 阅读规范文档 浏览器有 bug 是很难免的事,但是当同一份代码在两个浏览器渲染出来的效果不一样,人们总会不假思索的推测,那个“广受好评”的浏览器是对的,而“不起眼”的浏览器是错的。但事实并不一定如此,当你的假设出现错误时,你选取的变通办法都会在未来遭遇问题。 一个就近的例子是 flex 元素的默认最小尺寸问题。根据规范的描述,flex 元素初始化的 min-width 和 min-height 的值是 auto (而不是 0),也就是说它们默认应该收缩到自己内容的最小尺寸。但是在过去长达 8...
阅读 3,137 次
JQuery超实用代码段25则

JQuery超实用代码段25则

分享一些Jquery超实用代码段。包括:禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使div可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突问题。欢迎广大博友留言补充,采纳后会在后面添加贡献者及外链。 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 $(document).ready(function() { $("input.text1").val("Enter your search text here"); textFill($('input.text1')); }); function textFill(input){//input focus text function var originalvalue = input.val(); input.focus(function(){ if( $.trim(input.val()) == originalvalue ){ input.val(''); } }); input.blur(function(){ if( $.trim(input.val()) =='' ){ input.val(originalvalue); } }); } 3. 在新窗口中打开链接 XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid. $(document).ready(function() { //例1:每个链接都在新窗口打开 $('a[href^="http://"]').attr("target", "_blank"); //例2:只有带external属性的链接在新窗口打开 $('a[@rel$='external']').click(function(){ this.target = "_blank"; }); }); //...
阅读 1,844 次
手工打造HTML5网易云音乐播放器

手工打造HTML5网易云音乐播放器

APlayer是一个非常漂亮的HTML5音频播放器,UI 参考自网易云音乐外链播放器。它将audio标签封装,并结合CSS制作出漂亮的播放器UI,它支持设置歌名、歌手和歌词,可以设置是否自动播放,支持缩略图,支持播放进度以及设置播放源。 >>> DEMO is Here!!!<<< HTML 首先是要加载播放器样式文件,这个播放器的样式酷似网易云音乐播放器。接着载入APlayer.js文件。然后在body中加入播放器div#player1,用于显示播放。 <link rel="stylesheet" href="APlayer.min.css"> <!-- body --> <div id="player1" class="aplayer"></div> <!-- /body --> <script src="APlayer.min.js"></script> JS 现在我们来调用APlayer,首先new一个对象,绑定播放器元素,设置各种选项,最后使用ap.init();载入播放器。注意APlayer不依赖诸如jQuery或Zepto等第三方JS库,它直接将html5中的audio标签封装起来,所以开发者只需简单几句代码就可在页面上呈现漂亮的音乐播放器了。 var ap = new APlayer({ element: document.getElementById('player1'), narrow: false, autoplay: true, showlrc: false, music: { title: 'Preparation', author: 'Hans Zimmer/Richard Harvey', url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3', pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg' } }); ap.init(); 选项 { element: document.getElementById('player1'), // 可选, 绑定的播放器元素 narrow: false, // 可选, 窄屏样式,即只显示缩略图和播放按钮,请看演示demo中的样式3 autoplay: true, // 可选, 自动播放,注意这个在移动端手机上不支持自动播放的 showlrc: false, // 可选, 展示歌词,请看演示demo中的样式1 music: { // 必需, 音乐相关信息设置 title:...
高效前端er必备技能

高效前端er必备技能

不知大家有没类似这样的经历:一天忙到晚,一会被PM叫去确认需求,一会被设计拉去确认UI是否能实现,一会又被测试叫去确认bug,然后貌似做了很多事,但好像工作进度也没什么进展。然后,只能晚上加班,在夜深人静时还得敲代码,苦逼。。。 如果我们的工作效率能高一点 ,那也就不会那边的苦逼了。下面是我的总结的一些提高前端工作效率的方法: 管理时间 所谓时间管理,就是关于如何高效的使用时间。如果要详细的聊如何做好时间管理,那足够写一本书了,呵呵。我就简要谈谈我的一点经验吧 做好计划。在自己效率高的时候,做一些难的事情;效率低的时候,做一些简单的事。 专注。在我们专注工作时,如果有人来打扰,可以和他沟通,如果事情不紧急,可以稍后来处理他的事情。 一段时间只做一件事情。当一件事做的告一段落,再做另外一件事,而不是穿插着做。比如,写页面时,我会先写 HTML ,再写 CSS ,再切图,再写js。 善用工具 善用工具,就是选择一个好用的工具,并且好好利用它。 善用工具可以 减少一些重复劳动。如 Compass 可以自动生成图片精灵(CSS Sprites ) 减少做一件事情的路径。如 cutterman 是一款运行在photoshop中的插件,能够自动将你需要的图层进行输出,以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。 从而提高我们的工作效率。下面具体的聊聊: 编辑器 在我看来好用的编辑器至少有以下功能 语法高亮 括号匹配 能快速定位 快速打开文件 在文件中查找 在文件夹中查找 跳至某一行 能安装插件 熟练用浏览器进行调试 主要包括 审查元素 打断点和条件断点 改变元素的状态,例如:hover,focus 熟练的使用浏览器的控制台 移动端调试:用PC浏览器模拟手机浏览器;在PC上远程调试手机页面的工具,推荐用Weinre 想了解更多好用的软件见这里。 项目模板 项目模板包括一个项目的文件结构,公共的一些资源,一些第三方的插件,构建工具等等。一个好的项目模板,能帮助我们进行快速高质量的开发。 推荐在 HTML5 BOILERPLATE 上做一些自己的定制。 如果是移动端的项目,推荐用 MOBILE BOILERPLATE。 我的项目模板,见这里,仍在完善中~ 快速的生成模板项目,推荐使用 Yo。 项目的组件页 创建一个项目的组件页,以便查阅参考。 可以参考bootstrap的。见这里 积累高质量的常用第三方组件,并自己写一些使用组件的demo 网上总是不缺各种第三方组件。其中不乏很多带很多坑的组件。所以,发现高质量的组件,那就赶紧mark吧。我积累了一些,见这里。 虽然很多组件都有官方写的demo。但看官方的demo总是需要花一些时间去理解。我的做法是,理解了官方的demo后,自己也写一些demo。那以后再次使用时,就可以看自己写的demo了。 积累些常用的代码片段 类似 http://css-tricks.com/snippets/ 。 如果编辑器是用的sublime的话,可以创建代码片段(snippets)。要再用的时候,只需输入几个键,就可以将代码片段输出。 最后,欢迎大家来补充~
阅读 1,521 次
2015值得学习的前端语言及框架

2015值得学习的前端语言及框架

很多的库和框架产生和消亡,对于把有限的精力投入到最有价值的事情上是有挑战的。下面是我们的一些关于语言和框架的建议,这些都是我们认为很有意义去学习的。它们都很流行,有活跃的社区,并且有大量的就业机会。前端语言与框架有很多种,你知道2015哪种前端语言是最值得学习的吗? 1.无所不在的JavaScript 如果你做web的开发,Javascript是你必须知道的,不管你写后台用的何种语言。现在你可以用JS在浏览器、服务器、手机应用甚至是可编程的硬件。ES6 将会提高并让这个语言更加强大。学习Bower 和npm工具是很有必要的,也包括jshint 和 jscs这种代码样式和代码检测。 2.AngularJS AngularJS是一个Google发明的JavaScript框架,它能快速的构建企业级的web应用。快速的需求增长要求程序员有这个框架的使用经验,很多时候,你会看到招聘工作的时候会涉及这个框架的使用。但是别太着急。它将会有一个大的重写,在它的2.0版本发布后再学习是个更好的方式。可以查看学习指南angularjs examples. 3.React React是新的竞争者,但它是可提供复用的web组件。这个库是Facebook开发并实现了非常快的虚拟DOM,并能很简单的接入到现有项目中去。它也有非常活跃的社区来提供开发组件all kinds of components.在我们看来,Reacts是非常有潜力的并值得在2015年关注的。查看我们的学习指南react tutorial. 4.Node.js 用Node.js你可以用JavaScript来实现服务端的应用。它可以很简单的实现后台,像这些框架Express, API endpoints, websocket甚至torrent clients. Node有令人难以置信的活跃的社区超越任何其他一种语言在这一年实现的模块。如果你是个初学者,我们推荐你尝试下NodeSchool. 5.NoSQL databases 既不是关系型也不是SQL查询型的数据库是对今天的web开发者更有价值的,我们相信这样的数据库将会在未来更加的流行。有两个值得关注的是Mongodb and Redis.很容易使用它们中得任意一个比起MySQL和Postgres.但是别傻傻的认为NoSQL数据库就是完美的取代—有的情况,那些经典的关系型数据库还是会让你的开发更简单。 6.Less/Sass/Stylus 有很多人不喜欢CSS.它很容易就达到了1000行的css文件并且不容易被定位和修改。为了解决这些问题,有些语言像Less, Sassand Stylus可以编译成CSS文件,并可以使用变量、宏和其它的方式来提高你的编码。你可以一下午就搞定它们中的一种。 7.令人兴奋的框架 Meteor是一个全新的web应用开发方式,它模糊了前端和后端的边界。它允许你书写实施的应用,并且有迅速成长的社区来提供各种包模块。Hood.ie 是一个小得竞争者,但是提供新颖的方式。它能为你处理后台,所以你可以集中精力来做你应用的前台。 8.令人兴奋的语言 对于一些编程语言迷来说,这又一些东西。Golang, Rust and Elixir增长的势头很强,被用在一些对性能要求很高的情况下。我们不推荐转移你的编程方向到这些语言中,但是你可能会在要求与其它的网站交互时会用到。 9.经典的全栈式框架 尽管那些单页面应用增长迅速,但还是有大量的使用服务端的web应用。Ruby on Rails, Django, Laravel, Play, ASP.NET是这排名靠前的几个框架。花点时间学习任何的MVC框架都会让你获益良多。 语言/平台/框架排行榜 Node.js第一,PHP第二,JavaScript第三。因为Node.js的社区很多,所以这个结果你也不用太意外。如果你知道JavaScript,你已经一只脚踏进了用Node.js来构建Web APP的可能。 AngularJS处于框架的领导地位。大量的公司和企业已经采用Angular,这就要求开发者更多的具备使用这个框架的技能。主要还是因为有Google里最好的工程师支持。
优秀前端工程师是如何炼成的

优秀前端工程师是如何炼成的

很多刚入门的前端攻城师会有一个疑问:如何才能成为一名优秀的前端工程师呢?其实这个问题说大也大,说小也小,展开了说可以写一本书。当然我相信大部分人并不希望去读一本厚厚的书,大道至简,下面总结的几条方法或许能成为走向优秀前端的进阶之路。 1. 多写。很多问题都是积累得来的。写了,遇到了,才能去真正理解解决方案,才会随着自己的不断成长而有进步。别人问我为什么知道那么多 CSS 兼容解决方案,为什么一看就出的时候,我只能告诉他,我写了 20 几个 Wordpress 主题。 2. 看书。看 Blog 或者一些网上的教程,都很难让你系统全面理解一个东西的。坚持看书,至少前端相关的语言都看一本。入门强烈推荐Head First系列,CSS 的推荐 《精通CSS》,JS 推荐 《Javascript 高级程序设计》。 3. 读 Blog。最后你会发现,很多东西大家都会。但只有某些人才解决得了某些细节性的东西,这些人就是我们所谓的高手。很多大牛在 Blog 不会写一些简单的 List, 而是针对某个问题深入研究。这时看 Blog 对于进阶非常有帮助。 推荐几个不错前端博客(不定期更新,欢迎推荐或自荐): http://zmingcx.com/ 知更鸟前端(WordPress)博客 http://www.w3cplus.com/ 前端爱好者的家园 http://www.w3cfuns.com/ 前端网 http://www.smashingmagazine.com/ 多是精品 http://www.webresourcesdepot.com/  很多前端资源 http://meyerweb.com/ Web标准推广人 http://www.nczonline.net High Performance JavaScript 作者 http://dailyjs.com/ 业界新闻博客 4. 学一门后端语言。怎么说呢,实际用到会很少。但会很有利于一些问题的理解。比如 Ajax。还有 HTML5 中像 Web sockets、post message 之类的 API。 5. 去用很多产品,至少去爱一个产品。你不止是一个前端,你还应该是一个设计者,去用很多产品,你才会发现技术为什么有用,去爱一个产品,你才会把技术用得更好。 推荐几个不错产品/设计站点(不定期更新,欢迎推荐或自荐): http://www.woshipm.com/ 人人都是产品经理 http://www.uisdc.com/ 优秀网页设计联盟(SDC)
运用CSS3巧妙制作浮动云彩

运用CSS3巧妙制作浮动云彩

细心的博友可能已经发现,轻微生活 网站LOGO位置多了一朵浮动的云彩,慢悠悠地来回游动,有一种悠闲自在的感觉!那么她是如何实现的呢?主要得归功于CSS3的一些神奇新属性! 其实这个浮云效果是小编在瞎逛博客圈时无意间发现的,第一时间就觉得创意不错,就应用到了自己的网站上来,这里也分享给大家。该创意来自于Abel's blog,代码很简单,就是运用CSS3 的一些特性,画出三个圆形和一个矩形,组合成一朵云的形状,加上动画效果,让它左右移动,形成一个飘动的效果~ 首先,您需要在网站待显示位置贴上如下的HTML代码: <!-- Cloud HTML --> <div id="cloud"> <div class="one">大圆</div> <div class="two">中圆</div> <div class="thr">小圆</div> <div class="fou">矩形</div> </div> 然后,您需要在网站引用的样式表里添加如下CSS代码: /* Cloud CSS */ #cloud { margin-left:50px; width:250px; height:150px; position:relative; -webkit-animation:'cloud' 5s linear infinite; } #cloud * { position:absolute; background:#FFF; border-radius:50%; box-shadow:0px 5px 0px #6695B0; text-indent:-99999px; } #cloud .one { left:60px; top:30px; width:128px; height:128px; } #cloud .two { left:20px; top:76px; width:82px; height:82px; } #cloud .thr { left:155px; top:94px; width:64px; height:64px; } #cloud .fou { left:56px; top:118px; width:135px; height:40px;...
阅读 4,772 次