FEX 技术周刊 - 2016/05/23

ascoders | 23 May 2016

微信搜索『FEX』关注我们的公众号，及时获得最新资讯。

业界会议

Google IO 2016
https://events.google.com/io2016/
各自找感兴趣的东西去看吧，除了各种让人眼花缭乱的黑科技外，这几个东西挺值得关注的：

Firebase https://firebase.google.com/ A mobile platform that helps you quickly develop high-quality apps
Spaces https://get.google.com/spaces/ A tool for small group sharing
Project Ara https://atap.google.com/ara/ 模块化手机将于 17 年亮相

Node.js Live - Beijing 05.21
http://live.nodejs.org/events/beijing.html
The Node.js Foundation is kicking off a series of global events bringing together local Node.js developers around the world. Each event is different and tailored to the local community, varying in length and in some cases in partnership with local Node.js groups and users. 另附上周 Node Conf London 的视频 https://www.youtube.com/playlist?list=PL0CdgOSSGlBYnHAl_DZoy9BWvdVQjNKE2#nodeconflondon2016

深阅读

CSS coding techniques
https://hacks.mozilla.org/2016/05/css-coding-techniques/
In this article we will see some tips and recommendation to write better, easier-to-maintain CSS code, so your stylesheets are shorter and have fewer rules. CSS can feel like a handy tool instead of a burden.

[译]Houdini：CSS 领域最令人振奋的革新
https://zhuanlan.zhihu.com/p/20939640
放 CSS 的 API 给开发者，开发者可以通过这套接口自行扩展 CSS，并提供相应的工具允许开发者介入浏览器渲染引擎的样式和布局流程中。提供了扩展 CSS 的能力，看起来很不错。

Refactoring a javascript video store
http://martinfowler.com/articles/refactoring-video-store-js/
The simple example of calculating and formatting a bill for a video store opened my refactoring book in 1999. If done in modern Javascript, there are several directions you could take the refactoring. I explore four here: refactoring to top level functions, to a nested function with a dispatcher, using classes, and transformation using an intermediate data structure.

How to Write Maintainable JavaScript
https://www.sitepoint.com/write-maintainable-javascript/
I’ve had to take over and clean-up a lot of projects. There haven’t been many I started from scratch. In fact, I am currently doing exact that. I’ve learned a lot regarding JavaScript, keeping a codebase organised and — most importantly — not being mad at the previous developer. In this article I want to show you my steps and tell you my experience.

Building for Billions
https://developers.google.com/billions/
Google 推出的 Android 及 Web 大流量产品优化建议

Creating A Living Style Guide: A Case Study
https://www.smashingmagazine.com/2016/05/creating-a-living-style-guide-case-study
Living style guides are an important tool for web development today, especially in large, complex web applications. They help document styles and patterns, keep designers and developers in sync, and greatly help to organize and distill complex interfaces. Indeed, living style guides remain one of the best ways to communicate design standards to an organization.

Don’t blame the framework: my experience with AngularJS and ReactJS
https://www.ckl.io/blog/dont-blame-the-framework-angularjs-and-reactjs/
For the long term, I, personally, would choose React, using Redux architecture, Axios for promise-ready HTTP requests and react-router. But it also depends on the team experience: if there’s a dedicated person for writing HTML and CSS, I would go with Angular for sure. Both of them have pros and cons and what still counts the most for a maintainable project is the developers’ commitment to write good and organized code.

理解CSS3 max/min-content及fit-content等width值
http://www.zhangxinxu.com/wordpress/2016/05/css3-width-max-contnet-min-content-fit-content/
介绍了在CSS3的世界里，width 相关的这几个关键字成员。

Enabling HTTP/2 for Dropbox web services: experiences and observations
https://blogs.dropbox.com/tech/2016/05/enabling-http2-for-dropbox-web-services-experiences-and-observations/
Dropbox 迁移到 HTTP/2 的经验，由于 header 压缩，流入带宽降了居然有 50%，这得有多少 cookie 啊

简单易懂的CSS Modules
http://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651220796&idx=1&sn=4099912162d73a3a39c62e8f62a7fd89
科普 CSS Modules。感觉 HTML CSS DOM 正在被变成底层语言。

我是这样学习前端的
https://github.com/icepy/_posts/issues/39
写总结挺重要的

ES2015实战——面向未来编程
http://yanhaijing.com/javascript/2016/04/27/es2015-practice/
总结了近一年时间对ES6的使用，实践，思考。作者一开始对 ES6 是拒绝的，后来的经历和思考发生了转变。文艺范十足的科普文。

为什么我们应该尽快支持 ALPN
https://ma.ttias.be/day-google-chrome-disables-http2-nearly-everyone-may-31st-2016/
https://imququ.com/post/enable-alpn-asap.html
Google 将于本月底正式发布的 Chrome 51，又一次禁用 SPDY 和 NPN，还是赶紧升级到 HTTP/2 和 ALPN（需 OpenSSL 1.0.2+）吧！

JSON Patch and JSON Merge Patch
http://erosb.github.io/post/json-patch-vs-merge-patch/
对比了这两个 JSON patch 的方案

An overview of realtime libraries and frameworks
https://deepstream.io/blog/realtime-framework-overview/
整理了现有的试试库及框架

记一次惊心动魄的前端性能优化之旅
https://segmentfault.com/a/1190000005147979
某产品从原生切换到 Hybird 后遇到性能问题，来看看作者是如何解决的

