FEX 技术周刊 - 2018/08/20

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

业界会议

中国首届React DEV Conf & FEDAY 2018
https://fequan.com/2018/
https://react.w3ctech.com/
可围观，期待会议资料。

深阅读

Who Left Open The Cookie Jar?
https://wholeftopenthecookiejar.eu/
As browsers have become enormously complex, certain edge-cases may have been overlooked or the interplay of specific features may have unwanted side-effects. In our research, we created a framework to verify whether all imposed cookie- and request-policies are correctly applied (will be made available soon). Worryingly, we found that most mechanisms could be circumvented: for instance for all ad-blocking and anti-tracking browser extensions we discovered at least one technique that could bypass the policies. For the technical details of these findings, we invite you to read our paper, which was presented at USENIX Security ’18.

Embedded builtins
https://v8project.blogspot.com/2018/08/embedded-builtins.html
V8 built-in functions (builtins) consume memory in every instance of V8. The builtin count, average size, and the number of V8 instances per Chrome browser tab have been growing significantly. This blog post describes how we reduced the median V8 heap size per website by 19% over the past year.

JavaScript engine fundamentals: optimizing prototypes
https://mathiasbynens.be/notes/prototypes
This article describes some key fundamentals that are common to all JavaScript engines — and not just V8, the engine the authors (Benedikt and Mathias) work on. As a JavaScript developer, having a deeper understanding of how JavaScript engines work helps you reason about the performance characteristics of your code.

Keep Betting on JavaScript by Kyle Simpson
https://www.youtube.com/watch?v=lDLQA6lQSFg
“Always bet on JavaScript”, revels in JS’s history of naysayers predicting that we’d eventually reach a point where JS couldn’t grow to meet the demands of modern development; it turns out those have always been bad bets. It’s safe to say JS is no longer trying to prove itself. It has arrived.

Principles of Modern Application Development
https://www.nginx.com/blog/principles-of-modern-application-development/
These principles can be summarized as keep it small, design for the developer, and make it networked. With these three principles, you can design a robust, complex application that can be delivered quickly and securely, scaled easily, and extended simply.

The 10:1 rule of writing and programming
https://www.ybrikman.com/writing/2018/08/12/the-10-to-1-rule-of-writing-and-programming/
Give that my data set is limited, I can only draw a few preliminary conclusions: The ratio of “raw materials” to “finished product” in a book is roughly 10:1. Keep this in mind the next time an editor asks you for a timeline! If you want to write a 300 page book, you’ll probably have to write around 3,000 pages. Similarly, the ratio of “code churn” to “lines of code” in mature and non-trivial software is also at least 10:1. Keep this in mind the next time a manager or customer asks you for a time estimate! To build a 10,000 line app, expect to write roughly 100,000 lines. These can be summarized as what I shall dub the 10:1 rule of writing and programming: Good software and good writing requires that every line has been rewritten, on average, at least 10 times.

前端下半场：构建跨框架的 UI 库
https://www.phodal.com/blog/build-cross-framework-ui-library/
跨框架的 UI 库，即前端 UI 库可以不经任何修改，直接能运行在 React、Angular、Vue 等框架上。

微前端的设计理念与实践初探
https://zhuanlan.zhihu.com/p/41879781
微服务与微前端，都是希望将某个单一的单体应用，转化为多个可以独立运行、独立开发、独立部署、独立维护的服务或者应用的聚合，从而满足业务快速变化及分布式多团队并行开发的需求。如康威定律(Conway’s Law)所言，设计系统的组织，其产生的设计和架构等价于组织间的沟通结构；微服务与微前端不仅仅是技术架构的变化，还包含了组织方式、沟通方式的变化。

聊聊Web中的度数单位
https://www.w3cplus.com/css/understanding-degrees-on-the-web.html
在现实世界中，度数几乎是测量角度的单位。它在Web中同样是一个受欢迎的角色，也适用于我们将遇到的各种场景。幸运的是，在现实世界中的度数和虚拟世界中的度数有很多相似之处，所以在这篇文章中将来学习一些有关于度数相关的知识，然后深入了解一些细节。

