FEX 技术周刊 - 2017/08/21

深阅读

The Lightweight Browser: Firefox Focus Does Less, Which Is So Much More
https://blog.mozilla.org/firefox/lightweight-browser-focus-does-less-which-is-much-more/
Firefox Focus is the new private browser for iOS and Android, made for those times when you just need something simple and lightweight to do whatever you need to do and get back to life. Focus is ideal for tasks that don’t need “browser overkill.” Overkill is when software uses a maximum amount of your device’s processing power and resources, when a bare minimum would have worked just fine. 另： Chrome 61 Beta: JavaScript modules, Payment Request API on desktop, Web Share API, and WebUSB

Explaining React’s license
https://code.facebook.com/posts/112130496157735/explaining-react-s-license/
A few weeks ago, the Apache Software Foundation (the ASF) made a decision to list the BSD + Patents license as a Category-X license. This move affects users of much of Facebook’s open source software, but especially the popular React project and the constellation of projects around it. As a result, many have asked us to consider relicensing React and all of our other open source projects. What has become clear through these discussions is that the ASF has very different considerations than Facebook does for how it maintains and distributes open source software.

APIs as infrastructure: future-proofing Stripe with versioning
https://stripe.com/blog/api-versioning
When it comes to APIs, change isn’t popular. While software developers are used to iterating quickly and often, API developers lose that flexibility as soon as even one user starts consuming their interface.

Evolution of the Heroku CLI: 2008-2017
https://blog.heroku.com/evolution-of-heroku-cli-2008-2017
Over the past decade, millions of developers have interacted with the Heroku CLI. In those 10 years, the CLI has gone through many changes. We’ve changed languages several times; redesigned the plugin architecture; and improved test coverage and the test framework. What follows is the story of our team’s journey to build and maintain the Heroku CLI from the early days of Heroku to today.

Evolving API Pagination at Slack
https://slack.engineering/evolving-api-pagination-at-slack-1c1f644f8e12
In this post, we’ll go over the pros and cons of various pagination strategies and discuss how these influenced our latest pagination scheme.

Edge node architecture with npm Enterprise
http://blog.npmjs.org/post/164220074975/edge-node-architecture-with-npm-enterprise
Recently, there’s been some buzz around the next great architectural shift in systems. There is a rising interest in the evolution of decentralized edge computing as a core part of that shift. For over two years, npm has been using edge computing concepts to ensure that the developer experience for users of npm Enterprise, our private registry product, matches the experience of using the centralized, cloud-hosted version of the npm Registry. Here’s why we’re doing that, and how.

Kubernetes at GitHub
https://githubengineering.com/kubernetes-at-github/
Over the last year, GitHub has gradually evolved the infrastructure that runs the Ruby on Rails application responsible for github.com and api.github.com. We reached a big milestone recently: all web and API requests are served by containers running in Kubernetes clusters deployed on our metal cloud. Moving a critical application to Kubernetes was a fun challenge, and we’re excited to share some of what we’ve learned with you today. 附：GitHub Goes All in on Kubernetes、Google and CodeFresh Collaborate to Make Kubernetes More Accessible.

WebAssembly: A New Hope
https://pspdfkit.com/blog/2017/webassembly-a-new-hope/
We believe, that a combination of server- and client-side technologies will offer the best experience for displaying PDF documents on the web and we’re working hard to make this as seamless as possible.

Understanding V8’s Bytecode
https://medium.com/dailyjs/understanding-v8s-bytecode-317d46c94775
V8 is Google’s open source JavaScript engine. Chrome, Node.js, and many other applications use V8. This article explains V8’s bytecode format — which is actually easy to read once you understand some basic concepts.

