FEX 技术周刊 - 2017/10/16

业界会议

International Conference on 3D Vision 10.10-12
http://3dv2017.science/3dv/
附：三维视觉会议重点内容

GitHub Universe 10.10-12
https://githubuniverse.com/
附 GitHub 发布年度开发者报告 JavaScript 依然最受欢迎、GitHub 更新 timeline & 相似项目推荐

深阅读

The whole web at maximum FPS: How WebRender gets rid of jank
https://hacks.mozilla.org/2017/10/the-whole-web-at-maximum-fps-how-webrender-gets-rid-of-jank/
With WebRender, we want apps to run at a silky smooth 60 frames per second (FPS) or better no matter how big the display is or how much of the page is changing from frame to frame. And it works. Pages that chug along at 15 FPS in Chrome or today’s Firefox run at 60 FPS with WebRender. So how does WebRender do that? It fundamentally changes the way the rendering engine works to make it more like a 3D game engine.

Building Browser Extensions At Scale
https://tech.grammarly.com/blog/building-browser-extensions-at-scale
Over ten million people use the Grammarly Chrome extension. Our Firefox, Safari and Edge extensions are incredibly popular, too. These extensions may look easy on the outside because they are low profile and easy to use. But it is actually a complex product supported by a full team of engineers. We have been developing and perfecting it for 6 years. Along the way we have learned a thing or two that we’d like to share. This article is intended to be an overview of our learnings and best practices on a broad range of topics.

Interesting JavaScript Libraries born in China
https://dashbouquet.com/blog/frontend-development/interesting-javascript-libraries-born-in-china
We are taking a look at JavaScript Libraries born in China. Only three libraries in this article, but this is not to say that the Chinese are newbies in the JavaScript community. There are other interesting libraries born in China such as Amaze UI. However, for the purpose of this article; we are taking a look at: Ant.Design library, Dva library, Echarts library.

Node.js State of the Union 2017
https://medium.com/the-node-js-collection/node-js-state-of-the-union-blog-2017-ed86640ec451
Overall, Node.js is in a good place, but we can and will be better. We need to evaluate our systems and structures to make sure we are ready for the next 8 million Node.js instances and to help encourage a better more effective community and collaboration. Our future relies on our ability to adapt and nurture that success and drive toward a stronger ecosystem that involves more developers, solution providers and others who can continue the work that has been done to date. 另附：Node.js Foundation Readies Official Developer Certification.

Why Isn’t the Construction of CRUD Web UIs 90% Automated?
https://news.ycombinator.com/item?id=15429616
It seems silly to write the same types of code over and over to build CRUD web user interfaces. There have of course been hundreds of UI builders. Why aren’t they used? Styling should just use plain CSS. Behavior should be mostly auto generated config from a standardized format such as json schema or a db schema. Behavior customizability should come from tweaking the auto generated json config, and adding some HTML and JavaScript to higher order components. The build targets should use plugins, starting with angular and react. Components should use a shared plugin infrastructure. Designers should be able to prototype in an invision like tool with real CSS and HTML that can be checked into source control. Why isn’t this the way things are done?

Evolution of GitHub’s data centers
https://githubengineering.com/evolution-of-our-data-centers/
Over the past 18 months we’ve made a significant investment in GitHub’s physical infrastructure. The goal of this work is to improve the redundancy and global availability of our system. In doing so we’ve solidified the foundation upon which we will expand our compute and storage footprint in support of our growing user base 另附：Transit and Peering: How your requests reach GitHub.

Streaming Data Pipelines with Brooklin
https://engineering.linkedin.com/blog/2017/10/streaming-data-pipelines-with-brooklin
Brooklin is a data ingestion service that can be used to stream data from multiple streaming sources to different destinations. It can stream data from messaging systems (Kafka, Event Hubs, etc.), databases (Oracle, MySQL, etc.), datastores (NFS, etc.) and publish to destinations such as Kafka, Event Hubs, HDFS, etc.

Introducing AthenaX, Uber Engineering’s Open Source Streaming Analytics Platform
https://eng.uber.com/athenax/
In this article, we discuss why we built AthenaX, outline its infrastructure, and detail the various features of its platform that we have contributed back to the open source community.

