[T] remove z end

ebook.md

@@ -1968,6 +1968,3 @@ domain: 库存子域
 上线后，用户反馈了一堆 Bug。
 
 最后，祝大家修 bug 愉快。
-
-
-![](images/phodal-sign.jpg)

index.html

@@ -84,20 +84,7 @@ <h1>我的职业是前端工程师</h1>
 <li><a href="#关于作者">关于作者</a></li>
 <li><a href="#序">序</a><ul>
 <li><a href="#为什么不应该写一本前端书籍">为什么不应该写一本前端书籍？</a></li>
-<li><a href="#本书在讲些什么">本书在讲些什么</a><ul>
-<li><a href="#入门">入门</a></li>
-<li><a href="#中级篇">中级篇</a></li>
-<li><a href="#高级篇">高级篇</a></li>
-<li><a href="#工程化">工程化</a></li>
-<li><a href="#兼容性">兼容性</a></li>
-<li><a href="#前端特定">前端特定</a></li>
-<li><a href="#软件工程">软件工程</a></li>
-<li><a href="#调试">调试</a></li>
-<li><a href="#测试">测试</a></li>
-<li><a href="#性能与优化">性能与优化</a></li>
-<li><a href="#设计">设计</a></li>
-<li><a href="#seo">SEO</a></li>
-</ul></li>
+<li><a href="#本书在讲些什么">本书在讲些什么</a></li>
 <li><a href="#关于我的职业是前端工程师">关于《我的职业是前端工程师》</a></li>
 </ul></li>
 <li><a href="#我要成为一个前端设计师">我要成为一个前端设计师</a><ul>
@@ -259,22 +246,20 @@ <h1>我的职业是前端工程师</h1>
 </ul>
 </nav>
 <h2 id="关于作者">关于作者</h2>
-<p>黄峰达（Phodal Huang）是一个开发者、创作者和作家。他毕业于西安文理学院电子信息工程专业，现作为一个咨询师就职于 ThoughtWorks。长期活跃于开源软件社区 GitHub，目前专注于物联网和前端领域。他是一个开源狂热者，并创建了一系列的开源项目在 GitHub 上。每天在结束日常的工作后，他喜欢去重新发明一些轮子。</p>
+<p>黄峰达（Phodal Huang）是一个创客、工程师、咨询师和作家。他毕业于西安文理学院电子信息工程专业，现作为一个咨询师就职于 ThoughtWorks 深圳。长期活跃于开源软件社区 GitHub，目前专注于物联网和前端领域。</p>
 <p>作为一个开源软件作者，著有 Growth、Stepping、Lan、Echoesworks 等软件。其中开源学习应用 Growth，广受读者和用户好评，可在 APP Store 及各大 Android 应用商店下载。</p>
 <p>作为一个技术作者，著有《自己动手设计物联网》（电子工业出版社）、《全栈应用开发：精益实践》（电子工业出版社，正在出版）。并在 GitHub 上开源有《Growth: 全栈增长工程师指南》、《GitHub 漫游指南》等七本电子书。</p>
 <p>作为技术专家，他为英国 Packt 出版社审阅有物联网书籍《Learning IoT》、《Smart IoT》，前端书籍《Angular 2 Serices》、《Getting started with Angular》等技术书籍。</p>
 <p>他热爱编程、写作、设计、旅行、hacking，你可以从他的个人网站：<a href="https://www.phodal.com/" class="uri">https://www.phodal.com/</a> 了解到更多的内容。</p>
-<p>作者微信公众号:</p>
-<figure>
-<img src="images/wechat.jpg" alt="phodal-weixin" /><figcaption>phodal-weixin</figcaption>
-</figure>
-<p>相关信息：</p>
+<p>其它相关信息：</p>
 <ul>
 <li>微博：<a href="http://weibo.com/phodal" class="uri">http://weibo.com/phodal</a></li>
 <li>GitHub： <a href="https://github.com/phodal" class="uri">https://github.com/phodal</a></li>
 <li>知乎：<a href="https://www.zhihu.com/people/phodal" class="uri">https://www.zhihu.com/people/phodal</a></li>
 <li>SegmentFault：<a href="https://segmentfault.com/u/phodal" class="uri">https://segmentfault.com/u/phodal</a></li>
 </ul>
+<p>当前为预览版，在使用的过程中遇到任何遇到请及时与我联系。阅读过程中问题，不烦在GitHub上提出来： <a href="https://github.com/phodal/fe/issues">Issues</a></p>
+<p>阅读过程中遇到语法错误、拼写错误、技术错误等等，不烦来个Pull Request，这样可以帮助到其他阅读这本电子书的童鞋。</p>
 <p>其他电子书：</p>
 <ul>
 <li>《<a href="https://github.com/phodal/ideabook">Phodal’s Idea实战指南</a>》</li>
@@ -284,9 +269,11 @@ <h2 id="关于作者">关于作者</h2>
 <li>《<a href="https://github.com/phodal/growth-ebook">Growth: 全栈增长工程师指南</a>》</li>
 <li>《<a href="https://github.com/phodal/growth-in-action">Growth: 全栈增长工程师实战</a>》</li>
 </ul>