VasSonic，让你的H5页面首屏秒开
https://mp.weixin.qq.com/s?__biz=MTEwNTM0ODI0MQ==&mid=2653434532&idx=1&sn=ff3bfd9f72407188f45a6cffa818b4fc
手Q上很多页面首屏打开速度居高不下，甚至有些耗时达到3s以上，这意味着用户打开页面必须经过3秒之后才能进行交互操作，体验相当差，很多用户忍受不了这个漫长的时间直接流失掉了。为了提升用户体验和业务用户留存率，我们很多业务一开始通过Web开发，等页面模型验证符合预期后，再将H5页面转化成原生界面。我们很快意识到这不是一种健康的可持续的开发模式，一方面存在重复人力浪费，另外一方面原生商城除了速度快一点，要运营活动改版都很难。所以后来团队改了切入方向，安排人力专心研究如何加快页面打开速度，经过了一系列的摸爬滚打和优化探索，最终我们研发出了VasSonic框架，让H5页面首屏达到秒开，给用户一个更好的H5体验。下面就和大家分享VasSonic框架的发展历程。

弹性安全网络 – 构建下一代安全的互联网
https://mp.weixin.qq.com/s?__biz=MjM5NzA4ODc0MQ==&mid=2648628796&idx=1&sn=00a9a13e931024d5ebe62ba81e234a58
「弹性安全网络」不是对现有技术的一种应用，它是真正的发明了一项此前所没有的技术，提出了一种全新的方法，采用了一个全新的角度来看待现有世界。弹性安全网络真正想要去做的，是替换掉整个互联网最核心的心脏，替换掉DNS，从而让网络变得有弹性，能够快速调度资源，形成一个全新的网络架构。

百度Palo数据库宣布开源
https://mp.weixin.qq.com/s?__biz=MzA5NzkxMzg1Nw==&mid=2653162799&idx=1&sn=ff2cdde2464a2db08aab29e04f7b05a8
Palo 是百度开发的面向在线报表和分析的数据仓库系统，可以对标于商业的 MPP 数据仓库系统，比如 Greenplum、Vertica、Teradata 等。Palo 主要基于 C++ 和 Java 开发，集成了 Google Mesa 和 Cloudera Impala 的技术。另：十年磨一剑，阿里巴巴企业级数据管理平台 - iDB、阿里云新一代关系型数据库 PolarDB 剖析。

前端学习路径先平缓再陡峭在平缓，怎样去攻克陡阶段的
https://mp.weixin.qq.com/s?__biz=MzIzMjU1NDM0Ng==&mid=2247484678&idx=1&sn=01dfac8b172379e7ded7d9998808089e
如何学习前端，如何提高前端，相信是每一个想要投身前端的人的困扰。此篇文章较长，更适合大家分享到朋友圈和收藏起来细细品读。

React Internals
http://www.mattgreer.org/articles/react-internals-part-five-transactions/
In this five part series, we will “recreate” React from the ground up, learning how it works along the way. Once we’ve finished, you should have a good grasp of how React works, and when and why it calls the various lifecycle methods of a component.

React Performance Anti-Pattern: Creating Functions in render()
https://medium.com/netscape/react-performance-anti-pattern-creating-functions-in-render-ddeb5ebd2933
There is a very common mistake that I see in React components from beginners and experts alike. Sometimes I even find myself typing it, even when I know it’s a mistake. That’s because it feels so right. But if you’re going to write the best React code you can, you need to train yourself to spot this problem and avoid it. The mistake I’m referring to is creating functions in the render() method of a component.

Ivestigating Performance of Object#toString in ES2015
https://ponyfoo.com/articles/investigating-performance-object-prototype-to-string-es2015
In this article, we’ll discuss how Object.prototype.toString() performs in the V8 engine, why it’s important, how it changed with the introduction of ES2015 symbols, and how the baseline performance can be improved by up to 6x (based on findings from Mozilla engineers).