从抗美援朝到图形图像、算法，84 岁老爷爷的跨越性技术之路
http://mp.weixin.qq.com/s/uxCUSgSAtNStDMbIidYtfQ
本文想和大家分享的是一位名为吴祖增的 84 岁技术人的故事，他从最初的医学领域成功跨行至互联网行业，后在数学、物理、电子工程、计算机硬件和软件方面颇有造诣，并在图形图像和算法方面有着深厚的经验，如今的他博客（http://blog.csdn.net/zzwu）依然坚持更新，不愿做时代的尾巴，紧随技术潮流，真正诠释了何为“活到老，学到老”的含义。

当技术为组织所累时怎么办？将你的组织架构旋转90度
https://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650998289&idx=1&sn=af27e4141f347d800eb7f00f6d67bcb4
Netflix 和阿里巴巴等高效能组织的一线实践表明，DevOps 和微服务架构是技术组织突破困局和转型升级的最佳实践。DevOps 和微服务转型本质上是一种组织架构重组 (Re-Org)：将技术组织旋转 90 度，从半职能半矩阵式组织转型到面向市场的跨职能混搭协作式组织，组织围绕微服务产品构建团队和开展研发运营。组织内部团队达成闭环，组织和市场之间达成闭环，更快更灵活地响应市场需求。

反击爬虫，前端工程师的脑洞可以有多大？
http://litten.me/2017/07/09/prevent-spiders/
各种招式的介绍

开源许可证教程
http://www.ruanyifeng.com/blog/2017/10/open-source-license-tutorial.html
作为一个开发者，如果你打算开源自己的代码，千万不要忘记，选择一种开源许可证（license）。许多开发者对开源许可证了解很少，不清楚有哪些许可证，应该怎么选择。本文介绍开源许可证的基本知识。

阿里巴巴Java开发规约插件全球首发
https://mp.weixin.qq.com/s?__biz=MzIzNjI1ODc2OA==&mid=2650887096&idx=1&sn=5e3fb6abebdd650ea5719e239222665a
另附：Java at Alibaba

QQ空间已在生产环境中使用QUIC协议
http://www.infoq.com/cn/news/2017/10/qzone-quic-practise
QQ 空间前端团队通过对 HTTP2 和 QUIC 协议的应用和实践，使得 Web 页面访问速度得到了很大的提升，并且他们针对性地采用了不同的资源加载策略，最大化利用了协议的优势。

JavaScript’s Promise Leaks Memory
https://alexn.org/blog/2017/10/11/javascript-promise-leaks-memory.html
What you can do about memory leaks in recursive loops.

How JavaScript works: Event loop and the rise of Async programming
https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5
This time we’ll expand on our first post by reviewing the drawbacks to programming in a single-threaded environment and how to overcome them to build stunning JavaScript UIs. As the tradition goes, at the end of the article we’ll share 5 tips on how to write cleaner code with async/await.

Setting up Webpack, Babel and React from scratch, revisited
https://stanko.github.io/webpack-babel-react-revisited/
Last summer I wrote this post which quickly became my most popular one to day. With webpack 2 and 3 it got outdated, so I decided to write a new one.

A SIMPLE APPROACH TO BUILDING A REAL-TIME COLLABORATIVE TEXT EDITOR
http://digitalfreepen.com/2017/10/06/simple-real-time-collaborative-text-editor.html
This post is my attempt to write an easy to understand introduction to the main ideas behind building a real-time collaborative text editor, which can be tricky as you want all clients to synchronize and see a sensible result even in the face of concurrent edits. In some ways, this is already a solved problem by Operational Transform (OT) and open-source implementations like Firepad and ShareJS.

Rebuilding slack.com
https://slack.engineering/rebuilding-slack-com-b124c405c193
A redesign powered by CSS Grid and optimized for performance and accessibility.

A Look at Bootstrap 4’s New Reset: Reboot.css
https://scotch.io/tutorials/a-look-at-bootstrap-4s-new-reset-rebootcss
Let’s talk about a really neat new feature in Bootstrap 4 called Reboot. In this post, I’ll blab a bit about the history of resets, Bootstrap, some cool features of Reboot, and how you can start using it today.

