FEX 技術周刊 - 2016/05/23 · FEX 技術周刊

## 深閱讀 **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 管理與團隊協作結合在一起。編碼，本就是一種優雅的藝術。