Async_Await Will Make Your Code Simpler
https://blog.patricktriest.com/what-is-async-await-why-should-you-care/
Sometimes modern Javascript projects get out of hand. A major culprit in this can be the messy handling of asynchronous tasks, leading to long, complex, and deeply nested blocks of code. Javascript now provides a new syntax for handling these operations, and it can turn even the most convoluted asynchronous operations into concise and highly readable code.

Web fonts: when you need them, when you don’t
https://hackernoon.com/web-fonts-when-you-need-them-when-you-dont-a3b4b39fe0ae
I’m going to type lots of words soon, but the gist of it is this: if you’re making a site, and you’re just about to go searching for that perfect web font, please, at least consider using system fonts instead.

How to Create a QR Code Reader for Your Mobile Website
https://www.sitepoint.com/create-qr-code-reader-mobile-website/
You don’t need a native phone app to scan QR codes —it’s quite simple to create your own QR code reader. Your website running on a smartphone equipped with a camera and running a little JavaScript can do the same trick.

Towards a JavaScript Binary AS
https://yoric.github.io/post/binary-ast-newsletter-1/
In this blog post, I would like to introduce the JavaScript Binary AST, an ongoing project that we hope will help make webpages load faster, along with a number of other benefits.

SVG can do THAT?!
http://slides.com/sdrasner/svg-can-do-that#/
科普 SVG。

Designing a Microservices Architecture for Failure
https://blog.risingstack.com/designing-microservices-architecture-for-failure/
This article introduces the most common techniques and architecture patterns to build and operate a highly available microservices system based on RisingStack’s Node.js Consulting & Development experience.

Timing is Everything
https://medium.com/the-node-js-collection/timing-is-everything-6d43fc9fd416
I scratched a bit of a long term itch and implemented basic support for the Performance Timeline specification for Node.js core. Hopefully it will land soon. There are still definitely some rough edges and certainly quite a few issues still to work out, but here’s how things work currently. Everything described below is subject to change.

Performant Web Animations and Interactions: Achieving 60 FPS
https://blog.algolia.com/performant-web-animations/
Performance is a crucial part of our formula for a stellar user experience: just as a speedy search leads to happy users, so do performant web animations.

The average web page is 3MB. How much should we care?
https://speedcurve.com/blog/web-performance-page-bloat/
The average page is now 3MB in size, and this seems like a good time to pause, check our assumptions, and ask ourselves: Is there any reason to care about page size as a performance metric? And if we don’t consider page size a meaningful metric, then what should we care about?

Google AMP is bad for E-commerce
https://thirtybees.com/blog/amp-is-bad-for-e-commerce/
Google and proponents of AMP would like you to think it is important because it is simply a faster way to deliver web pages. A lot of the thought behind AMP is that it will improve usability by delivering pages faster, which will keep users on your site longer. But is this actually a fact? AMP itself does not help with engaging users in a page. The content is what engages users.

Elixir in depth
http://digitalfreepen.com/2017/08/16/elixir-in-depth-notes.html
The goal is to really understand Elixir to answer questions such as: What is it good at doing, In what way, Under what circumstances? What is it not good at doing, What are current pain points?, What are the tradeoffs?

Manas: A high performing customized search system
https://medium.com/@Pinterest_Engineering/manas-a-high-performing-customized-search-system-cf189f6ca40f
Pinterest Search handles billions of queries every month and returns nearly four billion Pins every day. Over the past year, monthly mobile text searches have increased 40 percent and visual searches are up nearly 60 percent. We recently made Search and Lens more front and center on our apps by launching them on home feed, because nearly 85 percent of searches now happen on mobile devices.

Designing The Perfect Feature Comparison Table
https://www.smashingmagazine.com/2017/08/designing-perfect-feature-comparison-table/
Feature comparison tables are helpful not only in their primary function, though. When designed properly, they can aid in decision-making way beyond placing product specifications side by side. They can also add meaning to an otherwise too technical product specification sheet, explaining why a certain feature is relevant to the customer or how a certain product is better than the others.