漫谈前端性能 突破 React 应用瓶颈
https://zhuanlan.zhihu.com/p/42032897
性能一直以来是前端开发中非常重要的话题。随着前端能做的事情越来越多，浏览器能力被无限放大和利用：从 web 游戏到复杂单页面应用，从 NodeJS 服务到 web VR/AR、数据可视化，前端工程师总是在突破极限。随之而来的性能问题有的被迎刃而解，有的成为难以逾越的盾墙。那么，当我们在谈论性能时，到底在说什么？基于 React 框架开发的应用，在性能上又有哪些特点？这篇文章我们从浏览器和 JavaScript 引擎角度来剖析前端性能，同时创新 React，充分利用浏览器能力突破局限。

洞察 video 超能力系列——玩转 flv
https://techblog.toutiao.com/2018/08/13/untitled-52/
flv的全程是 Flash Video，顾名思义，就是专门给flash播放器提供的播放格式，这种格式具有结构简单、清晰的优点，最早出现是为了解决flash导出的swf文件体积过大，不适合在web中播放的问题。随着flash的逐渐淘汰，新的video标签自然是不支持flv格式的，人们开始把web视频的重点放在mp4或者hls上，但是随着直播这种视频形式的火热兴起，flv迎来了新一轮的生机。

Simple internationalization of React apps
https://itnext.io/simple-internationalization-of-react-apps-34b3bda95725
react-intl is still a standard when it comes to i18n of React apps. Even though it haven’t been maintained for about a year, the community is so strong that it’s gaining on popularity and new independent tools are constantly being published. I would like to introduce you to alternative i18n solution I’ve been working on for the last year and a half — jsLingui. The low-level API is very similar to react-intl to make migration of my projects easier, but on top of that there’s a completely different developer experience.

Creating a Chrome extension in 2018: The good, the bad and the meh
https://checklyhq.com/blog/2018/08/creating-a-chrome-extension-in-2018-the-good-the-bad-and-the-meh/
We shipped an initial version of Puppeteer Recorder, a Google Chrome extension that records your browser interactions and generates a Puppeteer script. It turns out Chrome extension development is almost like real web development, but with a weird dash of quasi embedded development mixed in. This post talks you through the development lifecycle when creating an extension and lists some of the architectural gotcha’s. Source code for the extension in question is on github.

Browser painting and considerations for web performance
https://css-tricks.com/browser-painting-and-considerations-for-web-performance/
In this article, I’d like to focus on the last part: painting. All of those steps combined is a lot of work for a browser to do on load… and actually, not just on load, but any time the DOM (or CSSOM) is changed. That’s why many web developers tend to partially solve this by using some sort of frontend framework, such as React which, apart from many other advantages, can help to highly optimize changes in the DOM to avoid unnecessary recalculating or rendering.

Creating the “Perfect” CSS System
https://medium.com/gusto-design/creating-the-perfect-css-system-fa38f5bcdd9e
A high level guide for designers and developers who write CSS, but want to be more strategic about building moderate to large scale CSS systems.
另附：Everything You Need To Know About Alignment In Flexbox.

Cross-tab Synchronization with the Web Locks API
https://www.sitepen.com/blog/2018/08/14/cross-tab-synchronization-with-the-web-locks-api/
The Web Locks API is a new addition to the Web Platform which allows you to execute JavaScript in a lock, a resource which can potentially get shared with other browser tabs. Use cases which are suitable for the Web Locks API are the managing, coordinating, and syncing of multi-tab interactions. Currently, some or all of the Shared Web Worker, Broadcast Channel, Local Storage, Session Storage, Post Message & unload handler APIs can be used to manage tab communication and synchronization, however, they each have their drawbacks and require workarounds which decrease code maintainability.

Shadow DOM in Ionic (and Why it’s Awesome)
https://blog.ionicframework.com/shadow-dom-in-ionic-and-why-its-awesome/
I’d like to think we here at Ionic know a thing or two about Shadow DOM, as we recently made the move to using it in Ionic 4, and with that, received a lot of questions from the community on just what the heck it is. There’s a lot of information (and misinformation) floating around about Shadow DOM, so let’s go through the API and see what it actually does.

