FEX 技术周刊 - 2018/05/21

业界会议

FDCon2018 - 第三届中国前端开发者大会
https://fdcon.topgeek.org/
前端体验的融合开发之道，期待演讲资料和文章。

深阅读

Introducing Git protocol version 2
https://opensource.googleblog.com/2018/05/introducing-git-protocol-version-2.html
Git protocol version 2, a major update of Git’s wire protocol (how clones, fetches and pushes are communicated between clients and servers). This update removes one of the most inefficient parts of the Git protocol and fixes an extensibility bottleneck, unblocking the path to more wire protocol improvements in the future. The protocol version 2 spec can be found here . The main improvements are: Server-side filtering of references; Easy extensibility for new features like ref-in-want and fetching and pushing symrefs Simplified client handling of the http transport.

What if JavaScript wins?
https://medium.com/@anildash/what-if-javascript-wins-84898e5341a
JavaScript is now part of the toolkit of most working developers. What if network effects push it into being the first-ever truly dominant programming language?

Web performance made easy
https://www.youtube.com/watch?v=Mv-l3-tJgGk
The web has made great progress in enabling fast experiences, but building a fast site today isn’t trivial. At Google, we analyze a lot of sites and have learned what makes them load quickly and run smoothly. In this talk, Ewa Gasperowicz and Addy Osmani show you how to find and fix the most common web performance bottlenecks to improve your UX by using tools like Lighthouse and DevTools, and discover the latest browser APIs (e.g. Service Workers, Async Images, Fetch Priorities) to get more control over your loading experience. 另附：Using Lighthouse To Improve Page Load Performance、First Input Delay: A New Web Interactivity Metric.

First Look: Angular Ivy - Angular’s new rendering pipeline and view engine
https://www.telerik.com/blogs/first-look-angular-ivy
We’re going to take a look at what Ivy is, how it works, and how you can stay up to date on its progress. Just a caveat: Ivy is still in early stages of being actively developed, so this article is subject to change. Okay, let’s get to it!

Modern Web Stack—Rails 5 API + ActiveAdmin + Create React App on Heroku
https://blog.heroku.com/a-rock-solid-modern-web-stack
Rails is an incredible framework, but modern web development has moved to the front-end, meaning sometimes you don’t need all the bulk of the asset pipeline and the templating system. In Rails 5 you can now create an API-only Rails app, meaning you can build your front-end however you like—using Create React App. 另附：Create React App Parcel

Debugging Modern Web Applications
https://hacks.mozilla.org/2018/05/debugging-modern-web-applications/
Building and debugging modern JavaScript applications in Firefox DevTools just took a quantum leap forward. In collaboration with Logan Smyth, Tech Lead for Babel, we leveled up the debugger’s source map support to let you inspect the code that you actually wrote. Combined with the ongoing initiative to offer first-class JS framework support across all our devtools, this will boost productivity for modern web app developers. 另附：What’s new in Chrome DevTools.

Page Transitions for Everyone
https://css-tricks.com/page-transitions-for-everyone/
Animation matters. It can be used to improve the user experience. On the web, most of the effort used to improve the experience is in structure, visual design, or even the performance of the site. There are some elements you can swipe around here and there, but that’s about it. A boring remnant of the time when the web was simply used to navigate through a bunch of text pages later upgraded with some sliding text.

A Strategy Guide To CSS Custom Properties
https://www.smashingmagazine.com/2018/05/css-custom-properties-strategy-guide/
Custom properties have a huge potential to change how we write and structure CSS and to a lesser extent, how we use JavaScript to interact with UI components. I’m not going to focus on the syntax and how they work (for that I recommend you read “It’s Time To Start Using Custom Properties”). Instead, I want to take a deeper look at strategies for getting the most out of CSS Custom Properties.

Clean Node
https://medium.com/the-node-js-collection/clean-node-1df635d176f7
This article is first of a three-part series discussing this exact topic and suggesting potential solutions. Each article will use a test-first approach, either unit or end-to-end: This first article will set a common ground: quick and dirty version with end to end tests and discussing common mistakes, general opinions and misconceptions; The second article will refactor the “quick and dirty” version with unit tests and a layered architecture; The fourth article will refactor the code using the Clean Architecture and unit tests.

The http headers we don’t want
https://www.fastly.com/blog/headers-we-dont-want
Let’s look at the unnecessary headers and see why we don’t need them, and what we can do about it.

Building Services at Airbnb, Part 2
https://medium.com/airbnb-engineering/building-services-at-airbnb-part-2-142be1c5d506
The second in a series on scaling service development, this article looks at some of the key tooling that supports the new Services Oriented Architecture at Airbnb.

