FEX 技术周刊 - 2017/07/24

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

业界会议

[报名]第三届FEDAY - 2017.08.26
https://fequan.com/2017/

深阅读

Checklist: Node.JS production best practice
http://goldbergyoni.com/checklist-best-practice-of-node-js-in-production/
Welcome to my comprehensive collection of tips on running Node.JS in production. It aims to summarize most of the knowledge gathered to date from the highest ranked blog posts.

Apollo Server 1.0 — A GraphQL Server for all Node.js frameworks
https://dev-blog.apollodata.com/apollo-server-1-0-a-graphql-server-for-all-node-js-frameworks-2b37d3342f7c
Apollo Server is a community-maintained, open-source GraphQL server. It works with all Node.js HTTP server frameworks: Express, Connect, Hapi, Koa, AWS Lambda, Restify and Micro. It is built on top of the graphql-js reference implementation.

The State of Developer Ecosystem in 2017
https://www.jetbrains.com/research/devecosystem-2017/
对开发者的调研，包括使用的语言、工具等

Binary AST Proposal Overview
https://github.com/syg/ecmascript-binary-ast/
Performance of applications on the web platform is becoming increasingly bottlenecked by startup (load) time. Larger amounts of JS code are transferred over the wire by more sophisticated web properties. While caching helps, these properties regularly release new code, and cold load times are very important.

A real world guide to WebRTC
https://deepstreamhub.com/tutorials/protocols/webrtc-intro/
This guide will take you through the basics of setting up WebRTC data, voice and video channels between two peers as well as whole rooms of users, sending files, manipulating video or sharing your screen. The goal is that once you’ve read through it you’ve gained a solid, hands-on understanding of what it takes to build WebRTC apps and enough additional knowledge to know where to go next.

JavaScript Factory Functions with ES6+
https://medium.com/javascript-scene/javascript-factory-functions-with-es6-4d224591a8b1
ES6 provides a convenient syntax for dealing with object creation and factory functions. Most of the time, that’s all you’ll need, but because this is JavaScript, there’s another approach that makes it feel more like Java: the class keyword.

The State of Internationalization in JavaScript
https://www.sitepen.com/blog/2017/07/19/the-state-of-internationalization-in-javascript/
Globalizing an application requires a tremendous amount of information. Beyond language-specific messaging, applications must also account for locale-aware string sorting, formatting and parsing dates, lists, currencies, and units. Even within a single language, applications may need to cater to multiple dialects — adapting to regional variations in grammar and vocabulary. There are also technical considerations like proper Unicode and bidirectional text handling. Further, JavaScript itself has not made globalization easy.

Implementing Webmentions
https://allinthehead.com/retro/378/implementing-webmentions
In a world before social media, a lot of online communities existed around blog comments. The particular community I was part of – web standards – was all built up around the personal websites of those involved.

美团点评收银台前端可用性保障实践
https://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&mid=2247485330&idx=1&sn=daef0393fdae3d8b499fd9b8b2473cd1
本文主要讨论的是前端可用性相关话题，以在美团点评移动端网页收银台的实践为例，讲解收银台前端是如何保障可用性的。另附来美团的另一篇文章：Android远程调试的探索与实现

鹅厂技术专家的”软实力”是如何炼成的
https://mp.weixin.qq.com/s?__biz=MzA5MTMyNzAzMQ==&mid=2651542242&idx=1&sn=2cef795d692f1ee2330b4872474f00db
鹅厂技术专家是什么样子？硬实力+软实力。硬实力是基础能力，对操作系统、网络算法等的掌握。软实力分为三个力，思考力、学习力、沟通力。对成长的解读非常实在。

游戏服务器架构的演进简史
https://mp.weixin.qq.com/s?__biz=MzIwMzg1ODcwMw==&mid=2247486695&idx=1&sn=6c04f663590653284aaf6f4c9f930196
游戏服务器端，是一个会长期运行的程序，并且它还要服务于多个不定时、不定点的网络请求。所以这类软件的特点是要非常关注稳定性和性能。这类程序如果需要多个协作来提高承载能力，则还要关注部署和扩容的便利性；同时，还需要考虑如何实现某种程度的容灾需求。由于多进程协同工作，也带来了开发的复杂度，这也是需要关注的问题。

HTML5 indexedDB前端本地存储数据库实例教程
http://www.zhangxinxu.com/wordpress/2017/07/html5-indexeddb-js-example/
HTML5 indexedDB和Web SQL Database都是本地数据库数据存储，Web SQL Database数据库要出来的更早，然并卵。从2010年11月18日W3C宣布舍弃Web SQL database草案开始，就已经注定Web SQL Database数据库是明日黄花，未来一定是indexedDB的。