WebAssembly: How and why
https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71
How to run native code in the browser, why would you do that, and what does it all mean for JavaScript and the future of web development

Dweb: Building a Resilient Web with WebTorrent
https://hacks.mozilla.org/2018/08/dweb-building-a-resilient-web-with-webtorrent/
The web is healthy when the financial cost of self-expression isn’t a barrier. In this installment of the Dweb series we’ll learn about WebTorrent – an implementation of the BitTorrent protocol that runs in web browsers. This approach to serving files means that websites can scale with as many users as are simultaneously viewing the website – removing the cost of running centralized servers at data centers.

Introducing headless Chrome support in Cloud Functions and App Engine
https://cloud.google.com/blog/products/gcp/introducing-headless-chrome-support-in-cloud-functions-and-app-engine
We’re pleased to announce that the Google Cloud Functions and Cloud Functions for Firebase Node.js 8 runtimes have also been upgraded with the OS packages required to run headless Chrome. This means that you can now author Cloud Functions that use headless Chrome—and utilize all the features of a web browser in a fully serverless environment. Headless Chrome lets you take advantage of the modern web platform features from Chromium and the Blink rendering engine too.
另附：Puppeteer 1.7 Released.

Beyond Web and Worker: Evolution of the Modern Web App on Heroku
https://blog.heroku.com/modern-web-app-architecture
This is the first in a series of blog posts examining the evolution of web app architecture over the past 10 years. This post examines the forces that have driven the architectural changes and a high-level view of a new architecture. In future posts, we’ll zoom in to details of specific parts of the system.

How to Debug a Node.js app in a Docker Container
https://blog.risingstack.com/how-to-debug-a-node-js-app-in-a-docker-container/
While containerization, in general, is a very powerful tool - and here at RisingStack we always start new projects by spinning up the needed infrastructure in a docker-compose.yaml - it can be tricky to reach the enveloped Node process if you don’t know how to do it.

Serverless Docker Beta
https://zeit.co/blog/serverless-docker
The focus of our ZEIT Day Keynote this year was on the new capabilities of the Now cloud platform. In particular, we emphasized our focus on Serverless Docker Deployments. Today, we are announcing their availability as a public beta, which features: A 10x-20x improvement in cold boot performance, based on data from 1.5M+ deployments…
另附：CloudFlare JavaScript Workers and the Multicloud.

Beyond Interactive: Notebook Innovation at Netflix
https://medium.com/netflix-techblog/notebook-innovation-591ee3221233
Notebooks have rapidly grown in popularity among data scientists to become the de facto standard for quick prototyping and exploratory analysis. At Netflix, we’re pushing the boundaries even further, reimagining what a notebook can be, who can use it, and what they can do with it. And we’re making big investments to help make this vision a reality. In this post, we’ll share our motivations and why we find Jupyter notebooks so compelling. We’ll also introduce components of our notebook infrastructure and explore some of the novel ways we’re using notebooks at Netflix.

Maximizing Process Performance with Maze, Uber’s Funnel Visualization Platform
https://eng.uber.com/maze/
By applying Maze to the logs captured during driver sign-up, we can visualize the actual paths drivers take when signing up with Uber, and identify bottlenecks that occur in the process. Maze’s application at Uber has since expanded beyond the sign-up use case, and it is now used to visualize many processes—from rider pick-up and drop-off to user interactions with our website. Read on to learn how the Uber Visualization team developed Maze and why this new solution offers unparalleled insight into the Uber user experience.

Capturing Data Evolution in a Service-Oriented Architecture
https://medium.com/airbnb-engineering/capturing-data-evolution-in-a-service-oriented-architecture-72f7c643ee6f
Building Airbnb’s Change Data Capture system (SpinalTap), to enable propagating & reacting to data mutations in real time.

E-Commerce at Scale: Inside Shopify’s Tech Stack
https://shopifyengineering.myshopify.com/blogs/engineering/e-commerce-at-scale-inside-shopifys-tech-stack
Shopify is a multi-channel commerce platform for small and medium businesses that lets you create a shop and sell products wherever you want: online via web store or social media and offline with a POS card reader. Shopify powers 600K merchants and serves 80K requests per second at peak. While helping aspiring entrepreneurs to launch their stores, Shopify also holds some of the world’s largest sales for the Super Bowl, Kylie Cosmetics, and celebrities like Justin Bieber and Kanye West. These “flash sales” are tricky from an engineering point of view because of their unpredictably large volumes of traffic.

