• 产品的生命周期--阅读《人人都是产品经理》总结

    先来张图,将本书42.2万字的文字浓缩成一张图来作总结。关于一个互联网产品,无论大小,其生命周期过程如下 查看大图 策划一个产品涉及较多的是文档,下面也总结了一些文档的通用规范 查看大图 总结文档规范的原因很简单,可以帮助一个新的产品经理直接就能写出一份完善并且思路清晰的文档出来,至少第一眼看不出来是新手写的。 此处整理出来已经有不少东西了,不喜欢多余的文字,此图已涵盖产品生命周期的始终。读者们慢慢品味。 产品经理学习网站: 人人都是产品经理 产品100 PM caff 虎嗅网 互联网的壹些事 产品邦 极客公园


  • 写写前端团队管理

      前注:知乎上偶尔看到一个关于前端团队管理的话题,请允许我这个人好奇心比较重,深扒了下,加上自己的一些理解,做了点学习和领悟,梳理出来分享给大家,我不生产团队管理知识,我只是团队管理知识的搬运工。如果说做任何一门学问(比如技术,万事虽表现不同,但原理想通)都是一个理论加实践的过程,那么团队管理也不例外,接下来就先来理论一下。   作为技术开发人员,我们常常接受上级leader的委托去和其它成员协作完成项目任务,而且也常常专注于自己的事情,或赶项目进度,或研习各类技术。不过试想,如果你和你现在的leader调换角色,你会为你的团队做些什么?怎样去解决团队中存在的问题?你又应该如何去做好团队中各类事情的协调工作呢?   总结了各路前辈的说法,最终认为,如果你要做好一个前端团队的管理,至少应该从下面几个方面去考虑你手头的工作。 1. 持续不断的自我提高和认知转变。   首先必须承认,作为团队管理者,自身的认知和视野往往会成为整体团队水平的天花板。试想如果你跟着你个水平还不如你的leader手下工作,你会怎么想,最后做事情的结果也可想而知。但是常常,一个技术领域的内容是有限的,例如前端,一般在大公司工作两年以后,就会很快看到前端的天花板。这时作为管理者,可能需要关注的就是面向扩展与面向未来去做一些事情。   先引一张图: 面向扩展,你就需要去横向了解除前端外的其它内容,例如后端、底层架构设计、移动端开发、甚至产品经理思维等各方面知识和技术。 面向未来,你就需要敏锐地了解未来的技术趋势和市场变化,例如Web VR、通用型Web Native View的开发等趋势,首先要有认知。当然也可以做适当的调研尝试,调研尝试不必亲力亲为,可以分配给团队里面时间相对充裕并有能力完成这一任务的人,这样既给了团队成员机会,也可以让团队帮助你更快速地学习。   另外即使管理者各方面水平都达到一定的高度,另一方面也需要多听其它成员的意见,目前尽管业界内优秀的前端工程师比较缺乏,但也往往不缺乏牛人,兼听则明,偏信则暗,自古如此。   此外也要认识到自己从技术开发角色到团队管理角色认知的转变,确实如月影前辈所说:要成为优秀的技术人员,最重要的是要知道和善于发挥自己的长处,很多优秀的技术牛人熟知并且善于此道,所以牛人往往有个性,因为他们的特点和长处鲜明。而作为合格的管理者呢?最重要的不是发挥自己的长处和宣扬自己的个性,而是要看到自己的短处,要磨圆自身,在此之上,要知道和善于发挥他人的长处,容忍他人之短。作为一名合格的管理者,很多时候就不能仅仅在自己的立场上考虑问题了。 2. 团队培养。   团队培养往往针对团队中的新人或工作技能还有所欠缺的成员,其核心目标是尽可能快速提高新成员的工作能力和效率,以便后面能胜任更多的工作。通常也有一些有效的方法和机制来帮助他们快速提高。 导师制度。   对于进入团队的新人,一般会推荐有导师带领指导,这样可以帮助他们解决一些日常知识或经验性问题,避免他们自己去摸索折腾导致效率较低。同时导师也可以对新人做技术性学习的指导,能很快帮助新人快速提升。 必要的培训。   必要的项目经验培训可以帮助新人快速地了解并接手项目中的工作,缩短了新人了解项目开发所需要的时间周期。另外,也可以定期组织知识性的培训,帮助新成员拓宽技术视野。 codereview。   定期的codereview则可以帮助新成员发现项目代码的问题和不规范的地方,有利于团队成员的基本功培养和项目开发规范的推进实施,另外书写规范的代码也是工程师必备的技能。 鼓励文章输出。   鼓励新人写技术文章,能起到一个很好的引导入门作用,有助于帮助他们提高自学能力和解决问题的能力。 多学习分享。   如果有空余时间,鼓励新人多学习积累并学会分享,以提高工作中各方面的素质和能力。 职业规划。   帮助团队成员做职业规划,给团队成员定目标时可以适当提高,但是最终期望要有所降低,常言,取法其上,得乎其中;取法其中,得乎其下。总之,让每个人对自己都有明确的成长目标和方向,这样才不容易迷茫。 3. 团队文化。   团队文化则比较灵活,各个团队不一样,各个公司不一样,同个公司不同团队也不一定一样。但无论怎样,建立舒适的工作氛围尤其重要,例如定点上下班、上班需要穿啥衣服等细节在互联网公司就不大适用了,技术开发相对来说有点偏向创作性质的工作,如果因为这些条条框框会让人很不适。而且团队成员常常有较多聪明的的大牛,他们个性鲜明,自然不喜欢这些传统的规定。再者目前互联网公司内部工作中加班已成常态,如果还加上这些条条框框限制,就令人更不满了。   另外,为了缓解日常工作的压力,可以周期行地组织一些团建活动,例如聚餐、周边游等可以帮助大家转移注意力、缓解大家平时工作中的压力,同时也是促进团队成员之间相互了解和交流的机会。 4. 项目管理。   团队的日常工作中主要还是以完成项目任务为主,对于开发团队管理者,则需要做好项目工作的开展和监督工作,例如项目开发前期参与需求评审,中期向上级反馈项目进度,推动项目流程,后期监督项目完成质量,推进优化工作等等。而在各项工作的开展过程中,需要做的是要将项目完全委托给对应的项目成员,信任并支持他的工作,这时对项目开发实现细节的过分监督就会让下面人觉得没有自己信任度。通常团队成员也都是团队leader招的或接触过,对其能力必须是已经认可的,应该向下尽量放权给项目owner或开发负责人。这点主要对于团队管理者来说最重要的则是信任团队的其它成员能做完做好手头的工作。   除了工作上的信任和放权,另一点则是给团队中有潜力的成员提供机会。例如一个技术较强的人很想尝试下新的技术,例如想在项目中使用react、前后端同构等新技术,这时要尽量创造并提供机会让他们去尝试实践,否则长期在一个固定成熟的项目base上重复开发需求是很容易失去激情的。一个技术   而大多数管理者则希望维持稳定可控的开发模式来提高绩效产出,抱着无过即有功的态度,这样确实能在开发中尽可能减少意外问题的发生,但团队的成员如果没有新技术的尝试激励,一段时间后就会失去战斗的热情,没有成就感,觉得阻碍了自己的技术的成长,久而久之,问题就出现了。 5. 团队绩效与奖惩评定。   从以人为本的角度上再来看,大家无论从事技术、产品、运行还是管理,最初衷的目标当然还是希望得到一定的经济回报,而团队成员得到的回报则往往和团队完成项目工作的绩效和待遇来体现,作为团队管理者尽可能为团队成员争取更好的回报则是建立威望的最佳方式。   除了尽可能争取更好的团队回报,对于绩效的分配则可能是一个及其麻烦的问题。工作上,团队成员之间是同事,是兄弟,但是你也不能指望光靠情怀让大家努力工作。对于做事情积极主动的员工,可以考虑给予更好的项目和提升机会;而对于主动性稍微欠缺的成员,则可以给予暂时性的惩罚性措施,例如绩效评级暂时性地给2星或者C。   说是以人为本,但其实团队绩效与奖惩评定可以说是团队管理中最复杂的一个环节。而且对于人的认识则更难,对于表现优秀积极的员工,把最好的项目交给他,让他很快提升,但可能到了他预期的级别或到他认为的天花板就很快跳槽了;对于积极性稍差、表现不佳的员工,得到了较差的绩效,但是他感觉做的事情工作量和其他人差不多,同样是一起加班干活,如果连续两次以上被评级为2星或C以下,那基本肯定就离职了;而对于中间段的一部分人,比较优秀,表现积极努力,但是由于leader手上的资源有限,你只能给予他正常的绩效,如果长期连续如此,期望和结果存在一定的差距,那可能也呆不长了。   所以对于绩效的分配可以考虑尽可能惠及大多数人的立场上考虑。避免部分人因为连续拿优升得太快而离职,也不能让另一部分看不到希望。不患寡而患不均,不患贫而患不安,要想通过团队绩效与奖惩评定来稳固团队成员的信心重要的不是奖惩制度本身,而应该是对人性的理解,知道怎样恩威并重。   很多时候你可能并不了解他们,最终他们很不理解地得到你给的考评,由于团队管理的对象是你的下级,可能因为面子问题(脸皮薄)可能你得不到他们的这方面的反馈,这也就需要你多去了解和接触下属来知道他们自己的需求了。 例如(来自@泡泡): 1、一个入职2年,但是一直没有怎么晋升的同学,那么他目前可能最需要的是晋级。那么,你认为他要做哪些工作才能晋级?让他负责一个牛X的项目,还是在业务上玩出了什么新花样?找他谈谈,然后给他一点帮助。 2、一个技术比较强的同学,天天写页面做业务,没什么挑战。然后你发现他想做点有技术难度的,有挑战的内容。那么你可以让他负责组内的框架设计、基础组件开发,让他造几个轮子。 3、一个同学一直还没拿过5星或者3.75A。虽然他能力没组里其他同学强,但他却非常希望拿个好考核。怎么办?分配个项目给他负责,让他做PM,督促他发个好看的进度邮件,总结邮件,让他积极一点,年底给他打个3.75。 6....


  • web前端图片极限优化策略

      随着web的发展,网站资源的流量也变得越来越大。据统计,60%的网站流量均来自网站图片,可见对图片合理优化可以大幅影响网站流量,减小带宽消耗和服务器压力。 一、现有web图片格式 我们先来看下现在常用的web图片的格式: 图片格式 支持透明 动画支持 压缩方式 浏览器支持 相对原图大小 适应场景 baseline-jpeg 不支持 不支持 有损 所有 由画质决定 所有通用场景 progressive-jpeg 不支持 不支持 有损 所有 由画质决定 所有通用场景, 渐进式加载 gif 支持 支持 无损 所有 由帧数和每帧图片大小决定 简单颜色,动画 png 支持 不支持 无损 所有 由png色值位数决定 需要透明时 webp 支持 不支持 有损 Chrome、Opera 由压缩率决定 复杂颜色及形状,浏览器平台可预知 apng 支持 支持 无损...


  • html与css编码规范

    1. 规范概述 规范的制定是我们长期以来对工作的积累与沉淀的产物,帮助我们更快、更好、更高效的完成繁重、复杂、多样化的任务,我们制作规范的主要目的在于: 降低每个组员介入项目的门槛成本; 提高工作效率及协同开发的便捷性; 高度统一的代码风格; 提供一整套HTML、CSS解决方案,来帮助开发人员快速做出高质量的符合要求的页面; 2. 基本信息 规范名称 Cook 制订日期 2013.12.18 当前版本 beta0.1 对规范进行初步定义 规范制定 最后更新 2014.12.19 3. 文档目录结构 待添加。 4. 通用约定 4.1 分离 结构(HTML)、表现(CSS)、行为分离(JavaScript) 将结构与表现、行为分离,保证它们之间的最小耦合,这对前期开发和后期维护都至关重要 4.2 缩进 使用tab(4个空格宽度)来进行缩进,可以在IDE里进行设置 4.3 编码 以 UTF-8 无 BOM 编码作为页面格式; 在HTML中文档中用 来指定编码; 不需要为CSS显示定义编码,因为它默认为utf-8; 4.4 小写 所有的HTML标签必须小写 所有的HTML属性必须小写 所有的样式名及规则必须小写 4.5 注释 尽可能的为你的代码写上注释。解释为什么要这样写,它是新鲜的方案还是解决了什么问题。 4.6...


  • css学习资源汇总

    css reset 目前有两种reset,一种是属于修正式的reset,这个以normalize.css为代表;另一种就是我们常用的清零式reset如最简单的1 *{margin:0;padding:0;},目前各个框架都是先以normalize为基础,然后实现清零。 清零之外,我们会给html或body添加些font属性或背景,也会添加一些基础的类,方便使用,如1 clearfix ie bug集合 关于如何给各种浏览器打bug,可查询: browser hacks 因为里面有很多问题都是ie6/7的,所以大家多少都应该了解过,应该没什么问题,如果问题比较多的话,我再考虑ppt分享下。 http://www.qianduan.net/ie6u002639s-bug-amended-10-tips.html 清除浮动包括清除子元素的浮动和清除上级元素的浮动,其中清除上级元素的浮动,只需设置clear为both(或left,right)就可以了,而清除子元素的浮动则可以用空标签、clearfix或overflow。因清除上级元素的浮动比较简单,而空标签法清除子元素浮动会增加额外标签,所以推荐使用clearfix和overflow。 除此之外,1 display:inline-block;也可以清除子元素浮动。 清除浮动解决方案 PostCSS https://github.com/postcss/postcss 根据caniuse(https://github.com/postcss/postcss )的数据,自动生存浏览器前缀 grunt-autoprefixer: https://www.npmjs.com/package/grunt-autoprefixer gulp-autoprefixer: https://www.npmjs.com/package/gulp-autoprefixer flex应用场景demo见附件 深入了解flex ### 图文混排解决方案](http://www.w3cplus.com/solution/imagetextmix/imagetextmix.html) 除上述方法外,还有昨天发的flex方法 css3 学习资源 先放个资源集合,以后再整理个单个属性的关键点: css3 files MDN CSS reference css3 maker 列表类解决方案 http://www.w3cplus.com/solution/itemlist/itemlist.html 同样,这个也可以用flex来解决 关于css的class命名 BEM方式,这个大家都知道了 CSS命名神马的真心难 原子类class base基础类的那些事儿 分类形式class命名 1、某些移动端的浏览器不支持1...


  • ionic进阶开发中的命令使用

    ionic 开发构建之路 1,创建一个自定义路径的项目 如何基于现有的代码路径创建一个项目 1 2 3 4 5 6 7 8 9 10 11 12 13 ionic start projectPath repositryPath eg: ionic start ./demo "E:\github\qvm\dist" #注意带上引号,否则报错了,这里如果需要做的话只需要做到将dist的目录创建就可以了,而且文件使用相对路径 ionic serve -p 80 #在80端口启动调试服务并自动watch ionic platform add android/ios ionic run/emulate android/ios ionic io init #添加签名和授权 ionic resources -i a.png #上传app icon图片,默认icon放在resources下面 ionic...


  • Babel下的ES6兼容性与规范

    ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问题,但大家仍很疑惑,使用ES6会有哪些兼容性问题。 一、兼容性问题现状   针对ES6的新特性兼容性问题,目前解决的方案是使用语法解析转换工具将es6语法转化为大部分浏览器识别的es5语法,通用的转化方案有babel,traceur,jsx,typescript,es6-shim。当然es6在服务器端也存在兼容性问题,这里由于只考虑到浏览器端的开发,暂不讨论。下面有一些常用的解决方案和兼容es6的兼容性比较~ https://github.com/babel/babel/issues/596 http://kangax.github.io/compat-table/es6/ 考虑到解决方案的多样性,我么会着重考虑以下几个问题: 1,兼容性:是否能解决目前常见的所有语法兼容转换 2,易用性:能够很方便的接入到现有的开发构建体系中 3,通用性:业界有较大认可,目前没有很大问题 4,持续性:有较权威的团队维护,并能不断更新   综合四点,我们仍然考虑使用babel作为我们的兼容性解决方案。即使以后需要更换,只需要更换更换工具就可以了,原有代码的写法可以不动。   除了后面三点,我们可能比较关注babel处理es6时的兼容性问题。因为es6里面增加了较多的内容,转换为es5没有对应语法与之对应,所以使用时要尤为注意。为此也没有很好的方法进行判断,只能对于es6里的新增内容进行编译,判断是否可以转为es5语法。 ES6新特性在Babel下的兼容性列表 ES6特性 兼容性 箭头函数 支持 类的声明和继承 部分支持,IE8不支持 增强的对象字面量 支持 字符串模板 支持 解构 支持,但注意使用方式 参数默认值,不定参数,拓展参数 支持 let与const 支持 for of IE不支持 iterator, generator 不支持 模块 module、Proxies、Symbol 不支持 Map,Set 和 WeakMap,WeakSet 不支持 Promises、Math,Number,String,Object 的新API 不支持 export & import 支持 生成器函数...


  • es6 编码规范

    JavaScript 规范(ES6新增) 一、类型规范 二、字符串 三、数组类型 四、解构 五、函数 六、箭头函数 七、对象 八、类 九、模块 十、Iterators 和 Generators(不推荐) 十一、属性访问 一、类型规范 对于常量或不修改的变量声明使用const,对于只在当前作用域下有效的变量,应使用let,全局变量使用var。将所有 const 变量放在一起,然后将所有 let 变量放在一起 1 2 3 4 5 6 7 8 9 10 11 const foo = 1; let foo1 = 2; let bar = foo; bar = 9; foo1 = 3;...


  • Mock.js前端开发cgi数据模拟工具

    1. 什么是Mockjs http://mockjs.com/   Mockjs是个能够拦截页面ajax请求并模拟返回数据的小工具,借助Mockjs,前端开发中在后台测试接口还没有给的时候就可以自己拦截请求模拟数据进行愉快的开发了,所以只要制定好了协议,前后端分离开发的成本可以降到基本为0,也不需要联调工具了 2,Mockjs主要功能 基于数据模板生成模拟数据 基于html模板申城模拟数据 拦截并模拟ajax请求   当然mock模拟的数据不只是随便的输出字符串,它包含了各种格式的模拟数据,例如姓名,段落,时间,日期,图片地址,身份证号,电话,邮箱,ip等等,所以以后搞数据自动校验什么的再也不用手动输入测试了。也就是Mock自动了做了很多测试调试中的那部分体力活,我们只需要安静的写代码就好了。   数据模板则是根据一个模板自动根据某个规则产生数据,例如序号产生自增的数组等 数据模板定义 DTD 数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值: 1 'name|rule': value 例如: 属性名 和 生成规则 之间用 分隔。生成规则是可选的。生成规则 有 7 种格式: 1 2 3 4 5 6 7 'name|min-max': value 'name|count': value 'name|min-max.dmin-dmax': value 'name|min-max.dcount': value 'name|count.dmin-dmax': value 'name|count.dcount': value 'name|+step': value   生成规则的含义需要依赖属性值才能确定。属性值中可以含有@占位符。属性值还指定了最终值的初始值和类型,其中属性值的生成是根据Mockjs里面的随机几个固定字符串生成的。 1...


  • isomorphic reactjs

    isomorphic javascript web应用从最早静态页面、到php后台框架输出、到mv*为主的SPA、到基于node中层的直出,目前有人提出web的下次改变可能将是基于isomorphic javascript的前后台同构应用。 一、目前主流web app的特点 目前主要的应用都是基于mv*基础上(backbone、ember、angular等)或工程师自己的mvc思想上的应用。 通常做法是,页面所有的数据交互在客户端(一般指浏览器或移动webview)完成,后台只负责输出数据或一个初始的空白页面,而页面的数据则通过加载后的js进行加载渲染,一般用户和开发者的体验都会比较好,but存在很多问题: SEO不可做。除了基础的meta信息,基本没有全文信息。搜索引擎爬虫并不能获取页面内容。 性能仍有问题。大量的内容渲染,逻辑判断、dom操作、网络交互都在客户端完成,页面上的空白时间很容易让用户厌烦。 可维护性。有些低耦合的逻辑模块希望在前后台复用,例如时间格式化,表单验证,我们考虑到某些因素都会前后都做一次。 二、Isomorphic JavaScript 通过nodejs,可以轻松创建一个web server,运行js模板将页面输出给浏览器。但是Isomorphic JavaScript使用的是在服务端和客户端运行的一套代码,可以运行js模板或者前端的框架,这就是 “Isomorphic JavaScript”(同构的JavaScript),借用一个图~ 要做到这件事,有几件事情必须要解决: 抽象 路由 获取数据 视图渲染 自动构建打包 三、 Isomorphic reactjs 基于这个思想,有人提出使用reactjs来进行直出,大致看下是怎么做的。 mv*驱动在客户端的dom渲染效率是很慢的,例如一个vm的生成要去扫描dom所有属性节点来获取directives、filter或者表达式。而且还有上面提到的三个问题,但是如果在服务端去做就可以解决这些性能问题。 但是问题来了,如何提前扫描节点生成vm,将里面所有的directive、filter和表达式输出呢?可行的做法是在构建混淆阶段去render出来,而且要对每个定义的节点属性的指令表达式去render,这样就行了。不过自己去做工作量就有些了,而且容易出问题 那用reactjs可以怎么搞? http://reactjsnews.com/isomorphic-javascript-with-react-node/ 看来又有人干了这件事情,思路类似,reactjs实现的原理是:使用react.renderToString方法将virtual dom转换为string输出到页面上。这样前端的react代码就完美在服务器跑起来了。 安装node-jsx,处理jsx语法: 1 npm install node-jsx 除了必要的工厂抽象模块,依然可以像原来一样书写react模块,这样既可以被前端打包处理,也可以通过node router render出来。 1 2 3 4 5 6 7 8...

公众号

加我赏红包,哈哈哈

公众号

欢迎关注 极限前端 公众号