atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>qop&#39;s blog</title>
  
  <link href="/atom.xml" rel="self"/>
  
  <link href="http://qop.github.io/"/>
  <updated>2016-05-30T08:53:55.000Z</updated>
  <id>http://qop.github.io/</id>
  
  <author>
    <name>周中坚</name>
    
  </author>
  
  <generator uri="http://hexo.io/">Hexo</generator>
  
  <entry>
    <title>如何面试一名3-5年经验的前端工程师</title>
    <link href="http://qop.github.io/2016/05/30/2016/05-30/"/>
    <id>http://qop.github.io/2016/05/30/2016/05-30/</id>
    <published>2016-05-29T16:00:00.000Z</published>
    <updated>2016-05-30T08:53:55.000Z</updated>
    
    <content type="html">&lt;h3 id=&quot;基础得不能再基础：&quot;&gt;&lt;a href=&quot;#基础得不能再基础：&quot; class=&quot;headerlink&quot; title=&quot;基础得不能再基础：&quot;&gt;&lt;/a&gt;基础得不能再基础：&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;CSS选择器及优先级&lt;/li&gt;
&lt;li&gt;常见布局（position, float及相关）&lt;/li&gt;
&lt;li&gt;&lt;p&gt;说说CSS3特性（css3动画 无限旋转）&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;基本类型和内置对象，常用的内置对象，类型判断（数组）&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;this关键字，call &amp;amp; apply&lt;/li&gt;
&lt;li&gt;事件冒泡，event对象&lt;/li&gt;
&lt;li&gt;&lt;p&gt;数组遍历&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;BOM&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;DOM-标准演变 / getElementsBy vs querySelectorAll的差别&lt;/li&gt;
&lt;li&gt;客户端存储方案&lt;/li&gt;
&lt;li&gt;jquery/bootstrap的设计及源码&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;一些技能：&quot;&gt;&lt;a href=&quot;#一些技能：&quot; class=&quot;headerlink&quot; title=&quot;一些技能：&quot;&gt;&lt;/a&gt;一些技能：&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;http请求响应过程&lt;/li&gt;
&lt;li&gt;浏览器渲染过程-js的DocumentFragments优化，字符串拼接和array.join的效率问题等&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;方案设计：&quot;&gt;&lt;a href=&quot;#方案设计：&quot; class=&quot;headerlink&quot; title=&quot;方案设计：&quot;&gt;&lt;/a&gt;方案设计：&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;二级下拉菜单。html &amp;amp; css&lt;/li&gt;
&lt;li&gt;一个ul &amp;gt; li的list，给一个字符串数组，插入到列表后面。dom操作，reflow &amp;amp; repaint及相关优化。&lt;/li&gt;
&lt;li&gt;懒加载及进一步优化。浏览器知识，节流函数&lt;/li&gt;
&lt;li&gt;股票交易系统点击按钮动态更新。dom xmlhttprequest json get&lt;/li&gt;
&lt;li&gt;设计轮播组件。api 代码复用&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;进一步：&quot;&gt;&lt;a href=&quot;#进一步：&quot; class=&quot;headerlink&quot; title=&quot;进一步：&quot;&gt;&lt;/a&gt;进一步：&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;页面性能repaint reflow&lt;/li&gt;
&lt;li&gt;es6&lt;/li&gt;
&lt;li&gt;nodejs&lt;/li&gt;
&lt;li&gt;angularjs&lt;/li&gt;
&lt;li&gt;reactjs&lt;/li&gt;
&lt;li&gt;http2.0&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;工程化：&quot;&gt;&lt;a href=&quot;#工程化：&quot; class=&quot;headerlink&quot; title=&quot;工程化：&quot;&gt;&lt;/a&gt;工程化：&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;grunt gulp webpack&lt;/li&gt;
&lt;li&gt;less sass scss&lt;/li&gt;
&lt;li&gt;模块化工具&lt;/li&gt;
&lt;li&gt;网站性能&lt;/li&gt;
&lt;li&gt;CDN&lt;/li&gt;
&lt;li&gt;SEO&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;开放性问题：&quot;&gt;&lt;a href=&quot;#开放性问题：&quot; class=&quot;headerlink&quot; title=&quot;开放性问题：&quot;&gt;&lt;/a&gt;开放性问题：&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;今年最想掌握的前端技术&lt;/li&gt;
&lt;li&gt;如何获取最新的领域知识&lt;/li&gt;
&lt;li&gt;开发时碰到印象深刻的问题&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;移动端：&quot;&gt;&lt;a href=&quot;#移动端：&quot; class=&quot;headerlink&quot; title=&quot;移动端：&quot;&gt;&lt;/a&gt;移动端：&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;meta标签&lt;/li&gt;
&lt;li&gt;input，click/touch，mediaquery，1px border等等&lt;/li&gt;
&lt;li&gt;性能优化 - &lt;a href=&quot;http://isux.tencent.com/h5-performance.html&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;http://isux.tencent.com/h5-performance.html&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;可参考：&quot;&gt;&lt;a href=&quot;#可参考：&quot; class=&quot;headerlink&quot; title=&quot;可参考：&quot;&gt;&lt;/a&gt;可参考：&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://mdluo.github.io/blog/about-front-end-interview/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;https://mdluo.github.io/blog/about-front-end-interview/&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</content>
    
    <summary type="html">
    
      &lt;h3 id=&quot;基础得不能再基础：&quot;&gt;&lt;a href=&quot;#基础得不能再基础：&quot; class=&quot;headerlink&quot; title=&quot;基础得不能再基础：&quot;&gt;&lt;/a&gt;基础得不能再基础：&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;CSS选择器及优先级&lt;/li&gt;
&lt;li&gt;常见布局（position, f
    
    </summary>
    
    
      <category term="前端" scheme="http://qop.github.io/tags/%E5%89%8D%E7%AB%AF/"/>
    
      <category term="面试" scheme="http://qop.github.io/tags/%E9%9D%A2%E8%AF%95/"/>
    
  </entry>
  
  <entry>
    <title>如何面试一名前端工程师</title>
    <link href="http://qop.github.io/2016/05/23/2016/05-23/"/>
    <id>http://qop.github.io/2016/05/23/2016/05-23/</id>
    <published>2016-05-22T16:00:00.000Z</published>
    <updated>2016-05-23T09:56:11.000Z</updated>
    
    <content type="html">&lt;p&gt;面试前端工程师对我来说是一件非常有意思的事，因为面试过程很大程度上也是自我提升的过程。无论大公司还是小公司，之所以在如何招聘到真正有能力的前端工程师方面会遇到同样的问题，就是因为负责招聘的那些人不知道自己公司需要什么样的人，结果问问题时也问不到点子上。经过这几年在行业里的摸索，我总结出了自己的一套很有效的面试前端工程的方法。&lt;/p&gt;
