FEX 技术周刊 - 2018/07/02

深阅读

JavaScript Usage by Industry
https://blog.npmjs.org/post/175311966445/javascript-usage-by-industry
We’re continuing our analysis of the results of last winter’s JavaScript Ecosystem Survey, a survey of over 16,000 developers conducted by npm in collaboration with the Node.JS Foundation and the JS Foundation. Our second topic is How JavaScript is used across industries — and, more specifically, how different industries use certain JavaScript tools, frameworks, and practices. To read more about the methodology behind this survey, click here.

Standard ECMA-262 ECMAScript® 2018 Language Specification
https://www.ecma-international.org/publications/standards/Ecma-262.htm
The official spec for ES2018 (essentially the 9th edition of the JS spec) has been published. 附：Exploring ES2018 and ES2019、Tracking ECMAScript Proposals

On Consuming (and Publishing) ES2015+ Packages
https://babeljs.io/blog/2018/06/26/on-consuming-and-publishing-es2015+-packages
For those of us that need to support older browsers, we run a compiler like Babel over application code. But that’s not all of the code that we ship to browsers; there’s also the code in our node_modules. Can we make compiling our dependencies not just possible, but normal? The ability to compile dependencies is an enabling feature request for the whole ecosystem. Starting with some of the changes we made in Babel v7 to make selective dependency compilation possible, we hope to see it standardized moving forward.

Write Perfect Code with Standard and ESLint
https://www.youtube.com/watch?v=arNtoWxBuXc
In this talk, Feross Aboukhadijeh explains about code linting – how to use Standard and ESLint to catch programmer errors before they cause problems for your users. We’ll discuss how to get started with linting, as well as how to improve your setup if you’re already linting your code.

GUI Testing Powered by Deep Learning
https://www.ebayinc.com/stories/blogs/tech/gui-testing-powered-by-deep-learning/
Contemporary developments in DL unleashes efficiencies in GUI testing and in the software lifecycle, potentially. A recent pilot, described below, proved this approach to be realistic and practical. 另附：Integration Testing with React and Enzyme

美团外卖iOS多端复用的推动、支撑与思考
https://tech.meituan.com/iOS_multiterminal_reuse.html
提到多端复用，不免与组件化产生联系，可以说组件化是多端复用的必要条件之一。大多数公司口中的“组件化”仅仅做到代码分库，使用Cocoapods的Podfile来管理，再在主工程把各个子库的版本号聚合起来。但是能设计一套合理的分层架构，理清依赖关系，并有一整套工具链支撑组件发版与集成的相对较少。否则组件化只会导致包体积增大，开发效率变慢，依赖关系复杂等副作用。

从天河2号到阿里云超算，P9技术大牛的职业发展智慧
https://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2651007990&idx=1&sn=b8bf7d5a912d8ba6a65c7ffa6cd78835
技术更迭速度之快，经常让处在高新技术行业的程序员们感到焦虑和恐慌，生怕一松懈就被这个时代无情地抛弃。在极客 Live，阿里云超算的负责人何万青老师分享了他的职业发展智慧。他更愿意称自己是“软件工程师”，不喜欢“码农”、“程序员”的称谓；他说技术人要找到自己的无穷大∞，而不应该把时间浪费在已经饱和的事情上；他说技术人的年龄是会增长的，如果只是年龄变化，其他不变，就会被替换掉。

[译]Web前端框架：是解药还是毒药
https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247489138&idx=1&sn=8b130c0ed1c972acdb3f9af5286aee08
要使用现代的前端框架，你需要下载开发环境和依赖，编译代码，然后在浏览器上运行。这个是好是坏？究竟是什么导致了这种不必要的复杂性？是因为我们构建的网站太复杂，还是因为框架本身就很复杂？

Should we use React Native?
https://blog.expo.io/should-we-use-react-native-1465d8b607ac
Watching tens of thousands of developers consider using React Native and talking to many of them, I’ve found that teams considering React Native fall roughly into three broad categories, where two of them are very likely to be successful and happy using React Native, and the other one is usually a bad time. Should I use React Native in my project? Here’s a quick guide that might help you and your team make a decision about whether React Native is a good choice for you.