Thinking In React
https://pusher.com/sessions/meetup/bristol-js/thinking-in-react
Best practices in designing performant #ReactJS applications, and highlights on some of the more complex issues that can come back and bite you. Plus libraries that help you get the job done.

8 things to learn in React before using Redux
https://www.robinwieruch.de/learn-react-before-using-redux/
State management is difficult. A view library, such as React, enables you to manage local component state. But it only scales to a certain point. React is just a view layer library. Eventually you decide to move on to a more sophisticated state management solution such as Redux. Yet there are certain things, that I want to point out in this article, that you should know about React before you jump on the Redux train.

CSS Architecture with ReactJS
https://cheesecakelabs.com/blog/css-architecture-reactjs/
We are living a new today, every day, filled with new tools and paradigms. Often, we catch ourselves trying to apply yesterday architectures on new technologies, and that can end bad. One of these cases is BEM – a CSS naming convention – which solves a problem that we maybe don’t have anymore.

How to Create a Reddit Clone Using React and Firebase
https://www.nextplatform.com/2017/07/17/google-wants-rewire-internet/
In this article, we will be using Firebase along with Create React App to build an app which will function similar to Reddit. It will allow the user to submit a new link which can then be voted on.

Javascript tools for end-to-end testing web applications
http://mo.github.io/2017/07/20/javascript-e2e-integration-testing.html
This post reviews available tools for end-to-end testing web applications using Javascript (i.e. tests that click buttons, type text etc). Many UI frameworks comes with a tool for this, but I’m looking specifically for a framework neutral tool so I’m not considering for example Protractor (Angular), Capybara (Ruby on Rails), Mirage (Ember) etc.

The Next Generation of Web Gaming
https://hacks.mozilla.org/2017/07/the-next-generation-of-web-gaming/
Much work has gone into optimizing runtime performance over the last few years, and with that we learned many lessons. We have collected many of these learnings in a practical blog post about porting games from native to web, and look forward to your input on other areas for improvement. As multithreading support lands in 2018, expect to see opportunities to further invest in improving memory usage. 另附：Creating a WebAssembly module instance with JavaScript

How CircleCI Processes 4.5 Million Builds Per Month
https://stackshare.io/circleci/how-circleci-processes-4-5-million-builds-per-month
One of the great things about being a CI/CD company is that we get to practice what we preach. Instead of long dry spells between releases, we push several changes per day to keep our feedback loops short and our codebase clean. We’re small enough that we can move quickly, but large enough that our teams have the resources they need.

Introducing Chameleon - A Global CMS from Uber Engineering
https://eng.uber.com/chameleon/
To effectively serve Uber’s global user base local teams create and publish content specifically for the riders and drivers in their city or region. To make the content creation process streamlined and scalable, the Uber.com Content Platform team developed Chameleon, a global content management system (CMS) for Uber.com. Named after the colorful reptile known for its ability to adapt to its environment, Chameleon allows teams to deliver content tailored to their regional markets, and provides an intuitive user interface (UI) so that anyone at Uber can easily build a customized web page.

Open Container Initiative Specifications are 1.0
https://coreos.com/blog/open-container-initiative-specifications-are-10
容器规范终于定稿了，另附：Docker Leads OCI Release of v1.0 Runtime and Image Format Specifications

TCP BBR congestion control comes to GCP – your Internet just got faster
https://cloudplatform.googleblog.com/2017/07/TCP-BBR-congestion-control-comes-to-GCP-your-Internet-just-got-faster.html
We’re excited to announce that Google Cloud Platform (GCP) now features a cutting-edge new congestion control algorithm, TCP BBR, which achieves higher bandwidths and lower latencies for internet traffic. This is the same BBR that powers TCP traffic from google.com and that improved YouTube network throughput by 4 percent on average globally — and by more than 14 percent in some countries. 另附：How Google Wants To Rewire The Internet.

Facets: An Open Source Visualization Tool for Machine Learning Training Data
https://research.googleblog.com/2017/07/facets-open-source-visualization-tool.html
Working with the PAIR initiative, we’ve released Facets, an open source visualization tool to aid in understanding and analyzing ML datasets. Facets consists of two visualizations that allow users to see a holistic picture of their data at different granularities. Get a sense of the shape of each feature of the data using Facets Overview, or explore a set of individual observations using Facets Dive. These visualizations allow you to debug your data which, in machine learning, is as important as debugging your model.