&lt;p&gt;有的应聘者说我不好对付，但留给他们这样的印象也并非我所愿。我觉得之所以他们说我不好对付，主要是因为我问他们问题时问得太细了。以前我曾专门写过一些东西，告诉应聘者怎么才能通过我的面试以及怎样才能成为优秀的前端工程师&lt;del&gt;应该具备什么样的素质&lt;/del&gt;，而我的面试可以说完全是按照那两篇文章的标准进行的。我不会问一些特别偏门的问题，也不认为出几道逻辑题就能考出人的真实水平。我唯一的想法就是确定你能否胜任我们要招的这个职位。为此，我需要简单地考察如下几个方面。&lt;/p&gt;
&lt;h3 id=&quot;基本知识&quot;&gt;&lt;a href=&quot;#基本知识&quot; class=&quot;headerlink&quot; title=&quot;基本知识&quot;&gt;&lt;/a&gt;基本知识&lt;/h3&gt;&lt;p&gt;我们生活在互联网时代，你想知道的任何事情几乎都能在15分钟内找到相关信息。可是，能找到信息并不等于你会使用它。我认为所有前端工程师至少都应该掌握某些基本的知识，才能有效地完成自己的工作。如果一遇到问题，就停下工作上网四处搜索解决方案，怎么可能保证按期完成工作呢？听听，还有谁在说“我不知道，但我可以上网搜到。”请这些同学把手举起来，让大家认识一下（immediately raises a flag for me.）。下面我列出一些基本的知识点，这些都是我认为一名前端工程师（无论工作年头长短）在没有任何外来帮助的情况应该知道的。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。&lt;/li&gt;
&lt;li&gt;DOM操作——怎样添加、移除、移动、复制、创建和查找节点。&lt;/li&gt;
&lt;li&gt;事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。&lt;/li&gt;
&lt;li&gt;XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。&lt;/li&gt;
&lt;li&gt;严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。&lt;/li&gt;
&lt;li&gt;盒模型——外边距、内边距和边框之间的关系，IE &amp;lt; 8中的盒模型有什么不同。&lt;/li&gt;
&lt;li&gt;块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。&lt;/li&gt;
&lt;li&gt;浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。&lt;/li&gt;
&lt;li&gt;HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。&lt;/li&gt;
&lt;li&gt;JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。&lt;br&gt;重申一下，上述这些知识点都应该是你“想都不用想”就知道的东西。我一开始问的所有问题都是想摸清你对所有这些领域知识的掌握程度。虽然上面列出的这些知识点并没有面面俱到，但我觉得你至少应该掌握这些，才有可能跟我坐到一间办公室里来。&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;少量提问&quot;&gt;&lt;a href=&quot;#少量提问&quot; class=&quot;headerlink&quot; title=&quot;少量提问&quot;&gt;&lt;/a&gt;少量提问&lt;/h3&gt;&lt;p&gt;我非常赞同面试者问的问题越少越好。反复问应聘者各种问题既不公平，也很无聊。我在任何一次面试中，通常只问三个大问题，但每个问题又会涉及我所能想到的多个方面。回答每个大问题一般要经过几个步骤，这样我就可以在每个步骤中穿插着问一些小问题。比如说：&lt;/p&gt;
&lt;figure class=&quot;highlight erlang-repl&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;现在有一个正显示着&lt;span class=&quot;variable&quot;&gt;Yahoo&lt;/span&gt;&lt;span class=&quot;exclamation_mark&quot;&gt;!&lt;/span&gt;股票价格的页面。页面上有一个按钮，你可以单击它来刷新价格，但不会重新加载页面。请你描述一下实现这个功能的过程，假设服务器会负责准备好正确的股票价格数据。&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;这个问题牵扯到一组我想要考察的基本知识点：DOM结构、DOM操作、事件处理、XHR和JSON。如果我要求你换一种处理股票价格的方式，或者让你在页面中显示其他信息，就可以把更多的知识点包括进来。对于经验比较丰富的应聘者，我也可以自如地扩展要考察的知识范围，最简单像JOSN与XML的区别、安全问题、容量问题，等等。&lt;/p&gt;
&lt;p&gt;我还希望应聘者给出的任何解决方案中都不要使用库。我想看到最原生态的代码，你就当页面中没有包含任何库。你说你对哪个库了解多少多少，但我不能把关于库的知识作为评判能力的因素，因为库是会随时间变化的。我需要的是真正理解库背后的机制，特别是能够徒手写出一个自己的库的人。&lt;/p&gt;
&lt;h3 id=&quot;解决问题&quot;&gt;&lt;a href=&quot;#解决问题&quot; class=&quot;headerlink&quot; title=&quot;解决问题&quot;&gt;&lt;/a&gt;解决问题&lt;/h3&gt;&lt;p&gt;做为一名前端工程师，最值得高兴的事莫过于解决同一个问题会有很多种不同的方法，而你要做的就是找出最合适的方法来。我在提问的时候，经常会在应聘者解释完一种方法后问他们还有没有第二种方法。此时我会跟他们说，&lt;strong&gt;假设你的这个方法由于种种原因被否决了，那么你还能不能给出另一种方法。&lt;/strong&gt;这样做可以达到两个目的。&lt;/p&gt;
&lt;p&gt;首先，可以测试出他们是否在毫无意义地复述书本中的东西。不能不承认，某些人确实有过目不忘的天赋，听他们在那里滔滔不绝地讲，你会觉得他们什么都明白。可是，只要一跟这些人谈到怎么查找方案无效的原因，以及能否拿出一个新方案来，他们往往就傻眼了。这时候，如果我听到“我不明白这个方案为什么不够好”之类的反问，心里立刻就明白我的问题已经超出了他们的能力范围，而他们只是想拿自己死记硬背的结论来蒙混过关。&lt;/p&gt;
&lt;p&gt;其次，可以测试出他们已经掌握的（还是那句话，“想都不用想”就知道的）浏览器技术知识。如果他们对浏览器平台的核心知识有较好的理解，想出解决同一问题的不同方案根本没有那么难。&lt;/p&gt;
&lt;p&gt;对一名前端工程师来说，这绝对是最重要的能力。前端工程师在工作中遇到本该如此却并未如此的难题（说你啦，IE6），应该说是一件很平常的事。一个方案无效就无计可施的人，做不了前端工程师。&lt;/p&gt;
&lt;p&gt;考核应聘者解决问题能力的另一层原因，与我的个人喜好有关。在搞清楚应聘者知道什么不知道什么之后，我就会想着问一个他们知识领域之外的问题。这样做的目的，就是想看看他们怎样运用已有的知识解决新问题。在解决问题的每一步，我也准备了一些提示，以防有人会卡壳打艮（在我面前15分钟一言不发，对我评价这个人毫无帮助）。我真正感兴趣的，是他们能够从上一步前进到下一步。我希望看到一个人就在我眼前学到新知识。&lt;/p&gt;
&lt;p&gt;注意：所有问题都与浏览器技术相关。我不相信出几道抽象的逻辑题，就能够考出某人解决Web技术问题的能力。在我看来，这无异于让素描大师画肖像（或者让刘翔跟博尔特同场竞技），没有意义，也得不到任何有价值的信息。&lt;/p&gt;
&lt;h3 id=&quot;有激情&quot;&gt;&lt;a href=&quot;#有激情&quot; class=&quot;headerlink&quot; title=&quot;有激情&quot;&gt;&lt;/a&gt;有激情&lt;/h3&gt;&lt;p&gt;要成为一名优秀的前端工程师，最重要的莫过于对自己做的事要有激情。我们的技能都不是从学校中或者研讨会上学来的，因此前端工程师必须具备自学能力。浏览器技术的变化可谓日新月异，所以也只有不断提升自己的技能才做得到与时俱进。我虽然不能强迫谁必须多看博客、不断学习，但想应聘前端工程师的人恐怕还是必须得这么做。&lt;/p&gt;
&lt;p&gt;你怎么知道谁对这种工作有没有激情？实际上非常简单。我只问一个简单的问题：&lt;strong&gt;“目前你对什么Web技术最感兴趣？”&lt;/strong&gt;这个问题永远不会过期，而且也几乎不可能出错……除非你答不上来。就眼下来说，我希望你对这个问题给出的技术中包括WebSocket、HTML、WebGL、客户端数据库，等等。只有对Web开发充满激情的人，才会坚持不懈地学习新知识、掌握新技能；这些人才是我真正想要的。当然，我会让他们详细解释自己提到的技术，以保证他们不是随口念叨了几个时髦的新词汇。&lt;/p&gt;
&lt;h3 id=&quot;最后一点&quot;&gt;&lt;a href=&quot;#最后一点&quot; class=&quot;headerlink&quot; title=&quot;最后一点&quot;&gt;&lt;/a&gt;最后一点&lt;/h3&gt;&lt;p&gt;计算机科学或者Web设计方面的知识当然也有用，但那都是基本知识之外的东西。只要基本知识在那儿了，一切就都有了基础，想扩充知识面也不难。可是，如果等到正式上班以后，还得从头学习基本技能，那种难度是不可同日而语的。另外，高级前端工程师与一般工程师相比，肯定需要掌握更多的技能。而面试几乎没有经验的大学毕业生，我也会有一套完全不同的程序。我在这篇文章里列出来的都是一些最基本的东西。&lt;/p&gt;
&lt;p&gt;对于那些还没有多少面试经验的人，我总是喜欢告诉他们，面试完了只要问自己一个问题就行：&lt;strong&gt;你想以后跟这个人在一起共事吗？如果不管为什么，回答是不，那就是不。&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;原文链接：&lt;a href=&quot;!https://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/&quot;&gt;https://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/&lt;/a&gt;&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;面试前端工程师对我来说是一件非常有意思的事，因为面试过程很大程度上也是自我提升的过程。无论大公司还是小公司，之所以在如何招聘到真正有能力的前端工程师方面会遇到同样的问题，就是因为负责招聘的那些人不知道自己公司需要什么样的人，结果问问题时也问不到点子上。经过这几年在行业里的摸
    
    </summary>
    
    
      <category term="前端" scheme="http://qop.github.io/tags/%E5%89%8D%E7%AB%AF/"/>
    
      <category term="面试" scheme="http://qop.github.io/tags/%E9%9D%A2%E8%AF%95/"/>
    
  </entry>
  
  <entry>
    <title>react 使用的一些问题</title>
    <link href="http://qop.github.io/2016/05/02/2016/05-02/"/>
    <id>http://qop.github.io/2016/05/02/2016/05-02/</id>
    <published>2016-05-01T16:00:00.000Z</published>
    <updated>2016-05-19T08:43:48.000Z</updated>
    
    <content type="html">&lt;ol&gt;
