FEX 技术周刊 - 2018/03/12

深阅读

Node v8.10.0 (LTS)
https://nodejs.org/en/blog/release/v8.10.0/
This release comes with a lot of big changes. There are updates to V8, libuv, and ICU, a bugfix in npm, and support for building with OpenSSL 1.1.0. 另附：Introducing npm ci for faster, more reliable builds、Strategic Initiatives from the Node.js Project.

What I Talk About When I Talk About Platforms
https://martinfowler.com/articles/talk-about-platforms.html
Why an effective digital platform can help you scale delivery, what it should have in it, and how to get started building one. These days everyone is building a ‘platform’ to speed up delivery of digital products at scale. But what makes an effective digital platform? Some organisations stumble when they attempt to build on top of their existing shared services without first addressing their organisational structure and operation model. 另附：The Agile Fluency Model

Data visualization with react-vis
https://medium.com/@shyianovska/data-visualization-with-react-vis-bd2587fe1660
React-vis is a React visualization library created by Uber. With it you can easily create common charts, such as line, area, bar charts, pie and donut charts, tree maps and many more. React-vis is a good option because it is: Simple Flexible Integrated with React. In this article I want to show how to build a simple line chart using react-vis.

Server Rendering with React and React Router
https://tylermcginnis.com/react-router-server-rendering/
Server side rendering a React app can provide a few different benefits including performance and SEO. The problem is with those benefits comes a cost of additional complexity to your application. In this post, we’ll start from scratch and slowly build a server side rendered React (with React Router) while breaking down some of the complexity as we go.

How I built super fast JS framework
https://medium.com/@marcisbee/how-i-built-super-fast-js-framework-faster-than-react-ea99f0d03150
First of all I want to address elephant in the room that is one question you might be having: “Why the heck another JavaScript framework ?”. Well my answer is that I noticed a pattern in all of the frameworks I recently went through and all of them have the same problem. They are stuck in creating Virtual DOM and then running diffing algorithm over it, which led to diffing algorithm wars. And I thought that there is a better way of doing this (sneaking around this war), so I created a tiny JS Framework called Radi.js.

危险的 target=”_blank” 与 “opener”
https://knownsec-fed.com/2018-03-01-wei-xian-de-targetblank-yu-opener/
在网页中使用链接时，如果想要让浏览器自动在新的标签页打开指定的地址，通常的做法就是在 a 标签上添加 target等于”_blank” 属性。然而，就是这个属性，为钓鱼攻击者带来了可乘之机。

Data-Oriented Design and C++
https://zhuanlan.zhihu.com/p/34425262
学习下来自游戏开发的实践。

TypeScript 实践
https://juejin.im/post/5a9c004a6fb9a028b92c9e91
本文只记录 TypeScript 在我们实际项目中产生的一些实际有用的价值。我们的项目基于 React 体系，因此本文着重关注 React 体系和 TypeScript 结合使用的经验。另附：Typescript 在 Egg + Vue 应用中的实践

We Write CSS Like We Did in the 90s, and Yes, It’s Silly
http://alistapart.com/article/we-write-css-like-we-did-in-the-90s-and-yes-its-silly
As web developers, we marvel at technology. We enjoy the many tools that help with our work: multipurpose editors, frameworks, libraries, polyfills and shims, content management systems, preprocessors, build and deployment tools, development consoles, production monitors—the list goes on.

CSS in the Age of React: How We Traded the Cascade for Consistency
https://engineeringblog.yelp.com/2018/03/css-in-the-age-of-react.html
In a React world, we’re able to package together JSX with the styling it requires. Our React components explicitly declare dependencies on the CSS they need, which means that we can statically extract all the styles needed on a page so our developers no longer have to manually ensure that the CSS their components need is included!

How to Write CSS That Works in Every Browser, Even the Old Ones
https://hacks.mozilla.org/2018/03/how-to-write-css-that-works-in-every-browser-even-the-old-ones/
Let me walk you through how exactly to write CSS that works in every browser at the same time, even the old ones. By using these techniques, you can start using the latest and greatest CSS today — including CSS Grid — without leaving any of your users behind. Along the way, you’ll learn the advanced features of Can I Use, how to do vertical centering in two lines of code, the secrets to mastering Feature Queries, and much more. 另附：Lesser known CSS quirks & advanced tips