Designing The Perfect Slider
https://www.smashingmagazine.com/2017/07/designing-perfect-slider/
When we think about a slider, we usually imagine an image gallery slider, or the infamous carousel, or perhaps off-canvas navigation, with the overlay sliding in from the side. However, this article is not about those kinds of sliders. Instead, we’ll look into the fine details of designing better slider controls for selecting a value or a range of values. Think of price range sliders, 360-degree-view sliders, timeline sliders, health insurance quote calculators, or build-your-own-mobile-plan features.

Redesigning GitLab’s Navigation
https://about.gitlab.com/2017/07/17/redesigning-gitlabs-navigation/
At GitLab, we are taking big steps towards refining our interface in an effort to make the idea to production workflow more productive. After a series of research and brainstorming sessions, we are excited to share with the community our redesign of GitLab’s navigation.

Product Design for Sustainability
https://uxdesign.cc/product-design-for-sustainability-3fffbb2a7f0e
How products we build today can make the world more sustainable tomorrow. Sustainability focuses on efficient and effective solutions that are better for society, the environment, and companies via effectively using natural resources, and reducing waste and toxins in the environment.

新鲜货

Enclose.IO
http://enclose.io/
Compiling your application into a single executable.

码农·“安全”攻防术（第28期）
http://www.ituring.com.cn/book/2447
本期《码农》以“网络安全”为主题，旨在提供各种实用技术解决潜在的安全问题，涉及浏览器方面的同源策略绕过技术，Web应用程序的风险因素，Android开发中的常见安全错误，对iOS系统进行模糊测试，等等。既有攻击技术也有防守策略，希望戴“白帽子”的网络安全研究员可以知己知彼、百战百胜。

Apache Foundation bans use of Facebook BSD+Patents licensed libraries like React.js
https://react-etc.net/entry/apache-foundation-bans-use-of-facebook-bsd-patents-licensed-libraries-like-react-js
附：如何看待Apache基金会禁止使用React在内的Facebook licence软件

Announcing NgRx 4
https://blog.angular.io/announcing-ngrx-4-87df0eaa2806
There is a lot in this release that the team hopes you will enjoy. Some of the highlights: Official support for lazy loading; Simplified testing; Redesigned router integration. 另附：NgRx: Patterns and Techniques.

Firefox marketshare revisited
https://andreasgal.com/2017/07/19/firefox-marketshare-revisited/
Mozilla helped the Web win but Firefox is now losing an unwinnable marketing fight against Google. This does not mean Firefox is not a great browser. Firefox is losing despite being a great browser, and getting better all the time. Firefox is simply the victim of Google’s need to increase profit in a relatively stagnant market.

The State Of JavaScript
https://stateofjs.com/
Last year, over nine thousand developers took part in the first ever edition of the State Of JavaScript survey. And now, we’re doing it again: from React to Polymer, from Service Workers to Webpack, let’s find out together which buzzwords are here to stay and which ones will soon fall to JavaScript fatigue!

A new chapter for Google Glass
https://blog.x.company/a-new-chapter-for-glass-c7875d40bf24?e=f
After two years in a limited program, Glass Enterprise Edition is now available to more businesses through our network of expert partners

可能是迄今为止最好的GitHub代码浏览插件
http://www.geeksense.cn/plugin/
对 Java、C++ 等语言提供了交叉引用查找的支持i

TagUI
https://github.com/tebelorg/TagUI
TagUI is a general purpose tool for automating web interaction.

Mesh - JavaScript IDE that feels like a spreadsheet
https://github.com/chrispsn/mesh
Specifically, Mesh is a spreadsheet UI wrapper around a text file editor. Actions on the grid are automatically translated to changes in the JavaScript code. Mesh’s aim is to improve the user experience of ‘regular’ programming languages. Consider Mesh if you: use JavaScript, but want rapid visual feedback and a convenient grid UI; use spreadsheets, but feel constrained by Excel’s limitations.

Wade - Blazing fast, 1kb search
https://blog.kabir.ml/posts/inside-wade.html
Wade is a 1kb Javascript search library. It allows you to create a function that can search an array of strings for a set of keywords, which is run through the processor. After this, it is searched for in each item of the data.

CentroUI - UI components for WebVR
https://www.centroida.co/centroui/
CentroUI is a set of UI components and utilities for building interfaces for WebVR applications. Based on React VR, CentroUI gives developers plug-and-play text input controls, cards, lists, navigation items and grids, all built with cross-device and cross-browser compatibility to ensure consistent experience with any environment and device.

Transmit
https://panic.com/transmit/
The gold standard of macOS file transfer apps just drove into the future. Transmit 5 is here. Upload, download, and manage files on tons of servers with an easy, familiar, and powerful UI. It’s quite good.

