FEX 技术周刊 - 2018/11/05

业界会议

React Conf 2018

https://conf.reactjs.org/

附： 会议资料 、 React Conf recap: Hooks, Suspense, and Concurrent Rendering .

深阅读

V8 release v7.1

https://v8.dev/blog/v8-release-71

V8 v7.1 is filled with all sorts of developer-facing goodies. This post provides a preview of some of the highlights in anticipation of the release.

React Native - Open Source Roadmap

http://facebook.github.io/react-native/blog/2018/11/01/oss-roadmap

This year, the React Native team has focused on a large scale re-architecture of React Native. As Sophie mentioned in her State of React Native post, we’ve sketched out a plan to better support the thriving population of React Native users and collaborators outside of Facebook. It’s now time to share more details about what we’ve been working on. Before I do so, I’d like to lay out our long-term vision for React Native in open source. 附： React Native重构路线图发布 .

Making Sense of React Hooks

https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889

Hooks are an experimental proposal to React. You don’t need to learn about them right now. Also, note that this post contains my personal opinions and doesn’t necessarily reflect the positions of the React team. 另附： What and How to Test with Jest and Enzyme .

An Annotated webpack 4 Config for Frontend Web Development

https://nystudio107.com/blog/an-annotated-webpack-4-config-for-frontend-web-development

As web devel­op­ment becomes more com­plex, we need tool­ing to help us build mod­ern web­sites. Here’s a com­plete real-world pro­duc­tion exam­ple of a sophis­ti­cat­ed web­pack 4 config. Build­ing a mod­ern web­site has become cus­tom appli­ca­tion devel­op­ment. Web­sites are expect­ed to do more than just be mar­ket­ing sites as they take on the func­tion­al­i­ty of tra­di­tion­al apps. Any time a process becomes com­pli­cat­ed, we break it down into man­age­able com­po­nents, and auto­mate the build process with tool­ing. This is the case in whether we are man­u­fac­tur­ing cars, draft­ing legal doc­u­ments, or build­ing websites.

The Definitive TypeScript Guide

https://www.sitepen.com/blog/2018/10/29/update-the-definitive-typescript-guide/

This article describes the features and functionality of TypeScript 3.1.

Splicing HTML’s DNA With CSS Attribute Selectors

https://www.smashingmagazine.com/2018/10/attribute-selectors-splicing-html-dna-css/

Attribute selectors are magical. They can get you out of sticky problems, help you avoid adding classes and point out some problems in your code. But don’t worry, while attribute selectors are complex and powerful, they’re easy to learn and easy to utilize. In this article, we’ll discuss how they operate and give you some ideas about how to use them.

克军：如何成为一位优秀的前端工程师

https://www.weibo.com/ttarticle/p/show?id=2309404300456787613157

有很多关于成长的建议，值得拜读和实践。

富文本编辑器的技术演进之路

https://mp.weixin.qq.com/s?__biz=MzU0Nzk1MTg5OA==&mid=2247484137&idx=1&sn=8dc25f8de7d359549520c9f198721408

浏览器提供了两个原生特性：contenteditable、document.execCommand()，contenteditable 特性，可以指定某一容器变成可编辑器区域，即用户可以在容器内直接输入内容，或者删减内容。execCommand API，可以对选中的某一段结构体，执行一个命令，譬如赋予黑体格式。基于以上，可以做出最简单的富文本编辑器。原来富文本编辑器是这么简单？当然不止如此简单！另附： [译]为数字优先新闻编辑室开发文本编辑器 .

Atag - Web Components 最佳实践

http://taobaofed.org/blog/2018/10/31/a-tag/

过去一段时间，我一直在使用 Web Components 构建淘宝小程序的 基础组件 Atag。这篇文章的目的，是希望总结在 Atag 开发阶段中使用 Web Components 的经验，避免大家踩坑。另附： October 2018: A Big Month for Web Components .

蚂蚁金服移动开发平台mPaaS

https://juejin.im/post/5bd81cf2f265da0ab674096c

Android 拆分项目的方案

Web Performance 101

https://3perf.com/talks/web-perf-101/

This is an introduction to the modern web loading performance. Learn why performance is important, what performance optimizations exist and what tools help to understand if your app is doing well.

You Might Not Need JavaScript

http://youmightnotneedjs.com/

JavaScript is great, and by all means use it, while also being aware that you can build so many functional UI components without the additional dependancy. Maybe you can include a few lines of utility code, or a mixin, and forgo the requirement. If you’re only targeting more modern browsers, you might not need anything more than what the browser ships with. We take a look at the power of modern native HTML and CSS as well as some of the syntactic sugar of Sass. Because, you might not need scripts for that task at all!

Creating a QR Code step by step

https://www.nayuki.io/page/creating-a-qr-code-step-by-step

