FEX 技术周刊 – 2016/05/23
最后更新于：2022-04-01 00:03:54
## 深阅读
**CSS coding techniques**
[https://hacks.mozilla.org/2016/05/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](https://zhuanlan.zhihu.com/p/20939640)
放 CSS 的 API 给开发者，开发者可以通过这套接口自行扩展 CSS，并提供相应的工具允许开发者介入浏览器渲染引擎的样式和布局流程中。提供了扩展 CSS 的能力，看起来很不错。
**Refactoring a javascript video store**
[http://martinfowler.com/articles/refactoring-video-store-js/](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/](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/](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](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/](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/](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/](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](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](https://github.com/icepy/_posts/issues/39)
写总结挺重要的
**ES2015实战——面向未来编程**
[http://yanhaijing.com/javascript/2016/04/27/es2015-practice/](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://ma.ttias.be/day-google-chrome-disables-http2-nearly-everyone-may-31st-2016/)
[https://imququ.com/post/enable-alpn-asap.html](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/](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://deepstream.io/blog/realtime-framework-overview/)
整理了现有的试试库及框架
**记一次惊心动魄的前端性能优化之旅**
[https://segmentfault.com/a/1190000005147979](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](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](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://www.freebuf.com/articles/others-articles/104536.html)
之前只是听过，没这么近距离了解，具体做得这么成熟了
**漫谈流量劫持**
[http://drops.wooyun.org/tips/15826](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/](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://g2.alipay.com/)
[https://github.com/antvis/antvis.github.io/issues/1](https://github.com/antvis/antvis.github.io/issues/1)
提供了一整套图形语法，可以让用户通过简单的语法搭建出无数种图表，并且集成了大量的统计工具，支持多种坐标系绘制，可以让用户自由定制图表。另附：
- 云栖社区整理的 [数据可视化工具大集合](https://yq.aliyun.com/articles/45517)
- [阿里数据可视化规范](http://antv.alipay.com/)
**Horizon 1.0 - The realtime JavaScript backend**
[http://horizon.io/](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](https://github.com/alexhultman/uWebSockets)
号称比官方更强大的 Node WebSocket 实现
**CSS Purge**
[http://www.csspurge.com/](http://www.csspurge.com/)
一个优化 CSS 的活动
**A YSlow Alternative for Making Web Pages Faster**
[https://www.maxcdn.com/blog/coach-yslow-alternative/](https://www.maxcdn.com/blog/coach-yslow-alternative/)
一个分析页面性能的工具
**Yelpicons: A Cross-Platform Icon Build System**
[http://engineeringblog.yelp.com/2016/05/yelpicons.html](http://engineeringblog.yelp.com/2016/05/yelpicons.html)
Yelp 内部 SVG 转各种图片大小及格式的平台
**PHP 开发者大会资料**
[http://pan.baidu.com/s/1pLajmm3](http://pan.baidu.com/s/1pLajmm3)
[http://weibo.com/ttarticle/p/show?id=2309403976117072625478](http://weibo.com/ttarticle/p/show?id=2309403976117072625478)
**PageSpeed Modules**
[http://blog.chromium.org/2016/05/saving-data-with-googles-pagespeed.html](http://blog.chromium.org/2016/05/saving-data-with-googles-pagespeed.html)
谷歌用这个工具将图片处理成多种大小，与 `img` 的 `srcset` 标签无缝对接。
**ReactPerfTool**
[https://github.com/RamonGebben/react-perf-tool](https://github.com/RamonGebben/react-perf-tool)
React 性能分析工具。
**WebKit ES6 100%**
[https://kangax.github.io/compat-table/es6/](https://kangax.github.io/compat-table/es6/)
WebKit 率先 100% 支持 ES6
**Codelf(变量命名神器)**
[https://github.com/unbug/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/](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](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](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/](https://onsen.io/v2/)
目前看来 v2 版本最大的变化是支持 Material 风格了
**FIT**
[http://fit.baidu.com/components/pc/input](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/](https://swift.org/blog/swift-3-0-release-process/)
Swift 3 的一些计划
**examplejs**
[https://github.com/zswang/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](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](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/](https://bug.pgyer.com/)
打造最简洁、高效的 Bug 管理系统
简洁、高效地追踪 Bug，轻量、便捷的项目管理，完美地将 Bug 管理与团队协作结合在一起。编码，本就是一种优雅的艺术。