TIO: Try it online
https://tio.run/
TIO is a family of online interpreters for an evergrowing list of practical and recreational programming languages. To use TIO, simply click the arrow below, pick a programming language, and start typing. Once you click the run button, your code is sent to a TIO arena, executed in a sandboxed environment, and the results are sent back to your browser. You can share your code by generating a client-side permalink that encodes code and input directly in the URL.

10 Awesome CodePens To Inspire You
https://codeburst.io/html-css-and-javascript-10-awesome-codepens-to-inspire-you-420bbde87be1
These CodePens show off some seriously awesome visual effects.

15 Interesting JavaScript and CSS Libraries for July 2017
https://tutorialzine.com/2017/07/15-interesting-javascript-and-css-libraries-for-july-2017
另附：11 Current Web Programming Trends in 2017、21 Excellent Tools & Services for Web Professionals

Visual Studio Team Services
https://www.visualstudio.com/team-services/
Agile. Git. Continuous integration. Plan better, code together and ship faster. 附：What is Visual Studio Team Services? A Look at Its Features, Uses, Tutorials and More

产品及其它

Focus on Culture When Building an Engineering Culture
https://www.infoq.com/articles/focus-engineering-culture
When I am discussing “Engineering Culture” here, my focus is on “Culture” alone. I am purposely separating the two words and keeping aside the engineering core practices for next time. I have tried to highlight some key focus areas from my learnings and experiences with engineering teams over years: Hiring & Structure; Learning and Knowledge Sharing; Responsibilities, Collaboration & Accountabilities; Freedom; Appreciations & Acknowledgements. 另附：Technical Leadership: Getting Started、扎克伯格-创始人不得不学的团队建设法则。

张首晟 - 人类最伟大的9个思维模型
https://mp.weixin.qq.com/s?__biz=MzA5ODMzMDkzOA==&mid=2661082192&idx=1&sn=446f9ceaba2d297911c5021a5c1f7d29
2017年7月21日，张首晟团队发现天使粒子，一年前，他在混沌大学分享了人类历史上最伟大的9个思维模型：自由的空气在飘扬 笔胜于剑、大道至简…

见微知著，从小需求里看产品的抉择和定位
https://mp.weixin.qq.com/s?__biz=MzI0MjA1Mjg2Ng==&mid=2649867351&idx=1&sn=1cdb93e86eeb4cda005e3cc9add5f871
每个产品诉求，都需要从整体考虑，场景的兼容性，用户的操作成本，操作友善度；为了兼容更多场景，而牺牲操作成本，操作友善度，未必是对的；取舍这个问题其实没有谁有绝对的答案，可能需要长期的运营观察和对用户行为的深刻理解；一些初级的产品经理，往往热衷于去增加功能，增加场景兼容性，而忽视了用户的操作成本，操作友善度问题，会觉得我的产品明明符合你的需求，你为什么不用？另附：扼杀创业的理想主义

诚品书店吴清友 - 如果没有病痛，我生命的存折恐怕永远是零 https://mp.weixin.qq.com/s?__biz=MjM5NjMyOTMzNA==&mid=2649853851&idx=1&sn=3c0708e24bc85918e5f7541516e7bb96
人们都说我承受诚品赔钱十五年的重担，于我而言，既然下定了决心，就应诚恳面对自己的信念，就算在最艰苦时，也不改其志，只是明白了自身的不自量力与无可救药的乐观，仍愿意迎向诸多困境与挑战，把负面扭转成正面。我们需要财富，但是当你越需要它、越追求它，很多情况下，也为我们生命带来很多痛苦，希望大家可以有一本「生命的存折」，开始存下一些除了钱以外的正面力量：你的爱心、温暖、善意、关怀、友善，这是存下生命里许多正面力量的一本存折。生命在事业之上，心念在能力之上，事业、工作都是你生命的道场。每个人的生命，都应该有他定锚之所在，什么可为，什么又不可为。伙伴们，不管是创业或从事哪一件志业，先厘清自己的起心动念，先认识自己、认识生命，因为你永远是自己最大的支持者。

遇见大数据可视化 - 未来已来，变革中的数据可视化
https://mp.weixin.qq.com/s?__biz=MTEwNTM0ODI0MQ==&mid=2653434484&idx=1&sn=6e8f18ce14aa530affe06d80627e01bd
当人类的认知能力越发受到传统可视化形式的限制时，隐藏在大数据背后的价值就难以发挥出来，如果因为展示形式的限制导致数据的可读性和及时性降低，从而影响用户的理解和决策的快速实施，那么，数据可视化将失 其价值。然而，所幸的是，技术的快速发展和不断变化的认知框架正在为人类打开新的视野，促使艺术与技术相结合而产生新型的数据可视化形式。另附：100款大数据工具汇总，入行必备。