5 JavaScript “Bad” Parts That Are Fixed In ES6
https://medium.com/@rajaraodv/5-javascript-bad-parts-that-are-fixed-in-es6-c7c45d44fd81#.e8oswtpcf
ECMAScript 6 (ES6) features can be divided into features that are pure syntactic sugar (like: class), features that enhance JavaScript (like import) and features that fix some of JS’s “bad” parts (like let keyword). Most blogs and articles combine all 3 types and can overwhelm new comers. So I am writing a blog that talks about just the features that fix “bad” parts.

Reducing JPG File size
https://medium.com/@duhroach/reducing-jpg-file-size-e5b27df3257c
While JPG compression is impressive in its’ own right, how you use it in your application can influence the size of these files significantly. As such I’ve assembled a handy collection of things that can help you squeeze out those last bits, and make a better experience for your users.

黑产揭秘：“打码平台”那点事儿
http://www.freebuf.com/articles/others-articles/104536.html
之前只是听过，没这么近距离了解，具体做得这么成熟了

漫谈流量劫持
http://drops.wooyun.org/tips/15826
整理得挺详细

新鲜货

jQuery 3.0 Release Candidate…Released!
http://blog.jquery.com/2016/05/20/jquery-3-0-release-candidate-released/
Welcome to the Release Candidate for jQuery 3.0! This is the same code we expect to release as the final version of jQuery 3.0 (pending any major bugs or regressions). When released, jQuery 3.0 will become the only version of jQuery. The 1.12 and 2.2 branches will continue to receive critical support patches for a while, but will not get any new features or major revisions. Note that jQuery 3.0 will not support IE6-8. If you need IE6-8 support, you can continue to use the latest 1.12 release.

蚂蚁金服发布新一代数据可视化引擎G2
https://g2.alipay.com/
https://github.com/antvis/antvis.github.io/issues/1
提供了一整套图形语法，可以让用户通过简单的语法搭建出无数种图表，并且集成了大量的统计工具，支持多种坐标系绘制，可以让用户自由定制图表。另附：

云栖社区整理的数据可视化工具大集合
阿里数据可视化规范

Horizon 1.0 - The realtime JavaScript backend
http://horizon.io/
Horizon is a realtime, open-source backend for JavaScript apps. Rapidly build and deploy web or mobile apps using a simple JavaScript API. Scale your apps to millions of users without any backend code. Built by the RethinkDB team and an open-source community, Horizon lets you build sophisticated apps with lightning speed.

uWebSockets
https://github.com/alexhultman/uWebSockets
号称比官方更强大的 Node WebSocket 实现

CSS Purge
http://www.csspurge.com/
一个优化 CSS 的活动

A YSlow Alternative for Making Web Pages Faster
https://www.maxcdn.com/blog/coach-yslow-alternative/
一个分析页面性能的工具

Yelpicons: A Cross-Platform Icon Build System
http://engineeringblog.yelp.com/2016/05/yelpicons.html
Yelp 内部 SVG 转各种图片大小及格式的平台

PHP 开发者大会资料
http://pan.baidu.com/s/1pLajmm3
http://weibo.com/ttarticle/p/show?id=2309403976117072625478

PageSpeed Modules
http://blog.chromium.org/2016/05/saving-data-with-googles-pagespeed.html
谷歌用这个工具将图片处理成多种大小，与 img 的 srcset 标签无缝对接。

ReactPerfTool
https://github.com/RamonGebben/react-perf-tool
React 性能分析工具。

WebKit ES6 100%
https://kangax.github.io/compat-table/es6/
WebKit 率先 100% 支持 ES6

Codelf(变量命名神器)
https://github.com/unbug/codelf
Organize your GitHub stars and repositories.Search over projects from GitHub, Bitbucket, Google Code, Codeplex, Sourceforge, Fedora Project to find real-world usage variable names

How to Center in CSS
http://howtocenterincss.com/
Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors. This consolidates them and gives you the code you need for each situation.

flag-icon-css
https://github.com/lipis/flag-icon-css
A collection of all country flags in SVG — plus the CSS for easier integration. 各国国旗荟萃，不过已经有群众表示画错了。

mermaid
https://github.com/knsv/mermaid
Generation of diagrams and flowcharts from text in a similar manner as markdown. Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code? This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.

Onsen UI 2
https://onsen.io/v2/
目前看来 v2 版本最大的变化是支持 Material 风格了

FIT
http://fit.baidu.com/components/pc/input
input number auto-complete 发布 V4 版本了，也支持了 Material 风格

Swift 3.0 Release Process
https://swift.org/blog/swift-3-0-release-process/
Swift 3 的一些计划

examplejs
https://github.com/zswang/examplejs
一种用示例代码转为测试用例的工具

产品及其它

Full Stack Web Developers: What is your “stack”?
https://www.quora.com/Full-Stack-Web-Developers-What-is-your-stack
挺发人深思的一个问题，可以从答案中了解下不同团队的做法。

从工程师到团队Leader，我的8年心路历程
http://mp.weixin.qq.com/s?__biz=MzA5Nzc4OTA1Mw==&mid=2659597245&idx=1&sn=28f09157bf5053414bfc50b4e527b30b&scene=2&srcid=0522BluHRrU8q4DpEnMGsptn
美团架构师 rank 总结自己多年前端参与研发及带团队的体会，可以下载 PPT 围观。

蒲公英Bug管理云
https://bug.pgyer.com/
打造最简洁、高效的 Bug 管理系统
简洁、高效地追踪 Bug，轻量、便捷的项目管理，完美地将 Bug 管理与团队协作结合在一起。编码，本就是一种优雅的艺术。