Cost of a Join
https://www.brianlikespostgres.com/
It depends! It depends what the join criteria is, what indexes are present, how big the tables are, whether the relations are cached, what hardware is being used, what configuration parameters are set, whether statistics are up-to-date, what other activity is happening on the system, to name a few things.

Universal Method to Sort Complex Information Found
https://www.quantamagazine.org/universal-method-to-sort-complex-information-found-20180813/
The nearest neighbor problem asks where a new point fits into an existing data set. A few researchers set out to prove that there was no universal way to solve it. Instead, they found such a way.

Dijkstra’s in Disguise
https://blog.evjang.com/2018/08/dijkstras.html
Dijkstra’s, Bellman-Ford, Johnson’s, Floyd-Warshall are good algorithms for solving the shortest paths problem. This blog post is a gentle tutorial on how all these varied CS topics are connected. No prior knowledge of finance, reinforcement learning, or computer graphics is needed. The reader should be familiar with undergraduate probability theory, introductory calculus, and be willing to look at some math equations. I’ve also sprinkled in some insights and questions that might be interesting to the AI research audience, so hopefully there’s something for everybody here.
另附：The Total Beginner’s Guide to Game AI.

新鲜货

GiuHub - Release Radar · July 2018
https://blog.github.com/2018-08-17-release-radar-july-2018/
July has come and gone, leaving a lot of exciting releases in its wake! It’s been an especially big month for people learning to program—we’re highlighting two releases that will help new programmers—but there’s something for everyone in this month’s Release Radar.

Front-End Performance Checklist
https://github.com/thedaviddias/Front-End-Performance-Checklist/
The only Front-End Performance Checklist that runs faster than the others. One simple rule: “Design and code with performance in mind”

JavaScript for impatient programmers
http://exploringjs.com/impatient-js/
Goal of this book: make JavaScript less challenging to learn for newcomers, by offering a modern view that is as consistent as possible. Highlights: Get started quickly, by initially focusing on modern features; Test-driven exercises and quizzes for most chapters; Covers all essential features of JavaScript, up to and including ES2018; Advanced sections occasionally let you dig deeper (if you want to); No prior knowledge of JavaScript is required, but you should know how to program.
另附：Learning Web Development in 2018.

Preventing downloading images or objects until they are visible in the viewport
https://github.com/whatwg/html/issues/2806
One solution to this is to have an attribute for declaring which images or objects should not be downloaded and decoded until they are visible in the viewport. For example, <img lazyload>.*. Alternatively, a meta element could be placed in the head to globally set all images and objects to only download once they are visible in the viewport.

bbx
https://bbxjs.github.io/
bbx 是一个极其简单高效的 React 状态管理方式。你可以很方便的使用 bbx 进行状态管理而不用太多的困扰，也就是说，要是你会 React，那就已经会使用 bbx 了。

Popmotion
https://popmotion.io/
Simple libraries for delightful interfaces.

Nano ID
https://github.com/ai/nanoid
A tiny, secure, URL-friendly, unique string ID generator for JavaScript. Safe: It uses cryptographically strong random APIs and tests distribution of symbols. Small: 145 bytes (minified and gzipped). No dependencies. It uses Size Limit to control size. Compact: It uses a larger alphabet than UUID (A-Za-z0-9_~). As result it could reduce ID size from 36 to 21 symbols.

Tone.js
https://github.com/Tonejs/Tone.js
A Web Audio framework for making interactive music in the browser.

Spacetime
https://github.com/spencermountain/spacetime
A lightweight javascript timezone library.

The Best JavaScript Data Visualization & Charting Libraries
https://www.codewall.co.uk/the-best-javascript-data-visualization-charting-libraries/
There are quite a few charting libraries around now, but which one’s are the best to use? This can depend on many things like business needs, type of data, purpose of the chart itself and many more. In this article, each JavaScript charting library will be compared with some key factors including chart types, commercial or free and open-source status. These beautiful libraries been analysed thoroughly with hands-on experience to maximize the very best comparison.
另附： Setosa - data visualization and visual explanations.