This JavaScript demo application visualizes in detailed steps, how a text string is encoded into a QR Code barcode symbol. The content of this page essentially explains and justifies how my QR Code generator library works internally.

GraphQL - The Good and the Bad

https://scotch.io/tutorials/graphql-the-good-and-the-bad

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API as well as gives clients the power to ask for exactly what they need and nothing more. It makes it easier to evolve APIs over time and enables powerful developer tools. At least that’s what we all know it to be. In this post, we’ll look at all the wonderful things about GraphQL and also look at the unpopular “not so good” things about it. 另附： GraphQL Server Design @ Medium .

Best Practices for Setting SLOs and SLIs For Modern, Complex Systems

https://blog.newrelic.com/engineering/best-practices-for-setting-slos-and-slis-for-modern-complex-systems/

At New Relic, defining and setting Service Level Indicators (SLIs) and Service Level Objectives (SLOs) is an increasingly important aspect of our site reliability engineering (SRE) practice. It’s not news that SLIs and SLOs are an important part of high-functioning reliability practices, but planning how to apply them within the context of a real-world, complex modern software architecture can be challenging, especially figuring out what to measure and how to measure it. In this post, we’ll use a highly simplified version of New Relic’s architecture to walk you through some concrete, practical examples of how we define and measure SLIs and SLOs for our own modern software platform.

API Profiling at Pinterest

https://medium.com/@Pinterest_Engineering/api-profiling-at-pinterest-6fa9333b4961

When I walked into Pinterest on the first day of my internship and learned I’d be focusing on profiling the API Gateway service — the core backend service of the Pinterest product — my only thought was “What is profiling?”. Profiling is often shoved aside as a side project or as a lower priority concern, and not one typically taught in my college CS courses. Essentially, the services come first, and profiling of is a far second.

Node.js Everywhere with Environment Variables!

https://medium.com/the-node-js-collection/making-your-node-js-work-everywhere-with-environment-variables-2da8cdf6e786

This post walks you through creating and using environment variables, leading to a Node.js app you can run anywhere.

NGINX Unit Now Supports TLS and JavaScript Apps with Node.js

https://www.nginx.com/blog/nginx-unit-1-5-available-now/

In this post we cover the configuration of TLS certificates and Node.js applications in detail.

October 21 post-incident analysis

https://blog.github.com/2018-10-30-oct21-post-incident-analysis/

GitHub experienced an incident that resulted in degraded service for 24 hours and 11 minutes. While portions of our platform were not affected by this incident, multiple internal systems were affected which resulted in our displaying of information that was out of date and inconsistent. Ultimately, no user data was lost; however manual reconciliation for a few seconds of database writes is still in progress. For the majority of the incident, GitHub was also unable to serve webhook events or build and publish GitHub Pages sites. 另附： Github - Game Off 2018 theme announcement .

Why we use Ruby on Rails to build GitLab

https://about.gitlab.com/2018/10/29/why-we-use-rails-to-build-gitlab/

Here’s our CEO on GitLab’s inception using Rails, and how challenges are being handled along the way. 另附： How do we handle engineering-led issues that don’t belong to one team? .

Why Jupyter is data scientists’ computational notebook of choice

https://www.nature.com/articles/d41586-018-07196-1

For data scientists, Jupyter has emerged as a de facto standard, says Lorena Barba, a mechanical and aeronautical engineer at George Washington University in Washington DC. Mario Jurić, an astronomer at the University of Washington in Seattle who coordinates the LSST’s data-management team, says: “I’ve never seen any migration this fast. It’s just amazing.”

The differing definitions of “serverless”

https://winterwindsoftware.com/serverless-definitions/

A serverless solution is one where developers are freed up to focus more on application development without needing to worry about provisioning, scaling or maintaining servers (or containers), and whose running costs are proportional to the system’s usage levels.

A Look at the Design of Lua

https://cacm.acm.org/magazines/2018/11/232214-a-look-at-the-design-of-lua/fulltext

Though mainly a procedural language, Lua lends itself to several other paradigms, including object-oriented programming, functional programming, and data-driven programming.5 It also offers good support for data description, in the style of JavaScript and JSON. Data description was indeed one of our main motivations for creating Lua, some years before the appearance of XML and JavaScript. 另附： A Philosophy of Software Design .

新鲜货

Carlo: Web rendering surface for Node applications by Google Chrome

https://github.com/GoogleChromeLabs/carlo

Carlo provides Node applications with the rich rendering capabilities powered by the Google Chrome browser. It uses Puppeteer project to communicate with the locally installed browser instance, provides remote call infrastructure for communication between Node and the browser.

Facebook open-sources new suite of Linux kernel components and tools

https://code.fb.com/open-source/linux/