Don’t mistake common UI patterns for best practices
https://medium.com/ruxers/dont-mistake-common-ui-patterns-for-best-practices-4a1c8d4bef9a
A colleague of mine recently published an article on a new model that he coins the human environment model—an approach to product design that asks us to “blur the line between the digital and material environment,” and in doing so, generate an emotional appeal from our users. I thought I’d take a stab at exploring this concept as it relates to one experience in particular: browse. Designers have notoriously poured their blood, sweat and tears into browse experiences, and to what end? These experiences often overstimulate and under deliver.

State of Modern Component Styling
https://www.sitepen.com/blog/2017/08/17/state-of-modern-component-styling/
In this world of intelligent auto-completion, why should we expect developers to remember and replicate matching class names across CSS and HTML? Modern frameworks are adapting to this shift and there are many different solutions to the problem of making styling and theming more intuitive. Here we will explore some of these solutions.

Integrating Animation into a Design System
https://alistapart.com/article/integrating-animation-into-a-design-system
Keeping animation choreography cohesive from the outset of a project can be challenging, especially for small companies. Without a dedicated motion specialist on the team, it can be difficult to prioritize guidelines and patterns early in the design process. What’s more likely to happen is that animations will be added as the product develops.

Making Visible Watermarks More Effective
https://research.googleblog.com/2017/08/making-visible-watermarks-more-effective.html
It’s standard practice to use watermarks on the assumption that they prevent consumers from accessing the clean images, ensuring there will be no unauthorized or unlicensed use. However, in “On The Effectiveness Of Visible Watermarks” recently presented at the 2017 Computer Vision and Pattern Recognition Conference (CVPR 2017), we show that a computer algorithm can get past this protection and remove watermarks automatically, giving users unobstructed access to the clean images the watermarks are intended to protect.

新鲜货

NG-ZORRO
https://ng.ant.design/
Ant Design 的 Angular^4.0.0 实现，开发和服务于企业级后台产品。另：阿里前端推出新的 React 框架：Mirror

Puppeteer
https://github.com/GoogleChrome/puppeteer
Puppeteer is a Node library which provides a high-level API to control headless Chrome over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome. Most things that you can do manually in the browser can be done using Puppeteer!

Oxygen is the new, easier way to design WordPress websites
https://oxygenapp.com/
The ultimate WYSIWYG visual editor plugin for WordPress. More flexible than typical page builders and as powerful as hand-coding, Oxygen is quickly becoming the tool of choice for WordPress web designers.

Boostnote: Open Source Note Taking App For Programmers
https://itsfoss.com/boostnote-linux-review/
Boostnote is a new Open Source note taking application focused on programmers. It is available for Linux, Windows and MacOS. It is built on electron and is run offline.

Introducing embedded code snippets
https://github.com/blog/2415-introducing-embedded-code-snippets
To add a code snippet: select the lines you want to reference, open the inline toolbar, click Copy permalink, and paste it anywhere.

Announcing the New Release of Docker Enterprise Edition
https://blog.docker.com/2017/08/docker-enterprise-edition-17-06/
Docker Enterprise Edition (EE) 17.06 embraces Windows, Linux and Linux-based mainframe applications, bringing the key benefits of CaaS to the enterprise application portfolio. Most enterprises manage a diverse set of applications that includes both traditional applications and microservices, built on Linux and Windows, and intended for x86 servers, mainframes, and public clouds.

Accessibility Testing with pa11y
https://bitsofco.de/pa11y/
pa11y, pronounced pally, is a set of free and open source tools that aims to make designing and developing accessibility easier. They have a number of different projects to help with this, for example a web dashboard interface, but I will be focusing on 2 of their projects: pa11y and pa11y-ci.

FaceNet
https://github.com/zixia/node-facenet
node-facenet is a TensorFlow backed FaceNet implementation for Node.js. FaceNet is a deep convolutional network designed by Google, trained to solve face verification, recognition and clustering problem with efficiently at scale.