Building browser extensions with React
https://www.rubberduck.io/blog/browser-extensions-react/
We build Rubberduck, a browser extension that adds IDE features (find usages, definitions, files tree) to GitHub web pages. Our users use it to read and review code faster on the web. We built Rubberduck on React, and we wanted to share our create-react-app setup for extension projects.

The best react inline style libraries — comparing Radium, Aphrodite, & Emotion
https://blog.logrocket.com/the-best-react-inline-style-libraries-comparing-radium-aphrodite-emotion-849ef148c473
This article is about inline styles. However, I’m not going to talk about what they are or whether you should use them or not. I’m going to talk about libraries that will help you use inline styles in your React application — libraries that allow you to use features that are not directly supported otherwise (like media queries). I’ll compare: Radium, Aphrodite, Emotion.

Drawing Images with CSS Gradients
https://css-tricks.com/drawing-images-with-css-gradients/
What I mean by “CSS images” is images that are created using only HTML elements and CSS. They look as if they were SVGs drawn in Adobe Illustrator but they were made right in the browser. Some techniques I’ve seen used are tinkering with border radii, box shadows, and sometimes clip-path. Let’s take a look at how you can create CSS images that way yourself.

Threads in Node 10.5.0: a practical intro
https://medium.com/dailyjs/threads-in-node-10-5-0-a-practical-intro-3b85a0a3c953
A few days ago, version 10.5.0 of Node.js was released and one of the main features it contained was the addition of initial (and experimental) thread support. This is interesting, specially coming from a language that’s always pride itself of not needed threads thanks to it’s fantastic async I/O. So why would we need threads in Node?

How to build powerful REST APIs blazingly fast with Node.js
https://resthapi.com/blog/2018/06/26/How-To-Build-Powerful-APIs-Blazingly-Fast-With-Nodejs.html
EST APIs in particular are very common place. Unfortunately when it comes to the wild west world of Javascript and Node.js, standards and good practice in writing RESTful APIs can sometimes get thrown out the window. 另附：How to build powerful REST APIs blazingly fast with Node.js

Build a Video Chat Service with JavaScript, WebRTC, and Okta
https://scotch.io/tutorials/build-a-video-chat-service-with-javascript-webrtc-and-okta
Today, I thought it’d be fun to walk you through the process of using WebRTC and Okta to build a simple video chat service that allows users to create a chatroom and share the link around to anyone they want who can then join the room and chat with them in real-time.

Web Assembly and Go: A look to the future
https://brianketelsen.com/web-assembly-and-go-a-look-to-the-future/
When Web Assembly(wasm) support landed in Go recently, I knew that the time was ripe for some experimentation. And I couldn’t wait to dive in and try it. I read a few good articles before diving in. This post will chronicle my experience. 另附：How WebAssembly is Accelerating the Future of Web Development、WebAssembly is the Future Edition、Hijacking the control flow of a WebAssembly program.

The C4 Model for Software Architecture
https://www.infoq.com/articles/C4-architecture-model
C4 stands for context, containers, components, and code — a set of hierarchical diagrams that you can use to describe your software architecture at different zoom levels, each useful for different audiences. Think of it as Google Maps for your code.

Migrating Messenger storage to optimize performance
https://code.fb.com/core-data/migrating-messenger-storage-to-optimize-performance/
More than a billion people now use Facebook Messenger to instantly share text, photos, video, and more. As we have evolved the product and added new functionality, the underlying technologies that power Messenger have changed substantially. When Messenger was originally designed, it was primarily intended to be a direct messaging product similar to email, with messages waiting in your inbox the next time you visited the site. Today, Messenger is a mobile-first, real-time communications system used by businesses as well as individuals. To enable that shift, we have made many changes through the years to update the backend system.

Refactoring Thrift schemas at Pinterest
https://medium.com/@Pinterest_Engineering/refactoring-thrift-schemas-at-pinterest-e899008ce22b
The tight coupling of the files has not only created a web of tangled dependencies among the Thrift files, but also among the applications that use them. This leads to a slow and error-prone development cycle, slowing down developer velocity across the company. To address this problem, we recently refactored our Thrift schemas, leading to a huge reduction in code build times while improving code quality and developer velocity. In this blog post, we’ll share our motivation for the project, our approach to solving the problem and the wins we’ve observed.