We are announcing a suite of open source Linux kernel components and related tools that address critical fleet management issues. These include resource control, resource utilization, workload isolation, load balancing, measuring, monitoring, and much more.

Storybook 4.0 is here!

https://medium.com/storybookjs/storybook-4-0-is-here-10b9857fc7de

Storybook 4.0 (SB4) supports six new view layers and introduces improvements at every level: View layers: Ember, MarkoJS, Mithril, HTML, Svelte, Riot; Build: Webpack 4, Babel 7; Mobile: React Native, Mobile device view; UI: Theming; Core: Story parameters.

The CSS Working Group At TPAC: What’s New In CSS?

https://www.smashingmagazine.com/2018/10/tpac-css-working-group-new/

Last week, Rachel Andrew attended the CSS Working Group meeting at W3C TPAC, and rounds up some of the discussions in this post — including those things where you can help make a decision.

Foundation 6.5.0 Released

https://medium.com/@ncoden/foundation-6-5-0-released-f405d8561ed7

Foundation 6.5 in a few words: Over 100 bugs fixed, more customization, more accessible and better supported!

Google 万圣节小游戏

https://www.google.com/doodles/halloween-2018

Today’s annual Halloween Doodle marks a wickedly exciting milestone: our first-ever multiplayer interactive game Doodle, powered by Google Cloud! Join in as ghosts around the world gather to play their own version of Trick-or-Treat: The Great Ghoul Duel! Ghosts team up and compete to see who can collect the most wandering spirit flames before the moon is gone….but not without some unexpected twists along the way.

JavaScript Visualizer

https://tylermcginnis.com/javascript-visualizer/

A tool for visualizing Execution Context, Hoisting, Closures, and Scopes in JavaScript.

libreact

https://github.com/streamich/libreact

React 工具类库.

Create React App 2.1

https://github.com/facebook/create-react-app/releases/tag/v2.1.0

Create React App 2.1 adds support for TypeScript! New applications can be created using TypeScript by running: $ npx create-react-app my-app --typescript

React Material Web Components

https://jamesmfriedman.github.io/rmwc/

A React wrapper for Google’s official Material Components for the Web.

React SimpleMDE Markdown Editor

https://github.com/RIP21/react-simplemde-editor

React wrapper for simplemde markdown editor: https://github.com/sparksuite/simplemde-markdown-editor.

howler.js - JavaScript audio library for the modern web

https://howlerjs.com/

howler.js makes working with audio in JavaScript easy and reliable across all platforms.

Ervy - Bring charts to terminal

https://www.chunqiuyiyu.com/ervy/#started

Why build this: There is no special reason, just because I love terminal and ASCII art. It’s very cool! Hope you enjoy Ervy and make your terminal more beautiful.

simple-keyboard

https://virtual-keyboard.js.org/

Meet the slick virtual keyboard for Javascript. Compatible with your ES6, React, Vue, Angular or jQuery projects.

SimpleBar

https://github.com/Grsmto/simplebar

Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.

Introducing AloeStackView for iOS

https://medium.com/airbnb-engineering/introducing-aloestackview-for-ios-a676d253c6ba

A simple, open source class for laying out a collection of views with a convenient API.

DeepCreamPy

https://github.com/deeppomf/DeepCreamPy

Decensoring Hentai with Deep Neural Networks. Formerly named DeepMindBreak. A deep learning-based tool to automatically replace censored artwork in hentai with plausible reconstructions. The user specifies the censored regions in each image by coloring those regions green in a separate image editing program like GIMP or Photoshop. A neural network handles the hard part of filling in the censored regions.

Algojammer

https://github.com/ChrisKnott/Algojammer

Algojammer is an experimental, proof-of-concept code editor for writing algorithms in Python. It was mainly written to assist with solving the kind of algorithm problems that feature in competitions like Google Code Jam, Topcoder and HackerRank.

谷歌最强NLP模型BERT开源

https://mp.weixin.qq.com/s/xch7eJoqa9BUCEG-mgxQDA

https://github.com/google-research/bert#fine-tuning-with-bert

BERT全称Bidirectional Encoder Representations from Transformers，是预训练语言表示的方法，可以在大型文本语料库（如维基百科）上训练通用的“语言理解”模型，然后将该模型用于下游NLP任务，比如机器翻译、问答。BERT是第一个无监督的用于预训练NLP的深度双向系统。无监督意味着BERT仅使用文本语料库进行训练，也就是说网络上有大量多种语言文本数据可供使用。另附： Google - Introducing AdaNet: Fast and Flexible AutoML with Learning Guarantees 、 DeOldify - A Deep Learning based project for colorizing and restoring old images .

Introducing reCAPTCHA v3: the new way to stop bots

https://webmasters.googleblog.com/2018/10/introducing-recaptcha-v3-new-way-to.html