&lt;li&gt;&lt;p&gt;三元表达式不够灵活，比如判断状态切换显示隐藏，可能要这么写：&lt;/p&gt;
&lt;figure class=&quot;highlight pf&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;className=&amp;#123;this.&lt;span class=&quot;keyword&quot;&gt;state&lt;/span&gt;.panelShow ? &lt;span class=&quot;string&quot;&gt;&quot;datatime-panel&quot;&lt;/span&gt; : &lt;span class=&quot;string&quot;&gt;&quot;datatime-panel hide&quot;&lt;/span&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;更复杂的逻辑可能要写if…else…return不同的返回值。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;用this.props传递数据，但数据可能是变化的，拿来当state用，比较奇怪。——拆分state不合理&lt;/li&gt;
&lt;li&gt;传入参数的完备性不好校验，校验失败的逻辑不好处理。——设计state有难度&lt;/li&gt;
&lt;li&gt;如果组件比较复杂，state可能会比较复杂不好维护，如果拆成小组件，他们的组合又是挑战。——redux&lt;/li&gt;
&lt;li&gt;如果要将子组件的数据传递给父组件，需要把父组件的一个函数作为回调传给子组件。——子组件给父组件只有这么办了&lt;/li&gt;
&lt;li&gt;组件之间的调用，以及交互处理没有完美的解决方案。&lt;/li&gt;
&lt;/ol&gt;
</content>
    
    <summary type="html">
    
      &lt;ol&gt;
&lt;li&gt;&lt;p&gt;三元表达式不够灵活，比如判断状态切换显示隐藏，可能要这么写：&lt;/p&gt;
&lt;figure class=&quot;highlight pf&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;b
    
    </summary>
    
    
      <category term="react" scheme="http://qop.github.io/tags/react/"/>
    
      <category term="前端" scheme="http://qop.github.io/tags/%E5%89%8D%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>qcon 2016 未来的前端</title>
    <link href="http://qop.github.io/2016/04/22/2016/04-22/"/>
    <id>http://qop.github.io/2016/04/22/2016/04-22/</id>
    <published>2016-04-21T16:00:00.000Z</published>
    <updated>2016-05-05T08:30:04.000Z</updated>
    
    <content type="html">&lt;h2 id=&quot;未来的前端专题简介&quot;&gt;&lt;a href=&quot;#未来的前端专题简介&quot; class=&quot;headerlink&quot; title=&quot;未来的前端专题简介&quot;&gt;&lt;/a&gt;&lt;a href=&quot;!http://2016.qconbeijing.com/track/2782&quot;&gt;未来的前端专题简介&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;2016 QCon beijing 前端专场，除了隔壁的移动开发挑战专场分享了阿里的Weex和携程的ReactMix几乎所有的前端主题都在这里了。&lt;br&gt;本届 QCon 的前端专场主要是在讨论前端技术未来的发展趋势，主题主要有两方面：一是讨论新的规范和标准（ECMAScript 6, TypeScript, React等），二是分享一些成熟的前端解决方案。&lt;/p&gt;
&lt;hr&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-1/&quot;&gt;TypeScript 和 ECMAScript 6 实践&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-2/&quot;&gt;React 和 Ant Design 在蚂蚁金服的实践&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-3/&quot;&gt;青瓷引擎——打造 HTML5 游戏引擎开发工具之路&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-4/&quot;&gt;如何看待 left-pad 事件&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-5/&quot;&gt;前后端联调方案探索与应用&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-6/&quot;&gt;向未来兼容——ES2015+/TypeScript 开发 Node.js 项目&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-7/&quot;&gt;互动娱乐时代下的 Web 音视频性能优化&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
</content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;未来的前端专题简介&quot;&gt;&lt;a href=&quot;#未来的前端专题简介&quot; class=&quot;headerlink&quot; title=&quot;未来的前端专题简介&quot;&gt;&lt;/a&gt;&lt;a href=&quot;!http://2016.qconbeijing.com/track/2782&quot;&gt;未来的前端专题简介
    
    </summary>
    
    
      <category term="qcon" scheme="http://qop.github.io/tags/qcon/"/>
    
      <category term="前端" scheme="http://qop.github.io/tags/%E5%89%8D%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>向未来兼容——ES2015+/TypeScript 开发 Node.js 项目</title>
    <link href="http://qop.github.io/2016/04/22/2016/04-22-6/"/>
    <id>http://qop.github.io/2016/04/22/2016/04-22-6/</id>
    <published>2016-04-21T16:00:00.000Z</published>
    <updated>2016-05-05T08:34:18.000Z</updated>
    
    <content type="html">&lt;p&gt;ES2015特性，stage 3 &amp;amp; 4，未来特性，async/await, decorators&lt;br&gt;没有runtime支持如何使用这些特性？babel&lt;br&gt;编译引入的问题：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;编译慢的问题——升级到npm3&lt;/li&gt;