Image Effects with CSS
http://bennettfeely.com/image-effects/
Using one or more newer CSS properties (background-blend-mode, mix-blend-mode, or filter) gives us a surprising amount of possibilities to manipulate a single source image.

iPhone X notch advice for web developers
https://mobiforge.com/news-comment/iphone-x-notch-advice-for-web-developers
Notches become necessary on edge-to-edge screen devices, if the device is to have any front-facing sensors. This Essential notch is a lot smaller than the iPhone X notch, since it only needs to accommodate a camera, while the iPhone’s notch houses a more complex and ultimately wider sensor array (including a Kinect-like depth-measuring sensor). 另附：UI Design for iPhone X: Top Elements and the Notch

The 10 Commandments of Mobile App Design
https://blog.proto.io/10-commandments-mobile-app-design/
If you’re a mobile app designer who wants your app to stick out from the daily deluge, you’ve got to create a product that’s both beautiful and enjoyable to use. Need a little bit of guidance to make sure you’re doing everything you can to design a successful app? There’s no need to climb a mountain — we’ve got your 10 commandments of mobile app design right here.

UX for Lizard Brains
https://alistapart.com/article/ux-for-lizard-brains
The remainder of this article introduces three ways to design digital objects that “play nice” with our evolved expectations of the physical world. By doing our best to concretize the dematerialized things of our screen-based world, we give our lizard brains better affordances for understanding.

Don’t Let Your Brain Deceive You: Avoiding Bias In Your UX Feedback
https://www.smashingmagazine.com/2017/10/avoid-bias-ux-feedback/
There are dozens of cognitive biases that take many different forms, although a few dominating types emerge frequently for product teams seeking user feedback. In this article, we’ll take a closer look at four of the most common types of cognitive biases that pop up when collecting and interpreting UX feedback — and how you can nip these biases in the bud, before they skew your production process.

Keeping track of letter-spacing, some guidelines
https://css-tricks.com/keeping-track-letter-spacing-guidelines/
Typography is part of everyone’s reading experience, yet something that most do not think about very much. By better understanding its history, strengths, and weaknesses, we are able to craft clear and effective reading experiences for everyone.

OpenTracing: An Open Standard for Distributed Tracing
https://thenewstack.io/opentracing-open-standard-distributed-tracing/
Although tracing offers visibility into an application as processes grow in number, instrumenting a system for tracing has thus far been labor-intensive and complex. The OpenTracing standard changes that, enabling the instrumentation of applications for distributed tracing with minimal effort.

MongoDB: How to Build a Global Database as a Service
https://www.youtube.com/watch?v=vHuIFM9cyik
Atlas is MongoDB’s database as a service. Learn how they leverage AWS to provide a scalable, available and secure service to thousands of customers across the globe. Atlas deploys EC2 based MongoDB clusters across multiple Availability Zones in customer dedicated VPCs. Customers with their own VPCs can then use VPC Peering to privately reach their MongoDB clusters. We also discuss how detailed monitoring, automatic backups, no-downtime patching, and push-button scaling work at this scale.

新鲜货

Next.js 4: React 16 and styled-jsx 2 https://zeit.co/blog/next4
We are happy to introduce Next.js 4, which features support for React 16 and introduces a major upgrade for the default styling engine styled-jsx with support for dynamic styles. Major performance improvements are introduced: SSR with Next.js 4 is 2.6x faster and style initialization is 20% faster. According to CSS-in-JS benchmarks, Next.js styles are now the fastest of any library.

ProseMirror 1.0
http://marijnhaverbeke.nl/blog/prosemirror-1.html
CodeMirror 作者的一款新编辑器。ProseMirror is a Web interface component, and though some of the challenges it tackles are specific to the strengths and (especially) weaknesses of the Web platform, don’t think of it as another TinyMCE alternative. Rather, it is a more general take on rich text editing that happens to be implemented in JavaScript for the browser.

