FEX 技术周刊 - 2018/08/06

业界会议

中国首届React开发者大会

http://react.w3ctech.com

中国首届React开发者大会于2018年08月18日在广州举办。由w3ctech、前端圈主办。本次大会将邀请行业内知名讲师，与大家共聚广州，畅聊React。

第四届FEDAY

http://fequan.com/2018

大会将于2018.08.19，在广州嘉裕太阳城广场三楼金逸国际影城举办。来自全球、有极丰富经验和技能的前端专家，齐聚「花城」尽情畅谈交流。

深阅读

The Cost Of JavaScript In 2018

https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

Byte-for-byte, JavaScript is still the most expensive resource we send to mobile phones, because it can delay interactivity in large ways. Today we’ll cover some strategies you can use to deliver JavaScript efficiently while still giving users a valuable experience.

Introducing Fusion.js: A Plugin-based Universal Web Framework

https://eng.uber.com/fusionjs/

A little-known fact is that Uber builds a lot of web-based applications, hundreds of them and counting, in fact. Many of them are internal apps for managing various aspects of the business while others are public facing. A more well-known fact is that web technologies change quickly and best practices are constantly evolving. Providing a high quality framework with modern features to hundreds of web engineers while keeping up with the dynamic nature of the web platform has historically been a challenge. To address this challenge, Uber’s Web Platform team built Fusion.js, an open source web framework that makes web development easier and produces lightweight, high-performing apps.

A Look Ahead: Web Development Predictions

http://blog.wolksoftware.com/a-look-ahead-web-development-predictions

In this post, I would like to share some predictions about the world of web development. Making predictions is dangerous because there are high chances that they will be wrong. However, I enjoy thinking about the future because it is exciting and it can help us to identify potential future career opportunities. Remember that all innovations start as a fantasy.

React v16.4.2: Server-side vulnerability fix

https://reactjs.org/blog/2018/08/01/react-v-16-4-2.html

We discovered a minor vulnerability that might affect some apps using ReactDOMServer. We are releasing a patch version for every affected React minor release so that you can upgrade with no friction. Read on for more details.

Node.js：浅析高并发与分布式集群

https://zhuanlan.zhihu.com/p/41118827

虽然 Node 的单线程特性给其提供的服务带来了许多问题，但只要我们积极面对这些问题，用合理的方法（如使用 child_process 等模块或构建分布式集群）去解决他们，发挥 Node 的各种优势，就可以享受到它所带来的好处！

Node 案发现场揭秘 —— Coredump 还原线上异常

https://zhuanlan.zhihu.com/p/41178823

Node.js 发展到今天，已经被越来越广泛地应用到 BFF 前后端分离 、 全栈开发 、 客户端 工具 等领域。然而，相对于应用层的蓬勃发展，其 Runtime 对于绝大部分前端出身的开发者来说，处于黑盒的状态，这一点并没有得到很好的改善，从而也阻碍了 Node.js 在业务中的应用和推广。本文将介绍一种基于 Core dump 来分析定位线上应用故障的方法。

ProseMirror - 模块化的富文本编辑框架

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

ProseMirror 的实现介绍

Flexbox，终于可以承认自己明白了

https://mp.weixin.qq.com/s?__biz=MzA5NzkwNDk3MQ==&mid=2650587826&idx=1&sn=785aa994a3f046f55c21b2c147863967

Flex 针对容器的属性非常容易理解，而针对可伸缩项的属性则不好理解。更确切地说，是flex-grow、flex-shrink和flex-basis属性不好理解。只有理解了这三个属性，你才能说自己真正理解了Flexbox。

另附： What Happens When You Create A Flexbox Flex Container

Jenkins的Pipeline脚本在美团餐饮SaaS中的实践

https://tech.meituan.com/erp_cd_jenkins_pipeline.html

Jenkins构建也有很多种方式，现在使用比较多的是自由风格的软件项目（Jenkins构建的一种方式，会结合SCM和构建系统来构建你的项目，甚至可以构建软件以外的系统）的方式。针对单个项目的简单构建，这种方式已经足够了，但是针对多个类似且又存在差异的项目，就难以满足要求，否则就需要大量的job来支持，这就存在，一个小的变动，就需要修改很多个job的情况，难以维护。我们团队之前就存在这样的问题。本文是分享一种Pipeline的使用经验，来解决这类问题。

另附： Demo: GitLab + Jira + Jenkins

Google announces Grab and Go program for Chromebooks, powered by Angular