-<p>当前为预览版，在使用的过程中遇到任何遇到请及时与我联系。阅读过程中问题，不烦在GitHub上提出来： <a href="https://github.com/phodal/fe/issues">Issues</a></p>
-<p>阅读过程中遇到语法错误、拼写错误、技术错误等等，不烦来个Pull Request，这样可以帮助到其他阅读这本电子书的童鞋。</p>
-<p>愿意支持作者或者遇到难题，可以加入 phodal 的小密圈:</p>
+<p>作者微信公众号:</p>
+<figure>
+<img src="images/wechat.jpg" alt="作者微信公众号：phodal-weixin" /><figcaption>作者微信公众号：phodal-weixin</figcaption>
+</figure>
+<p>支持作者，可以加入作者的小密圈:</p>
 <figure>
 <img src="images/xiaomiquan.jpg" alt="小密圈" /><figcaption>小密圈</figcaption>
 </figure>
@@ -311,31 +298,31 @@ <h2 id="本书在讲些什么">本书在讲些什么</h2>
 <img src="images/html5-stuq.jpg" alt="Phodal’s 编写、StuQ 绘制的技能图谱" /><figcaption>Phodal’s 编写、StuQ 绘制的技能图谱</figcaption>
 </figure>
 <p>这些技能便是：</p>
-<h3 id="入门">入门</h3>
+<h4 id="入门">入门</h4>
 <p>在我理解下的基础知识，就是我们可以写一些基本的样式，并能对页面的元素进行操作。举例来说，就是我们用Spring和JSP写了一个博客，然后我们可以用jQuery来对页面进行一些简单的操作，并可以调用一些API。因此，我们需要基本的HTML / CSS知识。只是要写好CSS并不是一件简单的事，这需要很多实战经验。随后，我们还需要有JavaScript的经验，要不怎么做前端呢？</p>
 <p>同时，我们还需要对DOM有一些基础的了解，才能做一些基本的操作，如修改颜色等等。在这种情况下，最简单的方案就是使用jQuery这样的工具。不过，如果可以自己操作DOM是再好不过的了。</p>
-<h3 id="中级篇">中级篇</h3>
+<h4 id="中级篇">中级篇</h4>
 <p>中级篇就更有意思了，现在我们就需要对页面进行更复杂的操作。Ajax和JSON这两个技能是必须的，当我们要动态的改变页面的元素时，我们就需要从远程获取最新的数据结果。并且我们也需要提交表单到服务器，RESTful就是必须要学会的技能。未来我们还需要Fetch API，ReactiveX这些技能。</p>
 <p>除此我们还需要掌握好HTML的语义化，像DIV / CSS这也会必须会的技能，我们应该还会使用模板引擎和SCSS / SASS。而这个层面来说，我们开始使用Node.js来完成前端的构建等等的一系列动作，这时候必须学会使用命令行这类工具。并且，在这时候我们已经开始构建单页面应用了。</p>
-<h3 id="高级篇">高级篇</h3>
+<h4 id="高级篇">高级篇</h4>
 <p>JavaScript是一门易上手的语言，也充满了相当多的糟粕的用法。几年前人们使用CoffeeScript编成成JavaScript来编写更好的前端代码，现在人们有了ES6、TypeScript和WebPack来做这些事。尽管现在浏览器支持不完善，但是他们是未来。同样的还有某些CSS3的特性，其对于某些浏览器来说也是不支持的。而这些都是基于语言本来说的，要写好代码，我们还需要掌握面向对象编程、函数式编程、MVC / MVVM / MV*这些概念。作为一合格的工程师，我们还需要把握好安全性（如跨域），做好 授权（如HTTP Basic、JWT等等）。</p>
-<h3 id="工程化">工程化</h3>
+<h4 id="工程化">工程化</h4>
 <p>这个标题好像是放错了，这部分的内容主要都是自动构建的内容。首先，我们需要有基本的构建工具，无论你是使用gulp、grunt，还是只使用npm，这都不重要。重要的是，你可以自动化的完成构建的工具，编译、静态代码分析（JSLint、CSS Lint、TSLint）、对代码质量进行分析（如Code Climate，可以帮你检测出代码中的Bad Smell）、运行代码中的测试，并生成测试覆盖率的报告等等。这一切都需要你有一个自动构建的工作流。</p>
-<h3 id="兼容性">兼容性</h3>
+<h4 id="兼容性">兼容性</h4>
 <p>虽然我们离兼容IE6的时代已越来越远了，但是我们仍然有相当多的兼容性工作要做。基本的兼容性测试就是跨浏览器的测试，即Chrome，IE，Firefox，Safari等等。除此还有在不同的操作系统上对同一浏览器的测试，某些情况下可能表现不一致。如不同操作系统的字体大小，可能会导致一些细微的问题。而随着移动设备的流行，我们还需要考虑下不同Android版本下的浏览器内核的表现不致，有时候还要一下不成器的Windows Phone。除此，还有同一个浏览器的不同版本问题，常见于IE。。</p>