How not to structure your database-backed web applications: a study of performance bugs in the wild
https://blog.acolyer.org/2018/06/28/how-_not_-to-structure-your-database-backed-web-applications-a-study-of-performance-bugs-in-the-wild/
This is a fascinating study of the problems people get into when using ORMs to handle persistence concerns in their web applications. The authors study real-world applications and distil a catalogue of common performance anti-patterns. There are a bunch of familiar things in the list, and a few that surprised me with the amount of difference they can make. By fixing many of the issues that they find, Yang et al., are able to quantify how many lines of code it takes to address the issue, and what performance improvement the fix delivers.

Python 3 at Facebook
https://lwn.net/SubscriberLink/758159/f1f631e1535ab9d6/
Python 3 adoption has clearly picked up over the last few years, though there is still a long way to go. Big Python-using companies tend to have a whole lot of Python 2.7 code running on their infrastructure and Facebook is no exception. But Jason Fried came to PyCon 2018 to describe what has happened at the company over the last four years or so—it has gone from using almost no Python 3 to it becoming the dominant version of Python in the company. He was instrumental in helping to make that happen and his talk [YouTube video] may provide other organizations with some ideas on how to tackle their migration.

新鲜货

Augmented reality for the web
https://developers.google.com/web/updates/2018/06/ar-for-the-web
In Chrome 67, we announced the WebXR Device API for both augmented reality (AR) and virtual reality (VR), though only the VR features were enabled. VR is an experience based purely on what’s in a computing device. AR on the other hand allows you to render virtual objects in the real world. To allow placement and tracking of those objects, we just added the WebXR Hit Test API to Chrome Canary, a new method that helps immersive web code place objects in the real world. 另附：Chacmool: Augmented reality in Chrome Canary

MongoDB 4.0 Now Generally Available
https://www.mongodb.com/mongodb-4.0
MongoDB 4.0 is out with multi-document ACID transaction support being the headline feature. This landing page gives you access to the release keynote, downloads, a white paper, the press release, and more. 附： MongoDB Multi-Document ACID Transactions are GA、Introducing the Best Database for Modern Applications、Announcing MongoDB Atlas free tier on GCP.

We’re moving from Azure to Google Cloud Platform
https://about.gitlab.com/2018/06/25/moving-to-gcp/
GitLab.com is migrating to Google Cloud Platform – here’s what this means for you now and in the future. 另附：How we iterated and improved our frontend team culture

Firefox 61 – Quantum of Solstice
https://hacks.mozilla.org/2018/06/firefox-61-quantum-of-solstice/
Parallel CSS Parsing, Retained Display Lists, Accessibility Inspector… 另附：AV1: next generation video – The Constrained Directional Enhancement Filter

Trending Repositories of June on GitHub
https://codeburst.io/trending-repositories-of-june-on-github-bdbf90837bc6
Deno, Javascript algorithms, Build your own X, Awesome design patterns… 另附：Show your github projects in motion with animated GIFs

Font Awesome 5.1: 409 New Icons + More
https://blog.fontawesome.com/font-awesome-5-1-409-new-icons-more-4c1e407fae49
We’ve packed new icon categories, new icons, and lots of fixes under the hood to add power and ease when using our icons. You’ve got 409 new icons waiting for you. That makes more than 1,000 icons added to Font Awesome already this year!

React Developer Roadmap
https://github.com/adam-golab/react-developer-roadmap
Below you can find a chart demonstrating the paths that you can take and the libraries that you would want to learn in order to become a React developer. I made this chart for all people who encounter me with question “What should I learn next as a React developer?” to give them some tips.

react-day-picker
https://github.com/gpbl/react-day-picker
Flexible date picker component for React. Highly customizable, localizable, with ARIA support, no external dependencies, 9KB gzipped.

vuetify
https://github.com/vuetifyjs/vuetify
Material Component Framework for Vue.js. Vuetify is a semantic component framework for Vue. It aims to provide clean, semantic and reusable components that make building your application a breeze. Build amazing applications with the power of Vue and Material Design and a massive library of beautifully crafted components.

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. 另附：React-Giojs

Docz
https://www.docz.site/
It has never been so easy to document your things! To break barriers and facilitate the creation of tools was the purpose that Docz arose. Document our things is one of the most important and painful process that exist when you’re creating something new. We lose a lot of our precious time with unnecessary setups to be able to build something that can represent and express what we want with our own style.