https://blog.angular.io/google-announces-grab-and-go-program-for-chromebooks-powered-by-angular-7954c11900bd

Last week at Google Cloud Next, the Grab and Go team showed off their newly announced Grab and Go program: a self service program for enterprises to automate managing Chromebook assets. An Angular application powers this program which automatically manages Chromebook assignments based on user logins. All of Google’s internal loaner Chromebook fleet is managed with this program, serving 30,000 unique users and over 100,000 loans last year.

另附： What’s New in WebStorm for Angular

The Web Push Checklist

https://www.ebayinc.com/stories/blogs/tech/the-web-push-checklist/

We used a checklist-based approach to enable Web Push. This checklist encapsulates our learnings and research to provide the best user experience when dealing with notifications. In this post, we will outline that checklist.

I created the exact same app in React and Vue. Here are the differences

https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-e9a1ae8077fd

I’d read the React docs and watched a few tutorial videos and, while they were great and all, what I really wanted to know was how different React was from Vue. By “different”, I didn’t mean things such as whether they both had virtual DOMS or how they went about rendering pages. I wanted someone to take the time to explain the code and to tell me what was going on! I wanted to find an article that took the time to explain these differences so that someone new to either Vue or React (or Web Development as a whole) could gain a better understanding of the differences between the two.

Node.js Best Practices

https://github.com/i0natan/nodebestpractices

The largest Node.JS best practices list. 附： We’re under attack! 23+ Node.js security best practices

Introducing Clinic Bubbleprof, a unique way to visualise Node.js code

https://www.nearform.com/blog/introducing-clinic-bubbleprof-a-unique-way-to-visualise-node-js-code/

In a nutshell, Bubbleprof observes the async operations of your application, groups them, measures their delays, and draws a map of the delays in your application’s async flow. The real power of the tool was demonstrated recently where it uncovered inefficiencies in both the Fastify web framework and in Node.js Core itself! The team has written a deep-dive blogpost into the features, technology and usage of Bubbleprof. In this post I want to cover some high level topics.

What Do You Need To Know When Converting A Flash Game Into HTML5

https://www.smashingmagazine.com/2018/07/converting-flash-game-html5/

The tips presented in this article aim to help HTML5 game developers in avoiding common mistakes when converting their Flash games to JavaScript, as well as making the whole development process run as smooth as possible. Basic knowledge of JavaScript, WebGL, and the Phaser framework is required.

Xamarin vs React Native: the complete guide

https://www.uruit.com/blog/2018/07/25/xamarin-vs-react-native/

Tips for selecting the ideal cross-platform mobile development framework for your project.

How we scaled nginx and saved the world 54 years every day

https://blog.cloudflare.com/how-we-scaled-nginx-and-saved-the-world-54-years-every-day/

10 million websites, apps and APIs use Cloudflare to give their users a speed boost. At peak we serve more than 10 million requests a second across our 151 data centers. Over the years we’ve made many modifications to our version of NGINX to handle our growth. This is blog post is about one of them.

SQL vs. Flux: Choosing the right query language for time-series data

https://blog.timescale.com/sql-vs-flux-influxdb-query-language-time-series-database-290977a01a8a

An examination of the strengths and weaknesses of SQL, and why query planners exist, by way of comparing TimescaleDB and InfluxDB.

另附： QLoo Creates GraphQL Interface for Existing Services

R generation

https://rss.onlinelibrary.wiley.com/doi/10.1111/j.1740-9713.2018.01169.x

The story of a statistical programming language that became a subcultural phenomenon.

Go 1.11 Modules

https://github.com/golang/go/wiki/Modules

Go 1.11 will add preliminary support for versioned modules as proposed here. Go modules will be an experimental opt-in feature in Go 1.11, with the hope of incorporating feedback and finalizing the feature for Go 1.12. Even though the details may change, future releases will support modules defined using Go 1.11 or vgo.

新鲜货

Ant Design 3.8.0

https://github.com/ant-design/ant-design/releases/tag/3.8.0

另附： RSUITE 3.2.3

Announcing TypeScript 3.0

https://blogs.msdn.microsoft.com/typescript/2018/07/30/announcing-typescript-3-0/

Which brings us to TypeScript 3.0! Despite the new big number, 3.0 has few breaking changes (meaning it should be very easy to upgrade) and introduces a new flexible and scalable way to structure your projects, powerful new support for operating on parameter lists, new types to enforce explicit checks, better JSX support, an overall better error UX, and much more! 附： 译文