OpenPGPjs, has passed an independent security audit
https://protonmail.com/blog/openpgpjs-protonmail-security-audit/
As part of our commitment to open source, we maintain the OpenPGPjs encryption library. After some recent code enhancements, OpenPGPjs underwent an independent security audit, the results of which are discussed below.

Termgraph
https://github.com/mkaz/termgraph
A python command-line tool which draws basic graphs in the terminal.

Python Fire
https://github.com/google/python-fire
Python Fire is a library for automatically generating command line interfaces (CLIs) from absolutely any Python object.

git-bug
https://github.com/MichaelMure/git-bug
Distributed bug tracker embedded in Git.

设计

The easiest way to keep your web apps accessible: Just use text
https://blog.logrocket.com/the-easiest-way-to-keep-your-web-apps-accessible-c2b57506cc2a
Keeping increasingly complex web apps accessible is a necessity. Fortunately, there is one thing you can do to keep any web app accessible to as many users as possible, and lessen the burden of development and maintenance for yourself, too. Just use text.

Framer X — Initial Impressions
https://blog.prototypr.io/framer-x-initial-impressions-3402c20257e8
The power of code meets the power of design. Framer X, currently in invite only Beta, is the future of Framer(RIP). AND IT IS EXCITING!!! Apologies for the caps but it is indeed exciting and here’s why…

Living in Information, Responsible Design for Digital Places: a Book Excerpt
http://uxmag.com/articles/living-in-information-responsible-design-for-digital-places-a-book-excerpt
We are in the midst of a major social transformation — moving many of our day-to-day activities from physical places to information-based places that we experience on our phones and computers. The central question of this book is: How can we design these information environments so they serve our social needs in the long term?

How to design for (and with) developers
https://about.gitlab.com/2018/08/17/designing-for-developers/
Designers have a challenging task: Solve problems to empower users to do their best work. To understand how designers balance the demands of their roles as problem solvers with the evolving needs of an audience, I chatted with UX Manager Sarrah Vesselov about the considerations that go into designing for developers.

产品及其它

写给工程师的十条精进原则
https://tech.meituan.com/10_principles_for_engineers.html
“追求卓越”是美团的价值观。作为一名技术人员，我们应该如何践行呢？本文总结了十条精进原则，希望能够给大家带来一些启发，更好地指导我们的行动。

Make Something Great: Become an Open Source Contributor
https://alistapart.com/article/make-something-great-become-an-open-source-contributor
You may think that open source is not for you. After all, it has always been a developer-dominant ecosystem. But code is by no means the only thing a piece of software is made of. Open source is first and foremost about community. Whether you’re a designer, developer, writer, doctor, or lawyer, there are many paths to the open source world. Learn what you need to know to set out on your journey, from first steps to becoming a core contributor. It might change your career.

他把自己估值上万亿美元的项目免费化了
https://mp.weixin.qq.com/s?__biz=MzIyMTM5ODU4Nw==&mid=2247487419&idx=1&sn=9e9509c5b33d7e7eb893a67c161f6d7c
这个不起眼的小伙子叫萨尔曼·可汗（Salman Khan），今年39岁。他颠覆了美国教育，成为了数学教父，让数学老师不再讲课，比尔盖茨都捧着他。他成功登上了《福布斯》杂志封面，但是他却拒绝了10亿美元！

全面反思腾讯的战略
https://36kr.com/p/5148266.html
看待腾讯，有很多视角，今天我用的是数据与算法这个视角。数据与算法，以我对两者重要性的理解，我觉得是对一家互联网公司运营最高维度的抽象，这个视角过滤掉了许多喧嚣的表面因素和大量无关紧要的细枝末节，因而有可能是最接近本质的。我认为，从数据与算法的角度看，一个公司从小到大的进化过程，无非是在做两件事情，一是升级算法处理数据，二是获取更多的数据，而在这两方面，腾讯都做得不够好，它未来的进化之路就会困难重重。