In reCAPTCHA v3, we are introducing a new concept called “Action”—a tag that you can use to define the key steps of your user journey and enable reCAPTCHA to run its risk analysis in context.

NixOS - The Purely Functional Linux Distribution

https://nixos.org/

NixOS is a Linux distribution with a unique approach to package and configuration management. Built on top of the Nix package manager, it is completely declarative, makes upgrading systems reliable, and has many other advantages.

设计

Your Face Here - Creating illustration guidelines for a more inclusive visual identity

https://medium.com/dropbox-design/4-ways-to-show-the-value-of-ux-writing-4369d84a6afd

One of my career goals is to elevate the quality of illustration in tech. Airbnb’s design brand is a harmony of many disciplines—a chorus of experience and motion design, photography, writing, data visualization, and illustration. When I joined the team in October of 2017, I was given the opportunity to redesign Airbnb’s illustration style as a key component of our core identity system. Here’s how my journey unfolded.

From URL to Interactive

https://alistapart.com/article/from-url-to-interactive

Imagine, if you will, that you’re behind the wheel of a gorgeous 1957 Chevy Bel Air convertible, making your way across the desert on a wide open highway. The sun is setting, so you’ve got the top down, naturally. The breeze caresses your cheek like a warm hand as your nose catches a faint whiff of … What was that?

Why you should stop being a UI designer

https://uxdesign.cc/why-you-should-stop-being-a-ui-designer-and-become-a-ui-redesigner-instead-9a08b8ec0186

Designers need to stop viewing themselves as “creators” and wear the “rebuilders” hat, in order to have a better understanding of their product.

Designing an Enterprise Application

https://www.lollypop.design/blog/2018/october/designing-an-enterprise-application/

Designing an enterprise app is complex and requires stitching hundreds of separate requirements together to produce a product that is functional, assistive and delightful, all at the same time. Though it sounds really easy, in practice it is an extremely gruesome process and every designer that opts to be part of an enterprise app designing process should understand in entirety the commitment, patience, and endless hours it requires.

产品及其它

Father of Web says tech giants may have to be split up

https://www.reuters.com/article/us-technology-www/father-of-web-says-tech-giants-may-have-to-be-split-up-idUSKCN1N63MV

Tim Berners-Lee, a London-born computer scientist who invented the Web in 1989, said he was disappointed with the current state of the internet, following scandals over the abuse of personal data and the use of social media to spread hate. “What naturally happens is you end up with one company dominating the field so through history there is no alternative to really coming in and breaking things up,” Berners-Lee, 63, said in an interview. “There is a danger of concentration.”

专访 Bear - Markdown 笔记应用

https://sspai.com/post/47756

说起 Markdown 写作工具，Bear 可能并不如它的前辈像 Ulysses 等那么有名，但是凭借足够简洁的设计和足够优秀的写作体验，Bear 依然在一经推出就收获了大量的好评和忠实用户，并在去年获得了Apple Design Awards 年度设计大奖。另附： MarkEditor 2.0：让文字变成你想要的样子 .

互联网考古地图

https://www.huxiu.com/article/269319.html

在关于互联网的早期历史方面，我最近看到一份资料，集合了过去二十多年关于互联网的所有较为知名的创意。它所提及的 100 个网站，曾经在全球范围内获得广泛的影响力，很有群众基础，相当值得研究。这种“考古”工作有价值的一点大概在于，当年互联网还非常稚嫩的时候，是活生生的、各式各样有趣的人创造了经典，他们尝试过、努力过、也遗憾过，是他们塑造了今天的互联网。

曾鸣新作出版 - 智能商业

https://mp.weixin.qq.com/s?__biz=MzI0NzY3Mjc0Mw==&mid=2247484764&idx=1&sn=81480a112e07c6c064a3bff5c60ffd54

曾鸣教授在本书中做出对未来的预判：未来的商业必然是智能商业。让更多对未来的思考关照到当下的商业世界。附： 大仗的打法——推荐《智能商业》曾鸣的战略格局 、 追赶者：零售之王二十年 - 招商银行的故事 。

你可能没读懂的金庸文学伟业

https://mp.weixin.qq.com/s?__biz=MzA4NDEzNTMyMA==&mid=2650318284&idx=1&sn=b1cd2fb2b21c2169be7bd96d8ec0d0a1

金庸在文学上的最高成就，我认为是他不但塑造了一大批一流的文学人物，而且居然用武侠小说这种超级不严肃的东西，进行了最庄严的文学探讨，开展了触及人类灵魂的叩问。而在这种叩问之中，竟然还穿插着神奇瑰丽的想象世界，风光旖旎的爱情，热血激昂的侠义精神。另附： 金庸与科技圈的不解之缘 .

– THE END –