Performance Impact of Removing OOBGC
https://githubengineering.com/removing-oobgc/
GitHub used an Out of Band Garbage Collector (OOBGC) in production. Since removing it, we decreased CPU time across our production machines by 10%. Let’s talk about what an OOBGC is, when to use it, and when not to use it. Then follow up with some statistics about the impact of removing it from GitHub’s stack.

Full Cycle Developers at Netflix — Operate What You Build
https://medium.com/netflix-techblog/full-cycle-developers-at-netflix-a08c31f83249
Fast forward to 2018. Netflix has grown to 125M global members enjoying 140M+ hours of viewing per day. We’ve invested significantly in improving the development and operations story for our engineering teams. Along the way we’ve experimented with many approaches to building and operating our services. We’d like to share one approach, including its pros and cons, that is relatively common within Netflix. We hope that sharing our experiences inspires others to debate the alternatives and learn from our journey.

AI and Compute
https://blog.openai.com/ai-and-compute/?
Three factors drive the advance of AI: algorithmic innovation, data (which can be either supervised data or interactive environments), and the amount of compute available for training. Algorithmic innovation and data are difficult to track, but compute is unusually quantifiable, providing an opportunity to measure one input to AI progress.

Algorithms Behind Modern Storage Systems
https://queue.acm.org/detail.cfm?id=3220266
This article takes a closer look at two storage system design approaches used in a majority of modern databases—read-optimized B-trees1 and write-optimized LSM (log-structured merge)-trees5—and describes their use cases and tradeoffs.

Big Data File Formats Demystified
https://www.datanami.com/2018/05/16/big-data-file-formats-demystified/
The big data community has basically settled on three optimized file formats for use in Hadoop clusters: Optimized Row Columnar (ORC), Avro, and Parquet. While these file formats share some similarities, each of them are unique and bring their own relative advantages and disadvantages.

Dynamic Programming – 7 Steps to Solve any DP Interview Problem
http://www.novaspivack.com/science/we-have-discovered-a-new-pattern-in-the-prime-numbers-parallax-compression
Many tech companies like to ask DP questions in their interviews. While we can debate whether they’re effective in evaluating someone’s ability to perform in an engineering role, DP continues to be an area that engineers trip on their way to finding a job that they love.

Docker is the dangerous gamble which we will regret
http://www.smashcompany.com/technology/docker-is-a-dangerous-gamble-which-we-will-regret
Every time I criticize Docker I get angry responses. When I wrote Why would anyone choose Docker over fat binaries? 6 months ago I saw some very intelligent responses on Hacker News, but also some angry ones. So in writing this current essay, I am trying to answer some of the criticism I expect to get in the future.

Tarballs, the ultimate container image format
https://www.gnu.org/software/guix/blog/2018/tarballs-the-ultimate-container-image-format/
On your Guix machine, you run: guix pack -S /opt/gnu/bin=bin guile gnutls guile-json , and you get a tarball containing your favorite programming language implementation and a couple of libraries, where /opt/gnu/bin is a symlink to the bin directory containing, in this case, the guile command. Add -f docker and, instead of a tarball, you get an image in the Docker format that you can pass to docker load on any machine where Docker is installed. Overall that’s a relatively easy way to share software stacks with machines that do not run Guix.

Safe ways to do things in bash
https://github.com/anordal/shellharden/blob/master/how_to_do_things_safely_in_bash.md
Bash has arrays and a safe mode, which may make it just about acceptable under safe coding practices, when used correctly.
另附：Shell Style Guide

The Zen of Erlang
https://ferd.ca/the-zen-of-erlang.html
语言爱好者可以学习：That’s the Zen of Erlang: building interactions first, making sure the worst that can happen is still okay. Then there will be few faults or failures in your system to make you nervous (and when it happens, you can introspect everything at run time!) You can sit back and relax.

新鲜货

Open Data Charter Principles – The Measurement Guide is out now!
https://webfoundation.org/2018/05/open-data-charter-principles-the-measurement-guide-is-out-now/
We are pleased to announce the launch of our Open Data Charter Measurement Guide. The guide is a collaborative effort of the Charter’s Measurement and Accountability Working Group (MAWG). It analyses the Open Data Charter principles and how they are assessed based on current open government data measurement tools. Governments, civil society, journalists, and researchers may use it to better understand how they can measure open data activities according to the Charter principles.

Polymer 3.0
https://www.polymer-project.org/3.0/docs/about_30
在 Google/IO 上正式发布，另附：Google力推的那些前端技术，最近都有哪些进展