MeQ
https://github.com/meqio/meq
A modern messaging platform for Message Push、IM、Group Chatting、IoT etc, based on MQTT protocol. MeQ is written in pure go and standard library,nearly no messy dependencies. so you can easily deploy a standalone binary in linux、unix、macos、windows.

DevTube
https://dev.tube/
The best developer videos in one place

Mastodon
https://www.joinmastodon.org/
Social networking, back in your hands. The world’s largest free, open-source, decentralized microblogging network. 附：Why Mastodon ActivityPub protocol is the future

设计

Sketch插件Kitchen深度体验
https://uiiiuiii.com/software/80342.html
听说它能帮你节省50%的低效时间。「Kitchen」是蚂蚁金服体验科技发布最新的 Sketch 工具集，支持设计稿快速同步协作；快速配置表格、按钮、分页等 Ant Design 组件；提供精选色板，并可以管理属于你的色板库；接入海量 Iconfont 图标资源，可拖拽修改图标。本着认真负责的态度，这次测评将会从这款插件的各个功能入手，通过实际体验告诉你到底好不好用。

How To Get To Know Your Users
https://www.smashingmagazine.com/2018/06/how-to-get-to-know-your-users/
This article will look at how going below the surface during user research helps us really understand what triggers our users, and how those deeper insights will help us design for persuasion.

The Philosophy in Games
https://blog.prototypr.io/the-philosophy-in-games-e7faef8f9213
What can philosophy and games teach us about Life?

Designing for accessibility is not that hard
https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94
Seven easy-to-implement guidelines to design a more accessible web

The most important steps to becoming a great design leader
https://www.invisionapp.com/blog/most-important-steps-becoming-great-design-leader/
Most designers, when presented with a leadership opportunity, leap into the role enthusiastically, unaware of the challenges ahead. That’s what an opportunity is, right? A new, uncharted frontier full of mystery and the just right set of circumstances?

10 Small Design Mistakes We Still Make
https://uxplanet.org/10-small-design-mistakes-we-still-make-1cd5f60bc708
Don’t Make Me Think by Steve Krug. 另附：The ten commandments of UX.

产品及其它

What 7 Creepy Patents Reveal About Facebook
https://www.nytimes.com/interactive/2018/06/21/opinion/sunday/facebook-patents-privacy.html
Here are seven Facebook patent applications that show how the company has contemplated gathering and exploiting your personal information.

Interactive maps, now in your language
https://blog.wikimedia.org/2018/06/28/interactive-maps-now-in-your-language/
Imagine you needed to learn about a foreign land, but the only map you had was written in a mysterious script you couldn’t read. That might sound like a plot twist from some adventure story, but it’s actually the situation visitors to Wikimedia projects—including Wikipedia—often found themselves in until recently. An extension called Kartographer enables Wikimedians to create interactive maps simply by supplying the longitude and latitude of a location.

微信的操作系统之路
https://mp.weixin.qq.com/s?__biz=MjM5NzYxMzk4MQ==&mid=2649331233&idx=1&sn=bfa719f584315a047b4a4d68a5efa4c1
这些年来，中国互联网很少有像微信这样影响巨大的产品。因此，今天我想基于微信发展过程中的关键决策，提供一些思考。我会从四个部分分析它： 1）用户在微信发展早期对它的定位：聊天工具; 2）本周引发最多讨论的问题：朋友圈和公众号的内容生态; 3）微信的商业化探索。2013 年腾讯年会，总裁刘炽平喊出了这个口号：微信商业化的元年到了; 4）最后，微信有好几年没有动作，满世界都在说微信老了，于是才有今天的第四部分：小程序.

Google 和央美合作，把徐悲鸿的 200 件画作搬到了线上
http://www.geekpark.net/news/230408
科技和艺术文化的交融已经成了一个绕不开的话题，Google 也有这样一个非营利性的项目，叫 Google Arts & Culture，简单来说就是把艺术文化作品数字化，搬到线上，还用 VR 等技术加深用户的观赏体验。去年 12 月，Google Arts & Culture 和故宫合作，把故宫博物院的几百件珍宝做了线上高清处理，同时开展了一系列策展活动，这对中国艺术的传承和传播有着很重要的意义。2018 年 6 月 19 日，在中央美术学院 100 周年校庆之际，Google Arts & Culture 又和中央美院的美术馆进行合作，上线了一系列馆内珍藏的艺术作品。

– THE END –