&lt;li&gt;性能问题&lt;/li&gt;
&lt;li&gt;使用es2015-loose，性能更高(部分6x)；&lt;/li&gt;
&lt;li&gt;使用bluebird替代promise(3x)；&lt;a href=&quot;https://github.com/petkaantonov/bluebird/wiki/Optimization-killers&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;https://github.com/petkaantonov/bluebird/wiki/Optimization-killers&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;如何实时编译——babel –watch&lt;/li&gt;
&lt;li&gt;报错信息定位到源代码&lt;br&gt;babel –retain-lines（定位不准）&lt;br&gt;babel –sourceMap&lt;br&gt;借助 source-map-support 模块&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;断点调试&lt;br&gt;    借助 SourceMap，node-inspector、WebStorm、VS Code 等都支持借助 SourceMap 来断点调试源代码&lt;br&gt;    编译出错后如何快速提示——命令行编译错误信息显示在控制台→调用接口编译将错误信息打印到页面。&lt;br&gt;typescript&lt;br&gt;    先tsc，在babel（为啥？不记得了）&lt;br&gt;    两次编译生成SourceMap导致报错信息定位不准，solution&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-1/&quot;&gt;TypeScript 和 ECMAScript 6 实践&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-2/&quot;&gt;React 和 Ant Design 在蚂蚁金服的实践&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-3/&quot;&gt;青瓷引擎——打造 HTML5 游戏引擎开发工具之路&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-4/&quot;&gt;如何看待 left-pad 事件&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-5/&quot;&gt;前后端联调方案探索与应用&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;向未来兼容——ES2015+/TypeScript 开发 Node.js 项目&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-7/&quot;&gt;互动娱乐时代下的 Web 音视频性能优化&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;ES2015特性，stage 3 &amp;amp; 4，未来特性，async/await, decorators&lt;br&gt;没有runtime支持如何使用这些特性？babel&lt;br&gt;编译引入的问题：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;编译慢的问题——升级到npm3&lt;/li&gt;
&lt;li&gt;性能问题
    
    </summary>
    
    
      <category term="es2015" scheme="http://qop.github.io/tags/es2015/"/>
    
      <category term="es6" scheme="http://qop.github.io/tags/es6/"/>
    
      <category term="node" scheme="http://qop.github.io/tags/node/"/>
    
      <category term="qcon" scheme="http://qop.github.io/tags/qcon/"/>
    
      <category term="ts" scheme="http://qop.github.io/tags/ts/"/>
    
      <category term="typescript" scheme="http://qop.github.io/tags/typescript/"/>
    
      <category term="前端" scheme="http://qop.github.io/tags/%E5%89%8D%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>前后端联调方案探索与应用</title>
    <link href="http://qop.github.io/2016/04/22/2016/04-22-5/"/>
    <id>http://qop.github.io/2016/04/22/2016/04-22-5/</id>
    <published>2016-04-21T16:00:00.000Z</published>
    <updated>2016-05-05T08:32:58.000Z</updated>
    
    <content type="html">&lt;p&gt;前后端联调的进化&lt;br&gt;广义的前端：浏览器，iOS/android，SSO，业务后台，存储服务&lt;br&gt;现有工具对比：&lt;br&gt;&lt;img src=&quot;/images/2016-04-qcon-联调.jpg&quot; alt=&quot;qcon-联调&quot;&gt;&lt;br&gt;API定义中心化——定义一次API而可以处处复用，生成API mock，API单元测试，API文档，流程约束。&lt;br&gt;两种mock方案：请求代理 vs 客户端接入&lt;/p&gt;
&lt;p&gt;如何确保API的可用性？——将API测试过程加入到ci流程，保证去掉mock后前端能无缝对接上后端。&lt;br&gt;共享API的定义：通过定义生成文档——如何编写API: markdown超集？做了语法检查，如果不合法，在右侧预览区域显示（好像不够健壮？）&lt;br&gt;流程控制：API变更递归通知，项目成员可以approve和reject。（需要生成API依赖树：API1→服务A→服务B）&lt;br&gt;其他：&lt;br&gt;有状态的API由多个case定义，选其中一个组成scenario&lt;br&gt;API线上检测-ongoing&lt;br&gt;服务调用RPC(vs http)化-ongoing&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-1/&quot;&gt;TypeScript 和 ECMAScript 6 实践&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-2/&quot;&gt;React 和 Ant Design 在蚂蚁金服的实践&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-3/&quot;&gt;青瓷引擎——打造 HTML5 游戏引擎开发工具之路&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-4/&quot;&gt;如何看待 left-pad 事件&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;前后端联调方案探索与应用&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-6/&quot;&gt;向未来兼容——ES2015+/TypeScript 开发 Node.js 项目&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-7/&quot;&gt;互动娱乐时代下的 Web 音视频性能优化&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;前后端联调的进化&lt;br&gt;广义的前端：浏览器，iOS/android，SSO，业务后台，存储服务&lt;br&gt;现有工具对比：&lt;br&gt;&lt;img src=&quot;/images/2016-04-qcon-联调.jpg&quot; alt=&quot;qcon-联调&quot;&gt;&lt;br&gt;API定义中心化——定义一次API而
    
    </summary>
    
    
      <category term="qcon" scheme="http://qop.github.io/tags/qcon/"/>
    
      <category term="前后端分离" scheme="http://qop.github.io/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB/"/>
    
      <category term="前端" scheme="http://qop.github.io/tags/%E5%89%8D%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>如何看待 left-pad 事件</title>
    <link href="http://qop.github.io/2016/04/22/2016/04-22-4/"/>
    <id>http://qop.github.io/2016/04/22/2016/04-22-4/</id>
    <published>2016-04-21T16:00:00.000Z</published>
    <updated>2016-05-05T08:28:23.000Z</updated>
    
    <content type="html">&lt;p&gt;关于贺师俊：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;JavaScript: The World’s Best Programming Language&lt;/li&gt;
&lt;li&gt;程序员的圣战：tab vs space&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;事件回顾：azer? kik公司？npm 公司？&lt;/p&gt;
&lt;p&gt;各种行为艺术：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://left-pad.io/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;http://left-pad.io/&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://fivejs.lol/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;http://fivejs.lol/&lt;/a&gt; &lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/jezen/is-thirteen&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;https://github.com/jezen/is-thirteen&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;包是不是应该有命名空间？&lt;a href=&quot;https://github.com/npm/npm/issues/798&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;https://github.com/npm/npm/issues/798&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;小模块是好是坏？&lt;a href=&quot;https://github.com/sindresorhus/ama/issues/10（关键不在行数，而在于抽象）&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;https://github.com/sindresorhus/ama/issues/10（关键不在行数，而在于抽象）&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;我们是不是早已忘记该如何好好地编程？&lt;a href=&quot;https://zhuanlan.zhihu.com/p/20707235&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;https://zhuanlan.zhihu.com/p/20707235&lt;/a&gt;&lt;br&gt;第三方依赖是好是坏？&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;依赖太多太深，安装蛮&lt;/li&gt;
&lt;li&gt;依赖链太深，安全隐患&lt;/li&gt;
&lt;li&gt;依赖太复杂，升级困难&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;是不是应该使用 shrinkwrap/lock（锁定依赖）&lt;br&gt;是不是应该使用 bundle/pack（打包依赖）&lt;br&gt;是不是应该自建仓库？&lt;br&gt;it depends&lt;/p&gt;
&lt;p&gt;论left-pad的实现——性能优化应该针对具体的 case&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-1/&quot;&gt;TypeScript 和 ECMAScript 6 实践&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-2/&quot;&gt;React 和 Ant Design 在蚂蚁金服的实践&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-3/&quot;&gt;青瓷引擎——打造 HTML5 游戏引擎开发工具之路&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;如何看待 left-pad 事件&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-5/&quot;&gt;前后端联调方案探索与应用&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-6/&quot;&gt;向未来兼容——ES2015+/TypeScript 开发 Node.js 项目&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-7/&quot;&gt;互动娱乐时代下的 Web 音视频性能优化&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;关于贺师俊：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;JavaScript: The World’s Best Programming Language&lt;/li&gt;
&lt;li&gt;程序员的圣战：tab vs space&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;事件回顾：azer? kik公司？npm 公司？
    
    </summary>
    
    
      <category term="qcon" scheme="http://qop.github.io/tags/qcon/"/>
    
      <category term="前端" scheme="http://qop.github.io/tags/%E5%89%8D%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>青瓷引擎——打造 HTML5 游戏引擎开发工具之路</title>
    <link href="http://qop.github.io/2016/04/22/2016/04-22-3/"/>
    <id>http://qop.github.io/2016/04/22/2016/04-22-3/</id>
    <published>2016-04-21T16:00:00.000Z</published>
    <updated>2016-05-05T08:27:10.000Z</updated>
    
    <content type="html">&lt;ul&gt;