The Front-End Tooling Survey 2018 - Results
https://ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results
Over 5,000 frontend developers took part in this survey we linked a few months ago. Here are the results on what tools and techniques devs are using right now.

TypeScript 2.9 RC
https://blogs.msdn.microsoft.com/typescript/2018/05/16/announcing-typescript-2-9-rc/
Support for symbols and numeric literals in keyof and mapped object types; import() types; Unconstrained type parameters are no longer assignable to object in strictNullChecks; keyof types include symbolic/numeric properties.

Nest 5: The official release 🚀 Node.js in 2018
https://medium.com/@kammysliwiec/nest-5-the-official-release-node-js-in-2018-1b6d3a47b104
Nest 5: A progressive Node.js framework for building efficient and scalable server-side applications. After a long road, the new major release is finally here and brings tons of improvements, new features, and several bug fixes. However, before diving into new things that have been shipped by this release, I would like to share my individual thoughts with you.

Signale
https://github.com/klauscfhq/signale
Hackable and configurable to the core, signale can be used for logging purposes, status reporting, as well as for handling the output rendering process of other node modules and applications.

Data-Forge
https://github.com/data-forge/data-forge-ts/
The JavaScript data transformation and analysis toolkit inspired by Pandas and LINQ. Implemented in TypeScript, used in JavaScript ES5+ or TypeScript.

Bazel
https://bazel.build/
Bazel is an open-source build and test tool similar to Make, Maven, and Gradle. It uses a human-readable, high-level build language. Bazel supports projects in multiple languages and builds outputs for multiple platforms. Bazel supports large codebases across multiple repositories, and large numbers of users.

Hotkeys
https://github.com/jaywcjlove/hotkeys
A robust Javascript library for capturing keyboard input. It has no dependencies.

fast-copy
https://github.com/planttheidea/fast-copy
A blazing fast deep object copier

lynt
https://github.com/saadq/lynt
A zero config JavaScript linter with support for Typescript, Flow, and React.

Weex-UI
https://alibaba.github.io/weex-ui/#/
A rich interaction, lightweight, high performance UI library.

Vuestic Admin Dashboard
https://github.com/epicmaxco/vuestic-admin
Responsive admin dashboard template built with Vue.js and Bootstrap 4.

Making Fuse free and Open Source
https://fuse-open.github.io/
Fuse is a cross-platform mobile app development tool suite, supporting building Android and iOS applications. With Fuse you can build native mobile user interfaces using the easy to learn UX Markup language, and use JavaScript to add business logic.

build-your-own-x
https://github.com/danistefanovic/build-your-own-x
Build your own (insert technology here)

Awesome Scalability
https://github.com/binhnguyennus/awesome-scalability
High Scalability, High Availability, High Stability, High Performance, and High Intelligence Back-End Design Patterns

Make Frontend Shit Again
https://makefrontendshitagain.party/
We used to make websites because it was fun and at a point we lost the way. We need to make dumb shit! Make useless stuff; make the web fun again!

Flopstarter - A platform for bad ideas
http://flopstarter.com/
Flopstarter is a real crowdfunding site. A platform for bad ideas. So far we have had hundreds of submissions to the site, all of them useless. All projects will be completed if funded.

设计

We Are Designers By Nature
http://moha.studio/labs/introduction-to-design-we-are-designers-by-natural.html
Our planet natural is rich with millions of samples of design, if you break it down into smaller components you will figure out more an of micro-designs. For me, that’s why I fall in love with the design, it’s the way of universe creation. Design principles are many, for example, Golden ratio. you can view the next video to learn more about golden ratio implementation in the universe around you.

Landing The Concept: Movie High-Concept Theory And UX Design
https://www.smashingmagazine.com/2018/05/high-concept-theory-ux-design/
Steven Spielberg once famously said, “If a person can tell me the idea in 25 words or less, it’s going to make a pretty good movie.” What if the same were true for websites? Do sites that explain their ‘concept’ in a simple way have a better shot at mass-appeal with users? If we look at the super simple layout of Google’s homepage, for example, it gives users a single clear message about its concept equally as well as the Jaws movie poster: Being aware of the importance of ‘high-concept’ allows us — as designers — to really focus on user’s initial impressions.

Apple News — a usability case study
https://uxdesign.cc/apple-news-a-usability-case-study-1ae7b037a7fd
As a frequent user of the Apple News app, I liked it for a whole year. It wasn’t amazing, but it got the job done, and I was too lazy to download a new app. But then suddenly, two months ago, it just became too much. Waking up every day and seeing those sad and negative headlines, it wasn’t the best way to start the day. Then, I decided not to check the news in the morning and do it around noon, but sometimes it would just ruin my lunch. Later, I changed it for the nighttime, and I couldn’t sleep because I felt like the world was going to end.