npm-introspect
https://github.com/Nohmapp/npm-introspect
Introspect is a command line tool to examine and visualize the quality of your project’s dependencies.

Bootstrap 4 Beta
http://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/
Two years in the making, we finally have our first beta release of Bootstrap 4. In that time, we’ve broken all the things at least twenty-seven times over with nearly 5,000 commits, 650+ files changed, 67,000 lines added, and 82,000 lines deleted. We also shipped six major alpha releases, a trio of official Themes, and even a job board for good measure.

What’s new in Angular 5: easier progressive web apps
http://www.infoworld.com/article/3213244/javascript/whats-new-in-angular-5-easier-progressive-web-apps.html
Supporting progressive web apps in Angular today requires a lot of expertise on the developers’ part; version 5 is intended to make usage easier.

Using the Paint Timing API
https://css-tricks.com/paint-timing-api/
It’s a great time to be a web performance aficionado, and the arrival of the Paint Timing API in Chrome 60 is proof positive of that fact. The Paint Timing API is yet another addition to the burgeoning Performance API, but instead of capturing page and resource timings, this new and experimental API allows you to capture metrics on when a page begins painting.

Mathcha - Powerful Online Math Editor
https://www.mathcha.io/
A fast way to write and share mathematics formula. Fast Inputting, Diagram Drawing, Easy Sharing.

songbird
https://github.com/google/songbird
Songbird is a real-time spatial audio encoding JavaScript library for WebAudio applications. It allows web developers to dynamically spatially-encode streaming audio content into scalable ambisonics signal, which is rendered internally using Omnitone to output stereo sound, for realistic and quality-scalable 3D audio.

Bubb Infotip
http://bubb.surge.sh/
Minimal, non-dependent, non-fancy JS infotip. No CSS needed. Infotip? Seriously? Isn’t that just a euphemism for tooltip? It sure is.

gtop
https://github.com/aksakalli/gtop
System monitoring dashboard for terminal.

产品及其它

Wekan
https://wekan.github.io/
The open-source Trello-like kanban.

你的深度思考能力，是如何一步步被毁掉的
https://mp.weixin.qq.com/s?__biz=MjM5OTM5OTAyMQ==&mid=2654432204&idx=2&sn=500226618baca34142ca9ec40a15c79e
公众们将会在不久的将来，失去自主思考和判断的能力。最终他们会期望媒体为他们进行思考，并作出判断。」这就是闻名遐迩的「Tittytainment」战略，由 Titty（奶嘴）与 Entertainment（娱乐）合成，中文译为「奶头乐」（有点三俗的译法）。习惯了轻而易举能获得大量愉悦感，你就会慢慢对这种愉悦感脱敏。所以，请找到一件能够带给你长期收益和幸福感的事情，把它安排进每天的日程中。不需要追求物质收益，也不需要苛求成为领域专家，它的意义，是帮助你对抗慵常、平凡、索然无味的日常生活。让你保持头脑的清醒。

谷歌向一行禅师寻求智慧
https://mp.weixin.qq.com/s?__biz=MzAxODU3NjgwMQ==&mid=2650401784&idx=1&sn=6925a282d943c052c7a6f8d176c24b98
一行禅师号召与会的科技企业CEO们重点研发能够帮助人们重新找回平衡的应用程序和产品设备。“我们需要觉醒。当我和谷歌公司等企业高管会谈时，我会劝勉他们利用智慧和善念创造新的产品，帮助人们回归自我、疗愈自我。我们不必抵制或扔掉电子产品，但可以更好地利用它们。人类社会需要集体觉醒，才能摆脱我们所处的当前危机。这种觉醒发生在每一个步伐、每一口呼吸之间。当你觉醒了，你会发现幸福的方法。你不再痛苦，同时还可以帮助他人减轻痛苦。”

– THE END –