Bringing WebVR to everyone with the Windows 10 Fall Creators Update
https://blogs.windows.com/msedgedev/2017/10/10/bringing-webvr-everyone-windows-10-fall-creators-update/
On October 17th, EdgeHTML 16 will be released with Windows 10 Fall Creators Update, and the era of Windows Mixed Reality begins as headsets and motion controllers become widely available, enabling low-cost, immersive experiences with WebVR in Microsoft Edge.

PDFree
http://www.pdfree.cn/
PDFree是鼎复数据旗下的产品。鼎复数据是一家致力于用技术改变金融的高科技公司。我们为各类金融投资机构提供高效、便捷、专业的金融分析平台，帮助客户进行研究与决策。针对PDF提取表格这一常见、繁琐、费时的问题，我们运用积累多时PDF解析能力，开发了PDFree。希望以用户体验为先，免费使用，力求解析的精确、高效、智能。

The Impressive Growth of R
https://stackoverflow.blog/2017/10/10/impressive-growth-r/
In fact, R is growing at a similar rate to Python in terms of a year-over-year percentage, though this growth is “easier” because it started from a smaller share of traffic.

Nrwl Extensions for Angular
https://nrwl.io/nx
An open source toolkit for enterprise Angular applications.

mdn-browser-compat-data
https://github.com/mdn/browser-compat-data
This repository contains compatibility data for Web technologies. Browser compatibility data describes which platforms (where “platforms” are usually, but not always, web browsers) support particular Web APIs.

http2.js
https://github.com/kaazing/http2.js
An HTTP/2 client and server implementation

date-fns
https://github.com/date-fns/date-fns
Modern JavaScript date utility library

Taucharts
https://github.com/TargetProcess/tauCharts
Taucharts is a data-focused JavaScript charting library based on D3 and designed with passion. 附介绍：Taucharts One

maptalks.js
https://github.com/maptalks/maptalks.js
A light JavaScript library to create integrated 2D/3D maps.

luma.gl
https://github.com/uber/luma.gl
A JavaScript WebGL Framework for Data Visualization. luma.gl’s provides efficient and easy-to-use WebGL2-based building blocks enabling high-performance GPU-based data visualizations and computations on your browser.

number-precision
https://github.com/dt-fe/number-precision
1K tiny & fast lib for doing addition, subtraction, multiplication and division operations precisely

Froala Design Blocks
https://www.froala.com/design-blocks
Over 170 responsive design blocks ready to be used in your web or mobile apps. All blocks are based on the Bootstrap Library, and they are the building blocks for beautiful websites.

AthenaX
https://github.com/uber/AthenaX
SQL-based streaming analytics platform at scale

TelegramSwift
https://github.com/overtake/TelegramSwift
Telegram is a messaging app with a focus on speed and security. It’s superfast, simple and free. This repo contains the official source code for Telegram App for MacOS.

Ansible open sources Ansible Tower with AWX
https://www.jeffgeerling.com/blog/2017/ansible-open-sources-ansible-tower-awx
Ever since Red Hat acquired Ansible, I and many others have anticipated whether or when Ansible Tower would be open sourced. Ansible Tower is one of the nicest automation tools I’ve used… but since I haven’t been on a project with the budget to support the Tower licensing fees, I have only used it for testing small-scale projects.

The Intuitive Guide to Data Structures And Algorithms
https://www.interviewcake.com/data-structures-and-algorithms-guide
This guide is focused on—giving you a visual, intuitive sense for how data structures and algorithms actually work. So if you’ve got a big coding interview coming up, or you never learned data structures and algorithms in school, or you did but you’re kinda hazy on how some of this stuff fits together… This guide will fill in the gaps in your knowledge and make you say, “Oooh, that’s how that works.”

Interview Cheatsheet
https://github.com/yangshun/tech-interview-handbook/blob/master/preparing/cheatsheet.md
This is a straight-to-the-point distilled list of technical interview Do’s and Don’ts, mainly for algorithmic interviews. Some of these may apply to only phone screens on whiteboard interviews but most will apply to both. I revise this list before each of my interviews to remind myself of them and eventually internalized all of them to the point I do not have to rely on it anymore.