Design for Humans Or 14 Principles of Good Design
https://uxplanet.org/design-for-humans-e8fc7924286d
Principles of Good Design has been taken from the book Hackers and Painters. The essay inspired me to explore about Design and look around to understand how things work. This article is a result of the ideas I gathered over the last one year.

Exploring the Gestalt Principles of Design
https://www.toptal.com/designers/ui/gestalt-principles-of-design
There are six individual principles commonly associated with gestalt theory: similarity, continuation, closure, proximity, figure/ground, and symmetry & order (also called prägnanz). There are also some additional, newer principles sometimes associated with gestalt, such as common fate.

Investigating User Experience with Natural Language Analysis
https://blog.algorithmia.com/investigating-user-experience-with-natural-language-analysis/
User experience and customer support are integral to every company’s success. But it’s not easy to understand what users are thinking or how they are feeling, even when you read every single user message that comes in through feedback forms or customer support software. With Natural Language Processing and Machine Learning techniques it becomes somewhat easier to understand trends in user sentiment, main topics discussed, and detect anomalies in user message data. 另附：Smart Compose: Using Neural Networks to Help Write Emails

腾讯设计精品课
https://isux.tencent.com/articles/design-course.html
设计精品课栏目是由腾讯资深设计师主讲，基于腾讯课堂平台定期开课，分享设计师面对海量用户时所使用的设计经验、策略和实战方法。希望课程能够帮助大家拓宽视野，提升专业能力。

产品及其它

Introducing Surface Hub 2
https://www.microsoft.com/en-us/surface/business/surface-hub-2
Turn any space into a teamwork space. Move beyond meetings, to true teaming. Teams come in all shapes and sizes. They can be local or spread across the globe. People are your biggest investment – and your most valuable asset. To transform from collaboration to true teamwork, you need to invest in tools that bring out their best in the conference room, in a team space, in any space.

Helping Teams Get Started
https://stackoverflow.blog/2018/05/16/helping-teams-get-started/
Two weeks ago, we released Stack Overflow for Teams—a way for teams to share information privately. A ton of work over the last year has been done to release this exciting new product. This post goes into how we designed the custom Team onboarding experience and how we see this feature possibly expanding in the future.

一个SaaS项目失败的5个关键原因
http://36kr.com/p/5134841.html
2016-2018，经历了一款已关闭的SaaS客服产品“A”，希望通过复盘项目失败的原因，作为经验总结，同时也分享给各位SaaS创业者参考。
另附：做了 3 年企业级 SaaS，我收获的 10 点心得

中国芯酸往事
https://mp.weixin.qq.com/s?__biz=MzI3MjYxNDcxNA==&mid=2247484084&idx=1&sn=d8885c2eee0f2c62c38c822cbf810184
芯片的产业化，需要依靠无数百万年薪的顶级工程师，而不是把希望寄托在拿几千块工资骑自行车上下班的老专家们的无私奉献。

真正决定一个人价值的，是那些艰难时刻的选择
https://mp.weixin.qq.com/s?__biz=MzUyMDQ5NzI5Mg==&mid=2247495816&idx=1&sn=3f4fd6969e52c7ab1a16842f6db94c93
创业就是一场修行，唯艰难时刻的选择，最难。什么叫“即便刀山火海，也只能往前走”？什么叫“如果你选择的是一个坑，那可能就是深渊”？什么叫“没有别的办法，只能选择相信自己”？车好多杨浩涌、车和家李想、滴滴程维等11位一线创业者说出了自己艰难时刻的选择，真实、犀利、扎心，值得你反复体味。
另附：投了陌陌、滴滴的经纬中国，总结了过去十年中国优秀创业者的这些核心气质

陆奇：如何成为一个优秀的工程师
https://mp.weixin.qq.com/s?__biz=MzA3OTQyNzcwNw==&mid=2650387426&idx=1&sn=8f47c85367575a4d65608d8d6e4fdcae
我们一定要有一个坚定不移的深刻的理念，相信整个世界终究是为技术所驱动的；有没有其他人已经解决这个问题？然后你可以把你的时间放在更好的创新上；做什么事情一定要做最好，一定要是做业界最强的；我把自己想象是一个软件、一个代码，今天的版本一定要比昨天版本好，明天的版本肯定会比今天好；看到问题也不要去问别人，就把它Fix。