Filament - Physically-based rendering engine

https://google.github.io/filament/Filament.md.html

Filament is a physically based rendering (PBR) engine for Android. The goal of Filament is to offer a set of tools and APIs for Android developers that will enable them to create high quality 2D and 3D rendering with ease.

Introducing the Dweb

https://hacks.mozilla.org/2018/07/introducing-the-d-web/

The “d” in “dweb” usually stands for either decentralized or distributed. What is the difference between distributed vs decentralized architectures?

另附： You can now access a decentralized version of Archive.org 、 Chrome 69 Beta: CSS tricks, and more 、 Release Notes for Safari Technology Preview 62

Announcing GitHub Desktop 1.3

https://blog.github.com/2018-07-30-github-desktop-1.3/

With the GitHub Desktop 1.3 release, you’ll be notified when your branch diverges from your repository’s default branch.

Istio reaches 1.0: ready for prod

https://cloudplatform.googleblog.com/2018/07/istio-reaches-1-0-ready-for-prod.html

The Istio open-source project has reached the 1.0 milestone. This is a key step toward delivering the Cloud Services Platform that we discussed last week, helping you manage your services in a hybrid world where some of your infrastructure runs on VMs and some in Kubernetes, some services run in the cloud and some on-premises. 另附： Celebrating Istio service mesh project at 1.0 and what it means for the Kubernetes community .

Removing Babel’s Stage Presets

https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

Moving forward with v7, we’ve decided it’s best to stop publishing the Stage presets in Babel (e.g. @babel/preset-stage-0). We didn’t make this decision lightly and wanted to show the context behind the interplay between TC39, Babel, and the community.

Webix

https://webix.com/

JavaScript UI library for speeding up web development. 97 UI widgets and feature-rich CSS / HTML5 JavaScript controls.

Js13kGames - 2018

http://2018.js13kgames.com/

Js13kGames is a JavaScript coding competition for HTML5 Game Developers. The fun part of the compo is the file size limit set to 13 kilobytes. The competition will start at 13:00 CEST, 13th August and will end at 13:00 CEST, 13th September 2018. Theme for 2018 will be announced on 13th August.

Gio.js

https://github.com/syt123450/giojs

Gio.js is an open source library for web 3D globe data visualization built with Three.js. What makes Gio.js different is that it is simple to use Gio.js to customize a 3D data visualization model in a declarative way, add your own data, and integrate it into your own modern web application.

7 Javascript EEG Mind Reading Libraries for 2018

https://blog.bitsrc.io/7-javascript-eeg-mind-reading-libraries-for-2018-9a8e28544cd7

Useful JS libraries for exploring human-brain signals and reading people’s minds.

Vialer-js - Pluggable WebRTC communication platform

https://vialer-js.io/

Vialer-js is a free and open-source communication platform in development. It’s purpose is to be an attractive unified communication tool to end-users, who value cross-platform user- and privacy-friendly features, like being able to accept and place calls over a phone network, setting up (p2p) video conferences, chatting and sharing files; all over secured encrypted channels.

UPASH - Unified API for password hashing algorithms

https://github.com/simonepri/upash

The upash (pronounced u-pash) project aims is to allow you to have a clean and easy-to-use API to use any password hashing algorithm seamlessly in your application.

ApexCharts.js

https://github.com/apexcharts/apexcharts.js

A modern JavaScript charting library to build interactive charts and visualizations with simple API.

between.js

https://github.com/apexcharts/apexcharts.js

Lightweight JavaScript (ES6) tweening library.

Refresh - A fresh approach to the browser

https://refresh.study/

It’s a collection of ideas for a modern web browser for touchscreen devices based on iOS Safari. The prototypes we developed are all designed for iPad but their concepts could apply to desktop and smaller touchscreens as well.

Code With Mu

https://codewith.mu/en/

Mu is a Python code editor for beginner programmers based on extensive feedback given by teachers and learners.

另附： Django 2.1 release notes

Netlify CMS

https://www.netlifycms.org/

Open source content management for your Git workflow. Use Netlify CMS with any static site generator for a faster and more flexible web project.

CIP：延续 Linux 之光

https://linux.cn/article-9896-1.html

CIP 的目标是创建一个基本的系统，使用开源软件来为我们现代社会的基础设施提供动力。

Google’s New Book: - The Site Reliability Workbook

