FEX 技术周刊 - 2015/11/16 · FEX 技术周刊

## 业界会议 **[报名]AC2015 - AlloyTeam 前端技术大会 - 2015.12.12** [http://ac.alloyteam.com/](http://ac.alloyteam.com/) 腾讯AlloyTeam源于2008年成立的腾讯WebQQ团队，于2011年10.24正式对公司外以为团队名称进行对外交流，AlloyTeam的寓意是：像合金一样将各种技术，以及各个成员的聪明才智聚合在一起，从而产生更强的合金特性，未来我们也希望通过聚合业界的各大前端牛人，来共同推动Web前端技术在中国的发展！ **[报名]慕课网技术沙龙之前端专场-12.05** [http://www.imooc.com/activity/salon201512](http://www.imooc.com/activity/salon201512) [http://www.imooc.com/wenda/detail/296382](http://www.imooc.com/wenda/detail/296382) 本期沙龙以“畅▪言”为主题，邀请国内一线互联网公司资深前端工程师、独立创业者倾情分享前端领域热门技术，围绕“前沿技术实践、技术原理探究、网站性能优化”三大方面进行探讨，并与前来参会的技术发烧友、开发者深度互动。有百度、小米、阿里等公司专家已经小胖的演讲，百度的Node.js 实践值得关注。话说今年前端的交流似乎异常多，神马情况呢？ **2015.12.5 HTML5 移动生态大会－白鹭开发者盛典** [http://event.egret.com/](http://event.egret.com/) 当Web碰上VR，当HTML5玩转3D，将撞出怎样的火花与创意？当着急搭上“互联网＋”东风的企业遇见HTML5,将产生怎样的化学反应？由白鹭时代主办的2015HTML5移动生态大会将汇聚行业力量，共探HTML5发展的无限可能，开启一场“发现创新之旅”。 **2015.11.17 日ChinaTech Day - 中国技术开放日** [http://www.chinatechday.com/](http://www.chinatechday.com/) 2015年11月，极客邦科技和InfoQ全球，携手中国顶尖互联网技术公司阿里巴巴、腾讯、百度、猎豹移动等，在国际顶级技术盛会QCon美国旧金山站开启ChinaTech Day中国技术开放日专场，并探访当地著名技术企业，向美国及世界展现中国顶尖技术实力，建立国际技术品牌，促进中美IT圈的交流融合。 ## 深阅读 **百度 JavaScript编码规范 - ESNext补充篇** [https://github.com/ecomfe/spec/blob/master/es-next-style-guide.md](https://github.com/ecomfe/spec/blob/master/es-next-style-guide.md) 由百度多位资深前端工程师给出，ES6 正在逐步投入生产环境，这份规范非常有参考意义，引发了广泛讨论。另附： JavaScript 初心者的 ES2015 实战 [http://gank.io/post/564151c1f1df1210001c9161](http://gank.io/post/564151c1f1df1210001c9161) 另附百度的前端代码风格检查套件 FECS [http://fecs.baidu.com/](http://fecs.baidu.com/) [http://efe.baidu.com/blog/fecs/](http://efe.baidu.com/blog/fecs/) **前端实现 SVG 转 PNG** [http://fex.baidu.com/blog/2015/11/convert-svg-to-png-at-frontend/](http://fex.baidu.com/blog/2015/11/convert-svg-to-png-at-frontend/) svg 是一种矢量图形，在 web 上应用很广泛，但是很多时候由于应用的场景，常常需要将 svg 转为 png 格式，下载到本地等。随着浏览器对 HTML 5 的支持度越来越高，我们可以把 svg 转为 png 的工作交给浏览器来完成。 **Google - TensorFlow is an Open Source Software Library for Machine Intelligence** [https://github.com/tensorflow/tensorflow](https://github.com/tensorflow/tensorflow) [http://tensorflow.org/tutorials/mnist/beginners/index.md](http://tensorflow.org/tutorials/mnist/beginners/index.md) [http://tech.qq.com/a/20151110/007439.htm](http://tech.qq.com/a/20151110/007439.htm) 谷歌开放人工智能系统走安卓路线】多年以来，谷歌内部一直在使用一种机器学习系统，代号为“TensorFlow”。如今，谷歌正在将此系统成为开源系统，并将此系统的参数公布给业界工程师、学者和拥有大量编程能力的技术人员。赞 Google，业界良心。 **The Single Biggest Mistake Programmers Make Every Day** [https://medium.com/javascript-scene/the-single-biggest-mistake-programmers-make-every-day-62366b432308](https://medium.com/javascript-scene/the-single-biggest-mistake-programmers-make-every-day-62366b432308) I believe the single biggest mistake that every programmer makes from time to time is overcomplicating things. Simplify your code. Start with the least complicated implementation and work your way toward more complex solutions only when the problem demands it. Remember: - Keep It Stupid Simple (KISS) - Make it work, make it right, make it fast. - Understand the problem. (Know what “make it work” means.) - Begin at the beginning. - Start with tests. - Do One Thing (DOT). - Start small and iterate. - Pure function > Function > Factory > Class Simple beats clever every day of the week. **Redis 未授权访问配合 SSH key 文件利用分析** [http://blog.knownsec.com/2015/11/analysis-of-redis-unauthorized-of-expolit/](http://blog.knownsec.com/2015/11/analysis-of-redis-unauthorized-of-expolit/) [http://www.sebug.net/vuldb/ssvid-89715](http://www.sebug.net/vuldb/ssvid-89715) [http://www.sebug.net/vuldb/ssvid-89339](http://www.sebug.net/vuldb/ssvid-89339) [http://www.ichunqiu.com/course/1413](http://www.ichunqiu.com/course/1413) Redis 未授权访问的问题是一直存在的问题，知道创宇安全研究团队历史上也做过相关的应急，今日，又出现 Redis 未授权访问配合 SSH key 文件被利用的情况，今天我们来简要的分析下。 **Blink Workers** [https://docs.google.com/document/d/1i3IA3TG00rpQ7MKlpNFYUF6EfLcV01_Cv3IYG_DjF7M](https://docs.google.com/document/d/1i3IA3TG00rpQ7MKlpNFYUF6EfLcV01_Cv3IYG_DjF7M) workers无疑是现在最热门的web未来技术之一，如果你也被一连串的web workers, shared worker, service worker, compositor worker, Houdini worker搞得晕乎乎, 想了解这些workers的异同和未来还将出现什么新的品种，不要错过Chrome团队的文章。另附两篇关于 ServiceWorker 实践的文章： [ServiceWorker与逐步联网策略](http://www.w3ctech.com/topic/1564) [My first Service Worker](https://adactio.com/journal/9775) **A 360 Degree View of the Entire Netflix Stack** [http://highscalability.com/blog/2015/11/9/a-360-degree-view-of-the-entire-netflix-stack.html](http://highscalability.com/blog/2015/11/9/a-360-degree-view-of-the-entire-netflix-stack.html) As we research and dig deeper into scaling, we keep running into Netflix. They are very public with their stories. This post is a round up that we put together with Bryan’s help. **未来Web应用的前端技术选型畅想** [https://github.com/xufei/blog/issues/24](https://github.com/xufei/blog/issues/24) 民工哥 xufei 的思考，赞这句：约束越强的框架很可能越不受欢迎，基于ES自身的语言特性做业务代码约束才是王道。xuefei 的这量篇关于 Angular 的文章也也值得用 Angular 的同学参考：优化Angular应用的性能 [https://github.com/xufei/blog/issues/23](https://github.com/xufei/blog/issues/23) Angular的变革[https://github.com/xufei/blog/issues/25](https://github.com/xufei/blog/issues/25) **JavaScript Is Eating The World** [http://arc.applause.com/2015/11/06/javascript-is-eating-the-world/](http://arc.applause.com/2015/11/06/javascript-is-eating-the-world/) Modern developers have to deal with three primary platforms when it comes to coding in the last 10 years or so: the browser, the server and native/mobile apps. JavaScript is already the de facto language of the Web. **移动端开发小记 - Flexbox** [http://taobaofed.org/blog/2015/11/11/flexbox-in-mobile-web/](http://taobaofed.org/blog/2015/11/11/flexbox-in-mobile-web/) 可以当做 Flexbox 的使用实例，是时候掌握了这个属性了，还不会用的同学自行 Google 学习吧。另附 FED 的另一篇文章：如何评价页面的性能 [http://taobaofed.org/blog/2015/11/09/web-performance/](http://taobaofed.org/blog/2015/11/09/web-performance/) **如何开发并维护一个开源的 React 组件** [http://zhuanlan.zhihu.com/FrontendMagazine/20341776](http://zhuanlan.zhihu.com/FrontendMagazine/20341776) 如今 React 被广泛应用在各类应用上，直观的编程方式，易学易用的工具链，丰富的生态等等优点被大家所钟爱。相信你已经熟悉 React 的用法和相关的开发工具，本文就不赘述 React 用法、特性等，换种思路，分享一下几个月前开发的组件 autoresponsive-react 过程中的几点心得体会。 **Node.js 在双十一中有哪些应用，表现如何** [http://www.zhihu.com/question/37379084](http://www.zhihu.com/question/37379084) Node.js 在双十一中有哪些应用大家今年访问到的所有www域页面（包括首页、频道、会场等）全部是一个全栈node应用支撑的。相比以往大促使用的技术方案，已经被证明的优势如下：节省了巨大的服务器资源；提供页面安全性、稳定性；对业务个性化需求的支持更好； **你为什么应该试一试Reflux** [http://icodeit.org/2015/11/get-started-with-reflux/](http://icodeit.org/2015/11/get-started-with-reflux/) 鉴于Flux本身只是一个架构，而且Facebook提供的参考实现又有一些问题，所以社区有了很多版本的Flux实现。比如我们这里会用到的Reflux。简而言之，Reflux里有两个组件：Store和Action。Store负责和数据相关的内容：从服务器上获取数据，并更新与其绑定的React组件（view controller）;Action是一个事件的集合。Action和Store通过convention来连接起来。 **Nginx能为前端开发带来什么** [http://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=400326547&idx=1&sn=5c712281bb5c931c2b6c5be601f83535](http://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=400326547&idx=1&sn=5c712281bb5c931c2b6c5be601f83535) 作为一名工程师一定要注意：物尽其用，用正确的工具、类库干正确的事情，而不是把生命浪费在无意义的造轮子上。这篇文章对 Nginx 的使用场景分析得挺到位的，作为一个 Web 服务非常重要的一个角色，Nginx 觉得值得学习。 **编程书单推荐：知名程序员的书架** [http://www.codingpy.com/article/programmers-bookshelf-recommendations/](http://www.codingpy.com/article/programmers-bookshelf-recommendations/) 自从开始自学编程以来，就一直希望有人指点该如何逐步的打牢基础，该读哪些书籍来加深对计算机科学的理解。最近，我在网上看到有人整理了一些知名程序员推荐的书籍，他们或是接受采访，或是在自己的博客上，向大家推荐了自己认为最有价值的编程书籍。觉得应该都是不错的选择，所以翻译过来与大家分享。赞文中引用的名言：我这一辈子，从不知道哪位智者是根本不读书的——没有，没有一个人 **如何写出不可维护的服务端程序** [http://yanyiwu.com/work/2014/03/03/ru-he-xie-chu-bu-ke-wei-hu-de-fu-wu.html](http://yanyiwu.com/work/2014/03/03/ru-he-xie-chu-bu-ke-wei-hu-de-fu-wu.html) 大伙写 Node 时引以为戒吧。 **WebGL 2.0 前瞻** [https://docs.google.com/presentation/d/1Orx0GB0cQcYhHkYsaEcoo5js3c5-pv7ahPniIRIzzfg/edit#slide=id.p](https://docs.google.com/presentation/d/1Orx0GB0cQcYhHkYsaEcoo5js3c5-pv7ahPniIRIzzfg/edit#slide=id.p) SIGGRAPH Asia 2015 大会上的一篇演讲，介绍了 WebGL 2.0 中的新功能 ## 新鲜货 **EditorConfig** [http://editorconfig.org/](http://editorconfig.org/) EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. EditorConfig files are easily readable and they work nicely with version control systems. **Better than Gzip Compression with Brotli** [https://hacks.mozilla.org/2015/11/better-than-gzip-compression-with-brotli/](https://hacks.mozilla.org/2015/11/better-than-gzip-compression-with-brotli/) Brotli is an open source data compression library formally specified by IETF draft. It can be used to compress HTTPS responses sent to a browser, in place of gzip or deflate. **React router 1.0.0 released** [https://github.com/rackt/react-router/blob/9ee114e94d5f163dbff11f04b54ee129ac89b240/CHANGES.md](https://github.com/rackt/react-router/blob/9ee114e94d5f163dbff11f04b54ee129ac89b240/CHANGES.md) [https://github.com/rackt/react-router](https://github.com/rackt/react-router) **SSL/TLS 加密新纪元 - Let's Encrypt** [https://linux.cn/article-6565-1.html](https://linux.cn/article-6565-1.html) Let's Encrypt 项目是由互联网安全研究小组主导并开发的一个新型数字证书认证机构。该项目旨在开发一个自由且开放的自动化 CA 套件，并向公众提供相关的证书免费签发服务以降低安全通讯的财务、技术和教育成本。 **Gulp 4.0 API 文档** [https://github.com/cssmagic/blog/issues/55](https://github.com/cssmagic/blog/issues/55) [https://github.com/gulpjs/gulp/blob/4.0/docs/API.md](https://github.com/gulpjs/gulp/blob/4.0/docs/API.md) 据说调整后的 API 非常好用。 **Bower宣告终止开发** [https://github.com/rackt/redux/issues/944](https://github.com/rackt/redux/issues/944) [http://gofore.com/ohjelmistokehitys/stop-using-bower/](http://gofore.com/ohjelmistokehitys/stop-using-bower/) 这货终于要推出历史舞台了，值得鼓掌 **Segment** [https://github.com/lmgonzalves/segment](https://github.com/lmgonzalves/segment) [http://lmgonzalves.github.io/segment/](http://lmgonzalves.github.io/segment/) A little JavaScript class (without dependencies) to draw and animate SVG path strokes **Github Corners** [https://github.com/tholman/github-corners](https://github.com/tholman/github-corners) 作者为了庆祝 Github 七周年用 SVG + CSS3 做的页面角花（Github Corners），鼠标 hover 后，尾巴会摇。 **Windows 2000 的 CSS 主题** [https://win2k.brod.io/](https://win2k.brod.io/) I am fully aware the methods used in win2k go against some of the core design principles of Basscss although the win2k theme should really be considered a rendering style, not just a theme. The styles are as reusable as possible without requiring overly verbose selectors. **codecrap** [http://codecrap.com/](http://codecrap.com/) 去围观并点评一下一些神奇的代码。 **H5 帧动画生成工具** [http://jhtmls.com/h5animation/](http://jhtmls.com/h5animation/) [http://jhtmls.com/h5animation/example/](http://jhtmls.com/h5animation/example/) 将尺寸一样帧系列图片拖拽到页面上、按需设置、下载。将自动生成需要的图片和样式。 **让 Apple Music for Android 教国内的安卓厂商如何姿势正确地做一个充满果味的 Android 应用** [http://zhuanlan.zhihu.com/thoughts-dng/20333663](http://zhuanlan.zhihu.com/thoughts-dng/20333663) Apple 在他们的 Android 应用上保留的, 用以彰显应用个性的内容只有三个: 细线条的图标风格 (而且图标的表述还遵循了 Material Design 的指导); 高饱和度, 明快的配色; 高斯模糊的背景. 而那些在国产安卓应用中非常经常见到的其他充满 iOS 风格的控件元素以及底部 tab bar 布局并没有出现. **Firefox for iOS** [https://github.com/mozilla/firefox-ios](https://github.com/mozilla/firefox-ios) 可以当做浏览器技术和 Swift 的学习资料。 **硅谷最火的大数据公司Palantir产品技术解读** [http://vdisk.weibo.com/s/D2zXXYpNQA3x](http://vdisk.weibo.com/s/D2zXXYpNQA3x) [http://www.palantir.com/](http://www.palantir.com/) Palantir因从事高度机密的工作而名扬天下，Palantir的技术可以使得没有工程师背景的人士轻松对大量数据进行分析，以进行问题查询和解决难题。据说，这一技术被美国Chase银行用来防止客户账号被黑。此外，洛杉矶警局也在使用Palantir的技术。对大数据有兴趣的同学可以关注。 **Continuous Delivery service for Windows** [http://www.appveyor.com/](http://www.appveyor.com/) AppVeyor aims to give powerful Continuous Integration and Deployment tools to every .NET developer without the hassle of setting up and maintaining their own build server. **Code reviews Service** [http://csswizardry.com/work/](http://csswizardry.com/work/) 750 英镑，生财之道呀... **StarCraft: The past, present and future** [http://www.polygon.com/2015/11/6/9670176/starcraft-2-future-history-dlc-blizzard](http://www.polygon.com/2015/11/6/9670176/starcraft-2-future-history-dlc-blizzard) 对 StarCraft 有兴趣的同学可以了解下。 **Atlassian files for IPO** [http://www.sec.gov/Archives/edgar/data/1650372/000155837015001685/](http://www.sec.gov/Archives/edgar/data/1650372/000155837015001685/) [https://www.atlassian.com/](https://www.atlassian.com/) 这个公司有很多优秀的工程产品，其 IPO 文档非常有参考意义。 ## 产品及其它 **NEXT 2015年度产品评选** [http://next.36kr.com/posts/collections](http://next.36kr.com/posts/collections) 看看都有那些优秀产品吧，年度最佳数据分析工具、年度最佳 HTML 5 制作工具这两个可以重点关注。 **YouTube放量增长的十条管理经验** [http://www.huxiu.com/article/130595/1.html?f=pc-weibo-article](http://www.huxiu.com/article/130595/1.html?f=pc-weibo-article) 这篇文章总结自笔者在斯坦福大学的课程笔记：CS183C——利用科技实现闪电规模化 (Blitzscaling)，授课老师是 Reid Hoffman、John Lilly、Chris Yeh 和 Allen Blue。文中的这节课是 YouTube 前产品、工程和用户体验负责人 Shishir Mehrotra 的演讲，内容主题是从 YouTube 规模化中获得的经验教训。梦之队、牛逼组、打工组、别干了组这几个分类挺有意思的。 **数据科学家揭秘《微信用户报告》背后的巨大商机** [http://mp.weixin.qq.com/s?__biz=MzI3MTAzMjQ3Mw==&mid=400090581&idx=1&sn=5a798e31755176fdd0823c0c9a64bcbf&scene=1](http://mp.weixin.qq.com/s?__biz=MzI3MTAzMjQ3Mw==&mid=400090581&idx=1&sn=5a798e31755176fdd0823c0c9a64bcbf&scene=1) 对《微信用户报告》的一个解读 **想抱微信的“大腿”？你可能先得满足张小龙的三点“无理要求”** [http://www.pingwest.com/sell-movie-ticket-on-wechat/](http://www.pingwest.com/sell-movie-ticket-on-wechat/) 张小龙关于电影和挂号接入所提的问题很犀利，其背后就是产品决策，值得学习 **138 页全球机器人研究报告** [http://mp.weixin.qq.com/s?__biz=MzI3MTA0MTk1MA==&mid=400430504&idx=1&sn=6126fda783c335033cc3f7d0ed76eb5d](http://mp.weixin.qq.com/s?__biz=MzI3MTA0MTk1MA==&mid=400430504&idx=1&sn=6126fda783c335033cc3f7d0ed76eb5d) 报告共包括三大部分，从国外行业发展趋势到国内机器人产业发展机会，对机器人行业进行了系统的梳理。