&lt;li&gt;demo show&lt;/li&gt;
&lt;li&gt;Canvas and DOM&lt;/li&gt;
&lt;li&gt;is WebGL ready?&lt;/li&gt;
&lt;li&gt;optimising&lt;/li&gt;
&lt;/ul&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-1/&quot;&gt;TypeScript 和 ECMAScript 6 实践&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-2/&quot;&gt;React 和 Ant Design 在蚂蚁金服的实践&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;青瓷引擎——打造 HTML5 游戏引擎开发工具之路&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-4/&quot;&gt;如何看待 left-pad 事件&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-5/&quot;&gt;前后端联调方案探索与应用&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-6/&quot;&gt;向未来兼容——ES2015+/TypeScript 开发 Node.js 项目&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-7/&quot;&gt;互动娱乐时代下的 Web 音视频性能优化&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
</content>
    
    <summary type="html">
    
      &lt;ul&gt;
&lt;li&gt;demo show&lt;/li&gt;
&lt;li&gt;Canvas and DOM&lt;/li&gt;
&lt;li&gt;is WebGL ready?&lt;/li&gt;
&lt;li&gt;optimising&lt;/li&gt;
&lt;/ul&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/20
    
    </summary>
    
    
      <category term="html5 游戏引擎" scheme="http://qop.github.io/tags/html5-%E6%B8%B8%E6%88%8F%E5%BC%95%E6%93%8E/"/>
    
      <category term="前端" scheme="http://qop.github.io/tags/%E5%89%8D%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>React 和 Ant Design 在蚂蚁金服的实践</title>
    <link href="http://qop.github.io/2016/04/22/2016/04-22-2/"/>
    <id>http://qop.github.io/2016/04/22/2016/04-22-2/</id>
    <published>2016-04-21T16:00:00.000Z</published>
    <updated>2016-05-05T08:26:47.000Z</updated>
    
    <content type="html">&lt;p&gt;研发模式变迁：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;rd fe ued pm qa → 业务团队+资源团队(fe, ued)→ 全栈研发模式：业务团队(新)+服务团队(fe, ued)&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;中台设计语言：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;组件：实用主义，小而美，统一交互，动画&lt;/li&gt;
&lt;li&gt;逻辑化的设计原则：公式化的色彩，小中大间距和亲密性&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;react技术栈:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;arale alice seajs spm→es6 + react (社区！)&lt;/li&gt;
&lt;li&gt;npm + webpack + babel&lt;/li&gt;
&lt;li&gt;ant-tool:  脚手架方式封装($ antd-init)&lt;/li&gt;
&lt;li&gt;代理 mock 构建 规范 离线包开发 数据流管理 UI测试&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;如何做好开源：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;1. 出口转内销
2. 文档 &amp;gt; 代码
3. 演示比API更常用
4.  提供changelog和升级文档
5. 提供开发者说明
6. 提供多版本文档供用户升级使用（多版本文档是开源的良心）
7. 不接受未提issue的需求 
&lt;/code&gt;&lt;/pre&gt;&lt;ol&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-1/&quot;&gt;TypeScript 和 ECMAScript 6 实践&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;React 和 Ant Design 在蚂蚁金服的实践&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-3/&quot;&gt;青瓷引擎——打造 HTML5 游戏引擎开发工具之路&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-4/&quot;&gt;如何看待 left-pad 事件&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-5/&quot;&gt;前后端联调方案探索与应用&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-6/&quot;&gt;向未来兼容——ES2015+/TypeScript 开发 Node.js 项目&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-7/&quot;&gt;互动娱乐时代下的 Web 音视频性能优化&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;研发模式变迁：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;rd fe ued pm qa → 业务团队+资源团队(fe, ued)→ 全栈研发模式：业务团队(新)+服务团队(fe, ued)&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;中台设计语言：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;组件：实用主义，小而美，统一
    
    </summary>
    
    
      <category term="qcon" scheme="http://qop.github.io/tags/qcon/"/>
    
      <category term="react" scheme="http://qop.github.io/tags/react/"/>
    
      <category term="前端" scheme="http://qop.github.io/tags/%E5%89%8D%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>TypeScript 和 ECMAScript 6 实践</title>
    <link href="http://qop.github.io/2016/04/22/2016/04-22-1/"/>
    <id>http://qop.github.io/2016/04/22/2016/04-22-1/</id>
    <published>2016-04-21T16:00:00.000Z</published>
    <updated>2016-05-05T08:29:51.000Z</updated>
    
    <content type="html">&lt;ul&gt;
&lt;li&gt;为了解决 js 语法上的一些局限，业界出现了coffeescript dart ts es6等，而现在 es6 和 ts 已经很成熟了。&lt;/li&gt;
&lt;li&gt;然后讲了 ts 是什么。ts最重要的几个特性：是js的超集，而非重新发明(not re-inverting but improve)，包含大部分 es6 的特性，可以被编译成 es5 / es6.&lt;/li&gt;
&lt;li&gt;再讲了一些 es6 的特性： Array/Object/Promise/let and const 等。&lt;/li&gt;
&lt;li&gt;回到 ts，ts已经在 dojo2 / Angular2.0 中使用，现在时机已经成熟：&lt;ol&gt;
&lt;li&gt;简单到只要改个后缀名就work，所以迁移升级非常方便&lt;/li&gt;
&lt;li&gt;是js的超集，使用灵活&lt;/li&gt;
&lt;li&gt;在开发环境中使用，浏览器用编译过的代码&lt;/li&gt;
&lt;li&gt;可以提前使用新的es标准&lt;/li&gt;
&lt;li&gt;提供类型检测，在开发时很有用&lt;/li&gt;
&lt;li&gt;着重介绍了ts的interface&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;ol&gt;
&lt;li&gt;TypeScript 和 ECMAScript 6 实践&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-2/&quot;&gt;React 和 Ant Design 在蚂蚁金服的实践&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-3/&quot;&gt;青瓷引擎——打造 HTML5 游戏引擎开发工具之路&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-4/&quot;&gt;如何看待 left-pad 事件&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-5/&quot;&gt;前后端联调方案探索与应用&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-6/&quot;&gt;向未来兼容——ES2015+/TypeScript 开发 Node.js 项目&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-7/&quot;&gt;互动娱乐时代下的 Web 音视频性能优化&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
</content>
    
    <summary type="html">
    
      &lt;ul&gt;