http://highscalability.com/blog/2018/7/25/googles-new-book-the-site-reliability-workbook.html

Freely downloadable until August 23 download , this new book is packed with concrete examples and case studies of putting SRE principles and practices to work.

设计

Framer X - Interactive Design for Everyone

https://framer.com/x

Framer X has all the features you need to draw everything from custom icons to intricate illustrations. Fine-tune your designs with our advanced path editor, export anything from your canvas, and more.

Learning From Terminals to Design the Future of User Interfaces

https://brandur.org/interfaces

A successful interface isn’t one that looks good in a still screenshot, it’s one that maximizes our productivity and lets us keep moving. Legibility and whitespace are great, but they’re of vanishing unimportance compared to speed and responsiveness. Neither a terminal nor today’s web apps are what the future should look like, but the terminal is closer.

Your Friendly Guide to Colors in Data Visualisation

https://blog.datawrapper.de/colorguide/

That was more than two years ago. Since then, great people have released greater tools, and I can write more confidently about colors. It’s time for an update! I tried to stay as close to the original post as possible and just update screenshots and improve explanations. Here we go.

另附： An argument for incorporating color early on in UX design .

The Rules of Effective UX Writing

https://blog.marvelapp.com/rules-of-effective-ux-writing/

UX writing is the practice of crafting UI copy that guides users within a product and helps them interact with it. UI copy includes buttons and menu labels, error messages, security notes, terms and conditions, as well as any instructions on product usage. The primary aim of UX writing is to settle communication between users and a digital product. In this article, I’ll provide some practical tips on effective UX writing.

另附： The ROI of UX writing .

Storybook by React — Design System Development

https://blog.prototypr.io/storybook-by-react-design-system-development-shopmatic-58b718e91fee

Design systems are a collaborative bridge between designers and engineers. The efficiency of project development helps business testing, and the world of business is not about precision, but to speed up testing and adjust direction at any time.

Designing a complex table for mobile consumption

https://uxdesign.cc/designing-a-complex-table-for-mobile-consumption-nom-7472f7b11fe6

When faced with overwhelming content, focusing on user behavior can help define the design approach.

产品及其它

Learning Dexterity

https://blog.openai.com/learning-dexterity/

We’ve trained a human-like robot hand to manipulate physical objects with unprecedented dexterity. Our system, called Dactyl, is trained entirely in simulation and transfers its knowledge to reality, adapting to real-world physics using techniques we’ve been working on for the past year. Dactyl learns from scratch using the same general-purpose reinforcement learning algorithm and code as OpenAI Five. Our results show that it’s possible to train agents in simulation and have them solve real-world tasks, without physically-accurate modeling of the world.

How Technology Grows (a restatement of definite optimism)

https://danwang.co/how-technology-grows/

I submit that we have two big biases when we talk about technology. First, we think about it too much in terms of tools and recipes, when really we should think about it more in terms of process knowledge and technical experience. Second, most of us focus too much on the digital world and not enough on the industrial world. Our obsession with the digital world has pushed our expectation of the technological future in the direction of cyberpunk dystopia; I hope instead that we can look forward to a joyful vision of the technological future, driven by advances in industry. This is one of my longer essays; the final section summarizes the main points.

创业六年,今日头条做了什么

https://mp.weixin.qq.com/s?__biz=MzI2NTY4MDg1NA==&mid=2247493293&idx=1&sn=71ef82bed1cbc5ea85f815d6041d62d4

当我们提起今日头条的时候，大多数人会聊他算法推荐的优势，会聊起他与腾讯之间的纷纷扰扰以及张一鸣那句：“创立今日头条不是为了成为“腾讯”的员工。”但实际上，很少有人细致的研究过今日头条在发展历程中的一些特点，以及那套支持头条高速成长的产品方法论。

万亿美元市值背后：以产品和用户为先，永远忠于苹果认定的价值观

http://www.geekpark.net/news/231659

财务业绩的回报只是苹果不断努力创新的副产品，我们应该以产品和用户为先，并永远忠于苹果认定的价值观。史蒂夫秉承着「人的创造力可以战胜任何挑战」这一理念创立了苹果，那些足够疯狂的人，疯狂到认为可以改变世界的人也的确做到了改变世界。如今，我们肩负着更重要的使命。我们的产品不仅为人们带来了惊喜和欢愉，还丰富了全球各地人们的生活。就像史蒂夫曾经做的，我们应该一起展望苹果的未来，全力以赴，携手前进。

– THE END –