-<h3 id="前端特定">前端特定</h3>
+<h4 id="前端特定">前端特定</h4>
 <p>除了正常的编码之外，前端还有一些比较有意思的东西，如CSS3和JavaScript动画。使用Web字体，可惜这个不太适合汉字使用。还有Icon字体，毕竟这种字体是矢量的。不过Icon字体还有一些问题，如浏览器对其的抗锯齿优化，还有一个痛是你得准备四种不同类型的字体文件。因此，产生了一种东西SVG Sprite，在以前这就是CSS Sprite，只是CSS Sprite不能缩放。最后，我们还需要掌握一些基本的图形和图表框架的使用。</p>
-<h3 id="软件工程">软件工程</h3>
+<h4 id="软件工程">软件工程</h4>
 <p>这一点上和大部分语言的项目一样，我们需要使用版本管理软件，如git、svn，又或者是一些内部的工具。总之你肯定要有一个，而不是 2016.07.31.zip这种文件。然后，你还需要一些依赖管理工具，对于那些使用Webpack、Browserify来将代码编写成前端代码的项目来说，npm还是挺好用的。不过就个人来说，对于传统的项目来说我总觉得bower有些难用。我们还需要模块化我们的源码文件，才能使其他人更容易开始项目。</p>
-<h3 id="调试">调试</h3>
+<h4 id="调试">调试</h4>
 <p>作为一个工程师来说，调试是必备的技能。大部分浏览器都自带有调试工具，他们都不错——如果你使用过的话。在调试的过程中，直接用Console就可以输出值、计算值等等。如果你的项目在构建的过程中有一些问题，你就需要debugger这一行代码了。在一些调用远程API的项目里，我们还需要一些更复杂的工具，即抓包工具。在调试移动设备时，像Wireshark、Charles这一类的工具，就可以让我们看到是否有一些异常的请求。当然在这个时候，还有一个不错的工具就是像Chrome自带的远程设备调试。对于移动网站来说，还要有Responsive视图。</p>
-<h3 id="测试">测试</h3>
+<h4 id="测试">测试</h4>
 <p>我遇到的很多前端工程师都是不写测试的，于是我便把它单独地抽了出现。对于一个前端项目来说，正常情况下，我们要有单元测试、功能测试，还有要一些UI测试来验证页面间是否可以跳转。对于依赖于第三方服务的应用来说，还要有一个Mock的服务来方便我们测试。如果是前后端分离的项目，我们还需要有集成测试。</p>
-<h3 id="性能与优化">性能与优化</h3>
+<h4 id="性能与优化">性能与优化</h4>
 <p>要对Web应用进行性能优化，可能不是一件容易的事，有时候我们还知道哪些地方可以优化。这时候人们就可以使用Yahoo的YSlow，或者我最喜欢的Google PageSpeed来检测页面的一些问题，如有没有开启GZip、有没有压缩、合并、Minify JS代码等等。我们还应该借助于NetWork这一类的工具，查看页面加载时，一些比较漫的资源文件，并对其进行优化。在一些情况下，我们还需要借助如Chrome的Timline、Profiel等工具来查看可以优化的地方。</p>
-<h3 id="设计">设计</h3>
+<h4 id="设计">设计</h4>
 <p>前端工程师还需要具备基本的UI技能。多数情况下拿到的只是一张图，如果是一个完整的页面，我们就需要快速分割页面布局。而依赖于不同的页面布局，如响应式、网格、FlexBox布局也会有不同的设计。而有些时候，我们就需要自己规划，制作一个基本的线框图（Wireframe）等等。</p>
-<h3 id="seo">SEO</h3>
+<h4 id="seo">SEO</h4>
 <p>如果以搜索引擎作为流量来源，我们还需要考虑页面的内容，除非你用的是竞争排名。像Sitemap可能就不是我们考虑的内容，而我们还要考虑很多点。首先，我们需要保证页面的内容是对于搜索引擎是可见的，并且对应的页面还要有基本的Title、Description和Keyword。然后在一些关键的字体，如栏目标题等等可以用H2之类的大字的地方就不要放过。同时在页面设计的过程中，我们还需要考虑一些内部链接的建设。它即可以提供页面的可见度，又可以提高排名。最后，如果你是面向的是Google等支持结构化数据的搜索引擎，你还需要考虑一下MicroData / MicroFormat这一类东西。</p>
 <h2 id="关于我的职业是前端工程师">关于《我的职业是前端工程师》</h2>
 <p>人啊，总是喜欢写点东西去纪念自己的功绩，我也不例外。当我写了一段有意思的代码、尝试了一个新的框架、解决了一个很久的 Bug，我总会写个博客来炫耀一下。后来，随着博客越写越多，我开始尝试的整理一些话题，并将其编成电子书放在 GitHub 上共享。后来，就慢慢地有了出版第一本书的机会，想来第二本书也是能出版的，也应该很快地就会出版的。</p>