Using srcset and sizes to make responsive HTML5 images
https://engineering.tumblr.com/post/171593053597/using-srcset-and-sizes-to-make-responsive-html5
If you’ve tried to implement responsive retina images on the web, you’ve probably come across one of the many informative articles on the subject. Many of the posts I found about it are really great, but they downplay or overlook a point that I think is really important: If you set up srcset and sizes, your browser will automatically download higher density images on retina devices, if they are available. Let’s investigate how to do that.

CSS Techniques and Effects for Knockout Text
https://css-tricks.com/css-techniques-and-effects-for-knockout-text/
Knockout text is a technique where words are clipped out of an element and reveal the background. In other words, you only see the background because the letters are knocking out holes. It’s appealing because it opens up typographic styles that we don’t get out of traditional CSS properties, like color. 另附：What Houdini Means for Animating Transforms、Is Houdini Ready Yet

Reflected XSS explained: how to prevent reflected XSS in your app
https://blog.sqreen.io/reflected-xss/ A reflected XSS (or also called a non-persistent XSS attack) is a specific type of XSS whose malicious script bounces off of another website to the victim’s browser. It is passed in the query, typically, in the URL. It makes exploitation as easy as tricking a user to click on a link.

Loading Third-Party JavaScript
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/
Ideally, you’ll want to ensure third-party script is not impacting the critical rendering path. In this guide, we’ll walk through how to find and fix issues related to loading third-party JavaScript.

Using TOML Config Files in Your Node.js Applications
http://thisdavej.com/using-toml-config-files-in-node-js-applications/
In this article, we’ll learn how to use TOML, a rising star ⭐in the configuration file world, with Node.js. After reading this article, you will understand the TOML syntax including how to use it to model JavaScript objects in your Node applications.

Building a serverless real-time chat application with AWS AppSync
https://aws.amazon.com/blogs/mobile/building-a-serverless-real-time-chat-application-with-aws-appsync/
AWS AppSync, introduced at re:Invent 2017, is a fully managed GraphQL service. It makes it easy to build collaborative mobile and web applications that deliver responsive user experiences, and provide offline and real-time capabilities. Today, we’re introducing ChatQL, which is a new Angular Progressive Web App (PWA) starter application. Built with AWS AppSync, it showcases how to create a real-time chat application. In this blog post, we present an overview of the application, and dive into AWS AppSync and the front-end implementation.

10 Tips for Javascript Debugging Like a PRO with Console
https://medium.com/appsflyer/10-tips-for-javascript-debugging-like-a-pro-with-console-7140027eb5f6
Yes, we all know its basics: console.log(‘Hello World!’); So hopefully now, I can give you some tips which you didn’t know before, and which will make you a PRO debugger. 另附：Understanding and Debugging in NodeJS

Secure Access to 100 AWS Accounts
https://segment.com/blog/secure-access-to-100-aws-accounts/
Segment began in a single AWS account and last year finished our move to a dev, stage, prod, and “ops” accounts. For the past few months we’ve been growing at about one new AWS account every week or two, and plan to continue this expansion in to per-team and per-system accounts. Having many “micro-accounts” provides superior security isolation between systems, and reliability benefits by limiting the blast radius of AWS rate-limits.

HTTP Analytics for 6M requests per second using ClickHouse
https://blog.cloudflare.com/http-analytics-for-6m-requests-per-second-using-clickhouse/
In this blog post I’m going to talk about the exciting evolution of the Cloudflare analytics pipeline over the last year. I’ll start with a description of the old pipeline and the challenges that we experienced with it. Then, I’ll describe how we leveraged ClickHouse to form the basis of a new and improved pipeline. In the process, I’ll share details about how we went about schema design and performance tuning for ClickHouse. Finally, I’ll look forward to what the Data team is thinking of providing in the future.

Open-sourcing a 10x reduction in Apache Cassandra tail latency
https://engineering.instagram.com/open-sourcing-a-10x-reduction-in-apache-cassandra-tail-latency-d64f86b43589
Last year Instagram’s Cassandra team started working on a project to reduce Cassandra’s read latency significantly, which we call Rocksandra. In this post, I will describe the motivation for this project, the challenges we overcame, and performance metrics in both internal and public cloud environments.