&lt;li&gt;为了解决 js 语法上的一些局限，业界出现了coffeescript dart ts es6等，而现在 es6 和 ts 已经很成熟了。&lt;/li&gt;
&lt;li&gt;然后讲了 ts 是什么。ts最重要的几个特性：是js的超集，而非重新发明(not re-inverting
    
    </summary>
    
    
      <category term="es2015" scheme="http://qop.github.io/tags/es2015/"/>
    
      <category term="es6" scheme="http://qop.github.io/tags/es6/"/>
    
      <category term="qcon" scheme="http://qop.github.io/tags/qcon/"/>
    
      <category term="ts" scheme="http://qop.github.io/tags/ts/"/>
    
      <category term="typescript" scheme="http://qop.github.io/tags/typescript/"/>
    
      <category term="前端" scheme="http://qop.github.io/tags/%E5%89%8D%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>互动娱乐时代下的 Web 音视频性能优化</title>
    <link href="http://qop.github.io/2016/04/22/2016/04-22-7/"/>
    <id>http://qop.github.io/2016/04/22/2016/04-22-7/</id>
    <published>2016-04-21T16:00:00.000Z</published>
    <updated>2016-05-05T08:34:30.000Z</updated>
    
    <content type="html">&lt;p&gt;关键技术：&lt;br&gt;    自己封装的音视频sdk，私有协议与flash互通。&lt;br&gt;遇到的挑战：（如何优化？）&lt;br&gt;    首屏时间&lt;br&gt;    实时性&lt;br&gt;    流畅性&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-1/&quot;&gt;TypeScript 和 ECMAScript 6 实践&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-2/&quot;&gt;React 和 Ant Design 在蚂蚁金服的实践&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-3/&quot;&gt;青瓷引擎——打造 HTML5 游戏引擎开发工具之路&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-4/&quot;&gt;如何看待 left-pad 事件&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-5/&quot;&gt;前后端联调方案探索与应用&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016/04/22/2016/2016-04-22-6/&quot;&gt;向未来兼容——ES2015+/TypeScript 开发 Node.js 项目&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;互动娱乐时代下的 Web 音视频性能优化&lt;/li&gt;
&lt;/ol&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;关键技术：&lt;br&gt;    自己封装的音视频sdk，私有协议与flash互通。&lt;br&gt;遇到的挑战：（如何优化？）&lt;br&gt;    首屏时间&lt;br&gt;    实时性&lt;br&gt;    流畅性&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href=&quot;http://qop.github.io/2016
    
    </summary>
    
    
      <category term="qcon" scheme="http://qop.github.io/tags/qcon/"/>
    
      <category term="前端" scheme="http://qop.github.io/tags/%E5%89%8D%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>运营商流量劫持</title>
    <link href="http://qop.github.io/2016/04/18/2016/04-18/"/>
    <id>http://qop.github.io/2016/04/18/2016/04-18/</id>
    <published>2016-04-17T16:00:00.000Z</published>
    <updated>2016-04-18T14:31:01.000Z</updated>
    
    <content type="html"></content>
    
    <summary type="html">
    
    </summary>
    
    
      <category term="前端" scheme="http://qop.github.io/tags/%E5%89%8D%E7%AB%AF/"/>
    
      <category term="流量劫持" scheme="http://qop.github.io/tags/%E6%B5%81%E9%87%8F%E5%8A%AB%E6%8C%81/"/>
    
  </entry>
  
  <entry>
    <title>jsbridge</title>
    <link href="http://qop.github.io/2016/03/16/2016/03-16/"/>
    <id>http://qop.github.io/2016/03/16/2016/03-16/</id>
    <published>2016-03-15T16:00:00.000Z</published>
    <updated>2016-03-25T07:26:23.000Z</updated>
    
    <content type="html">&lt;p&gt;ing&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;ing&lt;/p&gt;

    
    </summary>
    
    
      <category term="jsbridge" scheme="http://qop.github.io/tags/jsbridge/"/>
    
      <category term="前端" scheme="http://qop.github.io/tags/%E5%89%8D%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>ci系统</title>
    <link href="http://qop.github.io/2016/03/10/2016/03-10/"/>
    <id>http://qop.github.io/2016/03/10/2016/03-10/</id>
    <published>2016-03-09T16:00:00.000Z</published>
    <updated>2016-03-25T07:26:20.000Z</updated>
    
    <content type="html">&lt;p&gt;一般来说ci要做的事情就是把开发环境的代码构建完之后丢到线上去，这里面ci系统要做哪些事，开哪些口子都得看实际的业务需要，本文只是列举一个比较好的实践。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;p&gt;读取当前系统环境，打印在日志上方便排查由于环境或者版本造成的问题。&lt;/p&gt;
&lt;figure class=&quot;highlight ocaml&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;4&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;symbol&quot;&gt;&#39;echo&lt;/span&gt; $&lt;span class=&quot;type&quot;&gt;PATH&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;symbol&quot;&gt;&#39;node&lt;/span&gt; -v&#39;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;symbol&quot;&gt;&#39;npm&lt;/span&gt; -v&#39;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;symbol&quot;&gt;&#39;npm&lt;/span&gt; config get registry&#39;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;清空destination，此处可以由用户（此处用户指的是ci系统的用户，即业务开发）指定，如果不设置就读取默认配置，比如/dist文件夹。&lt;/p&gt;
&lt;figure class=&quot;highlight nginx&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;title&quot;&gt;rm&lt;/span&gt; -rf dist&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;跑用户指定的构建脚本，gulp, grunt, webpack等各种方式，输出到/dist即可。这时候/dist里应该有&lt;em&gt;*/&lt;/em&gt;.@(html|js|css|jpg|jpeg|png|gif)这些文件。&lt;/p&gt;
&lt;figure class=&quot;highlight xquery&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;string&quot;&gt;&quot;script&quot;&lt;/span&gt;: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;string&quot;&gt;&quot;build&quot;&lt;/span&gt;: &lt;span class=&quot;string&quot;&gt;&quot;gulp&quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;文件名校验，文件名应该由小写字母、数字、分隔符、下划线和点组成。&lt;code&gt;/^[a-z0-9_\-\.\/]+$/&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;替换css中引用的相对路径，比如背景图，应该直接引用发到cdn上的静态文件地址。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;压缩css。不多说了，推荐用clean-css。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;压缩js。不多说，推荐用uglify-js。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;压缩图片。图片推荐用imagemin，有针对jpg, jpeg, png, gif的工具。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;给静态文件加md5。形如/dist/lib/zepto.min.js ==&amp;gt; /dist/lib/zepto.min.md5.js&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;替换html中引用静态资源的相对路径。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;上传ftp。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;更新数据库版本号。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;一般来说ci要做的事情就是把开发环境的代码构建完之后丢到线上去，这里面ci系统要做哪些事，开哪些口子都得看实际的业务需要，本文只是列举一个比较好的实践。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;p&gt;读取当前系统环境，打印在日志上方便排查由于环境或者版本造成的问题。&lt;/p&gt;
&lt;figur
    
    </summary>
    
    
      <category term="ci" scheme="http://qop.github.io/tags/ci/"/>
    
      <category term="nodejs" scheme="http://qop.github.io/tags/nodejs/"/>
    
      <category term="前端" scheme="http://qop.github.io/tags/%E5%89%8D%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>python爬虫(一)</title>
    <link href="http://qop.github.io/2016/02/23/2016/02-23/"/>
    <id>http://qop.github.io/2016/02/23/2016/02-23/</id>
    <published>2016-02-22T16:00:00.000Z</published>
    <updated>2016-03-25T07:26:16.000Z</updated>
    
    <content type="html">&lt;p&gt;之前用python写过一些小工具，非常方便，但是没有系统学习过，所以想带着做一个简单爬虫的目的，系统地学习一下这个语言。&lt;br&gt;TODO&lt;/p&gt;
&lt;p&gt;——————————20160314 太忙了的分割线——————————&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;之前用python写过一些小工具，非常方便，但是没有系统学习过，所以想带着做一个简单爬虫的目的，系统地学习一下这个语言。&lt;br&gt;TODO&lt;/p&gt;
&lt;p&gt;——————————20160314 太忙了的分割线——————————&lt;/p&gt;

    
    </summary>
    
    
      <category term="python" scheme="http://qop.github.io/tags/python/"/>
    
      <category term="爬虫" scheme="http://qop.github.io/tags/%E7%88%AC%E8%99%AB/"/>
    
  </entry>
  
  <entry>
    <title>外卖整合沟通会</title>
    <link href="http://qop.github.io/2015/11/20/2015/11-20/"/>
    <id>http://qop.github.io/2015/11/20/2015/11-20/</id>
    <published>2015-11-19T16:00:00.000Z</published>
    <updated>2016-03-25T07:18:46.000Z</updated>
    
    <content type="html">&lt;h2 id=&quot;中美零售业互联网化对比&quot;&gt;&lt;a href=&quot;#中美零售业互联网化对比&quot; class=&quot;headerlink&quot; title=&quot;中美零售业互联网化对比&quot;&gt;&lt;/a&gt;中美零售业互联网化对比&lt;/h2&gt;&lt;p&gt;前十的电商公司，美国只有3家是新兴互联网公司，amazon, ebay, apple，美国的电商市场份额差距不大。&lt;br&gt;中国更符合互联网的721定律。&lt;/p&gt;
&lt;h2 id=&quot;互联网到来时传统零售业对比。&quot;&gt;&lt;a href=&quot;#互联网到来时传统零售业对比。&quot; class=&quot;headerlink&quot; title=&quot;互联网到来时传统零售业对比。&quot;&gt;&lt;/a&gt;互联网到来时传统零售业对比。&lt;/h2&gt;&lt;p&gt;中国央视打广告去二三线城市开店就能赚钱。&lt;br&gt;美国公司的增长点基本来自全球化或者国家经历形式走强。&lt;/p&gt;
&lt;h2 id=&quot;外卖业务在中美环境下的差异性&quot;&gt;&lt;a href=&quot;#外卖业务在中美环境下的差异性&quot; class=&quot;headerlink&quot; title=&quot;外卖业务在中美环境下的差异性&quot;&gt;&lt;/a&gt;外卖业务在中美环境下的差异性&lt;/h2&gt;&lt;p&gt;人口密度，人力成本，商家sku，人口数量。&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;中美零售业互联网化对比&quot;&gt;&lt;a href=&quot;#中美零售业互联网化对比&quot; class=&quot;headerlink&quot; title=&quot;中美零售业互联网化对比&quot;&gt;&lt;/a&gt;中美零售业互联网化对比&lt;/h2&gt;&lt;p&gt;前十的电商公司，美国只有3家是新兴互联网公司，amazon, eba
    
    </summary>
    
    
      <category term="O2O" scheme="http://qop.github.io/tags/O2O/"/>
    
  </entry>
  
  <entry>
    <title>面试</title>
    <link href="http://qop.github.io/2015/10/28/2015/10-28/"/>
    <id>http://qop.github.io/2015/10/28/2015/10-28/</id>
    <published>2015-10-27T16:00:00.000Z</published>
    <updated>2016-04-22T03:37:02.000Z</updated>
    
    <content type="html">&lt;p&gt;最近招人经常需要面试，大概整理下面试的思路。&lt;/p&gt;
&lt;h3 id=&quot;基础知识&quot;&gt;&lt;a href=&quot;#基础知识&quot; class=&quot;headerlink&quot; title=&quot;基础知识&quot;&gt;&lt;/a&gt;基础知识&lt;/h3&gt;&lt;p&gt;HTML&lt;br&gt;CSS&lt;br&gt;javascript&lt;br&gt;DOM &amp;amp; BOM基础知识&lt;/p&gt;
&lt;h3 id=&quot;进阶知识&quot;&gt;&lt;a href=&quot;#进阶知识&quot; class=&quot;headerlink&quot; title=&quot;进阶知识&quot;&gt;&lt;/a&gt;进阶知识&lt;/h3&gt;&lt;p&gt;持续集成&lt;br&gt;前端工程化&lt;br&gt;渐进增强与平稳退化&lt;br&gt;操作系统-linux&lt;br&gt;git&lt;br&gt;浏览器&lt;br&gt;网络-HTTP&lt;br&gt;算法&lt;br&gt;设计模式&lt;br&gt;hybrid框架&lt;br&gt;移动端开发&lt;/p&gt;
&lt;h3 id=&quot;前端新技术&quot;&gt;&lt;a href=&quot;#前端新技术&quot; class=&quot;headerlink&quot; title=&quot;前端新技术&quot;&gt;&lt;/a&gt;前端新技术&lt;/h3&gt;&lt;p&gt;ES6&lt;br&gt;angularJS&lt;br&gt;react&lt;/p&gt;
&lt;p&gt;具体内容可参考：&lt;a href=&quot;https://mdluo.github.io/blog/about-front-end-interview/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;关于前端面试&lt;/a&gt;&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;最近招人经常需要面试，大概整理下面试的思路。&lt;/p&gt;
&lt;h3 id=&quot;基础知识&quot;&gt;&lt;a href=&quot;#基础知识&quot; class=&quot;headerlink&quot; title=&quot;基础知识&quot;&gt;&lt;/a&gt;基础知识&lt;/h3&gt;&lt;p&gt;HTML&lt;br&gt;CSS&lt;br&gt;javascript&lt;br&gt;DOM
    
    </summary>
    
    
      <category term="前端" scheme="http://qop.github.io/tags/%E5%89%8D%E7%AB%AF/"/>
    
      <category term="面试" scheme="http://qop.github.io/tags/%E9%9D%A2%E8%AF%95/"/>
    
  </entry>
  
  <entry>
    <title>前端分享</title>
    <link href="http://qop.github.io/2015/06/23/2015/06-23/"/>
    <id>http://qop.github.io/2015/06/23/2015/06-23/</id>
    <published>2015-06-22T16:00:00.000Z</published>
    <updated>2016-03-25T07:14:54.000Z</updated>
    
    <content type="html">&lt;p&gt;频度：每两周一次&lt;br&gt;时间：安排在每个迭代结束的周五下午，时长控制在1-2小时&lt;br&gt;流程：内容讲解，QA，开脑洞&lt;br&gt;形式：可以但不仅限于ppt、浏览器、ide&lt;br&gt;内容：新技术或者设计的学习分享（比如reactjs、angularjs、ES6中的新特性、html5和css3等），系统级分享（比如前端缓存方案、前端性能优化、cdn原理、bigpipe、前后端分离、gulpjs等前端工程化工具等），经验分享（jsbridge设计与实现，photoshop，灵活的html，比较大的前端项目的开发经验和踩过的坑），标准解读（js中经常被误解误用的一些概念）&lt;br&gt;主题及标准：每个人都可以提，随时更新主题，鼓励学习各种欣欣向荣的新技术，如果能转化到生产环境更好。&lt;br&gt;流程：主持人提前一个月联系分享人并确定分享内容，并负责订会议室买水果饮料（如果有经费- -）等后勤工作，分享人会前或者会后发出相关材料。&lt;br&gt;评价标准：NPS。&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;频度：每两周一次&lt;br&gt;时间：安排在每个迭代结束的周五下午，时长控制在1-2小时&lt;br&gt;流程：内容讲解，QA，开脑洞&lt;br&gt;形式：可以但不仅限于ppt、浏览器、ide&lt;br&gt;内容：新技术或者设计的学习分享（比如reactjs、angularjs、ES6中的新特性、html5
    
    </summary>
    
    
      <category term="前端" scheme="http://qop.github.io/tags/%E5%89%8D%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>2014年终总结</title>
    <link href="http://qop.github.io/2015/01/01/2015/01-01/"/>
    <id>http://qop.github.io/2015/01/01/2015/01-01/</id>
    <published>2014-12-31T16:00:00.000Z</published>
    <updated>2016-02-23T08:13:08.000Z</updated>
    
    <content type="html">&lt;h2 id=&quot;工作第二年&quot;&gt;&lt;a href=&quot;#工作第二年&quot; class=&quot;headerlink&quot; title=&quot;工作第二年&quot;&gt;&lt;/a&gt;工作第二年&lt;/h2&gt;&lt;p&gt;2014年，工作还是最重要且最紧急的。&lt;/p&gt;
&lt;p&gt;专业技能上有了——爬上一个山坡，看到无数个山坡——的感觉，2015年我需要更加专注。&lt;br&gt;相应的，心态可以调整到一个平稳的状态。知道什么东西可以实现，怎么实现，知道什么东西不能实现。也就不会因为一个bug而睡不着觉，也不会因为无知而轻易下不靠谱的结论。&lt;/p&gt;
&lt;p&gt;职业素养上更是有了翻天覆地的变化。比如发邮件，年初的时候我还有过和别人争论，然后发群邮件公开指责的行为。也许讨论的事情本身我没有错，但是发邮件这种事我是错了。&lt;br&gt;现在的我，可以跳出自身的局限，看到别人的需求，可以写出直指问题却让各方都看着舒服的邮件了。&lt;br&gt;这块的缺点是还不够积极主动，2015要更多地做一个发起者，而不是执行者。&lt;/p&gt;
&lt;p&gt;员工在工作中有专业技能和职业素养上的提升，物质上的回报就是自然而然的了。加入点评以来的第三次绩效考核分别是B、B+和A，希望今年有个好收成。（不过公司向来小气）&lt;/p&gt;
&lt;h3 id=&quot;经济独立&quot;&gt;&lt;a href=&quot;#经济独立&quot; class=&quot;headerlink&quot; title=&quot;经济独立&quot;&gt;&lt;/a&gt;经济独立&lt;/h3&gt;&lt;p&gt;当初来上海还从家拿了安家费，但是拿了第二个月工资之后就可以自称经济独立了。&lt;br&gt;后来支付宝推出了余额宝，立刻去谷歌余额宝以及货币基金，第二天就把所有的钱转进去了。&lt;/p&gt;
&lt;p&gt;然后来到今年，知道了各种货币、债券、混合、股票基金，p2p，股票，贵金属，外汇的特点，把承受能力从每天看着余额宝几块十几块的收益变成了每天盈亏一两千。&lt;br&gt;2014最重要的不是靠理财赚钱了，而是有了更成熟的理财观念及知识。&lt;/p&gt;
&lt;p&gt;很早就听说一个支持贷款买房的观点，就是房贷是一个普通人这辈子可以获得的最大的现金流，以及不错的利率，所以即使能全款买房，也应该贷款。当时不明所以，而且短期内自己也不会有稳定的能跑赢利率加上CPI的理财能力，但是这个观点算是清楚明白了。&lt;/p&gt;
&lt;h3 id=&quot;看书&quot;&gt;&lt;a href=&quot;#看书&quot; class=&quot;headerlink&quot; title=&quot;看书&quot;&gt;&lt;/a&gt;看书&lt;/h3&gt;&lt;p&gt;从豆瓣读书的统计来看，2014年的阅读量跌入低谷。但是翻完豆瓣阅读就释然了，在线阅读的量应该不下于2013年的纸质书。缺点也是有的，看的很多短篇不成体系，还有许多就是知乎问答精选集，看完没有什么收获的。&lt;/p&gt;
&lt;p&gt;阅读量现在在我看来非常无所谓了，因为今年发现了一件非常重要的事情，就是看书得到的知识真的很少（小说什么的另说），做摘抄要好一些，写读书笔记算是不错的，但都比和同样看了这本书的人讨论，或者把你看到的东西讲给别人收获少。&lt;br&gt;这方面看，读书沙龙蛮好的，但是自己没有时间和脸皮混到这种组织里去了。&lt;/p&gt;
&lt;p&gt;希望2015年能更多地与人交流。&lt;/p&gt;
&lt;h3 id=&quot;行路&quot;&gt;&lt;a href=&quot;#行路&quot; class=&quot;headerlink&quot; title=&quot;行路&quot;&gt;&lt;/a&gt;行路&lt;/h3&gt;&lt;p&gt;2014宅的比较多，除了公司组织的莫干山和汤山温泉，就去了宁波舟山，回了一趟武汉，去了一个冷门景点覆卮山。计划许久的新加坡及东南亚之行因为种种原因未能成行。&lt;/p&gt;
&lt;h3 id=&quot;其他&quot;&gt;&lt;a href=&quot;#其他&quot; class=&quot;headerlink&quot; title=&quot;其他&quot;&gt;&lt;/a&gt;其他&lt;/h3&gt;&lt;p&gt;2014年初的时候结束了一段短暂的感情，因为那不是我想要的生活。&lt;br&gt;其他也不知道说什么了，就这样吧。&lt;/p&gt;
&lt;p&gt;别人总是在欢快的气氛中跨年，而我却连续四年沉浸在一种莫名的情绪中。不知道为什么想到了某夜和大锅对独身主义的讨论，其实很多人只是无法把握自己的生活吧。&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;工作第二年&quot;&gt;&lt;a href=&quot;#工作第二年&quot; class=&quot;headerlink&quot; title=&quot;工作第二年&quot;&gt;&lt;/a&gt;工作第二年&lt;/h2&gt;&lt;p&gt;2014年，工作还是最重要且最紧急的。&lt;/p&gt;
&lt;p&gt;专业技能上有了——爬上一个山坡，看到无数个山坡——的感觉，20
    
    </summary>
    
    
      <category term="年终总结" scheme="http://qop.github.io/tags/%E5%B9%B4%E7%BB%88%E6%80%BB%E7%BB%93/"/>
    
  </entry>
  
  <entry>
    <title>on the road</title>
    <link href="http://qop.github.io/2014/10/31/2014/10-31/"/>
    <id>http://qop.github.io/2014/10/31/2014/10-31/</id>
    <published>2014-10-30T16:00:00.000Z</published>
    <updated>2016-02-23T09:40:37.000Z</updated>
    
    <content type="html">&lt;p&gt;工作这几年是否窥探到一丝行业发展的趋势，我们究竟是被时代甩在后面还是紧紧抓住缰绳？有很多话却开不了口，什么时候才能脱离知道、了解的层次，窥到门道。&lt;/p&gt;
&lt;p&gt;我所处的行业在中国不过十年，我的专业方向不过五年，刀耕火种的时代已经过去了。我，做好准备了吗？&lt;/p&gt;
&lt;p&gt;上周末去杭州参加D2，感触蛮多的，但是好忙，也没有时间思考。&lt;/p&gt;
&lt;p&gt;D2给我最大的感受是，互联网公司在前端碰到的问题都是类似的，听别人的分享会感觉，这个我们公司也有，但是自己想解决的问题以及设计理念甚至当中的利弊权衡，就没什么头绪了。这还算不得入门吧。&lt;/p&gt;
&lt;p&gt;然后，前端是学习容易，精通很难的方向，范围之博杂可类比杨过的武学之路。现在很时髦的概念，全栈，虽然有点违背分工，但是看过人月神话就会了解其中的必然性。前端是最适合全栈的专业没有之一！向后有nodejs和mongodb支持，向前容易弄懂app界面以及UED，移动端还有hybrid。是非常适合发展为独立开发者的。&lt;/p&gt;
&lt;p&gt;前端本身的知识就很多，还要懂这么多交叉知识，路漫漫其修远兮…&lt;/p&gt;
&lt;p&gt;这周是部门业务调整的转型期，快要忙碌的忘记了日子，直到接到一个猎头电话，我居然没有向往常一样婉拒，虽然地点以及要求不是那么match，但还是准备做一份简历去聊聊。接触更大的世界，更多的人，不一定会合作，但总有裨益。&lt;/p&gt;
&lt;p&gt;周四加班的时候偶然间review了以前写的代码，感觉自己进步蛮大的，有点模模糊糊的入轨的感觉，希望不是错觉:P&lt;/p&gt;
&lt;p&gt;慢慢酝酿的东西可能是美酒，也可能是馊了。&lt;/p&gt;
&lt;p&gt;饥饿，混着雨水和汗水的衣服，让人晕沉的大巴，劫后余生之后慢慢平复下的心情，以及对明天的期盼。&lt;/p&gt;
&lt;p&gt;车开了。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/images/2014-ontheroad.jpg&quot; alt=&quot;on the road&quot;&gt;&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;工作这几年是否窥探到一丝行业发展的趋势，我们究竟是被时代甩在后面还是紧紧抓住缰绳？有很多话却开不了口，什么时候才能脱离知道、了解的层次，窥到门道。&lt;/p&gt;
&lt;p&gt;我所处的行业在中国不过十年，我的专业方向不过五年，刀耕火种的时代已经过去了。我，做好准备了吗？&lt;/p&gt;
&lt;p&gt;上
    
    </summary>
    
    
      <category term="互联网" scheme="http://qop.github.io/tags/%E4%BA%92%E8%81%94%E7%BD%91/"/>
    
      <category term="碎碎念" scheme="http://qop.github.io/tags/%E7%A2%8E%E7%A2%8E%E5%BF%B5/"/>
    
  </entry>
  
</feed>