Exploring ES2016 and ES2017
http://exploringjs.com/es2016-es2017/
This book is about ECMAScript 2016 and ECMAScript 2017, new versions of JavaScript. It only covers what’s new in those versions. For information on prior versions, consult the following books of mine (which are free to read online): Introduction to JavaScript for programmers (up to ES5): “Speaking JavaScript”; What’s new in ECMAScript 6 (ES2015): “Exploring ES6”. “Exploring ES2016 and ES2017” is a living book. Much content is still to come! Buy it to stay up to date on what is in ECMAScript 2016 and ECMAScript 2017. 另附：Eloquent JavaScript Third Edition.

Book - Designing Data-Intensive Applications
https://dataintensive.net/
NoSQL… Big Data… Scalability… CAP Theorem… Eventual Consistency… Sharding… Nice buzzwords, but how does the stuff actually work? As software engineers, we need to build applications that are reliable, scalable and maintainable in the long run. We need to understand the range of available tools and their trade-offs. For that, we have to dig deeper than buzzwords. This book will help you navigate the diverse and fast-changing landscape of technologies for storing and processing data. We compare a broad variety of tools and approaches, so that you can see the strengths and weaknesses of each, and decide what’s best for your application.

产品及其它

Apple Co-Founder Steve Wozniak Forms ‘Woz U’ to Reprogram Tech Education
http://www.businesswire.com/news/home/20171013005008/en/Apple-Co-Founder-Steve-Wozniak-Forms-Woz-Reprogram
https://woz-u.com/
Woz U provides a personalized approach to coding and tech education designed to get you through the curriculum faster so that you can get into the workforce quicker, and start changing the world.

Google Data Studio
https://www.google.com/analytics/data-studio/
Google Data Studio (beta) turns your data into informative dashboards and reports that are easy to read, easy to share, and fully customizable. Dashboarding allows you to tell great data stories to support better business decisions. Create unlimited Data Studio custom reports with full editing and sharing.

上线两年半，日活过千万，快看漫画的产品运营逻辑究竟是什么
https://mp.weixin.qq.com/s?__biz=MzI2NTY4MDg1NA==&mid=2247489091&idx=1&sn=5547e63febd9cb57f476873e21a3615d
快看漫画主要从以下三个方面，进行产品内容运营、用户维护和商业变现，第一，从产品策略上专注用户需求，优化用户阅读体验到多重方向的运营活动设计对用户进行持续的拉新及留存；第二，从对头部内容的严格把关到对作者IP、内容IP的孵化培育；第三，从振兴国漫到漫画泛娱乐化，结合影视进行二次创作，快看漫画在这条看似“不可能”的道路上踩下一个又一个坚实的脚印。

Facebook、Twitter创业导师的4条建议
https://mp.weixin.qq.com/s?__biz=MzIxNTAzNzU0Ng==&mid=2654589719&idx=1&sn=fb30728c5c5b39a74d0cc0b94d7ce964
关于创业，本·霍洛维茨有以下几条建议：一、不要追随你的激情；二、学会独立思考；三、正确决断需要智慧和勇气；四、创业过程中，CEO应该实事求是、裁员要讲究正确的方法、直面困难绝不逃避、甄别候选人的动机。另附：孙正义14条商业法则

线上线下同价，小米为何更赚钱
https://mp.weixin.qq.com/s?__biz=MjM5NjM5MjQ4MQ==&mid=2651608619&idx=1&sn=80d55ea761408b60736299a75a0320e0
新零售，就是“用互联网的效率回到线下”，就是让线下的“体验性”和“即得性”优势，插上“效率”的翅膀。我们对这个“效率”有极致要求，那就是让线下的小米之家，和线上的小米商城，实现同款同价。这就是“小米的新零售”。电商认为：零售=流量x转化率x客单价x复购率。线下开店，上门推销，电话销售，校门口摆摊，一切的零售形态，其实最终都可以用这个公式来表示。对应到“电商对零售的理解”，坪效 =（流量x转化率x客单价x复购率）/ 面积。极致的坪效，是小米新零售的关键。

– THE END –