Sin & Cos: The Programmer’s Pals!
http://www.helixsoft.nl/articles/circle/sincos.htm
In this article I shall discuss several game programming techniques, all revolving around a central theme: the sine and cosine functions. This article will explain sine, cosine, vectors, atan2, and some useful special effects such as how to make homing missiles and how bitmap rotation works. I shall start with the very basics, but later on I’ll cover some more advanced programming techniques.

The Future Of Mobile Web Design: Video Game Design And Storytelling
https://www.smashingmagazine.com/2018/03/future-mobile-web-design-video-game-design-storytelling/
As attention spans shorten and visitors just want to get to the good stuff on a website, designers have to get more creative in how they communicate their website’s “story.” Ideally, your web design will do more showing of that story instead of telling, which is how video game design tends to succeed in this matter.

Good to great UI animation tips
https://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5
Practical suggestions to improve your UI micro-interactions.

[译]魔镜魔镜快告诉我，谁才是最酷的设计趋势
https://mp.weixin.qq.com/s?__biz=MzI3MTQ2NzgwMw==&mid=2247487049&idx=1&sn=ee6002aced006c81ff0040e723f2c1a6
在2017年，我们可以看到移动端的设计变得越来越重要：我们倾向于认为2018年的这样的趋势将延续下去，使得例如响应式logo这样的元素对于设计师而言至关重要起来。我们也可能会看到充满活力和色彩鲜艳的定制的插画的运用，以及更多的充满自由创意的作品。2018年将是一个充满缤纷多彩和炫动元素的一年：听起来是不是很让人兴奋呢？

新鲜货

ECharts首进Apache孵化器
https://mp.weixin.qq.com/s?__biz=MzA4MjUyNjY3Nw==&mid=2649587423&idx=1&sn=4bdc73b5ba5c3541b998184aa8ac53e9
Apache基金会宣布“百度开源的ECharts项目全票通过进入Apache孵化器”。这是百度第一个进入国际顶级开源社区的项目，也标志着百度开源正式进入开源发展的快车道。另附百度近期开源的：https://github.com/brpc/braft An industrial-grade C++ implementation of RAFT consensus algorithm based on brpc, widely used inside Baidu to build highly-available distributed systems.

SlimerJS
https://slimerjs.org/
A scriptable browser for Web developers, which is compatible with Firefox 57, with a true headless mode! SlimerJS allows you to interact with a web page through an external JS script.

SwiftNIO
https://github.com/apple/swift-nio
SwiftNIO is a cross-platform asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. It’s like Netty, but written for Swift.

DoneJS 2.0 Released
https://www.bitovi.com/blog/donejs-2.0
DoneJS 2.0 is out bringing you the latest enhancements from CanJS 4.0, as well as streamlined Continuous Integration and Continuous Deployment with integrations with Travis CI, Heroku, and Firebase. Read to find out how DoneJS 2.0 will help you get your app done.

New in Chrome 65
https://developers.google.com/web/updates/2018/03/nic65
The CSS Paint API allows you to programmatically generate an image. The Server Timing API allows web servers to provide performance timing information via HTTP headers. the new CSS display: contents property can make boxes disappear! 另附：Release Notes for Safari Technology Preview 51

rename flatten to smoosh
https://github.com/tc39/proposal-flatMap/pull/56
A 8+year old versions of MooTools conditionally define an incompatible version of Array.prototype.flatten. See mootools/mootools-core/Source/Core/Core.js for the responsible code. In an attempt to turn a negative situation into a positive one, I am taking this opportunity to rename flatten to smoosh.

Frontend Case Studies
https://github.com/andrew–r/frontend-case-studies
Articles like “Building a simple todo list with [framework or technology name]” won’t teach you how that framework or technology solves real-world problems and works at a large scale. This document is a curated list of technical talks and articles about real-world enterprise frontend development.

PhantomJS: Archiving the project, suspending development
https://github.com/ariya/phantomjs/issues/15344
With that, all the earlier plans regarding PhantomJS 2.5 (from @Vitallium) or 2.1.x (from @pixiuPL) will be abandoned effective immediately. Consequently, the source and binary packages for the above abandoned version will be removed to avoid any confusions. PhantomJS version 2.1.1 will remain the last known stable release until further notice.

Version 3.0 of OpenPGPjs, an open source OpenPGP library
https://protonmail.com/blog/openpgpjs-3-release/
OpenPGP.js is a JavaScript implementation of the OpenPGP protocol.

Moleculer
https://moleculer.services/
Fast & powerful microservices framework for Node.js.

franc
https://github.com/wooorm/franc
Natural language detection.

Boxy SVG
https://boxy-svg.com/
Boxy SVG: A Web-Based SVG Editor

Upload anything, from anywhere
https://pqina.nl/filepond/
A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.

PROBOT
https://probot.github.io/
GitHub Apps to automate and improve your workflow. Use pre-built apps to extend GitHub, and easily build and share your own. 附：ionic team 用它处理 issue 的经验

Announcing Gloo: The Function Gateway
https://medium.com/solo-io/announcing-gloo-the-function-gateway-3f0860ef6600 Gloo is built on top of the Envoy Proxy. It provides a unified entry point for access to all services and serverless functions, translating from any client-facing API to any backend function. Gloo aggregates HTTP/REST APIs and events from clients, “glueing” together functions in-cluster, out of cluster, across clusters, along with any provider of serverless functions.

Clang is now used to build Chrome for Windows
http://blog.llvm.org/2018/03/clang-is-now-used-to-build-chrome-for.html As of Chrome 64, Chrome for Windows is compiled with Clang. We now use Clang to build Chrome for all platforms it runs on: macOS, iOS, Linux, Chrome OS, Android, and Windows. Tis post discusses numbers, motivation, benefits and drawbacks of using Clang instead of MSVC, how to try out Clang for Windows yourself, project history, and next steps.

产品及其它

[译]100 倍价值的工程师
http://blog.jobbole.com/113710/
工程师如何花同样的时间比其他人生产的价值多100倍：知道自己在做什么，不需要别人过多干预；不断对自己发出挑战，使工作更有效；一个人是无法成为100 倍价值工程师的，需要带动周围人一起提升生产力。

工程师职业发展规划指南
https://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2651001580&idx=1&sn=24c83c841723ef1ac730195691849931
社区中并不缺少有关软件工程师职业发展的文章，甚至可以说是泛滥。很多人都能在这个话题上说两句，三五年工作经验的编程老鸟也好，架构师也好，技术 VP 也好，CTO 也好，都有各自的看法与实践经验。没有哪一套方法是适用于所有人的，这一套开源的软件工程师职业发展纲要，也不过是在你踽踽前行的路上，迷茫时可用来参考借鉴。你的核心竞争力，永远是你的自身实力。切记！另附：谈谈如何做研究.

说实话，我没想到微信的笔记功能这么好用
https://zhuanlan.zhihu.com/p/34397177
对于微信的「收藏」功能，想必大家都不陌生：遇到一些重要信息，直接收藏保存，未来寻找的时候方便快捷。但是，很少有朋友知道，微信也可以做笔记，而且入口就在「收藏」里。另附腾讯产品相关：腾讯的设计到底好在哪？高手是从这3个维度分析的、不掌握这个神秘的思考方式，还想混互联网圈

抖音的野望，快手的危机
https://mp.weixin.qq.com/s?__biz=MzI2NTY4MDg1NA==&mid=2247490785&idx=1&sn=e73c013ad7243a233d0761f03f91f876
抖音的崛起，也许是过去几个月内的互联网世界中最值得关注的事件之一。而伴随着抖音的崛起，一定无法回避的另一个话题，必将是快手。如果说快手更贴近“生活”，那么抖音就更像一场“表演”。抖音和快手谁会笑到最后，成为中国的Instagram，是由中国广大人民群众的价值观决定的。另附：Facebook的近期调整，让我想起了快手

Touching the Virtual: How Microsoft Research is Making Virtual Reality Tangible
https://www.microsoft.com/en-us/research/blog/touching-virtual-microsoft-research-making-virtual-reality-tangible/ The Microsoft Research team – Mike Sinclair, Christian Holz, Eyal Ofek, Hrvoje Benko, Ed Cutrell, and Meredith Ringel Morris – have been exploring ways existing technology can generate a wide range of haptic sensations that can fit within hand-held VR controllers, similar in look and feel to those currently used by consumers, enabling users to touch and grasp virtual objects, feel the sliding of finger tips along surfaces and more. Their dream: today’s users interacting with the virtual digital world, more naturally, and in more ways than ever before.

– THE END –